Tutorial: Perfila imágenes con un par de clics
En este sencillo tutorial les explicaré como "siluetear" o perfilar una imagen aprovechando el potencial de los filtros (en este caso el "Blending Mode").
Los pasos son muy sencillos y no requieren conocimientos avanzados en el uso de programas de diseño, sin embargo los resultados son excelentes y sobre todo ahorran mucho tiempo en la tediosa labor de siluetear imágenes para utilizarlas en algún diseño.
TUTORIAL PASO A PASO
¿Qué necesitamos?
- Macromedia (Adobe) Fireworks o también Photoshop
- Imagen que se va a siluetear, con fondo blanco de preferencia
Empecemos entonces…
1) Abrimos en Fireworks (Photoshop) una imagen/foto, la cual queremos ubicar sobre una superficie de otro color o bien otra foto, por lo que requerimos perfilarla para evitar el fondo blanco de la misma. En este caso tomemos esta imagen.

2) Notamos que la foto no es 100% blanca en su fondo, por lo que podemos optar por corregir esto antes de aplicar el filtro.
3) Seleccionamos la foto y utilizamos los "Levels" para corregir el tono/intensidad del blanco.

Movemos la flecha de la derecha hacia la izquierda hasta obtener el efecto de blancura deseado en la foto en cuestión.

4) Una vez listo este paso, procedemos a ubicar la foto escogida sobre una superficie (cualquiera que se vaya a utilizar). En este caso vamos a utilizar un "degradé" de verde a gris.

5) El siguiente paso es el paso clave para lograr el efecto deseado y es tan simple como esto:
- Seleccionar la foto
- En el panel de propiedades (parte inferior de Fireworks en este caso), hacer clic en "Blending Mode" y seleccionar "Multiply"

6) Listo! La foto quedará totalmente libre de toda area blanca dejándola perfectamente perfilada.

¿Qué fue lo que sucedió?
El Blending Mode Multiply hace precisamente eso, multiplicar colores de la imagen seleccionada con la imagen que está inmediatamente debajo. Todo lo que se multiplica por color blanco desaparece en la imagen seleccionada. Lo que está hacia el otro extremos del espectro, osea negro, permanece.
Esta técnica permite perfilar imágenes de una manera no destructiva, y con mucha más precisión que con otros métodos, que también son buenos y aplican para otras situaciones, como el "Extract" en Photoshop (ya veremos más de esto en un próximo post).
Limitaciones
Funciona con imágenes en fondo blanco.
Artículos Posiblemente Relacionados
4 Comentarios en 'Tutorial: Perfila imágenes con un par de clics'
-
|-| | March 30th, 2007 a las 2:14 pm
Xavier Donoso | March 30th, 2007 a las 3:46 pm
Michael Müller | April 1st, 2007 a las 2:15 am
kerman | January 5th, 2008 a las 12:45 pm
Comenta aquí
Populares
- Notas acerca de HTML y su correcta visualización en e-mails



(4 / 4) - BitNami: Aplicaciones web empaquetadas y listas para instalar!



(4 / 4) - Tips y trucos de CSS (muy útiles)



(4 / 4) - Más fuentes y tipografÃas para descargar (Gratis!)



(4 / 4) - Layouts en CSS de 3 columnas fijas



(4 / 4) - Stemplate: Templates de elementos web



(3.86 / 4) - La importancia de los Meta Tags



(3.8 / 4) - Tutorial: Perfila imágenes con un par de clics



(3.8 / 4)
Comentarios Recientes
May 16, 2008 | recuweb
en: FavIcon GeneratorMay 16, 2008 | recuweb
en: Herramientas en lÃnea para webMay 6, 2008 | EcuadorGlobal
en: Más fuentes y tipografÃas para descargar (Gratis!)May 3, 2008 | kenneth
en: Crea tu propio logo Web 2.0April 23, 2008 | AlvaroG
en: Mega listado de generadores "web 2.0" en lÃnea
Artículos Anteriores
- Project Gmail Grimace: Hagamos que Google nos escuche
- PrestaShop: Tu negocio en internet, fácil y gratis!
- FreeVectors.net: GalerÃa vectorial gratis!
- Excelente listado de tutoriales de Adobe Photoshop!
- 10 malententidos sobre la usabilidad
- 56 tutoriales de Flash!
- Buen tutorial de Fireworks para poner brillo a los elementos
- 22 sitios útiles para crear layouts en CSS
- Muy buena galerÃa de fotos con Javascript
- Top 10 hosting compartidos
- BitNami: Aplicaciones web empaquetadas y listas para instalar!
- 120 ideas para diseñadores y freelancers para promocionarse (Gratis!)
- Tutoriales de Adobe Illustrator
- Entendiendo el funcionamiento de “z-index” en CSS
- Notas acerca de HTML y su correcta visualización en e-mails
Los Temas
- .net (4)
- 3d (1)
- Accesibilidad y Usabilidad (34)
- Adobe (11)
- Ajax (7)
- Apple (3)
- Banners (6)
- Blogs (22)
- Browsers (17)
- Buscadores (5)
- CMS (2)
- Colores (1)
- Curiosidades (29)
- Diseño Gráfico (39)
- Diseño Web (98)
- Dreamweaver (3)
- Encuestas (1)
- Estándares (36)
- Eventos (29)
- Fireworks (6)
- Flash (9)
- Fuentes (5)
- Google (7)
- Herramientas (82)
- HTML y CSS (85)
- Iconos (11)
- Internet (57)
- Libros (2)
- Logos (1)
- Microsoft (9)
- Personal (17)
- Photoshop (12)
- Programación (22)
- SEO (1)
- Templates (6)
- TipografÃas (4)
- Tips Avanzados (107)
- Tutoriales (11)
Archivos
Acerca del Autor
Michael Müller C. es un diseñador y desarrollador de sitios web radicado en Guayaquil, Ecuador. Creador de MMC Design en 1998 y de Iconiza en el 2007.
Del Portafolio
Lo que leo
- 456 Berea Street
- A List Apart
- Andufo.com
- Bloggus
- Cinerama.ec
- Design View
- Digital Web Magazine
- Diseño web
- Diseño web profesional
- EINICIO.com
- El Café de Joe
- El Ecuador de Hoy
- Freelance Switch
- FutbolAdicto.com
- Garrett Dimon Blog
- Inclusion.es
- Jackob Nielsen
- Javier Romero
- Jeffrey Zeldman
- Jonathan Snook's Blog
- Juan Xavier
- Mentalized
- Simplebits
- Smashmagazine
- Verlee's Blog
Servicios
Contribuye
¿Te ha servido la información de este blog? Considera hacer una donación a través de:
Conoce más recomendaciones personales de libros relacionados con Diseño y Desarrollo Web en Amazon.

March 30th, 2007
(5 votos, promedio: 3.8 de 4)
