Rillen wie Diese

Ich werd dir gleich ungern ;)

Ich denke auch hier führen viele Wege nach Rom und der Zweck heiligt die Mittel.
So hilft Martins Vorschlag sicher bei der Layoutumsetzung am besten.

Grüße Marco
 
So, nun wollte ich es genau wissen und habe die Webseite analysiert. :p

Die Rille ist ein Bild in der Grösse 3x3px.
Benötigt wird eine Hintergrundebene und zwei transparente Ebenen.
Die Hintergrundebene bleibt wie sie ist.
Auf der 1. Ebene wird eine Auswahl von 2px Höhe vom oberen Rand angelegt, diese Auswahl wird schwarz gefärbt und die Tranzparenz auf 44% eingestellt.
Auf der 2. Ebene wird eine Auswahl von 1px Höhe vom unteren Rand angelegt, diese Auswahl wird weiss gefärbt und die Transparenz auf 7% eingestellt.
Nun noch fürs Web als PNG-24 speichern (bei Tranzparenz muss das Häkchen gesetzt sein).

Ich erkläre auch gerne wie ich es gemacht habe.
1. den auf dem Bild befindlichen Namen durch Onkel Google gejagt. ;)
Die auf dem Bild befindliche Seite war so ruck zuck ausfindig gemacht.
2. mit Firefox einen Rechtsklick gemacht und auf "Seiteninformationen anzeigen" gegangen, dort angekommen zum Reiter "Medien" gewechselt.
Dort bin ich dann mit der Grafik "http://thecadmus.com/assets/images/lander/divider.png" fündig geworden.
3. in PS eine neue Grafik mit der gleichen Grösse angelegt, diese wurde dann rot gefärbt.
4. die gefundene Grafik geöffnet, markiert, kopiert und in der neu angelegten Grafik eingefügt.
Den Hintergrund habe ich 1px nach links verschoben und die eingefügte Grafik 1px nach rechts.
5. die Pipette geschnappt und im rechten Drittel festgestellt dass die Farben reines Weiss und Schwarz sind.
6. eine neue Grafik angelegt und wieder Rot eingefärbt.
7. zwei neue Ebenen drüber gelegt und wie eingangs beschreiben eingefärbt.
8. nun brauchte ich für die beden Ebenen nurnoch an der Tranzparenz "rumschrauben".
Dabei habe ich mit der Pipette die RGB-Werte meiner neuen Grafik mit denen des Originals verglichen und bin so auf die genannten Prozentwerte für die Tranzparenz gekommen.
Der Farbige Hintergrund hat hier eine entscheidene Rolle gespielt, da ich andernfalls nur die RGB-Werte 0/0/0 bzw. 255/255/255 bekommen hätte..... egal wie transparent die Ebenen waren.
Durch den farbigen Hintergrund haben sich die RGB-Werte jedoch mit Veränderung der Transparenz ebenfalls verändert. ;)

Zum Schluss habe ich nurnoch meine farbige Hintergrundebene ausgeblendet und die Grafik wie oben beschrieben abgespeichert.
Zur Kontrolle habe ich die Grafik nochmal über dem im 1. Beitrag angehängten Bild eingefügt..... das Testurteil lautet "sehr gut". ;)

Hört sich jetzt zwar evtl. nach viel Arbeit an, ist aber eigentlich total einfach und schnell gemacht. ;)

[edit]
Ach ja, wer Rechtschreibfehler findet, darf sie gerne behalten. :p
[/edit]
 
Zuletzt bearbeitet:
Und wenn jetzt einer mit Formebenen ankommt, dann mach ich nen mehrstündigen XXL-Workshop zum Erstellen von Linien fürs Webdesign. :D
 
"Toll, Toll" *in die Hände klatsch*

*Verneig bis der Rückenbricht* :D

Danke Herr Sch"ae"fer!! ;)


EDIT: Der Lerneffektist toll, wenn man das mit der Info zum Beispiel nicht wusste "Opacity" und andere Kniffe!
Ab in die Hauseigene Tutorial-Liste damit ;)
 

Neue Beiträge

Zurück