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 Akwa
  • 30.09.2008 - 18:59

Super Tutorial meine Seite verwendet jetzt auch so ein Design

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 23.09.2008 - 19:32

Super damit hab ich schon mal nen Punkt wo ich einhacken kann danke

Portrait von nikeshoxcc
  • 08.09.2008 - 10:52

echt super vielen dank dür diese Vorlage :)

Portrait von Puffel4you
  • 23.08.2008 - 00:15

gut aber en bissel arg knapp

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 01.08.2008 - 19:27

Danke, für dein ausbaufähigen Einstieg!

Portrait von PlayazHH
  • 25.07.2008 - 21:00

Merci!! Konnte man gut umsetzten,,,,

Portrait von ghost90
  • 24.06.2008 - 20:19

Der link tut nicht mehr !

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 08.03.2008 - 12:59

Nicht ausführlich, wäre für Anfänger unter Umständen schwer geworden, habe es aber ziemlich ähnlich nachgebaut.

Würde mich freuen, wenn du dazu auch noch ein Coding-Tutorial online bringen könntest, weil es bei mir da spätestens scheitert ;)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 24.02.2008 - 22:14

schönes Ergebnis aber für Einsteiger nicht so geeignet

Portrait von JGnaedig
  • 14.02.2008 - 12:55

Eine etwas ausführliche Beschreibung wäre für Einsteiger etwas hilfreicher. Das Ergebnis ist allerdings gut.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.02.2008 - 15:11

sieht gut aus für einsteiger aber nicht unbedingt geeignet

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.01.2008 - 12:17

Gutes Tutorial - für ne schnelle, einfache, aber trotzdem ansprechende Homepage. Prima.

Portrait von Hofpi
  • 16.01.2008 - 05:50

Ich meinte Link nicht Lik o.o

Portrait von Hofpi
  • 16.01.2008 - 05:49

Gutes Tut nur solltest du den Link zu deinem Muster aktualisieren und auch den Lik zur Großansich :)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 07.01.2008 - 20:23

Leider nicht besonders gut und Ausführlich erklärt!

Portrait von trom
  • 15.12.2007 - 16:25

einige nette informationen, die ich später mal anwenden kann. danke.

Portrait von tommydog187
  • 16.08.2007 - 12:43

Habs net hinbekommen und der Link geht nicht

Portrait von JonVanDeBerg
  • 07.08.2007 - 17:57

Nicht sehr ausführlich. Könnte mehr Informationen beinhalten

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 24.07.2007 - 20:40

design ist gut, nur über die bearbeitung per html wüsst ich gern noch was

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 11.07.2007 - 23:04

erklärungs war nicht so doll aber trotzdem schön anzusehen!!

Mehr anzeigen

x
×
×