In Tutorials May 16, 200827
Create a Nature Inspired Painted Background in Photoshop
When I first saw the Viget Inspire Blog, I was very impressed. The background just grabs and pulls the reader right in. After studying it for a while, I still couldn’t determine if it was made from an actual painting or if it was all created from scratch in Photoshop. Regardless of how it was created, it makes for a great looking design. In this tutorial, I will you show you my own technique for creating this type of background.
The End Result
Here is a preview of the background we will be creating.
Step 1
Before we get started, you need to grab a couple of freebies and put them in your Photoshop brushes folder:
Watercolor Brushes from Bittbox
Complete Tree Brush Pack from Brusheezy
Since we are designing for the web with a target resolution of 1024px wide, lets open a new document and set the width to 1100px and the height to 900px. That should give us plenty of room to work.
First we need to decide what our painting will consist of and what our color scheme will be. For this example, I have decided to use three main layers of color: the sky, distant mountains, and a rolling hill with trees. I like to create swatches of the colors I will be using so I can quickly select from them.
Step 2
Now it’s time to start painting. Let’s start with the sky since it is behind everything else. Select the Brush Tool (B), and then from the Brush Preset Picker, load BB_Watercolor_II. These are the watercolor brushes that we downloaded from Bittbox, and they are high-res brushes, so make sure to keep the brush size between 300 and 400.
From our sky color palette, select the lightest color. Begin in the middle of the document and start placing single brush strokes across the page using different watercolor brushes set at varying sizes. Continue to place strokes until you have painted an area that spans the width of the document and is about 300px high.
Just like a real painting, don’t over work it. You will end up losing all of the stroke details that make these brushes so beautiful.
Now repeat this using the other colors from the sky palette, each time moving up so that you are overlapping the previous color.
Step 3
Now lets create the distant mountains. Pick the mid tone color from your mountains palette and using the Pen Tool (P), draw the desired shape of the mountain range spanning the length of the document. This will act as a guide for our brush strokes and a solid foundation of color.
Select the Brush Tool again, and select a watercolor brush that is mostly flat on top. Don’t forget to keep the brush size around 300px. With the top edge of the brush slightly overlapping the top edge of the mountains, follow along the curve placing strokes along the way. This will replace the smooth edge with small brush marks.
Our mountains are a little flat, so lets give them some depth. Select a brush that has a nice angle and set the size between 100 and 150. Using the darkest and lightest colors for our mountains, add shadows and highlights. Remember to keep it subtle since the mountains are still far away and details should be minimal.
Step 4
Let’s use the same technique from Step 3 to make the rolling hill in the foreground. Only this time keep the curves much flatter and use the darkest color from our hill palette. Also, make sure the placement doesn’t cover up too much of the mountains.
Now, lets bring our hill to life with some trees. As you did earlier with the watercolor brushes, load in the tree brushes. The name of the set is Trees_by_Horhew. These are also high-res, so size them down accordingly. Placement is totally up to you, but dont overdo it.
After the trees are in place, use the remaining colors chosen for our hill to give our foreground some detail. Choose a watercolor brush again, and add random stokes to the hill. Also, size you brush way down so that it is smaller than the trees, and use it to add highlights and shadows to the foliage.
Step 5
The colors and brush strokes of our painting look really great, but everything seems a little too smooth. It needs some texture. Create a layer above all of the other layers, and set it’s blend mode to multiply. Using the Brush Tool, select one of the watercolor brushes. Only this time, leave it set to it’s maximum size. Select a mid-tone color from the sky, and apply one brush stroke in the middle of the document. Using this oversized brush allowed a lot of detail and texture to be added in one click. Experiment with the different brushes to achieve the best affect.
Step 6
The texture helped, but it is still a little too smooth. Merge all of the layers, and add some noise(Filter > Noise> Add Noise) with an amount of .3.
Step 7
Finally, lets add a mocked up website layout to see how our painted background looks.
The great thing about this technique is that it is really easy, fun, and the possibilities are endless. Experiment with different colors, and try using some great landscape photos as inspiration.
27 Comments
May 16, 2008
Excellent tutorial. Have admired watercolor sites in the past and this has inspired me to develop a site with these techniques. Thanks for sharing.
May 16, 2008
you continue to impress
May 16, 2008
Brilliant tutorial, man. Thanks for taking the time to write this up!
May 18, 2008
Love this effect and tips. Thanks.
May 18, 2008
Dude, as usual…I think you are simply awesome…well done.
May 18, 2008
You are awesome. This rocks. I had seen the Viget Blog and was wanting to go that direction with my website since it goes a lot with what my company is about, I had actually considered just painting and taking a photograph of it, but now, you have shown me the way. Thank you!
May 20, 2008
Great post! I wanted to note that we didn’t use many brushes for the effect, but instead found images of watercolors on iStock for the base texture. This gave the color a little more depth, and provided some of the little color shifts, but it definitely reduced the amount of control we had. I think a big aspect of the watercolor looks is the way colors tend to bleed into eachother a little, so we also put some hue layers over top and tweaked some of the flat colors to create some variation.
May 20, 2008
Doug,
Thanks for letting us know how you created the Inspire background, and good point about the colors bleeding into each other. That is a subtle detail that goes a long way in adding to the overall look.
May 20, 2008
Hmm.. I am having a little trouble getting started with this
I really want to learn how to better use photoshop, since designing the web page is my low point, but I can’t pick up on using brushes as easily as I wish I could.
How exactly did you do it? did you select one brush and streak it across the canvas? Or did you select a brush, paint it a few times randomly, and then do the same with others?
the tutorial looks very awesome, it would be great if you could share what you did with the brushes for us beginners
May 20, 2008
Nouman,
I may need to reword that part a bit to make it more clear.
You are right about painting with one brush randomly and then selecting another. Do not click and drag the brush. Just use a single click in one place. Also, experiment with varying sizes. This type of technique does take a little bit of practice.
Let me know if you have any more questions.
May 21, 2008
soo great, thanks buddy
May 21, 2008
This is very helpful, I guess a lot of us were wondering how the guys at Viget came up with this.
And very cool of Doug to come and provide some more insight into the process.
May 23, 2008
Hello, cool stuff. Thaknk you!
One tipp: I made in the sky a little gradient (brown to transparent) to get a little smother look!
Greetz from Germany!
May 23, 2008
I also found the key really is getting the right color palette dialed in for your different sections. I am not sure if you guys have ever been to Colour Lovers, but it is an awesome resource when selecting your colors.
http://www.colourlovers.com/
May 23, 2008
scott,
Good point about choosing the right colors. That is one of the most important steps. I also use Colour Lovers. It is a great resource.
May 23, 2008
This may be off topic, but I’d highly recommend Adobe Kuler for anyone who hasn’t tried it out:
http://kuler.adobe.com/
And thanks for updating the brush step, Henry.
May 31, 2008
[...] Create a Nature Inspired Painted Background in Photoshop [...]
Jun 2, 2008
that’s so awesome. thanks for the tutorial
Jun 3, 2008
great job. it seems wonderful. hope i can do something like that. thanks…
Jun 10, 2008
Best tut of the year! How about a comment showcase?
Jun 13, 2008
Very cool but do you have GIMP tips, I can’t afford Photoshop at this point.
Jun 13, 2008
cribcat,
Unfortunately, at this time, I don’t have any tips for GIMP since I have never used it. Sorry about that.
Jun 14, 2008
That’s amazing and so easy to do. I am currently in the process of re-desigining my blog, but I am crap at it. Currently it is just too plain.
Jun 17, 2008
Excellent. Thanks soooo much.
Jun 24, 2008
[...] 9. Create a Nature Inspired Painted Background in Photoshop(Shameless self promotion) [...]
Jun 25, 2008
Beautiful work and excellent palette choice, you have inspired me to give this a shot in the future!
Aug 6, 2008
Extraordinary article! This is my “interpretation”: http://www.jankoatwarpspeed.com/post/2008/08/05/Wild-Nature-Wild-wild-BlogEngineNET-theme.aspx
Leave a Comment