Digital techniques

2nd Partial: Graphic Design and Illustrator

Class 9

TAMM-Octorber 8th,2014

Objetives

The students will learn the importance of graphic design and graphic composition for a good visual communication.

They will learn different techniques and tricks using the program Illustrator for doing their graphic compositions, vectors, illustrations, presentations, etc.

Objetivo

El alumno aprenderá la importancia del diseño gráfico y la composición para una buena comunicación visual.

También a realizar composiciones gráficas, vectorización de imágenes, Ilustraciones, etc. utilizando el programa Illustrator.

Graphic DesignGraphic design’s objective is to

send messages using different medias depending on the kind of necesity: stylistic, informative, identifying, vocative, persuasion, technological codes, production, innovation, etc.

El diseño gráfico es una actividad cuyo objetivo es proyectar mensajes contemplando diversas necesidades que varían según el caso: estilísticas, informativas, identificatorias, vocativas, de persuasión, de código, tecnológicas, de producción, de innovación, etc.

Graphic design history• XVth and XVIIth Centuries: typography

born, types design develpoment, composition, illustration norms and bookbinding.

• Siglo XV y XVI: nacimiento de la tipografía, desarrollo de diseño de tipos, normas de composición, ilustración y encuadernación.

• XVIIIth Century: Newspaper appearance, publicity and adds. Aplied arts schools are created. The French revolution motivate the press freedom. Political material, cartoon and satire appear.

• Siglo XVIII: aparición del periódico y anuncios publicitarios y comerciales. Se crean las escuelas de artes aplicadas. La Revolución Francesa impulsa la libertad de prensa, aparece la propaganda política y la caricatura y la sátira.

• XIX Century: The Industrial Revolution impulse the trade and the publicity as selling strategy. The semi-automatic printer is developed. Appearance of typographies: Bold, Italic, Fines. Recognized fonts are stablished: Egypcian, Gothics, Antiques and English writing.

• Siglo XIX: la Revolución Industrial impulsa el comercio y se toma la publicidad como estrategia de ventas. Se desarrolla la imprenta semiautomática. Aparecen las tipologías: Negritas, Itálica, Finas; y establecen fuentes reconocidas: Egipcia, Góticas, Antiguas y escritura Inglesa.

• XXth Century: Siglo XX: la automatización provocó el aumento en la demanda del material impreso y el desarrollo de la publicidad: Cartel Publicitario. Aparición del Art Nouveau acelera la evolución del arte y el diseño, y crea el diseño gráfico como un medio de expresión, más que para comunicación. El dadaismo, el constructivismo ruso, el futurismo y el cubismo rompieron con los layouts y tipografías tradicionales. El uso de retícula en la arquitectura, que se estaba moldeando a los avances tecnológicos, sirvieron como inspiración para el uso de retícula en la construcción de páginas, y posteriormente en la herramienta básica del diseño gráfico. La Bauhaus, el De Stijl y el estudio psicológico de la Gestalt terminaron de definir el uso de la retícula como base y la percepción como parte de la finalidad.

• Siglo XX: la automatización provocó el aumento en la demanda del material impreso y el desarrollo de la publicidad: Cartel Publicitario. Aparición del Art Nouveau acelera la evolución del arte y el diseño, y crea el diseño gráfico como un medio de expresión, más que para comunicación. El dadaismo, el constructivismo ruso, el futurismo y el cubismo rompieron con los layouts y tipografías tradicionales. El uso de retícula en la arquitectura, que se estaba moldeando a los avances tecnológicos, sirvieron como inspiración para el uso de retícula en la construcción de páginas, y posteriormente en la herramienta básica del diseño gráfico. La Bauhaus, el De Stijl y el estudio psicológico de la Gestalt terminaron de definir el uso de la retícula como base y la percepción como parte de la finalidad.

Visual communication importance

Illustrator

• It is a program focused on artistic creation of drawings and painting for illustration (Illustration as part of the digital art and graphic design).

• Is from Adobe family, so it is compatible with any program of this family.

• It’s principal objective is the illustration using vectors.

Illustrator• Es un programa enfocado a la creación artística de dibujo y

pintura para ilustración (ilustración como rama del arte digital aplicado a la ilustración técnica o el diseño gráfico).

• Es un programa de la familia Adobe, por lo que es compatible con los programas de dicha familia.

• Su principal objetivo es la ilustración a través de vectores.

VectorsA vectorial image is a digital

image done with independent geometric figures (segments, polygones, arcs, circles, etc.) Each one is defined by different mathematic atributes of form, position, color, etc. For example, a red circle will be defined by the position of it’s center, it’s radius, it’s line thickness and color.

The vectorial image can be deformed or manipulated without loosing it’s quality because of the math curves that create it.

VectoresUna imagen vectorial es

una imagen digital formada por objetos geométricos independientes (segmentos, polígonos, arcos, etc.), cada uno de ellos definido por distintos atributos matemáticos de forma, de posición, de color, etc. Por ejemplo un círculo de color rojo quedaría definido por la posición de su centro, su radio, el grosor de línea y su color. 

La imagen vectorial, al estar formada por curvas matemáticas, se puede agrandar infinitamente sin perder su calidad. 

Workspace

http://jetsetcom.net/images/downloads/illustrator_cc_tools_modifier_keys.pdf

Illustrator works with CMYK and 300dpis resolution for default because it is used for printing and vectors don’t have a real “resolution” because they are imaginary lines.

New file

PenThen pen is the most

important tool in this program.

It works the same way as in Photoshop and is used to do traces with vectors using the anchors.

La pluma es la herramienta más importante de este programa. Es semejante a la de Photoshop, sirve para hacer trazos con vectores utilizando puntos de ancla.

http://jetsetcom.net/images/downloads/Pen_Tool_Technique_2014.pdf

The vectors traces has the advantage that they can be modified at any time: line color and thickness, inside color.

Los trazos vectoriales en Illustrator tienen la ventaja de que se puede cambiar el color y tamaño de línea, el color interior.

Interior color and line color

Brushes and color effects

• The vector characteristics can be modified as much as we want.

• You can create degrees, different shapes, textures, inside the vector shape or along the outline.

• You just need to select what you want from a presets list.

Brushes y efectos de color

• La características del vector pueden ser modificadas cuantas veces se desee.

• Se pueden crear degradados, figuras, texturas, etc., a lo largo o en el interior del vector.

• Sólo se tiene que seleccionar de una lista predeterminada.

Predeterminated forms

• The program have some shapes that are still vectors:– Rectangles– Elipses– Polygones– Star– Lens flare

Figuras predeterminadas

• El programa presenta algunas figuras predeterminadas que siguen siendo vectores como son:– Rectángulos– Elipse– Polígono– Estrella– Elipses

Save and export

• Save as– Is used to save files in formats that uses vectors

like .ai (illustrator), .eps, etc.• Guardar como

– Se utiliza el comando para guardar los archivos en formatos que utilizan vectores como .ai, .eps, etc.

• Export– Is used to save files in different image formats (no

vectors) like .jpg, .bmp, .dwf (autocad), etc.• Exportar

– Se utiliza este comando para guardar los archivos en formatos de imagen como .jpg, .bmp, .dwf, etc.

Example Export

Layers• The layers work a little bit

like Photoshop and Sketchbook pro: they are transparent, can be blocked and the one on the top cover the lower.

• The great difference is that a vector can be changed from layer to other.

• In Illustrator is very important to use layers because it helps to have more order while working and is easier for selection.

Capas• Las capas funcionan casi de

la misma manera que en Photoshop y Sketchbook pro, son transparentes, se pueden bloquear y la que está hasta arriba tapa las de abajo.

• La diferencia es que un vector puede cambiarse de capa.

• En Illustrator es muy importante utilizarlas, pues ayuda a trabajar con mayor orden y también para selecciones más rápidas y precisas.

Cada capa tiene un color, para saber en cuál estamos trabajando el trazo del vector es del mismo color que la capa en la que se encuentra.

Each layer has an assigned color. To know in which layer we are working on the outline of the vector will be the same color as the layer has. If the layer is yellow, the outline will be yellow.

1. Creamos una capa nueva. 2. Seleccionamos con el cursor el vector (click izquierdo). 3. Seleccionamos la capa a la cual queremos enviar el vector. 4. Click derecho > Organizar > Enviar a capa Actual.

To change a vector from one layer to another

1. Create a new layer. 2. Select the vector with the cursor (left click on it). 3. Go to the layers and select the new layer (the one you want to send the vector). 4. Right click > Organize > Send to current layer.

Examples

Silk screen print

Publicity/Packaging

Posters

http://worldsoccertalk.com/2014/05/22/view-world-cup-posters-for-all-32-teams-at-brazil-2014-from-espn/

Corporate identity

Ilustration

Mexican illustrators

Choper Nawers

Blog: http://ismenews.blogspot.com/

Anibal Pantoja

Blog: http://anibalpantoja.blogspot.com/

César Nández

Blog: http://cesarnandez.blogspot.com/

Revista Mitotehttp://www.mitoteros.com/

Tutorial vectorizado de imagen

• http://www.taringa.net/posts/imagenes/6317889/Como-vectorizar-una-imagen-_Tutorial-propio_.html

Exercise 15: Character

The students will choose an image from internte of any of this characters: – The fairly odd parents– Powerpuff girls– Dexter’s Laboratory– Kick Buttowski

• They will create an Illustrator File, will paste the image on it and trace it using the pen and the other tools. It must be identical to the original.

• After tracing it, they will transform it in a bigger image and move it next to the original.

• At the end they will export the file in JPG, in RGB and will submit it. The file size is unimportant.

• Date: Wednesday October 15th, before 9am.

Ejercicio 15: Personaje vectorizadoEscogerán una imagen de internet de alguno de los

personajes de:– Los padrinos mágicos– Las chicas superpoderosas– El Laboratorio de Dexter– Kick Buttowski

• Abrirán un archivo en Illustrator y lo vectorizarán calcándolo, debe quedar idéntico al original.

• Después de calcarlo lo harán más grande y pegarán la imagen original a un lado.

• Lo exportarán en jpg, RGB y subirán a deviantart. El tamaño de hoja es indistinto.

• Entrega: Miércoles 15 de octubre antes de las 9am.

Personaje originalCalca de mayor

tamaño

Buena presentación…¡Fondo!

Lecture 3: Steal like an artist

• Read the book Steal like an artist from Austin Kleon.

• Write a critical reflection about what you learned, you can ask yourself some questions like: – What did this left to me?

Did I learn something?– Can I use this in my

professional and daily life? – Was a total waste of time?

Why?

Lectura 3: Roba como un artista

• Leer el libro Roba como un artista de Austin Kleon.

• Realizar una reflexión sobre lo aprendido:

– ¿Qué me dejó? ¿Aprendí algo?

– ¿Me sirvió o fue una total pérdida de mi valioso tiempo? ¿Por qué?

– ¿Puedo utilizarlo en mi vida cotidiana y profesional?

• Formats you can use: – Mental map– Written document– Something original you came with

• Date: Wednesday October 15th, before 9am.

• Email

• Indispensable for the 2nd partial, stage 2.

• Formatos que pueden entregar: – Mapa mental– Escrito común y corriente, normalito– Se aceptan propuestas

• Fecha de entrega: miércoles 15 de octubre antes de las 9 am

• Vía correo electrónico.• Indispensable para la entrega del 2o

parcial (etapa 2).

Artistas interesantesStepPuki (illustrator diseño de personajes)• http://steppuki.deviantart.com/ Strongstuff (illustrator y diseño de posters)• http://strongstuff.deviantart.com/ Sebastien Millon (illustrator, diseño gráfico y playeras)• http://sebreg.deviantart.com/ Photoshop is my Kung-Fu (pintura digital en photoshop)• http://photoshopismykung-fu.deviantart.com/ Genzoman (pintura digital en photoshop)• http://genzoman.deviantart.com/ Dave Perillo o Montygog (Illustrator, diseño gráfico)• http://montygog.deviantart.com/Kuso design (Illustrator, diseño de personajes e ilustración)• http://kusodesign.deviantart.com/Ivan Bliznak (Illustrator, diseñador gráfico, ilustrador y artista)• http://ivan-bliznak.deviantart.com/