Preparing Your Photoshop Files for Development

Web Graphic File Formats

JPEG: Joint Photographic Experts Group

• Best for continuous tone photographs, glows, gradients, drop shadows, etc.
• Supports 24 bit color

PNG: Portable Network Graphics

• Superior File format to use with transparency 
• Use PNG 24 or 32

GIF: Graphic Information Format

• 8 bit color (256 indexed colors)
• Use for flat or simple graphic images
• Transparency and GIF animations

Optimizing Graphics

JPEG compression is called lossy and will cause your image to lose quality each time it is compressed. It reduces file size by discarding information, so if you need to make a change, go back to your original psd file and re-optimize.


Save for Web...

1. Go to File > Save for Web
2. Choose file type

Saving as PNG

To get the best quality transparency use PNG 24 or 32. The file size is larger than the GIF but it is superior in quality.


Saving as JPEG

1. Use the 2/4Up tab to view the image in different compression ratios
2. Select JPEG
3. Change quality and look at the difference in compression and image quality

Extract Assets... 

(Only available in AdobeCC)

Make sure your layers are cleaned up, delete any layers you are not using and have them all named properly before you go to extract assets.

1. Select the layers you want to save out
2. Go to File > Extract Assets

By selecting the "Extract" button, it will export your layers based on what file type you select. The files will be saved to the designated folder of your choice.

FILE MARKUP (REDLINE)

As you are working on your design, you need to make sure to check the sizes of your design elements.

• How wide is your page?
• What size is your header, footer?
• What is the width of your column(s)?
• Do they add up to the total width? 
• What are your font specs?
• What typeface, size, style, etc. are your fonts?
• What is the leading?
• How many pixels do you want between paragraphs? 

You can either printout a copy of your design and mark it up with the dimensions of all your elements or do it digitally. The development team (or you) will need this document so they know what your specs are and can develop exactly what you designed.

FTP AND THE PRATT SERVER

For your site to show on the web, you must upload or FTP (file transfer protocol) them to your web hosting server. If you don't have one, you can use the Pratt server, and you will need an FTP program. There are many free ones; Pratt has CyberDuck.


Here are your ftp settings: Pratt uses SFTP which is secure.

server: mysite.pratt.edu
name: user name
password: same as email and onekey

Server info

1. Make sure you have a public_html directory.
2. If you don't, then create one.
3. Copy all your files to this folder.
4. Remember that the first file to load will always be your index.html file.