Dein Weg zur eigenen Website in 15 m Teil1

[NeoX]

Hallo!
Ich möchte euch mein 2. Tutorial vorstellen. Ich werde euch zeigen, wie ihr einfach eine eigene Website erstellen könnt. Heute werde ich euch den 1. Teil zeigen. Ihr braucht hierzu nur Photoshop. (Ich benutze CS2)

Step 1:

Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren

Ihr erstellt eine neue Datei mit den Maßen 1001*786. Der Hintergrund kann Transparent sein oder ihr nehmt einen dunklen Grauton.

Step 2:

Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren

Wer Transparent gewählt hat, sollte den Hintergrund in einem dunklen Grau färben.(#383838)

Step 3:

Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren

Jetzt makiert ihr mit dem Auswahlswerkzeug das Feld, welches später der Hauptpunkt eurer Website werden soll. Dann benutzt ihr das Verlaufswerkzeug -> übernehmt einfach die Farben auf dem Bild.

Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren

So sollte das ganze nun aussehen

Step 4:

Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren

Nun nehmt ihr das Linientool, zieht eine Linie wo der Header zuende sein soll.
Darunter schreibt ihr mit der Schriftart (ich nehme Tahoma eurer Wahl die Navigationspunkte. Dann kopiert ihr die Ebene mit der Linie und zieht sie unter eure Menüpunkte der Navigation.

Step 5:

Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren

Nun zieht ihr mit dem Auswahlswerkzeug ein Feld unter die Navigation und füllt diese mit dem Verlaufswerzeug mit einer beliebigen Farbe. Dieses kann später für Werbung, besondere Angebote oder Gewinnspiele genutzt werden.

Zum Schluss könnte das ganze dann so aussehen:

Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren

Ich bitte euch es zu bewerten und mir ein paar Tipps zu geben.
In den nächsten Tagen werde ich den nächsten Teil machen😀

euer Neox

 

[Xtasy]

Kleiner Tipp, binde die Fotos richtig in deinen Post ein damit die sofort angezeigt werden 🙂

 

[NeoX]

Danke, der große Teil ist zu groß, ich finde es sieht so übersichtlicher aus 😉

 

[Xtasy]

Bilder verkleinern 😉

 

[Compiler]

Verkleiner die Bilder mal und binde die mit

 

[LAX_LAkes]

Gegenbenenfalls pixuria.com nehmen, da gehts ebenfalls sehr schnell und da kannst du Kompromiss die kleine Vorschau benutzen 😉

 

[Nice n Slow]

hehe, also man sieht das es 15 minuten waren =P

aber wenns von jemand die erste template ist, okay

 

[NeoX]

Es soll auch nur das Grundgerüst zeigen, weil es ein Tut, für anfänger sein sollte. Ich probiere es nachher mal mit den Bildern.

NeoX

 

[vwbasti]

versteh nich ganz, wie man dann auf die links klicken soll, also "wir über uns" usw. ist doch im endeffekt nur ein bild, oder kannste da die links einbinden?

 

[NeoX]

Ja, das kann ich dir später in einem anderen Tut zeigen, das Design wird gesliced und die Schrift (oder die Bilder) werden dann als Buttons verlinkt.

NEoX

 

[vwbasti]

was bedeutet denn gesliced?

 

[[TAO]Freak]

geschnitten... das Mainframe wird in lauter kleine Bildchen "zerstückelt" und dann wie eine Art Puzzle zusammengesetzt somit hast du die möglichkeit einzelne Teile des Mainframes als Button, Link etc. zu nutzen. Auch macht es sich dann besser mit Hover-Grafiken zu arbeiten, da nur das "geslicede" Stück des Bildes neu gerendert werden muss...

 

[vwbasti]

aha, das hört sich sehr interessant an. hat da jemand vielleicht noch nähere informationen, oder einen link zu nem tutorial oder so?
hab bis jetzt nur mit (x)html und css gearbeitet, aber noch nicht mit photoshop und "geslicedem" design. Links und/oder Infos bitte posten!

 

[NeoX]

Ich werde mich am WE mal an nen Tut setzten, wie man das anpassen kann ... Habe zur Zeit leider nur ein bisschen Schulstress.

dann mach ich auch die Pics klein, bye