web design & development explained

Today we will have a closer look at the horizontal menu creation using CSS and Photoshop. I suppose that you have basic knowledge of HTML and CSS and you know your way around Photoshop CS series. But this won’t be any other horizontal menu. Sometimes life requires us to put search form within the menu, whether on the left or right side. some may wonder how it works, but it’s nothing very difficult.

Let’s start with creating a sample menu in Photoshop. For that purpose I will use one of the sites I have been working on recently. Draw a rectangular shape of desired width and height and add some styling like gradient and stroke with values displayed on images. You can also build a background to support the menu with the theme.

Create rectangular shape and add some styling to it to create menu base.

Once you’re done with the menu base create the new layer and select the inside of the menu shape (without borders) then leave the selection only on top half of the element and add white fill onto the new layer (remember to select it first!). Open the layer blending properties and change the opacity to around 12% to get the glossy look for the menu.

Add a new layer and mark the upper inner half of the menu shape and fill it with white color. Then set the opacity to 12%.

Just under the  transparent white shade create text layer and add menu links, then rectangular shape with white background and border around it (border: 1px solid #093580;) to display text input box on the right side. The finishing touch is the search button with a nice small icon just after the search box. You can use your creativity now by designing your own button as long as it fits the theme you have started.

Create rectangular textbox and search button with the hover-state shade of gray.

The very last thing to finish our design is to create a gray shading that can be cast on menu element and be seen as mouse hover action. Let’s start a new layer and make rectangular selection over the menu element and fill it with gray color (#b1b1b1). Then move the layer underneath the white semi-transparent shade, so this will also look glossy.

Now save the output as your PSD file and play around with it to adjust it to your needs. In the next part we will focus on creating a CSS representation of the today’s design, which is more difficult than design itself. If you have any questions, please put them in comments and I will be more than happy to answer them for you ;).

Bookmark it!