El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Aprende Experience Design CC

Importar vectores y extraer CSS desde Illustrator

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Una de las mejores integraciones que ha conseguido Adobe Experience Design es su compatibilidad con Adobe Illustrator, lo que nos permitirá trabajar nuestros diseños cómodamente desde Illustrator para luego copiar y pegar en Experience Design. Además, vamos a poder modificar nuestros vectores o textos creados previamente en Illustrator.

Transcripción

Una de las cosas que me parecen más interesantes dentro de Adobe Experience Design, es que combina y se integra perfectamente con Adobe Illustrator. Y con esa fusión de ambos programas sí que podemos obtener, por ejemplo, el CSS de una figura que nosotros hayamos diseñado en Experience Design. Vamos a ver un ejemplo claro. Si tenemos cualquier elemento que hemos diseñado dentro de Illustrator, tengo abierto Illustrator Creative Cloud con un logotipo que está en los archivos de ejemplo. Voy a seleccionar, voy a copiar: "Ctrl+C", comando "C" si estamos en Mac. Vamos a ir a Adobe Experience Design y lo pegamos directamente. Nos aparece como un elemento agrupado, pero que en todo momento haciendo doble clic puedo entrar en el grupo y modificar, por ejemplo, y a partir de allí pues modificaríamos el tamaño, podemos ir a un 38, imagino que algo así. Vamos a poder hacer todo tipo de modificaciones: De color, de forma, según necesitemos en todo momento. Vamos a desagrupar. Vamos a ir a objeto, un grupo Vemos que ahora sí que es un elemento independiente, y si hacemos doble clic, podemos modificar cualquiera de sus vértices. ¿Qué ocurre si quiero hacer lo contrario? Modificar algo que he realizado aquí y que luego quiero terminar de modificar dentro de Illustrator. Voy a seleccionar esta figura. Vamos a darle un color, así como un borde, vamos a decir que sea, por ejemplo, 4. Voy a seleccionar, "Ctrl+C". Voy a ir a Illustrator. Y si ahora aquí intento pegar, vemos que lo que va a hacer es pegarlo, pero lo va a pegar como un mapa de bits. Entonces, ¿cómo podemos importar? Directamente vamos a ir, lo que haríamos será "Exportar en PDF". Vamos a ir a "Archivo", "Exportar" o comando "E", "Ctrl+E", y le decimos que exporte directamente en PDF. Como tengo seleccionada la figura, voy a exportar solo esa figura. Aquí le podemos poner un nombre y allí no por efecto, pero vamos a ponerle "Figura" que tengamos más claro lo que es. Le decimos "Exportar". Y si ahora vamos a Illustrator, le decimos "Abrir", podemos abrir ese "Figura.pdf". Entonces sí que tenemos un elemento vectorial que podemos modificar en todo momento de un modo muy rápido. Vemos que se nos ha dividido en dos partes. Podríamos copiar el relleno de este. Vamos a copiar aquí, Ctrl+C", le decimos "OK". Suprimimos, seleccionamos este de aquí y le decimos que el relleno sea el que teníamos anterior. Si nosotros ahora además miramos el panel de CSS, lo podemos ir a buscar a ventana "Propiedades CSS", veremos que debemos primero de todo crear un nombre. Vamos a ir a la Capa. Vamos a crear un nombre para este trazo. Le diremos "Figura". Y ahora sí si vamos al panel de "Propiedades CSS", podemos extraer todas esas propiedades con código CSS válido.

Aprende Experience Design CC

Descubre esta novedosa herramienta que pone Adobe a tu disposición, Adobe XD, para trabajar la experiencia de usuario y todo el diseño UX e UI de tus aplicaciones y webs.

52 min (18 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:2/12/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.