Iconos para tu maquetación, Photoshop? no, mejor el Terminal

Cuando maquetas un diseño que contiene iconos, lo más sensato y práctico es juntarlos todos en un mismo archivo de imagen, .png por ejemplo, y cargar sólamente ese archivo e ir moviéndolo con background-position según el icono que queramos mostrar, algo como:

La tarea de juntarlos todos teniendo en cuenta un tamaño determinado suele hacerse pesada, pues hay que abrir el Photoshop, calcular la medida del lienzo, ir colocándolos uno a uno, etc.

Hoy navegando, he leído en phpied, una forma mucho más rápida de hacerlo, usando el Terminal.

Primero instala la Librería de Imagemagick

Puedes descargarte los binarios desde aquí, donde explica cómo instalarlo vía terminal o también hacerlo con macports.

Convert en acción

Por ejemplo, sitúate en la carpeta donde tienes las imagenes de tus icones (pueden ser de diferentes formatos):

$ ls
1.png 2.gif dot.png phoney.gif tw.gif

  • – 1.png
  • – 2.gif
  • – dot.png
  • – phoney.gif
  • – tw.gif

Y guárdalas en un solo sprite:

$ convert * -append result/result-sprite.png

Voilà, tu png creado:

Veamos las opciones

Puedes juntar solo imagenes específicas:

$ convert image1.png image2.png image3.png -append result/result-sprite.png

O de un formato en concreto:

$ convert *png *gif -append result/result-sprite.png

O imprimirlas de forma horizontal:

$ convert *png *gif +append result/result-sprite-horizon.png

De esta forma puedes guardar en tu carpeta todos los iconos de forma independiente y si tienes que cambiar alguno, añadir o quitar puedes hacerlo sin tener que andar marraneando capas de Photoshop 🙂

Fuente:

phpied

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s