Muse CC para diseño web responsivo

Exportación de imágenes a formato svg

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
El formato svg soporta información vectorial, por lo cual podemos escalar las imágenes sin afectar la calidad. Esto resulta especialmente importante en sitios web responsive donde debemos dar soporte a múltiples tamaños de pantalla.
06:29

Transcripción

Una grave desventaja que tienen los formatos típicos de optimización para web JPG, GIF y PNG es que son formatos basados en pixeles. Por ese motivo, si nosotros aumentamos el tamaño de estas imágenes, la calidad de esa imagen se va a ver afectada. Afortunadamente, actualmente nosotros contamos con otro formato de optimización que se llama SVG. La principal característica de este formato es que soporta información vectorial, y cuando tiene información vectorial, nosotros podemos escalar la imagen, ya sea para reducir o para aumentar su tamaño, sin ver afectada su calidad. Esto es especialmente importante cuando estamos trabajando con sitios web "responsive", ya que la adaptación del contenido exige también que cambie muchas veces el tamaño de la imagen. Y recuerden, en este caso la calidad no se va a ver afectada. Actualmente, tengo el archivo 'twitter.psd' abierto en Photoshop y tenemos una capa que es vectorial. Este tipo de capa se llama un "shape layer" o una capa de forma. Bajo el menú Archivo, voy a seleccionar el submenú Exportar y Exportar como. Y en la ventana de exportación, en la parte superior derecha, vamos a encontrar también la opción para exportar a formato SVG. Observen como el tamaño de archivo es muchísimo menor que si nosotros optimizamos en otro formato. Si optimizamos en GIF tenemos 7.6 KB, si optimizamos en PNG tenemos 5.2 KB y si optimizamos en JPG, recuerden, depende de la calidad, pero en este caso a una calidad del 100 % tenemos 20 KB. Y finalmente, si optimizamos o exportamos como SVG, el tamaño de archivo es menor a 1 KB, observen: 746 bytes. Vamos a hacer clic en el botón Exportar todo, 'twitter.svg', hago clic en Exportar y aquí tenemos nuestro archivo SVG, que tiene un peso de 746 bytes y que además, al ser un archivo vectorial, puede escalar su tamaño sin ver afectada su calidad. Ya que el formato SVG está orientado principalmente para mantener información vectorial, entonces probablemente sea mucho más común que nosotros realicemos esta optimización o exportación desde Illustrator. En la carpeta Assets, tengo un archivo que se llama 'twitter.ai'. Vamos a abrir este archivo y aquí tenemos un archivo que es bastante similar a lo que teníamos hace un momento en Photoshop, solamente que estamos en Illustrator. También es un elemento totalmente vectorial. Vamos a realizar el proceso de optimización o exportación a SVG. Bajo el menú Archivo, submenú Exportar, tenemos tres opciones: tenemos esta opción de Guardar para web, que era la opción que teníamos en versiones anteriores de Illustrator, por eso entre paréntesis dice "heredado". Si seleccionamos esta opción me aparece un texto que me recomienda utilizar una opción que se llama Archivo, Exportar y Exportar para pantallas. Voy a hacer clic, para borrar ese mensaje y seguir trabajando en esta ventana. Aquí tenemos el menú desplegable y lo que vamos a ver es que al hacer clic en este menú desplegable, no encontramos la opción de SVG. Por lo tanto, esta opción no la podemos utilizar para realizar procesos de optimización o exportación para SVG. Vamos entonces a cancelar. Bajo el menú Archivo, Exportar y ahora vamos a seleccionar la opción Exportar como, me abre esta ventana, vamos a escribir acá 'twitter2' para diferenciarlo del archivo que utilizamos hace un momento, vamos a cambiar el formato a SVG y vamos a guardar en tmp. Hacemos clic en el botón Exportar, me abre esta ventana y vemos que podemos exportar perfectamente a SVG con esta ventana, simplemente yo haría clic en el botón de OK. Existen unas opciones de configuración, pero normalmente las opciones que están por defecto trabajan bien. Sin embargo, Illustrator sigue insistiendo en que es mucho mejor trabajar actualmente con esta opción Exportar para pantallas. Así que voy a cancelar, menú Archivo, submenú Exportar y Exportar para pantallas. Me abre esta ventana y en esta ventana lo interesante que tenemos es que podemos trabajar con varias mesas de trabajo, si tenemos varias mesas de trabajo en este archivo de Illustrator, y cada una de esas mesas de trabajo yo las puedo exportar a formatos diferentes. En este caso, solamente tenemos una mesa de trabajo o "artboard", está seleccionada por defecto, y vamos a hacer clic en ese menú desplegable para decirle que vamos a exportar a formato SVG. Si necesitamos configurar las características de este SVG, entonces hacemos clic en este ícono y me abre esta ventana desde donde yo puedo realizar el proceso de configuración de opciones, dependiendo del formato que yo vaya a utilizar. Voy a cancelar, vamos a dejar las opciones que están por defecto, simplemente elegimos el formato, que en este caso es SVG. Nosotros, de hecho, tenemos otra opción que es interesante en esta ventana en particular y es que podemos añadir escalas, aunque esto es más utilizado en formatos que no sean SVG, ya que, recuerden, la principal característica del formato SVG es que es vectorial, por lo tanto, un mismo archivo se puede utilizar en múltiples tamaños. Voy a hacer clic en esta carpeta, vamos a definir la carpeta de trabajo como carpeta 'tmp', es decir, donde vamos a guardar este archivo, hago clic en el botón de elegir y finalmente Exportar mesa de trabajo. Me dice que ya hay un archivo que se llama 'twitter.svg'. Vamos a decirle que vamos a reemplazar, y aquí tenemos nuevamente el archivo 'twitter.svg' que ha sido generado a partir de la exportación desde Illustrator.

Muse CC para diseño web responsivo

Crea una web responsive sin escribir una sola línea de código gracias a Adobe Muse CC, la aplicación de la familia Adobe que te permite diseñar tu página de forma gráfica.

3:10 horas (41 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:15/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.