The resolution for the web is 72 dpi (dots per inch); a good resource for screen resolution and dimensions is: Website Dimensions
I would recommend beginning with a white background to start with as you can always change it.
The size of your document is typically determined by your target audience, and the type of site you're designing for, e.g. web, tablet, mobile. When designing for web, the lowest common denominator for your document should be 960 pixels wide, which will fit in a 1024x768 pixel screen resolution. Depending on your audience, you could go larger, but I typically like to keep all content within 1440px wide by the length of your content.
You also need to be aware of the browser window around your site. If you plan on having a background image, color, texture, etc., you may want to make your document larger than the content area so the background is visible. Even if you're not using a background, you need to remember that there could potentially be space around what you see in Photoshop.
The "Invisible" Fold
If your client wants all the content on the homepage, or any other important information, to be visible without scrolling, it should not extend past 750px from the top of your document. Keeping "the fold" in mind, remember that the viewing size is smaller because of the space that the browser takes in your window, so the above number could possibly be a little less.
Workspace
Photoshop Layers & Groups
The image below shows how you might organize your layers using groups. Make sure all groups and layers are named and you can think of it in terms of your layout and content.
You will have the following main groups; and all of your content will go within one of them:
You can (and should) create sub-groups within each main group of content. This will help to keep your files clean and neat and is proper industry etiquette, especially if you need to share files with colleagues.
I would recommend beginning with a white background to start with as you can always change it.
The size of your document is typically determined by your target audience, and the type of site you're designing for, e.g. web, tablet, mobile. When designing for web, the lowest common denominator for your document should be 960 pixels wide, which will fit in a 1024x768 pixel screen resolution. Depending on your audience, you could go larger, but I typically like to keep all content within 1440px wide by the length of your content.
You also need to be aware of the browser window around your site. If you plan on having a background image, color, texture, etc., you may want to make your document larger than the content area so the background is visible. Even if you're not using a background, you need to remember that there could potentially be space around what you see in Photoshop.
The "Invisible" Fold
If your client wants all the content on the homepage, or any other important information, to be visible without scrolling, it should not extend past 750px from the top of your document. Keeping "the fold" in mind, remember that the viewing size is smaller because of the space that the browser takes in your window, so the above number could possibly be a little less.
Workspace
- Check all your settings.
- Info tab and rulers need to be set to pixels; there are no inches on the web.
- Set up your color profile for Web and sRGB.
- Make sure "snap to" is on.
- Open your rulers (Command R) and drag out a center rule at 600px.
- If you're working with a grid, setting up your grid lines should be one of the first things you do - more about grids to follow.
- Create a new layer for site stroke if needed.
- Make sure your info palette is open.
- Create the main groups in your layers panel.
Photoshop Layers & Groups
The image below shows how you might organize your layers using groups. Make sure all groups and layers are named and you can think of it in terms of your layout and content.
You will have the following main groups; and all of your content will go within one of them:
- Header
- Content
- Footer
You can (and should) create sub-groups within each main group of content. This will help to keep your files clean and neat and is proper industry etiquette, especially if you need to share files with colleagues.
No comments:
Post a Comment