Ich bin Programmierer und habe vor kurzem angefangen, in meiner Freizeit mit Photoshop zu spielen.
Idealerweise ziehe ich es vor, Komponenten nur mit HTML/CSS zu erstellen, aber manchmal ist das nicht möglich.
In dieser Toolbar PSD Comp sind viele der Effekte in CSS3 konvertierbar, aber es gibt ein paar Bevel/Emboss-Effekte sowie ein Outer Glow, die nicht in CSS3 konvertiert werden können.
In solchen Fällen wird die PSD normalerweise in kleinere Teile zerlegt, die in HTML/CSS wieder zusammengefügt werden können, um die Komponente zu erstellen.
Wie würdest du diese Komposition schneiden?
Wenn ich Bilder aufschneiden müsste ... 3 Scheiben, 2 Endkappen und eine Mitte für Hintergründe, dann PNG-Overlays für die Symbole / Symbole.
Aber idealerweise würde ich nur ein Bild als Sprite verwenden und es für Endkappen und mittlere Hintergründe positionieren, dann bei Bedarf PNG-Bilder für die Symbole. Wenn Sie die gesamte Größe des Bildes kennen, brauchen Sie nur das solide Bild mit Zuständen. Schauen Sie sich die Codierung für die Navigationsleiste auf apple.com an ... es ist ein Bild mit CSS-Positionierung (es sei denn, sie haben es geändert, seit ich es das letzte Mal gesehen habe).
Dies könnte mit abgerundeten Ecken, Farbverläufen und Schatten in CSS3 erfolgen, die Sie nachlesen müssten. Die Symbolbilder könnten ein zweiter Hintergrund über dem Farbverlauf sein, aber dies kann etwas komplex und zeitaufwändig sein.
Ich stimme zu, ein PNG-Sprite zu verwenden, da es sich um einen Crossbrowser handelt und Sie wahrscheinlich bereits mit Photoshop vertraut sind und mit dem Codieren nicht so vertraut sind, da Sie diese Frage stellen.
Suchen Sie nach "CSS-Sprite-Positionierung", um weitere Informationen zu erhalten