Friends, are you tired of your navigation never staying up? Post-it note navigations lose their adhesiveness and fall flat, scotch tape navigation can tear up your background color and leave a sticky mess, and push pin navigations leave awful holes on your website! Now, you can have a tidy clip-on navigation that will stay up as long as you like with no messy glue or ugly holes left behind! All you will need is a copy of Adobe Illustrator, a block of wood, a doughnut, a ball of twine, three nails, a club sandwich, a bucket of ice, and a hatchet as sharp as the devil himself.

Required Items:

You can download the Nature Care Template and it’s tidy clip-on note navigation, with full PSD source files and sliced table free HTML pages for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products. Get a membership here.

Step 1: Start With a Basic Rectangle

As usual, create a new document in any size. Next, let’s start drawing the size of the clip on note. Get the Rectangle Tool, and then draw a rectangular shape on your document.

Step 2: Make a Cut for the Fold

Next, cut off the top left corner of the rectangle, as we need to make a curve in paper corner. Select the Scissor Tool, and cut off the corner, and you will get a result like the below diagram.

Step 3: Create a Shadow for the Paper Bend

Now, grab the gradient tool and set the color setting to light grey (Cyan 8%, Magenta 6%, Yellow 6%, and Black 0%) and white. Pull the direction from the top left corner to the bottom, just like the below diagram.

Step 4: Drawing the Curl

It’s time to draw the curled up paper corner, so grab your pen tool and draw a curved triangle at the top left corner.

Then, fill it with the same gradient setting as above, and again pull it from the top left to right bottom, just like the below example.

Step 5: Add a Shadow Under the Curl

Now, add a little small shadow below the page curl. Grab your pen tool again and draw a semi-circle and fill it with black to white gradient.

Next, Gaussian Blur the semi circle with the setting of 2.5 pixels and set the transparency to 20%.

Step 6: Give the Note a Background Shadow

So now we add in the background shadow for the clip on note. Select your note and hold on to ALT, and then drag and you will have another similar note. Then, fill it with black and set the transparency to 30%. Now, go to Effect > Blur > Gaussian Blur and set 4 pixels.

Step 7: Move the Shadow Behind the Paper

Move the shadow 3 pixels down and to the right. Then hold on to Ctrl + Shift and press the character ‘[‘, this will move the shadow to behind the paper.

Step 8: Outline the Paperclip

Now, we have our piece of paper, but it won’t stay up on your website without some form of a clip. So, let’s start with drawing the clip for it by using the rounded rectangle. Next, we need to grab the mesh tool to make a 3D gradient look. To do this, click on the top center of the rounded rectangle tool, and click the second mark on the bottom, just like the below.

Step 9: Color the Clip

Now that the basic shape of the clip is created, we need to fill it in. Therefore, get the Direct Selection Tool and click on the center path, and move it towards from top to bottom. Then, fill it with darker gray for the top selection and the lighter gray for the bottom selection.

Step 10: Give Dimension to the Clip

Now, you will see some tones in top of the clip, but it is still flat and one dimensional looking. To fix this, we’re going to need to give the clip a side surface, so select the clip, duplicate it, fill it with plain gray, and move towards the back.

Step 11: Add the Back Clip

We’ve gotten the front of the clip made, however clips have two pieces that press against each other, so there’s still only one half of the clip. Therefore, we need to make the back half of the clip; select everything and duplicate again for the other clip handle. Move it behind the first handle and rotate it to -30%. Then, move it towards the paper and rotate it again -10% and finally add a dot at the center bottom of the clip.

Step 12: Add a Frame/Border Inside the Note

Ok, so, the paper is now hung up on the clip, and we have a navigation that will hold up to anything nature can throw at it, except for a mild breeze, a little rain, or high humidity. Now we’re just going to dress it up a little bit by adding a little picture frame looking inner area to contain our nav text. Thereafter, draw another rectangle and fill it with light green (7C9A3D) and set the transparency to 10% at the center of the note.

Step 13: Add the Outer Frame to Create a Thick Border

Next, draw another bigger rectangle behind the light green for the frame’s border, and duplicate another one for the shadow behind it. Finally, select all 3 rectangles and rotate 2%.

And we are DONE… Now you can copy and paste it as vector in your Photoshop document and create your navigation bar just like below.

Here’s how it appears in the final Nature Care Web Template

You can download the Nature Care Template and it’s tidy clip-on note navigation, with full PSD source files and sliced table free HTML pages for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products. Get a membership here.

Tags: Adobe Illustrator, design, tutorial, web design, Website Navigation