Oct 25

Tagged in: , Comments:Add

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)

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

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.

Delicious Stumbleupon Digg

Event: Future of Web Design Advanced CSS Menu

Comments

Pages: 18 17 16 15 14 13 12 11 10 9 81 » Show All

There are 172 comments (+Add)

  • 172 rohit singla http://www.websitereckon.com

    what is your website real price:

    free check here

    websitereckon.com

  • 171 Clipping Path http://iipvapi.com

    Hi,
    Great , Design color Effect Menu
    Your web is very unique and authentic
    Great tutorial
    thanks

  • 170 sbobet http://www.sbobet-th.com

    Your web is very unique and authentic , very nice and basic.

  • 169 nilika http://www.websitereckon.com

    hi friends

    check your website real value

    websitereckon.com

    WebsiteReckon contains a collection of useful features such as checking Google Page Rank (PR), Compete and Alexa Traffic Rank, Backlinks Checker, Server IP and Location on Google Map, DMOZ and Yahoo Directory Listings and more. You can use it for various purposes include doing research before buying or selling website; want to find out how popular the website is; use it as SEO analytic tool to improve your site performance; or just about curiosity.

  • 168 Allan http://www.wordpress.com/allanp88/

    Your web is very unique and authentic , very nice and basic. So I like it. I think ur prety girl, please sent me your photos….
    Perhaps I like you too….he…he…he…
    Are you maried?
    But I give you suggestion please shrink download file with winzip so Every one can download fastly.

  • 167 vincentdresses http://www.hibridal.com

    The designs showed here show what simple and tasteful design is all about. Another one to consider

  • 166 heizel http://www.beta-pix.com/

    very nice tutorial…..
    i love it and your way of creating layout…
    hahah.. i love the brushes you used…

    keep on posting!

  • 165 photo sharing http://www.pokkisam.com

    Hmm… Well i like the creator

  • 164 Mike http://www.comastore.com

    Nice skill. CM

  • 163 Cyrus

    Great , Design Watercolor Effect Menu
    Great article. CSS saved web design
    Cyrus
    Visit http://www.psdtoxhtmlcoder.com

Pages: 18 17 16 15 14 13 12 11 10 9 81 » Show All

Post Your Comments

(required)

(required)

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

Live Comment Preview

Back to top