Hauptmenü
Weitere Optionen
Tutorial suchenAdobe Photoshop Tutorial: Wie erstelle ich eine Prepage (Grafiken + Code)
+12
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 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 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
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.
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
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 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 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
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:
Schlüsserwörter:  CSS prepage same- tutorial xHTML |
Themenverwandte Tutorials
- Simple Dropdown-Navigation mit HTML/CSS
- Ersten Artikel automatisch mit CSS hervorheben
- Eine Schale, schnell und leicht erstellt !
- Schöner play Button
- Einfacher roter Text
- Outline fix für Links
- Cufón - Text Replace
- KonturSchriftEffekt
- Schöner Lichteffekt [Leicht]
- Wie benutze ich einen Brush?
Kommentar(e) (10)
SaMe- sagt:
zeig doch mal ;)
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
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 •
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 ^^
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 •
tobiasw sagt:
Da musste ich schmunzeln ;)
Also ich find es ebenfalls gelungen. Hilft bestimmt einigen :)
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 •
SaMe- sagt:
genau, wenn man html etc. kann..
ich bezweifle dass das jeder kann, dafür sind doch tutorials da, oder nicht?
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 •
DennisBlack 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.
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 :)
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!
Schön :)
31 Aug. 2008 21:40:01 • Antworten •