Vom Foto zur Zeichnung mit Photoshop

tempa wrote this 03:50:

Originalfoto Auf doublenine (link lost) habe ich ein Tutorial entdeckt: In fünf Schritten vom Foto zur Zeichnung.. Cool, gleich mal probieren. Also ein Foto geschnappt. Ich verwende das Photocase-Bild von Tschanga Hausfrauenklischee
Nick Slusarczyk (link lost) geht einen anderen Weg als ich sonst. Gewöhnlich mache ich ein Greyscale und spiele mit den Kontrasten. Es reichen meist ein sehr harter Kontrast und ein etwas weicherer, die man mit unterschiedlichen Opacitiy-Werten übereinanderlegt.

Meine Methode im Vergleich zu der von Nick Slusarczyk

  1. Dublizieren Strg+Shift+U um die Farbe ein Greyskale zu erhalten (gleich noch einmal dublizieren, denn wir brauchen zwei davon)
  2. Kontraste Helligkeit 40, Kontrast 100 das darüberligende Helligkeit -20 Kontrast 100 und Opacity 30.
  3. Kleine Momente des FrustsEntweder so wie ich das gewöhnlich macheSo gross … selber mit den dem Buntstift Farben flächig verteilen und dabei auch die Farben des Originals ignorieren (siehe Kleine Momente des Frusts (link lost) Ersatzweise ein Bsp. rechts) oder wie jetzt hier mehrere Ebenen des Originals über einander oberhalb der beiden Greyscale Ebenen und so lange gespielt bis mit Multiplizieren, Farbe und ineinander kopieren, bis es passt.

Originalfoto Foto Greyscale Recolored

Bei der Methode mit von Nick Slusarczyk über den selektiven Weichzeichner überspringe ich die Schritte drei und vier. Die weiteren Schritte hatten nicht das gewünschte Ergebnis erbracht. Auch habe ich an den ersten Schritt noch ein Scharfzeichnen gesetzt. Und dann wieder beim 5 Schritt eingesetzt

Originalfoto Outlined Recolored

Jetzt habe ich also zwei Methoden, um aus einem Foto ein einen Comic zu machen. Auch gut.

Übrigens das Bild oben kombiniert die Methoden und spielt noch einmal mit Opacity in den verschiedenen Ebenen. Auch wirken sich nun die Schritte in Fünf hier wieder positiv aus.

Ursprünlich am 28. Mai 2005 unter blog.templaterie.de/wordpress publiziert.

Ein Sigel für die Website

tempa wrote this 12:33:

Das Tutorial stammt laut tempalog vom Sonntag, 4. August 2002, 11:12. Ich habe schon Ewigkeiten keines mehr verfasst, sollte ich wieder anfangen. Aber jetzt wird erst einmal das alte hier wieder vorgestellt und als Ganzes eingestellt, weil ich die alte Seite nicht mehr Promoten möchte. Wobei es vermutlich im Templaterie Blog besser aufgehoben wäre. Aber mir gefällt der Raum hier besser. Ich kann ja hierher verlinken. Wobei mir einfällt, dass ich hier unbedingt noch für die Templaterie werben sollten. [Werbung:] Templaterie, ein guter Weg sich für wenig Geld eine tolle Website inklusive MiniCMS (also die Website online selbst ohne Fachwissen einfach bearbeiten kann) zu ergattern. ;o) [/Werbung] … und später bau ich unten noch den Button ein.

Das folgende Tutorial ist auf der Basis von Photoshop 5.0 geschrieben, kann aber mit den gängigen Grafikprogrammen in aller Regel auch nachgemacht werden.

Was soll am Ende rauskommen?

Sigel für Dokumente auf der Website

Um Verträge vor Manipulation zu schützen werden diese auch heute noch oft mit Ösen, rotweißen Kordeln und Sigelwachs gebunden. Lieferanten für Rechtanwälte und Notare haben hier wie anno dazumal ein buntes Sortiment an Wachsen, Kordeln und Sigelstempel. Ein Siegel ist ein Stück Tradition des Vertrauens.

Alles fängt mit zwei ovalen Auswahlfelder in Rot und Weiß an.

(mehr …)

Uralte Entwürfe

tempa wrote this 21:25:

Huch, eben wieder im alten tempalog (stillgelegt) gekruschtelt und alte Entwürfe für Tempus Creativ von 2002 entdeckt:
Webvitienkarten-Entwurf

Detail des Entwurfes

Ich denke nicht, dass ich dieses Design umsetzen werde, denn ich habe mir für tempus creativ einen Richtungswechsel vorgenommen und damit den Abschied von Logo und allem was an die alte Site tempuscreativ.de erinnert. Dennoch finde ich die Idee witzig, Motive aus einem kleinen Thumbnail in eine Textbox zu übernehmen und Linen fortgeführt werden und stelle die Entwürfe hier gerne noch einmal vor. (mehr …)

Grundlage eines Templates für die Monitor-Ausgabe

tempa wrote this 03:37:

Ein Template unterliegt wie in diesem Blog schon ausgeführt den Schranken des Monitors. Dessen Maße und die des Browserfenster bestimmen die Proportionen.
Screenraster

Ähnlich wie man ein DIN A4-Bogen falten kann, kann man auch den Monitor unterteilen. Basis für dieses Raster ist die Auflösung 1024×768 Pixel und im Firefox sind bei kleinen Symbolen die Tabs aktiv. Damit ergeben sich Aussenmaße von 1000×590 Pixel, wobei der Skrollbalken aktiv ist und nicht mitgerechnet wurde. Im Internetexplorer kommen i.R. noch 20 Pixel in der Höhe dazu. Eine Officeleiste rechts oder Links habe ich nicht berücksichtigt. Unberücksichtigt blieben auch alle verkleinerten Fenster. Natürlich kann jeder Nutzer ein Fenster auch verkleiner und die Maße können jedes Format annehmen, auch ein Hochformat. Auch wenn man sich dessen eingedenk ist, wir diese Tatsache einem bei der Arbeit nicht helfen. Denn ein Design orientiert sich am Portrait oder am Panorama. Nutzer, die z.B. eine Breite Todo-Liste oder die Favoriten oder die History offen haben, werden das Web anders wahrnehmen, als diejenigen, die diese Leiste geschlossen haben. Im Firefox lässt sich die Seitenleiste fast bis zur Mitte schieben oder das Fenster um ca. ein fünftel verschmälern. Im Internet Explorer ist die Variationsbreite der Favoritenleiste links von 10% zu knapp 50% der Gesamtbreite des Fensters.

Da sich diese Fenster bequem zu- und wegschalten lassen, neige ich dazu sie zu ignorieren. Wer dies nicht ignoriert, hat einen Innenbereich bei 1024×768 von ca. 600×600 Pixel der skrollfrei dann existiert, wenn der Nutzer nicht auch noch das Fenster verkleinert nutzt. Das sind soviele Varianten und Unbekannten, dass man diese schlicht auch in die Tonne geben sollte wenn man ein Templatedesign beginnt. Zumindest halte ich es so, da sich das bewährt hat und mir in all den Jahren keine Klagen kamen.

Es soll keiner sagen, animierte Gifs sind doof

tempa wrote this 22:59:

Rattenscharf ist diese Website, die Musik und animierte Gifs nutzt: Blaue Bälle

via Ehrensenf

Mal ketzerisch gefragt, wie stets denn mit der QuellenVia-Angabe bei Ehrensenf? Die werden ihre Quellen doch auch nicht aus einer göttlichen Eingebung schöpfen. Hmmm. Macht nichts.

Ich danke jedenfalls Claudia Reiser (meiner Tippgeberin), dass sie mich auf die Blauen Bälle aufmerksam machte. Entsetzlich fand ich die Horroreinlage auf worth1000 (Da sind ein paar Illustrationen dabei, die hätte ich gerne nicht gesehen.) Achtung! Ernst gemeinter Hinweis: Der folgende Link kann Phobiker die letzten Nerven kosten: Contest Phobien, ich jedenfalls schaue nicht noch einmal hin und amüsiere mich mit den blauen Bällen.

Die sind einfach gigantisch. Tschüss.

In der Schweiz verfärben sich die Blätter schwarz rot gold

tempa wrote this 12:08:

Herbstliches Schwarz Rot Gold flattert mir von einer Pappel, Ulme oder Ahornart … so genau darf man uns das nicht fragen und ich habe nun mein Pflanzenbestimmungsbuch als alten Herbarientagen nicht aus der Bücherkiste gekramt … jedenfalls flattert mir ein deutschtümelndes Laub aus der Schweiz ins Fach und klar dass da die Schweizermacher ran müssen. Das Ergebnis kann sich sehen lassen und was als Spaß begann ist nun schon ein Banner, das man auf Webseiten einbinden kann.
Schweizer Skisaison

Passend ein Banner oder Headerbild für Ski- und Rodel-nahe Websites, z.B. ein Sportgeschäft. Dazu ein Template aus der Templaterie z.B. dieses klassische Template-Design und keine sorge so ein Template kann man umfärben (dann passt auch mit den Farben ;)) und schon hat man aus ein wenig Rumgealberne wieder Produktives und Abrechnungsfähiges geschaffen. Das Foto des Snowboardes stammt übrigens von Photocase.com.

Templates entwerfen

tempa wrote this 02:30:

Template doodle 63

und

Template doodle 64

Wenn sich diese nun auch so schnell schreiben ließen … wobei bei den beiden nichts kompliziertes dabei ist. 😀 Sollte sich also auch schnell realisieren lassen. Na, schau’n wir Mal was ich die nächsten Tage so mache … wozu ich Lust habe oder was dringend erfüllt werden sollte.

Bilderzuschnitt mit CSS

tempa wrote this 03:29:

So ca. passt das Bild schon vom Format. Eigentlich lohnt sich der Aufwand nicht, hier für noch einmal das Bildbearbeitungsprogramm anzuwerfen. Stauchen will man es aber auch nicht. Kein Problem.

< style>img {width: meine Größe; height: meine Größe; overflow: hidden;}</style>

Packt man das ganze nun noch in einen geblockten und mit float in Reihe gebrachten Absatz, der ein Hintergrundbild in Form eines Dias oder anderen hübschen Passpartous, dann hat man für Editland auch schon ein interessantes Gimmick.

Ich brauchte eine Lösung für eine Anfrage mit heftigst Layouttabellen. Uuuuieeeh. Halbwegs einfach muss es sein. Schnell muss es gehen. Und die Bilder sollte auch nur ungefähr stimmen müssen … wobei bei der Seite, um die es ging, waren wohl einige kleine Monster mit der Maus im CMS skaliert worden … jajaja … eigentlich sollte hier eine Warnung ausgegeben werden. Aber naja.

Für das Angebot wurde die Demoprovinz Quest ein wenig umdekoriert. Vorübergehend hat das auch sIFR lahmgelegt … da werde ich noch nach Tippfehlern und Unverträglichkeiten suchen müssen. allerdings ist die Zahl der Plugins auch jenseits von gut und böse langsam.

Aber zurück zum Thema und fort zum Anwendungsbeispiel: Die Diasammlung

Fotomanipulation: lebendige Bilder

tempa wrote this 02:32:

Es war wirklich Zeit für eine Pause
So … bevor ich noch verrückte Hunde über meinen Schreibtisch rennen und buddeln sehe, schnell die dazugehörigen Links verpostet und gute Nacht. Noch ein Linktipp via Pixelfresh: Wenn Bilder aus dem Rahmen fallen

Das Tutorial zum Forencontest: Worth1000: Out-of-Bounds

Die Bilder meiner kleinen Bildmontage entstammen Photocase:
Buch mit Brille (von Nick Moonie)
Hund am Strand (von Frank Berger)

Ein Zahnrad auf die Schnelle

tempa wrote this 00:55:

Zahnrad erstellen

Schritt 1:
Unsere Grundform ist ein eckiger Balken und ein Kreis. Den Balken dublizieren und drehen. In Photoshop: Strg + T und Kontextmenü „… per Eingabe“ dreimal 45°. Alle Elemente mittig ausrichten und die Ebenen verschmelzen.

Schritt 2:
auf die Ebene den Gausschen Weichzeichner mit 4,0 anwenden.

Schritt 3:
auf die Eben Unscharf maskieren anwenden. Stärke 500, Radius 60 und Schwellenwert 0

Voila.

Die kleinen Effekte mit der Oberflächenoptik erzielt man, in dem man zunächst die transparenten Bereiche schützt und dann wild mit dem Pinsel darauf herum kritzelt. Anschließend wendet man die Bewegungsunschärfe (Wert ca. 40-50) an. Das kann man so oft wiederholen, bis man ungefähr das hat, was man möchte. Da Finishing erfolgt über Störungen hinzufügen. Ein Wert zwischen 25 und 50 ist wunderbar (ich ziehe die Option monochrom vor) und anschließend noch einmal Bewegungsunschärfe. Den 3D-Effekt erzielt man über den Ebenen-Effekt „abgeflachte Kante innen“. Je nach Wunsch mit den Reglern Farbtiefe und Weichzeichnen spielen. Hier 20:3.

Viel Spass.

Recent Comments:

  • Silke schümann { Du warst auf dieser Seite: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau http://templaterie.de/blog/931/step1-zur-archiv-thumbgalerie-via-custom-fields-marke-eigenbau/ Hier war ich noch am Basteln. Ich fürchte meine PHP-Kenntnisse sind... } – Aug 26, 9:29 AM
  • Andreas { Hey, ich habe den Code wie oben benutzt und auch $dgal = get_posts('category=1′); on der richtigen Zeile eingesetzt nur bei mir läufts immernoch nicht. Kann... } – Aug 26, 3:20 AM
  • Fred { "wer Smarty lernt, kann tatsächlich gleich auch PHP mitmachen, ich hatte es eine zeitlang auch eingesetzt, aber jetzt mach ich es wieder auf meine art... } – Jan 06, 7:14 PM
  • Silke Schümann { Das klingt nach einem Syntaxfehler in der ersten Zeile. Anführungszeichen korrekt? Und das Plugin funktioniert nur innerhalb von Editland. Die index.php ausserhalb von Editland aufzurufen... } – Jun 18, 3:40 PM
  • Jörg { Hallo, ich habe die index.php im ersten Abschitt Nr. 3 beschrieben, angelegt. Beim Aufruf der Seite wird folgende Fehlermeldung angezeigt: Parse error: parse error, unexpected... } – Jun 18, 3:14 PM
  • Michael { Gern geschehen 😉 } – Mai 29, 2:31 PM
  • Silke Schümann { Jepp. Das war's: ES tut! Lösung ist nun in einem eigenen Beitrag: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau Fertig und betriebstüchtig! 🙂 } – Mai 29, 1:25 PM
  • Michael { Wie wäre es, wenn Du die Zeile $dgal = get_posts('category=1'); auslagerst und den Rest in eine Funktion packts, der Du $dgal übergibst. Das wäre auch... } – Mai 29, 12:45 PM
  • Silke Schümann { Ich ziehe diees Variante ebenfalls vor, dovh wenn ich Code übernehmen, dann ändere ich hierfür nicht extra. Es dürfte gehzpft wei gesprungen sein, welche man... } – Mai 29, 2:00 AM
  • Ulf { ich würde bei der Syntax für Schleifen konsequent die C-ähnliche Variante mit geschweiften klammern nehmen, nicht die alternative mit Doppelpunkt und "endwhile" bzw. "endforeach". } – Mai 29, 12:00 AM
  • Silke Schümann { Ich habe ich http://franchie.de die Thumbs in der Sidebar erfolgreich ausgelesen. Ansonsten ist die Test-Umgebung unter 1a-test dot de / blog Ich will diese Adresse... } – Mai 28, 11:37 PM