Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Adobe Photoshop Tutorial: Wie erstelle ich eine Prepage (Grafiken + Code)



Ranking: +12   Kommentare: 10   |   Bewertung: Keine Berechtigung!  

Vorwort:
Herzlich Willkommen zu meinem Tutorial in welchem ich euch zeigen werde, wie man eine einfache aber dennoch schöne und schlichte Prepage kreiert.
Zuerst erstellen wir die Grafiken die wir brauchen mit Adobe Photoshop und dannach setzen wir alles mit validem xhtml+css um.

Teil 1: Das Erstellen der Grafik

Schritt 1
Zuerst öffnen wir ein neues Dokument (Strg+N), in diesem Fall mit einer Größe von 375*500 px.
Nun legen wir einen Verlauf über die Hintergrundebene, von #4c382e nach #604639.
Das ganze sollte nun so aussehen:

Schritt 1
Schritt 1


Schritt 2
Jetzt erstellen wir wieder eine neue Ebene, wählen als Vordergrundfarbe weiß aus, nehmen das Pinselwerkzeug mit einem Radius von 250 px und klicken einmal mittig ins untere Drittel des Bildes.
Dannach stellen wir den Ebenenstil der Ebene auf Überlagern und die Deckkraft auf 50%.
Jetzt sollte unser Bild so aussehen:

Schritt 2
Schritt 2


Schritt 3
Kommen wir nun zur Schrift.
Schreibt mit weiß euren Satz, in meinem Fall der Seitentitel, in die Bildmitte.
Ich hab dem ganzen noch eine andere Farbe (#56d0ff) zur Auflockerung hinzugefügt, aber das ist Geschmackssache.
Ich habe diesmal die Schrift "Trebuchet MS" verwendet.
Um das ganze mehr vom Background abzuheben, geben wir der Schriftebene noch einen Schlagschatten mit folgenden Einstellungen:

Farbe: #2f211b
Füllmethode: Normal
Deckkraft: 100%
Winkel: 120°
Distanz: 1 px
Überfüllen: 0 px
Größe: 0 px

Das Endergebnis (was ihr als "grafik.jpg" abspeichert) sollte wie folgt aussehen:

Schritt 3
Schritt 3



Teil 2: Das Umsetzen in xhtml/css

Schritt 1
Damit wir den braunen Verlauf auf unserer Grafik als Background einbinden können, müssen wir uns ein 1px Breites Stück herausschneiden, die Höhe bleibt gleich.
Die Schrift- und Kreisebene blenden wir natürlich aus, sodass nur noch der reine Verlauf zu sehen ist.
Diesen späterern Background, speichern wir als "bg.jpg".

Schritt 2
Nun erstellen wir eine neue Html-Datei mit dem Namen "index.html" und kopieren folgenden Code hinein.
Die <!--Kommentare--> veranschaulichen nur den Quelltext und sollten später gelöscht werden.

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <!--Der Doctype gibt an wie ihr codet, in diesem Falle XHTML 1.0 Transitional-->



<head>

<meta name="Title" content="Dein Titel" />

<meta name="Author" content="Dein Name" />

<meta name="Keywords" content="Keywords, durch, ein, Komma, getrennt" />

<meta name="Description" content="Deine Beschreibung" />  <!--Im head-Bereich gebt in den Meta-Tags eure Inforamtionen an-->

<title>Hier kommt der Titel hin</title>  <!--Das ist der Titel der später in der Browserleiste erscheint-->



<style type="text/css">

body {

background-color: #604639;

background-image: url(bg.jpg);

background-repeat: repeat-x;

text-align: center;

}

</style> <!--Hier stehen die Eigenschaften der Page, das 1px-breite, sich horizontal wiederhohlende Hintergrundbild usw.-->

</head>



<body>

<img src="grafik.jpg" border="0" alt="leonardclaus.de" />  <!--hier gebt ihr euere Grafik an und deren Titel-->

</body>



</html>



Schritt 3
Nun müsst ihr nur noch alle Dateien (bg.jpg / grafik.jpg / index.html) auf euren Webspace hochladen und das wars.
Endergebnis: http://www.leonardclaus.de/tutorial/index.html

Schlusswort:
Ich hoffe euch hat mein Tutorial gefallen und ich habe es einigermaßen verständlich erklärt.
Falls es euch gefallen hat, würde ich mich über ein Kommentar oder eine positive Bewertung sehr freuen :) !
Bei Fragen könnt ihr mich einfach per PN erreichen.

Mit freundlichen Grüßen
Leonard Claus // leonardclaus.de

Veröffentlicht von: SaMe-
Veröffentlicht am: 10 Apr. 2008
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: CSS prepage same- tutorial xHTML


Themenverwandte Tutorials


Kommentar(e) (10)


Xycro sagt:

Schön :)

31 Aug. 2008 21:40:01 • Antworten


SaMe- sagt:

Zitat TheHen:

ich finde das tutorial richtig gut.

habe die prepage auch direkt genutzt für meine private page . ich finde sie sieht gut aus und reicht auch für den anfang



zeig doch mal ;)

16 May. 2008 14:46:25 • Antworten


TheHen sagt:

ich finde das tutorial richtig gut.

habe die prepage auch direkt genutzt für meine private page . ich finde sie sieht gut aus und reicht auch für den anfang

16 May. 2008 11:56:21 • Antworten


SaMe- sagt:

danke ;)

28 Apr. 2008 18:23:44 • Antworten


Mar_Cel sagt:

Ich kann zwar schon HTML und sowas hätte ich mit PS auch schon geschafft, aber für leute die es nicht können aber trotzdem sehr hilfreich, eine schlichte aber nette prepage =)

Fazit: TOP ^^

28 Apr. 2008 16:42:30 • Antworten


deleted_1341990139 sagt:

Zitat :

ich finds unötig. wer photoshop hat weiss wie man nen schriftzug erstellt und wer html ect. kann weiss dann auch wie man ne enter page erstellt.



Da musste ich schmunzeln ;)
Also ich find es ebenfalls gelungen. Hilft bestimmt einigen :)

11 Apr. 2008 16:45:30 • Antworten


propain66 sagt:

jo net schlecht schlicht und einfach n1

10 Apr. 2008 21:01:46 • Antworten


SaMe- sagt:

Zitat shiz0media:

ich finds unötig. wer photoshop hat weiss wie man nen schriftzug erstellt und wer html ect. kann weiss dann auch wie man ne enter page erstellt.



genau, wenn man html etc. kann..
ich bezweifle dass das jeder kann, dafür sind doch tutorials da, oder nicht?

10 Apr. 2008 19:58:58 • Antworten


deleted_1373545880 sagt:

ich finds unötig. wer photoshop hat weiss wie man nen schriftzug erstellt und wer html ect. kann weiss dann auch wie man ne enter page erstellt.

10 Apr. 2008 19:43:48 • Antworten


MeXuz sagt:

Also mir gefällt das Tutorial. Gut geeignet für Anfänger, vorallendingen dass das HTML-Coding mit hinzugefügt wurde, wird Anfängern besonders helfen die sich in dem allgemeinen Bereich nicht auskennen :)

10 Apr. 2008 19:31:21 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder