Cuando trabaja en el diseño de un sitio web, a menudo tiene que lidiar con el hecho de que la imagen encontrada, que idealmente encajaría en su sitio, tiene un fondo diferente que le gustaría eliminar.
Y así, abrimos nuestra imagen en Photoshop.
1.
Lo primero que debe hacer es crear un espacio de trabajo para la imagen con un fondo transparente. Para esto:
- en la ventana de capas, haga doble clic en nuestra capa (con un candado)
- Haga clic en Aceptar en la ventana que aparece.
El candado debe desaparecer.
Si el fondo es simple:
Seleccione la herramienta " varita mágica” es una herramienta muy flexible para seleccionar el área deseada. Nuestra tarea es seleccionar todo el fondo, excepto la imagen. Para hacer esto, ajuste la configuración de la varita mágica (parámetro tolerancia) hasta obtener el resultado deseado. También usamos la tecla Shift para seleccionar un área adicional a la ya seleccionada. Presione Supr y el área seleccionada se elimina.
Si el fondo es multicolor:
Usamos la herramienta Selección rápida". Aquí nuestra tarea no es resaltar el fondo, sino el objeto en sí, que debe permanecer. Presione hasta que se resalte el área deseada. Si el exceso está resaltado, mantenga presionada la tecla Alt y menos el área. Puede ver el resultado con la tecla Q.
Cuando la selección esté lista, cópiela con Ctrl+C. Cree un nuevo documento con un fondo transparente (Ctrl + N) y pegue el objeto allí Ctrl + V.
3 . Si queda algo superfluo en la imagen, use la herramienta " Borrador“, simplemente sobrescriba el fondo adicional.
4 . Guarde la imagen para la Web (Alt + Shift + Ctrl + S) seleccione el formato GIF o PNG (en otros, nuestro fondo transparente se volverá blanco).
Video útil sobre el tema:
A veces, el usuario puede querer una imagen PNG con un fondo transparente. Sin embargo, el archivo necesario no siempre corresponde a los parámetros requeridos. En este caso, debe cambiarlo usted mismo o seleccionar uno nuevo. En cuanto a la creación de un fondo transparente, los servicios especiales en línea ayudarán a realizar esta tarea.
El procedimiento para crear un fondo transparente implica la eliminación de todos los objetos innecesarios, dejando solo el necesario, y el efecto deseado aparecerá en lugar de los elementos antiguos. Le sugerimos que se familiarice con los recursos de Internet que le permitan implementar dicho proceso.
El editor gráfico LunaPic funciona en línea y brinda al usuario una amplia variedad de herramientas y funciones, incluido el reemplazo de fondo. El objetivo se logra de la siguiente manera:
Esto completa el trabajo con el servicio LunaPic. Gracias a las instrucciones anteriores, puede hacer que el fondo sea transparente fácilmente. El único inconveniente del servicio es que funciona correctamente solo con aquellos dibujos en los que el fondo se rellena principalmente con un color.
Entendamos el sitio de PhotoScissors. Aquí no existe el problema de que solo se obtendrá un buen procesamiento con ciertas imágenes, ya que usted mismo establece el área que se recorta. El procesamiento se lleva a cabo de la siguiente manera:
Esto completa el trabajo con el recurso en línea PhotoScissors. Como puede ver, no hay nada complicado en administrarlo, incluso un usuario sin experiencia que no tenga conocimientos y habilidades adicionales comprenderá la tarea.
Recientemente, el sitio web Remove.bg ha estado en boca de muchos. El hecho es que los desarrolladores proporcionan un algoritmo único que elimina automáticamente el fondo, dejando solo a una persona en la imagen. Desafortunadamente, aquí es donde terminan las capacidades del servicio web, pero hace un excelente trabajo al procesar tales fotos. Echemos un vistazo más de cerca a este proceso:
Aquí es donde nuestro artículo llega a su conclusión lógica. Hoy tratamos de informarle sobre los servicios en línea más populares que le permiten hacer que el fondo sea transparente en una imagen con solo unos pocos clics. Esperamos que te guste al menos un sitio.
Lo principal es especificar una imagen en su computadora o teléfono y luego hacer clic en el botón Aceptar en la parte inferior de esta página. Por defecto, el fondo liso de la imagen se reemplaza por uno transparente. El color de fondo de la imagen original se determina automáticamente, solo necesita especificar en la configuración con qué color reemplazarlo. El parámetro principal que afecta la calidad del reemplazo es la "Intensidad del reemplazo" y puede ser diferente para cada imagen.
Un ejemplo de una foto de una rosa rosada sin cambios y después de reemplazar el fondo sólido con transparente, blanco y verde:
primer ejemplo con una flor rosa sobre un fondo transparente se realiza con los siguientes ajustes:
1) Intensidad de reemplazo - 38;
2) Alisado alrededor de los bordes - 5;
3) Reemplace el fondo sólido por uno transparente;
4) Recortar (<0) или Добавление (>0) a lo largo de los bordes - "-70";
5) Invertir - deshabilitado (marque no marcado).
Para crear segundo ejemplo, con un fondo blanco, se usaron las mismas configuraciones que en el primer ejemplo, excepto por el parámetro: "Reemplazar fondo simple con" - blanco. A tercer ejemplo, con fondo verde, también se utilizan las configuraciones, como en el primer ejemplo, excepto el parámetro: "color en formato hexadecimal" - #245a2d.
La imagen original no se cambia de ninguna manera. Se le dará otra imagen procesada con un fondo transparente o el fondo que especifique.
Algunos usuarios pueden necesitar hacer un fondo transparente en algunas fotos. Esto puede deberse a consideraciones estéticas, la necesidad de crear una marca de agua con fines comerciales y otras razones; el hecho es que el usuario no sabe cómo y con qué puede hacerlo. En este artículo, intentaré ayudar a dichos usuarios y les diré cómo hacer un fondo transparente en línea, qué servicios existen para esto y cómo usarlos.
Hay varios servicios en la red que te permiten eliminar el fondo de una foto en línea de forma gratuita. Al mismo tiempo, todos ellos tienen herramientas bastante simples, lo que le permite eliminar el fondo de las fotos en casi unos pocos clics. A continuación listaré estos servicios con una descripción detallada de su funcionalidad.
Si usted, como yo, tiene un deseo, me apresuro a complacerlo, probé la mayoría de ellos y compilé una lista de los mejores (en el enlace de arriba).
El primer recurso que te permite crear un fondo transparente en línea es Online-Photoshop. Trabajar con él es bastante simple, lo que le permite obtener un objeto con un fondo transparente en su foto en un par de minutos.
Ahora presionamos la flecha de la derecha y miramos el resultado. Si todo está bien, haga clic en el botón "Descargar" en la parte superior y guarde el resultado en su PC.
Otra herramienta para crear un fondo transparente en línea es el editor en línea Pixlr, similar a Photoshop. Tiene una cantidad importante de funciones, pero nuestro principal interés es crear un fondo transparente en línea.
Este servicio es una opción casi totalmente automatizada que le permite hacer que el fondo sea transparente en línea.
Para trabajar con el servicio, vaya a él, haga clic en el botón "Examinar", asegúrese de que la opción "Reemplazar fondo simple con" esté configurada en "Transparente" y haga clic en el botón grande "Aceptar" en la parte inferior.
Después del procesamiento, podrá ver el resultado o descargarlo a su computadora usando los enlaces apropiados.
Observo que, debido a la automatización, la calidad del procesamiento resultante suele ser peor que en Photoshop en línea y Pixlr mencionados anteriormente.
Otro servicio que le permite hacer un fondo transparente en una foto en línea de forma gratuita.
Para trabajar con este servicio, debe preparar una foto, para lo cual debe pintar sobre un área potencialmente transparente con un color que no está en la imagen en sí (por ejemplo, azul, como se muestra en el ejemplo a continuación). También es importante que la foto esté en formato png o gif.
Este servicio de creación de un fondo transparente es similar en su funcionalidad al anterior, requiriendo un fondo realizado en un solo color. Transforma este color en un fondo transparente, obteniendo la imagen requerida por el usuario.
En comparación con el servicio Watermark.Algid.Net, el servicio LunaPic se parece más a un editor de fotos completo, que le permite pintar el fondo con un color utilizando las herramientas integradas en este servicio.
Arriba, he enumerado varios servicios convenientes y fáciles de usar que le permiten crear un fondo transparente en línea. Los más efectivos, en mi opinión, son los servicios Online-Photoshop y Pixlr, los resultados de su procesamiento están en un buen nivel y los detalles de los opcionales no son nada complicados. Si necesita hacer un fondo transparente para una foto, le recomiendo usar las capacidades de estas herramientas, le permitirán crear fácil y rápidamente un fondo transparente en línea.
Además, como formato libre, PNG ofrece al diseñador web varias ventajas prácticas sobre GIF:
Es pertinente señalar que PNG no permite la animación, como sí lo hace GIF. Pero existe un estándar de gráficos de red de imágenes múltiples (MNG) que permite esto, pero no es ampliamente compatible con los navegadores web y los editores de imágenes.
Probablemente se esté preguntando por qué PNG no se usa tanto en la web si es tan bueno como se anuncia. La respuesta es, en su mayor parte, una idea errónea sobre el formato y la compatibilidad con su navegador.
Debido a que Internet Explorer 6 y versiones anteriores no son compatibles con la gama completa de capacidades PNG (incluida la transparencia del canal alfa), la gente cree (aunque no es cierto) que Internet Explorer no es compatible con PNG en absoluto, o al menos no es compatible con la transparencia. De hecho, Internet Explorer 5 y 6 admiten suficiente especificación PNG para que sea funcionalmente equivalente (o más) a las imágenes GIF no animadas. Todos los demás navegadores mencionados, incluidos Firefox, Netscape 6 y posteriores, Mozilla, Opera 6 y posteriores, Safari y Camino son totalmente compatibles con la transparencia PNG.
Aparte de este concepto erróneo sobre la compatibilidad con los navegadores, la animación GIF incrustada fue (y sigue siendo) una de las principales razones de su éxito. Aunque, con los años, el uso de GIF se ha vuelto menos popular en comparación con otras tecnologías (por ejemplo, Flash), que se están volviendo más adecuadas para la animación.
La transparencia es una característica clave de los GIF y PNG y, a menudo, es la razón por la que un diseñador web elige qué formato usar. Aunque PNG ofrece un soporte de transparencia más completo, los diseñadores web a menudo necesitan crear versiones GIF de imágenes para adaptarse a navegadores más antiguos. Usando CSS esto es posible (y algo trivial) al enviar imágenes GIF para navegadores más antiguos y PNG de alta calidad a navegadores que los entiendan. Pero es un trabajo doble para un diseñador web y, como resultado, la gente va con la menor resistencia y sigue usando imágenes GIF.
Por lo tanto, hemos analizado algunas razones por las que GIF sigue siendo tan popular, pero la mayoría de ellas se basan en la falta de comprensión de los conceptos o en el uso de un flujo de trabajo familiar. Armado con algunos conocimientos clave de PNG y cómo se puede usar de manera confiable en los navegadores, está en condiciones de aprovechar todos los beneficios que ofrece.
JPEG es otro formato web omnipresente y, en la mayoría de los casos, como fotos (o similares), es incluso mejor que PNG o GIF. PNG no pretende competir con JPEG. La compresión JPEG hace que los archivos sean mucho más pequeños que PNG cuando se trabaja con fotos. Por otro lado, PNG produce archivos más pequeños cuando hay texto, líneas artísticas, logotipos, colores "sólidos", etc. dentro de las imágenes.
Ahora veamos cómo usar PNG en el diseño web. He recopilado todos los archivos de cada ejemplo en una carpeta separada disponible en amigos de ED.
En los últimos años, un degradado, una transición suave entre dos o más colores, se ha convertido en el mejor amigo de un diseñador web. Especialmente populares son los rellenos degradados sutiles que crean una sensación de profundidad y textura sin llamar la atención.
A veces, un GIF es la mejor opción para un degradado. Si el degradado es una simple transición de dos colores, el GIF funciona perfectamente en él. Sin embargo, la limitación de GIF a solo 256 colores a menudo crea una "banda" notable y desordenada entre las transiciones de degradado más complejas. JPEG, por otro lado, puede producir gradientes bastante nítidos, pero a menudo a costa de un tamaño de archivo más grande. Y aunque los gradientes de JPEG son generalmente lo suficientemente buenos, recuerde que JPEG usa compresión con pérdida, lo que significa que la imagen resultante nunca igualará la calidad de la imagen sin comprimir.
El estilo de degradado de fondo típico en cuestión se usa para botones, cuadros o simplemente en cualquier otro lugar. Podría parecerse a la Figura 5-1. En el sentido de las agujas del reloj, desde la parte superior izquierda, vemos la imagen original (sin comprimir), la versión GIF, la versión PNG y el JPEG. Puede ver que PNG tiene el tamaño más pequeño (515 bytes) en el resultado. Esto es cuatro veces más pequeño que la imagen GIF. JPEG es un poco más grande que PNG con 637 bytes y también tiene una calidad más baja debido a la compresión con pérdida (aunque la capacidad del ojo humano para determinar la diferencia de calidad en este ejemplo simple es cuestionable).
Figura 5-1
Panel de Photoshop - Guardar para Web,
mostrando diferencias de tamaño de archivo para la misma imagen en diferentes formatos
A veces es necesario crear una imagen que tenga el mismo rendimiento en diferentes sustratos. Algunos ejemplos comunes son los logotipos y los iconos. Tradicionalmente, estas situaciones han estado dominadas por los GIF, pero hay varias razones por las que PNG podría ser una mejor opción en esta situación. PNG tiende a ganar en tamaño de archivo para logotipos o algún otro "arte" simple. Además, la transparencia inherente de PNG facilita la creación de archivos únicos que funcionan sobre cualquier fondo. PNG ofrece transparencia binaria como GIF, pero también ofrece una opción mucho más deseable con un canal alfa, en el que los píxeles pueden ser parcialmente transparentes en lugar de estar activados o desactivados. El uso de este último aumenta el tamaño del archivo, a veces incluso más que un GIF con transparencia binaria, pero permite suavizar los bordes de la imagen y hace que sea más elegante colocarla sobre un fondo.
Sin embargo, reelaboré su concepto usando una imagen blanca con símbolos de esténcil. Usaron un símbolo blanco sobre un fondo transparente, que generalmente podría ser bastante efectivo. En este caso, su fondo color aparecería en un área cuadrada o rectangular alrededor del símbolo, en lugar del símbolo mismo.
Tanto Dan como PJ usaron GIF transparente en lugar de PNG. Esto cubrió por completo sus necesidades, y tuvieron que crear imágenes pixeladas para el estilo de los íconos. Con PNG, puede obtener una técnica similar, pero con el beneficio adicional de suavizado y transparencia parcial para usar en íconos más detallados.
Sé lo que estás pensando: toda esa transparencia PNG se ve bien, pero ¿es práctica?
La buena noticia es que todos los navegadores modernos son totalmente compatibles con las imágenes PNG, incluida la transparencia del canal alfa, cuyos beneficios se muestran en los ejemplos. Safari (todas las versiones), Firefox (todas las versiones), Opera (versiones 6 y posteriores), Netscape (versiones 6 y posteriores) y Mozilla (todas las versiones) harán todo lo que les pida que hagan a la perfección. Pero la mala noticia es el único navegador que aún no he mencionado que la mayoría de sus usuarios tienen: Internet Explorer.
Internet Explorer 6 y versiones anteriores no admiten la transparencia de canal alfa incrustada en formato PNG. Dado que la elección del navegador (o no elección) ha sido hecha por la mayoría de los navegantes web, este enorme agujero ha mantenido a los diseñadores web alejados de PNG. Pero, con el lanzamiento de Internet Explorer 7, obtuvimos soporte completo para la transparencia PNG alfa en todos los principales navegadores. ¿Qué sigue? ¿Hay formas de trabajar con transparencia PNG alfa en Internet Explorer 6 y versiones anteriores? Entonces, si quieres usar este efecto, nada te detendrá. Internet Explorer 6 y versiones anteriores requieren más que suficiente atención, pero definitivamente es posible.
Internet Explorer viene con varios filtros nativos. Se utilizan en CSS, pero no forman parte de la especificación oficial de CSS. En otras palabras, no están estandarizados en la web. Desafortunadamente, Internet Explorer 6 y versiones anteriores no son totalmente compatibles con el formato PNG (que recomienda el W3C), Microsoft tiene un filtro que corrige esta deficiencia: AlphaImageLoader.
Según una sección del sitio web oficial de Microsoft, AlphaImageLoader "muestra una imagen dentro de los límites de un objeto y entre el fondo del objeto y su contenido". En otras palabras, AlphaImageLoader carga una imagen PNG con toda su transparencia, pero la carga como su propia capa, debajo de la cual se encuentra el contenido del objeto sobre el que se aplica. Las imágenes PNG cargadas de esta manera actúan más como imágenes de fondo que como imágenes de primer plano (aunque en realidad se "sientan" sobre el fondo del objeto).
En general, puede simplemente aplicar AlphaImageLoader en CSS en elementos img y disfrutar del resultado. La imagen se cargará primero, la transparencia permanecerá, pero luego la imagen se cargará nuevamente, como el contenido frontal del objeto, con áreas opacas (así "sombreando" su versión transparente).
No puedes usar un PNG transparente como fondo imagen css para un elemento (X)HTML (digamos para
Volvamos a uno de los ejemplos anteriores e intentemos cargarlo correctamente en Internet Explorer. ¿Recuerdas el Canal 49, la estación de televisión en Topeka? Estoy seguro de que sí. La Figura 5-21 muestra cómo se ve el sitio en Internet Explorer 6.
Figura 5-21
Titular de 49abcnews.com representado en Internet Explorer 6 para Windows, con la transparencia PNG intacta.
El HTML para la parte superior relacionada con el clima parece que ya lo habrás adivinado:
Actualmente en Topeka, KS:
82°
Obtenga el pronóstico y más...
Ves una imagen, y definitivamente es un PNG, incluso Internet Explorer lo carga sin problemas. El ingrediente secreto de esto es JavaScript. De hecho, usé un poco de secuencias de comandos DOM para eliminar el elemento img sobre la marcha y reemplazarlo con un elemento div que, lo adivinó, usa AlphaImageLoader. JavaScript se describe dentro de los comentarios condicionales, otro lenguaje útil pero completamente no estandarizado de Microsoft integrado en Internet Explorer. Los comentarios condicionales le permiten usar código solo para una versión conocida de Internet Explorer. El código es ignorado por todos los demás navegadores, por lo que no los afecta de ninguna manera. en elemento
sitio web www.49abcnews.com, encontrará:
Gracias a la primera línea, si lte IE6, este script solo se incluirá en el documento renderizado si se muestra en una versión de Internet Explorer menor o igual a (especificado con lte) 6. Todos los demás navegadores, incluido el recién llegado a Internet Explorer 7, ignorará por completo esto.
Entonces, ¿qué hay en el archivo JavaScript fixWeatherPng.js? Vamos a ver:
Window.attachEvent("onload", fixWeatherPng); function fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "hidden"; var div = document.createElement("DIV"); div.style. filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(+ src + "", sizing="escala")"; // Algunos estilos CSS específicos de 49abcnews.com se omiten por brevedad. img.reemplazarNodo(div); )
Analicemos, paso a paso, lo que hace el script. Primero, le decimos al navegador que queremos ejecutar la función fixWeatherPng cuando se carga la página. El resto del script es la función en sí.
Para empezar, primero buscamos la imagen con la que trabajaremos por su atributo id y la almacenamos en la variable img. Almacenamos el atributo src (URL del archivo de imagen) en la variable src. Luego ocultamos el elemento img configurando la propiedad CSS de visibilidad en oculta.
Terminamos reemplazando el elemento img original (que está oculto) con un elemento div recién creado que tiene el AlphaImageLoader adjunto con éxito.
El uso de secuencias de comandos DOM para inyectar su AlphaImageLoader (filtrar bits sobre la marcha) tiene su lado malo pero necesario: mal CSS. Además, los elementos div no semánticos estarán contenidos fuera de su marcado (X)HTML. Y siempre que todo se describa dentro de los comentarios condicionales, no hay posibilidad de que el código de Microsoft dañe otros navegadores. (handyblogger: aquí Jeff está tratando de señalar sutilmente una solución "torpe" de Microsoft)
Si tiene que hacer algo incorrecto, al menos puede extraerlo y mantenerlo separado de todo lo demás que no lo necesita.
PNG, como formato de gráficos, ofrece muchas ventajas técnicas más allá de las ampliamente utilizadas en los GIF. De hecho, los beneficios son tan grandes que PNG podría haberse convertido hace mucho tiempo en un formato gráfico no relacionado con las imágenes fotográficas. La falta de soporte de Internet Explorer para algunas de las funciones PNG más significativas, como la transparencia del canal alfa, ha desanimado a muchos desarrolladores web como resultado. Pero hay dos muy buenas razones por las que no deberías tenerle miedo a PNG.
En primer lugar, incluso Internet Explorer 6 y sus versiones anteriores son compatibles casi por completo con PNG en términos de lo que puede hacer GIF (a excepción de la animación, por supuesto). PNG casi siempre muestra un tamaño de archivo más pequeño, lo que les permite cargar más rápido y usar menos recursos.
En segundo lugar, Internet Explorer 7 ofrece compatibilidad completa con la transparencia PNG alfa. Los efectos que se pueden lograr con la gama completa de opciones translúcidas son casi ilimitados. Espero que los diseñadores que encuentren formas interesantes de usar la transparencia PNG, en la línea de las descritas en este artículo, abran la puerta a un nuevo nivel de estilos nunca antes visto. Le he dado algunas ideas útiles de lo que puede crear con transparencia PNG, pero no se detenga allí. ¡Mira por ti mismo!
Un extracto de Web Standards Creativity de Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin y Rob Weychert; publicado por amigos de ED. Copyright Jeff Croft 2007. Usado con permiso de Apress, Inc.
