Print PostsEmail this post Email this post

Design Watercolor Effect Menu

One of the most gorgeous photoshop tutorials I’ve ever read. Visit the source for much more by this amazing designer.

SOURCE

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)

Download Photoshop file

Preview

Here is a preview of the final image:

sample menu

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.

screen 1

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.

screen 2

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.

screen 3

Repeat this step until you get multi layers of watercolor effects.

screen 4

3. Add details

Find some coffee stain images, paste it in and set the layer blending mode to Multiply.

screen 5

Dirty and splatter effect: download and use the splatter or watercolor Photoshop brushes from Bittbox.

screen 6

Add some pencil sketch illustrations. You can either scan your marker sketches or use vector illustration.

screen 7

Make a triangle selection in the corner, pick a grey color and apply a gradient to make the wrinkle effect.

screen 8

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.

screen 9

Find a different font, enter the menu mouseover text.

screen 10

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.

screen 11

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.

screen 12

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.

sample menu

andean-llamas~beautiful-watercolor-signed-painting~peru ANDEAN LLAMAS~Beautiful Watercolor SIGNED Painting~Peru
US $32.00 (0 Bid)
End Date: Friday Aug-29-2008 16:27:33 PDT
Bid now | Buy it now | Add to watch list
ori-art-chinese-watercolor-painting-red-plum ORI ART CHINESE WATERCOLOR PAINTING-RED PLUM
US $4.99 (0 Bid)
End Date: Friday Aug-29-2008 16:29:36 PDT
Bid now | Add to watch list
u-s-cruiser-new-york-battleship-watercolor-painting U.S. CRUISER NEW YORK BATTLESHIP WATERCOLOR PAINTING
US $10.00 (2 Bids)
End Date: Friday Aug-29-2008 16:31:33 PDT
Bid now | Add to watch list
watercolour-painting-by-artist-jose-ally WATERCOLOUR PAINTING BY ARTIST JOSE ALLY
US $2,707.32 (0 Bid)
End Date: Friday Aug-29-2008 16:38:01 PDT
Bid now | Buy it now | Add to watch list
ori-art-chinese-watercolor-painting-bird-thinking ORI ART CHINESE WATERCOLOR PAINTING-BIRD THINKING
US $3.99 (1 Bid)
End Date: Friday Aug-29-2008 16:42:21 PDT
Bid now | Add to watch list
print-of-original-watercolor-painting-art-by-ogernov Print of Original Watercolor Painting, Art by OGERNOV
US $9.67 (9 Bids)
End Date: Friday Aug-29-2008 16:50:20 PDT
Bid now | Add to watch list
rare-water-color-painting-scotland-artist-a-anderson- Rare Water color Painting Scotland Artist A .Anderson
US $19.99 (0 Bid)
End Date: Friday Aug-29-2008 16:53:22 PDT
Bid now | Add to watch list
original-watercolor-painting-size-10x15-inches- Original Watercolor painting, Size 10x15 inches
US $10.00 (0 Bid)
End Date: Friday Aug-29-2008 16:54:00 PDT
Bid now | Add to watch list
portrait-painting-in-watercolor-dvd-$50-value!! PORTRAIT Painting in WATERCOLOR DVD $50. VALUE!!
US $28.00 (0 Bid)
End Date: Friday Aug-29-2008 16:54:58 PDT
Bid now | Add to watch list
17-art-brushes-spatulas-painting-watercolor-oil-acrylic 17 ART BRUSHES SPATULAS PAINTING WATERCOLOR OIL ACRYLIC
US $9.99 (0 Bid)
End Date: Friday Aug-29-2008 16:56:02 PDT
Bid now | Buy it now | Add to watch list
print-of-original-watercolor-painting-art-by-ogernov Print of Original Watercolor Painting, Art by OGERNOV
US $10.17 (8 Bids)
End Date: Friday Aug-29-2008 16:56:53 PDT
Bid now | Add to watch list
17-art-brushes-spatulas-painting-watercolor-oil-acrylic 17 ART BRUSHES SPATULAS PAINTING WATERCOLOR OIL ACRYLIC
US $9.99 (0 Bid)
End Date: Friday Aug-29-2008 17:05:13 PDT
Bid now | Buy it now | Add to watch list
aceo-art-original-chinese-watercolor-painting-koi-fish ACEO Art Original Chinese Watercolor Painting KOI Fish
US $6.99 (0 Bid)
End Date: Friday Aug-29-2008 17:31:26 PDT
Bid now | Add to watch list
old-watercolor-landscape-painting-charles-r-loomis-n-j- OLD WATERCOLOR LANDSCAPE PAINTING CHARLES R.LOOMIS N.J.
US $81.00 (8 Bids)
End Date: Friday Aug-29-2008 17:36:46 PDT
Bid now | Add to watch list
original-watercolor-painting-signed-1940-eastern-europe Original Watercolor Painting Signed 1940 Eastern Europe
US $19.99 (0 Bid)
End Date: Friday Aug-29-2008 17:39:51 PDT
Bid now | Add to watch list
2-old-20thc-nautical-sailing-ship-watercolor-paintings 2 Old 20thC Nautical Sailing Ship Watercolor Paintings
US $132.49 (21 Bids)
End Date: Friday Aug-29-2008 17:40:05 PDT
Bid now | Add to watch list
oriental-asian-chinese-watercolor-painting-plum-blossom Oriental Asian Chinese watercolor painting Plum Blossom
US $4.99 (0 Bid)
End Date: Friday Aug-29-2008 17:42:44 PDT
Bid now | Add to watch list
butterfly-fancy-original-watercolor-pencil-painting- Butterfly Fancy. Original Watercolor Pencil Painting.
US $9.99 (0 Bid)
End Date: Friday Aug-29-2008 17:45:01 PDT
Bid now | Add to watch list
portland-headlight-original-watercolor-painting-art- Portland Headlight.Original Watercolor Painting.Art
US $15.95 (0 Bid)
End Date: Friday Aug-29-2008 17:47:05 PDT
Bid now | Add to watch list
aceo-window-bouquet-watercolor-painting-cherylville ACEO Window Bouquet Watercolor Painting Cherylville
US $5.95 (0 Bid)
End Date: Friday Aug-29-2008 17:47:17 PDT
Bid now | Add to watch list
Share, E-Mail or Print the Style:
  • E-mail this story to a friend!
  • Print this article!
  • e-mail
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Mixx
  • Reddit
  • Technorati
  • YahooMyWeb
  • Google
  • TwitThis
  • Pownce
  • Live
  • Wists
  • ThisNext
Share This Post

If you liked this, You might also like:

  1. Photoshop Text Effects: 51 Text Effect Tutorials Every Designer Should See
  2. Text and the way it looks is a major part of any design. A great design can be cheapened if...
  3. Advanced Glow Effects in Photoshop
  4. In this tutorial we're going to create some really sharp looking glow effects using a combination of layer styles, the...
  5. 99 Resources for Web 2.0 Design
  6. BADGES Web 2.0 Badges - A set of free badges to download and use in your own designs. Fresh Badge...
  7. Best of CSS Design 2007
  8. SOURCE OF ARTICLE  For those who don’t know, I’m also the guy behind Best Web Gallery and N.Design Studio. In...
  9. Greenhouse Effect
  10. Orca Design examines the Greenhouse Effect with a series of 10 products conceived to explore sustainable design. The goal...
  11. Super Slick Dusky Lighting Effects: Photoshop Tutorial
  12. One of the best sites around for desktops has to be Desktopography. Inspired by their amazing work today we...
  13. Another fantastic Web 2.0 Design Guide
  14. CUT TO THE SOURCE Shortcut to Web2.0 Style If you don't have the resources to create your own “2.0”-style site...
  15. The Open Source Web Design Toolbox: 100 Web Design Template Sources, Tools and Resources
  16. SOURCE The open source model has, over the last 20 years, proven that collaborative development is one of the best...
  17. Tools for getting the right color combination for your website design
  18. Excerpt from SOURCE Accommodating the Color Blind Online Web sites with good balance and color schemes have the usability and...
  19. Analysis of Web 2.0 Design & Layout Trends – Part 1: Clean, Colorful and Horizontally Divided
  20. SOURCE One of the web 2.0 design and layout trends which I actually quite like is what I am going...

Leave a Reply

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <em> <strong>