Hola amiguetes, tiempo para un tutorial muy especial, intentaré escribir el tutorial más detallado que hayais visto sobre cómo colorear un personaje en Photoshop al estilo SOSFactory. Lo postearé por entregas, irá acompañado de videos a tiempo real desde mi canal de Youtube y con voz de Anita Nagu (ya que mi inglés es pésimo), cuando hayamos terminado el tutorial ofreceré:

• Un PDF con el tutorial completo.
• Un video recopilatorio en alta resolución de todo el proceso con comentarios en español e inglés.
• El archivo en PSD en alta resolución bajo licencia creative commons (para uso personal y comercial).
• El diseño en PSD por capas, para que puedas investigar.
• Además de alguna acción de Photoshop y la paleta de colores usada.

Yo pensaba ofrecer el pack completo por unos 5-10US$… ya me contareis si os parece justo, pensad que mantener un blog como este no es gratis, además del tiempo y energía que se requiere. Sería una bonita manera de contribuir a que este blog siga ofreciendo contenido de calidad.

INDICE

• Día 1: descárgate el dibujo para empezar
• Día 2: extraemos las lineas
• Día 3: hacemos la plantilla de colores planos
• Día 4: pintando areas simples
• Día 5: pintando areas complejas: el pincel histórico

Día 1: descárgate el dibujo para empezar

A aquellos que ya hayais coloreado el personaje les sugiero que lo vuelvan a hacerlo siguiendo este tutorial, después compararemos las dos versiones y vereis cuanto habeis mejorado. Los que aún no lo hallais intentado y esteis interesados en seguir el tutorial pueden descargar la imagen aquí:

Y sin más, estamos listos para empezar
Nos vemos en un par de días, permaneced atentos y no olvideis haver tweet de este post si os gustó la iniciativa.

Día 2: extraemos las lineas

El mejor método para colorear un dibujo es extrayendo las lineas, porque nos da la posibilidad de colorearlas fácilmente como luego veremos. Descargarte el dibujo, abrelo en Photoshop y sigue estos pasos:

1. Abrimos nuestra imagen en Photoshop.
2. Vamos al panel Canales y hacemos CTRL+click en el canal azul.
3. Seleccionamos la Varita Mágica (W) y hacemos click derecho, elegimos Selección inversa.
4. Vamos a Editar> Copiar (CTRL+C) y luego Editar> pegar (CTRL+V) y ya tenemos las lineas separadas del fondo.
5. Nos ponemos en la capa "Background" y vamos a Imagen> Ajustes> Hue/saturación (CTRL+U) y ponemos la iluminación al +100 para quedarnos con una capa totálmente blanca.
6. Renombramos la capa nueva a "Lineart" y volvemos a hacer CTRL+U, esta vez ponemos la iluminanción a -100 para quedarnos con unas lineas complétamente negras.

Cómo ves el dibujo está ultralimpio porque lo dibujé digitalmente, en este tutorial nos centraremos sólo en el color, si estás interesado en obtener lineas limpias puedes visitar el post para aprender cómo entintar un dibujo con Photoshop.

Algunos consejos para conseguir un dibujo limpio.

• Lo mejor es entintar digitalmente, ya sea con una tabla digitalizadora o con las herramientas de dibujo vectorial.
• Trabaja siempre en alta resolución, cuanta más mejor, asegúrate al menos unos 2.500 x 2.500 píxeles.
• Si decides trabajar a partir de un dibujo en papel, escanéalo en escala de grises o conviértelo a escala de grises en Photoshop antes de extraer las líneas.
• Echa un ojo a este post acerca de cómo entintar un dibujo con Photoshop.

Resumen del día

Día 3: hacemos la plantilla de colores planos

Entre la capa "Background" y la capa "Lineart" creamos una nueva capa que llamaremos "Flat colors". Esta capa con colores planos tiene 2 misiones:

1. Elegir nuestro esquema de color.
2. Tener aisladas las diferentes areas para hacer selecciones rápidas con la varita mágica (W).

Para pintar nuestra plantilla usamos la Varita Mágica (W) sobre la capa "Lineart" (esta es una ventaja de tener unas lineas bien limpias), después expandimos la selección para que no nos deje bordes dentados (Select > Modify > Expand: 3px), elegimos un color y hacemos click con el bote de pintura (G) en la capa "Flat colors":

Algunos consejos para hacer una buena plantilla de colores planos:

• Aunque siempre estás a tiempo de hacer cambios, visualiza el diseño acabado e intenta definir tu esquema de color.
• Usa colores medios, ni muy saturados/desaturados, ni muy claros/oscuros.
• Renombra la capa cómo "Flat colors".
• Bloquea los píxeles de la imagen en la capa "Flat colors", así no pintarás en ella por accidente.

Resumen del día

Hoy hemos hecho una plantilla de colores planos para hacer selecciones rápidas y acelerar el flujo de trabajo, además de decidir nuestro esquema de color.

Día 4: pintando areas simples

Por fin tenemos nuestro diseño listo para colorear

Empezaremos por algo tan fácil como los ojos para explicar la técnica, conforme avancemos el tutorial se hará más complejo. Como hay mucha gente que no tienen una tabla Wacom, hoy usaré el ratón y las herramientas de diseño vectorial y degradados, cómo vereis el resultado es el mismo sólo que invertiremos más tiempo, el resto de días usaré mi Wacom para ir más rápido, si necesitais ayuda podeis echar un vistazo a este post sobre cómo dibujar con las herramientas de dibujo vectorial en Photoshop.

Antes de nada dejame explicarte un poco de teoría que te será muy útil a la hora de aplicar una iluminación correcta:

Como veis en la imagen he puesto la fuente de luz arriba y ligéramente a la izquierda, esto quiere decir que las zonas iluminadas estarán arriba y las sombras abajo. Por encima de las sombras añadiremos un poco de luz reflejada para dar volumen. No buscamos un acabado realista pero si que sea coherente.

Paso 1: sombras.

Creamos un nuevo grupo de capas que llamaremos "Eyes" y dentro creamos una nueva capa donde vamos a pintar las sombras, la llamamos "Shadows" y la ponemos en modo de fusión Multiply.

Hacemos una selección de los ojos usando la Varita Mágica (W) sobre nuestra capa de colores planos (Flat colors), volvemos a la capa "Shadows" y pintamos un contorno con el mismo color azul de fondo (#92b6e6), se ve más oscuro porque la capa está en modo Multiply. Como dijimos la luz viene de arriba, así que las sombras serán más gruesas por abajo.

TIP: las lineas punteadas de las selecciones a veces resultan un poco molestas, podemos esconderlas con CTRL+H.

Suavizamos el contorno que hemos creado, para eso usamos un pincel grueso con bordes suavizados. La clave es pintar desde lejos, para que el contorno se difumine pero no desaparezca. Cuando termines vuelve a poner la capa en modo Normal.

Los ojos son fáciles de hacer porque su forma es muy simple, por desgracia no todo es así de sencillo, para formas más compleja tendremos que aprender a usar el Pincel historia (eso lo veremos el próximo día).

Paso 2: luz.

Creamos una nueva capa por debajo de la capa "Shadows", que llamaremos "Lightness", donde haremos un degradado de blanco a transparente, desde arriba a la izquierda hasta abajo a la derecha. La clave es hacerlo suave, sin cubrir de blanco todo el ojo.

Paso 3: luz reflejada.

Ahora creamos luz reflejada para darle volumen al ojo, para esto creamos una nueva capa que llamaremos "Reflected light". Hacemos un contorno blanco que no cubra todo el area de la sombra, después difuminamos el contorno interior, pero esta vez usamos el borrador (E) con cuidado de no borrarlo del todo, sólo queremos que se haga un poco transparente.

Paso 4: pintamos pupilas.

Para pintar las pupilas del personaje creamos un nuevo grupo de capas llamado "Pupils"por encima de la capa "Lineart".

Pintaremos las pupilas en 3 capas como vemos en la imagen:

• Imagen 1: capa que llamaremos "Glow", creamos un circulo ligeramente ovalado y le aplicamos un gradiente de blanco a transparente, procuramos que el ovalo no quede completamente blanco si no con un poco de transparencia.
• Imagen 2: creamos una nueva capa que llamaremos "Glow 2", pintamos un gradiente circular con azul saturado (#10a4fa) y ponemos la capa en modo Linear Dodge.
• Imagen 3: creamos una nueva capa que llamaremos "Pupil", pintamos el mismo color azul algo como lo que ves en la imagen.
• Imagen FINAL: esto es lo que obtenemos al activar las 3 capas.

Paso 6: coloreamos las lineas.

Por último creamos una capa por encima de la capa "Lineart" que llamaremos "Color hold", esta capa la usaremos para colorear las lineas.

Hacemos CTRL+Click en el icono de la capa "Lineart" para hacer una selección de las lineas, y nos vamos a la capa "Color hold". Seleccionamos un color azul un poco más oscuro (#223171) que el que usamos para el globo ocular, así conseguimos que la linea se funda con el diseño pero todavía sea distinguible.

Resumen del día

Hoy hemos pintado una forma tan simple como los ojos de nuestro personaje, el próximo día pintaremos los dientes, al ser más complejo tendremos que aprender a usar el pincel historia.

Día 4: pintando areas complejas: el pincel histórico

Muy buenas amiguetes, mañana vuelo hacia Berlín y me tomaré algunos días de descanso pero antes de salir quería postear el último video del Tutorial de coloreado con Photoshop más detallado del mundo.

Por ahora no hay tutorial, sólo el video donde puedes ver como coloreo zonas más complejas gracias a nuestro buen amigo el Pincel Histórico, puse mucho cuidado para hacerlo lo más sencillo posible, con suerte entedereis como funciona por vosotros mismos, de todas maneras postearé el tutorial en los próximos días, hasta entonces disfrutad del video.

Saludos y féliz año nuevo!!!

Hola amiguetes, por fin Viernes!! Estoy preparandome para mi vuelo mensual a Berlin pero antes de partir quería mostrarle algunas imágenes de un proyecto en el que estuve trabajando últimamente, se trata de unos diseños de personajes que hice para un sitio de esos en los que se busca pareja, amistad o lo que surja

Aquí podeis ver algunos de los personajes, espero que os gusten:

Que tengais un buen fin de semana!!!
Nos vemos la semana que viene con un nuevo tutorial.

Tiempo para otro ejercicio, esta vez vamos a practicar nuestro color digital en Photoshop sobre un dibujo profesional hecho por SOSFactory. Si te animas a colorearlo mándame por email con un JPG del trabajo final, si te interesa puedo postearlo en este blog y darte algunos consejos para mejorar tu técnica.

Aquí te puedes descargar las lineas en alta resolución en formato PSD del personaje para que puedas practicar:

Os doy unos días para que lo intenteis, después ofreceré el diseño con el color final por capas para que lo descargueis de forma gratuita, por un lado podreis investigar cómo lo hice y por otro podeis usarlo en vuestros diseños.

Imágenes de los usuarios

Algunos tutoriales de apoyo

Tutorial sobre diseño de mascota en Photoshop para Smashing Magazine

Tutorial sobre diseño de personajes en Photoshop para PSDTuts

Tutorial sobre diseño de personaje en Photoshop para PSDTuts (previo pago)

Ilustración vectorial con Illustrator

El diseño de mascotas para web es una de mis especialidades, en los últimos años he diseñado docenas de mascotas corporativas para web, el cliente suele quedar bastante satisfecho con el diseño pero después no sabe cómo sacarle el máximo partido.

A veces tienen que usarlas a tamaños muy pequeños, otras no están bien integradas con el contenido, muchas veces modifican el diseño con desastrosas consecuencias, otras veces son demasiado agresivos en la compresión de la imagen… y en muchos casos no se hace un uso real de los diseños.

Puntos a tener en cuenta para sacar el máximo partido a tu mascota.

• Antes de nada pregúntate si realmente necesitas una mascota, ¿es adecuado para tu público objetivo?.
• Planifica tu web para sacar el máximo partido a tu mascota.
• Recuerda que cuanto más grande uses la ilustración (dentro de lo razonable) más bonita se verá.
• Deja márgenes alrededor de la ilustración para que el diseño respire.
• Haz que la mascota interactue con la web, se creativo.
• Aplica tus colores corporativos en la mascota.
• Diseña una mascota versátil que puedas usar para banners, avatares, camisetas, o para tu página "about" (acerca de… ).
• Elige un concepto que vaya acorde con tus valores corporativos.
• Optimiza el peso de la ilustración, guarda como JPG al 60%.
• Si tienes que hacer posteriores modificaciones pídeselo al autor del diseño.
• Pide los diseños en alta resolución (hasta 7000×7000px) o en formato vectorial, así podrás imprimir cualquier tamaño que necesites.
• Observa si tu diseño cumple los principios básicos a la hora de diseñar una mascota.

Características de una buena mascota

• Memorable, tiene que causar impacto.
• Fácil de recordar, debe dejar huella en la memoria del observador.
• Debe ser único, debe ser fácil de discriminar respecto a los competidores.
• Atractiva, el personaje debe ser atractivo para el públcio objetivo.
• Icónico, el personaje debe representar los valores corporativos de la marca.
• Funcional, debe funcionar en banners, en el encabezado de la web, en el logo.

Maneras efectivas de integrar diseños de personajes en la web.

La utilización de la mascota integrada en el logotipo es la forma más común de integrar al personaje, así asociamos el personaje a la marca, es una de las maneras más efectivas de usar una mascota.

Podemos integrar la mascota de forma muy efectiva usándola como icono o integrada en los botones, podemos usarlo en el estado "over" de nuestros botones y animarlo en Flash:

Una de las maneras más efectivas consiste en usar la ilustración a todo el ancho de la web, sacrificas mucho espacio pero consigues un gran impacto visual. La web de John Cow era un buen ejemplo, lástima que estén reduciendo cada vez más el tamaño de la ilustración en lugar de optimizar el espacio restante.

No necesariamente tenemos que usar la mascota en el encabezado de la web, también podemos usarla para resaltar determinados elementos del diseño:

Y para terminar algunos banners con diseños de personajes:

Paypal es el sistema de pagos online estandar, tanto para comprar como para vender.

Es muy cómodo, es instantaneo y es seguro, pero es caro. Nos cuesta hasta un 3.4% del dinero recibido dependiendo del país donde vivas, además de un 2.5% por convertir el dinero a tu moneda local, así que puedes pagar hasta 600US$ por cada 10.000US$ que recibes.

Consejos para ahorrar dinero con Paypal

• Usa una cuenta personal en lugar de las profesionales, no tienen tasas pero tienen muchas limitaciones a la hora de mover dinero.
• Retira tus US$ cuando la moneda esté fuerte.
• Envía tus pagos como transacción personal en lugar de como compra, pagarás unos centimos a cambio el receptor no pagará nada.
• Envía tus pagos usando la opción de pago masico ("mass pay"), pagarás hasta un máximo de 1US$ pero el receptor lo recibirá gratis.
• Usa sistemas de banca online más baratos (ver más abajo).
• Revisa tu volumen mensual de ventas para acceder a mejoras en las tasas:

Money Bookers

Ventaja:

• Llega a algunos países donde Paypal no lo hace.
• Es muy barato:
• Enviar dinero cuesta un máximo de 0.75US$.
• Recibir dinero es gratis.
• Retirar dinero cuesta un máximo de 5.24US$.
• La conversión a tu moneda local es del 2%.

Desventajas:

• No está tan extendido, sobra decir que imponer un sistema de pago desconocido al cliente es darle una razón para que contrate a otro diseñador, para retrasar el encargo o para que el cliente no vuelva a contratarnos.
• Dicen tener soporte para casi cualquier idioma, pero se limita a su web, el servicio de atención al cliente sólo usa inglés.

Epassporte

Ventaja:

• Te ofrecen una tarjeta de crédito Visa virtual (sólo para sitios online) gratis.
• Está bastante extendido para transacciones de contenido adulto.
• Es muy barato:
• Enviar dinero cuesta entre 0.30-1US$ por envío.
• Recibir dinero es gratis.
• Retirar dinero cuesta 3US$ para residentes en EEUU y 50US$ para los europeos.

Desventajas:

• Este sistema está muy poco extendido.
• Su web es bastante confusa y difícil de navegar.
• El servicio de atención al cliente es bastante malo.
• Para retirar tu dinero a cuentas europeas tienes que pagar 50US$, además tienes que solicitar que hagan la transferencia en tu nombre lo que suele tardar muchísimo (la última vez tardaron más de un mes).

Western Union

Ventajas:

• Es más barato que Paypal.
• Llega a casi a muchos países donde Paypal no llega.

Desventajas:

• Es más caro que Money Bookers y Epassporte.
• No es tan instantaneo como el resto de sistemas de pago online.
• Tienes que desplazarte a las oficinas, hacer colas y rellenar formularios. Tenemos la opción online pero es bastante más cara.

Luchando contra la devaluación del US$

Los trabajadores de fuera de los Estados Unidos tenemos otro problema adicional que es la devaluación del US$, moneda en la que se realizan la mayoría de transacciones online.

Lo ideal sería retirar nuestros US$ desde Paypal, Money Bookers o cualquier otro sistema que uses hasta una cuenta bancaria local y esperar a que se revalorice. Así tenemos nuestro dinero seguro y a mano en caso de que lo necesitemos pero me temo que no importa que sistema uses que no puedes retirar tu dinero en otra moneda que no sea la de tu país.

Así que o bien:

• Gastas los US$ en tiendas de los EEUU
• Mantienes los US$ en tu banco virtual hasta que el US$ se revalorice, lo que puede tardar meses, incluso años.
• Retiras tus US$ a tu banco local con la consecuente perdida de dinero.
• Creas una cuenta bancaria en los EEUU donde transfieres tus US$, lo que no es muy práctico, quizás nisiquiera sea posible.

Ninguna de estas alternativas son buenas, pero tenemos otra opción que vamos a ver a continuación.

Cuentas bancarias multidivisa

La única manera de conservar tus US$ en una cuenta bancaria de fuera de los EEUU es abrir una cuenta multidivisa en tu banco local. En realidad son dos cuentas bancarias asociadas, una en US$ y otra en la moneda de tu país y funcionan como cualquier cuenta bancaria.

Ventajas:

• Suelen ser bastante baratas, sólo cobran una comisión por recibir dinero que no suele superar los 10US$ (consulta los bancos de tu país).
• Tienes la seguridad y garantías de tener el dinero en un banco local.
• Puedes conservar tus US$ hasta que se revaloricen.
• Puedes convertir a € cuando lo necesites de forma instantanea.

Desventajas:

• Las transferencias internacionales suelen tardar 3-4 días.
• Necesitas mucha más información para realizar una transferencia.

Conclusión

Lo mejor que puedes hacer es familiarizarte con cada uno de los sistemas de pago anteriormente citados y ofrecer al cliente varias opciones ordenadas por orden de preferencia, en mi lugar sería como sigue:

• Mi primera opción sería una transferencia en US$ a mi cuenta bancaria multidivisas.
• Si el cliente tiene prisa o la cantidad es muy pequeña ofrecería la opción de usar Money Bookers.
• En caso de que el cliente no tenga cuenta en Money Bookers y peligre el encargo ofrecería Paypal.
• En caso de que Paypal no esté disponible en su país usaría Western Union.
• Epassporte lo usaría sólo para recibir pagos de trabajos con contenido adulto, en caso de que trabajara para esa industria.

La teoría dice que un buen logotipo tiene que ser simple, limpio, económico, versátil, etc, etc. Es un principio muy acertado, ¿pero sigue vigente?

En mi opinión es parcialmente obsoleto, el avance de las técnicas de impresión, la evolución del propio consumidor sobrecargado de mensajes publicitarios y la evolución de los medios de comunicación (Internet, la Televisión, la telefonía móvil, la industria del videojuego…), ha liberado al diseñador de muchas restricciones.

Don´t decorate, comunicate

El principio "don´t decorate, communicate" (no decores, comunica) viene a decir que debemos anteponer el mensaje en sí mismo, a sus aspectos estéticos, aunque sin dejarlos de lado. Creo que una versión más fiel a su espíritu sería "primero comunica, luego decora", que es lo que realmente viene a decir.

Aplicando este principio al diseño corporativo tendríamos dos extremos (según mi propia terminología):

• Los que siguen el principio de simplicidad: logos de texto (Paypal), logos basados en iniciales (IBM), logos con elemenos gráficos, logos icónicos…
• Los que no lo siguen: logos ilustrativos, los que a mí me gusta diseñar.

El arte de decorar

Si conoces mi trabajo en SOSFactory sabrás que llevo esta corriente al extremo, mis logotipos tienen degradados, muchos colores, elementos ilustrativos, a veces incluso personajes complejos. Normalmente diseño para web, así que tengo mucha más libertad a la hora de crear; por otro lado mis logotipos no son tan versátiles, aunque como veremos luego este problema se puede solucionar adaptando el logo a otros medios.

Ventajas de los logos ilustrativos:

1. Tienen mayor impacto visual a grandes tamaños.
2. Mayor diferenciación, son más difíciles de imitar o de confundir con otras marcas.
3. Más efectivos para determinado tipo de consumidor (ej: niños), industria (ej: videojuegos, ropa) ó medio (ej: internet)
4. La "absorción" del logo por parte del consumidor es más lenta pero más duradera.
5. La venta de merchandising con nuestro logo es más fácil.
6. Crea dependencia entre el diseñador y la marca (esto es "bueno" para el diseñador).

Desventajas de los logotipos ilustrativos

1. Pierden efectividad a tamaños pequeños o a grandes distancias.
2. Mayor coste de producción (aunque cada vez se puede imprimir más barato).
3. Para identificar la marca se necesita más tiempo de exposición.
4. Más difícil de registrar como marca.
5. El rediseño es más costoso.
6. Crea dependencia entre el diseñador y la marca (malo para la marca).

La adaptación al medio de publicación

Podemos solventar la mayoría de estos puntos negativos mediante la adaptación del logo ilustrativo a los diferentes medios y tamaños. Obviamente esto requiere más tiempo lo que significa una mayor inversión.

Así por un lado tenemos una versión ilustrativa para su uso en pantalla donde por regla general el tamaño de aplicación suele ser más grande (web, tv, telefonía) y por otro una adaptación más simple para posibles aplicaciones impresas o para el uso en tamaños más pequeños.

Un buen kit corporativo constaría de:

• Versiones de mapas de bits en JPG, PNG, GIF, TIFF, PSD y archivos vectoriales AI, EPS.
• Versiones del logotipo en alta y baja resolución.
• Versiones del logotipo en RBG y CMYK.
• Adaptación del logotipo con y sin elementos ilustrativos.
• Adaptación del logo a 1, 2 y 3 colores, a todo color y en escala de grises.
• Adatación del logo sobre fondo oscuro y sobre fondo claro.

Diferentes adaptaciones del mismo logotipo: a todo color, 1 color, 3 colores, escala de grises.

Para que no pierdas el tiempo mirando blogs y posts que no merecen la pena, te traigo una recopilación de los mejores artículos de la blogosfera publicados en el mes de Octubre. Si quieres sugerir algún enlace, por favor usa el formulario de contacto, especialmente para si conoces sitios con contenido en español, que parece que es bastante más difícil de encontrar.

Por ahora me temo que sólo habrá contenido en Inglés:

News

• Photoshop CS5 is coming!
• Iphone: Pantone In Your Pocket

Fun stuff

• 30 Stunning Apple Concept Designs
• 25 Photomanipulation mistakes
• The Bizarre Fly Art
• Color pencil creatures
• 80+ Photo Manipulations Art to Ignite Your Creativity

Inspiration

• Craig Mullins
• Highside Lab´s
• Janoliehoek
• Jthreeconcepts

Photoshop Tutorials

• Design a Vintage Radio Icon in Photoshop
• Create a Shiny Earth with Photoshop 3D Layers
• Create a Steam Powered Typographic Treatment – Part I
• 7 Black and White Photoshop Conversion Techniques
• How to Create a Rusty Texture in Photoshop

Vector Tutorials

• Quick and effective vector coloring with Flash
• Create a Happy Sun Character
• A Beginners Guide to Digital Textile Printing s

Photography Tutorials

• An Introduction to Using Strobes in Your Photography

Web Design Usability

• Restraint web usability principle
• 10 tools to test the usability of your website
• Most common fonts
• Font embedding services
• Analysis of the Amazon Shopping Experience

Web design: CSS

• Mastering CSS Coding: Getting Started

Web design Showcase

• Clean and simple web design
• Free Slideshow, Gallery And Lightboxes Scripts
• Inspirational examples of pricing pages
• Creative Uses of Illustration in Website Design

Freelancing Tips

• Random questions from a newbie illustrator
• 5 Reasons Freelancers Can’t Ignore Twitter
• Getting Freelance Work: The Hacker Technique
• Freelance Contracts: Do’s And Don’ts

De vez en cuando recibo emails muy interesantes de diseñadores o ilustradores noveles que intentan abrirse un hueco en esta industria tan compleja y que no saben por donde empezar, me piden ayuda y yo por supuesto intento ayudarles. Se me ocurrió que podría publicar estos emails, así todos sacaríamos partido de esas dudas.

Así que estrenamos nueva sección

Empezaré con el caso de Evangelina, precioso nombre, por cierto. Eva es argentina pero reside en los Estados Unidos y quiere dedicarse a la ilustración pero tiene muchas dudas y prejuicios que voy a intentar aclarar, al menos orientarla para dé sus primeros pasos. Os comento las partes más interesantes de ese email:

Vivo en los Estados Unidos (soy de Argentina) y he escrito a mucha gente con el corazón en las manos, pero nadie encontró en su corazón el deseo de ayudarme. Creo que es porque temen que llegue a ser muy buena y podría robarles su clientela si me cuentan su "receta secreta"…

Empecemos con las buenas noticias, vives en los USA, esto te va a dar muchas oportunidades que no tendrías en Argentina; además eres optimista y realmente deseas progresar. Así que dominas el inglés y tienes ganas, enhorabuena!, tienes los requisitos mínimos para empezar en esta difícil carrera.

Ahora las malas noticias

No es bueno esperar ayuda de la gente, no me mal interpretes, hay mucha gente que estará dispuesta a ayudarte de manera altruista pero no será la norma general, más por falta de tiempo o energía que por mala fe. Por eso tienes que mentalizarte de que cada triunfo ó fracaso que consigas dependerá al 99% de ti misma, toda ayuda externa es bienvenida, pero no cuentes con ella.

Olvídate de las "recetas secretas", nadie te las va a enseñar porque simplemente no existen. La receta secreta es TRABAJO DURO a lo largo de mucho tiempo, aplicado a muchas facetas: marketing, comunicación interpersonal, conocimientos técnicos y prácticos… Además ten en cuenta que lo que vale para mí posiblemente no valga para ti, tendrás que encontrar tu propio camino.

Esto es una buena pintura digital de Evangelina.

Soy una auténtica novata. Y me gustaría empezar a trabajar como freelance. Tengo la habilidad pero no educación formal…

Antes de lanzarte como freelance, te recomendaría que intentes trabajar en alguna agencia de diseño a modo de toma de contacto. En mi caso estuve 6 meses en una agencia local a tiempo parcial (4 horas al día), el sueldo era pésimo y fueron los peores meses de mi vida laboral, pero me aclaró muchas questiones y aprendí muchas cosas.

No necesitas tener estudios formales para ser buena en tu trabajo, puede que te cueste un poco más, así que tendrás que suplir tu falta de formación con ganas, y con un buen portafolio. Te recomiendo que leas un post que escribí recientemente acerca de las ventajas formación autodidacta vs formal.

… pero creo que puedo crear arte de calidad.

Esta es tu principal debilidad, el diseño tiene un aspecto artístico pero no es arte, tiene una función y unas reglas, una meta objetiva mientras que el arte no. No te pagan por recrear TÚ visión del mundo, te pagan por recrear SU visión del mundo para un público determinado.

En otras palabras, el artista crea sin restricciones; el diseñador o ilustrador por encargo se atiene a unas reglas. Así que:

• ¿Quieres ser artista o quieres diseñar/ilustrar por encargo?
• ¿Quieres tener una estabilidad económica y crear con restricciones ó no tenerla (a menos que consigas llegar a la élite) pero crear libremente?.

Si quieres ser artista me temo que no te puedo ayudar, si quieres trabajar por encargo entonces sigue leyendo

Muy bonito, pero ¿hay un mercado para esto?.

Planeo hacer un montón de cosas, pero tengo que preparar my pagina web y mi portafolio, aún no lo he hecho.

Tener un plan es el primer objetivo, así que redacta una lista de esas tareas, ordénalas por orden de prioridad y cúmplelas.

Como te decía en el anterior punto estás confundiendo conceptos, tu portafolio es muy artístico, no hay una intencionalidad comercial, por lo que vas a tener que cambiar radicalmente la dirección de tu trabajo. Algunos consejos para orientar tu portafolio a posibles clientes:

1. Trabaja al menos 8 horas al día hasta que consigas un producto de calidad. Si no hay un buen producto nadie lo comprará.
2. Ya tienes tu portafolio en Deviantart. El próximo objetivo es publicar tu propia web.
3. Elige tu punto fuerte y busca una posible aplicación comercial. Si los paisajes son tu punto fuerte, en lugar de hacer pinturas costumbristas, ¿por qué no lo orientas al mundo de los videojuegos o del cine? Si te gustan los retratos, ¿por qué no te dedicas a hacer caricaturas por encargo?.
4. Descubre los artistas de referencia dentro de tu area de trabajo y estúdialos. ¿Qué los hace diferentes?, ¿por qué son tan buenos?, ¿qué tipo de portafolio tienen?, ¿a quién va orientado? Intenta descubrir su plan de marketing.
5. Haz una lista de posibles cliente objetivo, y ponte en su lugar. ¿Si fueras un cliente qué tipo de portafolio querrías ver?, ¿qué tipo de trabajos te interesarían?.
6. No te olvides de los requisitos mínimos para trabajar por internet: Inglés, Paypal y mucha promoción.
7. Sigue trabajando al menos 8 horas al día hasta que consigas un producto de calidad. Si no hay un buen producto nadie lo comprará.

¿Qué pasa si un cliente potencial mira mi portafolio y le gusta? Me llama y me pregunta, ¿Cuánto cobras? ¿Cuánto debería cobrarle?… ¿Qué debería responder? Probablemente lo que me retiene a la hora de hacer dinero es el miedo de no saber qué decir a los clientes.

Piensa que todos hemos pasado por esto y todos hemos aprendido a base de errores, confia en ti misma incluso cuando no te salga bien, piensa que has descubierto una manera de NO hacer las cosas, si te equivoques muchas veces, tendrás un bonito catálogo de errores que no deberás repetir.

Sé honesta, cuéntale al cliente que no tienes experiencia pero que tienes muchas ganas de hacer las cosas bien, y que simplemente te diga cuanto quiere invertir. Sé realista y no esperes que te paguen una fortuna, a veces ni siquiera te pagarán, tómatelo como un aprendizaje semi-pagado. Con el tiempo, si haces las cosas bien, tendrás un pago de acuerdo a tu capacidad.

Concept artist Feng Zhu. Esto si tiene mercado.

He investigado en la web acerca de cómo dan presupuestos otra gente, pero la mayoría de artistas no publican sus precios, piden que se le contacte por email o teléfono antes de dar un presupuesto.

Los diseñadores con mucha demanda no suelen anunciar sus precios porque les resta margen de negociación. Calculan sus presupuestos en base a la capacidad del cliente y a sus necesidades, te aconsejo que leas este post acerca de los pros y contras de públicar tus precios. Sobra decir que para llegar a este nivel aun te queda mucho camino por recorrer, por ahora no te preocupes demasiado acerca de este tema.

Algunas consideraciones finales.

Bueno Eva, en primer lugar muchas gracias por prestarte a compartir tus preocupaciones, estoy seguro que has ayudado a mucha gente. Espero no haber sido demasiado duro y espero que mis palabras te haya sido de utilidad, si tienes alguna duda sólo tienes que usar los comentarios.

Ya para finalizar me gustaría animarte a que sigas trabajando, no va a ser fácil, habrá momentos para llorar, para la desilusión, te deprimirás y pensarás que no vas a ningún lado… pero no te pares, sigue adelante con pasión y energía, porque encontrar tu camino es cuestión de tiempo. Un día te llevarás una sonrisa a la cama y caerás en la cuenta de que estás cumpliendo tu sueño.

Y cuando seas famosa acuérdate de los pobres
Saludos!!!

¿Y tú, también te encuentras perdido?

Si eres diseñador novél y tienes algunas dudas, contáctame e intentaré resolverlas dentro de mis posibilidades, los emails más interesantes los publicaré en esta sección.

Si eres diseñador seguramente tienes un montón de gráficos, webs, loops de sonido, archivos de Flash… que has hecho en tu tiempo libre, son encargos fallidos o experimentos, y no le sacas partido. Podrías vender los derechos de reproducción de esos diseños a precios muy bajos (diseños de stock) pero de por vida. Necesitarías una cantidad bastante grande de diseños para vivir de estos ingresos, pero serían un buen ingreso adicional.

Imagínate que haces 100US$ al mes, serían 1.200US$ al año… lo suficiente para comprarte un buen ordenador.

¿Ventajas de vender diseños en stock?

1. Son ingresos pasivo, esto quiere decir que trabajas una vez para crear el recurso y te beneficias de él de por vida.
2. Es una red social, con lo que conoces a otros diseñadores. El hecho de que otros diseñadores usen tus diseños puede darte a conocer.
3. Es una prueba de mercado. Según las ventas puedes calibrar que estilo o producto tiene más éxito.

¿Desventajas de vender diseños en stock?

1. Como diseñador que trabaja por encargo, quizás podría ser contraproducente para mi negocio.
2. Estás poniendo tus recursos en manos de la competencia.
3. Tus clientes pueden optar por imágenes de stock en lugar de trabajo hecho por encargo. En mi caso debería vender 300 veces cada diseño para igualar el ingreso de un encargo.

¿Donde puedes vender tus diseños?

Mi web preferida son las de la red Envato, creadora de webs tan buenas como PSDTuts, Vectortuts, AETuts, Nettuts… tienen en marcha los siguientes mercados de diseños de stock:

• Graphic River es un mercado online para diseñadores gráficos o web donde se compran y venden gráficos en formato vectorial o bitmaps (Photoshop).
• ActiveDen mercado de archivos para Flash
• Theme Forest plantillas html, WordPress, Joomla, Flash Sites
  PSD Templates, Javascript, PHP Scripts…
• Video Hibe lo mismo para archivos de video.
• Audio Jungle igualmente para archivos de audio.

¿Cómo funciona?

Simplemente te creas una cuenta, haces un test bastante sencillo para mostrar que has entendido las instrucciones de uso de la web y ya estás listo para subir tus gráficos.

La misma web pone los precios, bastante asequibles y gestiona todo el proceso.

¿Cuánto puedes ganar?

Si como yo, vendes tus gráficos exclusivamente en Graphic River te llevas el 40% de las ventas, lo que es un porcentaje bastante bueno en comparación con otras webs del mismo estilo. Si no quieres darle la exclusiva de tus diseños, entonces te llevas el 20% de las ventas.

Esta web lleva poco tiempo andando pero parece ser tan efectiva como el resto de su red; por ejemplo en Flash Den algunos usuarios ya han hecho miles de dolares vendiendo recursos en Flash.

Además tienes un programa de afiliados, una vez te creas una cuenta tienes un link como este: http://videohive.net?ref=SOSFactory si alguien llega a su web mediante este link y deposita dinero, me llevaría un porcentaje de dicho ingreso.

Mi recomendación

Como negocio marginal no me parece mala idea, puedes hacer algo de dinero fácil, siempre y cuando no descubras todas tus cartas.

Yo vendería trabajos antiguo, diseños que ya no uses, encargos malogrados o hechos en tu tiempo libre, experimentos… y reservaría los de alta calidad para mis propios clientes.

Tiempo para un tutorial, esta vez menos detallado y bastante más avanzado. Se trata de algo completamente diferente al estilo cartoon que suelo hacer, es una ilustración más realista de un luchador de MMA (artes marciales mixtas) que pinté para un logotipo destinado a la impresión en camisetas de una nueva marca llamada Temper Tamtrum.

Tengo que admitir que no quedé completamente satisfecho, el proceso fue un poco caótico, y tardé muchísimas horas más de las esperadas. Después de acelerar el video x10 todavía duraba 1 hora, así que tuve acelerarlo x20 para que entratara en Youtube:

Y ahora vamos a explicar cómo suelo trabajar cuando me piden este tipo de ilustraciones. Como decía antes más que un tutorial es una serie de pasos descritos brevemente, se haría eterno hacer un tutorial detallado sobre este tema.

PASO 1: Referencias

Busqué algunas referencias para planificar la pose, cuando estás tan acostumbrado al estilo cartoon tienes a simplificar demasiado las formas. Después de terminar el encargo me doy cuenta que tenía que haber insistido más en esta parte… lección aprendida!!

PASO 2: Boceto

Cuando pinto en estilo más realista el boceto no tiene que ser demasiado detallado ya que al final lo quitaré. Como puedes ver el dibujo es bastante básico, usé Photoshop para hacer un collage de dibujos previos a modo de plantilla.

PASO 3: Aislamos colores planos

Pongo el boceto en modo Multiplicar y creo una capa por debajo donde pinto con colores planos de intensidad media cada area del personaje para poder hacer selecciones rápidas.

PASO 4: Pintamos los volúmenes básicos

Añado una capa por encima y voy dando pasadas con colores más oscuros para darle profundidad a los volúmenes. En cada pasada quito un poco de opacidad a la capa del boceto, hasta que llega a desaparecer.

PASO 5: Añadimos un poco de luz

Añado una capa por debajo de las sombras donde pinto con un color más claro.

PASO 6: Añado la luz reflejada

Añado una nueva capa donde pinto la luz reflejada en la piel. Esta iluminación ahora se ve muy suave pero al final la pongo en modo Linear Dodge para que sea más fuerte.

PASO 7: Suavizo los volúmenes

Ya he terminado el boceto de color, ahora aplano todas las capas menos la de luz reflejada y voy mezclando y suavizando los degradados, añado cada vez más detalle. Para esto desactivo la capa dondé pinte la luz reflejada, fíjate como se ve cuando la vuelvo a activar y lo pongo en modo Linear Dodge:

PASO 8: Limpio y añado volumen

Sigo suavizando los degradados, corrijo la anatomía, añado tonos más oscuros y más claros para reforzar los volúmenes.

PASO 9: Detalles

Para las ropas sigo el mismo procedimiento, primero colores planos de las formas generales y voy añadiendo volumen y detalles.

Para el pelo añado capas en diferentes modo de fusión (Screen para los brillos y Linear Dodge para el mechón de pelo rubio) y el Smudge tool para fusionar los tonos.

Para la sangre uso una capa en modo multiplicar con un rojo saturado al máximo.

PASO 10: Cambio de planes

El cliente hizo algunos cambios:

Los pantalones me dieron un poco de problema, a mí me gustaba más el primero pero el cliente eligió el segundo.

Igual para la cara, a mí me gustaba la primera pero eligió la segunda.

PASO 11: Diseño del Logotipo

Este es el logotipo final, también hice una version vectorial más simple para determinados casos:

¿Alguna pregunta?

Supongo que muchos, jeje, si necesitas que describa algunos de los pasos sólo tienes que dejar un comentario.