Anzeige
Tutorialbeschreibung

Web: Erstellen einer Business-Homepage

Web: Erstellen einer Business-Homepage

 

Ich will euch mit diesem Tutorial mal eine Möglichkeit zeigen, wie man eine Business- Homepage erstellen kann


Schritt 1:

Ich hab mir zuerst mal meine verwendeten Bilder beschafft. Um eine Business Homepage zu erstellen, habe ich mir über ein Bilderdienst einen Serverbild und eine Weltkugel besorgt. Benötigen wir später noch.

Bilder
Bilder

Fangen wir an.



Wir erstellen ein neues Bild über Datei -> Neu mit den Werten Breite 700px Höhe 900px, einem transparenten Hintergrund und einer Auflösung von 72 Pixel/ Zoll. Jetzt wählen wir in unserer Werkzeugpalette das Füllwerkzeug aus .
Bilder

Wenn die Werkzeugpalette bei euch ausgeblendet ist, könnt ihr sie unter Fenster -> Werkzeuge einblenden.


Der Hintergrund
Als nächstes füllen wir den Hintergrund unserer Seite, indem wir auf die Vordergrundfarbe in der Werkzeugpalette klicken und den Wert #D73600 eintragen,
Bilder

dass ganze bestätigen und mit dem Füllwerkzeug auf die Ebene klicken.

Damit wir später durch die große Anzahl an Ebenen den Überblick nicht verlieren, geben wir unserer Hintergrundebene einen Namen, und zwar den Namen Hintergrund : ).
Wir gehen dazu auf Ebene -> Ebeneneigenschaften und tragen den Namen dort ein.

Der Banner

 

Wir erstellen erstmal eine neue Ebene und benennen sie Banner. Nun wählen wir das Auswahlrechteck- Werkzeug aus,

Bilder
und stellen oben in der Menüleiste den Wert von Normal auf Feste Größe. Wir geben dem Rechteck eine Breite von 700 px und eine Höhe von 154 px. Positioniert das Rechteck ganz oben von eurer Webseite. Füllt die Auswahl mit irgendeiner Farbe. Nun gehen wir in die Ebenenstile über Ebenen -> Ebenenstil -> Fülloptionen. Dort unter Verlaufsüberlagerung lassen wir alle Einstellungen ausser den Farben unberührt und wählen folgende Farbeinstellungen.

  1. Position 0% mit der Farbe #F24002

  2. Position 50% mit der Farbe #A62900

  3. Position 100% mit der Farbe #F24002

Machen wir mit dem Server weiter. Es ist natürlich euch überlassen wo ihr den Server positioniert. Bei mir ist er am linken Rand vom Banner. Kopiert den Server also in euer Dokument.
(Es ist wahrscheinlich, dass die Farben vom Server indiziert sind. Geht dann auf Bild -> Modus -> RGB-Farbe und zieht den Server dann in eure Webseite). Benennt die Ebene Server.
Ich habe über das Polygon-Lasso-Werkzeug (unter dem Lasso-Werkzeug) einen Teil des Servers

Bilder
weggeschnitten. Über Strg +T können wir die Größe auf die Bannergröße reduzieren. Er sieht hinterher so aus.

Bilder

Wir färben ihn nun ein. Gehen wir also wieder in unsere Ebenenstile. Unter Farbüberlagerung wechseln wir die Füllmethode auf Farbe und tragen folgende Farbe ein #CF3400. Um nun einen Übergang zum Hintergrund zu erzeugen müssen wir eine Ebenenmaske erstellen. Gehen wir also auf Ebene -> Ebenenmaske hinzufügen -> alles einblenden. Drückt nun D um die Vordergrund- und Hintergrundfarbe auf Schwarz- Weiss umzustellen und x um Schwarz als Vordergrundfarbe einzustellen. Nun erstellen wir einen Verlauf von rechts nach links. Angefangen von der rechten Seite des Pfeils bis zur Pfeilspitze.

Bilder

Ihr müsstet nun einen solchen Übergang in den Hintergrund erhalten.

 

Bilder

Navigation

Als erstes erstellen wir eine solche Form, und benennen sie Navigation (Die Navigation ist bei mir 633px Breit und 77px Hoch)

Bilder

 

Wählen wir also dass Pfad-Werkzeug aus der Werkzeug-Palette aus, und zeichnen erst einmal die einzelnen Eckpunkte. Nun können wir mit dem Ankerpunkt-hinzufügen-Werkzeug die

Rundungen machen. Wir setzen hiermit einen Ankerpunkt auf die gezeichneten Linien, und machen die Rundungen mit dem Direkt-Auswahl-Werkzeug. Falls ihr die Rundungen nicht ganz

hinbekommt, könnt ihr auch mit dem Punkt-umwandeln-Werkzeug den Rundungen ein bisschen auf die Sprünge helfen. Habt ihr die Figur hinbekommen, klickt mit der rechten Maustaste in der Ebenenpalette auf die so eben erstellte Vektorebene und wählt Ebene rastern aus. Positioniert die Form am unteren und am rechten Rand vom Banner. Jetzt wendet ihr wieder Ebenstile an. Macht folgende Einstellungen.

Farbüberlagerung
Füllmethode: Farbe
Farbe: #F25802

Verlaufsüberlagerung:
Farbe: Position 0%; #9FA2A5
Position50%; #4776A8
Position 100%; #8893A1
Füllmethode: Luminanz
Stil: Gespiegelt
Skalierung 150%

So sieht die Navigation anschliessend aus.


Bilder

 


Kommen wir zu den Trennlinien in der Navigation. Zuerst erstellen wir ein Ebenenset. In der Ebenenpalette folgendes Symbol ganz unten.

Bilder
Wir benötigen wieder dass Zeichenstift-Werkzeug und erstellen eine solche Form. 

Bilder

Anschliessend rastern wir unsere Ebene wieder,  gehen in unseren Ebenenstilen auf Farbe, und tragen folgenden Farbwert ein: #FA873F Nun können wir, indem wir die Ebene mehrfach duplizieren (Bearbeiten -> Ebene duplizieren) die Trennstriche in der Navigation platzieren. Benennt eure verschiedenen Trennstriche einfach Trennstriche und kopiert sie in das Set Trennstriche (Wegen der Übersicht). Es kann vorkommen, dass derr Navigation aus.   Strich ganz links ein bisschen vergrößert werden muss. Einfach über Strg + T die Größe verändern. Man kann auch den Weg über Bearbeiten -> Frei transformieren gehen. So sieht mein Teil der Navigation aus.

Bilder

 

Leiste unter Homepageadresse

Wir erstellen einfach eine 570 Pixel Breite und 4 Pixel Hohe Auswahl, erstellen eine neue Ebene namens Leiste_Adresse, und füllen sie mit irgendeiner Farbe. Anschliessend wechseln wir in unsere Ebenenstile und machen folgende Einstellungen:

Farbüberlagerung
Farbe: #D74D00
Füllmethode: Aufhellen

Abgeflachte Kanten und Relief


Bilder

 

Leiste unter Banner

Um die orangene Leiste unter dem Banner zu erstellen, benötigen wir erst einmal wieder eine neue Ebene mit dem Namen Leiste_Banner, und den folgenden Maßen:

Breite: 700px
Höhe: 7px

Füllen wir die Auswahl indem wir die Vordergrundfarbe auf #F65C06 setzen, und mit dem Füllwerkzeug die Auswahl füllen. Anschliessend wählen wir das Verschieben- Werkzeug

Bilder

und platzieren unsere Leiste direkt unter dem Banner.

 

Der Webseitenname


Schreibt mit dem Horizontalen Text-Werkzeug euren Namen der Webseite. Und platziert ihn über der erstellten Linie mit dem Namen Linie_Adresse. Folgende Einstellungen habe ich für meine Schrift vorgenommen.

Bilder

 

Die Links

Gehen wir vor wie beim Name der Webseite und wählen diesmal folgende Schrifteigenschaften:

Bilder

Platziert nun eure Links zwischen den Trennlinien in der Navigation.

 

Die Weltkugel

Ladet die Weltkugel in euer Dokument und benennt die Ebene Weltkugel platziert sie so in eurer Webseite, dass oben, unten und rechts ein Stück aus der Homepage heraushängen. (siehe Bild unten). Diese Teile werden wir jetzt entfernen. Wir nehmen dass Rechteck-Auswahl- Werkzeug und markieren den Bereich der Aus dem Banner heraushängt. Wenn wir nun auf der Tastatur entfernen drücken wird der Bereich gelöscht. Haben wir die Kugel ersteinmal bearbeitet können wir ihre Erscheinung noch ein wenig reduzieren. Da meiner Meinung nach die Kugel weiss nichts aussieht, färben wir sie schwarz. Also gehen wir in die Ebenenstile auf Farbüberlagerung. Stellen die Farbe auf Schwarz. Jetzt haben wir eine schwarze Kugel. Damit die Kugel aber nicht so aufdringlich wirkt, reduzieren wir ihre Deckkraft auf etwa 7%. Mir persönlich gefällt der Hintergrund der Kugel allerdings nicht nicht so gut. Erstellen wir also eine Ebene unter der Ebene mit der Weltkugel, mit einer Breite von 261px und einer Höhe von 158px, und benennen wir sie Welt_hintergrund. Wir positionieren dieses Rechteck rechts oben von unserer Webseite. Über eine Ebenenmaske können wir den Bereich hinter der Kugel ein wenig aufhellen. Wir erstellen also eine Ebenenmaske, und ziehen von links nach rechts einen Schwarz- Weiss Verlauf (Rautenverlauf) über die ganze Breite vom Rechteck. Wie sich unschwer erkennen lässt, hat sich am linken rand vom Rechteck nun ein unschöner Bereich gebildet, der vom Rest des Hintergrunds abweicht. Klicken wir also mit der rechten Maustaste auf unsere Ebenenmaske (rechtes Feld in der Ebenenpalette neben der Rechteck- Ebene) und wählen Ebenenmaske anwenden. Anschliessend erstellen wir eine zweite und ziehen einen linearen Verlauf über die Stelle mit der Abweichung.

Mein und Euer Banner müssten im Moment folgendermaßen ausschauen.
Bilder

Wem er bisher gefällt kann eigentlich zum nächsten Schritt weitergehen. Ich hätte allerdings den Bereich links vom Banner lieber in einer dunklen Farbe. Dass Prinzip ist dass gleiche wie eben gerade. Ich habe mir also eine neue Ebene erstellt, diese server_hintergrund benannt, und eine Auswahl von 575px Breite und 154px Höhe angewendet. Platziert die Auswahl ganz links oben von der Homepage und füllt sie mit einer Farbe. In den Ebenenstilen machen wir folgende Einstellungen:

Verlaufsüberlagerung

Farbe: #F23E03 Position: 0%
#A42701 Position: 50%
#F23E03 Position: 100%

Die Ebene muss über der Hintergrundebene vom Banner platziert werden, und unter dem Server und allem anderen. Jetzt wenden wir wieder eine Ebenenmaske an und ziehen einen Schwarz- Weiss Verlauf (Rauteverlaufl) von rechts nach links über die ganze Breite des Rechtecks.

Bilder

Da wir jetzt wieder eine kleine Unebenheit rechts haben, wählen wir wieder Ebenenmaske anwenden, und erstellen eine neue Ebenenmaske mit einem neuen Schwarz- Weiss Verlauf. Wieder über einen kleinen Bereich von rechts nach links bis auch dieser Fehler beseitigt ist. Aber wie gesagt, der etwas dunklere Bereich ist Geschmackssache. 

Dass Logo

Erstellen wir erstmal ein neues Set mit dem Namen Logo.In dieses Set werden wir jetzt alle Ebenen hineinkopieren die mit dem Logo zutan haben. Für dass Logo benötigen wir eine neue Ebene und einen perfekten Kreis in dieser Ebene mit einer Breite von 48px und einer Höhe von 48px. Füllen wir die Auswahl mit folgender Farbe #D57656. Bei noch geladener Auswahl (sonst Auswahl -> Auswahl laden) gehen wir auf Auswahl -> Auswahl verändern -> erweitern, und erweitern diese um 3px. Jetzt erstellen wir wieder eine neue Ebene, ziehen diese Ebene in der Ebenenpalette einfach unter die so eben erstellte Ebene und füllen die Auswahl mit #E78869. Anschliessend gehen wir in unsere Ebenenstile und wählen Kontur aus mit folgenden Einstellungen.

Kontur:

Größe: 2
Position: innen
Deckkraft: 30%
Farbe: #C63402


 

Jetzt brauchen wir wieder eine neue Ebene und legen sie über die Ebene vom mittleren Kreis. Erstellen wir nun dass abgerundete Viereck in der Mitte vom Logo. Gehen wir also auf unser Abgerundetes- Rechteck- Werkzeug und rastern die erstellte Ebene. Die Ebene füllen wir mit #852607 und drücken Strg + T um sie zu drehen. Ungefähr so weit wie unten dargestellt. Den Kreis daneben erstellen wir ganz einfach über eine neue Ebene und unser Auswahlellipse- Werkzeug. Jetzt müssen wir ihn nur noch mit folgendem Rotton färben: #E64501. Mein Resultat sieht folgendermaßen aus.

Bilder

Kommen wir zu dem Schweif, welcher dass Logo verfolgt. Wir öffnen ein neues Dokument mit einer Größe von 300px Breite und 300px Länge. Wir füllen den Hintergrund mit Schwarz und schreiben ein weisses A mit einer Schriftgröße von 40px rechts unten in dass Dokument. Nun klicken wir mit der rechten Maustaste auf die Ebene mit dem A und wählen Ebene rastern. Die Filter können jetzt auf die Ebene angewendet werden. Gehen wir also auf Filter -> Stilierungsfilter -> Windeffekt und wählen die Einstellungen:

Methode: Wind
Richtung: rechts


Diesen Filter wiederholen wir jetzt um die 8 mal, und drehen danach dass A um 90 Grad im Uhrzeigersinn. (Bearbeiten -> Transformieren -> 90° im Uhrzeigersinn drehen) Wir scheiben das ein bisschen verschobene A daraufhin wieder ein Stück ins Dokument hinein und wählen Filter -> Verzerrungsfilter -> Verbiegen mit folgenden Einstellungen.

Bilder

Mein A schaut nun folgendermaßen aus.

Bilder


Jetzt ziehen wir die Ebene mit dem A einfach in unser Dokument mit der Homepage. Durch drehen kann man nun schon ein bisschen den Schweif an die Rundung der Navigation anpassen. Und indem man Strg + T drückt kann man bei gedrückter Strg Taste die Eckpunkte perspektivisch verzerren, was auch immer weiter zu einer ähnlichen Rundung führt. Um dass Ende vom Schweif wieder ein bisschen abzuschwächen, wenden wir wieder eine Ebenenmaske auf die Ebene an, und zwar wieder mit einem Verlauf von rechts nach links und zwar wieder über die volle Breite vom Schweif.

Tip: Wenn man überhaupt nicht mit der Rundung vom Schweif zurecht kommt, kann man immer noch die Auswahl der Navigation laden, sie um mehrere Pixel verkleinern, (so dass die Auswahl einigermaßen so gross ist wie der Schweif) über den Schweif verschieben, die Auswahl umkehren und entfernen auf der Tastatur drücken. (ziemlich kompliziert oder?) wer es aber ausprobiert hat, weiss wovon ich gerade geredet habe : )).

Jetzt fehlt uns eigentlich nur noch die rechte Leiste für NEWS oder LOGIN oder ähnliches. Fangen wir mal an mit einem abgerundeten Rechteck an (Abgerundetes-Rechteck-Werkzeug) welchem wir einen Radius von 9px zuordnen. Wir zeichnen nun ein solches Rechteck von ganz unten bis zur orangenen Leiste unter dem Banner. Dasss Rechteck kann ruhig etwas breiter sein. Jetzt ist es wieder an der Zeit unser Rechteck zu rastern, und anschliessend füllen wir es mit #F85E08. Den Rechten Bereich benötigen wir allerdings nicht, drum ziehen wir eine Auswahl an den Ecken vom Rechteck und drücken entfernen. (siehe Bild)


Bilder

 

Ps. Ich habe dass Bild in der Höhe zur Veranschaulichung verkleinert!!!

Jetzt nur noch alles rechts an den rand setzen und fertig ist der neue Bereich

Zur Gliederung der Webseite habe ich noch eine einfache Trennlinie eingefügt welche mehrere Bereiche der Webseite gliedern soll.

Wir erstellen also unter dem eben erstellen Bereich eine neue Ebene mit einer Breite von 700px und einer Höhe von 23px. Diese füllen wir ganz einfach mit folgender Farbe #F15701.

Und fertig ist eigentlich unsere Webseite. Ich hoffe, ich konnte euch mit diesem Tutorial ein paar Möglichkeiten aufzeigen, wie ein Webseite erstellt werden kann, und hoffe euch gefällt dieses Tutorial. Schreibt doch bitte was eucht gut gefällt und was euch nicht gut gefällt. Bin für alle Vorschläge offen. Wenn jemand nicht weiterkommt, einfach per PM melden. Falls trotz mehrmaligem Nacharbeiten sich irgendwo ein Fehler eingeschlichen hat, teilt es mir doch bitte mit.

MFG Morpheus903

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von nene1
  • 02.02.2012 - 19:12

Danke :o) echt hilfreich!!

Portrait von shaking
  • 26.09.2011 - 10:03

auch wenn es mittlerweile schon etwas alt ist, allemal einen versuch wert.

Portrait von willy999
  • 08.03.2011 - 13:29

Danke für die Hilfe, werde mich einfach durchkämpfen.
Danke

Portrait von Gininho
  • 17.02.2011 - 06:32

super vielen dank. sehr hilfreich

Portrait von Voss007
  • 13.02.2011 - 23:12

Danke Hat mir geholfen

Portrait von Ticki007
  • 19.12.2010 - 18:17

Schön, war ne große Hilfe... danke !

Portrait von Ronon
  • 22.11.2010 - 14:14

super gemacht.

sf
asf s
fsf s

s s
f s

Portrait von Fjurok
  • 18.11.2010 - 20:34

Sehr gut gemacht. Danke

Portrait von Spearboy
  • 02.09.2010 - 09:40

Vielen Dank für dieses anschauliche Tutorial!

Portrait von luv007
  • 02.08.2010 - 18:20

echt klasse ,danke für diesen download

Portrait von Bonniie90
  • 31.07.2010 - 12:33

Tolles Tutorial! Danke! =)

Portrait von Eizza
  • 26.07.2010 - 20:55

Danke, echt Klasse!
Sowas habe ich gesucht :]

Portrait von Namelessness
  • 22.07.2010 - 11:10

War sehr hilfreich danke!!!

Portrait von invidicult
  • 16.07.2010 - 13:12

Super Sache! Hat mir sehr geholfen!
DANKE!

Portrait von verenita82
  • 16.06.2010 - 19:31

Sieht sehr gut aus! Schönes Tutorial.

Portrait von Snaker007
  • 27.05.2010 - 14:36

Super Sache!! DANKE!

Portrait von tomlin
  • 21.05.2010 - 12:16

Super Tutorial - weiter so!!!

Portrait von Nachtfuchs
  • 04.04.2010 - 00:59

Hätte es schöner ausgeschmückst gahbt :(

Portrait von Ryan101
  • 05.03.2010 - 19:52

Schönes Tutorial - Danke

Portrait von archy
  • 03.03.2010 - 13:11

ganz ok beschrieben

x
×
×