How To: Make the Viget Inspire Background
A few of you have been asking, so here it is: An overview of how we put the Viget Inspire background together. The driving philosophy behind real-texture stuff like this is to fake as little as possible. No matter how many brushes you have or how good you are in Illustrator, there's a quality of unpredictability in real photographs and real, physical elements that adds great subtle qualities to any design.
After coming up with the concept of the sunrise/hikers, the next step was to find two real images to craft it from. We needed a real skyline with a row of trees, and a real bed of watercolor effects with the kind of subtle variations watercolors do best. The two lucky candidates were found on iStock.
The first step was to divide that beautiful photo up into three distinct, flat blocks that we can manipulate further. The sky was easy (just chop around the mountains), but the trees a little more difficulty. Fortunately, with a collage like this, being hyper-detailed isn't too important...a rough cut-out of the trees on the left side and some guesswork on the right were good enough.
Our victim.
Let's lose the sky completely.
Separate the image into two layers: One with mountains+trees and one with just the foreground trees. (Mountain layer hidden in this image)
Now we have three layers: Green background, Mountains, and Trees. (Mountain layer hidden in this image)
Adding the textures
Now, to fit the watercolor image we downloaded into the layers we've cut out. After adding the image, two more layers were stacked:
- A color layer with a few similar hues painted in with various grunge brushes. Switching brushes frequently keeps the texture nice and random.
- A Levels layer, for pumping up the resulting images (they were a little light)
Alt-click the space between the two layers to easily mask one into the other.
Add a layer of reds, maroons, and a little purple using brushes. Set the layer to "Multiply."
Drop the watercolor texture into the Mountains layer, too. You can move it a little or flip it so the colors don't line up from layer to layer.
Adding a "Multiply" layer of subtle blue and green gives the mountains some depth.
Drop the watercolor texture over the background and multiply it We're getting a lot of mileage out of this image!
Since the sky needs to be lighter, add a layer of blue-green above it and set it to "Screen." Mask out a spot or two, so the watercolor texture comes through a little stronger in some spots.
Still a little flat
What we have now looks nice, but it stills seemed a flat. We wanted to bring in more detail, but not random paint stuff...the idea was to bring back in some real nature textures, and let the randomness add some visual detail. This was accomplished by creating new, grayscale versions of the original images over the work we've done, and "Multiplying" it.
Copy the original tree and mountain layer. Desaturate them, and boost the levels so there's a higher contast.
Set both layers to "Multiply" and add some masks. Now, it's time to take out the details that just muddy the design (the sea of blank trees in the middle) by painting over them in the mask a little. This creates a nice flow of details throughout the image, where some pieces stand out more and other seem to fade back.
You can see how the details barely show in most of the image, but really come out in the bottom right.
Almost there...
Finally, time to add the name and logo. Two more uses for the watercolor texture: One inside the type itself, and a second use in the Inspire orb.
The text fits nicely behind the mountains.
The watercolor, set to 50%, washes out the logo a little.
Add the orb (which took a few more layer that aren't included here) and give it a few white glows. One on the top edge to give it a nice sunrise effect, one behind the mountains to wash out the logo a little more, and one behind the orb to add a radiance that covers some of the letters a little.
Taaaaaa-daaaaaaaaaaaaaaa.
Just like that?
Of course, the actual process was nowhere near this simple, and involved huge stacks of layers, several versions, many Diet Mountain Dews, and the near-constant second-guessing that makes design such a hazardous profession. While the end result has a pretty simple construction, the process that got us there took sketching, experimentation, and the feedback of the whole design team to get it all across the finish line.
What did I miss?
I know I skipped over a few details here and there, but was if you have any specific questions about achieving the effect,s let me know in the comments! I've had a couple requests for tutorials on making the Viget Inspire portraits, but that'll have to wait for another week.
wow this very cool, i ‘ve been wondering how did you do that. very excited about the next one.
thanks for sharing the details of how you made it, really nice!
1 question… what kind of grunge brushes did you use?
im working on a non-profit environmental research foundations website and your header inspired the header I am planning for on their site. it cool to compare your design process to what I’m currently in the middle of.
great stuff, keep it up.:)
Great post. Its easy to look at a design in awe and think, “There’s no way I could do that,” but tutorials like this make it seem much more attainable. Looking forward to the watercolor portraits!
@chris I don’t remember for sure, but there are tons of free, great brushes. The trick is to use them as texture instead of a traditional “brush”...don’t click and drag them, just click once, turn the brush, click again, and switch brushes. This keeps the same textures from showing up multiple times and looking fake.
@zach glad to hear the post was of some help on what sounds like a great project. You’ll have to let us know how it turns out.
@andrew I tend to read tutorials like this and think “oh my god, it only took 20 minutes?” Which is why I wanted to reiterate, at the end, that it took a loooottttt more work than I’ve mentioned in the tutorial.
Yeah dude, you rock! Good work on this.
Doug, I think this is great, because even if I don’t end up using this exact technique on future projects it gives me a lot of ideas on how to use similar methods to create new techniques. This is a great step-by-step tutorial, I look forward to seeing how it benefits other designs online.
Great article! You surprised me on how you guys put this one together, because I was convinced you did these with brushes on paper and then scanned them in.
Doug, I absolutely love this look! Thanks for breaking down the steps you took to achieve this. If I hadn’t actually seen you working on this in person, I would also have sworn you scanned in some real water color textures.
Yay you finally posted the explanation you mentioned you were putting together! That’s very awesome.
I really liked the part where you mentioned “the near-constant second-guessing that makes design such a hazardous profession”. Thank you! I find that is more killer than any lack of inspiration or mental design blocks. I have a real issue with trusting my own judgment and going with my first instincts. While I find this is good to a point (especially initially) in that reworking and doing multiple versions of a project leads to a much more refined visual output, it also has a tendency to never stop once it has served its purpose. Like, I am never satisfied with what I end up with and am constantly losing sight of what I really want to achieve later in the process (very OCD-ish pangs of wanting to change lots of things, basically, because I have doubts that anything is ever completely good enough).
It’s very easy to lose your way in your own sea of self-doubts.
@brandi it’s nice to hear someone else voice that opinion. I’ve found that, over the years, I’ve eventually been able to accept the dissatisfaction with the final result, so long as I’m sure I made purposeful decisions throughout the design process. For this project, choosing the watercolor look was a capital-D Decision which I didn’t second-guess, but since I didn’t plan much more beyond that, it took some guessing and backtracking to get to the final result.
It seems like the more you guess while designing, the more you doubt your guesses later (and often, rightly so).
That’s very good advice for a young designer with a good eye but penchant for self-doubt like myself, thanks Doug :)
You just had to show me up :)
Seriously, thanks for sharing this.
Doug,
This is an amazing tutorial. Thank you for bringing us into your thinking and method of execution. I hope to see some more great tutorials come out of this site.
Thanks a bunch!
I big surprise! I even think it was nature… oh mg god!
Oh...These are not natures real pictures and designed by you.
Amazing work!
great stuff!
Thanks for sharing the secrets behind your beautiful watercolour background, Doug. Fascinating read. Though I thought that it involved manual drawings, didn’t realize it was based on two images from istockphoto and loads of photoshop trickery ;)
stunning work!
i love your stuff guys.
would be honored to have you guys participate in our design inspired event sometime. check out www.xindc.tv when you have a second. i’m always excited to meet other passionate designers in the dc area. btw - thanks for the killer blog.
-g
Man, I’m so disappointed.
I liked this so much better when I thought it was made by hand.
Doug,
Thanks for sharing the design process! I agree that with the ‘near-constant second-guessing’ remark that you made… so true!
@chris and those of you, who want some more of these watercolor brushes, i have collected some links for you right here:
Bittbox - Free Hi-Res Watercolor Brushes
Fudgegraphics - High Resolution Watercolour Brushes
Thanks for the links, Jimmy! These are great brushes.
Awesome post.
Trackback URL: http://www.viget.com/trackback/1135/
Comments for this entry were closed after 60 days.
Next entry: Why Must The Shoemaker's Children Go Without Shoes?
Previous entry: Defining the Designer

Recent Comments
The capcha code was Ill and so is your work. ill....very good
- Haya on 'Creating Unique Shapes Using Actionscript'.
- Erik Olson on 'Creating Unique Shapes Using Actionscript'.
- Rainbow on 'Resizing rounded rectangles in Photoshop'.
Subscribe to Comments RSS