Layouts

How to Create Business Template in Photoshop


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.

step-016[5]

step-016b[5]

step-016c[5]

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.

step-016d[5]

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.

step-016e[5]

step-016f[5]

Move one of the layers to the bottom (it should stick to the edge) and now save it as a calltoaction.png.

step-016g[5]

Thanks to this we will make a css hover effect without an image loading delay. Alright, so the last part is css code. I believe it is self-explained, but I made few comments here and there. I used ‘background-size’ property (to stretch background) that was introduced in css3, so older browsers wouldn’t display our menu correctly. However, we are not supporting backward compatibility. If you wish to, you have to make some hacks (or rather tricks) with stretched images and z-index. Not too hard, but too messy for this tutorial. So I will just stay with background-size which is fully supported by Opera 10+, FireFox 4+, Internet Explorer 9+, Safari 4.1+ and Chrome 3+.
















Step 17 – Coding Newsletter And Footer

Great, we are pretty far. We will leave a content area for now, because firstly we’ll make a blank (well, not really blank, but without a main part) html document (like we did with psd) and then we will build the content for every page. Our newsletter are will have a fixed size. Start from placing the guides on top and bottom (select newsletter gropu in layer’s window so they will stick) to cut out the backgrounds.

step-017[5]

Now cut out the background for wrapper, save it as newsletterbg.jpg.

step-017b[5]

Check its height (or distance between guides) so you will know how big will be our newsletter area. In fact we could make it elasttic/fluid, but there is no need to do that. Now hide all the layers (with background) so you will have only an upper line (so called separator) and bottom shape. Cut it out as well. Name it newsletter.png.

step-017c[5]

Also take care about input background and newsletter icon. Here is a html code to apply.

Newsletter

Want to know more?
Send us your e-mail.

Related posts
LayoutsPhotoshop TutorialsUpdated

How to Create a Beautiful Audio App User Interface

LayoutsPhotoshop TutorialsUpdated

Create a Vintage Style Poster in Photoshop

LayoutsPhotoshop TutorialsUpdated

How to Create a Professional Web Layout in Photoshop

LayoutsPhotoshop TutorialsUpdated

Create a Captivating Street Dance Competition Poster with Photoshop

6 Comments

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get 57 Photoshop Actions Free from Our Awesome Newsletter!

Subscribe and get the latest Photoshop tutorials, tips, and more via email. As a way of saying thanks, you'll also receive a free copy of Lomocam Photoshop Actions by SparkleStock ($7 retail value).