April 16th, 2007
por Sergio Ordonez at 6:44 am en Diseño Mascotas, Photoshop, Dibujo
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.

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
para redibujar el boceto, selecionala y activa el Modo de Contorno (esquina superior izquierda, el icono de la pluma dentro del recuadro):

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

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

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:


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
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.

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:

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).

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.

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:


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.

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.

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
Post relacionados:
- Dibujo digital con Photoshop (Videotutorial)
- Videotutorial Photoshop: Entintado Digital
- Dibujo en Photoshop (Recopilatorio)
exceelente sigue asi!! muy facil de entender excelente
Comments de ELROLO — April 26, 2007 @ 9:44 am
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:
Comments de FANY — July 11, 2007 @ 9:00 am
Simplemente selecciona el cotorno y borralo dandole a la tecla de borrar o suprimir.
Comments de Sergio Ordonez — July 11, 2007 @ 9:12 am
GRACIAS
Comments de FANY — July 23, 2007 @ 8:47 am
EX-CE-LEN-TE,en una palabra.Maestro.
Comments de Magso — July 24, 2007 @ 8:22 am
muchas gracias por tu ayuda, son excelentes maestros . . . sigue asi
Comments de GerardO — August 23, 2007 @ 2:21 am
[…] 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 […]
Pingback de psssht 07092007 « phohp — September 7, 2007 @ 2:48 pm
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.
Comments de martin — September 25, 2007 @ 1:55 am
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.
Comments de Sergio Ordonez — September 25, 2007 @ 6:39 am
me encanta que los argentinos nos equivoquemos!!!
hay que preguntar no afirmar martín!
Comments de vane — September 27, 2007 @ 2:50 pm
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
Comments de ISMAEL — October 3, 2007 @ 2:12 pm
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
Comments de Sergio Ordonez — October 3, 2007 @ 5:07 pm
Muy bueno el tutorial, pero, que version del photoshop usas?
Comments de Adtberp — October 7, 2007 @ 5:05 pm
Pues la verdad que no importa mucho, las herramientas de dibujo vectorial son las mismas desde la versión 6 al menos.
Comments de Sergio Ordonez — October 7, 2007 @ 5:44 pm
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.
Comments de elChapin — October 8, 2007 @ 6:14 pm
[…] 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 […]
Pingback de Ilustración vectorial a partir de un boceto | Tutoblog: weblog de tutoriales — October 14, 2007 @ 6:41 am
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
Comments de IVONNE — October 16, 2007 @ 1:37 am
T__T gracias… hacia mucho tiempo que queria un toturial asi de bueno…
Comments de Ana — October 18, 2007 @ 2:32 pm
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.
Comments de Levi — November 6, 2007 @ 8:04 pm
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.
Comments de Sergio Ordonez — November 7, 2007 @ 8:41 am
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:)
Comments de Sergio Ordonez — November 7, 2007 @ 8:47 am
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.
Comments de Levi — November 8, 2007 @ 8:14 pm
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.
Comments de Carlos — December 2, 2007 @ 12:40 pm
Muchas gracias por el cumplido, espero que no se cumpla 
Comments de Sergio Ordonez — December 2, 2007 @ 9:43 pm
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
Comments de Ivan — January 10, 2008 @ 3:05 pm
hola he echo mi boceto en rojo pero lo quiero poner en negro , como se pone???
Comments de fany — January 14, 2008 @ 3:46 pm
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.
Comments de Sergio Ordonez — January 14, 2008 @ 3:48 pm
Muy bueno, el inicio ya sabia pero el contorno de rojo no, gracias por el dato sigue asi tus explicaciones son muy interesantes.
Comments de DAvid — March 16, 2008 @ 9:25 am
[…] 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. […]
Pingback de » Vectorial illustration with Illustrator — August 25, 2008 @ 11:48 am
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!!!!!!!!!!
Comments de gee!!! — October 16, 2008 @ 1:06 pm
DISCULPA TOAS LAS MOLESTIAS SERGIO PERO ME PODRIAS DECIR COMO CONSEGUIMOS EL TIPO DE TRASO ONE ENDING POINT SHARP POR FAVOR
Comments de gee!!! — October 21, 2008 @ 2:55 pm
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.
Comments de Sergio Ordonez — October 26, 2008 @ 4:27 am
[…] 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. […]
Pingback de Ashraf Latif » Blog Archive » Oh! vector illustrator! — November 5, 2008 @ 1:10 pm
[…] Basic Digital Drawing in Photoshop […]
Pingback de SOSNewbie » Digital Drawing and Inking compilation — December 3, 2008 @ 7:41 am
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.
Comments de Manu — January 22, 2009 @ 3:12 pm
Realmente magnifico, muy util y absolutamente recomendado, muchisimas gracias, llevába tiempo buscando un tutorial asi, y me ha sido de gran ayuda.
Comments de robbie — March 8, 2009 @ 11:56 am
RSS Sindicación de los comentarios de este post.
TrackBack URI
Haz un comentario