Das große „Website in Photoshop erstellen“ Tutorial – Part 1

Donnerstag, 25. September 2008
Kategorie: Website Tutorial


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 1006x768px. 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:

  1. September 25th, 2008 um 18:08 | #1

    Ich glaub es nicht… du bringst das gerade zum rechten Augenblick… Ich muss nämlich gleich eine Homepage designen und da kommt mir dein Tutorial gerade recht 🙂

    Konnte es leider noch nicht durchlesen, werde ich aber nachholen… 🙂

  2. admin
    September 25th, 2008 um 18:16 | #2

    Hej RNiederer! Das ist ersz der erste Part, hier werden nur die Vorbereitungen getroffen. Richtig los geht es erst in ein paar Tagen.

  3. September 25th, 2008 um 19:48 | #3

    Schon gebookmarked 😉 Super Sache, weiter so!

  4. September 25th, 2008 um 22:14 | #4

    Klasse Sache…genau das, was ich schon immmer gesucht habe…

  5. September 26th, 2008 um 09:30 | #5

    … weiss jemand wie man Ordner in Photoimpact 12 erstellen kann?

  6. Oktober 12th, 2008 um 14:06 | #6

    sehr cool 😉 kann ich grade super gebrauchen! freu mich schon auf teil 2

  7. admin
    Oktober 12th, 2008 um 15:08 | #7

    Hej Anca, der zweite Teil wird wahrscheinlich ein Videotutorial sein. 🙂 Irgendwie bin ich zu faul dass alles zu schreiben ^^

  8. Oktober 28th, 2008 um 22:05 | #8

    Einfach nur Danke.

    Ich kann die nächsten Filmchen kaum erwarten!

    pcb

    künstler/kulturgestalter

  9. Rico
    Dezember 10th, 2008 um 23:40 | #9

    Geht es hier noch weiter? z.B. Schritt 4?

  10. Rico
    Dezember 11th, 2008 um 21:59 | #10

    Wow. Super erklärt alles. Ein großes Lob an euch.
    Ich kann Part 2 nicht finden. Könnt Ihr mir sagen wo der ist?

  11. kiddow
    Januar 23rd, 2009 um 17:38 | #11

    Ja, das tutorial ist super, nur steht man ganz schön beschissen da wenn man nach dem ersten Teil alles soweit gemacht hat und vergeblich nach dem zweiten Teil sucht! Wäre also nett wenn man das dann erst dann posted wenn es abgeschlossen ist… Wirklich ärgerlich… Ist nämlich schwer eines zu finden das daran anschließt. Aber wie gesagt: Super tutorial – nur bitte zuende bringen!

  12. Michael
    April 11th, 2009 um 23:02 | #12

    Hi,

    finde es auch schade, dass es keinen „Part 2, 3, 4,…“ usw. gibt.

    Nur Part 1 bringt mir leider nicht viel,…

  13. dum-spiro-spero
    Mai 19th, 2009 um 20:46 | #13

    Super Anleitung…

    und wann geht es weiter? las uns bloss nicht lange warten.

    schöne grüsse

    dum-spiro-spero

  14. MuffinArts
    Dezember 11th, 2011 um 17:05 | #14

    Wo bleibt Part 2????

  15. admin
    Dezember 12th, 2011 um 10:42 | #15

    @MuffinArts
    Danke für deinen Kommentar. Ich mache gerne wozu ich Lust habe und davor gab es jetzt viele andere Photoshop-Tutorials. Bisher fehlte der Drive für eine Fortsetzung.

  1. No trackbacks yet.

Einen Kommentar dazu schreiben: