Los gráficos SVG de Adobe Illustrator CC rara vez se entregan a diseñadores digitales con fondos. Normalmente, los gráficos flotan sobre cualquier fondo que exista en el sitio web, la aplicación, la animación o el contexto interactivo.
Antes de discutir lo que implica eliminar el fondo detrás de las ilustraciones SVG, concéntrese en aplicar transparencia a los gráficos SVG. Debe definir la opacidad de la obra de arte utilizando el panel Transparencia. Por ejemplo, se ha aplicado un 50 por ciento de transparencia a la forma amarilla de la figura y puede ver la transparencia en efecto. Y sí, esa imagen es un archivo SVG, con todas las funciones livianas, de carga rápida e infinitamente escalables integradas en SVG.
Una forma SVG semiopaca sobre un fondo de color.
Los diseñadores están acostumbrados a pensar en términos de fondos que se vuelven transparentes o permanecen visibles. Pensamos en eliminar un trasfondo. Las imágenes PNG e imágenes GIF funcionan así: o crea con un fondo o elige un fondo transparente en un programa como Illustrator o Photoshop para eliminar ese fondo.
Con GIF y PNG, puede tener un color transparente que permita que los colores de fondo o las imágenes se muestren en las páginas web. Pero la lógica de eliminar el fondo es diferente en un archivo SVG que con PNG y GIF. Esencialmente, no existe un gráfico SVG que tenga un fondo no transparente porque no hay fondo. En otras palabras: por defecto, los gráficos SVG se guardan y exportan sin fondo.
¿Entonces, cuál es el problema? Bueno, ¡es fácil terminar accidentalmente con un fondo transparente al guardar o exportar archivos SVG! La siguiente figura puede tener un fondo blanco o puede tener un fondo transparente. No se puede saber con solo mirar la pantalla de Illustrator; tienes que elegir Ver → Mostrar cuadrícula de transparencia.
Este gráfico puede tener un fondo blanco o puede que no tenga fondo.
Con la cuadrícula de transparencia habilitada, como se muestra, puede ver que el pájaro tiene un rectángulo blanco detrás, y ese fondo blanco "irá con" el gráfico si guarda el archivo como SVG o lo exporta como SVG.
Ver la cuadrícula de transparencia revela un rectángulo blanco detrás del gráfico.
Permítanme enfatizar y arrojar luz sobre esto desde otro ángulo. Cuando voy a exportar esta imagen como SVG, el cuadro de diálogo Exportar para pantallas, que se muestra, no tiene una opción para seleccionar un color de transparencia.
No puede elegir un color de transparencia en SVG porque no hay color de fondo.
A menudo me encuentro con diseñadores que insisten en poner un rectángulo de fondo detrás de su obra de arte destinada a SVG para que puedan ver cómo se verá el gráfico cuando esté en segundo plano con un color en el medio de destino (como una página web o una aplicación). Está bien, les advierto, siempre que recuerde eliminar ese rectángulo de fondo cuando guarde o exporte el SVG. Y en el mundo actual de alta presión, alta productividad y respuesta rápida, ¿quién necesita algo más para recordar?
Una mejor solución es definir una “cuadrícula” de transparencia con un solo color que coincida con el entorno en el que se colocará el gráfico. ¿Por qué pongo la cuadrícula entre comillas? Porque esta técnica hace trampa: con ella, define ambos colores de la cuadrícula como el mismo color, simulando efectivamente una página web o el color de fondo de una aplicación.
Para usar esa técnica para crear un fondo personalizado mientras desarrolla ilustraciones SVG, siga estos pasos:
Elija Archivo → Configuración de documento.
En la pestaña General, busque la sección Opciones de transparencia y sobreimpresión.
Los cambios que desea se controlan en esta sección del cuadro de diálogo.
No se preocupe por definir el tamaño de la cuadrícula porque efectivamente está prescindiendo de la cuadrícula.
En la sección Cuadrícula de transparencia del cuadro de diálogo, haga clic en el primero de los dos paneles de color de la cuadrícula y elija un color de fondo utilizando una de las diversas paletas de colores en la ventana emergente Colores que se muestra en la siguiente figura.
Por cierto, ninguna de estas paletas de colores es especialmente compatible con la tecnología digital. No existe una paleta para RGBA, hexadecimal u otros formatos de color web estándar, pero el cuentagotas del selector de color puede ayudarlo a obtener el color de fondo que desea igualar.
Definición de un color de fondo de vista previa con una cuadrícula de transparencia.
Seleccione el segundo de los dos paneles de color de la cuadrícula y asígnele el mismo color.
Recuerde, puede usar el cuentagotas selector de color para tomar ese color.
Haga clic en Aceptar en el cuadro de diálogo Configuración de documento.
Todo lo que hice en el conjunto de pasos anterior fue definir cómo se muestra la cuadrícula de transparencia cuando está habilitada . Entonces, si su Cuadrícula de transparencia no está habilitada, elija Ver → Cuadrícula de transparencia.
En esta figura, seleccioné la mesa de trabajo con el gráfico y estoy obteniendo una vista previa del proyecto con un color de fondo simulado.
Vista previa del color de fondo de salida con una cuadrícula de transparencia personalizada.
Cuando se aplican transparencia (como 50 por ciento de opacidad) o efectos de transparencia como quemado de color, oscurecimiento o multiplicación a gráficos SVG, esos efectos conservan la escalabilidad de SVG.
Esta figura muestra el mismo gráfico, tres rectángulos anaranjados semitransparentes, exportados como un archivo PNG (arriba) y un SVG. Puede ver cómo el archivo PNG se degrada en calidad cuando lo acerco en un navegador. Lo que no puede ver es que el archivo PNG es casi dos veces más grande que el SVG.
Comparación de la salida PNG (arriba) con SVG cuando se aplica transparencia
Aquí hay un resumen de las ventajas de usar SVG para efectos de transparencia:
Por cierto, si tiene curiosidad acerca de cómo se ve el código SVG generado para este conjunto de rectángulos y qué tan fácil es para un desarrollador web o de aplicaciones trabajar con él, aquí está el código para el primero de los tres cuadros SVG , con una opacidad del 60 por ciento aplicada:
<= "" código = "">
Por último, si desea que el fondo de su SVG tenga un relleno de color, esto también se puede lograr a través de Propiedades del documento menú. Simplemente haz clic en la franja blanca situada junto a donde dice Color de fondo. Aparecerá un selector de color en tu pantalla.
Es importante tener en cuenta que el fondo SVG seguirá siendo transparente a pesar del relleno de color siempre que la columna A (que representa el transparencia del color) permanece en 0. Si desea que el documento tenga ese color de fondo (incluso en las exportaciones), puede subir esa columna de 0 a 100.
Y eso debería bastar para trabajar con fondos en Inkscape. Si tiene alguna pregunta que no se haya abordado en esta publicación, deje un comentario a continuación y le responderé si puedo ayudarlo.
Puede utilizar la herramienta Instantánea en Adobe Acrobat CS5 para seleccionar tanto texto como imágenes y crear una imagen de un área determinada dentro de un archivo PDF. El resultado se conoce comúnmente como una captura de pantalla de una sección dentro de un archivo PDF. El resultado es una imagen y su texto no es […]
Diseñado para investigadores y científicos, las capacidades de medición en Photoshop CC son bastante poderosas. Puede medir casi cualquier cosa y contar el número de lo que sea en una imagen técnica, tal vez desde un microscopio o telescopio. Si conoce el tamaño exacto de cualquier elemento en una imagen, puede descubrir casi cualquier cosa […]
Cuando utiliza las herramientas Licuar en Adobe Creative Suite 5 (Adobe CS5) Illustrator, puede doblar objetos (hacerlos ondulados, pegajosos o puntiagudos) creando distorsiones simples o complejas. Las herramientas Licuar pueden lograr todo tipo de distorsiones creativas o extravagantes (dependiendo de cómo se mire) en sus objetos. Usted […]
Cuando tenga texto en su proyecto de Adobe XD, puede comenzar a cambiar las propiedades del texto. Estas propiedades incluyen Familia de fuentes, Tamaño de fuente, Grosor de fuente, Alineación, Espaciado de caracteres (interletraje y seguimiento), Interlineado (interlineado), Relleno, Borde (trazo), Sombra (sombra paralela) y Desenfoque de fondo. Así que revisemos cómo se aplican esas propiedades. Acerca de la legibilidad y la fuente […]
Puede utilizar InDesign para crear y modificar gráficos de códigos QR. Los códigos QR son una forma de código de barras que puede almacenar información como palabras, números, URL u otras formas de datos. El usuario escanea el código QR usando su cámara y software en un dispositivo, como un teléfono inteligente, y el software hace uso […]
Al igual que en Adobe Illustrator, las mesas de trabajo de Photoshop brindan la capacidad de crear páginas o pantallas separadas dentro de un documento. Esto puede resultar especialmente útil si está creando pantallas para una aplicación móvil o un folleto pequeño. Puede pensar en una mesa de trabajo como un tipo especial de grupo de capas creado mediante el panel Capas. Su […]
Envolver texto en Adobe Illustrator CC no es lo mismo que envolver un regalo, ¡es más fácil! Un ajuste de texto obliga al texto a ajustarse a un gráfico, como se muestra en esta figura. Esta característica puede agregar un poco de creatividad a cualquier pieza. El gráfico está obligando al texto a envolverlo. Primero, crea […]
Al diseñar en Adobe Illustrator CC, a menudo necesita que una forma tenga un tamaño exacto (por ejemplo, 2 x 3 pulgadas). Después de crear una forma, la mejor manera de cambiar su tamaño a medidas exactas es usar el panel Transformar, que se muestra en esta figura. Seleccione el objeto y luego elija Ventana → Transformar a […]
Aprenda a aplicar transparencia a gráficos SVG en Illustrator. Explore cómo generar archivos SVG con fondos transparentes y aplicar efectos de transparencia.
Una vez que ha importado sus imágenes a Adobe XD, no tiene mucho control de edición, pero puede cambiar el tamaño y rotar las imágenes como lo haría con cualquier otra forma. También puede redondear fácilmente las esquinas de una imagen importada utilizando los widgets de esquina. Enmascarar sus imágenes mediante la definición de una forma cerrada […]
