How to Create Business Template in Photoshop

#header .logo { position: absolute; left:20px; top:34px; /* distance from top */
display:block; }
Now we will need some background for search form. Hide all unneded layers and select a search form. Your selection don’t have to be perfect. Notice that if you will create a new document it will apply dimensions not from the copied selection, but from the boundary of existing pixels. Name it searchbg.png. Remember, we are saving layers that has any transparency as a png. The rest is jpg.

Here, grab this code for the search form and search icon.

#header #searchform { position: absolute; right: 20px; top: 55px; width: 196px; /* width of a background image */
height: 36px; /* height of a background image */
background:url(graf/searchbg.png) top left no-repeat; border:0px; } #header #searchform #searchinput { color: #686767; padding: 8px 5px 4px 8px; width: 150px; background:none; border:0px; } #header #searchform .searchbutton { height: 15px; width: 12px; text-indent: -9000px; text-transform: capitalize; background: url(graf/searchicon.png) no-repeat 0 0; border: none; position: absolute; right: 10px; top:9px; }
As you can see, the real input form is hidden.

---

Step 16 – Coding Main Menu

Let’s start with some div-wrappers in html along with code for menu (unorganised list) and call to action button.

As you can see, in the a tag (whole button) there is a span tag which we will use to change the font of ‘2011’ from Arial (inherited from html property in css) to Georgia. Ok, so let’s go to cut some images out of psd file. We will need a whole menu shape, two backgrounds for menu items and a background for call to action button. I checked in psd that our menu is 49 pixels high- measure distance between two guides. Here are the elements that you have to cut out.

Remember that we wanted to have two states of call to action button? Alright, cut out the background to the new document, but don’t save it yet.

Now make a Vibrance layer (or some other adjustment layer) visible, copy merged and paste it into the previously made document (not the new one, but those with button) so you will have two layers there. Now go to Image > Canvas size, check relative checkbox and into a height type the actual height so it will double.

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21