• Inicio
  • Sobre mí
  • Glosario
  • Vitrina
  • Contacto
  • Contrátame
  • Publicidad

Mostrando entradas con la etiqueta Diseño. Mostrar todas las entradas
Mostrando entradas con la etiqueta Diseño. Mostrar todas las entradas

Vectorizar sin morir en el intento

Antes y después

Como lo prometido es deuda, este es un tutorial para ustedes -que mucho me han pedido, pa' que vean que si los escucho- para vectorizar imágenes. Trataré de hacerlo simple, como si nunca hubieras agarrado el Illustrator.

Yo estoy usando el Illustrator CS en inglés (ya hay nuevas versiones pero creo que de todos modos aplica este tutorialito).

Bien, supongamos que quieres vectorizar una foto de una chica bien sensual, y dá la casualidad que yo tengo una foto mía, que es lo mismo, así que en eso nos vamos a basar. No tiene que ser una super foto clarísima, lo importante es que tú puedas apreciar los rasgos para vectorizar. La que yo usé incluso esta toda pixeleada.

Foto original

Primero, abres un nuevo documento en Ilustrator, yo siempre lo abro en default que creo es una hoja tamaño carta, en fin, el tamaño a tus necesidades. Copias y pegas la imagen que quieres agregar o desde el menú File y en Place, con eso podrás examinar hasta poner tu foto en el área de trabajo.

Bien, ya tienes tu foto puesta, ahora lo mejor es que en donde administras las capas (Layers) bloquees esa capa para que de ahí no se te mueva y no rayes en ella.

Bloquear capa

Luego para empezar a vectorizar haces una nueva capa.

Crear capa

Tener la capa de la foto original bajo las otras es lo más práctico.

Ahora lo bueno, a vectorizar.

Ya teniendo seleccionada la capa nueva comenzamos a vectorizar, puedes empezar por donde quieras. Yo empezaré por el cabello.

Seleccionas la herramienta pluma (pen) y comienzas a dibujar las áreas con los tonos más claros, como los brillos. La pluma funciona como "uniendo puntos", luego de que los unas todos usas el gotero (eyedroper) y con el seleccionas un color de la foto para que el vector seleccionado se rellene de ese color. Eso te servirá para conservar colores originales.

Vectores claros

Luego ya teniendo dibujados todos los tonos claros, nos vamos a un segundo tono, más oscuro.

Y los dibujamos justo encima de los claros, solo que al terminar cada vector presionas Ctrl + [ eso hará que el vector más oscuro se vaya atrás de el claro. Si no te funciona esa combinación de teclas haces click con el botón derecho sobre el objeto y le pones Arrange y Send to Back. Así ira quedando cada tono más oscuro atrás de los que ya dibujaste.

Oscuro bajo claro

Y así te vas, vector por vector, y agregando más niveles tonales, cada vez un color más oscuro. Entre más tonos más trabajo, pero se verá genial.

Yo le dí al cabello 7 tonos y así queda:

Cabello terminado

NOTA: Puedes crear tantas capas como desees para separar tus vectores, yo prefiero agrupar por zonas, para no tener muchisimas capas. Uso por ejemplo una para el cabello, otra para la piel, otra para la cara (ojos, nariz, boca), pero cada quién hace las capas que quiera.

Terminamos con el cabello y creamos otra capa nueva, en esta haremos la piel de la cara. Quitamos la opcion de ver la capa del cabello para que no nos estorbe. Y cubrimos toda la zona de piel de la cara con un solo elemento, pasándonos un poquito por encima del cabello para que no queden huecos entre las 2 capas.

cara

Creamos otra capa más para hacer los ojos, las cejas, la boca y detallar la oreja. Mientras trabajas en una capa puedes, y recomiendo, hacer invisibles a las demás para ver la foto en el fondo y seguir usándola como guía. Puedes también, al terminar cada capa quitar la visibilidad de la foto para ver como va quedando todo.

No olvides ordenar las capas como deberían de ir para que se vean bien, arriba de todas el cabello, luego las facciones, y al último la zona de la cara. Para mover las capas solo las seleccionas con el botón izquierdo del mouse y las arrastras más arriba o abajo, según lo quieras.

Hasta ahora, con ojos y todo, llevaríamos algo así:

Casi terminado

¡Ya está casi terminado!

Ahora vamos a agregar más capas, pero esta vez atrás de las que ya tenemos, para el cuello y agregaremos unas sombras para detrás de la oreja y bajo el mentón. Y para rematar y dar contraste un enorme cuadro negro bajo todas las capas (con el rectangle tool).

Y aquí tenemos el resultado:

Terminado

NOTAS Y TIPS:
  • Cuando algo no te convenza hazlo de nuevo.
  • Para los que ya más o menos le saben pueden utilizar también la herramienta Warp, para transformar elementos.
  • Si no te gusta algo en la foto puedes darle forma tú mismo a algo completamente diferente (como yo lo hice en el mechón de cabello que sale por el cuello, los labios, quitar arrugas, papada, etcétera, etcétera...).

Ahora sí, lo pidió el pueblo y se los traje, un tutorial para vectorizar en Illustrator, como yo sé que no soy perfecta (aunque me falte poquito), habrán quedado dudas sin resolver. Aquí mismo me preguntan y veré que puedo hacer por ustedes.

Recuerden que no se nace sabiendo, así que paciencia, mucha paciencia.

¡A vectorizar!

La glossy-manía

Así le digo yo a eso que ha invadido la web.

No se si se hayan fijado pero de hace tiempo que en todos lados ponen logotipos con efecto brillosito (glossy en inglés). Hay también montones de sitios para hacerte botones glossy gratuitos. Y tutoriales también.

Ay que brillo!

Digo yo que es una moda.

O sea es lo "in".

En ese caso mi logo y mi header estan pero requete chafas... no me contesten.

No sé, no quiero ser de ese tipo de gente a la que le disgusta lo que le gusta a la mayoría pero ya hay suficientes logos de ese estilo ¿no?, se supone que el logo de tu web o blog debe ser original.

La verdad me tienen un poco aburrida esa clase de logos.

¡Abajo la glossymanía!

Iconos de feed simples

Acabo de hacer unos íconos de feed muy simples y los traje aquí para compartirlos con todos ustedes. Estan lejos de ser perfectos, ¡pero son gratis!.

Iconos de feed por kozmica

Puedes descargarlos desde aquí en una carpeta ZIP y usar el que te guste, son libres y cualquiera puede usarlos. Aunque no es obligatorio ponerme un enlace, los links de agradecimiento y menciones son bienvenidos.

:)

Link de descarga / Descárgate el paquetito completo de íconos.

Diccionario de diseñadores

Si eres diseñador o estas algo enterado de nuestro entorno, tal vez como a mí te causará gracia el simpático "diccionario" que encontré en Put* Desm*dre.

Acrobat Reader: Un maromero al que le gusta leer mucho.
Aerografía: Rama del diseño gráfico, especializada en la rotulación de aviones.
Advertising: Amenazar a un diseñador para que no cante en el área de trabajo.
Adobe: Casa productora de software que es fría en verano y cálida en invierno.
Ai: expresión de dolor de un diseñador herido
Aliasing: Ponerse apodos entre los diseñadores.
Background: Patio trasero de la casa de un diseñador
Bold: Detergente utilizado por los diseñadores.
Brush: acción de sonrojarse cuando te chulean un diseño
Caja de X: La caja de un tipo desconocido.
Churriguerezco: Diseño gráfico obtenido despues de echarse un churro.
Clipart: Acción de crear figuritas con clips.
Convertir a curvas: Estado de las diseñadoras cuando asisten mucho al gimnasio
Crop: diseño que es basura!
Diapositiva: Un día perfecto para Diseñar.
Dreamweaver: Diseñador poco productivo y somnoliento.
Estilógrafo: Diseñador gráfico de muy buen vestir.
Flash: Super héroe de la multimedia.
Fotografía digital: Acción errónea de poner el dedo en el lente de la cámara.
GIF: Imagen que se regala.
GIF animado: Imagen que se regala generalmente con escenas felices.
Godete: Expresión que usan los diseñadores gangosos cuando estan molestos.
Illustrator: Primo de Terminator y al que le gusta mucho dibujar.
Justificar: Acción de un diseñador de poner pretextos o explicaciones a una cagazón.
Layer: Nombre dado a aquel diseñador que suele decir muchas mentiras.
Pantone: Shampoo suave en gran variedad de colores.
Plotter: Apellido del mago de las impresiones en gran formato.
Quark Express: Graznido veloz.
Quick Mask: Acción de las diseñadoras de maquillarse a gran velocidad.
Saturación: Sucede cuando un diseñador tiene demasiado trabajo y poco tiempo
Screen: Película de terror preferida de algunos diseñadores.
Señalética: Señal de moral cuestionable.
Separación de color: Diseño gráfico con tendencias racistas.
Shape: dícese del manazo que se da a un diseñador en la nuca para que despierte o entienda algo
Shortcut: Pequeña cortada, que generalmente viene precedida de un bleeding.
Sprite: Rico refresco favorito entre muchos animadores.
Tipómetro: Diseñador desconocido de pequeña estatura.
Tipo móvil: Diseñador desconocido al que se le puede colocar en cualquier sitio.
Trade: acción de llegar después de la hora de entrada
Versalitas: Acto de mirar salas pequeñas.
Web: Estado de cansancio de un diseñador gráfico.
Webmaster: El más flojo de los diseñadores.
Zoom: sonido que produce un diseñador muy rápido.

Aún sigue, pero yo extraje los que más me gustaron, acá esta el diccionario original.

Amo el formato PNG!

La verdad si sabía que existía de hace mucho pero nunca consideré lo útil y fiel que era ese formato.

Siempre, por costumbre o economía de bytes, guardaba mis imágenes en formato JGP, en pocas ocasiones lo guardaba en GIF y pensaba que el que mejor se veía era el BMP.

Pués bien, me recomendaron hace poco utilizar el PNG para guardar mi header y me gustó mucho desde ahí.

Compañeros diseñadores, amigos estudiantes, colegas bloggers, digan NO al JPG y abran sus brazos para recibir con amor al PNG.