bine
Lounge-Member
Photohsop Tutorial Content-box mit abgerundeten Ecken:
I. Schritt Abgerundete Fläche erstellen:
1. neue Datei aufmachen z.B. 150 x 200px Hintergrund weiß.
2. neue Ebene erstellen (klick im Ebenenfenster auf das Symbol links neben der Mülltonne)
gib dieser Ebene den Namen 'Fläche'
3. Diese Ebene auswählen Strg A
4. Auswahl - verändern - Umrandung - 1px
5. Auswahl - verändern - Abrunden 10px
6. Auswahl umkehren
7. gewünschte Füllfarbe einstellen z.B. E7E7E7.
Bearbeiten - Fläche füllen - Vordergrundfarbe
II. Schritt Styles hinzufügen:
1. Doppelklick in das Vorschaubildchen der Ebene Fläche. Dadurch geht das Ebenenstilfenster auf.
Kontur - 1 px - außen - Deckkraft 40% - z.B. Farbe 777777
Ebenenstilfenster auflassen weil noch mehr Stile hinzugefügt werden
2. Schein nach innen - 90% Deckkraft - weiss
3. Abgeflachte Kante und Relief - Abgeflachte Kante innen - Grösse 0px - Glätten
Das Ebenenstilfenster kann jetzt geschlossen werden.
III. Schritt Kopf- und Fußleiste definieren:
4. Mit dem Auswahlrechteck wird jetzt die Headline deiner Box erstellt.
Einfach eine 1px horizontale Auswahl ganz nach belieben ca. 15-20px von der Oberkante entfernt machen und diesen Bereich Bearbeiten - Ausschneiden.
5. Auch unten eine 1px hohe Zeile ausschneiden, jedoch so das die Fußleiste nicht so hoch ist wie die Headline. Am besten direkt über der Rundung.
Nun hast du schonmal eine schicke einfache Box geschaffen. Weitere grafische Ausarbeitung der Kopf- und Fußleiste nach belieben.
Mit den Ebenenstilen und Farben oder kleinen Designelementen kann man hier natürlich auch ganz nach Geschmack spielen.
IV. Schritt Einzelteile zuschneiden:
Jetzt brauchst du nur noch die Box in Einzelteile zu zerschneiden um sie in dein Layout einzusetzen.
1. Die Headline, kannst du in diesem Beispiel komplett als ein Teil schneiden wenn die Breite der Box fest definiert ist und immer gleich bleibt.
2. Das Mittelteil besteht hier ebenfalls aus einem Teil, 2-3 pixel Höhe reichen schon aus um das Mittelteil als Hintergrundgrafik zu verwenden.
Es wird ja als background automatisch so oft wiederholt, gemäß der Höhe deiner Content-Box, bzw. je nachdem wieviel drin steht.
3. Das Fußteil ist in meinem Beispiel auch ein Teil.
Wenn die Box jedoch auch horizontal variabel sein soll, dann mußt du natürlich für Kopf Mitte und Fußteil die Teile links mitte und rechts zuschneiden.
Ich hoffe man kommt mit dieser nur schriftlichen Anleitung klar. Ansonsten mach ich das Tut nochmal ausführlich mit Bildern.
I. Schritt Abgerundete Fläche erstellen:
1. neue Datei aufmachen z.B. 150 x 200px Hintergrund weiß.
2. neue Ebene erstellen (klick im Ebenenfenster auf das Symbol links neben der Mülltonne)
gib dieser Ebene den Namen 'Fläche'
3. Diese Ebene auswählen Strg A
4. Auswahl - verändern - Umrandung - 1px
5. Auswahl - verändern - Abrunden 10px
6. Auswahl umkehren
7. gewünschte Füllfarbe einstellen z.B. E7E7E7.
Bearbeiten - Fläche füllen - Vordergrundfarbe
II. Schritt Styles hinzufügen:
1. Doppelklick in das Vorschaubildchen der Ebene Fläche. Dadurch geht das Ebenenstilfenster auf.
Kontur - 1 px - außen - Deckkraft 40% - z.B. Farbe 777777
Ebenenstilfenster auflassen weil noch mehr Stile hinzugefügt werden
2. Schein nach innen - 90% Deckkraft - weiss
3. Abgeflachte Kante und Relief - Abgeflachte Kante innen - Grösse 0px - Glätten
Das Ebenenstilfenster kann jetzt geschlossen werden.
III. Schritt Kopf- und Fußleiste definieren:
4. Mit dem Auswahlrechteck wird jetzt die Headline deiner Box erstellt.
Einfach eine 1px horizontale Auswahl ganz nach belieben ca. 15-20px von der Oberkante entfernt machen und diesen Bereich Bearbeiten - Ausschneiden.
5. Auch unten eine 1px hohe Zeile ausschneiden, jedoch so das die Fußleiste nicht so hoch ist wie die Headline. Am besten direkt über der Rundung.
Nun hast du schonmal eine schicke einfache Box geschaffen. Weitere grafische Ausarbeitung der Kopf- und Fußleiste nach belieben.
Mit den Ebenenstilen und Farben oder kleinen Designelementen kann man hier natürlich auch ganz nach Geschmack spielen.
IV. Schritt Einzelteile zuschneiden:
Jetzt brauchst du nur noch die Box in Einzelteile zu zerschneiden um sie in dein Layout einzusetzen.
1. Die Headline, kannst du in diesem Beispiel komplett als ein Teil schneiden wenn die Breite der Box fest definiert ist und immer gleich bleibt.
2. Das Mittelteil besteht hier ebenfalls aus einem Teil, 2-3 pixel Höhe reichen schon aus um das Mittelteil als Hintergrundgrafik zu verwenden.
Es wird ja als background automatisch so oft wiederholt, gemäß der Höhe deiner Content-Box, bzw. je nachdem wieviel drin steht.
3. Das Fußteil ist in meinem Beispiel auch ein Teil.
Wenn die Box jedoch auch horizontal variabel sein soll, dann mußt du natürlich für Kopf Mitte und Fußteil die Teile links mitte und rechts zuschneiden.
Ich hoffe man kommt mit dieser nur schriftlichen Anleitung klar. Ansonsten mach ich das Tut nochmal ausführlich mit Bildern.
Anhänge
Zuletzt bearbeitet:
