How to Create a Killer Watercolor Header Using Crayola Paints and an iPhone

Watercolor is all the rage these days.

I probably don’t need to tell you that although it’s among the most analogue of media, it translates quite well to the digital world.

When I was crafting my design studio’s website, for instance, I chose to create custom watercolor headers for every page. They make a stunning statement and draw the eye, but don’t require great technical skill or expensive supplies.

Don’t believe me? Follow along as I show you how to make an amazing cloud motif using Crayola paints and an iPhone!

First, set up your supplies

First, set up your supplies

You’ll need watercolors, of course: Any type will do, but I’m on a budget, so I used some old Crayola paints I had lying around. You’ll also need brushes of various sizes, a jar of water, a pencil, a fine-tipped Sharpie and watercolor paper. Real watercolor paper has a much more forgiving texture than cardstock or printer paper, so I don’t recommend substituting.

Additionally, you’ll need Photoshop* to cut out the image and place it on a transparent background, as well as a camera. (Full disclosure: I used my Nikon D80 for several of these pictures, but the photo I actually used to make the header was taken using my iPhone.)

Begin by penciling your motif onto a piece of watercolor paper

Draw lightly. When you’re happy with the design, go over it in Sharpie and erase the pencil. Mine looks like this:

Begin by penciling your motif onto a piece of watercolor paper

Begin to fill in your sketch

If you’re using a cloud motif like me, consider using two different colors to fill in the main part of the cloud and its belly, which in nature often catches a different color as the sun sets.

If you want to add some highlights like I have, take a plain wet brush and gently remove some paint between the two colors. Here’s my first cloud:

Begin to fill in your sketch

Fill in the rest of your motif using various colors

For my clouds, I used a variety of warm colors. If you were painting a stretch of grass or a forest, however, you would choose an array of cool greens and blues. Just make sure that you stick to one side of the color wheel: full rainbow effects are jarring to the eye.

Note that I’ve left a little bit of white space against the edges of the clouds. I find this differentiates the colors from one another and adds another dimension to the painting. I like the handmade messy look, but if you like a more exacting effect, go for it.

Fill in the rest of your motif using various colors

Give your painting time to dry so you can determine whether your colors look right. In the above photo, for instance, I discovered that my clouds were a little too pale once they dried. I didn’t like how the colors were similar instead of standing out boldly against one another. So I repainted them, and once I was happy with the effect, I took this picture with my iPhone:

I didn’t like how the colors were similar instead of standing out boldly against one another, so I repainted them

When taking your picture, aim for as much natural light as possible. If it’s too dark inside your house, go outside and put your picture on the ground before photographing. Never shoot at night, and avoid rooms with a bunch of electric light, which makes the image look too yellow.

Once you’ve taken a picture you like, open up the image in Photoshop*

Find the quick selection tool, which looks like a little paintbrush with a dotted circle next to it. Click on it in the toolbar, then look at the top bar, which should now display the quick selection tool’s settings. Click on the icon with the plus sign, then begin to drag it across the image until the dotted line outlines the areas you want to select. Applied to one of my clouds, it looks like this:

Begin selecting your clouds using the quick selection tool

Outline the entire cloud, using the minus quick selection tool to remove extra space you’ve accidentally included. Be sure to include all of the black lines from the image, as it can look weird if they get cut off.

Once you’re finished tweaking (which can take a while if you’re anal like I am), open a new window by going to File > New or using keyboard shortcuts (Command-N for Mac or Control-N for Windows). Photoshop will automatically size the new window so that your selected image fits perfectly, so don’t adjust the size. DO make sure that under Background Contents, you’ve selected Transparent. Paste the image in with Edit > Paste or Command-V/Control-V. It will look like this:

Paste the clouds into a new Photoshop document

Now look at the photo itself and determine if the color looks right

I find that my photos are sometimes a little off-color even when I do my best to shoot with good light. When this is the case, one simple trick saves me 90 percent of the time.

Go to the Layers toolbar, click the little icon that looks like a half-black, half-white circle down at the bottom, and select Curves. Click the white-filled eyedropper (the lowest one), and then click on the whitest part of your photo.

You’re effectively telling the program “This part is supposed to be white,” and it will adjust the entire photo accordingly, making it much brighter. You can see the difference here:

Use ‘curves’ to adjust the white balance of your image

One last step

If your file size is too large, cut it down by changing the dimensions of the photo. With most banners, you won’t need a width of more than 1200px, and anything bigger could slow down your site. Avoid this by clicking Image > Image Size and selecting reasonable dimensions.

Now save the image by going to File > Save for Web & Devices. Ensure that Transparency is still checked and hit save. Check out your new, transparent-background, analogue-media custom header!

Your new, transparent-background, analogue-media custom header!

Now all you have to do is upload your work of art to your website or blog! So what do you think? Now that you’ve seen the magic at work, what are your ideas for how to use this process? Tell us in the comments below!

About Sarah Moore
Sarah Moore is a designer and illustrator, and the founder of New Leaf Book Nook. She is obsessed with helping creatives find their perfect brand so they can feel confident sharing their products, services and messages with the world. She believes everyone deserves to love what they do, and to look good doing it!