SEARCH
  Tutorials Photoshop Web Layout Cartoon Style Navigation Header

Cartoon Style Navigation Header

Head Nerd Web Layout May 01, 2006

Create a rounded rectangle using rounded rectangle shape tool.

image 1

Using custom shape tool (U), select a Flower 6 shape.

image 2

Enable "add to shape area" at the top bar.

image 3

Create this flower shape on top of rounded rectangle.

image 4

Create a flower shape on the other side of the header too.

image 5

Using direct selection too select the three shapes and press combine button at the top bar.

image 6

Fill the resulting shape with a color of your choice.

image 7

Double click the layer to open layer style window. Apply settings as shown.

image 8

image 9

Duplicate layer. Remove layer style. Using direct selection too select nodes of the left side of the header. Press delete. Using pen tool complete the path as shown in the image below. Fill with a similar but lighter shade of color.

image 10

Create a circle using elliptical shape tool. Place on one rounded edge.

image 11

Create more circles and place according to the image.

image 12

Create a rounded rectangle using rounded rectangle shape tool.

image 13

Press Ctrl+T. Right Click and select distort.

image 14

Adjust the nodes to get a shape as shown.

image 15

Double click the layer to open layer style window. Apply settings as shown.

image 16

image 17

Insert a few pet cartoons and place in the empty area.

image 18

image 19

Type button links over the circles.

image 20

Type site name in the inner rounded rectangle. Also a punch line at the bottom of the header will make it more interesting.

Cartoon Style Navigation Header

subscribe to newsletter