28 posts
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 1 year
  • Sells items exclusively on Envato Market
Ghreizi says

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?

556 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $1,000+ on Envato Market
  • Won a Most Wanted contest
  • Has been a beta tester for an Envato feature
+4 more
kriskorn says

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

74 posts
  • Has been part of the Envato Community for over 2 years
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in United States
Taaz says

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

28 posts
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 1 year
  • Sells items exclusively on Envato Market
Ghreizi says

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.

74 posts
  • Has been part of the Envato Community for over 2 years
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in United States
Taaz says
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 :-)

Taaz

28 posts
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 1 year
  • Sells items exclusively on Envato Market
Ghreizi says

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 :-)

Taaz

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

2231 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+4 more
manuelvega says

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

28 posts
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 1 year
  • Sells items exclusively on Envato Market
Ghreizi says

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?

2231 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+4 more
manuelvega says

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

by
by
by
by
by
by