Web Design Tips for Our Valued Partners
To help you create efficient artwork files that our developers can easily work with, we have created this useful information and guideline page. We hope these instructions will aid you in preparing your artwork; perhaps you'll gain a little knowledge about designing for the web as well. Should you have any questions, feel free to contact us!
Preferred File Format:
Adobe Photoshop CC or lower (*.psd)
Other Acceptable File Formats:
Adobe Illustrator CC (*.ai or *.eps)
Adobe Fireworks CS6 (*.png)
Download Our Photoshop Template
This guided Photoshop file will help you get started on your project.
Download our PSD Template here
File Preperation Specifications
Layout & Safe Area
All necessary text and images must be kept within the Safe Area: 1000 pixel area with 5-pixel padding on each side to ensure that the working web pages are viewable to the average, lowest screen resolution (1024x768).
Backgrounds can be created wider or seamlessly repeating so that the layout will seem full-width or “scalable” at any screen resolution.
REM staff will select an appropriate colour scheme for the mobile template framework based on the desktop theme.
The example on the right is one of REM's clients: Matbridge Investments. This design follows the Safe Area criteria.
Click here to view larger image
Layers & Groups
Do not flatten/merge artwork.
Label and sequence layers and groups logically with descriptive names. For example company logo in the header and main navigation items would be in a group called “Header.” The company’s logo would be labeled “company-inc-logo.”
Avoid excessive, redundant and/or empty layers.
Do not use symbols (*&^:;#@$%!)
Embed or rasterize Smart Objects and/or Cloud Library files (such as purchased stock photos or vectors) to avoid broken links.
The screenshot on the right is an organized and properly named Adobe Photoshop file.
"The images you create in programs like Photoshop and Illustrator look amazing but often the file sizes are very large.
Optimizing your images for the web means saving or compiling your images in a web friendly format depending on what the image contains."
- File resolution must be 72 dpi.
- Avoid low quality images such as ones where pixelation can be seen at normal zoom.
- RGB Colour Profile.
- Stock photos must be purchased, high quality and without watermarks.
- REM will optimize the images for the web.
"A desktop font is designed to be installed on your computer for use with applications such as Microsoft Word or Adobe Photoshop.
A webfont is a specially tuned font for use on websites using the CSS @font-face declaration. Webfonts have no OpenType features and often have extraneous glyphs removed."
- Do not outline fonts.
- Ensure that font-sizes are rounded up to whole numbers (e.g. 16 point instead of 15.9 point)
- Include a “fonts” folder that has all the font files (OTF or TTF) used in the design (including fonts used in Smart Objects).
- Fonts used must be either fully licensed or OFL (Open Font License). Feel free to use the OFL font resource that our designers use: FontSquirrel
- Fonts must be convertible to web-fonts. For more information on web-fonts please go here.
- Please collect all files into a Compressed ZIP folder.
- Supply RGB jpg proofs of all layouts.
- Include any detailed notes about the artwork that we may need to be aware of.
- Please add notes about any effects such as mouse-overs or drop-down styles that you would like us to create.