How to make a watercolor blog header from start to finish

Creativity

Apr 4

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.

Pin for later

How to make a watercolor blog header from start to finish in Photoshop | Hello Brio tutorials

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.

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.

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

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

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.

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

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

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

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

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

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.

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.

You can also use your watercolor and apply it as a texture.

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!