Escenario: alguien le entrega un documento de Illustrator con su diseño web más reciente y es su trabajo convertirlo en HTML y CSS. Veamos cómo puedes hacer eso..

Nota: El objetivo de este tutorial no es recrear perfectamente el diseño para uso web. En su lugar, lo utilizaremos para explorar flujos de trabajo y funciones dentro de Illustrator que nos ayudan a hacerlo..

El archivo de Illustrator

Empecemos echando un vistazo al documento en cuestión:

Vea cómo se hizo nuestro diseño de ejemplo en este tutorial

Es un diseño para una página 404; una página que le dice a los usuarios que no se puede encontrar lo que están buscando y que quizás deberían intentar otra cosa. Podemos ver un encabezado, algunos párrafos de instrucción, un formulario de búsqueda y un botón, además de algunos botones con información sobre herramientas en la parte inferior.

Todo parece flotar en el centro de la página, tanto horizontal como verticalmente. Tiene un fondo amarillo, algunos acentos cálidos y sombras caídas aquí y allá. Donde empezamos?

Fácil lo hace!

No vamos a reinventar la rueda para esto, hagamos esto lo más fácil posible para nosotros mismos. Illustrator no va a generar un paquete limpio de HTML, CSS y JavaScript para esto, ni vamos a perder nuestro tiempo en la construcción de todo, así que vamos a buscar una copia de Bootstrap para darle a este proyecto un buen comienzo..

Actualmente v3.1.1, como puedes ver ...

Descargué Bootstrap, eliminé algunos de los archivos de fuentes y CSS que no necesitamos, luego agregué un archivo index.html basado en la plantilla de Portada de Mark Otto. Cuatro minutos de hacer clic con el mouse y tengo una página básica que se parece aproximadamente a lo que buscamos.

Puede que no parezca mucho, pero acabamos de ahorrar un montón de tiempo ...

Los archivos de origen para continuar desde este punto están disponibles en el repositorio de GitHub, en la carpeta 1-punto de partida.

Añadiendo marcado

El siguiente paso lógico sería agregar un marcado estructural a nuestro index.html (nuevamente, Illustrator no va a hacer eso por nosotros). Ya tenemos un contenedor alineado centralmente, un div con clases cubierta interior:

 
404
 
Esta es la base desde la que trabajaremos. Toda la pelusa ha sido eliminada.
 

Agreguemos algunas piezas extra dentro de eso:

 
Error
 
404
 
Lo sentimos, la página que buscabas no existe.
 
Intenta buscar la página aquí:
  
 
 Buscar  
 Buscar 
 
O
  volver a casa contáctenos 

Hemos añadido etiquetas de encabezado

y

, algunos párrafos, y algunas marcas de forma típicas de Bootstrap (puede obtener más ejemplos de los documentos de Bootstrap). La forma tiene una clase de forma en línea, una clase nativa de Bootstrap que coloca nuestros elementos de formulario a lo largo de una línea.

Finalmente, justo al final, verás tres anclas, todas con las clases btn y btn-primaria. Estos servirán como nuestros botones. Esto es lo que tenemos en esta etapa:

En este punto, no hemos hecho nada en términos de estilo, ni una sola línea de CSS, pero gracias a Bootstrap hemos creado nuestra página de manera efectiva, lista para pulir.

Consigamos el Tooltips de trabajo

Algo más con lo que Bootstrap nos va a ayudar; La información sobre herramientas. Puede leer más acerca de las diversas opciones disponibles para nosotros en los documentos de Bootstrap, pero por ahora solo agreguemos los ingredientes necesarios a nuestro HTML.

A cada botón añadimos una clase extra. propina Se utiliza para identificar cualquier cosa que necesite una información sobre herramientas. También necesitamos un título atributo que dicta lo que realmente se mostrará dentro de la información sobre herramientas:

atrás

los bootstrap.min.js El archivo que ya estamos incorporando tiene todo el JavaScript necesario para la información sobre herramientas. De hecho, tiene muchos otros juguetes de JavaScript, muchos de los cuales ni siquiera necesitamos, por lo que en un entorno de producción puede ser conveniente incluir solo las cosas que estamos usando. La información sobre herramientas de Bootstrap es opcional, por lo que no funcionan de forma automática, necesitamos inicializarlos. Hagamos eso dentro de las etiquetas de script en la parte inferior de nuestra página, debajo de donde hemos llamado al otro JavaScript:

Hecho. Ahora tenemos esto:

Diferencia masiva!

Ahora probemos algunos estilos

He añadido un tercer archivo CSS al proyecto llamado theme.css y lo han señalado desde el documento. . Pero, ¿qué agregamos a la hoja de estilo??

Vamos a comenzar con el contenedor principal. Seleccione el objeto contenedor en Illustrator y notará, en la Capas panel, que ha sido nombrado principal.

Esto es relevante. En una situación de equipo, es aconsejable tener un entendimiento común acerca de cómo se deben nombrar los objetos como este. Verás por qué cuando abrimos el panel CSS. 

Propiedades CSS

Ir Ventana> Propiedades CSS Para revelar un panel del mismo nombre. Con nuestro objeto principal seleccionado, contendrá todos los estilos relevantes que podemos pegar directamente en nuestra hoja de estilos. Verás que estos estilos se han aplicado al selector. .principal, al igual que nuestro objeto ha sido nombrado.

Continúe y copie lo que ve, luego péguelo directamente en el theme.css expediente. Para que estas reglas se apliquen a nuestro elemento contenedor, necesitaremos cambiar el selector a lo que realmente estamos usando (manteniendo el .principal El selector es un poco arriesgado, ya que podemos encontrarlo usado en otras partes de nuestro sitio en general). Cambio .principal a .cubierta interior y deberías ver tu elemento contenedor que se vuelve amarillo dorado, con esquinas redondeadas e incluso una caja sombreada, todo aplicado con un CSS decente para todos los navegadores.

Dimensiones CSS

Notarás que nuestras reglas de CSS aquí no incluyen ningún ancho ni altura. Ésto es una cosa buena; Bootstrap está a cargo de todo eso, así que estamos buscando estilos estéticos. Cambiando el Opciones de exportación de propiedades CSS Podríamos incluir nuestras dimensiones aquí, pero las dejaremos fuera.

Sin embargo, nuestro contenedor es un poco ancho, debido a los estilos ya aplicados, por lo que debemos anular esas dimensiones con la siguiente consulta de medios:

@media (min-width: 992px) .masthead, .mastfoot, .cover-container width: 400px; 

Esto anula las reglas que se encuentran en cover.css, lo que nos da un ancho de 400 px en las pantallas de al menos 992 px de ancho. 400px no es exactamente fiel al diseño, pero personalmente considero que las dimensiones reales y el tamaño de fuente son un poco pequeñas, por lo que lo estoy vetando!

Mientras estamos aquí, solo quiero modificar los estilos para que apliquemos las esquinas redondeadas dentro de esta consulta de medios también. Elimínelas de las reglas que pegó de Illustrator y aplíquelas así:

@media (min-width: 992px) .masthead, .mastfoot, .cover-container width: 400px;  .inner.cover radio del borde: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; 

Ahora deberíamos tener algo como esto en pantallas grandes:

... y esto en pantallas pequeñas:

Medidas especificas

No estamos siendo exactamente fieles a las dimensiones precisas utilizadas en el documento de Illustrator, pero eso no es un problema; La red es fluida. Aún así, nuestro contenedor podría usar algo de relleno en la parte inferior, así que averigüemos exactamente cuánto dice nuestro diseño de Illustrator que debemos usar.

Selecciona el Herramienta de medida en Illustrator (lo encontrarás con el Herramienta cuentagotas) y arrastre el cursor para medir cualquier área dada del diseño. Podemos ver que el relleno que buscamos es de 25px, así que apliquémoslo manualmente a nuestros estilos.

.inner.cover padding-bottom: 25px;

Mejor

Los otros estilos

Tenemos una gran cantidad de estilos y objetos con los que lidiar aquí y, si todo fuera nombrado exactamente como debería, podríamos (en principio) generar una enorme pila de CSS desde Illustrator para tratar todo esto. Sin embargo, hay algunas discrepancias con el nombre de los objetos aquí (evitar que esto requiera una comunicación cercana entre el diseñador y el desarrollador) y podemos terminar con un código extraño que no necesitamos..

En su lugar, trabaje pacientemente de un elemento a otro, seleccionando cada objeto y generando el CSS relevante. Comience con la tipografía y veamos qué tan bien lo hace Illustrator..

Fuentes

Una de las primeras cosas que notará es que el CSS para cualquier tipo de objeto incluye: Familia tipográfica: Open Sans;

Open sans no es una fuente estándar del sistema y no se mostrará en ningún navegador donde el usuario no la tenga instalada. Por lo tanto, deberás dirigirte a Google Fonts y obtener el enlace CSS para acceder a la página a través de la magia de webfonts..

Botones

Todo ha ido bastante bien hasta ahora, pero luego presionamos los botones. El botón de búsqueda no está realmente mal, pero a los tres botones siguientes no se les han dado nombres de objetos, por lo que vemos lo siguiente en nuestra ventana de Propiedades de CSS:

No se generó ningún código CSS. Para crear CSS para objetos sin nombre, nombre el objeto en el panel de capas o habilite la opción "Generar CSS para objetos sin nombre" en el cuadro de diálogo Opciones de exportación de CSS.

Continúe y abra las opciones como mencionamos anteriormente, luego asegúrese de haber marcado Generar CSS para objetos sin nombre. La alternativa sería dar un nombre a nuestros botones, pero cualquiera de las opciones está bien aquí.

Ahora, con todos nuestros botones seleccionados, podemos golpear Generar CSS y tiene los estilos de salida para nosotros. Desafortunadamente, Illustrator generará estilos completos para cada objeto individual, incluso si todos comparten las mismas reglas. Este parece ser el caso incluso si usamos Estilos gráficos, Estilos de personajes, Estilos de párrafo, ¡O incluso dar a todos los objetos el mismo nombre! Se puede mejorar allí, pero al menos podemos tomar estilos comunes y aplicarlos a múltiples objetos manualmente..

Copié los estilos para el botón de búsqueda, luego lo apliqué a .btn, .btn: hover para asegurarse de que todos los estilos de Bootstrap fueron sobrescritos adecuadamente. También agregué un frontera: ninguna; para deshacerse del borde azul de Bootstrap. A ver que nos lleva eso.!

No está mal, pero no es perfecto.

Esto no es malo, pero es bastante perfecto. Las sombras de texto no se han cumplido (carecen de transparencia), los degradados de los botones no son correctos y faltan por completo sus casillas de sombras.

Por qué?

En resumen, Illustrator CSS export aún no está listo para este tipo de estructura compleja (para ser justos, es muy complejo). Veamos el botón de búsqueda que queremos recrear:

Es encantador. Pero eche un vistazo a la cantidad de rellenos, degradados y sombras que se han utilizado para construirlo:

Ay. Apenas sorprendente que dijera el ilustrador. No. Incluso el radio del borde se ha quedado fuera de la ecuación porque las cosas se han vuelto demasiado complejas..

No estás bromeando ...

En su lugar, solo aplicaré algunos estilos simples y eludiré el complejo CSS (este tutorial es sobre lo que Illustrator puede hacer por nosotros después de todo ...) .btn los estilos se ven así:

.btn, .btn: hover font-family: Open Sans; font-weight: negrita; tamaño de fuente: 14px; color: # AC4400; text-shadow: 0px 1px 0px rgba (255, 255, 255, 0.3); fondo: # FDDA2F; color de borde: # FDDA2F; radio del borde: 4px; 

En términos de eficiencia de CSS, todo esto deja mucho que desear, pero estamos trabajando con lo que Illustrator nos brinda para la demostración. Sería prudente volver después y limpiar el CSS, tal vez incluso utilizando una herramienta como CSSLint.

Iconos

Lo que hemos generado hasta ahora no está mal, así que lo dejaremos solo por ahora. Vamos a centrar nuestra atención en los iconos de los botones. Hay algunos enfoques que podríamos usar aquí:

Exportación de mapas de bits

Al seleccionar cada gráfico, puede generar CSS de la misma manera que lo hemos hecho antes. Illustrator optará por exportar rutas complejas como archivos png, luego usará esas imágenes como fondos para sus elementos.

Se le dará un grupo de activos para usar:

Pero, una vez más, no es perfecto y omitirá ciertos aspectos del diseño, lo que generará estilos cuestionables en otros casos, por lo que este enfoque requerirá un poco de refinamiento de su parte. Este enfoque también no tiene en cuenta las pantallas de retina, lo que nos brinda gráficos sub-estándar en ciertas pantallas. De todos modos, el CSS generado para estos gráficos se ve así:

.imagen imagen de fondo: url (image.png); repetición de fondo: no repetición; 

SVG

Mi preferencia, como diseñador web, sería optar por SVG en este caso, algo en lo que Illustrator se está volviendo muy bueno en.

Primero, seleccione un icono, luego cópielo en el portapapeles de la manera habitual (comando + C). Los datos SVG para ese objeto ahora están disponibles para que los pegue en un editor de texto (sorprendente). Abra un nuevo archivo en su proyecto web, llámelo "icon-contact.svg" y pegue el contenido del portapapeles en él..

Ahora puede agregar ese SVG como una imagen directamente en el marcado de su index.html:

Hola…

Hay muchas formas de implementar SVG en una página web; a través de CSS, al convertir primero el XML en base64, pegarlo en su marca en línea, la elección es suya (mire los archivos SVG: de Illustrator a la web para obtener más información). Sin embargo, nuestro enfoque funciona bien, al menos en los navegadores modernos, así que nos mantendremos en él..

Repita el proceso para los otros iconos, y ...

Estamos hechos!

Con un poco más de ajustes (he agregado algo de relleno al elemento de formulario), deberías tener algo que se parezca a esto:

¡No está mal! No refleja al 100% el gráfico de Illustrator, pero considerando que nos hemos basado principalmente en los estilos de salida de Illustrator, creo que podemos estar bastante satisfechos. Cualquier otra mejora deberá hacerse a mano, Illustrator ha hecho todo lo posible por nosotros en este momento..

¿Tiene algún consejo que podría ayudar a Illustrator a mejorar directamente este diseño web? Háganos saber en los comentarios.!