Oct 25
Design Watercolor Effect Menu
This is a two-part tutorial on how to create an artistic and un-typical CSS list menu as seen on Web Designer Wall. In the first part (this article), I will show you how to design a watercolor effect menu in Photoshop. Then in next tutorial, I will show you how to slice the menu and code in CSS. If you need some inspiration on creating an artistic menu, visit our previous post on artistic websites. Ready? Let’s begin Part 1. (Update: Part 2 is ready - Advanced CSS Menu)
Preview
Here is a preview of the final image:
1. Notepaper stock image
First you need to find a notepaper stock image. You can buy stock photo from iStock or scan from a notepad.
Cutout the notepaper and apply 2px drop shadow effect.
2. Watercolor effects
Cmd + click on the notepaper layer to load the selection. Create a new Layer Group and click on the Add Layer Mask mini icon in the Layers palette. This way everything within the Layer Group will be masked.
Create a new layer. Choose a pink color (or any pastel color), select the Pencil tool, set the tool Opacity to 10%, brush size 100px, and drag around the document as you are doing a watercolor painting.
Repeat this step until you get multi layers of watercolor effects.
3. Add details
Find some coffee stain images, paste it in and set the layer blending mode to Multiply.
Dirty and splatter effect: download and use the splatter or watercolor Photoshop brushes from Bittbox.
Add some pencil sketch illustrations. You can either scan your marker sketches or use vector illustration.
Make a triangle selection in the corner, pick a grey color and apply a gradient to make the wrinkle effect.
4. Hand wrting text
If you don’t have any nice hand writing fonts, go to Dafont or Urban Fonts to download them. Create a new Layer Group and enter the navigation text.
Find a different font, enter the menu mouseover text.
5. Washout RSS icon
Use the Eraser tool, choose one of the splatter brushes, set tool Opacity to 10% and randomly erase the edge. Then paint some brown color overlay the icon to give the dirty effect.
6. Sketchy strokes
Sketchy or pencil strokes can be easily created in Adobe Illustrator. Draw a shape or path, open the Brushes palette, click on the charcoal brush and set the Stroke weight to 0.25pt.
7. Final
Here is my final image. If you want to spend more time on the details, you can add paper clips, tapes, post note, pencil sketches, etc.
Subscribe RSS
Don’t forget to subscribe our RSS to stay in touch with our next tutorial on how to code the menu in CSS.
Update: Part 2 is ready
Please continue to read part 2 on how to code an Advanced CSS Menu.
Event: Future of Web Design Advanced CSS Menu
Comments
Pages: 16 15 14 13 12 11 10 9 8 7 6 … 1 » Show All
There are 156 comments (+Add)
Pages: 16 15 14 13 12 11 10 9 8 7 6 … 1 » Show All
Post Your Comments
Loading ...
156 kusuma http://fkrnand.blogspot.com
June 12th, 2009 at 10:02 pm
so much i love it!
155 photo retouching http://photorestorationretouching.com/services.html
May 11th, 2009 at 11:56 am
Great looking result. I like the drawing effect you went for in this design.
154 CgBaran Tuts http://tuts.cgbaran.com
April 25th, 2009 at 12:10 pm
Great tutorial thanks
153 Frogger http://www.theroguebutterfly.wordpress.com
April 3rd, 2009 at 7:28 pm
i agree it is better on mac i also love using Adobe illustrator there is a way of making pictures look like watercolor paintings on photoshop http://www.photoshopessentials.com/photo-effects/watercolor-painting/
152 chingchong
March 26th, 2009 at 8:29 pm
love the water color effect.
photoshop can be used to its fullest capacity in both pc and mac. absolutely nothing is different.
macs are used by filmmakers, graphic designers, etc… because they are much faster and the OS is less prone to errors. efficiency.
mac, ftw.
151 Retroshift
March 26th, 2009 at 1:31 pm
Children, children… Off course PS is made for both Mac and PC but what Mark meant is that Photoshop works better on a Mac, those computers are more designed for graphic programs. So he is absolutely right.
150 raspes http://sitio.com/torque
March 10th, 2009 at 11:58 pm
Heyy muchas gracias por estos tutoriales, realmente eres muy bueno, y que mejor que recibir clases de alguien de tu categoria, Thanks
149 lol
February 27th, 2009 at 11:11 am
Yeah, omg what a stupid idiot. Mark, its made for both. You can choose to download it for the MAC or for WINDOWS, you stupid dumm-ass!!
148 peter
February 27th, 2009 at 11:09 am
what dumm-ass.. its not made for MAC.. LOL.. it works exactly the same if you do it with windows you dumm-ass. Mark your stupid idiot!
147 Mark
February 16th, 2009 at 10:07 pm
Yeah cmd is for the mac for pc it is ctrl. Photoshop is more made for the Mac.