---

---

Step 14 – Cutting to html

It’s good to have some blank html and reset css files in your inventory. It’s like an action in photoshop. You don’t have to write/copy everything hundreds of times. Just copy reset css and blank html to your project folder and you have a fast start. Here, you can download my blank template as well. Right, let’s start to reproduce our main page in html/css. Open up in photoshop our psd file with main page mock-up and hide all the layers except noisy background. Then make a selection, about 200×200 pixels. We don’t have to worry too much here because this pattern will be seamless for sure.

Go to Edit > Copy merged, so everything that is under the selection will be copied (in case you have a background on more than one layer) and then go to File > New. As you can see width and height has automatically the values from our copied selection. In new document go to Edit > Paste and then to File > Save As. Save the file as a background.jpg (with maximum quality – 12) in ‘graf’ folder from my blank template (Or in any other folder, but later on remember to change the paths in my css codes). Don’t worry about the images’ weights too much for now. Save everything with maximum quality and later on I will show you how to shrink them. Alright, open up index.html in your browser. It’s blank. Then open up index.html in some codes editor as well as style.css. Even notepad could be, but of course there are better choices. Update html’s style in css by pasting this code into it:

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.

#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.