Design, CG Graphics & Inspiration
“Etiquette” in Photoshop – Useful Tips For Web Designers

“Etiquette” in Photoshop – Useful Tips For Web Designers

Following these simple rules exclude many problems that might arise when working with HTML coders and designers.

Don’t create unnecessary files!

File is not used in the project? Delete it. Extra files make a mess and reduce efficiency.
“Etiquette” in Photoshop

Store the source files in /source/ folder

Create a separate folder / source / and keep all the source files of the project there. Add only the main psd-files to the root of the project.
“Etiquette” in Photoshop

Attach non-system fonts to the project

Copy the font files in the folder / source /. If the font is a non-system, then there is a big chance that coder doesn’t have it.
Do not forget about the license restrictions on commercial fonts.

Name the files according to a given version

For easy determination of the current version add prefixes to the file’s name. For example: ilovefile-1.psd or ilovefile-final.psd
“Etiquette” in Photoshop

Use .Zip instead of .Rar

RAR-archives are not quite ideally supported on UNIX-based systems (MacOS, Linux). Take in the habit of using zip-archives. It will simplify others’ lives and improve the attitude towards you.
“Etiquette” in Photoshop

Don’t merge the layers without any need

When you leave your layers unmerged you increase the speed of making edits in your layouts. Convertion of the text in the raster is also not recommended. Rasterize layers only before the layout, and only layers that contain complex effects.
“Etiquette” in Photoshop

Use folders

Group the layers into folders. Create folder for each page and name it appropriately.
“Etiquette” in Photoshop

Colorize folders

Make the file readable to the others – colorize the first level folders in various colours.
“Etiquette” in Photoshop

Set global elements

It makes sense to put “header”, “footer”, logo and other cross-cutting elements of the site into a separate folder, making them global. You should not copy them to a folder for each page.
“Etiquette” in Photoshop

Name the layers

Do not forget to name the layers. If you have more than one hundred layers with titles such as «Layer N», then the file becomes completely unreadable.
“Etiquette” in Photoshop

Coder will code everything that he sees

And he will be right. Do not think that if one layer hides another (auxiliary, wrong or simply forgotten), the coder will not see or code it. Remove the extra layers from the document.
“Etiquette” in Photoshop

Set the font size with integer

Font height (size) set with integers. The result of the layout will be more predictable.
“Etiquette” in Photoshop

Save for Web & Devices…

Do not save your files via the «Save as». The files will be larger than when you save it by using «Save for Web & Devices …». When you save a file via «Save As …» a lot of overhead information is being written. For example, the preview of the pictures or information about the photo (EXIF). All this adversely affects the file size.
“Etiquette” in Photoshop

Reasonable JPEG-quality when exporting

By default, set the quality within 51-80. It was determined on the practice that below 51 the image quality becomes lower.
“Etiquette” in Photoshop


Choose the correct format when exporting images. Photos and complex drawings with lots of gradients should be saved in JPEG. If you have a simple illustration or want transparency, then you should save it in PNG.
“Etiquette” in Photoshop

Original source


Andrew is the chief editor of Splashnology blog. He has many years of experience within the web design industry and has a passion for the latest web technologies. 3D Models Marketplace

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.