Hey guys,

 

I have downloaded numerous HTML templates. I have used these templates before and although I find it easier to edit PSD templates using photoshop, it is the latter process that I am confused with. What do I do with these templates later on? How do I convert them into web pages? Please, can someone help me find a solution to this problem? I really need this help as I plan to begin my site before November, for my online business. I would appreciate it if you could guide me through or suggest a website that can.

 

Thanks for all your help.

The way I do this is by flattening the PSD in different ways and extracting the elements that I require.

 

For example, hide all of the layers except for the background; crop it, save it as a png.

 

Then hide the background, show the navigation boxes, crop them, save them as a png.

 

And so on.

 

Then on the HTML side of things you merely use DIVs and CSS to position and structure your layout using your new images.

How do you crop the exact sizes you need for your css div's? e.g 100px by 50px? I dont understand how to do it using the ruler?

How do you crop the exact sizes you need for your css div's? e.g 100px by 50px? I dont understand how to do it using the ruler?

If the background consists of a perfect colour, I just use the trim tool (Image > Trim). Then you can just go Image > Image Size (Ctrl + Alt + I) and view its size in pixels, cm, mm, whatever.

 

Is that what you were asking?

If the background consists of a perfect colour, I just use the trim tool (Image > Trim). Then you can just go Image > Image Size (Ctrl + Alt + I) and view its size in pixels, cm, mm, whatever.

 

Is that what you were asking?

 

That's awesome thanks. +1

is there away to get the image size info on screen all the time.. constantly going to image > image size does my head in

That's awesome thanks. +1

You're very welcome. Thanks mate.

 

is there away to get the image size info on screen all the time.. constantly going to image > image size does my head in

I've looked for you and I can't see an obvious solution I'm afraid. There's the info pallette but that only tells you the width and height of the currently selected area.

 

Anyway, Ctrl + Alt + I isn't tooooo painstaking, I'm sure.

is there away to get the image size info on screen all the time.. constantly going to image > image size does my head in

 

Yes there is, up the top you should see a menu that says "window" Click that and then click info. A window should pop up. Then when you have what you want, hit CTRL+A to select the canvas, then it will tell you the dimensions of the image.

If the background consists of a perfect colour, I just use the trim tool (Image > Trim). Then you can just go Image > Image Size (Ctrl + Alt + I) and view its size in pixels, cm, mm, whatever.

 

Is that what you were asking?

 

or if you are using the crop tool, then at the top, where the options are, on the right hand side, you can set the size of the crop. Its good when you want to make a gradient bg, 1px wide, by 600px high, just put that as the crop size then crop away