Consejos para Trasladar un Diseño Web desde Illustrator al Navegador

() translation by (you can also view the original English article)

Escenario: alguien te entrega un documento en Illustrator con su último diseño para la web y tu trabajo consiste en convertirlo en un proyecto compuesto por archivos HTML y CSS totalmente funcional en la web. Vamos a ver cómo puedes conseguirlo.

Nota: El objetivo de este tutorial no es recrear perfectamente el diseño para su uso en la web. En cambio, vamos a utilizarlo para explorar los flujos de trabajo y las funciones propias de Illustrator que nos ayudan a lograrlo.

El Archivo de Illustrator

Empecemos por echar un vistazo al documento en cuestión:

Descubre cómo se creó el diseño de nuestro ejemplo en este tutorial

Es el diseño para una página 404; página que indica a los usuarios que sea lo que sea que buscan, no ha sido encontrado y que tal vez deberían intentarlo de otro modo. Podemos ver un titular, algunos párrafos de instrucción, un formulario y botón de búsqueda, 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, algunas tonalidades cálidas y algunas sombras por aquí y por allá. ¿Por dónde empezamos?

¡Lo hace fácil!

No vamos a reinventar la rueda para conseguir lo que nos proponemos, vamos a hacerlo tan sencillo como nos sea posible. Illustrator no va a crear un paquete de HTML, CSS y JavaScript para esto, pero tampoco vamos a perder el tiempo construyendo todo desde cero, así que adelante, agarra una copia Bootstrap para pegarle un empujón a este proyecto.

Estamos con la versión v3.1.1 actualmente , como puedes ver...

Me he descargado Bootstrap, me he deshecho de algunos archivos CSS y fuentes que no necesitamos, después he añadido un archivo index.html basandome en la plantilla Cover template creada por Mark Otto. Cuatro minutos de clic con el ratón ya tengo una página básica que más o menos se asemeja a lo que estamos buscando.

Puede que no se parezca mucho, pero nos hemos ahorrado un montón de tiempo...

Los archivos originales para continuar desde este punto están disponibles en el repositorio de GitHub, en el carpeta 1-starting-point.

Agregar Código Estructurado

El siguiente paso lógico sería dotar de estructura a nuestro index.html mediante código (de nuevo, Illustrator no lo hará por nosotros). Ya tenemos un contenedor alineado al centro, un div con la clase inner cover:

1	<div class="inner cover">
2	<h1 class="cover-heading">404</h1>
3	<p class="lead">This is the base from which we'll work. All fluff has been stripped out.</p>
4	</div>

Añadamos algunas piezas dentro:

<div class="inner cover">
          
    <h1>Error</h1>
    <h2>404</h2>
    <p>Sorry, the page you were looking for doesn't exist</p>
    <p>Try searching for the page here:</p>
           
    <!-- more form markup available http://getbootstrap.com/css/#forms -->            
    <form class="form-inline form-search" role="form">
        <div class="form-group">
            <label class="sr-only" for="searchInput">Search</label>
            <input type="search" class="form-control" id="searchInput">
        </div>
        <button type="submit" class="btn btn-default">Search</button>
    </form>
  		
    <p>Or</p>
			
    <!-- buttons -->
    <a href="#" class="btn btn-primary">back</a>			
    <a href="#" class="btn btn-primary">home</a>			
    <a href="#" class="btn btn-primary">contact us</a>

</div>

Hemos añadido etiquetas de título <h1> y <h2>, algunos párrafos y algo de la estructura código típica de los formularios de Bootstrap (puedes consultar más ejemplos en los docs de Bootstrap). El formulario tiene una clase form-inline, una clase nativa de Bootstrap que coloca los elementos de nuestro formulario a lo largo de una línea.

Por último, al final, verás tres anclas, con las clases btn y btn-primary. Estos nos servirán como botones. Esto es lo que tenemos hasta ahora:

Todavía no hemos hecho nada relativo al estilo, ni una sola línea de CSS, pero gracias a Bootstrap hemos creado nuestra página de forma efectiva, lista para el pulido.

Vayamos con los Consejos Sobre Herramientas de Trabajo

Algo más en lo que nos va a ayudarnos Bootstrap; los tooltips. Puedes leer más sobre las distintas opciones disponibles para nosotros en los docs de Bootstrap, pero por ahora vamos a añadir los ingredientes necesarios a nuestro HTML.

A cada botón le añadimos una punta de clase adicional para identificar cualquier cosa que necesita una información sobre herramientas. También necesitamos un atributo title que dicta lo que realmente mostrará dentro de la descripción:

1	<a href="#" class="btn btn-primary tip" title="back">back</a>

El archivo bootstrap.min.js que ya estamos extrayendo tiene todo el JavaScript necesario para la información de los tooltips. De hecho, tiene montones de "juguetes" JavaScript de otro tipo, muchos de los cuales ni siquiera necesitamos, por tanto, para un entorno de producción podría ser conveniente incluir sólo las cosas que estemos utilizando. Los tooltips de bootstrap son del tipo opt-in, así que no funcionarán automáticamente, tenemos que inicializarlos. Hagámoslo dentro de las etiquetas script de la parte inferior de nuestra página, bajo nuestras otras llamadas JavaScript:

<script>
    $(function(){
        $('.tip').tooltip()
    });
</script>

Hecho. Ahora tenemos lo siguiente:

Probemos Ahora Algunos Estilos

He añadido un tercer archivo CSS al proyecto denominado theme.css y lo he vinculado desde el <head> del documento. Pero, ¿qué añadimos a la hoja de estilos?

1	<link href="css/theme.css" rel="stylesheet">

Vamos a empezar con el contenedor principal. Selecciona el objeto contenedor en Illustrator y observarás, en el panel Capas, que ha sido denominado main.

Esto es importante. Cuando trabajas en equipo es más inteligente tener convenciones comunes para denominar objetos como éste. Lo entenderás mejor cuando abramos el panel CSS.

Propiedades de CSS

Dirígete a Ventana > Propiedades CSS para revelar un panel con el mismo nombre. Con nuestro objeto principal seleccionado este panel contendrá todos los estilos pertinentes que podremos pegar directamente en nuestra hoja de estilos. Verás que estos estilos se han aplicado al selector .main, tal y como ha sido nombrado nuestro objeto.

Sigue adelante y copia lo que ves, después pégalo directamente en el archivo theme.css. Para que estas reglas se apliquen a nuestro elemento contenedor, necesitaremos cambiar el selector a lo que realmente estamos utilizando (mantener el selector .main es un poco arriesgado, ya que podría suceder que estuviese aplicado en otros lugares de nuestro sitio). Al cambiar .main a .inner.cover, deberías observar com tu elemento contenedor se torna de un hermoso color amarillo dorado, con esquinas redondeadas e incluso su forma proyecta una sombra, todo aplicado con CSS compatible entre diferentes navegadores.

Dimensiones CSS

Notarás que aquí nuestras reglas CSS no incluyen ni anchuras ni alturas. Esto es algo bueno; Bootstrap se ocupa por sí sólo de todo esto, así que ahora en realidad sólo estamos buscando estilos estéticos. Cambiando las Opciones de Exportación de Propiedades CSS podríamos incluir aquí nuestras propias dimensiones, pero no las vamos a indicar.

Aunque nuestro contenedor es un poco amplio, debido a los estilos que ya tiene aplicados, así que vamos a reemplazar esas dimensiones con la siguiente media query:

@media (min-width: 992px) {

    .masthead, .mastfoot, .cover-container {
		width: 400px;
	}

}

Esto anula las reglas de cover.css, ofreciéndonos un ancho de 400px en pantallas de al menos 992px de anchura. 400px no es exactamente fiel al diseño que tenemos, pero personalmente encuentro la dimensión y el tamaño de letra reales un poco pequeños, por lo que ¡los estoy vetando!

Mientras estamos aquí, también quiero modificar los estilos para aplicar esquinas redondeadas dentro de esta media query. Eliminarlas de las reglas pegadas desde Illustrator y aplicarlas de esta otra forma:

@media (min-width: 992px) {

    .masthead, .mastfoot, .cover-container {
		width: 400px;
	}
	
	.inner.cover {
		border-radius : 10px;
		-moz-border-radius : 10px;
		-webkit-border-radius : 10px;
	}

}

Ahora deberíamos tener algo con este aspecto en las pantallas grandes:

.. y esto en las pantallas pequeñas:

Medidas Específicas

No estamos siendo exactamente fieles con las dimensiones utilizadas en el documento de Illustrator, pero esto no constituye un problema; la web es fluida. Aún así, nuestro contenedor podría usar algo de padding en la parte inferior, así que vamos a ver exactamente cuánto nos indica que debemos utilizar nuestro diseño de Illustrator.

Selecciona la Herramienta de Medir de Illustrator (te encontrarás con la herramienta Cuentagotas) y arrastra el cursor para medir cualquier área del diseño. Podemos ver que el padding inferior es de 25px, así que vamos a aplicarlo manualmente a nuestros estilos.

1	.inner.cover {
2	padding-bottom: 25px;

Los Otros Estilos

Tenemos una buena cantidad de estilos y objetos aquí con los que trabajar y, si todo tiene exactamente los nombres que debería, podríamos (en principio) extraer una cantidad enorme de estilos CSS desde Illustrator para abordarlo todo. Sin embargo, hay algunas discrepancias aquí con la denominación del objeto (evitarlo requeriría alguna estrecha comunicación con el diseñador/desarrollador) y podríamos acabar con algún código extraño que no necesitasemos.

En cambio, trabaja pacientemente por tu cuenta, pasando de elemento a elemento, seleccionando cada objeto y aplicando el CSS correspondiente. Comienza con la tipografía y veamos qué tal lo hace el Illustrador.

Fuentes

Una de las primeras cosas que notarás es que el CSS de cualquier tipo de objeto incluye: font-family: Open Sans;

Open sans no es una fuente de sistema estándar y no se mostrará en cualquier navegador si el usuario no la tiene instalada. Por tanto tendrás que dirigirte a Google Fonts y coger el link CSS para extraerla en la página a través de la magia de las fuentes web.

1	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

Botones

Todo ha ido bastante bien hasta ahora, pero después llegaron los botones. El botón de búsqueda realmente no está mal, pero a los tres botones inferiores no les han sido aplicados nombres de objeto, de tal manera que lo que vemos en la ventana de propiedades de CSS es lo siguiente:

No se ha generado ningún código CSS. Para crear el CSS de los objetos sin nombre, o bien asigna un nombre al objeto desde el panel capas, o activa la opción 'Generar CSS para los objetos sin nombre' en el cuadro de diálogo Opciones de exportación de CSS.

Sigue adelante y abre las opciones, tal y como hemos comentamos antes, después asegúrate de haber activado la opción Generar CSS para los objetos sin nombre. La alternativa sería darle un nombre a nuestros botones, cualquiera de estas opciones es válida aquí.

Ahora, con todos nuestros botones seleccionados, podemos pulsar sobre Generar CSS y tendríamos nuestro código para los estilos de los botones. Por desgracia, Illustrator generará estilos completos para cada objeto individual, aunque todos ellos compartan las mismas reglas. Sucede incluso aunque usemos los habituales Estilos Gráficos, Estilos de Carácter, Estilos de Párrafo, ¡o aunque demos a todos los objetos un mismo nombre! Comportamiento de Illustrator que debería mejorarse, pero al menos podemos extraer estilos comunes y aplicarlos a varios objetos manualmente.

He copiado los estilos del botón de búsqueda, después los he aplicado a .btn, .btn:hover para asegurarme de que todos los estilos Bootstrap hayan sido debidamente sobreescritos. También he añadido un borde: none; para eliminar el borde azul de Bootstrap. ¡Vamos a ver lo que obtenemos!

No está mal, pero es una perfección insuficiente. Las sombras del texto desentonan (les falta de transparencia), los gradientes de los botones no son correctos y han perdido totalmente las sombras de sus cuadros.

¿Por qué?

Dicho en breve, la exportación de CSS desde Illustrator aún no está preparada para esta clase de estructuras complejas (siendo justos, esta es muy compleja). Echemos un vistazo al botón de búsqueda que vamos a recrear:

Es precioso. Pero observa cuantos rellenos, gradientes y sombras han intervenido en su construcción:

¡Uf!. No sorprende que Illustrator casi se haya bloqueado. Incluso el la curvatura de las esquinas (border-radius) han sido omitidas en la ecuación porque el asunto se han vuelto demasiado complejo y abrumador.

A cambio, voy a aplicar algunos estilos sencillos y esquivar el complejo CSS (en este tutorial, después de todo, intentamos qué Illustrador lo haga por nosotros). Los estilos .btn modificados tienen este aspecto:

.btn,
.btn:hover
{
    font-family : Open Sans;
    font-weight : bold;
    font-size : 14px;
    color : #AC4400;
    text-shadow : 0px 1px 0px rgba(255, 255, 255, 0.3);
	
    background : #FDDA2F;
    border-color: #FDDA2F;
	
    border-radius : 4px;
}

En términos de eficiencia CSS deja mucho que desear, pero estamos trabajando con lo que da de sí Illustrator en aras de realizar una demostración. Sería prudente volver luego 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 dejamos así por ahora. Volvamos nuestra atención a los botones en forma de iconos. Existen algunos enfoques que podríamos utilizar aquí:

Exportar Mapas de Bits

Seleccionando cada gráfico, podrías generar CSS de la misma forma que lo hicimos antes. Illustrator optará por exportar los trazados complejos como archivos png y luego utilizará esas imágenes como fondos para tus elementos.

Se te proporcionará con un grupo de recursos para que los utilices:

Pero, nuevamente, no es perfecto y se omiten ciertos aspectos de tu diseño, y aparecen estilos cuestionables en otros casos, así que si empleas este enfoque deberías pulir los resultados por tu cuenta. Este enfoque también falla al no tener en cuenta los dispositivos retina, con lo cual los gráficos que nos proporciona es muy probable que estén por debajo de los estándares aceptables en ciertas pantallas. En cualquier caso, los estilos CSS de salida para estos gráficos tienen el siguiente aspecto:

.image
{
    background-image : url(image.png);
	background-repeat : no-repeat;
}

SVG

Mi preferencia, como diseñador web, sería optar por archivos SVG, algo que Illustrator está haciendo muy bien.

Primero, selecciona un icono, luego cópialo en el portapapeles de la manera habitual (comando + C). Los datos SVG para ese objeto están ahora disponibles para que los pegues en un editor de texto (increíble). Abre un nuevo archivo en tu proyecto web, llámalo "icon-contact.svg" y pega el contenido del portapapeles en él.

Ahora puedes añadir el SVG como imagen directamente en el código de tu archivo index.html:

1	<a href="#" class="btn btn-primary tip" title="contact us">
2	<img src="img/icon-contact.svg" alt="">
3	</a>

Hola..

Existen muchas maneras para implementar un SVG en una página web; mediante CSS, convirtiéndolo primero el XML a base64, y pegándolo después en la línea de tu código en la que deseas que aparezca, la elección es tuya (echa un vistazo a Archivos SVG: desde Illustrator a la Web para obtener más información). Nuestro enfoque funciona muy bien aunque, al menos en los navegadores modernos, por lo que voy a seguir con él.

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

¡Hemos terminado!

Después de afinar un poco más (he añadido algún relleno para el elemento de formulario) deberías tener algo parecido a esto:

¡No está mal! No refleja al100% refleja el gráfico de Illustrator, pero teniendo en cuenta que hemos confiado principalmente los estilos de salida de Illustrator creo que podemos estar bastante contentos. Cualquier mejora adicional tendrá que ser hecha a mano, Illustrator ha hecho todo lo posible, hasta ahora, por nosotros.

¿Tienes algún consejo que pudiese ayudar a que Illustrator mejorase directamente este diseño web? Cuéntanoslo a través de los comentarios!