Transformar, Máscara de recorte, Calco interactivo y Degradado.

Existen comandos y herramientas que facilitan el manejo del programa, hay varias y cada una con funciones diferentes que muchas veces usamos otros medios complicados que dan los resultados que requerimos pero cuando descubrimos que hay maneras más sencillas de hacerlo la velocidad y calidad de lo que necesitamos aumenta, ese es el propósito de esta publicación, algo parecida a la anterior, espero que le sirva a alguien más.

Al abrir una mesa de trabajo CTRL+N, nos da las opciones de editar las medidas necesarias con las que queremos trabajar y nos aparecen algunas ya estándars, ya sea para imprimir tamaños como Carta (Letter) 8.5 x 11 Inch en el caso de Latinoamérica y tal vez otros lugares o A4 en el caso de Norteamérica y todo tiene un porqué, la cantidad de letras que se usan en las palabras, los tipos de letras y no es casualidad que estas dos medidas estándars sean muy similares ya que lo único que lo diferencia en cuanto al abecedario son símbolos como el acento y la letra ñ, algo tan sencillo hace que todo cambie, se llama ergonomía pero será un tema del que se hablará más adelante.

El tema del principio era el tamaño de la mesa de trabajo que se puede manipular al gusto o necesidad que tengamos pero ¿Cómo saber el tamaño de las cosas que trabajamos?, modificarlo a nuestro gusto entre muchas otras cosas más.

Transformar

Hay una herramienta que facilita las medidas Mayúsculas+F8 o Ventana/Transformar, da medidas en X, Y, Ancho, Alto, Grados o Distorción, cuando seleccionamos un vector nos muestra las medidas que tiene, también sirve para imágenes, los puntos de referencia de donde se toman las medidas del lado izquierdo o la restricción de medidas del lado derecho, cuando esta está activada suele hacer más chico lo seleccionado a proporción, en caso de no tenerlo activado lo hace individualmente pero se distorsiona.

Restricción de medida desactivada (distorsión de la imagen)

Restricción de medida activada

Control+R nos muestra la regla donde también se puede saber la medida, para activar la medida en el sistema que queramos ya sea pulgadas, centímetros, pixeles etc sólo damos clic derecho sobre la regla y seleccionamos lo que queramos, es el sistema de medida que nos va a aparecer en la herramienta Transformar, de esta manera podemos trabajar con las medidas exactas que queramos, muy útil a la hora de hacer empaques o cuando trabajemos en páginas web entre muchas otras opciones.

Máscara de Recorte

Esta herramienta es muy útil y se puede trabajar sobre imágenes y vectores, sólo que al trabajar con tantos vectores a veces marca un error y no deja realizar esa función.

Es muy sencillo trabajar con esta herramienta, este ejemplo se hizo con una imagen de un blog hermano Flor del mal, primero se pone un vector cerrado sobre la imagen, recomiendo trabajar con el trazo y no el relleno para que tengamos un tipo vista previa de lo que vamos a cortar, una vez hecho esto nos vamos a la pestaña Objeto/Máscara de recorte/Crear o podemos utilizar el comando CTRL+7.

La imagen se corta con la forma en que está hecho el vector, siempre y cuando este esté cerrado, se pueden usar la forma que queramos pero al parecer puede tener un límite de vectores, a mi parecer esta herramienta es muy útil y la recomiendo.

Calco interactivo

Esta herramienta sirve en las imágenes, como su nombre lo dice calca la imagen y tiene la función de calcarla a vector, muchas veces no nos queda a la perfección los vectores ya que es el programa quien calca, está en nuestras manos manipular los valores que esta herramienta nos proporciona, como ejemplo se tomó la misma imagen del blog hermano.

El primer paso es abrir la imagen, el simple hecho de seleccionar la imagen hace que nuestra barra de herramientas superiores cambie, nos muestra datos de la imagen, como sus medidas, tipo de sistema de color en el que está, Calco de imagen, Máscara, Transformar entre otras.

Damos clic en el triángulo de opciones que está a un lado de Calco de Imagen y nos muestra los tipos de calcos que manejan, el seleccionar uno nos calca por default la imagen, pero para manipular los valores a nuestro gusto y tener una vista previa recomiendo abrir la herramienta desde la pestaña Ventana/Calco de imagen.

En el ejemplo se utilizó la primera opción sólo que se cambió el Umbral, recomiendo activar la opción Previsualizar ya que este muestra cómo va a quedar, luego de eso en la parte superior donde cambia la barra de herramientas se seleccionó Expandir, crea la imagen en vectores o mejor dicho lo calca el programa.

Despues de hacer tener la imagen ya en vector pone estos agrupados, todas las imágenes tienen un incómodo marco blanco que muchas veces no necesitamos, con la herramienta de selección “A” podemos quitar ese marco, en caso de no querer nada de un color en específico utilizamos la herramienta de Varita Mágica (Y), damos un clic sobre lo que queramos quitar con los valores similares, en este caso lo blanco y suprimimos los vectores.

Separando el fondo de la imagen hacia la izquierda

Selección del color blanco con la herramienta varita mágica (Y)

Separación de todos los vectores con relleno blanco.

Degradado

Haciendo continuación de la misma figura se expone en el ejemplo anterior, ya la imagen con calco interactivo por la máscara de recorte o en el caso de que ustedes hayan creado cualquier vector se le pueden añadir un degradado ya sea a dos tonos o múltiples, incluso con transparencia.

La herramienta Degradado o CTRL+F9 se activa cuando tenemos seleccionado lo que deseamos ponerle esta un degradado de colores, por default pone de negro a gris, seleccionamos el cuadrado de la herramienta que tiene el degradado y nuestros vectores igualan el degradado, las opciones del degradado nos permiten manipular si es lineal o radial, al igual que los colores del degradado.

Es muy fácil agregar o cambiar los colores del degradado, sólo abrimos la ventana de muestras y jalamos el color que queramos utilizar a la muestra del degradado, podemos poner más de un color.

La misma herramienta de Muestras nos da una opción de Abrir Biblioteca de muestras y existe una llamada Degradados el cual dando un simple clic nos cambia los vectores con el degradado seleccionado.

Muchos al principio se parten la cabeza al querer el degradado todos por igual ya que si sólo damos un clic el degradado se crea pero por cada vector, en caso de tener más de uno se ve la diferencia, si queremos que todos tengan el mismo sentido de degradado apretamos la tecla “G” y damos un clic para arrastrar el puntero y de esta manera le damos la dirección del degradado sin importar que existan varios vectores todos siguen el mismo sentido.

Como último punto en las opciones de Degradado hay dos barras, una de opacidad y otra de ubicación, si seleccionamos un color que en este caso es el negro se activan esas dos opciones, si el color negro le ponemos opacidad 0 este vuelve transparente esa parte del degradado, el cual se puede transparentar el fondo, muy útil en ciertas ocasiones y la ubicación es depende de donde queremos que abarque ese degradado.

Comandos y atajos de Ai

Estos comandos y atajos sirven para utilizar más rápido el programa, no pondré todos pero si los más utilizados a mi parecer, con el tiempo y conforme a las herramientas que se vayan subiendo de entradas se irán poniendo los demás.

A mi parecer es más cómodo si se trabaja con toda la pantalla completa, cuando practiquen y se acuerden de ciertas herramientas verán que es mucho más accesible de esta manera, apretando la tecla de “tabulación” desaparecen las herramientas y por lo tanto te deja más espacio para poder trabajar, para regresar las herramientas únicamente apretamos de nuevo la tecla de tabulación. 

Mesa de trabajo normal

Tecla de Tabulación

Mesa de trabajo sin herramientas

La tecla de tabulación sólo desaparece las herramientas pero si queremos disponer de toda la pantalla para trabajar se puede hacer con la tecla “F”, una vez nos da un espacio considerable, presionando por segunda vez desaparece las pestañas de arriba como de Archivo (File), Edición, etc, si la apretamos por tercera vez regresa a como estaba al principio, esta es a mi parecer es la manera más cómoda de trabajar ya que cuentas de todo tu monitor para trabajar y ver ciertos detalles.

Mesa de trabajo completa

Ya teniendo toda la pantalla a nuestra disposición la tecla más usada en Illustrator es la “p” ya que esta es la plumilla para vectorizar la cual ya expliqué un poco de cómo usarla en la entrada de Vectores Nodos yAncla.

Muchas veces queremos comenzar a vectorizar con el “Trazo” no con el relleno ya que este puede tapar con la ruta de algún nodo, podemos presionar la tecla Tabulación y después la tecla “X” que esta permite cambiar el color al trazo y relleno, una vez hecho eso podemos comenzar a trabajar con el trazo quitando el relleno y poniendo un color al trazo.

Herramienta Trazo-Relleno "X"

A veces uno al trabajar sólo quiere seleccionar ciertos nodos, vectores o trazos pero por error seleccionamos otros, de las teclas que más selecciono para que esto no me suceda o una manera de tener el fondo bloqueado es seleccionar lo que queramos bloquear y teclear Control+2, esto es lo mismo que si seleccionamos la tecla Objeto/Bloquear, de esta manera podemos seguir trabajando encima de esos vectores sin moverlos, si queremos desbloquear son con las teclas Control+Alt+2.

Si queremos bloquear ciertos cosas que vectorizamos del mismo tipo ya sea color de relleno o color de trazo, grosor de trazo, etc se puede utilizar la tecla “Y” esta selecciona todo lo similar de lo que seleccionamos, sería los mismos pasos que la explicación pasada sólo que seleccionando ciertas similitudes con la tecla “Y”.

En caso de querer bloquear todo y bloquearlo sería un procedimiento similar, sólo que con Control+A seleccionamos todo y si apretamos la tecla Control+2 bloqueamos todo.

La herramienta Agrupar se utiliza con los comandos Control+G, esto se usa en el caso de que ya acabamos con ciertos vectores y no queremos hacer cambios en ellos pero queremos mover juntos, si eres de los que trabajan por partes esta es una herramienta muy importante, recuerden que la tecla de selección “V” es la que trabaja en grupos, si utilizamos la tecla “A” seleccionará únicamente cierto vector o nodo.

Al agrupar ciertos vectores, imágenes o lo que tengamos en la mesa de trabajo también podemos dar un orden de poner en frente o detrás, con las teclas Control+0 se comienza a poner el vector detrás hacia delante pero lo hace vector por vector hacía en frente, lo mismo en el caso de querer mandar vectores hacia atrás con Control+9, si no queremos dar tantos clicks al enviar cosas en frente o detrás podemos agrupar hacer lo mismo pero con la tecla de Mayúsculas, “Control+Mayúsculas+0” en frente o “Control+Mayúsculas+9” detrás, o más sencillo dando clic derecho del mouse y en la opción Organizar y seleccionar la que queramos.

Ejemplo Organizar Frente

Otro atajo más utilizado cuando escondemos las herramientas y ponemos la pantalla completa es la Texto, se activa con la tecla “T”, podemos dar un clic y comenzar a escribir o después de apretar la tecla creamos un cuadro de texto para poder escribir, si queremos cambiar la fuente, trazo, traking, interlineado etc se muestra la herramienta de texto con Control+T dando coherencia a tecla de texto, a mi parecer es muy útil. En caso de querer ver la fuente tal como es podemos dar clic sobre el texto y nos aparecen más opciones, una de ellas es Fuente, nos muestra la fuente tal como es con su nombre, algo que también puede ayudar mucho a la hora de elegir.

Herramienta Carácter

Después de dar clikc derecho hay una opción muy interesante sobre la fuente, “Crear Contornos”, esta herramienta también es una de las más usadas, como su nombre lo dice, crea la fuente en contorno de nodos, en vez de vectorizar toda la fuente esta es una opción muy buena, podemos manipular el tamaño de esta como un vector, deformar entre muchas otras cosas sólo que al hacerla grande no nos da el puntaje de esta y entre más vectores tenga un archivo más va a pesar. El deformar una letra puede ser útil pero de eso ya hablaré en otra entrada por separada ya que en el ambiente tipográfico y editorial hay restricciones ya haciendo trabajos profesionales que tienen que ver con la ergonomía, pero mientras les sugiero practicar.

Ejemplo de texto con crear contornos, se ven los nodos de las letras.

Otra herramienta muy usada es la que aparece después de crear contornos, “Transformar” nos permite, mover a cierta medida, reflejar o como otros conocen Espejear, escalar, rotar, distorsionar, más que explicarles les propongo utilizarlas.

Ejemlo reflejar

La ventana de Color es simple, con la tecla F6, podemos aprendernos las telcas que queramos y siempre habrá una clave para saber los comandos, el mismo programa nos los da, en la pestaña Ventana nos da las opciones, las únicas que tienen atajos aparecen los comandos en la parte derecha, no sólo en la estaña Ventana, sino en las demás también, Objeto, Edición, Archivo, etc.

Gabriel Martínez Meave

Mexicano, ilustrador, caligráfico, tipógrafo y diseñador gráfico, mezcla todos estos conocimientos en sus trabajos y ha sido conocido principalmente por sus tipografías como Arcana, Darka, Integra, Neocodex, estas tipografías son el producto de un estudio de letras para la deformación y alteración de una manera estética con la dificultad de hacerlas a mano ya que él mismo relata que materiales como planillas de alfabetos transferibles de letras son muy caros y se acostumbró a dibujar a mano las letras y así fueron todas sus entregas, cosa que sorprendió a los maestros por transferirlas a mano hasta saberlas de memoria sin necesidad de copiarlas.

Ha sido seleccionado entre los 100 diseñadores emergentes internacionales más destacados que integran el compendio de diseño Area 2.

Tuvo una gran influencia por su maestro André Güter que fue su profesor en la escuela de Basilea Suiza donde también tomo cursos de cartel e ilustración.

Sin duda es uno de los mexicanos con mayor peso e importancia del país y no sólo es por sus trabajos que se pueden ver en empresas internacionales como Telcel, la tipografía que esta compañía usa para sus promocionales es Telcel Sans que actualmente se siguen usando.

A mi parecer hace lo que todo diseñador está obligado a hacer, juntar todas sus facilidades para lograr un buen trabajo y mejor si perfecciona todo lo que se puede, en los cursos que Meave da es normal ver que agarre un pedazo de cartón y tinta para hacer tipografía, su dominio sobre las tipografías es completo y su estilo de ilustración son buenas.

El libro salvaje, Juan Villoro
Meave (ilustración)

Diseño de personajes

Si quieren saber más o ver más trabajos de él pueden meterse a su página desde este link Meave.

Vectores, nodos y ancla (Ai)

En esta publicación explicaré las herramientas más usadas al menos por mí y que cuando las descubrí me ahorraron mucho tiempo y esfuerzo, es un adelanto grande a comparación de la publicación pasada sobre Illustrator ya que a veces carezco de tiempo, espero ayude.

La plumilla es la herramienta a mi parecer más usada por todos, se activa con la letra “p”, por medio de nodos se crean los vectores, cuando está activada y no se ha hecho ningún nodo el icono de la plumilla está acompañada de un asterisco que sirve para especificar eso, una vez dado el primer clic que se crea el primer nodo la plumilla se queda sin el asterisco.

Al dar el primer clic que se crea un nodo creamos otro en el lugar que necesitemos como en este ejemplo, los nodos pueden ser rectos o en curvas, esto varia depende a después de dar el primer clic “nodo” no soltamos el mouse y lo arrastramos hacia una dirección, de esta manera creamos un vector con curva.

En este caso se dio un clic que es el que aparece en la esquina inferior izquierda y después en el de la derecha, los puntos blancos son los nodos, la línea azul es referente a longitud de curva que este se le dio.

Lo mismo aparece cuando creamos otro nodo, depende que tanto arrastremos el mouse cuando creamos el nodo es la intensidad de la curva.

Nota importante: Si queremos vectores con ángulos exactos de 90° y 45° grados, el segundo nodo o los siguientes apretamos la tecla SHIFT que normalmente se encuentra arriba de Control ó Mayúsculas, en el caso de las curvas como las imágenes que estoy poniendo se crean formas circulares, no ovaladas, depende de donde se pongan los nodos se pueden crear círculos perfectos en caso de requerirlo, aunque para crear círculos se puede dar la tecla “L” y de igual manera manteniendo la tecla SHIT se crean círculos perfectos, en el caso de los cuadrados es la tecla “M”.

En el momento de terminar la figura que queramos el ícono de la plumilla cambia, se le agrega un círculo, esto quiere decir que los últimos nodos se juntarán y se cerrarán las curvas, yo recomiendo cerrarlo ya que al momento de trabajar con vectores no cerrados puede que no den los resultados requeridos

Así es como quedaría un vector de un círculo terminado, trabajar no sólo queda en esto, hay muchas maneras y opciones que el programa da, en caso de querer modificar un nodo en específico se puede hacer aunque la figura que creamos ya está terminada.

Como se explicó en la primera entrada, la herramienta de selección “V” selecciona un grupo ya sea de vectores, una figura o cualquier cosa que se agrupe en el programa, lo interesante es la herramienta de selección “A”, esta nos permite seleccionar algo en específico aunque este esté agrupado, en el caso de los vectores permite seleccionar un nodo en específico o el ancla, lo que nos permite hacer las curvas.

En este se seleccionó el nodo inferior con un clic, después se movió y quedó como resultado esta figura.

Con la misma herramienta se puede modificar el ancla, al momento de dar clic en un nodo las anclas se aparecen, si damos clic sin dejar de presionar en el ancla, especialmente en el círculo azul y arrastramos este mismo hacia algún lugar nos da una vista previa de cómo quedará el vector.

Se puede dar toda la longitud deseada pero hay que tomar en cuenta que tanto lo necesitamos, cómo resultado así es como queda.

La herramienta Trazo y Relleno (X)

Esta herramienta normalmente trabaja acompañada de la plumilla, esta se activa con la tecla “X” dar una vez esta tecla se activa Relleno, para activar el trazo sólo tenemos que teclear de nuevo la “X”.

Sirve para darle un color en específico al relleno de la figura creada por nodos o el trazo, darle un color al trazo sirve mucho como una guía al momento de crear figuras, en el caso de los ejemplos que usé fueron gris de relleno y azul para el trazo, se le puso un fondo a propósito para que tuviera armonía con los colores del blog.

Colores (Estilo de color de Google)

En esta publicación se da a conocer un resumen de una publicación sobre la manera adecuada de cómo utilizar los colores de acuerdo como lo hace Google, especialmente en el área web dividida en tres partes, paleta de color, aplicación de color UI (interfaz de usuario) y temas.

Paletade colores

Google sugiere el uso de 500 colores como primarios que ellos mismos usan para dispositivos Android, Web y IOS, estas combinaciones se trabajaron para que fueran armónicas, una ergonomía adecuada para la lectura, como la primer imagen muestra un ejemplo de ilustración o íconos.

La paleta de colores está disponible para Illustrator y Photoshop, se explicará cómo agregarlo, para descargar es necesario sólo dar clic en el siguiente enlace 

Esta es una muestra de la combinación que sugiere Google y como trabajan ellos mismos. En el ambiente WEB los colores se manejan por números, de igual manera cuando trabajamos en Illustrator y Photoshop en la opción Web o Flash, como el Índigo es #3F51B5, Negro #000000, Blanco #FFFFFF.

Para agregar la paleta de colores después de descargarlo necesitamos abrir los programas, en el caso de Illustrator debemos dirigirnos a la ventana Muestras ó Swatches y en la esquina superior derecha hay un ícono de opciones, seleccionamos cargar muestras, buscamos donde se descargó el archivo y seleccionamos los que tienen terminación .ase, después de eso nos abre ya la ventana de paleta de colores que descargamos, los pasos son los mismos en el caso de Photoshop. Si quieres ver las combinaciones puedes ir al sitio dando clic en este enlace.

Aplicación de colores UI

UI significa: Nombre de la interfaz de usuario utilizado principalmente para los dispositivos móviles, (teléfonos móvil, Tablets, etc.) para plantillas táctiles. La página recomienda usar sólo tres colores primarios, fuente, color de botón y color de selección y esto es lo adecuado ya que la saturación de color puede desorientar a quien lo usa en vez de hacerlo más fácil y accesible, aquí un ejemplo en color índigo.

En algunos Web se puede agregar otro color pero esto referente a web, en el caso del blog cuando uno ya accedió a una publicación el enlace se torna de otro color, pero hablamos de web no interfaz móvil.

Temas

Google trabaja sus temas como ejemplos Google+, Hangoust, entre otros más los cuales los colores que usa respeta los primarios que utiliza, los colores y cambios de colores se puede ver en el momento de seleccionar o poner el puntero sobre las opciones.

Tema principal, subtemas, jerarquías entre otros. Utiliza los colores principalmente en contrastes altos para dar ciertas importancias, en este ejemplo la pestaña o sitio donde se está ubicado, Inbox de color blanco, la pestaña principal de azul y el símbolo de opciones de azul oscuro así como el símbolo de búsqueda, las jerarquías también se encuentra en el tamaño de las letras, en este caso el nombre del mensaje, el día y con el empiezo del mensaje de color gris.

Themer

Otro ejemplo de los temas son los que existen en los celulares, hay una aplicación de Google llamada Themer donde te permite instalar distintos temas para tu celular, lo promocionan por si estás aburrido de tener el mismo tema que viene por default, si cuentas con un equipo Android y quieres ver los distintos temas así como los colores y manera de usarlo aquí puedes descargarlo.

Video promocional de Themer