Estilo Hacer un icono a partir de una imagenTema Solucionado

[mmfilesi]

Hola, aquí os dejo una guía por si os resulta de utilidad.

Vamos a aprender a hacer un icono a partir de una imagen.

1. Lo primero, buscamos la imagen que nos interesa. Para este ejemplo, he seleccionado una cabeza de toro minoica



que nos permitirá jugar con las curvas bleizer.

2. La abrimos con el phostoshop para siluetearla. Lo cual se hace así:

2.1. Con la herramienta pluma marcamos puntos en los puntos de inflexión, es decir, cuando una línea cambia de ángulo.
Recordad dos cosas importantes:

- hay que bajar la opacidad a cero para ver bien lo que estamos trazando.
- hay que cerrar el trazado. Es decir, que el último punto de lo que estamos marcando coincida con el primero, momento en el que en el cursor se pondrá una especie de circulito abajo.

01_guiaiconos.jpg (22.79 KiB) Visto 15585 veces

2.2. Luego marcamos la herramienta marcar punto de anca, que se encuentra en la herramienta pluma y vamos ajustando el silueteado. Primero ponemos el punto de ancla entre dos de los puntos marcados anteriormente y luego lo desplazamos para que la curva se ajuste a lo que queremos siluetear. Así escrito suena más complicado de lo que parece, prueba a hacerlo y verás cómo en seguida le coges el tranquillo.

02_guiaiconos.jpg (24.87 KiB) Visto 15585 veces

2.3. Una vez que el trazado ya se ha ajustado exactamente a lo que queremos siluetear, pulsamos con el botón derecho sobre la selección y marcamos hacer selección. NO queremos calarlo.

03_guiaiconos.jpg (56.05 KiB) Visto 15585 veces

2.4. Ahora tenemos la selección de lo que queremos siluetear, pero estamos en la capa del trazado, así que sin tocar nada para que no se deseleccione, nos vamos a la capa de abajo y le damos a ctrl+c / ctrl + v. Esto debería dejarnos ya la selección hecha. Observa que el fondo tiene como un damasquinado. Eso indica que no hay fondo.

En este ejemplo, además, he desaturado la imagen para que luego el icono me sirva para definir temas leídos o no leídos con sólo variar el tono... pero no nos adelantemos. Entonces, os habrá quedado algo así:

04_guiaiconos.jpg (25.86 KiB) Visto 15585 veces

3. Ahora comienza el proceso de iconización. Marcamos la herramienta recortar y definimos un tamaño razonable (por ejemplo, 20 x 30 píxeles).

05_guiaiconos.jpg (25.69 KiB) Visto 15585 veces

Seleccionamos lo que nos interesa y le damos a Enter.

Sigo en post aparte que no me deja poner más adjuntos...

[mmfilesi]

4. Este paso es muy importante. Vamos a quitar esos píxeles que hacen que luego un icono quede cutre al aplicarle el canal de transparencia. Para eso aumentamos muchísimo la imagen y borramos o cambiamos de color todos los píxeles que son medio transparentes. Para distinguirlos mejor, es conveniente poner una capa debajo de un color llamativo, que en el ejemplo es de color rojo. Todo lo que se ve medio rosáceo son píxeles problemáticos que hay que cambiar de color o borrar.

06_guiaiconos.jpg (26.14 KiB) Visto 15583 veces

5. Una vez listo, dejamos sólo la capa del icono, le damos a guardar para web y lo guardamos como .gif con transparencia.

PLUS:

Si ya queremos que nos quede de capitán general, también es recomendable añadirle un marco. Para que se entienda vamos a hacer primero un cuadrado.

1. Ampliar todo lo que se pueda y luego con la herramienta lápiz a 1 píxel dibujamos un cuadrado negro:

01_pixel.jpg (18.87 KiB) Visto 15583 veces

2. Ahora vamos a darle volumen, es decir, luz. Para eso pintamos de un color oscuro la línea inferior y la derecha, y de otro más claro las otras dos, como si le estuviera dando una luz desde la esquina superior derecha. Por último, en la esquina superior izquierda ponemos 1 píxel aún más claro:

02_pixel.jpg (6.41 KiB) Visto 15583 veces

3. Ahora rellenamos el cuadrado en una capa aparte del color que queremos que tenga y que tendrá un tono intermedio entre los que pusimos antes.

03_pixel.jpg (17.48 KiB) Visto 15583 veces

4. Duplicamos esa capa, la seleccionamos con la varita mágina y le pasamos un degradado en blanco y negro.

04_pixel.jpg (31.51 KiB) Visto 15583 veces

Sigo en post aparte por los adjuntos...

[mmfilesi]

5. En opciones de capa le damos luz suave... y ale op, ya casi está el iconillo:

iconillo.jpg (633 Bytes) Visto 15583 veces

6. Ahora podemos poner encima lo que teníamos silueteado antes o lo que sea...

iconillocontoro.jpg (713 Bytes) Visto 15583 veces

7. Si queremos que el icono sea circular, entonces hacer el círculo con la herramienta círculo pero SIN SUAVIZADO.

Y esto es todo, espero que os haya resultado útil.

Saludos!