Deviantart Youtube Twitter Facebook My feed Feed directly to your inbox

Learn to draw in Photoshop with vectorial tools

6 Mayo 2007

Photoshop, Tutoriales

Learn to draw in Photoshop with vectorial tools
Choose your language / Elige tu idioma:englishespañol

Este es un tutorial para usuarios principiantes de Photoshop así que explicaremos todo muy bien detallado, aprenderemos a usar las herramientas de dibujo vectorial de Photoshop usando nuestro ratón… por ahora no necesitamos tabla digitalizadora.

Para empezar lo mejor es tener un buen boceto sobre papel, el tamaño del dibujo no tiene que ser muy grande ya que al final lo eliminaremos, pero tampoco tan pequeño que no se distingan bien los trazos. Lo escaneamos a unos 150-300 puntos por pulgadas (ppp en adelante) para asegurar que cuando hagamos zoom se vean las lineas suficientemente claras y podamos trabajar con precisión.

Photoshop abrir lienzo

Empezamos abriendo un lienzo en blanco (Ctrl+n), me seguro un buen tamaño y una buena resolución por si luego quisiera imprimir a gran tamaño.

Para añadir nuevas capas simplemente haz click en el boton Crear capa.

Ponemos el boceto en una capa (para hacer esto abre el archivo donde tienes tu dibujo, selecciona todo con Ctrl+a y corta la selección con Ctrl+x, después pegalo en tu lienzo con Ctrl+v, si se te queda pequeño transformalo con Ctrl+t) y la nombramos como “boceto”, encima creamos una capa donde pondremos el trazado de la figura y la nombramos “lineas”. Asi que tendríamos las 3 capas como aparece en la imagen.

Pues bien, usaremos la herramienta Pluma Herramienta Pluma para redibujar el boceto, selecionala y activa el Modo de Contorno (esquina superior izquierda, el icono de la pluma dentro del recuadro):

Modo contorno

Ahora hacemos click en 3 puntos, y se crearan 3 pequeños cuadrados como estos:

Herramienta Pluma de Photoshop

si pulsas de nuevo la herramienta Pluma y mantienes el ratón durante unos segundos te aparecera un menu como este:

Menu de herramienta Pluma

elige Convertir punto de ancla, pulsa en cualquiera de los 3 cuadrados que creamos hace un momento y arrastra, saldran unas manecillas que sirven para torcer la linea y formar lo que se llaman curvas Berzier. Le vamos dando la forma deseada (siempre podemos añadir o quitar estos cuadraditos con Añadir punto de ancla o Eliminar punto de ancla según queramos formas mas o menos complejas). Tienes que conseguir algo como esto:

Curvas berzierHerramienta de Selección directa

Existe un pequeño truco para conseguir formas redondeadas. Consiste en hacer los vertices y añadir un punto intermedio, luego sólo tienes que moverlo con la herramienta de selección directa y la curva se hara sola.

Asegurate que estás en la capa de trazados, coge el Pincel Herramienta Pincel y elige un pincel duro (haz click derecho dentro del lienzo, son los primeros en la lista de pinceles) de unos 5 pixel con un color q se distinga bien del boceto, por ejemplo rojo.

Contornear trazado

Teniendo la herramienta Pluma seleccionada damos al botón derecho del ratón dentro del lienzo y elegimos Contornear Trazado, con lo q nos saldrá una ventana:

Contornear trazado

escogemos la herramienta Pincel y le damos a OK, lo q nos generara un trazo de las características del pincel que escogimos anteriormente que sigue la ruta que anteriormente (se puede utilizar con todas las demás herramientas).

Tipos de trazos

Si marcas la casilla Simular presion obtenemos trazos que se afinan por las puntas, con un poco de imaginación puedes conseguir todo tipo de trazos.

Contorno trazo

ENHORABUENA!! Ya tienes tu primer trazo, ahora el resto :P El truco está en hacer los trazos por partes, en diferentes capas para poder retocar comodamente trazos que se superponen… como en esta imagen:

Trazos superpuestos
trazos retocados

Lo ideal es ir haciendo trazos de areas completas (por ejemplo trazamos las gafas en una capa y luego añadimos los pelos en otra, después borramos los trazos de gafas que están cubiertos por el pelo), es mejor hacerlo asi q empezar a trazar por la ceja y con el mismo pasar al pelo.

Trazos pelos

Ahora toca trabajar haciendo el resto del trazado. Cuando ya tengas todos los trazos tenemos que aplanar todas las capas en una sola, esto lo hacemos seleccionando todas las capas y pulsando Ctrl+e. Ni q decir q al principio cuesta un poco manejar las curvas pero con algo de práctica el boceto puede ser casi identico al original.

Imagen FInal

Y ya hemos terminado nuestro entintado digital. Seguramente ya habrás notado que la linea es un poco aburrida al no estar modulada… paciencia, eso lo veremos más adelante ;)

This post was written by:

Sergio Ordonez - who has written 82 posts on SOSFactory Blog.

My name’s Sergio Ordoñez I´m illustrator, graphic and web designer. A selection of my work is included at SOSFactory. If you want to support this blog, please be an active member: tweet the posts, participate in the discussions and the exercises :)

Contact the author

54 Comments For This Post

  1. ELROLO Says:

    exceelente sigue asi!! muy facil de entender excelente

  2. syez Says:

    when is the closing date..u mean the winner will get new mascot for their own .sound interesting.

  3. joe Says:

    this is pretty damm hard to use

  4. FANY Says:

    HOLA TENGO UN PROBLEMA …
    HE HECHO TODO LO QUE DICE TU TUTORIAL PERO HAY UNA PARTE QUE NO ME SALE , QUE ES :
    ——————————————–
    Si marcas la casilla Simular presion obtenemos trazos que se afinan por las puntas, con un poco de imaginación puedes conseguir todo tipo de trazos.

    (FOTO)(CUANDO HAGO ESA PARTE, NO SE QUITA EL TRAZADO DE LA PLUMA , SE QUEDAN LAS DOS . LA PLUMA Y EL CORTONO ROJO) SABES COMO QUITARLA??!!!

    ENHORABUENA!! Ya tienes tu primer trazo, ahora el resto El truco está en hacer los trazos por partes, en diferentes capas para poder retocar comodamente trazos que se superponen”¦ como en esta imagen:

  5. Sergio Ordonez Says:

    Simplemente selecciona el cotorno y borralo dandole a la tecla de borrar o suprimir.

  6. FANY Says:

    GRACIAS

  7. Magso Says:

    EX-CE-LEN-TE,en una palabra.Maestro.

  8. GerardO Says:

    muchas gracias por tu ayuda, son excelentes maestros . . . sigue asi

  9. andres Says:

    ¿con qe hacen esos dibujos

  10. Ana Chavez Says:

    Que programas existen para realizar ese tipo de dibujos ??? y ¿ hay manuales para ello?

  11. Sergio Ordonez Says:

    Pues estos diseños se hacen con Photoshop, en la sección de diseños de mascotas o Photoshop teneis algunos tutoriales.

    Aunque podeis hacerlo con cualquier programa de edición gráfica decente ya sea vectorial o no (Illustrator, Freehand, Corel Draw…)

    Saludos.

  12. martin Says:

    hola, me encanta tu pagina, pero eeste comentario es solo para marcarte un error.
    cuando hablas de dibujo en photoshop, no puedes hablar de dibujo vectorial, ya q programas como PS son bitmaps.
    me imagino q con tu experiencia ya lo debes saber, pero creo q puede servir mi comentario.
    saludos desde argentina.

  13. Sergio Ordonez Says:

    Hola Martin, me parece que te equivocas, Photoshop tiene opciones de dibujo vectorial, dependiendo de que opción marques en esta paleta: http://www.sosnewbie.com/imagenes/tutorial_dibujo_photoshop/pluma2.gif

    Incluso si conviertes las curvas berzier a mapas de bits (como yo hago), se puede decir que dibujamos de forma vectorial.

  14. vane Says:

    me encanta que los argentinos nos equivoquemos!!!
    hay que preguntar no afirmar martí­n!

  15. Nefer Says:

    Hola sergio, :D

    Mis felicitaciones por tu web y tus excelentes tutoriales. Me gusta tu estilo de ilustración y estoy aprendiendo mucho de ti.

    En cuanto he visto tus tutoriales no he dudado en ponerlo en mi weblog de tutoriales (http://tutoblog.espinlog.com/). en serio me parecen geniales ya que las explicaciones son muy claras y verdaderamente útiles. :)

    Finalmente también tengo que decirte que creo que me estoy pasando de pelota XDDD pero es que me gustan mucho.

    Un saludo. ;)

  16. Adriana Says:

    Hola quisiera preguntarte, tu te dedicas solamente al diseño, me gustaria poder vivir del dibujo no soy una experta pero ahi voy, quiero saber si cuando ya me la juegue mejor con el photoshop y el dibujo digital, como puedo vivir de ello?, Gracias de antemano

  17. Sergio Ordonez Says:

    Hola Adriana, sí­, me dedico sólo al diseño, bueno y a escribir este blog, aunque eso es un hobby.

    Un buen dibujante entre diseñadores es un privilegiado, entre dibujantes de cómics es uno más, por eso te aconsejo que sigas con el dibujo, pero no te limites sólo a eso, aprende a usar programas de diseño y saldrás ganando.

    ¿Cómo puedes vivir de ello? Pues me temo que esa pregunta es imposible de responder, no hay fórmulas mágicas… sólo práctica, inteligencia y mucha pasión, el resto deberí­a llegar solo.

    Saludos.
    Sergio

  18. ISMAEL Says:

    bien, bien , vaya que aprendí­ mucho, gracias por el tutorial, pero serí­a ley poder pintarlo y hacer que los trazos sean más notorios, por lo demás está muy bueno el tutorial, gracias repito

  19. Sergio Ordonez Says:

    Hola Ismael, visita la sección de videotutoriales, ahí­ podrás ver otros donde dibujo con linea modulada. Este es sólo un tutorial básico.

    Saludos

  20. Adtberp Says:

    Muy bueno el tutorial, pero, que version del photoshop usas?

  21. Sergio Ordonez Says:

    Pues la verdad que no importa mucho, las herramientas de dibujo vectorial son las mismas desde la versión 6 al menos.

  22. elChapin Says:

    Muy, muy buen tutorial. Andaba buscando uno bien explicado y me encontre con este, asi que voy a probar con mis bocetos a ver que tal.

  23. IVONNE Says:

    una pregunta por que sera que en el paso de darle clik derecho y seleccionar contornear esa opcion no me sale tengo ps cs8 no entiendo, sera que algo estoy haciendo mal? pero estoy siguiendo al pie de la letra, al dar clik derecho solo me despliega la barra de tipos de pincel…

    gracias

  24. Ana Says:

    T__T gracias… hacia mucho tiempo que queria un toturial asi de bueno…

  25. Levi Says:

    Buen tutorial.

    Solo tengo una duda, pero me ha dejado parado. No se si me pordrí­an explicar a detalle como conseguir el trazo que en la imagen dice “Using the rubber”. Lo que pasa es que, por ejemplo, cuando hago una curva cerrada puntiaguda (como una gota), la punta no se ve “desvanecida” si no se ve redondeada como la unión común de dos lí­neas. Cuando le aplico “simular presion” como que la difumina y solo se ve la mitad de ella. ¿Podrí­an ayudarme? Pongo un ejemplo: http://www.natancastillo.com/imagenes/puntas.jpg

    Gracias.

  26. Sergio Ordonez Says:

    Hola Ivonne, para que te salga la opción contornear tienes que tener seleccionada la herramienta pluma, seguramente es que le das con la herramienta pincel seleccionada.

  27. Sergio Ordonez Says:

    Hola Levi, con este método estamos un poco limitados, ese tipo de trazo lo puedes conseguir de dos maneras:

    1º.- Siguiendo este tutorial. Haces un trazo normal, después con el borrador simplemente afilas la lineas.

    2º.- La segunda opción es dibujar la linea propiamente, con trazos, y rellenar en vez de contornear. Este método es un poco más avanzado pero es mucho más flexible. Aquí­ puedes ver un ejemplo: http://www.sosnewbie.com/es/diseno-mascotas/dibujo-digital-con-photoshop-videotutorial/

    Espero haberte ayudado:)

  28. Levi Says:

    Sergio:

    Muchí­simas gracias. Si me es de ayuda, aunque ya lo habí­a visto, pero aún así­ te agradezco.

    De hecho hago lo primero que me dices ya que las lí­neas que trazo son delgadas, invertirí­a mucho mas tiempo con el segundo método, pero en lí­neas gruesas es ideal.

    Un saludo y gracias de nuevo :D .

  29. Carlos Says:

    Excelente, justo lo que un aprendiz busca !!, con este tipo de tutoriales seguro que la frase “el alumno supera al maestro” se cumple a cabalidad. Un fuerte abrazo.

  30. Sergio Ordonez Says:

    Muchas gracias por el cumplido, espero que no se cumpla :D

  31. manuel Says:

    Hola, kisiera saber como hacen q los dibujos se planten en la computadora, en las web, como lo hacen? a mano con lapiz o con algun programa software?… o lo dibujan y luego lo scanean? kisiera saber xq soy aficionado al dibujo… es mi hobby =)… si tienen nombres de programas porfa pasemenlas a mi correo: antonio_5_52@hotmail.com
    Gracias,
    Saludos a todod…

  32. Sergio Ordonez Says:

    Hola Manuel, en este mismo blog hay tutoriales sobre lo que preguntas, por ejemplo:

    http://www.sosnewbie.com/es/diseno-mascotas/ilustracion-vectorial-illustrator/

    Una aclaracion, todas las dudas que tengas escribelas aqui, puede que sea ultil al resto de usuarios.

    Saludos.

  33. Ivan Says:

    Sergio, muy buen tutorial y muy bien explicado.

    Felicitaciones por la metodologí­a que utilizas. Me sirvio mucho en mi trabajoya que también soy Diseñador y Profesor.0_0

  34. fany Says:

    hola he echo mi boceto en rojo pero lo quiero poner en negro , como se pone???

  35. Sergio Ordonez Says:

    Hola Fany, dale a CTRL+U te saldrán 3 barritas, dale a la de abajo del todo hacia la izq. Eso es todo.

    Saludos.

  36. DAvid Says:

    Muy bueno, el inicio ya sabia pero el contorno de rojo no, gracias por el dato sigue asi tus explicaciones son muy interesantes.

  37. morcio Says:

    hey Sergio navegando por Facebook encontre un quiz de photoshop…. y mira la imagen que encontre!

    http://img360.imageshack.us/img360/6678/capturapk2.jpg

    se te hace familiar? jejeje… por hay tambien vi unos cuantos personajes de SOS Factory regados por MySpace….

    saludos!

  38. Sergio Ordonez Says:

    Buenas Morcio, por desgracia hay mucho amigo de lo ajeno…

  39. enzo Says:

    hola !! quisiera saber si se pueden obtener los mismos resultados al dibujar con Flash en lugar de usar illustrator,ya que me resulta mas facil el vectorizar con el flash ,bueno gracias por la respuesta

  40. Sergio Ordonez Says:

    Hola Enzo, todo es posible, la cuestión es si es práctico.

    He visto artistas que hacen retratos realistas con Flash, aunque en mi opinión Illustrator es una mejor opción, en teorí­a Flash es para animar, e Illustrator para ilustración.

  41. gee!!! Says:

    muchas gracias por el tutorial me siento como k deverdad estoy aprendiendo algo pero en el tutorial hay algo k dices y por mas k busque no encontre una opcion k me dijera como cambiar los tipos de linea cuando usas contornear trazado y simular precion asi como marcas standar path simulating path one ending point sharp y using the rubber me podrias decir como cambio los tipos de precion??
    creo k es lo unico k me falta para casi masterisar estos pasos k nos has dado
    gracias!!!!!!!!!!

  42. gee!!! Says:

    DISCULPA TOAS LAS MOLESTIAS SERGIO PERO ME PODRIAS DECIR COMO CONSEGUIMOS EL TIPO DE TRASO ONE ENDING POINT SHARP POR FAVOR

  43. Sergio Ordonez Says:

    Hola Gee, serí­a un trazo con presión (nº 2) pero nos quedamos con sólo la mitad del trazo, el resto lo borramos.

    Saludos.

    PS: no escribas en mayúsculas, es como si estuvieras gritando.

  44. Manu Says:

    Ante todo felicidades por todo, tus tutoriales, tus diseños, tus trabajos. Y gracias por la ayuda que nos brindas. He ido haciendo algun tutorial y estoy bastante contento con el resultado, pero necesito ayuda, me gustaria saber como puedo rellenar un trazado y darle un efecto parecido al pelo animal el personaje es un tigre. Pido sin saber si es muy complicado, disculpa mi ignorancia. Gracias de antemano.

  45. Sergio Ordonez Says:

    Hola Manu, muchas gracias :)

    Tendrí­as que pintarlo, aquí­ te dejo algunos tutoriales

    Pelo realista:
    http://sirasan.deviantart.com/art/Photoshop-Painting-Hair-32663745

    Estos dos más estilo cartoon:
    http://ctjemm.deviantart.com/art/Hair-CG-Series-ELECTRIC-RED-102762217

    http://binkari.deviantart.com/art/Hair-Tutorial-1091804

    Saludos.

  46. robbie Says:

    Realmente magnifico, muy util y absolutamente recomendado, muchisimas gracias, llevába tiempo buscando un tutorial asi, y me ha sido de gran ayuda.

  47. Diana Says:

    ¿Alguna vez has trabajado con el GIMP? no sé q tanto se puede hacer con ese programa pero a mí­ no me convence; en una entrevista d trabajo me preguntaron si lo sé usar además de la plataforma Ubuntu, aunque en lo personal me da igual el resultado es lo q importa, no?

  48. Diana Says:

    Hola, ¿crees que a esta página le vendrí­a bien una mascota (y a parte un rediseño, jeje) http://www.travelwithmea.org/ o existe algún criterio o tipos de página que no deben llevar mascotas?. Saludos.

  49. Fred Sanford Says:

    If you learn to draw correctly, using pen, brush and ink, you would not need to use this digital ‘art’ crap. This is simply using a tool to cheat your self and anyone that doesnt know the shortcuts you take during this kind of ‘drawing’ process. There is no talent to using this, you are simply cheating all the artists before you that learned to draw correctly and with some skill. This is why the market is flooded with crap and puerile obnoxious junk. Digital ‘art’ is a sham and you should feel ashamed to cheat this way. Hacks and losers.

  50. Sergio Ordonez Says:

    Hello Fred, thanks a lot for your criticism, its welcome.

    Though I think you are wrong, no matter the medium you use, how expensive are your tools or what software you use… your brain and your hands is what make the difference.

    Its like blaming people for drawing with open eyes when you do it with your eyes closed… if you do it kudos for you (though I would open the eyes and take advantage of it, so I would improve faster) but this is not art, this is industry, what matters is just the outcome, the productivity and versatility.

    I dont consider myself an artist, neither talented, I just do what I enjoy and hopefully people pay me (and very well) to do it, if you enjoy the traditional mediums go for it, actually I have been drawing and painting with traditional mediums my whole life. The PC is a tool to increase productivity and why not, to enjoy with no physical or temporal restrictions… if you never tried I suggest you look for beginner tutorials, Im sure you wont be ashamed.

    Cheers.
    Sergio

  51. Ricardo Martinez Says:

    Hola que tal mi nombre es Ricardo Martí­nez y estudio diseño grafico, en este momento estoy realizando un proyecto de una mascota escolar para los eventos deportivos de una preparatoria. Seria de gran ayuda si podrí­a tomarlo como asesor y como referencia hacia mi proyecto. La verdad muchas felicidades con las mascotas, tienes un estilo único y son muy llamativos, muchas felicidades.

  52. Josue Says:

    eres muy bueno pero sigo con mi necedad jajaja que deberias de hacer otra pagina o en esta pero otra seccion que enseñes a dibujar cartoon porque deberas lo haces bien yo apenas estoy iniciando en ello mira mi blog http://dibujacaricatura.blogspot.com
    que te parece, que me falta y un dia de estos me gustaria que vectorizaras un dibujo mio para ver como queda espero que me respondas

  53. Diana Says:

    Me gustan mucho estos diseños al estilo chibi :) , me recuerdan a Preston Blair.

  54. Diana Says:

    Este es de los primeros tutoriales, nunca entendí­ el coloreado usando esos modos de fusión para colorear los labí­os de la chica, Sergio

16 Trackbacks For This Post

  1. psssht 07092007 « phohp Says:

    [...] How to Color in Photoshop:1, 2 e 3. Tutorial photoshop: dibujo digital, dibujo digital avanzado e entintado digital con photoshop. Real World Illustrator, moita [...]

  2. Diseño de mascotas para paginas web at Tutoblog: weblog de tutoriales Says:

    [...] diseño de mascotas web Comparte el artí­culo:Estos í­conos enlazan con webs de marcadores sociales que permiten a los [...]

  3. Ilustración vectorial a partir de un boceto | Tutoblog: weblog de tutoriales Says:

    [...] crear las lineas que van a contornear y definir el dibujo, nos presenta este tutorial de Photosop: dibujo digital . El tutorial es muy básico, ideal para principiantes y para aquellos que quieran aprender otras [...]

  4. Diseño de Mascotas Publicitarias « Expresión Diseño Gráfico Says:

    [...] ¿Donde usaremos nuestra mascota?, ¿cual será el formato?, ¿concepto?, en fin un artí­culo muy bueno para el diseño de mascotas publicitarias está esperando a ser leí­do en este link. [...]

  5. Digital Media - Week 4 at Mokona Modoki Says:

    [...] SOS Newbie – Digital Drawing with Photoshop [...]

  6. » Vectorial illustration with Illustrator Says:

    [...] If like me, your handdraw lines are not too good, we ink the sketch with Photoshop”™s vector tools. VIDEOTUTORIAL:Photoshop digital inking 2, if you”™re not familiarized with the pen tool you should better take a loot at this tutorial about Photoshop basic digital drawing. [...]

  7. Elevated Sky » Blog Archive » Photoshop Tutorials (100+) Photography & Design Says:

    [...] Digital Drawing In this tutorial geared towards the beginner .. you’ll learn to use the vector drawing tools of Photoshop using your mouse. [...]

  8. Photoshop Tutorials A-Z Says:

    [...] Digital Drawing  In this tutorial geared towards the beginner .. you’ll learn to use the vector drawing tools of Photoshop using your mouse. [...]

  9. A’ dan Z’ ye Photoshop Eğitimi | Batuhan Bulak Says:

    [...] Digital Drawing [...]

  10. Ashraf Latif » Blog Archive » Oh! vector illustrator! Says:

    [...] If like me, your handdraw lines are not too good, we ink the sketch with Photoshop”™s vector tools. VIDEOTUTORIAL:Photoshop digital inking 2, if you”™re not familiarized with the pen tool you should better take a loot at this tutorial about Photoshop basic digital drawing. [...]

  11. SOSNewbie Bienvenido a la web del diseñador Freelance » Dibujo en Photoshop (Recopilatorio) Says:

    [...] Dibujo digital en Photoshop (básico) [...]

  12. SOSNewbie » Digital Drawing and Inking compilation Says:

    [...] Basic Digital Drawing in Photoshop [...]

  13. SOSNewbie » Digital Drawing and Inking in Photoshop Says:

    [...] Basic Digital Drawing in Photoshop [...]

  14. Illustrator tutorial « Atlantic College Blog Says:

    [...] If like me, your handdraw lines are not too good, we ink the sketch with Photoshop”™s vector tools.VIDEOTUTORIAL:Photoshop digital inking 2, if you”™re not familiarized with the pen tool you should better take a loot at this tutorial about Photoshop basic digital drawing. [...]

  15. Master post about drawing and inking in Photoshop | SOSFactory Says:

    [...] Basic Digital Drawing in Photoshop [...]

  16. Vectorial character design with Illustrator | SOSFactory Blog Says:

    [...] VIDEO TUTORIAL:Photoshop digital inking 2, if you’re not well versed with the pen tool it would be advisable to take a loot at this tutorial on Photoshop basic digital drawing. [...]

Leave a Reply