1. Design & Illustration
  2. Hand Lettering

Cómo crear un diseño de letras rusas dibujadas a mano en Photoshop

by
Read Time:11 minsLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Crea una tarjeta con ilustración de letras rusas dibujadas acompañadas de tradicionales ornamentos y la palabra "Spasibo", que significa "gracias". También incluiremos un patrón de una flor popular y una añeja fuente cirílica.

Si quieres elaborar una ilustración de calidad en menos tiempo, ¡utiliza una de las bonitas fuentes cirílicas disponibles en Envato Elements! Hay un montón de geniales opciones que pueden ajustarse a diferentes estilos de proyectos. Soulbind, que puedes observar a continuación, es solo una de las hermosos diseños de letras rusas disponibles en el sitio.

Montclar Russian Cyrillic Font DownloadMontclar Russian Cyrillic Font DownloadMontclar Russian Cyrillic Font Download
Puedes reducir el tiempo del diseño usando una de las hermosas fuentes cirílicas de Envato Elements.

¿Estás listo para empezar? ¡Entonces creemos nuestra estilizada tarjeta con letras rusas ahora mismo!

1. Cómo crear el boceto de letras rusas dibujadas

Hoy, haremos un lettering estilo eslavo con la palabra Спасибо (spasibo), que significa Gracias. Para decorar nuestra tarjeta, utilizaremos el tradicional ornamento floral ruso Хохлома (Khokhloma). Se creó en el siglo XVII para decorar objetos de mesa elaborados en madera. No será el ornamento original sino la aplicación de estilo del lettering en Adobe Photoshop. 

Lo principal a tomar en cuenta cuando dibujas lettering estilizado es hacer el estilo adecuado para tus letras y encontrar una buena composición. Así que comencemos con el boceto.

Paso 1

Para dibujar cualquier estilo difícil de lettering, uso la misma técnica: 

  1. Dibujo la forma principal de la letra con una línea.
  2. Añado volumen y decoración (si la letra tiene muchos elementos adicionales).

Por ejemplo, para dibujar la letra C (en ruso suena como S), dibujé una línea curva y después simplemente añadí el volumen. También, puedes usar esta magnífica fuente estilo eslavo o escribir letras tú mismo. Para inspiración adicional, puedes leer un artículo de Wikipedia sobre el alfabeto cirílico arcaico, con ejemplos de letras.

Hand Lettering Cyrillic Style Font Tutorial How to draw difficult letter shapesHand Lettering Cyrillic Style Font Tutorial How to draw difficult letter shapesHand Lettering Cyrillic Style Font Tutorial How to draw difficult letter shapes

Paso 2

Siempre dibujo mis bocetos usando lápiz y papel, tomo una foto con mi teléfono y me lo envío por correo electrónico. Puedes utilizar mi boceto o dibujar el tuyo. No olvides usar las guías para hacer tu lettering más o menos derecho.

Hand Lettering Cyrillic Style Font Tutorial Hand lettering in Russian folk style sketchHand Lettering Cyrillic Style Font Tutorial Hand lettering in Russian folk style sketchHand Lettering Cyrillic Style Font Tutorial Hand lettering in Russian folk style sketch

Para dibujar el ornamento Khokhloma, puedes usar este conjunto de gráficos o crear tu propia decoración. Recuerda que los colores principales en la pintura Khokhloma son rojo, dorado y negro y el ornamento tiene muchos espirales florales.

Paso 3

Momento de pasar a Photoshop. Primero que nada, necesitamos preparar nuestro flujo de trabajo. Crea un Nuevo documento (Comando-N) en Adobe Photoshop y establece el tamaño en 1800 px x 1500px, resolución 144 px/pulgadas. Puedes cambiar posteriormente el tamaño de tu mesa de trabajo usando Imagen > Tamaño de lienzo.

Solo mueve la foto de tu boceto desde tu carpeta hacia la mesa de trabajo y presiona Intro para colocarla. Para ajustar el tamaño del lienzo, puedes usar la herramienta Transformar (Comando-T). Si quieres cambiar el tamaño del lienzo, aplica Imagen > Tamaño del lienzo o utiliza la herramienta Recortar (C).

Paso 4

Para preparar el boceto buscando aplicarle color, utilizo Imagen > Ajustes > Tono/saturación (Comando-U) y establezco la Saturación en -100 y Niveles (Comando-L) como se muestra a continuación.

Hand Lettering Cyrillic Style Font Tutorial Preparing the sketch in Adobe Photoshop Hand lettering in Russian folk styleHand Lettering Cyrillic Style Font Tutorial Preparing the sketch in Adobe Photoshop Hand lettering in Russian folk styleHand Lettering Cyrillic Style Font Tutorial Preparing the sketch in Adobe Photoshop Hand lettering in Russian folk style

Paso 5

Antes de que comiences, debes alinear el boceto. Pulsa Comando-R para mostrar las reglas (o Vista > Reglas), haz clic en la regla superior, y jala la guía a la ubicación deseada (la parte superior de las letras). Repítelo con la línea inferior. Para alinear tu bosquejo con tus nuevas guías, utiliza la herramienta Transformar (Comando-T) y escálalo a la ubicación deseada. Consejo profesional: para mover únicamente una esquina de tu imagen, presiona Comando y mueve la esquina.

Hand Lettering Cyrillic Style Font Tutorial Sketches guidelinesHand Lettering Cyrillic Style Font Tutorial Sketches guidelinesHand Lettering Cyrillic Style Font Tutorial Sketches guidelines

Ahora podemos comenzar el proceso de coloración. Establece el modo de la capa de tu boceto en Multiplicar y la Opacidad en 15-20%. Después de eso, añade una nueva capa debajo de la capa del boceto. No olvides Bloquear la posición de la capa.

Handwritten Cyrillic Lettering Font Tutorial Layers arrangementHandwritten Cyrillic Lettering Font Tutorial Layers arrangementHandwritten Cyrillic Lettering Font Tutorial Layers arrangement

¡Ahora podemos empezar a aplicar color! 

2. Cómo colorear las letras con diseño

Paso 1

El tradicional ornamento Khokhloma generalmente tiene un fondo oscuro y decoración brillante dorada y roja arriba de él. Desbloquea la capa Fondo (simplemente haz clic en el ícono del Candado cerca del nombre de la capa en el panel Capas) y coloréala con la herramienta Bote de pintura (G) a un color café muy oscuro (casi negro). Asegúrate de que elijas la herramienta Bote de pintura en lugar de la herramienta Degradado.

Handwritten Cyrillic Lettering Font Tutorial Creating the dark background for hand lettering in Russian folk styleHandwritten Cyrillic Lettering Font Tutorial Creating the dark background for hand lettering in Russian folk styleHandwritten Cyrillic Lettering Font Tutorial Creating the dark background for hand lettering in Russian folk style

Es difícil ver nuestro boceto en este fondo oscuro. Para dibujar más fácil, crea una nueva capa y rellénala de blanco. La usaremos para dibujar las formas principales. Después de dibujar, la ocultaremos para nuestra conveniencia. Para ocultar la capa, solo haz clic en el ícono del ojo cerca del nombre de la capa.

Handwritten Cyrillic Lettering Font Tutorial Hide the layer in Adobe PhotoshopHandwritten Cyrillic Lettering Font Tutorial Hide the layer in Adobe PhotoshopHandwritten Cyrillic Lettering Font Tutorial Hide the layer in Adobe Photoshop

Paso 2

Comenzaremos con la primera letra. Crea la nueva capa debajo del boceto y dibuja la letra C usando la herramienta Pluma (P). Si no sabes cómo utilizar la herramienta Pluma, consulta los sensacionales tutoriales oficiales de Adobe sobre la herramienta Pluma y las Formas. Envato Tuts+ también tiene un tutorial de la herramienta Pluma de Photoshop muy sencillo y claro con GIFs animados. 

Como puedes ver, he agregado guía adicionales. Colorea tus formas vectoriales con un cálido amarillo.

Creating letters with Vector Shapes in Adobe PhotoshopCreating letters with Vector Shapes in Adobe PhotoshopCreating letters with Vector Shapes in Adobe Photoshop

Si necesitas orificios en tus formas, selecciona la forma principal y la forma del orificio usando la herramienta Selección directa (A) y selecciona Excluir áreas de formas superpuestas del panel superior.

Overlapping Shapes in Adobe PhotoshopOverlapping Shapes in Adobe PhotoshopOverlapping Shapes in Adobe Photoshop

Para copiar la forma, utiliza la herramienta Selección de trazado (A, la flecha negra), selecciona la forma que necesitas, mantén presionadas las teclas Mayúsculas y Alt y muévela. Usamos la flecha negra (herramienta Selección de trazado) para seleccionar y mover formas y la flecha blanca (herramienta Selección directa) para editar los puntos de ancla.

Path Selection Tool and copying the shapes in Adobe PhotoshopPath Selection Tool and copying the shapes in Adobe PhotoshopPath Selection Tool and copying the shapes in Adobe Photoshop

Para añadir círculos decorativos, utiliza la herramienta Elipse (U) y dibuja varios círculos (mantén presionada la tecla Mayúsculas para hacer un círculo perfecto). Selecciona todas las capas de elipses y tu capa de letras (mantén presionada la tecla Mayúsculas y haz clic en el nombre de la capa en el panel Capas) y combínalas (Comando-E).

Decoration lettering with Ellipse ToolDecoration lettering with Ellipse ToolDecoration lettering with Ellipse Tool

Terminamos con la forma de nuestras letras, ¡felicidades!

Vector letters for Russian folk style lettering in Adobe PhotoshopVector letters for Russian folk style lettering in Adobe PhotoshopVector letters for Russian folk style lettering in Adobe Photoshop

Paso 3

¡Tiempo de añadir las texturas! Oculta (haz clic en el ícono del ojo) la capa white bg para ver el fondo oscuro original. Crea una capa de recorte arriba de la capa letters:

  1. Mantén presionada la tecla Alt, coloca el puntero sobre la línea que divide las dos capas en el panel Capas (el puntero cambia a dos círculos superpuestos) y luego haz clic.
  2. En el panel Capas, selecciona la capa superior de un par de capas que quieres agrupar, y elige Capa > Crear máscara de recorte.
Adding texture to the vector letteringAdding texture to the vector letteringAdding texture to the vector lettering

Paso 4

Para añadir las texturas, elige el pincel de textura. Uso los pinceles Kyle T. Webster, oficiales de Photoshop, pero puedes elegir cualquier otro asombroso conjunto de pinceles. Para añadir una textura granular, uso el pincel Rough Dry Fun Big! de la colección Kyle T. Webster. 

Pinta de amarillo claro en la parte superior de tus letras y un naranja claro y más oscuro en la parte baja para hacer la transición de color.

Color texture with texture brushesColor texture with texture brushesColor texture with texture brushes

Agrupa (Comando-G) las letras y la textura de las capas. 

3. Creando el ornamento para la caligrafía rusa

Paso 1

Muestra (haz click en el ícono del ojo) la capa white bg. Usando la herramienta Pluma (P), dibuja las espirales. Tenemos dos capas separadas para las espirales amarillas y rojas. Posteriormente añadiremos las líneas delgadas, las bayas y los detalles.

Creating vector shapes for the ornamentCreating vector shapes for the ornamentCreating vector shapes for the ornament

Paso 2

Para dibujar las líneas delgadas, he creado una nueva capa para ello y he usado un pincel para dibujar. Utilicé Your New Favorite Inker de la colección de pinceles Kyle. Cualquier otro pincel de tinta funcionará muy bien igualmente. Si tienes una tableta de dibujo con presión de pluma, puedes usar un pincel. No olvides la combinación mágica Comando-Z para Deshacer tu acción. La uso mucho cuando trabajo con líneas precisas.

Thin lines with inker brush in Adobe PhotoshopThin lines with inker brush in Adobe PhotoshopThin lines with inker brush in Adobe Photoshop

Si dibujas con un mouse de computadora, esta es otra variante. Selecciona un pincel circular definido (o cualquier otro pincel estándar con dureza 100%), establece el tamaño deseado en el panel superior y abre los Ajustes del pincel (F5). Asegúrate de que esté activada la opción Dinámicas de forma > Control: Presión de pluma

Brush Settings PanelBrush Settings PanelBrush Settings Panel

Con la herramienta Pluma (P), dibuja el trazado deseado. Haz clic derecho en el trazo y selecciona la opción Contornear trazado.

Stroke pathStroke pathStroke path

Selecciona Herramienta: Pincel y marca la casilla Simular presión.

Simulate pressure for the strokeSimulate pressure for the strokeSimulate pressure for the stroke

Simplemente Elimina el trazado (o presiona Intro) ¡y voila!. Tenemos una bonita línea con simulación de presión. Experimenta con el tamaño del pincel para hacer la anchura ideal de línea.

Stroke Path in Adobe PhotoshopStroke Path in Adobe PhotoshopStroke Path in Adobe Photoshop

Continúa y dibuja todas las líneas delgadas amarillas y rojas. Este método es incluso más fácil que dibujar con un pincel.

Thin lines for Russian folk style lettering with Stroke Path toolThin lines for Russian folk style lettering with Stroke Path toolThin lines for Russian folk style lettering with Stroke Path tool

Paso 3

Con la herramienta Elipse (U), dibuja bayas amarillas y rojas. Mantén presionada la tecla Mayúsculas para hacer el círculo perfecto, y usa la herramienta Mover (V) o la herramienta Selección de trazado (A, la flecha negra). Combina (selecciona capas manteniendo presionada la tecla Mayúsculas y presiona Comando-E) todas las bayas amarillas y rojas en capas separadas.

Berries for Russian Folk style lettering in Adobe PhotoshopBerries for Russian Folk style lettering in Adobe PhotoshopBerries for Russian Folk style lettering in Adobe Photoshop

Paso 4

Usa la herramienta Forma personalizada (U), selecciona la forma de la flor del menú desplegable y dibuja la flor en la nueva capa. Si no tienes esta forma, utiliza cualquier otra o solo dibuja la flor con la herramienta Pluma (P).

Adding flower with custom shape toolAdding flower with custom shape toolAdding flower with custom shape tool

Combiné (Comando-E) las capas flower y yellow para mi conveniencia. Oculta la capa white bg y admira el resultado. ¡Se ve bien!

Russian folk style lettering in Adobe PhotoshopRussian folk style lettering in Adobe PhotoshopRussian folk style lettering in Adobe Photoshop

Paso 5

Con la herramienta Pluma (P) y la función Contornear trazado, añade algunos valores a nuestras espirales doradas con el color amarillo claro en el nuevo amarillo. O simplemente puedes dibujar líneas con el pincel inker.

Adding light volume lines for yellow shapesAdding light volume lines for yellow shapesAdding light volume lines for yellow shapes

Continúa para añadir líneas de color amarillo claro en cada forma amarilla.

Finish adding light volume lines for yellow shapesFinish adding light volume lines for yellow shapesFinish adding light volume lines for yellow shapes

Paso 6

En la nueva capa, repite con las líneas de color rojo brillante para las formas rojas. 

Red lvolume lines for Russian Folk style lettering in Adobe PhotoshopRed lvolume lines for Russian Folk style lettering in Adobe PhotoshopRed lvolume lines for Russian Folk style lettering in Adobe Photoshop

Si quieres cambiar el matiz del color, utiliza Tono/saturación (Comando-U) y cambia el parámetro de Saturación.

Hue Saturation Panel in Adobe PhotoshopHue Saturation Panel in Adobe PhotoshopHue Saturation Panel in Adobe Photoshop

Paso 7

Para añadir detalles a las bayas rojas grandes, añade círculos amarillos en la parte superior con la herramienta Elipse (U) y líneas amarillas en los lados.

Adding details to the berriesAdding details to the berriesAdding details to the berries

Paso 8

Ordena tus capas. Combina todas las capas rojas (líneas básicas delgadas, bayas y formas, excepto la capa volume lines red) y todas las capas amarillas (excepto las capas volume lines yellow y berries decoration). Tu panel Capas debería verse así:

Layers arrangement in Adobe PhotoshopLayers arrangement in Adobe PhotoshopLayers arrangement in Adobe Photoshop

4. Cómo añadir volumen y textura al diseño de letras

Paso 1

Momento de añadir algunos detalles bonitos. Crea una nueva capa de recorte arriba de la capa yellow. Con un pincel de textura (uso el pincel Rough Dry Fun Big! de Kyle T. Webster, o puedes tomar cualquier otro pincel de esta colección), añade textura con un color naranja. Establecí el Modo Multiplicar y Opacidad 50% para esta capa. Puedes incrementar o decrementar el tamaño del pincel con los botones [ y ]. Para eliminar puntos no deseados, usa la herramienta Borrador (E).

Adding texture by texture brush in Adobe PhotoshopAdding texture by texture brush in Adobe PhotoshopAdding texture by texture brush in Adobe Photoshop

Paso 2

Crea una nueva capa de recorte y añade alguna textura con un color amarillo claro. Establece esta capa en Modo Trama y Opacidad 50%.

Screen layer mode for texture layerScreen layer mode for texture layerScreen layer mode for texture layer

Paso 3

Repite los pasos con los colores rojos.

Textures by brush for red shapes layer of Russian folk style decorative ornamentTextures by brush for red shapes layer of Russian folk style decorative ornamentTextures by brush for red shapes layer of Russian folk style decorative ornament

Paso 4

Haz doble clic en el grupo lettering o haz clic derecho en la capa > Opciones de fusión.

Blending Option in Adobe PhotoshopBlending Option in Adobe PhotoshopBlending Option in Adobe Photoshop

Establece el modo de fusión de la Sombra paralela en Multiplicar, el color en Negro, Ángulo 90, Distancia 5 px, Tamaño 43 px y Ruido 16%. Puedes experimentar con los parámetros y cambiarlos hasta que tengas la apariencia deseada.

Drop Shadow parameters in Blending Options panel in Adobe PhotoshopDrop Shadow parameters in Blending Options panel in Adobe PhotoshopDrop Shadow parameters in Blending Options panel in Adobe Photoshop

Selecciona todas las capas del ornamento mientras mantienes presionada la tecla Mayúsculas y Combínalas (Comando-E).

Merge layers in Adobe PhotoshopMerge layers in Adobe PhotoshopMerge layers in Adobe Photoshop

Haz clic en Effects debajo del grupo lettering y mientras mantienes presionada la tecla Alt y sin soltar el mouse, arrástrala hacia la capa yellow. Acabas de copiar los efectos en otra capa. También, puedes eliminar las capas white bg y sketch porque ya no las necesitamos.

Copying effects to another layerCopying effects to another layerCopying effects to another layer

¡Fabuloso trabajo! ¡Terminaste la caligrafía rusa!

Con este método simple, puedes crear tarjetas con estilo diferente de lettering en Adobe Photoshop. Puedes usar este flujo de trabajo como base y elaborar tus propios diseños. Gracias por crear y experimentar conmigo. Disfruta el proceso y por favor ¡comparte tu resultado! 

resultresultresult

Encuentra hermosa caligrafía rusa en Envato Elements

En este tutorial aprendiste cómo crear una impactante tarjeta con ilustración de letras dibujadas. Aunque los resultados son magníficos, llevaron su tiempo. Si no tienes mucho tiempo, pero quieres resultados de similar calidad, ¡utiliza una de las descargas de fuentes cirílicas rusas que se muestran a continuación!

1. BD Megalona | Diseño de letras cirílicas con serifa (en formatos OTF, TTF y WOFF)

BD Megalona Russian Cyrillic Font DownloadBD Megalona Russian Cyrillic Font DownloadBD Megalona Russian Cyrillic Font Download

Iniciamos nuestra lista de fantásticas fuentes cirílicas con BD Megalona. Es una impresionante colección de más de 1,800 glifos en más de 200 lenguajes. La moderna letra te permite crear texto cautivante que hace resaltar proyectos. Úsala en revistas, sitios web y mucho más. Es una versátil descarga de fuentes rusas.

2. Psalta - Letras con diseño estilo ruso  (en formato OTF)

Psalta Cyrillic Lettering FontPsalta Cyrillic Lettering FontPsalta Cyrillic Lettering Font

Psalta es una tipografía contemporánea que toma influencias del tradicional lettering gótico. Pero no te preocupes, también es una descarga de fuente cirílica gracias a su extenso conjunto de glifos. Hay múltiples grosores para elegir, así que puedes usarla de la manera que quieras para tus creaciones.

3. Afjat Trends Light - Letras rusas, griegas y latinas (en formatos OTF, TTF, WOFF, WOFF2 y EOT)

Afjat Trends Light Cyrillic Style FontAfjat Trends Light Cyrillic Style FontAfjat Trends Light Cyrillic Style Font

Afjat Trends, proyecto tipográfico de Siwox Studios, ofrece un estilo único que es difícil de ignorar. Esta fuente cirílica tiene un aire moderno y está completa con ligaduras, alternativas y más. Se incluyen archivos web font, lo que te permite utilizarla online con facilidad.

4. Helmswald Post - Letras con diseño estilo ruso (en formatos OTF, WOFF y WOFF2)

Helmswald Post Russian Cyrillic Font DownloadHelmswald Post Russian Cyrillic Font DownloadHelmswald Post Russian Cyrillic Font Download

Helmswald Post es otra descarga de fuente estilo cirílico que tiene influencias góticas. La sensación medieval es rara en tipografías cirílicas, pero esta opción luce bien. Junto con otros glifos, la fuente también ofrece:

  • ligaduras
  • acentos europeos
  • diacríticos
  • alternativas

Estas características hacen a esta tipografía ideal para papelería u otros proyectos creativos.

5. Soulbind - Letra con diseño estilo cirílico (en formato OTF)

Soulbind Cyrillic Lettering FontSoulbind Cyrillic Lettering FontSoulbind Cyrillic Lettering Font

Soulbind es una estupenda manera de concluir nuestra lista de hermosas fuentes cirílicas. Es una tipografía excelente que tiene mucho carácter. También podrías decir que tiene muchos caracteres gracias al incluido conjunto de números, signos de puntuación y glifos del alfabeto latino. Si trabajas en proyectos de marca que necesiten un estilo cirílico, prueba esta.

Conclusión

Espero que hayas disfrutado este tutorial y hayas conocido algunas portentosas fuentes cirílicas de Envato Elements. Si quieres aprender más, ¡consulta nuestros otros fabulosos tutoriales y cursos de lettering con consejos profesionales!

One subscription.
Unlimited Downloads.
Get unlimited downloads