How to Create Business Template in Photoshop

html { font: 12px Arial, Helvetica, sans-serif; text-align: left; background: url(graf/background.jpg); }
Now refresh your page in a browser and see the first effect. By the way, you should have some basics about html because in this tutorial you won’t see deep basics about webpage creation. However I will try to explain as much as possible.

---

Step 15 – Coding Header

Firstly, we will need some html to work on. So let’s try to separate all the elements that we have on our mock-up. A repetitive background, a non repetitive background (gradient), logo (image) and a search form. Let’s try to add them. Remember to delete the html comments that are inside “” tags.

Now let’s cut some images. At first we will need a guide that will separate a header from menu (Select menu shape or whole group so guide should easily stick to).

Hide the layers with gradients so the header’s background will be repetitive in x-axis (horizontally). Select few first pixels and like we did with first background image and all next images follow the standard actions: copy merged > New document > Paste > Save As (jpg or png). Save this one as a topbg.jpg.

Now select the whole top WITH gradients and save it as a topgradient.jpg

Here’s the css for the backgrounds:

body { background: url(graf/topbg.jpg) top center repeat-x; } #wrap_header{ width:100%; margin:0 auto; height:157px; background: url(graf/togradient.jpg) top center no-repeat; } #header { width:980px; height:157px; margin:0 auto; position:relative; }
The body’s background may not be displayed correctly (fully) by now for the body is as long as the header. But when we will add another components like menu and content area- it will be ok. By the way: I actually cut all the images that I will need before I will write any html and css code but herenow we’ll make it step by step. Alright, next thing that we will need is a logo. Mine has a dimensions of 296 by 76 pixels and is saved as a png so the background is transparent. There were days when png format has not been supported by web browsers ( I mean IE6 ) but that was ages ago and nowadays every modern browser supports it (even animated png which isn’t really popular) so you shouldn’t worry about it. By the way: do you know anyone who is using IE6 by now? Just wondering, because I don’t. Okay, so we have a logo, here’s css for it. Html was added earlier. It was named logo.png. You can use ruler tool so you will know how far it is from top.

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