Tutorial Distress Font Effekt

Wie versprochen werden die Abstände zwischen den Tutorials wieder kürzer und hier kommt schon das nächste. Ausnahmweise mal hauptsächlich ein Illustrator-Tutorial. Wie kann ich beliebige Schriftarten mit einem Grunge-Look belegen, ohne die Editierbarkeit zu verlieren? – Die Antwort heißt: Deckkraftmasken.

Das ganze Verpacken wir wie immer noch in einem Designbeispiel, viel Spaß mit dem neuen Tutorial!

Gehen wirs an | Schwierigkeitssufe: leicht-mittel

 

Business Webicon mit Photoshop erstellen

In diesem Tutorial erläutere ich euch, wie man in den Programmen Illustrator und Photoshop gemeinsam ein Icon für eure Internetseite erstellen kann.

Schwierigkeitsstufe: mittel

Schritt 1

Erstellt als erstes ein Illustrator Dokument. Zeichnet nun mit dem Zeichenstift-Werkzeug (Apfel+P) eine halbe Silhouette eines Kopfes nach. Dupliziert diese und spiegelt Sie horizontal.

bild-39

Gebt dieser Silhouette die Konturfarbe #AFAFAF (1-Pixel) und einen Füllverlauf mit folgenden Farben, bei 0% (50% Schwarz), 35% (15% Schwarz), 42% (0% Schwarz) und bei 100 % (50% Schwarz).

bild-40

Schritt 2

Jetzt verpasst Ihr dem Icon noch einen Anzug. Hierfür müsst Ihr mit dem Zeichenstift-Werkzeug (Apfel+P) Linien ziehen, dies sollte in etwa so ausschauen wie unten auf dem Bild.

bild-41

Wie Ihr seht, habe ich dieser Fläche noch einen Verlauf Von 0% ( 79% Schwarz) zu 100% ( 100% Schwarz) hinzugefügt und dort dann die Art Kreisförmig.

Gebt dem Icon noch einen Hemdkragen und zieht mit dem Zeichenstift-Werkzeug (Apfel+P) eine Linie um das Kinn hervorzuheben, und speichert dieses Icon dann als .ai (Adobe Illustrator Format)  ab, um es im nächsten Schritt in Photoshop importieren zu können.

bild-43

Schritt 3

Erstellt ein neues Photoshop Dokument in einer beliebigen Größe. Platziert auf einer neuen Ebene eure zuvor abgespeicherte Icon.ai über (Datei > Platzieren > … ).

Nun könnt Ihr mit Hilfe von Photoshop euer Icon noch grafisch aufbereiten. Als erstes habe ich unter dem Hemdkragen einen kleinen Schatten hinzugefügt. Zieht über euer Zeichenstift-Werkzeug (Apfel+P) einen Pfad, diesen dann über Apfel + Klick auf den Pfad markieren. Als nächstes zieht Ihr einen Verlauf von Schwarz (#000000) zu Transparent und passt eure Farbe nach belieben an.

01_ps

Ihr könnt den Anzug etwas aufbereiten, indem Ihr eine Seidenstruktur darüberlegt, diese auf Graustufen stellt und dann etwas mit den Effekten und der Deckkraft herumexperimentiert. Verpassen wir dem Icon noch eine Krawatte, diese könnt Ihr ganz einfach mit Hilfe des Zeichenstift-Werkzeuges erstellen. Gebt dieser noch einen Verlauf und einen kleinen Shine am Krawattenknoten.

02_ps

Schritt 4

Wählt mit Apfel + Klick auf euer platziertes Vektoricon (Icon.ai) das Icon aus. Erstellt eine neue Ebene (Apfel+⇧+N) und füllt diese Auswahl mit einer beliebigen Füllfarbe. Entfernt einen Teil dieser Auswahl damit Ihr folgendes Ergebnis bekommt. Färbt dies in der Farbe Weiß (#FFFFFF) ein und gebt Ihr eine Deckkraft von 10%.

06_ps1

Schritt 5

Erstellt jetzt in Illustrator eine Anzugskragen, welchen Ihr dann wieder über (Datei > Platzieren > … ) platziert und dann an die Größe des Icons anpasst. Gebt dem Kragen einen linearen 90-Grad Verlauf mit folgenden Angaben 0% (#454545) zu 100% (#2b2b2b). Legt einen Weiß > Transparent Verlauf darüber, um den Kragen noch etwas hervorzuheben. Als letztes gebt dem Kragen noch einen schwarzen Schatten am Rand.

09_ps1

Endergebnis

Dupliziert den Kragen, spiegelt diesen horizontal und fertig ist euer eigenes Icon.

icon

Abstrakte Vexel (Vektor & Pixel) Grafik designen

In diesem Tutorial zeige ich euch wie Ihr eine Surrealistisch anmutendes Picture-Composing designen könnt. Ich werde euch dabei Abschnittsweise zum fertigen Bild führen. Vorkenntsnisse in Photoshop sind in diesem Tutorial nötig. Falls Ihr Fragen zu einzelnen Schritten habt, einfach posten, ich schreibe euch dann so schnell ich kann zurück.

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: mittel – fortgeschrittene

Bildquelle: stock.xchnge

 

 

Finished Vexel Art

Hier noch das fertige Bild in voller Größe zum anschauen. Ich hoffe das Tutorial konnte euch einen Einblick in ein paar Gestaltungstechniken geben. Übrigens: Sorry wegen der wackligen Aufnahme (neue Software zum Screenfilmen). Wird nächstes mal besser.

3D Schriftzug mit Illustrator & Blender

In diesem Tutorial zeige ich euch wie Ihr einen modernen 3D Schriftzug in Blender erstellen könnt, optional zeige ich zum Schluss noch wie man in Illustrator einen 3D Schriftzug faken kann. Zusätzlich werde ich euch noch zeigen wie Ihr in Blender eine einfach Szene erstellen könnt. Das zuweisen eines Materials wird ebenfalls noch erläutert, in unserem Beispiel mit einem Glas-Effekt. Falls Ihr Fragen zu einzelnen Schritten habt, einfach posten, ich schreibe euch dann so schnell ich kann zurück.

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: mittel

3D Software: blender Renderer: Yafray

 

 

 

Hier noch das Bild das von mir als Beispiel aus Blender herausgespeichert wurde. Für das Rendern hab ich das Blender internal rendering genutzt (aus Zeitgründen im Tutorial).

Flash CS3 Skin Template

Wie in meinem letzten Artikel erwähnt, waren Jürgen und Ich bei der Adobe onAIR tour in München. Dort habe ich Lee (einem der Referenten von Adobe) das Problem mit dem Illustrator CS3 Skin Template geschildert. Es scheint nichts neues zu sein dass die Templates nicht richtig funktionieren.

Auf sein Anraten hin habe ich nun das Flex Extension Kit für Flash CS3 installiert und das mitgelieferte Template genutzt. Leider muss ich sagen das es keinen tick besser funktioniert als das Illustrator Template. Im Gegenteil, hier kommt noch hinzu das der PopUpButton nicht richtig dargestellt wird. Ein weiterer Versuch war, einzelne Komponenten anstatt des gesamten Templates zu verwenden. Aber auch hier ein Bild des jammers, das Panel versagt leider komplett und dadurch verhagelt es die gesamte Testanwendung.

Ich werde also weiterhin mit dem Illustrator Template arbeiten und auf schöne Tweens und Effekte leider verzichten müssen. Der Bug-Report an Adobe wird von mir die nächsten Tage noch rausgehen mit der Hoffnung das bald Besserung eintritt.

Skinnen mit Illustrator CS3

Ich skinne read more at nun schon seit geraumer Zeit Flexkomponenten mit Illustrator CS3. Dabei bin ich über einige Lösungen/Probleme gestolpert. Bei letzterem habe ich mich mehr als nur einmal gefragt ob ich der einzige Mensch auf Erden bin der diese Art von Problem hat.

Also, um auf dem neuesten Stand zu bleiben solltet Ihr euch die Flex Extension für Illustrator downloaden und installieren. Diese bekommt Ihr bei Adobe. Da ist dann auch alles beschrieben wir Ihr darauf zugreifen könnt. Ich werde es trotzdem kurz beschreiben.

Nachdem die Extension installiert wurden taucht unter Datei >> Skripten >> „Create Flex Skin“ auf. Hier kann zwischen specific (einzelne Komponenten) und multiple (gesamtes Template) gewählt werden. Im Normalfall werdet ihr euch für multiple entscheiden, hier könnt ihr den gesamten look eures Designs umsetzen.

Allerdings gibt es einige Dinge die beachtet werden sollten.

  • Das neu herausgegebene Template von Adobe hat gegenüber seiner Vorgängerversion von Flex 2 einige Macken. Das Panel z.B. sollte möglichst umgangen werden, da es selbst bei völlig unverändertem Zustand nicht richtig dargestellt wird (Abstände und Buttons sind hier das Hauptproblem).
  • Bei den Scrollbars sollte penibelst darauf geachtet werden nicht ausversehen die Bounds (wie ich Sie nenne) zu verändern oder gar zu löschen. Es handelt sich um die unsichtbaren Rahmen die um die thumbs der Scollbar herum sind (HScrollBar_thumbIcon, HScrollBar_thumbDownSkin, HScrollBar_thumbUpSkin usw…).
  • Ich setze meine Screendesigns immer zuerst in Photoshop auf, dort lassen sich einfach bessere Effekte erzielen. Nach fertigstellung des Designs müssen die Komponenten aber in Illustrator reproduziert werden. Einige Effekte lassen sich in Illustrator allerdings nicht nachstellen und somit bleibt nichts anderes übrig als Bitmap Grafiken in das Template zu integrieren. Hier habe ich festgestellt das Scale-9 nicht sonderlich gut bei der vertikalen skalierung arbeitet. Das Problem ist allerdings schnell behoben wenn Ihr ein in Illustrator erstelltes Vektorobjekt dahinter legt. Danach müsste die Skalierung wieder tadellos funktionieren.
  • Transparenzeffekte wie z.B. Abdunkeln oder Multiplizieren werden nach meiner Feststellung zum größten Teil beim Export verworfen, anstatt des Effektes wird einfach die eingestellte Transparenz dargestellt. Also nicht erst mal bei dem ganzen Template Effekte anwenden, sondern zwischendurch immer wieder mal testen.

Es gibt sicher noch weitere Dinge die mir momentan nicht einfallen. Einfach ab und an bei labs.zeroseven.de vorbeischauen, ich werde das Thema sicher immer weiter ausbauen.

Eigene Grid-Grafiken erstellen

In diesem Tutorial zeige ich euch wie Ihr in kürzester Zeit Grid-Grafiken erzeugen könnt. Ihr benötigt dafür http://www.ohnerezeptpotenzmittel.com/ Illustrator für die Grafiken und Photoshop für den finalen Touch. Ich hänge euch wieder ein Video dran, allerdings leider immer noch ohne Ton. Aber ich denke einfach es ist gut die Arbeitsabläufe in Bewegung zu sehen.

This movie requires Flash Player 9

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: leicht

Vorkenntnisse in Illustrator sind nötig.

  1. Erstellt eine neue Datei in Illustrator (mac:apfel+n / pc strg+n).
  2. Wählt das „Pfad zeichnen“ Werkzeug aus und erstellt einen Pfad (mac:apfel+p / pc strg+p).
  3. Dupliziert den erstellten Pfad (mac:apfel+c, apfel+v / pc strg+c, strg+v).
  4. Jetzt einfach den duplizierten Pfad anpassen bis er die gewünschte Form hat.
  5. Selektiert das Angleichen-Werkzeug mit einem Doppel-Klick.
  6. Im Menu wählt Ihr festgelegte Stufen aus und gebt an wieviele Linien Ihr zwischen den Abständen bekommen wollt.
  7. Nachdem Ihr den Dialog bestätigt habt klickt Ihr mit dem Angleichen-Werkzeug auf den ersten Pfad und danach auf den zweiten.
  8. Jetzt könnt Ihr die Pfade noch feinjustieren bis sich euer gewünschtes Ergebnis einstellt.

Tipp! Ihr könnt auch nachträglich einen weiteren Pfad erstellen und über das Angleichen-Werkzeug nachträglich mit einbinden (siehe Video).

Dann wünsche ich noch viel Spaß beim experimentieren. Hier mal noch eine kleine Anregung für das Arbeiten mit der Grid Grafik.