Plantilla en illustrator, iconos para el navegador, iphone y ipad


Plantilla en illustrator CS6 con símbolos y selectores que espero que os simplifique la creación de los diferentes iconos.

Medidas

  • ipad retina: 144px
  • iphone retina: 114px
  • ipad no retina: 72px;
  • iphone no retina: 57px;
  • Favicon: 16px IE 32px soportado por los nuevos navegadores.

Como crear los diferentes iconos en la plantilla en illustrator

Los iconos van en formatos diferentes en el caso de los apple-touch-icon en formato .png 24 en el caso del favicon en formato .ico.

 Plantilla en illustrator

He creado 2 símbolos 1 para los iconos apple-touch  y otro para el icono favicon, basta con que hagamos doble click sobre el símbolo a editar y las diferentes instancias de ese símbolo serán modificadas.

Una vez tengamos los iconos a nuestro gusto vamos al menú superior archivo>guardar para web.

Es importante en el CS6 que marquéis la opción en exportar  Todos los sectores de usuario.

Los sectores de usuario son únicamente los selectores creados por nosostros, no los que illustrator crea para rellenar la mesa de trabajo.

plantilla en illustrator guardar para web apple touch y favicon

La versión CS6 de illustrator no permite especificar opciones sobre como se guardan las imágenes, obtiene únicamente el nombre del selector, recordar que nos creará una odiosa carpeta imágenes con su bonita tilde, así que recomiendo guardarlo en el escritorio y copiar esas imágenes en la carpeta de nuestra web.

Para la generación del formato .ico podemos utilizar un plugin para photoshop abrir el favicon.gif y guardarlo como favicon.ico.

También puedes visitar este post sobre el código necesario para el navegador para la introducción de estos iconos.

Por Javier Artero

, , , ,

Warning: Parameter 1 to W3_Plugin_TotalCache::ob_callback() expected to be a reference, value given in /usr/home/javierartero.com/web/wp-includes/functions.php on line 3348