CREIX AMB INTERNET ILLUSTRATOR: CREACIÓN DE UTILLAJE GRÁFICO E ILUSTRACIÓN

Transcripción

1 CREIX AMB INTERNET ILLUSTRATOR: CREACIÓN DE UTILLAJE GRÁFICO E ILUSTRACIÓN

2 Índice: Introducción...pág Creación de un logotipo original......pág Vectorizar Ilustraciones y colorearlas a partir de un dibujo escaneado... pág Guardar para Web e importar en Flash...pág. 17 Enlaces de interés...pág. 19 2

3 Introducción Actualmente, Illustrator es el programa más utilizado para el diseño vectorial, tanto en papel como en web. Es un programa muy completo y cuyo aprendizaje profesional requiere tiempo y práctica. Además, es recomendable tener conocimientos previos sobre vectores, para facilitar la comprensión y poder profundizar en el funcionameinto de la herramienta. El objetivo de este seminario es realizar ejercicios prácticos profesionales. Como por ejemplo; diseñar un logotipo desde cero completamente original, vectorizar mapas de bits (ilustraciones) y colorearlas vectorialmente y finalmente, exportar documentos en diversos formatos. Descripción del contenido del seminario: - Diseñar Logotipos. - Vectorizar mapas de bits. - Colorear Ilustraciones. - Exportar en diversos formatos (Flash, Web, papel) 3

4 1. Creación de un logotipo original. La tarea de crear logotipos puede ser emocionante y difícil al mismo tiempo. Por un lado, crear logotipos es interesante porque ayudas a las empresas a descubrir y crear su marca. Por otro lado, no es nada sencillo. Porque no hay ciencia exacta que se pueda aplicar al proceso. El proceso conlleva bastante tiempo de principio a fin. Podemos llegar a 10 conceptos diferentes con un cliente y finalmente puede rechazarlos todos. O, en algunos casos, pasan semanas verificando o revisando los conceptos y el cliente finalmente decidir el primero de todos que se le envió hace un mes. Nunca se sabe y cada situación puede llegar a ser muy diferente en cada ocasión. Hay tres errores comunes que los nuevos diseñadores hacen al crear un logotipo y que se debe evitar a toda costa El lápiz y el boceto. Como diseñadores, nunca debemos sentarnos delante del ordenador y tratar de crear un logotipo. Después de haber hablado con nuestro cliente en profundidad, intentando clarificar que es lo que necesita y quiere representar su empresa, nuestro primer paso debe ser trabajar con el lápiz, el cuaderno de dibujo y sentarnos en una habitación tranquila y permitir ideas nos lleguen libremente. No es conveniente forzar las ideas. Esto sólo ayudará a que nos frustremos en el proceso. Basta con anotar lo que nos viene a la mente cuando pensamos en lo que queramos representar con el logotipo e informar al cliente del diseño durante el proceso de creación. La mejor manera de que un cliente vea los conceptos plasmados antes de realizar el arte final, son los bocetos. Una vez que tenemos algunas ideas sobre el papel, hemos de tomar algunos de los bocetos iniciales y comenzar a plasmarlos. Una vez que tengamos tres o cuatro buenos conceptos, a continuación, debemos sentarnos delante del ordenador y empezar a digitalizar esas ideas. 4

5 2. El diseño ha de ser original Nuestro trabajo siempre debe ser 100% hecho a medida. Nunca se debe utilizar cliparts predeterminados o en el trabajo vectorial creado por otro diseñador para nuestros logotipos. Como ya he mencionado antes, este es un proceso y no debemos tomar el camino más fácil mediante el uso de trabajo que no es el nuestro. Aunque hacer estudios de otros logotipos creados por prfesionales y estudiar la manera en la que trabajan puede ayudarnos mucho. 3. Los Logos se diseñan vectorialmente. Nunca debemos crear un logotipo que finalmente se va a imprimir en Adobe Photoshop. Si lo hacemos, tendremos un producto de escasa resolución y definición, que finalmente no se podrá escalar para adecuarlo a diferentes superficies. Todos los diseños de nuestros logos deben ser ilustraciones vectoriales y, por tanto, no dependeran de la resolución. Son incontables las veces en las que los clientes envian una imagen de 72 ppp de su logotipo para colocarla en un documento para imprimir. Eso significa que tendríamos que volver a crear el logotipo en formato vectorial, redibujándolo. Es crucial, aparte de mostrarle al cliente pantallazos o jpegs de los logotipos, que les proporcionemos también una versión totalmente vectorial del logotipo. El Tutorial. Teniendo en cuenta que esto es un ejercicio. Nuestro cliente tiene un restaurante americano que se llama Lone Star Steakhouse. Obviamente ficticio. Vamos a realizar los pasos reales de cómo se trabaja en la creación de un logotipo, crearemos una marca en modo logotipo personalizado, para el restaurante Steak House ficticia denominada "Lone Star Steaks". Después de esbozar algunos conceptos, me decido por el que muestro a continuación. 5

6 Como podemos ver, es una representación bastante rudimentaria de lo que será el logotipo final. Pero esto es solo para mostrar la intención y poder visualizar los puntos claves para luego plasmar definitivamente la idea. Vamos a trazar una imagen con la herramienta pluma y las herramientas buscatrazos y vamos a personalizar un poco la forma de la tipografía libre. Para trazar el logotipo, tenemos siempre dos opciones. Trazar desde el boceto el logo o bien trazar recreando el logo desde una fotografía. Optaremos por realizar la segunda opción. Utilizaremos Adobe Illustrator (preferiblemente a partir del CS3). Paso 1: Configurar el documento Es una buena opción trabajar con un gran lienzo al crear un logotipo, así que vamos a empezar con un documento CMYK de 11 pulgadas de ancho x 8.5 pulgadas de alto. También vamos a arrastrar dos guías, el centro y luego las bloqueamos. También podemos activar las reglas, pero no será necesario para este tutorial. 6

7 A continuación, necesitamos una imagen de referencia (Stock Photo o similares). (Importante: Si este fuese un proyecto para un cliente real, deberíamos comprar los derechos y obtener una copia en alta resolución de la imagen A mayor resolución, más fácil nos será trazar el objeto.) Seleccionamos la capa activa y vamos a (Archivo/Colocar) para importar la imagen de arriba. La tenemos en la carpeta (U:/Materials/Illustrator) y hacemos clic en Colocar. Esto colocará la imagen en el centro de nuestra mesa de trabajo. Seleccionamos la imagen y el centro de la cabeza de este ganado con las guías. Hacemos doble clic en la Capa 1 para que aparezca la ventana Opciones de capa de la paleta y seleccionamos Bloquear y difuminamos o transparentamos la imagen al 50%, así será más fácil trazar el logo. Por último, debemos crear una nueva capa sobre la capa 1 con nombre de "Logo". En esta capa es donde vamos a crear el logotipo. El documento debería tener el siguiente aspecto: 7

8 Es probable que tengamos que repetir este paso varias veces para hacerlo bien. Si surge algún problema, sólo tiene que deshacer los últimos pasos y empezar de nuevo. (CTRL+Z). Para dominar la herramienta pluma se necesitan muchas horas de práctica, así que si es la primera vez que utilizamos la herramienta, el logotipo no saldrá demasiado bien. Debemos dominar la técnica perfectamente para plasmar gráficamente logotipos bien hechos. Paso 2: Trazar el logo Tan sólo tenemos que trazar la mitad de la cabeza de este ganado. Antes de comenzar a trazar, debemos seleccionar la herramienta Zoom en la paleta de herramientas y hacer zoom hasta el final en la imagen. Ahora debemos establecer el relleno a ninguno y el trazo a Negro con un grosor de 0,25 px. Vamos a trazar por etapas, y al final utilizaremos la herramienta de Buscatrazos para crear la forma deseada. 1. Solo vamos a realizar un seguimiento de la mitad de la cabeza. Con la herramienta pluma seleccionada, trazamos el lado derecho de la cabeza y terminamos el trazado en la guía central. Nos quedará la mitad del dibujo. 2. Para el oído derecho, seleccionamos la herramienta Elipse y dibujamos un óvalo en la oreja. Es posible que debamos cambiar la posición del óvalo para encajar bien la oreja de la imagen. 8

9 3. Seleccionamos las dos formas. Desde la paleta Buscatrazos, seleccionamos Agregar a área de forma (sumando los objetos) y, a continuación clicamos en Expandir. Ya hemos creado la mitad de la cabeza. 4. Seleccionamos de nuevo la forma y hacemos clic en la herramienta Reflejar de la paleta de herramientas. Debemos hacer un punto de referencia en el centro de las guías. Reflejamos horizontalmente y creamos una copia. Finalmente, seleccionamos las dos formas y hacemos clic en Agregar a área de forma, y después Expandir. La cabeza se ha completado. 5. Desbloqueamos la capa 1 y eliminamos la foto. Ya no la necesitamos. Paso 3: Añadir tipografía. Es aconsejable utilizar fuentes libres para trabajar logotipos. Antes de empezar, hemos de asegúrarnos de bloquear la forma de la cabeza para que no se mueve alrededor de texto y así mantenemos la marca insignia perfectamente centrada. 1. Seleccionamos la herramienta texto de la paleta de herramientas y hacemos clic en cualquier parte de la mesa de trabajo. 2. Seleccionamos la tipografía que quede más coherente con el concepto inicial de creación del logo. Vamos al menú de caracteres en ventana y configuramos el tamaño de la fuente. 9

10 3. Seleccionamos el texto recién escrito con la herramienta de selección y lo alineamos con el centro de la mesa de trabajo. Desplazamos el texto para que se siente debajo de la marca insignia. Hemos de asegúrernos de dejar suficiente espacio entre la marca y el texto. Anulamos la selección del texto. 4. Una vez que estemos satisfecho con la colocación del texto, seleccionamos las dos líneas de los textos y vamos al menú: Texto/Crear contornos. (Esto va a cambiar la tipografía convirtiéndola en vector y dejará de ser un texto editable.) 5. Seleccionamos las dos líneas de texto y, agrupamos. Botón derecho (agrupar). 6. Ahora el logotipo está empezando a tomar forma. Vamos a añadir una "estrella" en el centro de la cabeza. 7. Seleccionamos la herramienta estrella de la paleta de herramientas y ponemos el color de relleno a blanco y el trazo a ninguno. 8. Una vez que estemos satisfecho con la colocación de la estrella, la seleccionamos y la cabeza también y las agrupamos. Finalmente seleccionamos todo el logotipo (cabeza y texto) y lo agrupamos también. (Nota: He creado un destacado opcional para los oídos que no es necesario para este tutorial.) Finalmente, ya tenemos nuestro logotipo creado. 10

11 Debemos jugar bastante con esta técnica y ver las infinitas posibilidades a las que se puede llegar en la creación de siluetas con la pluma y la herramientas del Buscatrazos. 2. Vectorizar Ilustraciones y colorearlas a partir de un dibujo escaneado a tinta. Illustrator nos permite colocar imágenes ya escaneadas (TIF o JPEG) y convertirlas en trazados vectoriales a través de la herramienta Calco interactivo. Lo primero que debemos tener en cuenta es que esta herramienta funciona adecuadamente cuando el dibujo escaneado está entintado previamente y la resolución (300ppp) y calidad del dibujo es alta. Por ejemplo un dibujo a lápiz no quedaría bien e incluso un JPEG conseguido de Internet a baja resolución. A continuación creamos un documento nuevo en Illustrator, con perfil CMYK para imprimir y vamos al menú: Archivo colocar. 11

12 Ya tenemos nuestro TIFF colocado en el lienzo de trabajo. A continuación, debemos seleccionarlo y en la barra de opciones clicar en calco interactivo para convertirlo en vector. Esto se puede hacer con cualquier imagen colocada, pero los resultados no son siempre fiables. Es aconsejable elegir unas de las opciones predeterminadas por defecto en el menú de calco interactivo, aunque podemos después personalizar la conversión a vector. En este caso concreto en el que trabajamos, la opción comic es perfecta. 12

13 Una vez digitalizado el mapa de bits, pasamos a colorearlo con la herramienta pintura interactiva. Tanto Illustrator como Freehand, permitían colorear trazados vectoriales, únicamente si estaban cerrados y en su modalidad de relleno. Con esta nueva herramienta de illustrator eso cambia. Hemos de seleccionar el trazado y dar al boton pintura interactiva, una vez hecho, Illustrator detecta los huecos para colorear y sólo debemos elegir colores e ir rellenando las áreas marcadas en rojo. 13

14 Seleccionando los colores adecuados y procurando no marcar los rellenes en negro de la tinta original podemos conseguir un resultado como éste. Ya solo queda expandir la ilustración para salir del modo pintura interactiva. Si se quiere añadir algo, como degradados u otras opciones funcionaría como cualquier grupo de trazados. Se ha de seleccionar el relleno que queramos cambiar y añadir degradados, motivos, etc. 14

15 3. Guardar para Web e importar en Flash. Aunque es posible guardar la ilustración como archivos adecuados para Web mediante el comando Exportar, es mucho más sencillo usar el comando Guardar para Web y dispositivos. Guardar para Web y dispositivos permite elegir formatos de archivo Web, seleccionar opciones de compresión y color, y previsualizar la ilustración optimizada. En Illustrator, se pueden usar sectores para definir los límites de los distintos elementos Web (como texto HTML, imágenes de mapa de bits o gráficos vectoriales) de la ilustración. Por ejemplo, si la ilustración contiene una imagen de mapa de bits que haya que optimizar en formato JPEG, mientras que el resto de la imagen se optimiza mejor como GIF, puede aislar la imagen de mapa de bits usando un sector. Si guarda la ilustración como página Web mediante el comando Guardar para Web y dispositivos, tiene la posibilidad de guardar cada sector como un archivo independiente con su propio formato, ajustes y panel de colores. Los sectores de un documento de Illustrator corresponden a celdas de tabla en la página Web resultante. 15

16 Si queremos trabajar los diseños realizados en Illustrator en otra herramienta como Flash, lo primero es guardar el documento como.ai (Documento genérico de Adobe Illustrator). Lanzamos el programa Flash, vamos a Archivo/Importar en escenario o en biblioteca y seleccionamos el archivo.ai. A continuación tendremos importado todo el material realizado en Illustrator totalmente editable a nivel vectorial en Flash. 16

17 Guía de Recursos RECURSOS Nombre URL Observaciones Adobe Página oficial del fabricante del programa Adobe Illustrator. Descargar programa r/?promoid=bpbit Compra o descarga gratuita del programa durante un mes. Tutoriales Tutoriales de Illustrator Tutoriales Tutoriales de Illustrator Tutoriales Tutoriales de Illustrator Tutoriales Tutoriales de Illustrator 17