Photoshop Tutorial – Apple Navigation menu

Learn how to create the newest Apple navigation bar that is being used at their site. 1. Start by opening a new 500px * 50px file. 2. Using the Rectangular Marquee Tool, set a Fixed Size of 480px width and 35px height, and make a selection inside the canvas 3. Now, go to Select -> Modify -> Smooth and apply 3px radius. Create a new layer and Fill the selection with any color 4. Apply this layer styles to...

Photoshop Tutorial – Clean Two-Level Navigation

Step 1 First off, we need to make a new document; I’ve made a relatively small one for the purpose of this tutorial (600x420px) but yours will probably be for a web design (1000px or so wide). To make the background less boring I’ve just added in some clouds (foreground and background colours: #33556e and #1e2a38) and applied a motion blur; both are accessible through the Filter menu. Step 2 Now we’ll make...

Photoshop Tutorial – Navigation Bar with Rollover Buttons

Learn how to create a sleek rollover Navigation Bar. In this tutorial you will learn how to create buttons in Photoshop, export the buttons and add rollover effects in Dreamweaver. Rollover the buttons below to see the final effect. Tutorial Details Program: Photoshop CS5, Dreamweaver CS5 Estimated Completion Time: 25 Minutes Now we have everything we need let’s begin. Step 1:- First we’ll design the main...

Photoshop Tutorial – How to Create Dark Web Design

I’ve been seeing a lot of Dark Websites lately, and it inspires me to make one. Today we will create dark web design which we will do in Photoshop. I will show you how to achieve the look of dark websites and still look professional. Today we will create a dark web design and we will use our very good pal Photoshop, we will learn a few tricks like: Textured background Creating our own shadow Detailed line Light...

Photoshop Tutorial – Clear professional navigation bar

Make a Professional navigation bar, using some layer styles. Really easy to do and a good looking outcome. 1. Fist of all make a rectangle using the Rounded Rectangle Tool with 15px for Radius. 2. Open the Layer Styles and add it these styles, starting by an Inner Shadow. 3. Inner Glow 4. Gradient Overlay: #212121 to #383838 5. Stroke: #050505 6. And you should have something like this: 7. Then while holding...

Photoshop Tutorial – Dark Navigation Bar

Create an amazing Dark Navigation Bar in this full tutorial that explains the 3 states of the nav bar, on hold, on click and hover.     1. Start by opening a new 580 * 100px file. Select the Rounded Rectangle Tool and make a small rectangle in a new layer and with any color. Right click over the layer and select Rasterize Layer. 2. Apply the following layer styles to it. Inner Glow: #67686c 3. Gradient...

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 canvas. Step...

Photoshop Tutorial – Menu bar

A Photoshop tutorial to create a menu bar Step 1. Start off by making a new Photoshop document. Choose the rounded rectangle tool, set the radius to 12 pixels, and create a wide rounded recntalge, as shown below, It doesn’t matter what colour it is because we’ll be creating a gradient...

Photoshop Tutorial – White Navigation

Step 1. First of all, make a new Photoshop document, with dimensions of 44×220 and a black background. Create a selection using the elliptical marquee tool and fill it with grey (C1C1C1) on a new layer. Feather (select > feather) and contract (Select > Modify > Contract) the selection by 5 and then fill the selection with white. a) b) Step 2. Next, create a...

Photoshop Tutorial – Creating Website Navigation Buttons

Creating buttons for your website can sometimes be hard, but this tutorial will show you step by step an easy way to make buttons in Adobe Photoshop that can be put together to create a navigation bar for your website, and when done should look a little some thing like: Step 1: Create a New Image Create a new image (Ctrl + N) with the dimension 500 x 500, like in the image here. Step 2: The Background Now you are...

Photoshop Tutorial – Glossy Website Button

This tutorial will teach you a step by step “how to create a glossy website button”. Open your Adobe Photoshop ——————————————————————– 1. Click “File” and click...

Photoshop Tutorial – Glassy navigation tab

Preview: Glass Container Tab. Step one: Start with a large black canvas and make a new layer set titled Glass Container Tab in your layers window. In your tools window choose rounded rectangle tool. Set the radius setting of your rounded rectangle to 4 pixels and check anti-aliased. In a new layer draw a 172 x 26 pixels, #525252 rounded rectangle. With this layer add the following layer styles: Inner...