Photoshop Tutorial – Windows 7 Inspired Navigation

Hello, welcome to another tutorial by hv-designs. In todays tutorial il be showing you how to replicate the windows 7 taskbar, only this taskbar will be a navigation bar for a website. In another tutorial il be showing you how to code it.   Lets get started! Creating The Background Create a new document 600×400 pixels, you dont need a massive sized document for this tutorial, feel free to do so if you want to....

Photoshop Tutorial – Carbon Fibre Style Inset Navigation

What We’ll Be Creating Once you’ve completed the tutorial you should have something like this. In a later tutorial I’ll also be showing you how to code the navigation into a working CSS navigation, so stay tuned for that. Inspired By Hugo The result of this tutorial is inspired by a flash template located here. Lets get started. Making The Background Create a new document 1200 x 600 pixels with a transparent...

Photoshop Tutorial – Create a navigation menu

This tutorial shows the step into creating a profesional transparent Vista style menu. Step 1. Make a new document with the size you want. I made it 400×150. Now choose a background color, I choosed a blue color. Grab the Rounded Rectangular tool and make a shape like below on a new layer: Step 2. Select the layer with the shape and click the Layer Style button and click Blending Options: Add the following...

Photoshop Tutorial – Professional Navigation menu photoshop tutorial

Step1. Make a new document sized 200×400 and fill it with a grey color: Set your background and foreground colors to : E8E8E8 and DDDDDD like in the image: Now grab the gradient with the folowing settings: Create a new layer and a selection like below: And go from top to bottom with the gradient. You will have something like this: Add a drop shadow with the following settings: You can also add your text on...

Photoshop Tutorial – Clean Navigation menu

Step 1. Start of with a new document 300×300 pixels with a purple background. Then create a new layer, and using the rounded rectangle tool create a shape like below using a darker gray colour. Step 2. Using the rectangle marquee tool create a selection like below: Grab the burn tool with the settings below and start brushing over the selection: Brush more on the left part: Then grab the dodge tool, remove...

Photoshop Tutorial – Classic Thursday – Clean Navigation menu

Step 1. Start of with a new document 300×300 pixels with a purple background. Then create a new layer, and using the rounded rectangle tool create a shape like below using a darker gray colour. Step 2. Using the rectangle marquee tool create a selection like below: Grab the burn tool with the settings below and start brushing over the selection: Brush more on the left part: Then grab the dodge tool, remove...

Photoshop Tutorial – Navigation menu x-treme

Step 1. In this tutorial using photoshop you are going to learn on how to make an advanced layout. This tutorial requires advanced photoshop knowledge because we are going to use tools like the pen tool. Step 2. Make a new document using a regular website size. I chosed 800×600 but there are several standard sizes that you chose from for example :1024×768. Choose the base color a dark teal or any color that...

Photoshop Tutorial – Nature inspired navigation menu

In this Photoshop tutorial we’re going to learn how to create a nature inspired navigation menu sitting on grass for a website. Nature inspired navigation menu Tutorial Details Program: Adobe Photoshop Version: CS5 Difficulty: Hard Estimated Completion Time: 60 minutes Final preview: Stock Images This tutorial uses free stock images and brushes: Dirt texture: http://www.sxc.hu/photo/1095376 Grass...

Photoshop Tutorial – Classic navigation menu

Step 1. Start off with a new document sized 500×80. Fill it with a cream colour. Create a new layer and using the rectangular tool with the colour code below create a shape: Step 2. Add to the new created shape a Inner Glow: This is what it should look like: Step 3. Use the rounded rectangular tool on a new layer create a shape like below using the same colour as the background. Grab the Burn tool with the...

Photoshop Tutorial – Professional Navigation menu

Step1. Make a new document sized 200×400 and fill it with a grey color: Set your background and foreground colors to : E8E8E8 and DDDDDD like in the image: Now grab the gradient with the folowing settings: Create a new layer and a selection like below: And go from top to bottom with the gradient. You will have something like this: Add a drop shadow with the following settings: You can also add your text on...

HTML Tutorial – Pure CSS Navigation Menu

Designing a rich looking navigation is not the herculean task it seems to be. Here’s another easy tutorial which will help you design a navigation bar from scratch using just CSS and no images. Alright, here we go… The final product This is what your nav bar will look like at the end of the tutorial. You only need a basic knowledge of CSS to pull this off, so no worries. See Live Demo! or ...

Photoshop Tutorial – High Detailed Plastic Navigation Bar

Final Result Preview Step 1 Let’s start with creating the background for the navigation bar. The background is going to be bluish; the color will be alike with the color of your oncoming menu. Create a new document sized 800×259px with background color (#8caab8). Select foreground color (#e1e8eb), create a New Layer and draw linear gradient (Foreground to Transparent) from top to the bottom of the...