Soy programador y recientemente comencé a jugar con Photoshop en mi tiempo libre.
Idealmente, prefiero crear componentes usando solo HTML/CSS, pero hay ocasiones en las que no es posible.
En esta barra de herramientas PSD Comp , muchos de los efectos se pueden convertir a CSS3, pero hay un par de efectos de bisel/relieve, así como un brillo exterior que no se puede convertir a CSS3.
En tales casos, por lo general, el PSD se divide en partes más pequeñas que se pueden volver a combinar en HTML/CSS para crear el componente.
¿Cómo dividirías esta composición?
Si tuviera que cortar imágenes... 3 rebanadas, 2 tapas finales y un medio para fondos, luego superposiciones de png para los íconos/símbolos.
Pero lo ideal sería usar una imagen como sprite y colocarla para las tapas de los extremos y los fondos intermedios, luego, si es necesario, imágenes png para los íconos. Si conoce el tamaño completo de la imagen, solo necesita la imagen sólida con estados. Echa un vistazo a la codificación de la barra de navegación en apple.com... es una imagen con posicionamiento CSS (a menos que la hayan cambiado desde la última vez que miré).
Esto se podría hacer con esquinas redondeadas, degradados y sombras de CSS3 que tendría que leer. Las imágenes de íconos podrían ser un segundo fondo encima del degradado, pero esto puede ser un poco complejo y llevar mucho tiempo.
Acepto usar un sprite png, ya que es un navegador cruzado y es probable que ya esté familiarizado con Photoshop y no tan familiarizado con la codificación, ya que está haciendo esta pregunta.
busque "Posicionamiento de sprites CSS" para obtener más información