Menu « UI Controls « Photoshop Tutorials

The next step that we need to do add two lines to the menu button. Get out the Pencil Tool and draw two lines like on my picture:

This not so difficult professional Photoshop tutorial will walk you through the creation of a simple, but cool navigation bar and buttons that you can use on your website!

Start by creating a new document to make your button menu in. I created a small document sized 500�500 px with white background.

� 2009 Tutorialaday.com - Design and Online Business Articles. All rights reserved. TerraFirma | WordPress Theme | Top 10 Web Hosting

8. And there you go! You have designed a nice blue glossy gradient menu for a website or header! This can certainly be used for a web 2.0 design in my opinion�

This should create a very nice elegant and smooth border around the box, without using to many dark colors. Next we want to move onto the finishing touches. We’re going to use a icon to give our navigation box some more interest, the icon you use is up to you, and you can find some fantastic icons here. Because of the blue nature of the menu, and because I like fish I shall be using this fantastic icon from TurboMilk. Download the icon you plan to use in PNG format at the biggest size you can. Then in photoshop open the icon you downloaded

10. Now type out a title for you site using your horizontal type tool and apply the text effect from one of my previous tutorials but change the color overlay to #c7cad1. The font I used is blackoak std with a size of 20px.

5. Duplicate this layer as many times as you want to (layer - duplicate layer) and create a horizontal (or vertical) menu if you want to. Mine looks like this!

1. We're going to design a modern web 2.0 looking vertical menu in blue so go ahead and create a new document (170*300) and fill the background with #333333 using the paint bucket tool. In the picture below you can see my guide lines to help me designing the vertical menu!

Step 1 Create a new document. I always make my new documents 800 x 600 as it's easier to shrink canvases then it is to expand them. I also find that if you're working with exact sizes (ie, you know how big your menu item will be), it gets rather cramped.

In this tutorial you will learn how to create a professional, horizontal gaming navigational menu. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Now create a new layer. I am going to add the logo for this menu. The title of this tutorial is “Photoshop Creative Design Logo Tutorial�?. So I will use a logo that contains the letters CD.

5. Draw a small rectangle shape with the Rectangular Marquee Tool, create a new layer as in the previous procedure and then go to Select - Modify - Smooth - 1px and after that Layer - Add layer mask - Reveal selection. After doing that right click on the layer in the layer palette and select Blending Options. Use the following options:

Great tutorial. I like how you have zero mistakes and everything is how it should be. You follow everything step by step and it comes out perfect. Wish more tutorials were like this.

Now for the clever part. We need to make 10 separate images from our main image - 4 for each of the text options unhighlighted, another 4 for the highlighted (rollover) versions, and two for the round end stubs of the menu bar. Luckily, Photoshop has the Guides feature, which makes this process a lot easier.

[2] Now fill the Background with Black Color, the take the Rounded Rectangle Tool, create a new shape and fill with White Color.

I will now try to show you how to make a somewhat fresh and simple menu for your website. Lets start by making a 168x140 document with a transparent background. Use the "Rectangular Marquee Tool" (Hotkey: M) and select an area that is 168px wide and 28px high and fill it with white like this:

6. Now between the reflection layer and the other layers you can type in the text in a text layer and place it in the web menu.

3. Make a new layer above the other layer. Again make a new selection inside your frame you just made, go to select -> modify -> smooth and smooth the selection about 10 px to round the corners. fill it with the same dark color as before, as shown in the image.

2. Make a new empty layer to contain the menu. Now fill it with a dark green color (or whatever color you want).

Using the techniques I showed you earlier on, create a nice little footer for the menu - a dark underneath and a green gradient on top (see the psd file if you have any troubles).

See this tutorial and learn how to assort a concept for header with navigation. You will also learn how to use Rectangle marquee tool, how to apply Drop shadow, Gradient overlay and Outer glow on menu and more. Step 1 For foreground color set #474747 and using the Rectangle Tool, create a selection like it is shown on the picture below. On the Selection, we will now add a following styles: Drop shadow Gradient overlay Pattern For patern choose any patern of 45 degrees. Stroke For Stroke color choose white, size 1px and set the opacity to 55%. Our header now looks like this: Step 2 Now, we will create a menu on the top. For foreground color set #0290F1, and using the Rounded rectangle tool, create a selection like it is shown on the picture below. That selection will be a background for our link. On the selection, apply the following styles: Outer glow Gradient overlay Our button for link now looks like this: Step 3 Now, we will put the buttons layer below the header layer. Then, we will place a button on the position like it is shown on the picture below. It's time for link. I Have used Trebuchet MS bold font, size 12 pt. I have also used white as color. See the picture below. Repeat the previous step for all other links in menu. Step 4 Take the Rectangle marquee tool and create a selection like it is shown on the picture below. After that, fill it with white color and reduce its opacity to 4%. Find on Internet or somewhere any adequate icons and place it into a header. Place the Icons into a header. It's time for site name. For this example I will name it MusicWorld :) I have used Gill Sans font, size 36 pt. Good luck!

This entry was posted on Friday, June 20th, 2008 at 12:28 pm and is filed under Photoshop tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

This tutorial is a little different form our standard Photoshop tutorials. Normally I would show you how to make a web layout or menu in Photoshop, but I never really went into detail on how to make the layouts work on the web. In this tutorial I will show you how to make a simple menu using Photoshop, slice the images, and how to write the code for a functional menu.

Title: Design a menu for your website Description: This is web graphics tutorial which will teach you how to create a simple menu on your own homepage. Untitled Document

The third group under the Image Menu contains one really simple option and two not-so-simple ones. The first one, "Duplicate", simply allows you to create a duplicate copy of your Photoshop document; useful if, for example, you want to try a different approach to color correcting your image and then compare the results of the two approaches side by side.

Advertise with us

Drop Shadow

2. In this screenshot you can see my guides, you will need them for future reference�

Step1: Learning how to create a simple navigation menu. Ok, let us get started. Create a new image using the dimension 800 x 600. Set the background color to white. You can change the background depending on you web site color. Create a new layer, LayerNew Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool create a rectangle using the dimensions below. Change the foreground color to #d8d8d8

Pill Buttons

Now right click on the layer, click Blending Options,and add the settings below.

1. Begin with a new file, 110�20, and with #8FB9EE as your background color. Then create a new layer, and then set your foreground color to #AF137D. Now take the Rectangular Marquee Tool and draw out a small rectangle and fill it with your foreground color.

1. Begin with a new file, with a white background color. Then create a new layer in the layers palette.

1. Begin with a new file, size and color doesn't matter. I choose 250�75 and #565C72 as my background color.

I am going to show step by step how to do it. First, use the lasso tool (click L) and make a selection just like this one, fill it with any color. (alt+f)

I am going to show step by step how to do it. First, create a new layer, call it �body�, with the rectangular marquee tool (M), make a selection and fill it with black.

I am going to show step by step how to do it. Create a new layer, call it �body�, and with the Rectangular Marquee Tool (M), create a rectangle and fill it with any color.

2. Then go to the layers palette and right click on Layer 1, choose Blending Options and apply these settings.

First, make a selection with the size you want the menu to have(althought you can change the size later�) and fill it with any color you want (alt+backspace). Call this layer �menuback�.

I am going to show step by step how to do it.

I am going to show step by step how to do it.

Your button should look like this:

2. Now use your rectangular marquee tool and select another and select a shape like this shown in the following screenshot. Fill the selection with a color you like, we're going to add a gradient overlay so it doesn't really matters. Make sure you do all this an a new layer (layer � new layer).

2. Insert the following image, this is the header image and it needs no further editing�

Apply the following settings

[1]-First of all Open New Document of Custom size,Height & Width 200�650 pixels,Resolution 72 & Mode RGB Color

[1] Take a new file of 650 pixels,300 pixels, of resolution 72 dpi in the RGB mode.

Firstly lets create our navigation in photoshop, create a new document 600�200 pixels with a black background. Create a rectangle 600�40 pixels with rectangular marquee tool, you can create specific sizes by changing the style to �fixed size�.

Fill your rectangle with any color than add these layer styles to it.

To center the text pixel perfect horizontally as well as vertically select the marquee tool and draw a rectangle. Thanks to the layer guides the rectangle will snap into position and have the exact same height and width for each item. Then select the move tool and hit the align buttons for align vertically and horizontally. Repeat this for each menu item.

Copyright DesignTutorials.info 2005 | Contact | Privacy Policy

Okay, this tutorial will help you create something like this: Finished Result

I am going to show you a quick way to make a cool windows media player 11 inspired menu for the web. This menu is inspired from the top part of the menu that media player uses.

For this newest update I am going to show you a cool and simple way to create some neat web 2.0 style icons that I am going to use as a menu for a site, but you could use this technique for anything. This is a very easy way to use blending options to achieve a nice effect!

Step 1: Make a new file with canvas size 500x100, though you can make it longer if your going to use this for a design, but keep in mind that the height of the bar should be very similar to mine to make it work. Don't mind what I just wrote we'll just make a fixed selection (which you can change the width of if you have a larger width).

We will make a glossy navigation menu, which will suit for layout that start with no margin or padding from the right side and the top.

Click Here for Large Image