How to make a watercolor blog header from start to finish

Watercolor is hugely popular with the resurgence of handmade styles in graphic and web design. Beautiful watercolor layering and varying paint application techniques will give you a unique design each time. Each watercolor swath is like a snowflake, and is a perfect candidate for a blog header.

Learn how to make a personalized watercolor blog header from start to finish (Click to tweet!). This particular tutorial features hand lettering too, but feel free to mix and match the sections of the tutorial so you're working with mediums and styles you're comfortable with.

Click through to learn how to make your own pretty blog watercolor header from start to finish - Includes downloadable freebies!

Enjoy!

Step 1: Gather Your Materials Needed

To follow along from start to finish, here are the supplies you'll need:

Step 2: Grab the Rough Dimensions of Your Blog Header

This step is important if you want to have an isolated watercolor streak that doesn't get cut off by the page boundaries. I'm not saying you need to measure out exact pixels or measurements of anything, but I'm just advising that you keep the overall ratio in mind for when you're creating your watercolor portion. If you don't mind it getting cut off at the top like my blog header is, then you can skip this step.

Let's say your blog header area is approximately 1000px by 300px (you can grab the dimensions by taking a screenshot and measuring in Photoshop, or by using a web browser extension like Measure It). This 10:3 aspect ratio is much different than an area that is 1:1 or 4:3, for example.

For this tutorial I'll try to make sure my watercolor fits in the 1000px by 400px (or 5:2im aspect ratio) range.

Step 3: Grab Your Watercolor Supplies and Paint

If you're unfamiliar with watercolor, I highly recommend Yao Cheng's class. I was terrified of watercolor until I took the class, and now I feel the urge to incorporate it into my art often! Learning color mixing, blending, and fun techniques like dragging color and dripping color will get you really awesome end-results.

For example, I learned how to get a better grasp on gradients of color and blending from one color to another.

Experiment with watercolor
Experiment with watercolor

Paint away, keeping your aspect ratio in mind. I recommend painting on paper that will fit on your scanner. Try different color combinations and blending techniques until you have something you like.

Paint multiple watercolor banners. Experiment until you get something you like.
Paint multiple watercolor banners. Experiment until you get something you like.

Step 4: Digitize Your Watercolor

When your paint is dry, scan in your work at 300dpi and open in Photoshop. You may need to press gently down on your scanner lid so the paper lies flat.

With the Lasso Tool (L), draw a shape around the watercolor stroke to select it. Copy your selection (CMD+C) and open a new document (CMD+N). Paste (CMD+V) your work into the new document.

Select your watercolor stroke using the lasso tool
Select your watercolor stroke using the lasso tool
Copy and paste it into a new document
Copy and paste it into a new document

For this next step, download this amazing free Photoshop action and install it by double-clicking on the action.

Open the Action window (Window → Actions) and locate the Action Set, named Media Militia - Removal Techniques. Expand the action folder and select White BG Removal - with Color. Make sure your Layer 1 is selected and then click the Play button on the Action window to run the action.

Select the White BG Removal with Color action and hit play
Select the White BG Removal with Color action and hit play

When prompted, click Continue. Then, drag the white slider under Input Levels to the left until your background changes to bright white. Click OK. Photoshop will then continue to run through the rest of the actions in that set.

Adjust Levels
Adjust Levels

Now you will have two layers in your layer palette: one with your isolated watercolor image (Layer 2), and the other with your original. Create a white layer under Layer 2 so you can see what it will look like. You may need to duplicate the layer several times until it reaches your desired saturation (do this by right-clicking on Layer 2 and then hitting Duplicate Layer).

Here's my stroke with one layer.

The preview of the one transparent layer of watercolor
The preview of the one transparent layer of watercolor

I duplicated this twice, so now I have 3 layers of watercolor. It may seem like a pain to have to duplicate the layer over and over again, but this actually gives you a lot of control over your end product. You may like your watercolor less saturated after all. Depending on how saturated your original work was, you may need to duplicate it many more times.

Duplicate layers of watercolor so your stroke becomes more saturated
Duplicate layers of watercolor so your stroke becomes more saturated

Select all of your duplicated layers and hit CMD+E to merge all of those layers. Now, you can delete your white background and original and have your beautiful watercolor stroke on a transparent background.

Merge your layers and delete your background and original
Merge your layers and delete your background and original

If you're going to be using your watercolor stroke on a very dark background, test it by adding a layer of black fill underneath, and clean up with an eraser as needed.

Clean up page edges with an eraser by testing it over a black background
Clean up page edges with an eraser by testing it over a black background

Step 5: Hand Letter Your Blog Name and Digitize It

While you're waiting for your watercolor to dry, start to work on hand lettering your blog name. You can work with block letters, brush letters, or whatever you feel comfortable with. Just make sure you're working with black ink on white paper, as this will be the easiest to digitize.

Here are some lettering techniques you can work with here:

For this tutorial, I'm going to use some brush lettering and scan my work, then digitize it in Illustrator.

Blog name hand lettered with brush calligraphy and scanned
Blog name hand lettered with brush calligraphy and scanned
Digitized hand lettering in Illustrator
Digitized hand lettering in Illustrator

Step 6: Lay Out Your Text Over Your Watercolor

Lay your text over your watercolor and play around with size, position, and color. Be careful not to scale your lettering work larger unless you're working with vectorized lettering.

Here's how it looks when I just plop my lettering on top.

Adjust your text and watercolor stroke
Adjust your text and watercolor stroke

Here, I've played with changing the text to white, resizing it, and previewing it all on a white background. I also rotated the watercolor stroke around so it would fit with the lettering better.

Use your watercolor as a texture and apply it to your lettering with image mask in Photoshop
Use your watercolor as a texture and apply it to your lettering with image mask in Photoshop

Save For Web and Install

When saving, make sure to save it for web for faster loading as a JPEG or PNG if you need a transparent background. Upload away. Congrats - you've just made a beautiful watercolor blog header!

I hope this tutorial was helpful. Please give it a shot and share it with friends!

Want more Photoshop and illustration tutorials? Make sure to sign up for my weekly newsletter and follow me on Bloglovin'. Also, check out my Skillshare class on How to Make Your Own Hand Drawn Font!