Close and Go BackBack to Viget

How To: Make the Viget Inspire Background

Doug Avery
Doug Avery, ON THE TOPIC OF Tips and Tricks
May30 25

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:

  1. A color layer with a few similar hues painted in with various grunge brushes. Switching brushes frequently keeps the texture nice and random.
  2. 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.

M.Mahgoub said on 05/30 at 09:51 PM

wow this very cool, i ‘ve been wondering how did you do that. very excited about the next one.

chris said on 05/30 at 10:00 PM

thanks for sharing the details of how you made it, really nice!

1 question… what kind of grunge brushes did you use?

Zach LeBar said on 05/30 at 10:39 PM

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.:)

Andrew Witherspoon said on 05/31 at 12:16 PM

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!

Doug Avery said on 05/31 at 12:34 PM

@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.

A few examples.

@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.

chris said on 06/01 at 12:06 AM

Doug,

thanks for explaining, and for the links :)

Justin Thorp said on 06/01 at 02:40 PM

Yeah dude, you rock!  Good work on this.

Samantha said on 06/02 at 04:58 PM

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.

Phil said on 06/02 at 05:26 PM

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.

Jim Basio said on 06/02 at 06:03 PM

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.

Brandi said on 06/02 at 08:46 PM

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.

Doug Avery said on 06/03 at 08:29 AM

@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).

Brandi said on 06/04 at 06:44 PM

That’s very good advice for a young designer with a good eye but penchant for self-doubt like myself, thanks Doug :)

Henry Jones said on 06/06 at 08:57 AM

You just had to show me up :)

Seriously, thanks for sharing this.

Website Design said on 06/11 at 12:01 AM

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!

Chinese SEO Services said on 06/13 at 11:11 PM

I big surprise! I even think it was nature… oh mg god!

SEO Company India said on 06/17 at 07:34 AM

Oh...These are not natures real pictures and designed by you.

Amazing work!

Jesse Thomas said on 06/17 at 08:33 AM

great stuff!

inspirationbit said on 06/17 at 02:02 PM

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 ;)

graham said on 06/18 at 06:55 PM

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

JZ said on 06/19 at 11:14 AM

Man, I’m so disappointed.

I liked this so much better when I thought it was made by hand.

Soroush said on 06/25 at 06:08 AM

Doug,
Thanks for sharing the design process! I agree that with the ‘near-constant second-guessing’ remark that you made… so true!

Jimmy Rittenborg said on 07/01 at 01:41 PM

@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

Bittbox - Free Hi-Res Splatter Brushes

Bittbox - Free Hi-Res Grunge Ink Splatter Brushes

Doug Avery said on 07/01 at 05:30 PM

Thanks for the links, Jimmy! These are great brushes.

Matt! said on 07/26 at 01:30 AM

Awesome post.

We're The Designers

at Viget Labs. We write about design news, trends, techniques, buildout, inspiration, CSS, and our projects.

What's a-twitter?

Follow us @VigetInspire for updates of the goings-on here or @Viget for more from all of the Viget crew. #thatisall

Recent Comments

@brad

It makes little difference when using native EE functionality or Structure to add pages, it’s just that if you want to add a sub page, you need to remember to assign a...

Subscribe to Comments RSS RSS

Contact Us

Have any questions, comments, ideas, or secrets to share? Let us know.


What color is the sky?

Sorry, you need to have Javascript enabled to use this form. (Don't blame us, blame the spammers!) If you'd like to contact us, please visit our Contact page.