
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:
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:
Here, grab this code for the search form and search icon.
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.
not like
Great post
Your give each and every post in clear explain
Thanks… very long and some textarea/code not showing up property but good info
thank you so much for this tutorial.
you are very talented and tought me a lot!
keep on with the good work.