Width for PSD Template?

Hi Themeforest!

I’ve now made a mockup for a PSD template which I want to work with further. Now I don’t really know what width I should have on my PSD. It’s just a “One Page” template. Should it be over 1000px?

With responsive design it could be anything, but most of the PSD templates are based on 960px grid.

Hello, I think 960px is your best choice for your template width. However, there are designs that exceed 960px into the 1000’s, no greater then 1024, to support spacing/padding on the left & right sides of their template. For your .psd I’d say set it’s width to about 1200 to give you some working space then lay down guides in your .psd to design your theme keeping it’s width within 960px. After a .psd has been converted to html a coder should be able to define a new width or make it responsive for larger/smaller resolutions as he needs.

It’s not mandatory to do it like this but it’s the general idea I think.

Good luck

Taaz said

Hello, I think 960px is your best choice for your template width. However, there are designs that exceed 960px into the 1000’s, no greater then 1024, to support spacing/padding on the left & right sides of their template. For your .psd I’d say set it’s width to about 1200 to give you some working space then lay down guides in your .psd to design your theme keeping it’s width within 960px. After a .psd has been converted to html a coder should be able to define a new width or make it responsive for larger/smaller resolutions as he needs.

It’s not mandatory to do it like this but it’s the general idea I think.

Good luck

Thank you both for the fast replies!

So I start by putting the width to 1200px. So far, everything is clear. But then, what do you mean by “lay down guides”? Should the template not exceed 960px?

It’s the first time I make a real PSD template so I don’t know so much about that.

Check out this tutorial on the official adobe website:
http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-74cda.html

You can go to Edit -> Preferences -> Guides, Grid, & Slices to define your settings too.

To get an accurate placement on your guides for a 960px width you can simply take ((1200 - 960) / 2) = 120, so you place your left guide 120px from the left of your document and your right guide 120px from the right of your document.

There’s a lot to learn using photoshop to design a website, it might save some time to begin an extensive design/photoshop research right away :slight_smile:

Taaz

Taaz said

Check out this tutorial on the official adobe website:
http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-74cda.html

You can go to Edit -> Preferences -> Guides, Grid, & Slices to define your settings too.

To get an accurate placement on your guides for a 960px width you can simply take ((1200 - 960) / 2) = 120, so you place your left guide 120px from the left of your document and your right guide 120px from the right of your document.

There’s a lot to learn using photoshop to design a website, it might save some time to begin an extensive design/photoshop research right away :slight_smile:

Taaz

I think I understand it now, thanks for the link too :slight_smile:

I like to create high resolution PSD files , in 1920px … otherwise 1200px ( grid on 960 )

manuelvega said

I like to create high resolution PSD files , in 1920px … otherwise 1200px ( grid on 960 )

Do you recommend me to use 1920px? If I do so, can I check the box “High Resolution” when uploading? Can it be customized to work on an tablet or a 1366px wide screen for example?

yeah right, I think if you design in 1200px you can also check it , but I would not do it. If you’re using 960 grid system uses 1200px, I recommend using only high resolution if your theme is based on bootstrap or other high-resolution grid system