Hacía un par de semanas que no incluía en el blog el tutorial de photoshop correspondiente. Espero que este os sirva como base para crear iconos personalizados que podáis utilizar.

Lo primero que debemos hacer es crear un nuevo documento con un tamaño de 14×14 píxel y fondo transparente.

Con la herramienta lápiz dibujamos el contorno utilizando como color un tono gris oscuro. Mira que el tamaño del lápiz sea de 1 píxel. Si te tiembla el pulso, para dibujar una linea recta haz clic en el comienzo y manteniendo pulsada la tecla shift haces clic en el final.

icono1

Con la varita mágica seleccionamos el interior del icono. Creamos una nueva capa, nos aseguramos de tener un color gris claro como color frontal y un blanco como color de fondo. Con la herramienta Degradado trazamos una diagonal sobre la selección para que la degrade.

icono2

Ahora vamos a darle un toque de relieve, para ello dibujamos con la herramienta lápiz en el interior del icono un contorno blanco en la parte de la izquierda y otro gris en la parte de la derecha, así.

icono3

Esto ahora nos quedará como base. Ahora creamos una capa nueva que ponemos arriba del todo y ocultamos las demás capas pinchando en el icono del ojo de cada una. Esto nos sirve para dibujar, por ejemplo un lápiz que podemos hacer así.

icono3

Al volver a mostrar todas las capas podrás ver el resultado final. Ya sólo te queda ir a Archivo / Guardar para web para poder utilizar los iconos en una web. Si quieres más diseños, sólo necesitas cambiar el diseño de la última capa.

icono

Traducido de: WebDesignerWall