Runder Rahmen - wie bewerkstelligen?

[LordLord]

Hallo zusammen,

ich benötige mal eine kleine Hilfe der Photoshopprofis.

Ich will für meine Website ein Button erstellen:
Klick

Diesen habe ich relativ kompliziert erstellt:
1. Transparente Ebene
2. Neue Ebene, mit Shortcut U einen Kasten erstellt
3. Select All - Auswahl verkleinern um x Pixel
4. Diese Auswahl mit weiß füllen
5. Schrift/Homezeichen etc. eingefügt.

Geht das auch irgendwie einfacher? Bzw. der Button wird später noch umgestaltet für einen Mousover, dort ist die Fläche dann auch in dem grau gefüllt, das Haus selber dann weiß. Und des weiteren habe ich Probleme alle weiteren Button genaustens zu platzieren, sprich das alles nachher an der gleichen Stelle ist.
Und das letzte Problem, in meiner CSS-Datei habe ich folgenden Parameter festgelegt:
border-radius:0px 10px 0px 10px

Was muss ich dann bei dem Rahmen in Photoshop einstellen, damit man genau die gleichen Rundungen hat?

Vielen Dank.

MfG

[Jenny]

Hallo!

Geht das auch irgendwie einfacher?

Einfacher geht das sicherlich, wenn du eine Formebene mit dem "Abgerundetes-Rechteck-Werkzeug" erstellst. Dort kannst du auch oben in der Optionsleiste den Eckenradius angeben.

alle weiteren Button genaustens zu platzieren, sprich das alles nachher an der gleichen Stelle ist.

Zum genauen Positionieren kannst du dir Hilfslinien pixelgenau ziehen (Menü Ansicht > Neue Hilfslinie).

border-radius:0px 10px 0px 10px

Eine solche Form gehört nicht zum Photoshop-Standard, d.h. hier musst du etwas tricksen, indem du zunächst ein entsprechendes abgerundetes Rechteck aufziehst, um dann oben links und unten rechts "eckige" Rechtecke hinzuzufügen.
(Ich hoffe, das kann man auf dem Screenshot vernünftig erkennen.)



[LordLord]

Vielen Dank für diese Aufklärung.

Sieht nun folgendermaßen aus:
http://imageshack.us/photo/my-images/210/test2zz.png/

Die PSD hab ich angehängt.

Mir macht nur Probleme, das ich um die schwarze Fläche zu bekommen, erst mal das ganze rastern muss. Sprich wie kann ich die Auswahl verkleinern und sozusagen nur einen dünnen Rahmen erstellen mit dieser Form?

Dankeschön

PS: Wie kann ich den Bilder hochladen?

[Jenny]

Hallo!

Sprich wie kann ich die Auswahl verkleinern und sozusagen nur einen dünnen Rahmen erstellen mit dieser Form?

Indem du die Ebene duplizierst, mit einer anderen Farbe (weiß) füllst und kleiner skalierst.

Aber ich frage mich schon die ganze Zeit:
Wozu willst du den Rahmen überhaupt in Photoshop bauen, wenn es doch in CSS viel einfacher geht?
Bzw. andersherum: Warum nutzt du den border-radius in CSS, wenn du in Photoshop schon runde Ecken gebaut hast?
Das klingt für mich irgendwie doppelt gemoppelt...

[LordLord]

Zitat von Jenny

Bzw. andersherum: Warum nutzt du den border-radius in CSS, wenn du in Photoshop schon runde Ecken gebaut hast?
Das klingt für mich irgendwie doppelt gemoppelt...

Da ich ein Hoovereffekt über die PNG steuere, da kann ich den Borderradius leider nicht hierfür verwenden. Ebenso für meine Bildergalerie, welche per jQuery gesteuert wird.

Nun hab ich aber nochmal eine Frage für den Rahmen bzw. um eine Aktion zu erstellen.

1. Meine Bilder erhalten die gleiche Form:
[/URL]

2. Nun habe ich eine Aktion erstellt, mit folgenden Befehlen:
- Füllebene erstellen
- Aktuellen Pfad erweitern (3x hintereinander)
- Bildebene umbenennen und nach oben verschieben
- Schnittmaske erstellen

Nun erhalte ich aber bei dieser Aktion die Fehlermeldung: "Die Form 1-Stil ist zurzeit nicht verfügbar"

Wie kann ich nun die Aktion erstellen, damit meine Bilder automatisch so dann gespeichert werden? Ich denke ein Problem ist hier noch die Bildgröße, die würde ich gerne auf max. 800 px einstellen, aber so das die Proportionen beibehalten werden, doch wie kann das über den Bildprozessor gesteuert werden? Des weiteren sollen die Originale nicht überschrieben werden, sondern eine Kopie gespeichert werden, auch hier scheitert es leider.

Kann mir jemand helfen, die Aktion richtig zu erstellen?

Vielen lieben Dank

[Jenny]

Hallo!

Da ich ein Hoovereffekt über die PNG steuere, da kann ich den Borderradius leider nicht hierfür verwenden

Und warum nicht???

Diese CSS funktioniert mit quadratischen Bildern wunderbarst!

    ul li a{
        display: block;
        width: 100px;
        height: 100px;
        background: url(bild1.jpg);
        border-radius: 0 10px;
    }
    ul li a:hover{
        background: url(bild2.jpg);
    }