Hallo,

in diesem Tutorial werde ich euch zeigen, wie ihr eine schlichte Homepage schnell und einfach mittels dem Programm Photoshop designen könnt!

STEP 1

Fangen wir an, zuerst erstellen wir eine neue Datei [Datei > Neu], welche in der Breite 1000 Pixel und in der Höhe 900 Pixel misst. Die Hintergrundfarbe sollte in diesem Fall Weiss sein.

Zunächst erstellen wir zwei Hilfslinien, welche uns behilflich sind, mit dem Pfadwerkzeug gerade Linien zu zeichnen. Das sollte dann in etwa so aussehen, wie es auf dem folgenden Screenshot zu entnehmen ist.



STEP 2

Nun wählen wir das Pfadwerkzeug (P) aus, und zeichnen eine Form, welche der auf dem Screenshot ähnlich sieht.



STEP 3

Anschließend wählen wir das "Punkt Umwandeln Werkzeug" aus und passen unsere Form an. Dies geschiet, indem wir beide Punkte nach links und nach rechts verschieben. Solange bis das Resultat meinem gleicht. Anschließend wird diese Ebene gerendert.



STEP4

Nun nehmen wir das "Auswahl-Rechteck Werkzeug" und färben die Fläche unter dem Header in einer Farbe eurer Wahl. Anschließend wird diese Fläche zugeschnitten, sodass ausschließlich die leere Form aus dem schwarzen Header mit der von euch ausgewählten Farbe gefüllt ist.



STEP5
In diesem Step werden wir die "Abgrenzung" der Buttons designen. Dazu folgt einfach dem Bild, stellt die Transparenz auf 33% und nehmt das Radiergummi-Werkzeug um die Kanten oben und unten weicher zu machen.



STEP6

Nun füllen wir den Header mit einem Textlogo. Schreibt mit dem Textwerkzeug euren Text, oder fügt an dieser Stelle euer Logo ein.



STEP7

Wir haben es fast geschafft, es fehlt nur noch der Content, also der Inhalt, und Footer.
Wie sich der Content gestaltet hängt stark von den Anwendungsbereichen ab. Da dieses Tutorial sehr viele verschiedene User lesen, lass ich da euch Freiraum.

Der Footer ist im Prinzip die Fußzeile welche oft dafür verwendet wird, das Copyright oder andere wichtige Informationen und Hotlinks zum Impressum o.ä. einzubinden. In diesem Fall habe ich damals einen Text geschrieben den sich jeder User welcher diese .PSD besitzt durchlesen sollte.

Mein Resultat sieht wie folgt aus:



EDIT

Dieses Tutorial steht ab jetzt unter Bearbeitung. Das heißt, es wird sich etwas ändern. Vorallem werde ich den Text überarbeiten.

Die Originale .PSD Datei habe ich leider nicht mehr, und Rapidshare hat diese Datei gelöscht.
Wiederherstellen ist leider nicht möglich. Trotzdem hoffe ich, dass dieses Tutorial noch weiteren Interessenten helfen wird.

Gruß,
klee

Hey Klee das ist echt ein SuperhowTO. Was du noch machen könntest ist das erste Bild auch in der Größe anpassen, das ist größer als die anderen und dauert bei mir ewig zu laden sonst super...

Danke.
Habe das erste Bild angepasst,sollte jetzt Funktionieren

Finde ich sieht gar nicht mal schlecht aus für 10 Minuten Arbeit!!!

Danke,das freut mich natürlich
Jo bei mir gings so fix weil ich die ganzen verläufe usw. schon hatte also musste ich nur noch die "grundobjekte" erstellen.
naja und sonst ist es halt eher schlicht gehalten,was ich persöhnlich bevorzuge.

mfg klee

Hi,
schönes HowTo und das schlichte Design gefällt mir sehr gut.
MfG
master

Danke,das freut mich.

Nicht schlecht, weiter so!

Yo gefällt mir auch ganz gut. Für den Einstieg ist es wohl brauchbar.
Danke dir Klee

Hehe.Danke,und kein Problem immer wieder Gerne,bin schon am Nächsten
Ich denke es wird um de profesionellen Nachbearbeitung von Fotos etc, gehen.Ganz simpel mit nur 3werkzeugen und ein bischen gedult

Design ist natürlich auch Geschmackssache, aber weniger ist mehr und das sieht imho schon ganz gut aus.
Nicht schlecht für 10 Minuten Arbeit.

Was mir dabei noch fehlt, ist, wie man das "Bild" (ist ja noch nichts anderes) jetzt zur HTML-Seite macht. Das Ganze ist 1000 Pixel breit, d.h. man müsste nochmal was mit der Seite anstellen, damits auch im Browser gut aussieht (Hintergrund, oder überhaupt erstmal Zentrieren - vielleicht mit CSS...).

Mit Photoshop kann man ja schön Slices erstellen und die dann zu einer HTML-Seite exportieren. Daran müsste man dann halt weiter arbeiten...

Also eine "komplette Homepage" ist das dann doch noch nicht.

Edit:
Ach ja, angenommen du nimmst jetzt das Bild und erstellst Slices blabla...
Der Content (oder zumindest der Hintergrund) wäre dann vermutlich ein großes 1000px x ~750px großes Bild -> nicht gerade optimal für geringe Ladezeiten. Bei dem Hintergrund könnte man statt dessen ein 1px x ~750px großes Bild machen (weils ja nur ein Verlauf ist).

Und wie gesagt, den Content müsste man auch mit HTML/CSS richtig positionieren.

"komplette Homepage in 10Minuten Designen"
Nicht Coden
Ich sagte ja in der.psd das diese design größe keinen sinn hat.dieses tutprial,sowie diese .psd und die datei größte ist nur dazu da,um die angewendeten techniken zu erlernen,beispiel pfadwerkzeug,verläufe usw.
Ich kann mich morgen mal rann setzen,eine schlichte homepage zu designen (2farbig) und daraus eine .html datei zu machen,und meine arbeitsschritte hier festhalten.aber ich weiß noch nicht genau wie es mit der zeit aussieht.
ansonsten freue ich mich das es dir gefällt,trotz nicht getroffenem geschmack

Nein nein, das gefällt mir schon. Wollte nur anmerken, dass das Design Geschmackssache ist.

Achso,ja das ist ja kein Problem
Mir gefällt es schon nichtmehr,da ich es zu oft gesehen habe und schonwieder an etwas neuem arbeite (sehr aufweniges clandesign mit neuem aufbau,also ein wirklich ganz neuer & gewagter aufbau ^^)

bin gespannt was draus wird,könnte schon was werden,wenn man es WIP nennen kann,werde ich es euch zeigen..
dauert noch ^^

mfg klee

Hehe, das kenn ich... wenn man länger an nem Design, Logo oder sonst was arbeitet, gefällts einem nicht mehr.

Ansonsten, ich bin gespannt...

Für heute ist aber auch schon gut.. habe in 2 stunden ein clanwar.. ich bin gerade noch am überlegen wie ich den header einbringen werde,ob ich ihn normal belasse oder auch komplett anders designen werde,

Hi klee,
wie kommst du immer auf so gute Designs. Ich versuch schon länger eine Clan-Site fü unseren Clan zu machen, komm aber nie auf ein vernünftiges Design... .Auch wenn der/das Topic vielleicht schon etwas veraltet ist, vielleicht könntest du mal kurz erwähnen wie du generell auf nen Design kommst, wo du bestimmte grafische Elemente hernimmst und was man beachten sollte(wohin mit dem nav-bereich, wie kriege ich es hin das alles übersichtlich bleibt usw.).

Im prinzip entsteht alles Anfangs im Kopf. Nämlich mit der Idee.
Wenn ich ein neues Design mache, dann habe ich vorher meistens schon eine genaue Vorstellung wie es zum Schluss aussehen wird, Farben und Aufbau mit einbezogen. Und fremde grafische Elemente verwende ich zu 98% garnicht mehr, außer ich kriege die Anweisung dieses Logo von einem Kunden zu verwenden, ist aber äußerst selten.

Zum Thema Clanpages ... ich habe mich auch ziemlich viel mit Clandesigns beschäftigt, und muss sagen das war anfangs garnicht so leicht wie man sich das vorgestellt hat. Man braucht eine menge Erfahrung mit dem Programm und auch eine passende Idee, vorzugsweise eine die es noch nicht allzu oft gibt/gab. Die Farben sollte man auch sehr behutsam wählen, auch wenn Clanpages gerne etwas bunt sein dürfen sollten sie nicht ZU bunt sein. Generell hilft es sehr, andere Clandesigns die man sehr gut findet einfach nach machen. Selbstverständlich dann nicht veröffenltichen und sagen das war deine Idee, sondern nur zum Üben quasi ...

Hi ich bins nochmal,
ich wollte fragen wie du immer den gleichen Abstand zwischen den nav-links hinkriegs. Ich mach grad selber ein Design und das ist ziemlich nervtötend das auf den Pixel genau zu ziehen. Benutzt du irgendein Tool???

Augenmaß und die Linialfunktion von Photoshop.