Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

Passend zum Inhalt empfehlen wir:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Alternative Portrait von SeppelSchulze

    SeppelSchulze

    17.02.2013 - 21:37

    einfach klasse, großen dank

  • Alternative Portrait von clanfirefox

    clanfirefox

    21.11.2012 - 22:19

    Echt Klasse..hat mir super geholfen :)

  • Alternative Portrait von sinalauren

    sinalauren

    22.07.2012 - 10:50

    Sehr hilfreich, danke

  • Alternative Portrait von timeless122

    timeless122

    28.09.2011 - 22:36

    Echt super tut, danke dafür !

  • Portrait von roweso

    roweso

    23.09.2011 - 16:01

    Das schaffe selbst ich-Ironiemodus..
    SEhr anschaulich und strukturiert.
    Bin auf weitere Teile gespannt.

  • Alternative Portrait von OJey

    OJey

    11.07.2011 - 08:48

    Kann man nur empfehlen, super gemacht! Lässt sich auch leicht nachmachen!

  • Alternative Portrait von Suomi74

    Suomi74

    26.05.2011 - 12:22

    Sehr gutes tut, habs ohne prob. nach machen können.

  • Alternative Portrait von marlo

    marlo

    18.03.2011 - 09:34

    Gut gemacht! Anschaulich erklärt.

  • Alternative Portrait von Superking88

    Superking88

    14.03.2011 - 12:42

    Sauber weiter so! Hat mir sehr gut gefallen und mich weiter gebracht

  • Alternative Portrait von ganjaaa

    ganjaaa

    13.03.2011 - 01:20

    Top Tutorial ... ist super gemacht und verständlich auch für einen leihen wie mich :3

  • Alternative Portrait von molle62

    molle62

    22.12.2010 - 20:04

    ein sehr gut erklärtes Tut, vielen Dank

  • Alternative Portrait von Eragon

    Eragon

    03.11.2010 - 11:57

    Super, vielen Dank für die Ideen :)

  • Alternative Portrait von SaphiraAmethyst

    SaphiraAmethyst

    29.10.2010 - 17:04

    Danke, das Tutorial hat mir sehr weiter geholfen.

  • Alternative Portrait von Lucky_Enno

    Lucky_Enno

    10.10.2010 - 15:14

    Danke, das Tutorial hat mir geholfen

  • Portrait von djangohh

    djangohh

    22.09.2010 - 19:25

    vielen dank - super job

  • Alternative Portrait von sophie67

    sophie67

    06.08.2010 - 16:28

    Echt klasse, Vielen Dank.

  • Alternative Portrait von Spearboy

    Spearboy

    04.08.2010 - 13:18

    Vielen Dank für dieses wunderbare Tutorial!

  • Alternative Portrait von jr3012

    jr3012

    28.07.2010 - 11:11

    immer wieder gut anzuschauen....

  • Alternative Portrait von asad

    asad

    21.06.2010 - 19:09

    SUPER Tutorial^^
    Hat mir SEHR geholfen

  • Alternative Portrait von iphone007

    iphone007

    06.06.2010 - 14:07

    einfach super, vielen danke

Weitere Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


Hier möchte ich euch zeigen, wie ihr ein neues Webtemplate mit Photoshop erstellen könnt.
Datei --> Neu --> 1024x768 Pixel

Bilder

Im nächsten Schritt legen wir rechts eine neue Gruppe an --> Ebene --> Neu --> Gruppe aus Ebenen --> mit den Namen "Hintergrund", danach legen wir drei neue Ebenen an, entweder über Ebene -->  Neu --> Ebene oder über den Abrissblock Bilder in der Ebenenpalette mit dem Namen "unterer Balken", "mittlerer Balken" und "obere Balken"

Sieht wie folgt aus:

Bilder

Als Nächstes generieren wir einen waagerechten Balken im oberen Drittel der Arbeitsfläche mit folgendem Farbverlauf (SHIFT + G) --> dunkler Bereich #a3bab4 und heller Bereich #d8eae5. Mit der Taste STRG + D hebt ihr nach dem Füllen die Auswahl wieder auf.

Bilder

Im zweiten Part generieren wir einen waagerechten Balken im unteren Drittel der Arbeitsfläche mit folgender Füllfarbe #737373. Am besten, wir duplizieren den oberen Balken, verschieben diesen nach ganz unten und füllen ihn im Anschluss mit einem dunklen Grau über Bearbeiten --> Fläche füllen. Natürlich nicht vergessen, die Ebene vorher mit STRG + linker Maustaste zu markieren, damit sich eine Auswahl um den Balken bildet.

Bilder

Und im dritten Part füllen wir noch den mittleren Bereich mit einer weißen Farbe.

Bilder

Wenn diese drei Ebenen fertig erstellt wurden, beginnen wir mit der eigentlichen Webseite.
Dazu erstellt ihr wieder eine neue Gruppe über Ebene --> Neu --> Gruppe  oder in der Ebenenpalette auf das Ordner Symbol klicken. Ich nenne die Gruppe "Layout".

Bilder

In dieser neuen Gruppe legen wir eine neue Ebene an: entweder den Abrissblock in der Ebenenpalette klicken oder SHIFT + STRG + N. Name "Layout_BG".
Nun wählt ihr das Werkzeug "Abgerundetes Rechteck Werkzeug" (SHIFT + U) mit einem Radius von 10 Pixel. Nachdem ihr die Fläche aufgezogen habt, klickt ihr in die Fläche und wählt Pfadfläche füllen -- mit weißer Farbe.

Bilder

Leider wird hier ein unsauberer grauer Rand angezeigt, nachdem die Fläche gefüllt ist. Klickt rechts in der Ebenenpalette mit STRG + linke Maustaste die "Layout_BG"-Ebene an und dann Auswahl --> Auswahl verändern --> Verkleinern --> 2 Pixel.

Bilder

Danach Auswahl --> Auswahl umkehren und die ENTF Taste.

Bilder

Mit STRG + D die Auswahl wieder aufheben.
Nun duplizieren wir die Ebene "Layout_BG" und nennen diese "Schatten_Layout_BG".

Bilder

Wir ziehen diese Ebene unter die Layout_BG, markieren die Schatten_Layout_BG mit STRG + linker Maustaste und gehen über Auswahl --> Auswahl verändern --> Erweitern --> 2 Pixel.
Diese Auswahl füllen wir mit Schwarz, entweder über Fläche Füllen --> Schwarz oder über das Füllwerkzeug.
Nach den Füllen klicken wir auf Filter --> Weichzeichnungsfilter --> Gaußscher Weichzeichner --> 2 Pixel.

Bilder

Die Deckkraft der Ebene setzen wir auf 50%.

Bilder

Im nächsten Schritt klicken wir auf die Hintergrund Ebene "mittlerer Balken", duplizieren diese, benennen die kopierte Ebene "Schatten_mittlerer Balken"und ziehen sie unter die Ebene "mittlerer Balken".
Diese Ebene markieren wir wieder mit STRG + linker Maustaste, danach Auswahl --> Auswahl verändern --> Erweitern --> 2 Pixel und füllen diese mit Schwarz. Nach dem Füllen klicken wir wieder auf Filter --> Weichzeichnungsfilter --> Gaußscher Weichzeichner --> 2 Pixel und setzen die Deckkraft der Ebene auf 50%.

Bilder

Die Ebene "obere Balken" muss ebenfalls noch unter die "Schatten_mittlerer Balken" -

Bilder

ansonsten funktioniert der Schatteneffekt nicht.
Im nächsten Schritt erstellen wir wieder eine neue Gruppe "Header" und legen eine neue Ebene an.
Danach markieren wir den Header-Bereich und fügen ein Hintergrundbild ein. Das Bild liegt in den Arbeitsdateien dabei.

Bilder

Dieses Bild öffnen wir in Photoshop und verkleinern es um 50% --> Bild --> Bildgröße.

Bilder

Danach markieren wir das Bild mit STRG + A oder Auswahl --> Alles auswählen, kopieren das Bild in die Zwischenablage mit STRG + C oder Bearbeiten --> Kopieren,
minimieren oder schließen die Bilddatei und fügen es jetzt in die Auswahl ein mit SHIFT + STRG + V oder über Bearbeiten --> In die Auswahl einfügen.

Bilder

Über STRG + T oder Bearbeiten --> Frei transformieren passen wir das Bild noch ein wenig an.

Bilder

Wenn das erledigt ist, klicken wir auf Bild --> Anpassungen --> Gleiche Farbe --> Wählen bei der Quelle die Unbenannt-1 aus und bei Ebene obere Balken.

Bilder

Die Deckkraft der Ebene setzen wir auf 75%.
Im nächsten Schritt füge ich dem Header-Bereich
ein Logo hinzu; dazu nehme ich das Wasserzeichenlogo von PSD-Tutorials. Hierzu verwende ich das erste Mal den Befehl "Als Smart Objekt öffnen". Bitte beachtet, dass diese Funktion nur ab der Version CS2 + funktioniert, alle anderen öffnen das Logo und transformieren es auf die passende Größe.

http://help.adobe.com/de_DE/Photoshop/10.0/help.html?content=WSCCBCA4AB-7821-4986-BC03-4D1045EF2A57.html

http://www.psd-tutorials.de/membertutorial1340-Photoshop-Grundlagen_werkzeuge-verwendung-des-smartobjekt.html

Ich klicke also auf Datei --> Als Smart Objekt öffnen, suche mir das Logo (liegt in den Arbeitsdateien) und öffne es.

Bilder

Danach verschiebe ich die neu geöffnete Datei in meine Arbeitsfläche, wähle mit der Taste V das "Verschieben-Werkzeug" aus und ziehe die Datei auf meine Arbeitsfläche.

Bilder

Danach transformiere ich die neue Ebene mit STRG + T auf ungefähr 15% und positioniere das Logo im Header-Bereich - rechts in der Ebenenpalette könnt ihr jetzt sehen, dass diese Ebene ein Smart Objekt enthält. Der Vorteil an dem Smart Objekt ist, dass ihr die externe Datei verlustfrei transformieren könnt - den Rest lest bitte selbst oben in den beiden Links nach.

Bilder

Danach generiere ich mir eine neue Ebene mit SHIFT + STRG + N oder über den Abrissblock und nenne diese Ebene "Brush".
Danach wähle ich mir das "Pinsel Werkzeug" mit der Taste B und anschließend suche ich mir einen schönen Brush heraus, erstelle mir eine Auswahl, indem ich die STRG-Taste festhalte und auf die  Ebenenmaske klicke. Jetzt füge ich den Brush auf der Brush-Ebene hinzu.

Bilder

Wenn das erledigt ist, fügen wir noch im Header-Bereich ein paar Scanlines hinzu, die wir mit einer Maske auf den unteren Bereich des Headers reduzieren.
Neue Ebene mit SHIFT + STRG + N oder den Abrissblock - Name: "Scanlines".
Danach klickt ihr auf Datei --> Neu und erstellt eine neue Datei mit 3 x 3 Pixel, vergrößert die Datei auf 1600% bzw. 3200 % und macht mit den Buntstift-Werkzeug diese drei Punkte.

Bilder

Danach speichert ihr diese Datei als Muster ab über Bearbeiten --> Muster festlegen; nun könnt ihr diese Datei schließen.
Jetzt der gleiche Vorgang wie gerade eben, STRG Taste halten und auf die Ebenenmaske klicken, um eine Auswahl um den Header-Bereich zu erstellen. Danach klickt ihr auf Bearbeiten --> Fläche füllen --> unter Verwendung wählt ihr Muster und sucht euer eben erst angelegtes Scanline-Muster heraus.

Bilder

Nun erstellt ihr euch eine Maske --> Verlaufswerkzeug --> Schwarz auf Durchsichtig --> und nehmt den oberen Bereich der Scanline wieder weg - Deckkraft der Ebene auf 25%.

Bilder

Und zu guter Letzt kommt die Navigation dran; bei genau dieser möchte ich mich auch nicht allzu lange aufhalten, denn über Web-Navigationen könnte man Bücher schreiben. Die Navigation werde ich später mit CSS einbetten.
Hier ein paar Links, wie ihr in Photohop eine Navigationsleiste erstellen könnt:

http://www.ulf-theis.de/tutorials/photoshop/web-graphics/plastic-navigation
http://psdtuts.com/interface-tutorials/how-to-create-a-stunning-vista-inspired-menu/
http://www.avivadirectory.com/photoshop/vista-style-nav-bar/
http://www.avivadirectory.com/photoshop/professional-dark-web-button/
http://www.webmasterpro.de/design/article/interfacedesign-cleane-silberne-navigation.html
http://www.simplebits.com/bits/bulletproof_slants.html
http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/

In den Arbeitsdateien habe ich einen Navigationsbalken hinzugefügt, den ihr vorübergehend einfügen könnt.

Bilder

Jetzt beschrifte ich den Navigationsbalken noch, füge noch ein bisschen Text hinzu und fertig wäre das Grundlayout.

Bilder

Hoffe, es hat euch Spaß gemacht und ihr habt auch wieder ein bisschen dazugelernt.

Gruß hellemon
Drupal Programmierung vBulletin 0.054 ZF-App 0.865 Total 0.919