jueves, 15 de enero de 2009

Diseño vectorial retro en Adobe Illustrator

By Naret

Esta clarisimo que hay una fuerte tendencia a rescatar el diseño retro y reutilizarlo en estos tiempos modernos. Solo pensemos en la propuesta grafica e intuitiva de la Web 2.0 con el correspondiente apogeo de los graficos vectoriales tan explotados en los medios publicitarios asi como en los dibujos animados. Estos son fuertes indicios de que estamos en la era de los graficos vectoriales. Vamos a ver como nosotros podemos llegar a un resultado muy profesional , acorde a las tendencias de diseño actuales, siguiendo unos sencillos pasos que intuitivamente podras aplicar en otros diseños posteriores , eso dependera de tu creatividad.
Recuerda siempre esta frase del gran fisico A. Einstein : " Mas vale la creatividad , que el conocimiento" y esta es la filosofia de este blog =) , asi que empecemos !! :


Paso 1 : Empezar con un Largo y delgado rectangulo :


Selecciona la herramienta rectagunlo Rectangle tool (M) de la barra de herramientas y haz click una sola vez sobre el Artboard ( la pagina principal o lienzo de trabajo como quieras llamarle ) y en la ventana de dialogo que aparecera ( Rectangle dialog) ingresa 5 in (360 pt) como ancho y 0.25 in (17 pt) como altura. Luego abre el panel de color (Window>Color) y rellena la figura con algun color que te guste ( para este ejemplo usamos R:251 , G:176 , B:59).


Paso 2 : Duplicar y variar el tamaño del objeto

Manten presionada la tecla (PC: Alt) y luego haz click sobre el objeto con la herramienta de seleccion "Selection tool (V)" arrastra hacia abajo con el fin de crear un duplicado del objeto. Arrastra el duplicado hasta dejar un pequeño espacio entre las dos figuras. Repite esto muchas veces mas , variando los espacios entre los rectangulos. Una vez hecho esto asginale a cada rectangulo una altura ligeramente diferente y deja un rectangulo mucho mayor casi en la mitad, tal y como puedes ver en la illustracion de abajo. ( Puedes auxiliarte de las flechas arriba y abajo en el teclado para mover ligeramente cada elemento y tambien de la tecla shift para trasladar verticalmente cada rectangulo)


Paso 3 : Rellenar los espacios con blanco

Necesitamos asegurarnos de que las areas entre las figuras esten rellenadas con el color blanco. Ahora mismo no hay nada , eso es solo transparente !!. Selecciona toda la figura con la herramienta de seleccion (Selection tool) y toma nota de las dimensiones del conjunto de figuras mediante el panel de informacion Info panel (Windows>Info)- Nuestro conjunto de figuras esta limitada por una caja de 5x2.319''. Selecciona la herramienta rectangulo (Rectangle tool) y haz click una sola vez sobre el Artboard. Ingresa las dimensiones que tu anotaste ( imagino que lo hiciste) del conjunto de figuras y haz click en OK. Luego en el panel de control ( Control panel ) , rellena el cuadrado con blanco y asignale un trazo : None ( Sin trazo - No stroke).

Mirando la imagen de abajo lo entenderas mejor :


Paso 4: Colocar el rectangulo blanco en su lugar.

Arrastra el rectangulo blanco recien creado sobre el conjunto de rectangulos inicial hasta que estos no sean visibles. Luego envia al rectagunlo blanco al fondo , hazlo asi : ( Object>Arrange>Send to Back). Si bien es cierto despues de hacer todo esto no hay cambios que se perciban , hemos logrado que los agujeros trasparentes ahora tengan un relleno blanco.


Paso 5: Crear un pincel

Presiona (PC: Ctrl-A) para seleccionar todas las figuras o , si tienes varios objetos en tu Artboard , presiona Click y arrastra envolviendo toda el area de la figura con la herramienta de seleccion (Selection tool) , aunque nunca esta de mas aprenderse los metodos abreviados de teclado , yo te lo recomiendo especialmente cuando veamos el tema de dibujo con la herramienta Pluma ; asi que , como decimos aqui en Peru : "muy mosca con eso ehh !! xD".

Siguiendo con el tema , abre ahora el panel de pinceles , Brushes panel ( Window>Brushes) y arrastra el grafico entero dentro del panel ( Si !!! , dentro del panel , como lo oiste , TODO EL GRAFICO del Artboard al panel de pinceles , OK ?? ). Cuando te aparezca la ventana de dialogo Brush dialog , elige la opcion : New Art Brush. Esto creara un nuevo pincel apartir de tu diseño. pero antes debemos hacer algunas configuraciones: Asegurate de que la direccion del pincel sea la mas adecuada , en este caso si lo es. Marca la opcion de proporcionalidad Proportional option en la seccion Size y finalmente haz click en OK. Ahora tienes tu grafico como un pincel !! , puedes borrar el grafico creado en el Artboard sin temores.


Paso 6: Crear un fondo

Seleccion la herramiente rectangulo (Rectangle tool) y haz un click sobre el Artboard. En el Rectangle dialog , ingresa 15'' como ancho y 8'' como altura. Rellena el rectangulo con el siguiente color R:247 , G:147, B:30.

Paso 7: Asignar un degradado

Abre el panel de apariencias (Appearance panel) y arrastra el relleno dentro del icono Duplicado (parte inferior del panel). Abre el panel de muestras (Swatches panel) y selecciona el degradado radial Negro a Blanco (Radial Gradient 1). Ahora dirigete al panel de trasparencias ( Transparency panel) y cambia el modo de fusion a Overlay ( Blend mode : Overlay)



Paso 8: Crear una nueva figura

Ahora selecciona la herramienta elipse Ellipse tool (L) y haz click sobre el Artboard. En el cuadro de dialogo del elipse , ingresa 1.5 '' in para el ancho y altura. Ahora abre el panel de pinceles (Brushes panel) y haz click sobre el pincel que creamos in el paso 5. Esto envuelve el contorno de nuestra elipse con el pincel basado en bandas que justo hemos creado. Si observas en la imagen de abajo hemos repetido el proceso para incluir otra pequeña elipse concentrica.


Paso 9 : Convertir a Simbolo

Ahora abre el panel de simbolos ( Symbols panel) y arrastra el objeto dentro del panel (Tal y como lo hicimos para crear nuestro pincel en el paso 5 , lo recuerdas ?? , ya vamos entendiendo como trabaja Illustrator cierto ?? , que bueno !! xD ) la accion de arrastrar el objeto entero al panel hara que aparezca el clasico cuadro de dialogo en este caso el ( Symbol dialog) , en sus opciones selecciona Graphic y click en OK. Esto convertira el objeto de arte original en una instancia de simbolo ( Whattt ??? jajaj creo que los que saben Flash ya entenderan lo que es una instancia de simbolo , si no lo sabes , pues es simplemente una copia de un dibujo que puedes usar cuando quieras , ahorrando mucho espacio en tu archivo , y con solo alterar el simbolo original , alterar todas sus instancias hijas , simple no ? , sigamos ). Como vamos a crear nuevas instancias de nuestro grafico con el Symbol Sprayer tool , puedes eliminar la instancia que quedo sobre el Artboard.

Paso 10 : La herramienta "Symbol Sprayer"

Selecciona la herramienta Symbol Sprayer tool (Shift-S) y asegurate de que el simbolo que creaste esta un aun seleccionado. Luego solo haz click por dondequieras alrededor del centro de nuestro fondo. Nota : Mientras mas tiempo mantegan presionado el mouse mas instancias se establecen , ahora seleeciona el Symbol Sizer tool que esta agrupado con el Symbol Sprayer tool en la barra de herramientas de Illustrator. Haz click sobre los simbolos para incrementar el tamaño de cada instancia. Manten presionada la tecla Alt para reducir el tamaño de cada instancia , si lo deseas. Finalmente , selecciona el Symbol Screener tool para variar la opacidad de los objetos , despues solamente haz click sobre el objeto para que empieze a dar efecto.

STEP 11 Create Line Element
Select the Line Segment tool (\) from the Toolbox and click to the right of the background. In the Line Segment Tool Options dialog, enter 15″ for Length and set the Angle to 0°. Then set the Stroke to white in the Control panel. Go to the Effect menu and choose Distort & Transform>Transform. In the Move section of the Transform Effect dialog, enter –0.25″ for Vertical, set the number of Copies to 12, and click OK. Now choose the Selection tool and move the lines onto the background.

STEP 12 Distort the Lines
Next, go to the Object menu and choose Envelope Distort>Make with Mesh. Enter 1 for Rows and Columns, and click OK. Choose the Direct Selection tool (A), select the top-right corner handle, and drag it just beneath the bottom-right corner. As you can see, the lines distort the bend of the shape. Feel free to select other corner handles and drag them apart to change the distortion. Position the overall object so that lines run off either side. Top it off by adding a swinging silhouette party girl and it’s celebration time!

3 comentarios:

party_girl dijo...

muy chulo ha quedado :)

David dijo...

muy chulo chulo chulisimo!! jjaja,
El paso de modificar un grafico como un nuevo simbolo, si que me sorprendiste ha... hay que estar al tanto, hace tiempo que no uso Illustrator, a mi me viene mejor el uso de corel Draw, ahi si la rompo.. weno las herramientas son similares, al final lo que vale es el manejo que un usuario puede darle a un software o no? XD. Saludos mi compare

David dijo...

Ha verda, olvide decirte k vinnie ya no esta actualizado hace como 1 año y medio no? bueno me refiero a que ya no postea animaciones, pues solo estan las animaciones que vimos hace mas de 2 años aprox. BUeno seguire sus pasos... :P