How to Create Business Template in Photoshop

Now on, under the white line create a rounded rectangular shape so it should look like this. I used #f27600 color.

Add some simple shadow to it, but make it as a layer, not with blending options; thanks to this we will not have cutting issues while we will convert it to html/css.

And now apply the same effects when you were making a ‘call to action’ button, I mean dark linear gradient from bottom, light radial gradient from top and light divider- a shape that covers only a half of a main shape. Here are step by step images:

I also added some sample clients’ logos, but it will be easier to work on their alignment in css, so it is pure, not measured in any way, mock-up.

---

---

Step 10 – Newsletter

This step will be based on copying previously created elements, however will build nicely looking end of the content that also has its function- newsletter form. Start with a 1 pixel height line that is spreader from beginning to the end of body of the layout. Make it dark, even black, but lower it’s opacity- in my case it’s 20% with dark gray color. It has to be visible, but subtle. Because of the low opacity it will inherit a bit of texture from the background. I know it’s not a big deal in this example, but save this advice to the future.

Type in title with Georgia, additional info with arial and just copy the search form- replace an icon and delete the gradient.

Do you remember how did you made a shape for main menu? Well, try to reproduce it here, but make in flipped vertically and alsospread it on the width of whole content area. Here it is as a black shape for you to see. Ofcourse you should use white color with slight touch of noise.

---

Step 11 – Footer

Create a new group for footer, but make sure it is under the newsletter so the previously created shape will overlap every element from the footer (I mean- background).

Make a shape of color #333333 that covers whole bottom part of layout and add a bit of sharp gradient on the very bottom. If you don’t have a space, or have it too much- use Crop Tool. You can use it both ways- to shrink the document’s canvas as well as to extend it. Even if your space is okay- try it. It’s a small tricky thing that not everyone knows about, however is pretty useful.

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