Adobe Photoshop/Saving and Converting File Types

From WSU Technology Knowledge Base
Jump to: navigation, search

Importing Images

Photoshop will import all bit-mapped or raster graphic files.

It also imports PDF files. When importing a PDF file, the user can choose to import ONLY the graphics and none of the text, and which graphics to be imported. This is a good way to "extract" an image from a PDF file that you may want to use in some document of your own.

It can as well handle SVG or vector graphic files, such as created by Illustrator or InDesign, but it will convert them from raster objects if you want to manipulate them.

Files from cameras which were produced as raw data will also be imported and retained in raw data format. Photoshop includes an add-on for manipulating raw data file formats, preserving the original data without compression.

See the video tutorial in Adobe Photoshop/Advanced Features for more about raw data editing.

TIP: when you have used COPY in your computer and intend to paste the image, if you create a NEW DOCUMENT in Photoshop it will automatically create it to the size of the image you want to past. After using File>New, you can use PASTE and the image will be placed on the first layer.

Saving and Changing the File Type

Comparing Image File Types
Photoshop will save a graphics file to any of several formats. Because it will add the extension for the file type, it should not be necessary to change the name of the file.

Thus a raw data picture or JPEG can be saved to PNG.

The value of file types lies in their uses. Web images should be as small in file (or data) size as possible, so that they load efficiently and take less storage space. Generally these will compressed files such as JPEG or PNG or GIF. These files can be scaled to file (data) size, corresponding to "quality" of the image.

The qualities are subtle.But you can see how the colors vary and how the details are lost and how the different are the file sizes and the lengths of time to load on the internet.

This is the Dialog on a Mac... PC is similar.
To save the file in a format or a name other than the original, use the menu File>Save As.

Generally, PNG is better for photographs. JPEG better for mixed media. GIF and PNG can have "transparency" and so can float over the top of backgrounds, whereas JPEG cannot.

Nowadays web design also supports an extensive library of special effects and vector graphics such as Flash and SVG, so the limitations of these older graphic formats are less important to professionally developed sites. But for your Portfolios, you should be conscious of file sizes and the image size on your screen. The picture here of Hazel, the cat, at 2048x1536 pixels is altogether too big for a typical web page which is not half as wide as her picture .

Saving and Converting Images for the Web

Photoshop save for web.png
Photoshop provides a special dialog for converting image files to the Web and for iPods, cell phones, PDA's and so on that need image files to be small and highly compressed.

Find it under the menu item File>Save for Web and Devices.

The dialog provides options for several file types, for configuring size, for cropping, for compression and so on.

  1. First: you may set the file type here. Choose JPEG, GIF or PNG (8) or PNG (24). PNG (24) is for the highest quality of photographs. JPEG and GIF also have a variety of options to choose that will affect size of the file, color and resolution.
  2. Second: you may change the image size here. You can do this by percentage or by specific pixel ratios.
  3. Third: you can preview your image in a web browser to decide if this what you want.

NOTE: the tabs at the top of the image view can also show you the "original" or the "modified" image or can compare these, or compare up to 4 options.

Select the option you want to output and click Save.

This will open a final dialog which will permit you to decide what to name the file, where to save it, and whether to save it only as an image or as an HTML page with images. You would do the last if you have created a multilayer image, with roll-overs, slices and so on. These advanced features are not discussed here.

Other Resources

For ADOBE TV tutorials on Photoshop: Go Here instead...

For an official Adobe Manual on Photoshop: Download This!

For help from Adobe on File types: Go Here!