Tutorial cómo hacer tus propios iconos

Aquí voy a explicaros cómo hacer vuestros propios iconos. Es realmente simple si disponeis de la plantilla photoshop, que os la doy ya hecha, y apenas lleva un minuto hacer cada icono.

Vamos a ello. Para vuestros iconos necesitareis los siguientes programas:
Adobe Photoshop (es un programa de pago… vosotros vereis dónde o cómo lo «comprais»)
Icon Developer. También es de pago, pero dispone de una versión de prueba… que yo os la pongo en descarga directa con un pequeño extra.

Bien, el primer paso consiste en bajarse este archivo PSD que contiene la plantilla para photoshop.

Arrancamos el Photoshop y le damos a archivo/abrir y buscamos la plantilla que nos hemos bajado al disco duro. Le damos a aceptar y ya la tenemos abierta.

Ahora, en la barra de herramientas del lado izquierdo, seleccionad la lupa, poneis el cursor encima de la imagen y haceis un par de clicks para que se agrande la imagen y podais trabajar con más precisión.

Con la imagen agrandada, ahora vamos a nuestro navegador de internet y buscamos en Google o cualquier otro buscador la imagen que necesitemos:

No creo que esto merezca mayor explicación. Buscais una imagen que os mole a la mejor resolución y tamaño posibles y la guardais en vuestro disco duro, o, directamente, le dais con el botón derecho encima y elegís la opción «copiar al portapapeles», así lo teneis en la memoria del ordenador. Ahora solo hay que volver al photoshop (con la plantilla abierta) y darle a edición/pegar. El resultado es que tenemos la imagen elegida dentro del archivo de la plantilla, pero enorme y descuadrado, tal que así:

Ahora lo solucionamos, no os preocupeis. Volvemos a la barra de herramientas de la izquierda, la misma donde antes habíamos seleccionado la lupa, y elegimos la primera herramienta de todas, la que es un cuadrado con líneas discontínuas:

Ahora vamos con el ratón sobre la imagen y le damos al botón izquierdo y elegimos la opción «transformación libre»

Vereis cómo los bordes de la imagen que hemos elegido para nuestro icono se ven rodeadas de una línea. Ahora, si llevamos el ratón a los bordes de la imagen, veremos cómo nos aparece una flecha. Ponemos el cursor del ratón en una de las esquinas de la imagen y, con el botón izquierdo apretado, solo hay que mover el ratón para conseguir dar el tamaño que queramos a la imagen. Usando el mismo método, pero con el cursor del ratón dentro de la imagen en lugar de en una esquina de la misma, podemos moverla a nuestro antojo.

Bueno, ya le hemos dado el tamaño y la posición que queríamos a nuestra imagen. Ahora para fijarla nos volvemos a la barra de herramientas y le damos al botón que hay al lado del que habíamos seleccionado antes.

Nos saldrá un mensaje preguntándonos si deseamos aplicar la transformación. Le damos al botón aplicar. Ahora vamos a Archivo/guardar como y seleccionamos la carpeta donde queremos guardarlo y en formato .PNG (esto es importantísimo).

Durante el proceso de guardado nos preguntará sobre la opción del entrelazado. Si no está marcada, marcad la opción ninguno .

Ya hemos terminado con el photoshop. Ahora abrimos el Icondeveloper. La versión que incluyo aquí para descargar está hecha portable por mí, es decir, consta de un solo archivo, no necesita instalación y, sobre todo, no caduca nunca.

Así pues, abrimos el Icondeveloper y nos sale una ventana advirtiéndonos de que es una versión de prueba y blablabla… le damos a OK y seguimos adelante. Ahora nos sale una ventana de opciones. Le damos a la que dice Convert Image to Icon.

Ya estamos terminando, nos quedan muy pocos pasos. En la pantalla que nos sale buscamos el archivo PNG que habíamos creado antes con el Photoshop y lo abrimos. A continuación nos aparece esta pantalla:

Aseguraos que teneis marcada la casilla Vista Ready. Ahora solo teneis que darle al botón de Ok y en un segundo tendreis convertido vuestro PNG en un icono en formato ICO apto para usarse en el Windows Vista.

Ya solo nos queda el último paso, el programa nos ha convertido el archivo, pero no lo guarda automáticamente, así que vamos a la opción Save y guardamos nuestro archivo .ICO donde queramos. Ya está todo listo. No era tan difícil, ¿no?

Descárgate la plantilla AQUÍ

Descárgate el IconDeveloper AQUÍ


22 respuestas to “Tutorial cómo hacer tus propios iconos”

  1. podrias volver a subir la plantilla esque no puedo vajarla o mandarmela a mi correo porfavor si no es mucha molestia. pablo_almaguer@hotmail.com

  2. hola quiero saber como inscribirme a tu pagina Gracias,,,

  3. sin palabras eres todo un gross….puedes subir otra plantilla 🙂

  4. Está chidisima la página

  5. Está chida la página muy buena

  6. Hola me pregunto si podrias hacer el icono de un juego que se llama en 7 sins plis!!

  7. muy bueno ya estoy creandome un icono

  8. en pocas palabras abres la platilla despues abres tu caratula la retocas y con la herramienta mover la mandas dentro de la plantilla luego boton derecho transformacion libre la ajustamos y la movemos si es necesario y listo guardar como png…..
    abrir png con el Icondeveloper y guardar eso es todo nada mas espero haberles ayudado
    aca les dejo un tutorial para sacarles mas probecho. revizar seccion tutoriales
    https://sites.google.com/site/laberintosix/home

  9. haz el de fable II porfa

  10. no es nada dificil xDD los segui bien los pasos y me salio bn chido men 😀

  11. no entiendo por que rayos no puedo pegar la foto a la plantilla , en edicion como dice tu explicacion sigo sigo los paso como dice y nada a caso tiene q ver algo con el tipo de foto q estoy pegando? por que al abri x primera vez la plantilla dice todos los archivos se supone que deberia con esa opcion deberia pegarla alguien que me ayude! y lo peor es que me pone de malas ya q justo es en el primer paso cabrea verdad!

  12. en cambio yo no puedo ni empezar ya que cuando quiero copiar y luego pegarla la foto en edicion no esta la opcion activa de pegar!! por que???

  13. Gracias loco!

    Me pude hacer el de Avatar aca te dejo como me salio 🙂 .

    Tengo el ico tambien 😛 .

  14. Alguien podria subir la plantilla porfavor????? Gracias…

  15. alguien puede subir la plantilla para mi…
    es que este link no va…
    muchas gracias………….

  16. Ya me he hecho el mío, ha quedado bien y todo xD Gracias.

  17. GROSO! Pensé que era muy dificil hacer estos iconos, pero resulta que es una pavada… xD

  18. Felicidades por la pagina web, te lo mereces.

  19. YEA YEA

  20. NO SE HACER INCONO

  21. Puedes descargarte una versión de evaluación (te permite usarlo durante 30 días) en la web oficial de Stardock: http://www.stardock.com/products/icondeveloper/downloads.asp

  22. el portable en xp no va

Deja un comentario