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 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 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.

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.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

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 Stephie83

    Stephie83

    26.05.2011 - 10:57

    UNd weider einen Schritt weiter, super erklärt... danke.

  • Alternative Portrait von yimmy

    yimmy

    18.04.2011 - 20:55

    Wow, hilft mir sehr weiter!

  • Alternative Portrait von Superking88

    Superking88

    15.03.2011 - 08:31

    Feine Sache, Ich bin schon gespannt auf Teil3

  • Portrait von Frauenpower94

    Frauenpower94

    30.01.2011 - 09:47

    sehr mühevoll... klasse leistung

  • Alternative Portrait von wser

    wser

    07.01.2011 - 21:39

    Das Ergebnis würde ich immer an den Anfang setzen, so in der Art: Wir wollen eine Menüzeile am oberen Rand mit Logo erstellen. Das Ergebnis sieht so aus:

  • Alternative Portrait von willy999

    willy999

    21.11.2010 - 22:46

    Danke war sehr informativ

  • Alternative Portrait von shaking

    shaking

    09.11.2010 - 14:51

    war jetz nicht gerade das, was ich erwartet hätte...

  • Portrait von Tribehunter

    Tribehunter

    02.11.2010 - 21:27

    Hammer erklärt! 5 Sterne von mir!

  • Alternative Portrait von torti

    torti

    28.10.2010 - 12:59

    Super Tutorial, sehr gut erklärt

  • Alternative Portrait von jonas_huber

    jonas_huber

    19.10.2010 - 21:12

    Super Tutorial vielen Dank mach weiter so!

  • Portrait von harbin

    harbin

    02.10.2010 - 09:29

    Vielen Dank für diesen Zweiten Teil. Genauso klar und verständlich, wie Teil eins.

    Viele Grüße,
    harbin

  • Alternative Portrait von scarred13

    scarred13

    24.09.2010 - 13:30

    Super Tutorial, vielen Dank dafür.

  • Alternative Portrait von hurrli

    hurrli

    09.08.2010 - 20:22

    Tolles Tutorial. Danke!

  • Alternative Portrait von daunman

    daunman

    06.08.2010 - 15:14

    Super. Schönes Tutorial

  • Alternative Portrait von Tess101

    Tess101

    02.08.2010 - 15:23

    D A N K E bin begeistert, schönes Tutorial ;o)

  • Alternative Portrait von Hatori

    Hatori

    01.08.2010 - 18:36

    Die Weiteren Schritte sind auch sehr gut erklärt.
    Danke.

  • Alternative Portrait von Namelessness

    Namelessness

    22.07.2010 - 11:13

    Der 2 Teil überzeugt auch.... sehr schön gemacht

  • Alternative Portrait von Erutan

    Erutan

    16.07.2010 - 19:22

    Danke vielen dank ^^

  • Alternative Portrait von sophie67

    sophie67

    15.07.2010 - 14:33

    Vielen Dank für das Tutorial.

  • Alternative Portrait von derEve

    derEve

    13.07.2010 - 16:34

    Eine hervorragende Hilfestellung

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

Tutorial empfehlen

 

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


(2) HOMEPAGE: Beschriftung und Elemente

Bis jetzt sieht das Grundgerüst so aus:

Bilder

 

 

Das heutige Thema ist "Beschriftung und Elemente". Daher beginne ich jetzt mit den wichtigsten Elementen. Zum Beispiel einen Button erstellen.
Das wird jetzt vielleicht etwas kniffelig, aber ihr bekommt das schon gut hin.

 

 

 

 

Zuerst eine neue Ebene erstellen und diese Button nennen (Orange). Zur Erinnerung:
Orange = Korpus Homepage
Blau = Logo, Bilder

 

 

 

Auf dieser Ebene jetzt ein längliches abgerundetes Rechteck aufziehen. Und über dem zweiten ’News’-Rechteck anordnen.

 

 

 

Bilder

 

 

 

Diesen Button fülle ich jetzt mit der gleichen Farbe wie denTrennbalken (Workshop 1).
Tipp: Den Verlauf, genauer die Fülloptionen des Trennbalkens, als Stil speichern.

Diese Button-Ebene dupliziere ich jetzt noch zwei Mal untereinander und lösche dann den störenden Rest unter den drei Buttons von der Ebene ’News’ weg.
Das sieht jetzt sehr statisch aus, doch jetzt kommt ein toller Trick. Ihr erstellt eine neue Ebene ’Überlagerung’ und ordnet diese über den drei Button Ebenen an. Jetzt Auswahlrechteck benutzen, eine Fläche aufziehen und diese mit Schwarz füllen.

 

 

 

Bilder

 

 

 


 

 

Jetzt das Polygonlasso nehmen und diese Auswahl aufziehen, danach ENTF drücken und die Ebenenoption auf Weiches Licht stellen.

 

Bilder

 

 



Tada… Schöne Optik mittlerweile, nicht wahr? Also zweimal das ganze duplizieren, über den anderen Buttons anordnen und staunen. Zur Einfachheit erstelle ich mir jetzt einen Ordner mit dem Namen Button und packe da alles rein.

 

 

 

In der Ebene ’News Verlauf’ und ’Verlaufslinie’ lösche ich einen 1px kleinen Spalt heraus, damit sich das alles gut voneinander absetzt.
Mir gefällt diese Version von dem Layout noch nicht ganz, deshalb muss ich kurz umbauen, hier sieht man auch den eben gelöschten 1px Spalt.

 

 

 

 

Bilder

 

 

 

Die rot markierten Flächen werde ich jetzt verändern. Die Farbe, das helle blau ist einfach widerlich, ich ersetze es durch ein dunkleres grau. Das ganze sieht jetzt viel besser aus…

Bilder

 

 

 

Dieser graue Balken unter der Ebene ’Trennung’ soll später mal den aktuellen Seitentitel anzeigen. Deshalb erstelle ich eine neue Ebene ’Seitenanzeige’ (Orange), fülle diese mit dem gleichen Grauton und setze sie 1px von der Ebene ’Verlaufslinie’ ab; das schafft jetzt schon mal eine sehr schöne Trennung. Farblich harmoniert das ganze auch schon.

Natürlich sollten wir uns jetzt schon Gedanken machen, was wir auf unserer Page denn überhaupt präsentieren wollen. Ich denke da wird sich bei jedem etwas passendes finden. Der Einfachheit wird diese Page jetzt als Firmenpage aufgemacht. Aus dem Zweck, da man dann sehr Allgemein bleiben kann; wie gesagt kann aber jeder von euch die Beschriftung selbst anpassen.

Ich erstelle mir in Photoshop, in der Ebenenansicht einen neuen Ordner mit dem Namen ’Beschriftung’, in diesen kommen nun alle weiterleitenden Textfelder (also die Links).
Nach dem Beschriften sieht das ganze so aus:

Bilder

Ich finde aber, dass sich die Links auf der Ebene ’Trennung’ nicht gut machen, deshalb werde ich wieder einen kleinen Schönheitstrick anwenden. Ich zoome nahe an den Balken heran und erstelle mir eine neue Ebene mit dem Namen ’Relief’ (Orange). Unsere zwei wichtigsten Werkzeuge für diese Arbeit sind jetzt der Buntstift (1px) und die Pipette. Die Farbe die der Balken ganz oben hat, pipetieren wir jetzt als Vordergrundfarbe und ziehen auf der Reliefebene mit dem Buntstift einen vertikalen Strich, dazu am besten SHIFT gedrückt halten.

Bilder

 

 

 

Das gleiche habe ich jetzt mit der etwas helleren blau getan, und wenn ihr jetzt wieder das Bild auszoomt, dann habt ihr ein richtiges schönes Button Relief. Jetzt das ganze noch duplizieren und zwischen die anderen Links schieben, duplizieren, verschieben…
Ich habe mir kurz einen Ordner Relief erstellt und dort hinein dann alle duplizierten ’Relief’ Ebenen gelegt.

Meine Firma habe ich jetzt in ’Dreamland’ umbenannt, und sogleich die Logo Ebene und die Text Ebene angepasst:

 

 

 

Bilder

 

 

 

 

 

 

Das war:
Workshop Teil 2. 

Teil III: Bilder einfügen

 

 

 

eFoX

 

 


Alle Bilder und Grafiken die in diesem Tutorial verwendet werden sind geschützt und stehen somit unter dem Copyright des Autors. Die Verwendung von jeglichem Material in diesem Tutorial ist nur mit Erlaubnis des Autors gestattet.

 

Webdesign Darmstadt • vBulletin 0.04 • ZF-App 0.49 • Total 0.53