How to Create Business Template in Photoshop

How to Create Business Template in Photoshop
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.

And css for it. To fasten the work we will position everything with absolute values.

step-017d[5]
step-017e[5]
Here is html for the footer:

And complete css with some comments. As you can see I made three main blocks that stands for the columns. It is simpliest way I know to create such columns, but what's most important- it works well. With this techniqe you can make two columns as well as ten. As you can see all are floated to the left with fixed width value, so they stands next to each other.

step-017f[5]

Step 18 - Coding Client Zone

Instead of making new page for login panel, we will get advantage of jquery (that is already implemented into our code) and will create a fixed div that will be hidden by default. Let's make some design at first. The form will slide from the top. It's position will be fixed and it will be stretched on 100% width of page and shouldn't be longer that the header so the user will have possibility to hide it with menu item. I kept my design simple. It's just to show off above all. Check the sources for more informations. In psd file you will find mock-up of the form, in graf folder two background images that I used here. If you wish, you can prepare your very own, more complex backgrounds. Ok, this is the html. Place it anywhere in the body tag.

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14

6 comments on “How to Create Business Template in Photoshop”

  1. I have been trying so hard to make my own templates. There are so many tutorials out there, but it always seems like one or two things are missing from the final product. Either that, or I am missing something within the instructions.

Leave a Reply

Your email address will not be published.

cross