UD04_TEDI_Imágenes Vectoriales

unidad 04

IMÁGENES VECTORIALES

Técnicas e edición dixital de imaxe

ÍNDICE

8. CAPAS Y GRUPOS DE ARCHIVOS VECTORIALES

1. INTRODUCCIÓN

- Capas

2. EL/LA DISEÑADOR/A GRÁFICO/A

- Grupos

3. TAMAÑO Y RESOLUCIÓN

- Convertir todos los trazados en uno

4. TIPOS DE ARCHIVOS DE IMAGEN VECTORIAL

5. RASTERIZACIÓN Y VECTORIZACIÓN

9. EXPORTACIÓN DE ARCHIVOS VECTORIALES

- Con Illustrator

6. TRAZADOS

ANEXO

7. CREACIÓN Y MANIPULACIÓN DE IMÁGENES VECTORIALES

- RECURSOS

- CREACIÓN DE UN LOGOTIPO DESDE 0

- Nuevo documento en Illustrator

. ¿Qué es un logotipo?

- Interfaz y mesas de trabajo

. ¿Qué aspectos debo tener en cuenta?

- Herramientas de selección

- Herramientas de manipulación básicas: la pluma

- Herramientas de manipulación básicas: crear formas preestablecidas

1.

INTRODUCCIÓN

Los gráficos vectoriales, a diferencia de las imágenes en mapa de bits, no están compuestos por puntos o píxeles, sino por elementos gráficos primarios como líneas, círculos y curvas. Estos son los llamados vectores, que se definen por parámetros matemáticos (coordenadas) como punto de inicio, punto final, radio, longitud de lado, grosor de la línea, color y patrón de relleno.

2.

EL/LA DISEÑADOR/A GRÁFICO/A

El diseño con imagen vectorial es una disciplina que normalmente suele encontrarse en el perfil profesional de diseñador/a gráfico/a (y no tanto en el perfil de fotótgrafo/a, carmarógrafo/a o editor/a audiovisual). Aunque tener unas nociones nos puede servir de mucho en algunos momentos ya que el diseño vectorial está muy ligado al vídeo, o a la animación visual en vivo, por ejemplo. El/la diseñador/a gráfico/a es un creador y editor de imágenes desde cero, trabajando en el inicio con un lienzo en blanco, a modo de pintor.

3.

CARACTERÍSTICAS DE LAS IMÁGENES VECTORIALES

• Tiene infinitas posibilidades de ser escalada y modificada sin pérdidas de calidad. Sin embargo, si queremos escalar un cículo construído a base de píxeles, veremos la pérdida de calidad y los píxeles a medida que vamos modificando y, por lo tanto, estropeando la imagen.

• No tienen un registro, una toma de la imagen, sino una creación, un diseño. Por ello, las herramientas y programas para generar y modificar imágenes vectoriales son diferentes a los utilizados en las imágenes de mapa de bits.
• Herramientas mapa de bits: copiar, cortar, pegar, contornear, clonar... (Photoshop)
• Herramientas vectoriales: trazar, definir, redimensionar... (Illustrator)

• Nos permiten crear contornos de línea variada y definir el color de las formas que éstas crean. La forma se puede controlar de manera muy precisa y cada objeto se puede manejar de forma independiente del resto ya que están construidos con una fórmula matemática propia cada uno de ellos.

3.

CARACTERÍSTICAS DE LAS IMÁGENES VECTORIALES

• En cuanto al tamaño de estas imágenes y al espacio de almacenaje que requieren, el tamaño de los gráficos vectoriales no tiene ningún efecto sobre su peso, ya que éste depende de la cantidad de parámetros guardados, mientras que los mapas de bits, en las cuáles las imágenes más grandes también necesitan más píxeles, pesan más.

• Puesto que los medios de visualización (pantallas, impresión) solo pueden reproducir las imágenes como gráficos rasterizados, las imágenes vectorizadas han de ser transformadas en gráficos de mapas de bits ( rasterización) antes de visualizarse. Según la complejidad del objeto, este es un paso previo que requiere más o menos tiempo y potencia por parte del equipo.

3.

CARACTERÍSTICAS DE LAS IMÁGENES VECTORIALES

• Gracias a la posibilidad de escalarse sin pérdidas, las imágenes vectoriales están especialmente indicadas para la representación de diagramas, logos, figuras geométricas, firmas, iconos y diseños técnicos. Imágenes más complejas como fotografías digitales de objetos naturales con muchos valores diferentes de color y de contraste no se pueden representar con vectores sin pérdidas visibles de calidad. En este caso es mejor usar imágenes basadas en píxeles.

3.

CARACTERÍSTICAS DE LAS IMÁGENES VECTORIALES

4.

TIPOS DE ARCHIVOS DE IMAGEN VECTORIAL

• CDR ( Corel Draw). Los gráficos que realizamos con Corel Draw son vectoriales y están compuestos por líneas y planos que se sitúan en unas coordenadas concretas en la página.

• AI (Adobe Ilustrator). Sus características en la forma de construir gráficos son similares a las del Programa Corel Draw. Es uno de los formatos vectoriales más usados y la opción por defecto del programa Adobe Illustrator. Entre las ventajas que ofrece se encuentra la de que, además de que las imágenes se pueden escalar sin pérdida de calidad de imagen como ocurre con todos los vectores, el formato guarda la transparencia del diseño original. Suele utilizarse para crear logotipos, infografías, gráficos digitales y diseños para impresión.

4.

TIPOS DE ARCHIVOS DE IMAGEN VECTORIAL

• EPS ( Encapsulated Postscript). El EPS es un formato antiguo de imágenes vectoriales y de los mejores formatos para ser importados desde la mayoría de software de diseño. Es un formato muy adaptable ya que podemos utilizarlo igualmente para imagen vectorial como mapa de bits. Uno de los grandes beneficios de usar este formato vectorial es que los archivos .EPS son compatibles con versiones nuevas y antiguas de Adobe Illustrator y otros programas de edición vectorial; sin embargo, no es el más indicado para diseños con transparencias. Muchos impresores prefieren el formato .EPS para asegurarse de que es compatible con su versión de los softwares de edición.

• WMF (Windows Metafile). Formato desarrollado por Microsoft, como consecuencia esta especialmente indicado para trabajar de manera compatible con los programas de Microsoft.

• SVG. Su nombre responde las siglas en inglés de Gráfico Vector Escalable (Scalable Vector Graphics) y es un formato basado en XML. Su uso está muy extendido en el diseño web gracias a que está optimizado como lenguaje de programación y puede ser indexado, por eso suele utilizarse para logotipos, botones y otros elementos web.

4.

TIPOS DE ARCHIVOS DE IMAGEN VECTORIAL

• PDF: Aunque no es el formato vectorial por excelencia, un archivo .PDF también puede usarse como vectorial. La gran ventaja es que se trata del formato más universal y puede abrirse con software específico de edición con Adobe Illustrator, pero también con programas gratuitos de solo lectura o con un navegador web. Además, es muy útil a la hora de enviar archivos a imprimir, ya que contiene toda la información necesaria del diseño y no suele provocar problemas de compatibilidad.

5.

RASTERIZACIÓN Y VECTORIZACIÓN

Mientras que la rasterización de una imagen vectorial ocurre sin grandes aspavientos y de forma invisible cada vez que una imagen de este tipo se imprime o se muestra en una pantalla, el camino inverso, de mapa de bits la imagen vectorial, es, por el contrario, más difícil. Este proceso de vectorización puede realizarse manualmente o con ayuda de un programa de vectorización como Jara Xtreme o Inkscape, que contienen respectivamente las funciones Bitmap Tracer o Potrace. Un cambio así es propenso a errores, ya que estos programas solo pueden mostrar las transiciones complejas de color o de contraste propias de las imágenes rasterizadas de forma aproximada, mostrándolas como bandas aisladas visibles (banding).

5.

RASTERIZACIÓN Y VECTORIZACIÓN - ILLUSTRATOR

Una rutina específica de Illustrator nos permite de forma automática crear imágenes vectoriales a partir de imágenes en mapa de bits (rasterizadas).

• Esta conversión se realiza mediante la herramienta Calco de Imagen, que convierte por defecto una imagen de mapa de bits en una imagen en blanco y negro y que posteriormente transforma en un trazado. Dependerá del ajuste establecido en el panel de esta herramienta su más o menos fidelidad al original.

• Una vez realizado el calco con una determinada cantidad de información calcada, se procede a realizar la vectorización con el comando Expandir, que creará trazados en cada parte diferenciada de la imagen.

Por lo tanto, si realizamos el proceso sobre una foto con muchos matices y con una calidad de calco muy alta, obtendremos una cantidad de vectores demasiado elevada para su manipulación

5.

RASTERIZACIÓN Y VECTORIZACIÓN - ILLUSTRATOR

5.

RASTERIZACIÓN Y VECTORIZACIÓN - ILLUSTRATOR

Para conseguir mejores resultados, normalmente se prepara la imagen previamente en Photoshop, como por ejemplo, recortar la zona que queremos vectorizar teniendo más o menos claro el resultado ue queremos conseguir con Illustrator.

5.

RASTERIZACIÓN Y VECTORIZACIÓN - ILLUSTRATOR

6.

TRAZADOS

La generación de imágenes vectoriales puede ser definida básicamente como la creación de trazados mediante la unión de puntos en un espacio 2D.Estos puntos se unen mediante líneas, las cuales podemos modificar constantemente tanto en forma, tamaño, borde, color y textura.Estas líneas, además, pueden ser trazados abiertos con un inicio y un final, o trazados cerrados, que unen su primer punto con el último. Tanto cerrados como abiertos pueden contener un relleno con un color.Estos trazados pueden ser creados mediante formas predefinidas, como cuadrados, círculos, estrellas... o pueden serlo mediante herramientas de tirado de líneas.La variación de los trazados se hace mediante la modificación de los puntos, denominados puntos de ancla.

6.

TRAZADOS

La creación y manipulación de esas líneas que forman los trazados se realiza normalmente con la HERRAMIENTA PLUMA y que ya hemos aprendido a usarla con Photoshop.Esta herramienta va formando puntos unidos por una línea. Esta línea no tiene por qué ser visible, por ello distinguiremos trazado de trazo. El trazo es la línea visible que bordea la figura y que puede ser más o menos gruesa o de un determinado color.Sin embargo, si quiero que el trazo sea invisible, también es posible, y aún así podré rellenar mi trazado sin necesidad de que se vea mi trazo.

7.

CREACIÓN Y MANIPULACIÓN DE IMÁGENES VECTORIALES

NUEVO DOCUMENTO EN ILLUSTRATORAdobe Illustrator tiene una interfaz "similar" a Photoshop. Al crear un DOCUMENTO NUEVO, también podemos establecer los aspectos básicos con algunas diferencias:

• Podemos establecer el tamaño del documento pudiendo elegir según unos formatos preestablecidos según su finalidad: web, impresión, vídeo, documento...
• Como diferencia, Illustrator nos muestra un ajuste de resolución que se llama EFECTOS DE RASTERIZACIÓN expresados en píxeles por pulgada (ppp). Así como en la imagen de mapa de bits, la resolución era esencial en el lienzo a trabajar, en la imagen vectorial la resolución es una cuestión que afectará a los elementos rasterizados (imágenes en mapa de bits que se incluyan en el documento). Para una imagen vectorial 100% no es necesaria ninguna resolución determinada. El tamaño del vector sólo es importante en caso de una posterior impresión o rasterización.
• Tenemos unos AJUSTES DE SANGRADO que sirven para separar la imagen del marco del documento, propio de las rutinas de impresión gráfica.

7.

CREACIÓN Y MANIPULACIÓN DE IMÁGENES VECTORIALES

INTERFAZ Y MESAS DE TRABAJO

Por defecto, si creamos un documento en Illustrator, se nos crea una MESA DE TRABAJO. Las mesas de trabajo representan las zonas que luego vamos a imprimir o exportar.

7.

CREACIÓN Y MANIPULACIÓN DE IMÁGENES VECTORIALES

INTERFAZ Y MESAS DE TRABAJO

Si creamos varias mesas en la ventana Nuevo documento, éstas tendrán el mismo tamaño, pero posteriormente podríamos dar a cada una un nuevo tamaño y reorganizarlas en el espacio. Para ello acudiremos a la ventana Mesas de trabajo y ahí seleccionar la/s que queremos modificar.En la misma ventana hay un icono, abajo a la izq., que nos permite reorganizar las ventanas de la forma que deseemos.

7.

CREACIÓN Y MANIPULACIÓN DE IMÁGENES VECTORIALES

INTERFAZ Y MESAS DE TRABAJO

Las mesas de trabajo son un recurso muy útil cuando queremos diferentes tipos de salidas. Ejemplo: un diseño de un evento que incluye un cartel, un flyer y un banner para una web.Podríamos luego exportar cada diseño con una medida o incluso formatos distintos.El formato .ai guardará cada documento a modo de pyoyecto con las mesas de trabajo que hemos creado.

7.

CREACIÓN Y MANIPULACIÓN DE IMÁGENES VECTORIALES

HERRAMIENTAS DE SELECCIÓN

HERRAMIENTA SELECCIÓN: Seleccionamos la totalidad de una imagen compuesta por trazados. Podemos mover, escalar, rotar...HERRAMIENTA SELECCIÓN DIRECTA: Seleccionamos un sólo trazado del conjunto y podemos realizar sólo sobre él cualquiera de las operaciones anteriores.Ambas herramientas son esenciales en la manipulación de vectores.

7.

CREACIÓN Y MANIPULACIÓN DE IMÁGENES VECTORIALES

HERRAMIENTAS DE MANIPULACIÓN BÁSICAS: LA PLUMA

Es una herramienta común a Photoshop y After Effects. La diferencia es que en PS no podemos exportar imágenes vectoriales y siempre nos quedaría una imagen rasterizada, y en AE, al tratarse de un software de edición de vídeo, tampoco podríamos exportar una imagen vectorial. Sin embargo, las herramientas vectoriales nos permiten en los programas de edición de vídeo crear máscaras por medio de trazados, siendo ésta una herramienta versátil y fácil de procesar.

7.

CREACIÓN Y MANIPULACIÓN DE IMÁGENES VECTORIALES

HERRAMIENTAS DE MANIPULACIÓN BÁSICAS: LA PLUMA

La pluma es la gran aliada del diseño vectorial. (atajo: tecla P)

• Con ella se generan unos puntos denominados puntos de ancla, que determinarán la forma de nuestro trazado.
• De punto a punto se genera un trazo que puede ser recto o curvo.
• Tiene una serie de herramientas en su desplegable con la que podemos añadir nuevos puntos a un trazado ya creado (icono pluma con símbolo +), eliminarlos (icono pluma con símbolo -) o cambiar un punto de ancla recto en uno curvo (herramienta modificar punto de ancla = triángulo/ tecla alt sobre punto)

Para mover un punto de ancla de lugar debemos recurrir a la herramienta de selección directa. Para finalizarlo sin necesidad de cerrarlo, tecla ESC (escape).

7.

CREACIÓN Y MANIPULACIÓN DE IMÁGENES VECTORIALES

HERRAMIENTAS DE MANIPULACIÓN BÁSICAS: LA PLUMA

• Crear líneas y ángulos rectos es muy sencillo con la pluma. Para crear líneas curvas, debemos hacer un clic de partida, y en el segundo click sin dejar de arrastrar el ratón, nos crea un nuevo punto de ancla con unos manejadores que nos permitirán ir dirigiendo la curva (igual que en phosothop).

7.

CREACIÓN Y MANIPULACIÓN DE IMÁGENES VECTORIALES

HERRAMIENTAS DE MANIPULACIÓN BÁSICAS: LA PLUMA

• Todo trazado puede tener un relleno y un trazo. Podemos cambiar el color de ambos con la paleta de colores, también muy similar a la de PS. Sin embargo, en AI, nos informa del color del trazo representándolo en un marco, y el color de relleno se representa como un cuadro completo.
• Al trazo le podemos cambiar su anchura, la uniformidad de su línea, etc.

7.

CREACIÓN Y MANIPULACIÓN DE IMÁGENES VECTORIALES

HERRAMIENTAS DE MANIPULACIÓN BÁSICAS: LA PLUMA

• Cuantos menos puntos tengamos,mejor quedará nuestro trazado porque va a conseguir unas líneas más suaves.

7.

CREACIÓN Y MANIPULACIÓN DE IMÁGENES VECTORIALES

HERRAMIENTAS DE MANIPULACIÓN BÁSICAS: LA PLUMA

ATAJOS DE TECLADO CON LA HERRAMIENTA PLUMA

7.

CREACIÓN Y MANIPULACIÓN DE IMÁGENES VECTORIALES

HERRAMIENTAS DE MANIPULACIÓN BÁSICAS: CREAR FORMAS PREESTABLECIDAS

Con la herramienta para crear formas preestablecidas podemos crear trazados de una determinada forma sobre la que podremos posteriormente realizar cualquier modificación mediante sus vectores. Las formas predeterminadas pueden ser considradas formas finales o formas a partir de las cuales llegar a otra forma distinta. Una de las maneras de modificar trazados de forma limpia y sencilla es mediante los llamados vértices interactivos. Todos los vértices de cualquier trazado poseen un punto en su zona interna, mediante el que podemos curvarlo. Al seleccionar un vértice o varios con la herramienta de Selección directa, nos mostrará unos puntos en el interior del vértice mediante los cuales es posible redondear los ángulos del mismo.

8.

CAPAS Y GRUPOS DE ARCHIVOS VECTORIALES

• Las capas de illustrator funcionan similar a las de PS.
• Hay una pila donde la capa superior oculta la inferior.
• En un archivo donde tengamos numerosos trazados nos puede resultar difícil eliminar algunos con la herramienta de selección directa, por lo que podemos acudir a la ventana de Capas y seleccionar ahí los que no nos interesen (circulito y arrastrar a cubo basura).

8.

CAPAS Y GRUPOS DE ARCHIVOS VECTORIALES

CAPAS

• Las capas de illustrator funcionan similar a las de PS.
• Hay una pila donde la capa superior oculta la inferior.
• En un archivo donde tengamos numerosos trazados nos puede resultar difícil eliminar algunos con la herramienta de selección directa, por lo que podemos acudir a la ventana de Capas y seleccionar ahí los que no nos interesen (circulito y arrastrar a cubo basura).

8.

CAPAS Y GRUPOS DE ARCHIVOS VECTORIALES

GRUPOS

• Además de las capas, podemos organizar un nivel más los diferentes trazados del archivo, pudiendo incluir diferentes grupos dentro de una capa.
• No hay una regla de cómo agrupar. Para poder ver como está organizado un proyecto debemos ir expandiendo capas y grupos.

8.

CAPAS Y GRUPOS DE ARCHIVOS VECTORIALES

CONVERTIR TODOS LOS TRAZADOS EN UNO

• Cuando tenemos una forma complicada compuesta por numerosos trazos, podemos convertirlo a un trazo único. Illustrator eliminará los trazados interiores de la figura y creará uno nuevo con un único trazado de su silueta.
• Para ello debemos desplegar la ventana Buscatrazos y con todos los trazados seleccionados pulsar la opción de Modos de forma, el icono de unificar.

9.

EXPORTACIÓN DE ARCHIVOS VECTORIALES

ARCHIVO > GUARDAR COMO

• Para guardar en el formato nativo de illustrator (.AI)
• Para guardar en otros formatos: .epc, .pdf, .svg.
• En todos mantenemos todas las posibilidades sobre los trazados que hay en el archivo siempre que le demos a "Conservar capacidades de edición en Illustrator".

ARCHIVO > EXPORTAR

• Exportar para pantallas: poder exportar en varios formatos a la vez (svg, pdf, png, jpg)
• Exportar como...: poder exportar en diferentes formatos de imagen en mapa de bits: png, bmp, jpg... o PSD.
• Exportar para web: para exportar archivos con poco peso y ajustada su resolución pensando en su inclusión en páginas web.

ANEXO

RECURSOS

• Freepik: Podéis encontrar vectores gratis, entre otros.

• Guía de Illustrator - Web de Adobe

• Curso de Illustrator - tutoriales utilizados en clase

ANEXO

CREACIÓN DE UN LOGOTIPO DESDE 0

¿QUÉ ES UN LOGOTIPO?Se utiliza la palabra Logotipo por el fácil entendimiento para la gran mayoría de los lectores. Sin embargo es importante saber las diferencias.

• Logotipo se refiere al nombre de la marca sin ningún recurso gráfico, solo tipografía con algún diseño particular.

• Isotipo es un símbolo que usa la marca para ser identificado sin necesidad de palabras.
• Imagotipo es el conjunto de un símbolo y palabra (s) que pueden mostrarse independientes, no deben estar ambas cosas necesariamente.

• Isologo es la unión de símbolo y texto, en este caso si deben ir juntos.

Piensa si quieres que tu símbolo lleve siempre tu nombre (Isologo) o no (Imagotipo), si prefieres diseñar solo un símbolo que te identifique (Isotipo) o si tu idea es diseñar tu nombre o la palabra que usaras como marca (Logotipo).

ANEXO

CREACIÓN DE UN LOGOTIPO DESDE 0

¿QUÉ ES UN LOGOTIPO?

ANEXO

CREACIÓN DE UN LOGOTIPO DESDE 0

¿QUÉ ASPECTOS DEBO TENER EN CUENTA? 1. 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 tranquilamente y pensar en las ideas que nos van llegando. 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. La mejor manera de 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. Con tres o cuatro buenos conceptos, a continuación, debemos sentarnos delante del ordenador y empezar a digitalizar esas ideas.

ANEXO

CREACIÓN DE UN LOGOTIPO DESDE 0

¿QUÉ ASPECTOS DEBO TENER EN CUENTA? 1. EL LÁPIZ Y EL BOCETO

ANEXO

CREACIÓN DE UN LOGOTIPO DESDE 0

¿QUÉ ASPECTOS DEBO TENER EN CUENTA? 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 profesionales y estudiar la manera en la que trabajan puede ayudarnos mucho.

ANEXO

CREACIÓN DE UN LOGOTIPO DESDE 0

¿QUÉ ASPECTOS DEBO TENER EN CUENTA? 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 envían 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.

ANEXO

CREACIÓN DE UN LOGOTIPO DESDE 0