Design Shrine Style Interiors & Web Design Resources

Your Source for Interior, Web & Style Design Via RSS

Beauty.com

Design Watercolor Effect Menu

Article or RSS item submitted by Ty Wenzel • Nov 13th, 2007 • Category: Design & Graphics, Tutorials, Web Design |


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

Watercolor Painting - Flowers - signed E. Bell - Nice! Watercolor Painting - Flowers - signed E. Bell - Nice! Paypal US $34.99 15m
ORIGINAL WATERCOLOR PAINTING LEO SIMONE  ABSTRACT ORIGINAL WATERCOLOR PAINTING LEO SIMONE ABSTRACT Paypal 0 Bid US $675.00 19m
Giclee print of watercolor painting Catskills Tatiana Giclee print of watercolor painting Catskills Tatiana Paypal 0 Bid US $28.38 33m
Original Lion opaque watercolor painting 22 X 15 Original Lion opaque watercolor painting 22 X 15 Paypal 0 Bid US $150.00 35m
Watercolor Painting - Covered Bridge - Lrg Signed Dated Watercolor Painting - Covered Bridge - Lrg Signed Dated Paypal US $260.00 42m
French watercolor and ink original painting 1916 French watercolor and ink original painting 1916 Paypal 0 Bid US $25.00 43m
Original 19th century Illustration Watercolor Painting Original 19th century Illustration Watercolor Painting Paypal US $3,300.00 48m
1911 French ink and watercolor painting 1911 French ink and watercolor painting Paypal 0 Bid US $35.00 1h 3m
PAINTING WATERCOLORS THAT SPARKLE WITH LIFE by C. Agan PAINTING WATERCOLORS THAT SPARKLE WITH LIFE by C. Agan Paypal US $16.99 1h 8m
Basket Of Geraniums - Original Watercolor Painting Basket Of Geraniums - Original Watercolor Painting Paypal 0 Bid US $5.00 1h 21m
Lobelia Flowers - Original Watercolor Painting Lobelia Flowers - Original Watercolor Painting Paypal 0 Bid US $5.00 1h 25m
BLACK CAT & SINK Art PRINT of Watercolor Painting VERN BLACK CAT & SINK Art PRINT of Watercolor Painting VERN Paypal US $11.98 1h 31m
PAINTING WITH WATERCOLOR, PEN & INK by Claudia Nice PAINTING WITH WATERCOLOR, PEN & INK by Claudia Nice Paypal 0 Bid US $10.99 1h 36m
LEE EVERETT WATERCOLOR PAINTING 9 X 13 SEASCAPE RARE LEE EVERETT WATERCOLOR PAINTING 9 X 13 SEASCAPE RARE Paypal US $149.99 1h 37m
PAINTING SUNLIT STILL LIFES IN WATERCOLOR PAINTING SUNLIT STILL LIFES IN WATERCOLOR Paypal 1 Bid US $14.99 1h 38m
WATER COLOR PAINTING OF WOMEN WATER COLOR PAINTING OF WOMEN "OLD" Paypal 0 Bid US $9.95 1h 43m
ORIGINAL PAINTING Watercolor Russian Abstract Modern OX ORIGINAL PAINTING Watercolor Russian Abstract Modern OX Paypal 0 Bid US $.99 1h 47m
ORIGINAL SIGNED WATERCOLOUR  PAINTING ORIGINAL SIGNED WATERCOLOUR PAINTING "The Two Of Us" Paypal 5 Bids US $19.55 1h 51m
WATER COLOR PAINTING OF WOMEN WEARING STRAW HAT WATER COLOR PAINTING OF WOMEN WEARING STRAW HAT "OLD" Paypal 0 Bid US $9.95 1h 58m
Watercolor painting Walking peacocks Watercolor painting Walking peacocks Paypal 0 Bid US $5.00 2h 5m

Share, E-Mail or Print the Style:
  • email
  • Print
  • PDF
  • Twitter
  • RSS
  • Facebook
  • Digg
  • StumbleUpon
  • Google Bookmarks
  • Yahoo! Buzz
  • del.icio.us
  • Technorati
  • Reddit
  • MySpace
  • Mixx
  • LinkedIn
  • Live
  • Design Float
  • Tumblr
  • MSN Reporter
  • Wists
  • ThisNext
  • SphereIt
Share This Post
Tagged as: , , ,

Leave a Reply

You must be logged in to post a comment.

dELiA*s   Wal-Mart.com USA, LLC     Wrapables.com   Logo