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.
If you want to stay away from watercolor altogether, I've created a FREE resource of 9 watercolor strokes that you can download (see Step 4).
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.
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.
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.
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.
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.
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.
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.
You're ready for the next step!
Or - Grab Watercolor Freebies!
Want to stay away from the watercolor mess altogether?
I've created some free watercolor resources for you that you can download when you become a Briolette.
These watercolor freebies are high res and have a transparent background (PNG file) so you can place them on top of any background.
The full set of 9 watercolor strokes is available in the shop!
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:
- Brush lettering
- Wacom tablet brush lettering style
- Image Trace in Illustrator
- Blend mode in Photoshop
- Digitize using the Pen Tool in Illustrator
- Vectorize without Photoshop or 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.
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.
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!
There are a ton of helpful hints jam packed in here. Remember to download the free watercolor strokes by becoming a Briolette!
I hope this tutorial was helpful. Please give it a shot and share it with friends!