Anzeige
Tutorialbeschreibung

Web: Gestalten eines Business Design's

Web: Gestalten eines Business Design"s

In diesem Tutorial möchte ich in wenigen Schritten das Erstellen eines Business-Design's erklären. Ein Business-Design sollte meiner Meinung nach eine klare Linie haben und könnte so aussehen:




Schritt 1:
Als Erstes erstellen wir eine neue Datei mit der Größe 800x600 Pixel.
Dann fangen wir gleich mit dem Hintergrund an. Dazu erstellen wir einen neuen Verlauf mit den folgenden Farbwerten und füllen die Hintergrundebene wie es auf dem Vorschaubild zu sehen ist.

Bilder

Schritt 2:
Nun erstellen wir den Header und den Content. Dafür erstellen wir eine neue Ebene. [ Umschalt+Strg+N ] Nun wählen wir das Auswahlrechteck-Werkzeug [ M ] und ziehen ein Rechteck, wie auf dem Bild unten. Zur optischen Abrundung zeichnen wir, mit dem Buntstift-Werkzeug [ B ], einen 3 Pixel breiten hell grauen Rahmen um das Rechteck. Um eine Trennlinie zwischen Header und Content zu schaffen, habe ich ebenfalls eine 3 Pixel breite hellgraue Linie gezeichnet.

Bilder




Schritt 3:
Arbeiten wir uns also weiter von oben nach unten vor. Wir erstellen wieder eine neue Ebene und klicken mit dem Zauberstab-Werkzeug [ W ] in den abgetrennten oberen Bereich. Nun sollte wir diesen ausgewählt haben und wir erstellen erneut einen neuen Verlauf mit den folgenden Farbwerten.

Bilder


Damit sich dieser Verlauf etwas abhebt, benutzen wir ein Muster. Ihr könnt ein Muster selber erstellen oder euch meins runterladen. ( Download: http://www.scientia-online.de/cgi-bin/upload/filex/Streifen.rar )
Nun macht ihr einen Rechtsklick auf eure Header-Verlaufsebene und wählt "Ebeneneigenschaften" aus. In den Ebeneneigenschaften wählt ihr dann das Muster aus und nehmt die Einstellungen, die unten auf dem Bild zu sehen sind, vor.

Bilder

Nun sieht der Header noch etwas leer aus, um das zu ändern, brauchen wir einen Pinsel; diesen findet ihr unter Downloads-> Photoshop->Erweiterungen->Pinsel->Pflanzen: Rosenblütenpinsel cs2
Wir erstellen eine neue Ebene und benutzen einen beliebigen Rosen-Pinsel. Zu beachteten ist, dass die Vordergrundfarbe weiß ist.
Nun fehlt nur noch die Navigation. Der Aufbau der Navigation sollte eigentlich von dem Vorschaubild ersichtlich sein und wer es bis hierhin geschafft hat, wird die Navigation mit Leichtigkeit schaffen.

Schritt 4:
Der Content sieht nun noch etwas leer aus, doch um den Content anschaulich zu gestalten, sind nur einige Hilfslinien, Bilder und Texte nötig. Da ich nicht will, dass aus diesem Tutorial Duplikate entstehen, werde ich nicht genau auf den Aufbau eingehen. Allerdings gebe ich einige Tipps zum Grundaufbau eines Contents.
Es ist sehr schön anzuschauen, wenn sich im Content Bilder befinden. Dieses ist vor allem bei einem Business Design der Fall, denn die Bilder bilden eine Brücke zwischen schlicht und seriös.
Um den Style des Design's wieder aufzugreifen, habe ich einen 1 Pixel breiten hellgrauen Rahmen um die Bilder gezogen.
Ansonsten kann ich noch raten, überall sinnvolle Hilfslinien zu platzieren, damit man sicher gehen kann, dass alles auf den Pixel genau passt. Mit sinnvollen Hilfslinien ist z. B. so etwas gemeint:

Bilder


Bilder


Damit wären wir am Ende.
Ich hoffe, dieses Tutorial kann einigen helfen.

Vorschau in groß:
http://www.scientia-online.de/cgi-bin/upload/upload.cgi?a=show&big=1&datei=62757373696c61796f75742e6a7067&downloadpasswort=idw1

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von HackerSindDieGuten
Portrait von snoopdog1971
  • 07.11.2010 - 00:22

in der kürze liegt die würze

Portrait von vamp
  • 23.09.2010 - 21:56

danke, kurz und knapp aber alles da was man braucht!

Portrait von Spearboy
  • 02.09.2010 - 09:41

Vielen Dank für dieses Tutorial!

Portrait von Nachtfuchs
  • 04.04.2010 - 00:46

Kurz & knapp beschrieben, aber okay.

Portrait von gurbette66
  • 26.03.2010 - 21:32

finde auch das es etwas knapp ist, aber trotzdem vielen Dank für deine Bemühungen :)

Portrait von mohnhaupt
  • 01.01.2010 - 09:00

schon etwas wenig Info, bzw. Anweisungen.

Portrait von rapid10
  • 03.12.2009 - 22:19

Sehr gute erklärt und schönes Resultat, das rauskommt. :-)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.12.2009 - 22:02

Gut um sich ein paar Ideen zu holen, jedoch meiner Meinung nach zu wenig detaillierte Anweisungen

Portrait von nagyen
  • 26.11.2009 - 20:58

Zwar bisschen knapp beschrieben, aber ich habe nachmachen können.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 21.10.2009 - 11:26

Ist wirklich sehr genial

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 22.09.2009 - 09:56

sehr gut war genial!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.08.2009 - 21:11

Nettes Toturial, perfektes layout schlicht aber gutaussehend!

Portrait von Bruckii93
  • 13.07.2009 - 14:00

Also ich finds sehr gut,.. zwar kurz und knapp erklärt, aber man kann es problemlos selbst erstellen, daher man sich die zwischen Schritte gut denken kann,.. Vielen Dank.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.05.2009 - 13:25

bissl knapp aber trotzdem gut!
besten dank!

Portrait von Yaku82
  • 10.03.2009 - 15:49

Ganz gut, könnte aber etwas ausfühlicher sein.

Portrait von Saint
  • 18.01.2009 - 02:43

net schlecht gut erklärt

Portrait von Rabatz1
  • 09.11.2008 - 11:51

ganz nett, muss ich dem vorgänger zur ausführlichkeit anschließen

Portrait von dim5252
  • 29.10.2008 - 08:15

Könnte etwas ausführlicher sein, sonst aber sehr gut =)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 22.10.2008 - 17:48

Gutes knappes Tutorial. Für Einsteiger vielleich ein wenig zu kurz

x
×
×