Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

Estilo  Hacer un icono a partir de una imagenTema Solucionado

Colaboraciones gráficas, rangos aquí y botones aquí.
Avatar de Usuario
mmfilesi
Usuario/a
Mensajes: 78
Registrado: 05 Sep 2010, 17:48

Hacer un icono a partir de una imagen  Tema Solucionado

#1

Mensaje por 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

Imagen

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
01_guiaiconos.jpg (22.79 KiB) Visto 8441 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
02_guiaiconos.jpg (24.87 KiB) Visto 8441 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
03_guiaiconos.jpg (56.05 KiB) Visto 8441 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
04_guiaiconos.jpg (25.86 KiB) Visto 8441 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
05_guiaiconos.jpg (25.69 KiB) Visto 8441 veces
Seleccionamos lo que nos interesa y le damos a Enter.

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


Datos de soporte:
Spoiler
URL: http://www.mmfilesi.com/taller
Versión phpBB: phpBB3 (3.0.7-PL1)
MODs Instalados: IP-address in topic for phpBB3
Print Post Mod
dvanced bbcode Box 3
Plantilla(s) usada(s): prosilver
Servidor: de pago
Actualización desde otra versión: No
Conversión desde otro sistema de foros: No
Avatar de Usuario
mmfilesi
Usuario/a
Mensajes: 78
Registrado: 05 Sep 2010, 17:48

Guía: hacer un icono a partir de una imagen

#2

Mensaje por 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
06_guiaiconos.jpg (26.14 KiB) Visto 8439 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
01_pixel.jpg (18.87 KiB) Visto 8439 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
02_pixel.jpg (6.41 KiB) Visto 8439 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
03_pixel.jpg (17.48 KiB) Visto 8439 veces
4. Duplicamos esa capa, la seleccionamos con la varita mágina y le pasamos un degradado en blanco y negro.
04_pixel.jpg
04_pixel.jpg (31.51 KiB) Visto 8439 veces
Sigo en post aparte por los adjuntos...
Última edición por mmfilesi el 11 Nov 2010, 19:44, editado 1 vez en total.
Datos de soporte:
Spoiler
URL: http://www.mmfilesi.com/taller
Versión phpBB: phpBB3 (3.0.7-PL1)
MODs Instalados: IP-address in topic for phpBB3
Print Post Mod
dvanced bbcode Box 3
Plantilla(s) usada(s): prosilver
Servidor: de pago
Actualización desde otra versión: No
Conversión desde otro sistema de foros: No
Avatar de Usuario
mmfilesi
Usuario/a
Mensajes: 78
Registrado: 05 Sep 2010, 17:48

Guía: hacer un icono a partir de una imagen

#3

Mensaje por mmfilesi »

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

iconillo.jpg
iconillo.jpg (633 Bytes) Visto 8439 veces
6. Ahora podemos poner encima lo que teníamos silueteado antes o lo que sea...
iconillocontoro.jpg
iconillocontoro.jpg (713 Bytes) Visto 8439 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! :cerveza:
Datos de soporte:
Spoiler
URL: http://www.mmfilesi.com/taller
Versión phpBB: phpBB3 (3.0.7-PL1)
MODs Instalados: IP-address in topic for phpBB3
Print Post Mod
dvanced bbcode Box 3
Plantilla(s) usada(s): prosilver
Servidor: de pago
Actualización desde otra versión: No
Conversión desde otro sistema de foros: No
  • Temas similares
    Respuestas
    Vistas
    Último mensaje

Volver a “📊 Colaboraciones Gráficas”