FREE

Papierschlange

Kategorie: Tutorial
Info: Typo-Effekt mit Hilfe von Masken und Schatten
File(s): PSD, TTF
Software: Photoshop CS 2+
Größe: 4 MB

Premium Downloads

Templay zeigt Dir in diesem Photoshop Tutorial einen möglichen Weg zu einer Typo Illustration im Papierschlangen-Look. Lade Dir dazu von UrbanFont.com die kostenlose TrueType „Vertigo“ von Brian Kent herunter.

templay.de photoshop tutorial paper snake

 

Öffne mit Strg+N ein neues, 800 x 400px großes Dokument mit 72 dpi. Wähle das Textwerkzeug, ziehe einen Textrahmen auf volle Dokumentbreite und trage „paper“ ein. Übernimm die folgenden Textformatierungen: zentrierter Text, Schriftart „Vertigo“, Schriftgröße 130px, Zeichenabstand „optisch“.

templay photoshop tutorial typo-effekt papierschlange

 

Damit der Typo Effekt funktioniert, sollen die Buchstaben miteinander verbunden sein bzw. sich überdecken. Die Vertigo von Brian Kent eignet sich super, da die Font einfach aufgebaut und nur aus Versalien besteht. Dupliziere die Textebene mit Strg+J und blende das Original aus. Raster die duplizierte Textebene über Ebene > Rastern > Text, oder in der Ebenenpalette mit einem Rechtsklick auf die Textebene „paper“ und Text Rastern. Markiere mit dem Auswahlrechteck-Werkzeug den horizontalen Balken des „a“ und dupliziere die Auswahl mit Strg+J.

templay photoshop tutorial typo-effekt papierschlange

 

Skaliere das duplizierte Fragment und positioniere es so das die beiden Buchstaben „p“ und „a“ mit einander verbunden werden.

templay photoshop tutorial typo-effekt papierschlange

 

Dasselbe Prinzip bei der Buchstabengruppe „ape“.

templay photoshop tutorial typo-effekt papierschlange

 

Da eine einfache Skalierung und Verbindung der Balken von „e“ und „r“ eine hässliche spitze Ecke ergeben würde, behelfen wir uns mit einem Duplikat vom Bogen des „e“. Markiere den unteren Teil des vertikalen Balken des „r“ unterhalb der Rundung lösche ihn. Markiere den unteren Teil des „e“ und dupliziere ihn mit Strg+J. Spiegle das Duplikat mit Strg+T > horizontal spiegeln. Positioniere Das Duplikat so, dass die beiden Buchstaben miteinander verbunden sind.

templay photoshop tutorial typo-effekt papierschlange

 

Um den „offenen“ Balken am Ende einen schicken Abschluss zu geben, skaliere sie indem Du jeweils den unteren Teil mit Strg+T auf gewünschte Länge ziehst.

templay photoshop tutorial typo-effekt papierschlange

 

Die neuen Enden erstellst Du mithilfe des Zeichenstiftwerkzeuges. Bring die Fläche mit Punkt-Auswahl-Werkzeug und Direkt-Auswahlwerkzeug in die gewünschte Form.

templay photoshop tutorial typo-effekt papierschlange

 

Erstelle eine Auswahl mit einem Klick mit gehaltener Strg-Taste in die Ebenenpalette auf das Thumbnail der Form-Fläche. Erweitere die Auswahl mit gehaltener Umschalt-Taste und dem Polygon-Lasso um die überstehende Fläche der Textebene. Lösche den Inhalt der Auswahl des Balkens mit Backspace.

templay photoshop tutorial typo-effekt papierschlange

 

Wiederhole den Vorgang mit Duplikaten der schon erstellten Form-Ebene für die andern Enden.

templay photoshop tutorial typo-effekt papierschlange

 

Erstelle eine neue Ebene mit Strg+Umschalt+N und fülle die komplette Fläche mit Füllwerkzeug mit einem hellen Grau. Benenne sie mit „typogrund“. Diese Ebene dient uns vorläufig als Hilfsebene und „Maskenhalter“. Jetzt wird es etwas knifflig. Erstelle ein Auswahl aus der gerasterten Textebene „paper“ mit gehaltener Strg-Taste und einem Klick auf das Thumbnail in der Ebenenpalette. Erweitere die Auswahl um die Verbindungsstücke und die erstellten Enden. Dazu klicke nacheinander mit gehaltener Strg+Umschalt in die Thumbs der Verbindungstücke. So addierst Du die Flächen zu einer kompletten Auswahl. Wähle nun die Ebene „typogrund“ und füge ihr eine Ebenenmaske aus der Auswahl hinzu. Benutze dazu den kleinen „Auswahl-hinzufügen“ Button in der unteren Leiste der Ebenenpalette. Blende alle anderen Ebenen, die gerasterte Textebene, Verbindungstücke und Formen aus.

templay photoshop tutorial typo-effekt papierschlange

Erstelle eine neue Ebene „schatten“ über der „typogrund“ Ebene. Dupliziere die „typogrund“ Ebenenmaske auf die Ebene „schatten“ indem du die Maske einfach mit gehaltener Alt-Taste auf die Ebene „schatten ziehst. Um den Eindruck des Überlagerns der Buchstaben zu erreichen, erzeugen wir an den Schnittstellen einen Schatten. Beginne mit dem Buchstaben „p“. Erstelle mit gehaltener Strg+Klick eine Auswahl aus der originalen Textebene. Mit der jetzigen Auswahl würde der Schatten an der Grenze des „a“ abreißen. Die Auswahl soll also nur den Bogen des „p“ Umschließen. Dazu wähle das Polygon-Lasso und subtrahiere die Auswahl indem Du mit gehaltener Umschalttaste die Auswahl um das „a“ löscht.

templay photoshop tutorial typo-effekt papierschlange

 

Wähle das Pinsel-Werkzeug mit einer ca. 50px großen, weichen Pinselspitze und den gezeigten Einstellungen. Setze unterhalb der Maskenlinie einen weichen Verlauf.

templay photoshop tutorial typo-effekt papierschlange

 

Dasselbe Prinzip auch bei den nächsten Überschneidungen. Nutze bei graden Flächen auch das Auswahlrechteck.

templay photoshop tutorial typo-effekt papierschlange

templay photoshop tutorial typo-effekt papierschlange

 

Beim „r“ müssen wir ein wenig improvisieren, da es hier noch keine Formvorlage gibt. Benutze dazu den Auswahlkreis. Setze das Maus-Kreuz an die Ecke des Innenraums und ziehe mit gehaltener Umschalt-Taste eine Kreis-Auswahl.

templay photoshop tutorial typo-effekt papierschlange

templay photoshop tutorial typo-effekt papierschlange

 

Erstelle eine neue Ebene und nenne sie „enden“. Fülle die Ebene mit einem helleren grau. Erstelle eine Auswahl aus den Form-Masken der ausgeblendeten Form-Ebenen mit Strg+Klick in die Form-Maske. Addiere wie oben beschrieben zu einer Auswahl und erstelle daraus eine Ebenenmaske für die „enden“ Ebene. Füge auch für die „enden“, wie oben beschrieben, die Schatten in die „schatten“ Ebene.

templay photoshop tutorial typo-effekt papierschlange

 

Um die Textur der Typo zu erstellen öffne mit Strg+N ein neues, 30 x 30px großes Dokument mit 72 dpi. Teile das Dokument und fülle jeweils mit Farben Deiner Wahl. Erstelle ein neues Muster mit Bearbeiten > Muster festlegen… und bestätige in der folgenden Dialogbox mit „ok“. Schließe das Dokument.

templay photoshop tutorial typo-effekt papierschlange

 

Erstelle im alten Dokument eine neue Ebene „streifen“. Fülle die Fläche mit Bearbeiten > Fläche füllen…, wähle im folgenden Dialogfenster bei Verwenden: Muster und wähle das erstellte Muster aus der Palette aus. Bestätige mit „ok“. Dreh die Ebene um 45° in der Optionsleiste mit Strg+T. Positioniere die „streifen“ so dass sie die Ebenen „typogrund“ und „enden“ komplett überdeckt.

templay photoshop tutorial typo-effekt papierschlange

 

Ziehe die „streifen“ in der Ebenenpalette über die Ebene „typogrund“. Dupliziere die Ebenenmaske „typogrund“ auf die „streifen“ und blende „typogrund“ aus. Um auch die „enden“ zu texturieren, dupliziere die „streifen“ und ersetze ihre Ebenenmaske durch die „enden“ Ebenenmaske. Löse die Verkettung der Ebenen „streifen“ zwischen der Ebenenmaske und der Ebene. Wähle nur die Ebene, indem du das Tumb markierst. Spiegle das Duplikat der „streifen“ mit Strg+T und horizontal spiegeln. Wähle 20% Deckkraft für die Textur der Enden. Blende „enden“ aus.

templay photoshop tutorial typo-effekt papierschlange

 

Fertig! Mit Hilfe der Ebenenmasken kannst Du nun auch andere Texturen und Muster einfach testen und ersetzen.

templay photoshop tutorial typo-effekt papierschlange

Hat dir dieser Artikel gefallen?
1921 Votes


Wir freuen uns über deine Bewertung zu diesem Artikel. Du hast
damit Einfluss auf zukünftige Inhalte und steigerst so die Qualität von templay.de!

Kommentare
bangzi007
THX!

yosoyo
wow! very good!

korzen
This effect is amazing !!

eello3
wow!!

fajarfaqih
wow!!! excellent !! baru nyadar kalo tekniknya dibrush dulu terus ditutupin.. hahaha..

Kommentar schreiben (Bitte alle Pflichtfelder ausfüllen)


reh-design.de - webnext.de - templay.de

© 2017 templay | templay.de ist ein Projekt von Reh-Design.de und Webnext.de