Auf CREATESOMFING gibt es neben der SEO-Reihe nun eine neue Artikelserie. Ich werde euch Schritt für Schritt zeigen, wie ihr eine Website erstellt. Das Tutorial werde ich jedoch als Text Tutorial machen, weil es einfach verständlicher ist und weil ich denke, dass es als Text Tutorial einfach besser rübergebracht wird.

Im ersten Teil zeige ich euch wie ihr die Arbeitsfläche vorbereitet, und die Struktur der Website plant. Ich werde die Tutorials versuchen möglichst kurz zu halten, und alles so ausführlich wie möglich zu erklären. Hier geht es nicht nur um die Website, sondern um Grundlegende Dinge die Photoshop zu bieten hat.

Schritt 1 - Die Planung

Die Planung einer Website ist das A und O. Es ist natürlich erlaubt sich von anderen Seiten inspirieren zu lassen, man sollte es jedoch nicht übertreiben sonst wird man sehr schnell als Ripper bezeichnet.

Ich zeichne mir die Grundstruktur meiner Idee meistens auf einem einfachen Zettel auf. Klarerweise sieht dass Endergebnis nicht genauso wie die Idee aus, aber das Gründgerüst bleibt meistens.

Die Skizze kann eingescannt und in Photoshop übertragen werden, diesen Schritt halte ich aber für relativ sinnlos deswegen lasse ich ihn auch aus.

Schritt 2 - Vorbereitung der Arbeitsfläche

Ebenen
Als nächstes sollte man sich Ordner für die einzelnen Ebenen anlegen, um die Übersicht zu bewahren.

Die Ordner können ganz einfach umbenannt werden, indem man einen Rechtsklick auf den jeweiligen Ordner macht und auf Gruppeneigenschaften klickt. Die Ordner Reihenfolge sollte genauso wie bei HTML von oben nach unten gehen.

Ich empfehle euch, die einzelnen Ebenen alle sinnvoll umzubenennen damit ihr oder der Kunde später wissen, welche Ebene für was da ist.

Hilfslinien
Sogenannte Hilfslinien sind seine sehr nützliche Sache. Aktivieren könnt ihr sie unter “Ansicht > Einblenden > Magnetische Hilfslinien“. Das Raster solltet ihr ebenfalls einblenden.

Schritt 3 - Los gehts

Als erstes erstellen wir ein neues Dokument in der Größe 1006×768px. Den Hintergrund können wir Transparent lassen.

Wir erstellen eine neue Ebene, nennen diese “Hintergrund” und füllen sie mit der gewünschten Farbe. In unserem Fall lautet der Hex-Code für die Farbe #3c3c3c.

Die Ebene verschieben wir in den Main Ordner. Nun erstellen wir vier Hilfslinien, zwei Vertikale und zwei Horizontale.
Um eine Hilfslinie zu erstellen muss man auf “Ansicht > neue Hilfslinie“. Anschließend schieben wir die Hilflinien so zurecht, wie wir sie haben wollen.

Das aktuelle Ergebnis sollte nun so aussehen:

Website Tutorial photoshop website tutorial, website erstellen tutorial, website mit photoshop erstellen