In this lesson we will create a poster with an inscription in the handwritten style that will add comfort to our home and a warm atmosphere in any interior. We will use various drawing tools and Adobe Photoshop functions, create beautiful letters from scratch and transfer them from paper to Photoshop, and then edit them so that they fit well into our poster.
By the end of this lesson, you will learn a few secrets that will inspire you to create other font illustrations, such as these. And if you’re wondering how your poster will look like in printed form and in a frame, you can use one of these mockups (for a fee).
- Editor’s Note: free mokapi you can find on our website in the Add-ons section
1. How to draw letters with the Pen tool
Getting started from scratch. To begin with, we need an idea of what we plan to create. Since we conceived an interior poster, I decided to choose a cute quote to create a cozy atmosphere. I made several miniature sketches with the words “Home is where your heart is” (“Home is where the heart is”), focusing on the word “home”.
On the first draft, I tried to insert text into the outline of the house, but then, it seemed to me, the elements of the illustration would be cramped, besides, the poster would have been loaded with unnecessary details, while the main element of the composition – actually, the inscription – would look enough monotone. In addition, the word “heart” (“heart”) does not stand out, and this is another important semantic element of the phrase, balancing with the word “home” (“home”).
Keeping all this in mind, I created another rough sketch (even more rough than the first), where I clearly distinguish both words. I also added an element of symbolism, depicting a stylized roof over the word “home” and putting the word “heart” in the heart. Now everything looks much more balanced and expressive. Let’s create a poster from the second draft!
If you want to use my sketch as a sample, right-click on the screenshot below and save it to your computer.
Let’s create a new document 3000 x 3000 pixels with a resolution of 300 ppi and put our sketch there.
With the tool Eyedropper (Pipette) (I) select a dark blue color from the outline and fill the background layer with the tool Paint bucket (Fill) (G).
Lower Opacity (opacity) draft up to 25%, making it translucent if it distracts you too much.
Now take the tool Pen (Feather) (P) and start to circle the letters in the word “home”. Circle the left base of the letter “H” with a broken line. Close the contour and go to the right base, which should be a little thinner.
Feel uncomfortable with the tool Pen(Feather) (P)? Do not worry, you just need to practice a little! In fact, this tool is not so scary, and using it is not as difficult as it may seem at first glance.
Create a rectangle for the crossbar, and now you can combine all the elements of the letter! Select them with the tool Direct selection (Outline selection) (A) and go to the outline operation menu on the top panel. Here let’s choose the option Combine shapes (merge shapes) and apply it by clicking Merge shape components (Merge shape components) at the bottom of the menu. Here, it turned out! Now all parts of the letter are combined!
Let’s move on – we circle the letter “O”. It will consist of several elements, and we will begin with the main thing. Try to make the line smooth and rounded; to do this, pull on the manipulators, exposing the key point. Make an oval, and then another inside.
Select both ovals with the tool Direct selection (Outline selection) (A) and this time select the option Exclude Overlapping Shapes (Exclude overlapping shapes) in the outline operations menu. Click Merge shape components (Combine the shape components) to cut the inner circle.
We can fill the letters in some color to see if the contour operations have worked. Let’s open the contour panel (Window> Path) (Window> Outlines) and click Fill path with foreground color (Fill the outline with the main color), which fills the outline with the main color, which is now white on the color panel.
Let’s click Undo (Step back) (Control-Alt-Z), which will cancel our previous action and remove the fill, and then continue with the letter.
With the tool Pen (Feather) (P) form the tail of the letter “O”, outlining the sketch. Start from the upper left side of the letter “O” and gradually move to the right, creating a curve shaped like a banana.
Remember that you can change the direction of the contour without releasing the mouse button (or the pen on the graphic tablet) and not switching between tools. Just click and drag to make the knobs visible. Then, holding down the mouse button, press Alt, turn and move the manipulator up. Close the contour, connecting it with the very first knot of the tail.
To move nodes we can always use the tool. Direct selection (Node selection) (A), making the lines smoother.
Let’s select both elements of the letter “O” and use the options Combine shapes (Combine figures) and Merge shape components (Merge shape components) to merge shapes.
We continue to work! With the tool Pen (Feather) (P) let’s circle the letter “M” with a broken line.
We turn to the letter “E”, it will be a little more difficult with it than with the previous letters. Start by creating an oval shape with the tool. Pen (Feather) (P), approximately as we did with the letter “O”. Use straight lines to form the tip of the letter, and then continue to form the rounded outline of the inside of the letter.
Gradually move up. Hold Alt to change the direction of the node manipulator to form the angle in the crossbar area of the letter “E” Complete the letter silhouette by closing the outline.
Add a shape that looks like a drop for the inside (“hole”) of a letter. Now we can select both elements and apply the option Exclude Overlapping Shapes (Exclude overlapping shapes) (don’t forget to use the option Merge shape components (Combine the components of the shape) after selecting the desired option in the operations menu with the contour).
We can check our letter by filling it with a color on the contour panel.
Now let’s add a tail on the other side of the crossbar, forming a curved shape with the tool Pen(Feather) (P).
Select both parts and click Combine shapes (merge shapes) and then Merge shape components (Combine the shape components) to apply the effect.
Fine! All letters of the word “home” are ready. Let’s take a look at them and use the contour panel to fill them with white.
And now let’s make the letters more interesting and diverse by applying a couple of effects to the fill.
2. How to add shadows and gradients
Let’s add volume to our letters with a gradient fill. Choose a tool Gradient (Gradient) (G) (it is in the same dropdown menu as the tool Paint bucket (Fill)).
First of all, go to the layers panel and fix the transparent pixels of the layer with the word “home”, so that everything that we add later applies only to the letters, without affecting the surrounding space.
Go to the color panel and turn blue as the main color and white as the background color.
Then take the tool Gradient (Gradient) (G) and drag from the bottom to the top of the word “home”, creating a vertical linear gradient from blue to white. You can check the gradient settings on the control panel above, as well as select its desired type.
Let’s create the shadow of the letters in the background so that the word “home” stands out even more. Create a new layer under the layer with the word “home”. Now, while leaving the new layer selected, hold down the Control key and click on the layer with the word “home”. So we highlight the letters.
Change the main color to dark blue in the color bar, take the tool Paint bucket (Fill) (G) and click to fill the area with color and create a dark blue copy of the word “home” on the new layer. Now we can move the bottom layer a few pixels down and to the right so that the blue shadow can be seen.
Now let’s see how we can add soft shadows to the letters, making them more voluminous. We will use the tool Pen (Feather) (P) or Freeform pen (Free feather) to create a shape. Let’s get closer (Control- +) to the letter “E” and draw a contour connecting its tail with the crossbar, as shown in the screenshot below.
We continue to build the contour, creating a rectangle. It does not have to be perfect – just make sure that it is wider than the letter.
Select the layer with the word “home” on the layers panel, hold down the Alt key and click on the button to create a new layer. In the new layer window that appears, check the box next to Use Previous Layer to Create Clipping Mask (Use the previous layer to create a clipping mask) to create a linked layer. You will see a small arrow next to the new layer, which indicates that everything you draw on it will be visible only inside the borders of the main layer objects.
Let’s see how it works. Right click and select Make Selection. With the tool Gradient (Gradient) (G) Create a diagonal linear gradient from blue to white.
Change the blending mode of the associated layer to Multiply (Multiplication) that will make the white part of the gradient transparent. Thus, we created a soft shadow that separates the crossbar (and tail) from the base of the letter “E”.
Add a similar shadow on top of the crossbar, this time changing the direction of the gradient to the opposite.
Using the same technique, add a shadow to the letter “O”, separating the rounded tail from the main part of the letter.
Now the whole word looks full and ready! Let’s move on to the next element of the composition!
3. How to add arbitrary shapes and digitize your labels
And then we add a heart. Fortunately, we do not have to draw it manually, as we can use the tool Custom shape (Proizovopolnaya figure). Select a heart from the list of shapes on the control panel above and create a heart of the required size, looking at our sketch.
Take the tool Direct selection (Node selection) (A) and move the node’s manipulators, making the heart plumper and rounded from the bottom. If you do not see manipulators, take the tool Convert point (Angle), click on the node and pull the arms out of it.
We can switch between fill and stroke (or apply both, or both to remove) on the control panel at the top, choosing the desired color from the drop-down menu.
While I remove the fill color, as I will need to see a sketch of the text inside the heart.
Let’s move on to the word “heart”. To create such handwritten letters, I actually prefer to use real brush-pen and paper. If you have always wanted to try lettering, this is a great opportunity to do it. One of the best brushes for beginners is Tombow Fudenosuke, or it can be any other brush of your choice.
You can also do this simply with a regular gel pen, creating a so-called “artificial calligraphy”, painting the thickenings by hand and filling them with color. In our case, it does not matter how you create these handwritten letters, as long as they come out well. In any case, we will edit them in Photoshop.
So, I just draw letters on a piece of paper, placing the letters so that the composition is shaped like a heart. Later we will be able to change the arrangement of our letters, if they do not fit into the heart, so don’t worry too much about it, but still try to make them look like letters on our sketch.
Scan your letters (or take a picture) and drag in Photoshop. Click Image> Adjustments> Levels (Control-L) (Image> Correction> Levels), here we will need to increase the overall contrast and brightness of the letter layer so that the dark letters turn really black, the background is white, and the paper texture disappears.
To do this, pull the black slider to the right, and the opposite (white) – to the left, so that they are closer to the central slider. You will see the difference in the process of moving both sliders – the image will become clearer and more accurate.
When you are satisfied with the contrast of your letters, press Select> Color Range (Select> Color Range) to open a window with parameters. Here you have chosen the default tool Eyedropper (Pipette). With its help, highlight the word “heart” (“heart”) by clicking on any black letter. Slider Fuzziness (Scatter) leave it at about 40% or adjust the value if you think that not all letters are highlighted. Click OK when you are ready and you will see “marching ants” around the letters. Copy (Control-C) letters.
Now we can insert (Control-V) the word “heart” in our poster and press Control-T to use the function Free transform (Free Transform) change the size of the label and rotate it so that it enters the heart.
If any letters are not included in the heart, use the tool Lasso (Lasso) (L) to select a letter (just circle it), then press Control-T again and rotate / resize the selected letter.
Let’s make our letters bright. Select the layer with the word “heart” and click Image> Adjustment> Invert (Image> Correction> Inversion), which changes the color of the letters from black to white.
Let’s add small details around the letters. Take the tool Brush (Brush) (B) and open or brush panel (Window> Brush (Window> Brush)) or right-click to open the brush sheet and select a hard round brush.
If you do not see these brushes in the list, open the drop-down menu by clicking on the small gear icon in the upper right corner and find in the list Round Brushes with Size (Round brushes with size). Click on them and either replace the current brushes with them, or add them to your list.
You can find the brush settings in the control panel above. I set and Opacity (opacity) and Flow (push) 100% so that the lines are thick and clear. I drew dots and strokes around the letter “H” with a graphic tablet.
Continue adding dots and strokes around the letters. When you are finished and are satisfied with the result, select the layer with the heart, click on the tool Custom shape (Arbitrary shape) to activate the shape menu on the control bar at the top, and then change the fill color to red to fill the shape.
Let’s make our word “heart” golden or metallic by applying a simple linear gradient from yellow to white. So it will look more three-dimensional.
Next we draw the word “is” (translator’s note: in this case, the word “is “does not have a literal translation, so if you create a poster with Russian words, then there will be no analogue to this word), which is repeated twice in the quote. You can draw it twice so that each element is unique or simply duplicated.
I used the same stiff round brush and drawing pad to draw the small letter “i”, using the sketch as an example. As you can see, at first I drew the upper and lower horizontal lines, and then added two vertical lines along the edges of the letter, indicating thickness. And finally, I just filled the inside of the letter with a light blue, almost white color.
Then I used the same technique to create the letter “s”: first I outline the silhouette, and then fill the inside with color.
This is what our poster looks like at the moment. I made a copy of the layer with the word “is” (translator’s note:here:“There” and “where”) (Control-J) and placed under the heart.
Now we can go to the next element of our composition and add the words “where your” (“where”) above the heart.
You can experiment with hard round or calligraphic Photoshop brushes to achieve the effect of handwriting if you have a hard hand and have a graphic tablet. Or you can repeat the process of creating the word “heart”.
So let’s write the phrase “where your” (“where”) on paper with a brush pen, and then scan it and add it to Photoshop. Make the phrase neat and contrast with the help of the correction Levels (Levels) (Control-L). Next, click Select> Color Range (Select> Color Range) to select black letters, and then copy (Control-C) and paste (Control-V) them into the poster. Use the command Free transform (Free Transform) (Control-T) to rotate words and resize them so that they fit well on top of the heart.
Do not forget to click Image> Adjustment> Invert (Image> Correction> Inversion) to make the letters white.
As you can see in the screenshots below, I also began to add red dots and strokes along the left edge of the heart, just as I did with the word “heart”. This creates an interesting and playful image, so let’s add more such elements.
Continue adding small decorative details around the heart using a stiff round brush with 100% opacity and pressure.
As soon as we finish work on the heart, let’s move to the top of the porter and draw a stylized roof over the word “home” in the same style. Create a new color, select light blue as the main color and, changing the brush size, create a triangular base of the roof, making it slightly thicker than dots and strokes around it.
I added a spiral element to the right of the roof, depicting a very simplified, almost abstract smoke from a mantelpiece.
Next, I added a few strokes under the word “home”. They are bent in the opposite direction, balancing the roof.
Let’s continue and add a new layer for the next batch of decorative elements. Then I made the main color much darker and added spirals, strokes and dots around the word “home”. You can click Image> Adjustment> Invert (Image> Correction> Invert) to invert the layer if the strokes are too dark and it’s not convenient to work with them, and then invert it back when you add all the necessary elements.
Our dark patterns are ready! Let’s continue!
We will add more spirals and strokes around the heart. Start from the left side of the image, and then go to the right, creating identical patterns so that the composition is balanced.
Finish by adding light blue horizontal stripes on either side of the word “is” at the bottom of the poster.
Home Sweet Home! Our Poster Ready!
Great job friends! I hope this lesson will inspire you to create other handwritten posters for your interior. Use all the secrets described in this lesson, and do not forget to share what you have done.
Do it with pleasure!