Saturday, May 15, 2021

How to Create a Russian Folk Art Hand-Lettering Design in Photoshop

How to Create a Russian Folk Art Hand-Lettering Design in Photoshop
Final product imageFinal product imageFinal product image
What You'll Be Creating

Create a hand-lettering illustration card with traditional Russian ornaments and the word "Spasibo", which means "Thank you". We'll also include a folk flower pattern and an old-fashioned Cyrillic font.

If you want to create a quality illustration card in less time, use one of the nice Cyrillic fonts available on Envato Elements! There are a lot of cool options that can suit different styles of projects. Soulbind, found below, is just one of the beautiful Cyrillic fonts available on the site.

Montclar Russian Cyrillic Font DownloadMontclar Russian Cyrillic Font DownloadMontclar Russian Cyrillic Font Download
You can trim a lot of design time by using one of the beautiful Cyrillic fonts from Envato Elements.

Are you ready to get started? Then let's create our stylized card right now!

1. How to Create the Hand Lettering Sketch

Today, we'll do some Slavic style lettering with the word Спасибо (spasibo), which means Thank You. To decorate our card, we'll use the traditional Russian floral ornament Хохлома (hohloma). It was created in the 17th century for decorating wooden tableware. It won't be the original ornament but the stylization of the lettering in Adobe Photoshop. 

The main things to remember when you're drawing stylized lettering are to make the right style for your letters and to find a good composition. So let's start with the sketch.

Step 1

To draw any difficult lettering style, I use the same very simple technique: 

  1. Draw the main shape of the letter with one line.
  2. Add volume and decoration (if the letter has any additional elements).

For example, to draw the letter C (in Russian it sounds like S), I drew a curved line and afterwards simply added the volume. Also, you can use this great Slavic style font or write letters by yourself. For additional inspiration, you can read a Wikipedia article about the Early Cyrillic alphabet, with examples of letters.

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

Step 2

I always draw my sketches using pencil and paper, take a photo on my smartphone, and send it to myself via email. You can use my sketch or draw your own. Don't forget to use the guidelines to make your lettering more or less straight.

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

To draw the Hohloma ornament, you can use this graphic set or create your own decoration. Remember that the main colors in Hohloma are red, gold, and black, and the ornament has a lot of floral curls.

Step 3

Time to move over to Photoshop. First of all, we need to prepare our workflow.Create a New Document (Command-N) in Adobe Photoshop and set the size to 1800px x 1500px, Resolution 144 px/inch. You can change your artboard's size afterwards by using Image > Canvas Size.

Just move your sketch photo from your folder right onto the artboard, and press Enter to place it. To adjust the artwork size, you can use the Transform tool (Command-T). If you want to change the canvas size, go to Image > Canvas Size or use the Crop Tool (C).

Step 4

To prepare the sketch for the coloring, I use Image > Adjustments > Hue/Saturation (Command-U) and set the Saturation to -100 and Levels (Command-L) as shown below.

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

Step 5

Before you begin, you must align the sketch. Command-R to show the rulers (or View > Rulers), click on the top ruler, and pull the guide to the desired location (the top of the letters). Repeat it with the bottom line. To align your sketch to your new guidelines, use the Transform Tool (Command-T) and scale it to the desired position. Pro tip: to move only one corner of your image, press Command and move the corner.

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

Now we can start the coloring process. Set the layer mode of your sketch to Multiply and set the Opacity to 15-20%. After that, add a new layer under the sketch layer. Don't forget to Lock the layer's position.

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

Now we can start to color!

2. How to Color the Letters

Step 1

The traditional Hohloma ornament usually has a dark background and bright gold and red decoration above it. Unlock the Background layer (simply click on the Lock icon near the layer's name on the Layers panel) and color it with the Bucket Tool (G) to a very dark brown color (almost black). Be sure that you choose the Paint Bucket Tool instead of the Gradient Tool.

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

It's difficult to see our sketch on this dark background. For easier drawing, create a new layer and fill it with white. We'll use it for drawing the main shapes. After drawing, we'll hide it for our convenience. To hide the layer, simply click the Eye icon near the layer's name.

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

Step 2

Let's start with the first letter. Create the new Layer under the sketch, and draw the letter C using the Pen Tool (P). If you don't know how to use the Pen Tool, check the great official Adobe tutorials about the Pen Tool and Shapes. Envato Tuts+ also has a very simple and clear Photoshop Pen Tool tutorial with animated GIFs. 

As you can see, I've added additional guidelines. Color your vector shapes to a warm yellow color.

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

If you need holes in your shapes, select the main shape and the hole shape using the Direct Selection Tool (A) and select Exclude Overlapping Shapes from the top panel.

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

To copy the shape, use Path Selection Tool (A, the black arrow), select the shape you need, hold Shift and Alt, and move it. We use the black arrow (Path Selection Tool) to select and move shapes and the white arrow (Direct Selection Tool) to edit the anchor points.

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

To add decorative circles, use the Ellipse Tool (U) and draw several circles (hold Shift to make a perfect circle). Select all ellipse layers and your letters layer (hold Shift and click the layer's name in the Layers panel) and combine them (Command-E).

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

We are finished with the shape of our letters—congratulations!

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

Step 3

Time to add textures! Hide (click the Eye icon) the white bg layer to see the original dark background. Create a clip layer above the letters layer:

  1. Hold down Alt, position the pointer over the line dividing the two layers in the Layers panel (the pointer changes to two overlapping circles), and then click.
  2. In the Layers panel, select the top layer of a pair of layers you want to group, and choose Layer > Create Clipping Mask.
Adding texture to the vector letteringAdding texture to the vector letteringAdding texture to the vector lettering

Step 4

To add the textures, choose the texture brush. I use the official Photoshop Kyle T. Webster Brushes, but you can choose any other awesome brush sets. To add a grainy texture, I use the Rough Dry Fun Big! brush from the Kyle T. Webster set. 

Paint light yellow on the top of your letters and light and darker orange on the bottom to make the color transition.

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

Group (Command-G) the layers' letters and texture. 

3. Creating the Ornament

Step 1

Unhide (click the Eye Icon) the white bg layer. Using the Pen Tool (P), draw the curls. We have two separate layers for yellow and red curls. We'll add the thin lines, berries, and details later.

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

Step 2

To draw thin lines, I've created a new layer for it and used a brush to draw it. I used Your New Favorite Inker from the Kyle Brushes set. Any other ink brush will work nicely too. If you have a drawing tablet with pen pressure, you can use a brush. Don't forget about the magic Command-Z to Undo your action. I use it a lot when working with accurate lines.

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

If you're drawing with a computer mouse, here is another variant. Select a Hard Round brush (or any other standard brush with 100% Hardness), set the desired size in the top panel, and open the Brush Settings (F5). Be sure that your Shape Dynamics > Control: Pen Pressure is on.

Brush Settings PanelBrush Settings PanelBrush Settings Panel

With the Pen Tool (P), draw the desired stroke path. Right-click the stroke and select the Stroke Path option.

Stroke pathStroke pathStroke path

Select Tool: Brush and check the Simulate Pressure checkbox.

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

Simply Delete the path (or press Enter) and voila! We have a nice line with pressure simulation. Play with the brush size to make the ideal line width.

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

Continue and draw all the yellow and red thin lines. This method is even easier than drawing with a brush.

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

Step 3

With the Ellipse Tool (U), draw yellow and red berries. Hold Shift to make the perfect circle, and use the Move Tool (V) or Path Selection Tool (A, the black arrow). Merge (select layers holding Shift and press Command-E) all yellow and red berries on separate layers.

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

Step 4

Use the Custom Shape Tool (U), select the flower shape from the dropdown menu, and draw the flower on the new layer. If you don't have this shape, use any other one, or simply draw the flower with the Pen Tool (P).

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

I merged (Command-E) the flower and yellow layers for my convenience. Hide the white bg layer and admire the result. Looks nice!

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

Step 5

With the Pen Tool (P) and the Stroke Path function, add some values to our gold curls with light yellow color on the new yellow. Or you can simply draw lines with the inker brush.

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

Continue to add light yellow lines on every yellow shape.

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

Step 6

On the new layer, repeat with the bright red lines for red shapes.

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

If you want to change the color tint, use Hue/Saturation (Command-U) and change the Saturation parameter.

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

Step 7

To add details to the big red berries, add yellow circles to the top with the Ellipse Tool (U) and yellow lines to the sides.

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

Step 8

Arrange our layers. Merge all red layers (thin basic lines, berries, and shapes, except the volume lines red layer) and all yellow layers (except the volume lines yellow and berries decoration layers). Your Layers panel should look like this:

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

4. How to Add Volume and Texture

Step 1

Time to add some nice details. Create a new Clip layer above the yellow layer. With a texture brush (I use Rough Dry Fun Big! brush from Kyle T. Webster, or you can take any other brush from this set), add some texture with an orange color. I set Multiply Mode and 50% Opacity for this layer. You can increase or decrease the brush size with the [ and ] buttons. To erase unwanted spots, use the Eraser Tool (E).

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

Step 2

Create a new Clip layer and add some light texture with a light yellow color. Set this layer to Screen Mode and 50% Opacity.

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

Step 3

Repeat the steps with the red colors.

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

Step 4

Double-click the lettering group or Right-click the layer > Blending Options.

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

Set the Drop Shadow blending mode to Multiply, color to Black, 90 Angle, 5 px Distance, 43 px Size, and 16% Noise. You can play with the parameters and change them until you have the desired look.

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

Select all of the ornament's layers while holding Shift, and Merge them (Command-E).

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

Click on the Effects under the lettering group and, while holding Alt and without releasing the mouse, drag it to the yellow layer. You just copied the effects to another layer. Also, you can delete the white bg and sketch layers because we don't need them anymore.

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

Awesome Work! You're Done!

With this simple method, you can create different style lettering cards in Adobe Photoshop. You can use this workflow as a base and create your own designs. Thank you for creating and experimenting with me. Enjoy the process and please share your result!

resultresultresult

Find Beautiful Cyrillic Fonts on Envato Elements

In this tutorial, you learned how to create a stunning illustration card with hand lettering. While the results are great, it does take some time. If you're short on hours but want equally quality results, use one of these Russian Cyrillic font downloads below!

1. BD Megalona | Text Serif Font Family (OTF, TTF, WOFF)

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

We kick off our list of nice Cyrillic fonts with BD Megalona. It's a stunning set of over 1,800 glyphs across more than 200 languages. This modern Cyrillic lettering font lets you create eye-catching text that pops in projects. Use it in magazines, websites, and a whole lot more. It's a versatile Russian Cyrillic lettering font download.

2. Psalta (OTF)

Psalta Cyrillic Lettering FontPsalta Cyrillic Lettering FontPsalta Cyrillic Lettering Font

Psalta is a contemporary blackletter typeface that takes cues from traditional Gothic lettering. But don't worry, it's also a Russian Cyrillic font download thanks to its extended glyph set. There are multiple font weights to choose from, so you can use Psalta in the way you want it for your creations.

3. Afjat Trends Light - Latin, Cyrillic & Greek (OTF, TTF, WOFF, WOFF2, EOT)

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

The Siwox Studios typeface project Afjat Trends offers a unique style that's hard to ignore. This Cyrillic lettering font has a modern flair and is complete with ligatures, alternates, and more. Web font files are also included, letting you use Cyrillic style font online with ease.

4. Helmswald Post (OTF, WOFF, WOFF2)

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

Helmswald Post is another Russian Cyrillic style font download that has Gothic influences. The medieval feel is rare in Cyrillic typefaces, but this option pulls it off well. Along with letter glyphs, Helmswald Post also offers:

  • ligatures
  • European accents
  • diacritics
  • alternates

These features make Helmswald Post a nice Cyrillic lettering font for stationery or other creative projects.

5. Soulbind (OTF)

Soulbind Cyrillic Lettering FontSoulbind Cyrillic Lettering FontSoulbind Cyrillic Lettering Font

Soulbind is a great way to wrap up our list of beautiful Cyrillic fonts. It's an excellent handwritten font that has a lot of character. You could also say that it has a lot of characters thanks to its included full set of numbers, punctuation, and Latin alphabet glyphs. If you're working on branding projects that need a Cyrillic style font, try out Soulbind.

Conclusion

I hope you enjoyed this tutorial and a look at some nice Cyrillic fonts from Envato Elements. If you want to learn more, check our other awesome step-by-step lettering tutorials and courses with pro tips!


No comments:

Post a Comment