[Photoshop] [WEBDESIGN] Hölzerne Navi / Schild

Dieses Thema im Forum "Grafik & Foto Tutorials" wurde erstellt von Final, 3. Juli 2008 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 3. Juli 2008
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    [WEBDESIGN] Hölzerne Navi / Schild

    in diesem tutorial zeige euch wie man mit einfachsten mitteln in photoshop eine navigation aus holzlatten erstellt;
    siehe dazu zuerst das Holztextur-Tutorial ( LINK )

    #STEP 1
    wir erstellen ein neues dokument (bei mir 400x800px) und erstellen eine holztextur nach oben verlinktem tutorial, diese ebene werden wir erst gegen ende des tutorials brauchen, ihr könnt sie also ausblenden

    #STEP 2
    wir erstellen eine neue ebene und füllen diese mit weiss, damit wir die späteren feinheiten ohne störendes caromuster betrachten können

    #STEP 3
    wir ziehen mit dem Auswahlrechteck-Werkzeug ein rechteck wie in bild 1

    Bild
    {img-src: http://i224.photobucket.com/albums/dd229/Final91/tut5.jpg}
    bild 1

    #STEP 4
    nun kommt der teil der für ein halbwegs realistisch wirkendes outcome am wichtigsten ist, also gut aufgepasst!

    wir schnappen uns das Lasso-Werkzeug (siehe bild 2) und entfernen mit gedrückter ALT taste quasi alles was nicht nach einer schönen, neuen holzlatte aussieht,einige risse und abgebrochene kanten; dazu bild 3


    Bild
    {img-src: http://i224.photobucket.com/albums/dd229/Final91/tut6.jpg}
    bild 2

    Bild
    {img-src: http://i224.photobucket.com/albums/dd229/Final91/tut7.jpg}
    bild 3

    #STEP 5
    wir füllen unsere auswahl mit schwarz und lösen diese auf

    #STEP 6
    wir blenden nun unsere anfangs erstelle holztextur ein und verschieben die eben ganz nach oben;
    nun erstellen wir per tastenkombination STRG+ALT+G eine schnittmaske dieser ebene und fügen unsere beiden ebenen per STRG+E zusammen

    #STEP 7

    per doppelklick öffnen wir die Ebenenstiloptionen unserer ebene und übernehmen die einstellungen die den bildern unter diesem text entnehmen zu sind;

    Bild
    {img-src: http://i224.photobucket.com/albums/dd229/Final91/tut8.jpg}

    Bild
    {img-src: http://i224.photobucket.com/albums/dd229/Final91/tut9.jpg}

    Bild
    {img-src: http://i224.photobucket.com/albums/dd229/Final91/tut10.jpg}

    Bild
    {img-src: http://i224.photobucket.com/albums/dd229/Final91/tut11.jpg}

    #ZWISCHENERGEBNIS

    Bild
    {img-src: http://i224.photobucket.com/albums/dd229/Final91/tut12.jpg}

    #STEP 8

    nun kommen wir zur beschriftung, welche ich recht einfach gehalten habe, da sich das tutorial nicht mit typografie beschäfitgt

    wir erstellen eine neue ebene mit unserem text und übernehmen folgenden ebenestile

    Bild
    {img-src: http://i224.photobucket.com/albums/dd229/Final91/tut13.jpg}

    Bild
    {img-src: http://i224.photobucket.com/albums/dd229/Final91/tut14.jpg}

    #STEP 9
    nun fügen wir alle ebenen, bis auf die weisse hintergrundebene, in einer gruppe zusammen;
    diese gruppe mit ihrem inhalt könne wir nun beliebig oft duplizieren um neue menüpunkte zu erstellen;
    um die navigation abwechslungsreich zu halten drehen und spiegeln wir unsere neuen meüpunkte in allen variationen (Bearbeiten > Transformieren > [...])

    bis unsere navigation am ende vielleicht so ausschaut

    #OUTCOME

    Bild
    {img-src: http://i224.photobucket.com/albums/dd229/Final91/tut15.jpg}



    viel spass beim nachbasteln,
    für fragen und tutorialwünsche stehe ich per pn zu verfügung;
    grtz, final
     
  2. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.