The graphic design course blog for
HND Visual Communication at Edinburgh College

Guidelines for Archiving as Web Formats

20 January 2008

As part of your project archiving, you should get into the habit of preparing web-formated copies of your work so that they can be posted here on the blog, or uploaded to your own portfolio website.

For the blog, sizing to 650px is fine. The files appear on the blog at 400px wide, but they then link to the 650px sized version.

Here are the recommended guidelines for doing this:

1. Create a desktop folder called your_name_and_project_title
2. Open each pdf file in Photoshop.
3. Make sure 'constrain proportions' is ticked in image size.
4. Resize to 650px width.
5. Now go 'save for web and devices'. This will compress the file to 72ppi.
6. Select jpg and set the quality to medium or high (80%), NOT Maximum.
7. Save the file with a sensible name eg emma_hart_projectname_1.jpg.
8. Now copy the folder into the Design Archive in your HND year folder.

Don't have any spaces in the jpg filename, use underscores or dashes.
Create a Photoshop Action for the resizing, then you can batch process a whole project.

Obviously, not all your work will be straightforward to resize. Here are some examples and what to do in each case.

1. Your project is a series of pdf files for A3 and A4 posters. No problem, just resize each and save.

2. Your final work is a series of doublepage spreads. Follow the process above, but for your best/key piece, cut it into two and save each side at 650px width, that way we can post up the spread as two separate files.

3: Your project contains many smaller pieces or is Corp ID/Packaging. You can assemble the pieces in one file, as you would to print them out, then resize the whole file as above. Another option is to photograph the packaging and stationary, then resize the images. Do this in the studio, and photograph against a white background.

4. Your work is video. Save it in the archive and we'll compress it for the web.

If you have any problems, or require an actual demonstration of the process, David W or myself can arrange this during a lab session on request.

For a more comprehensive look at saving images for web, check out this post on sixrevisions.com.