Outputs: web & print

Outputs: web & print

It is essential that you understand how to control pixel dimensions and how to optimise image files for the differing requirements of web and print.

We are going to prepare two output files with the following specifications

  • WEB:  JPEG, 1024 pixels wide, sRGB colour space
  • PRINT: TIFF, A3 240ppi or 360ppi, Adobe RGB colour space, no layers

 

The demonstrated ability to prepare files according to stated specifications is a key real world professional skill.

Indeed, the ability to prepare files to specifications is often taken as an indicator of professionalism! If you don’t pay attention to detail and demonstrate that you can prepare files as specified, you may find your work dismissed and miss out on opportunities! There is an assumption that if you don’t know how to prepare files as specified then you probably don’t know what you are doing.

Example of real world specifications:

[and more here https://acm202.wordpress.com/tag/outputs-for-screen-and-web/ ]

 

SQUARE MAG

http://www.squaremag.org/

THE ONE SHOW

http://enter.oneclub.org/digitalhelp/

Screen Shot 2013-07-02 at 6.17.41 PM

 

LENS CULTURE

 https://www.lensculture.com/photo_submissions

Screen Shot 2014-08-03 at 2.23.12 pm

 

GETTY IMAGES

http://contributors.gettyimages.com/img/articles/downloads/submission_req_one_page.pdf

 

IMAGE SCIENCE

http://www.imagescience.com.au/pages/How-To-Prepare-Files.html#GeneralNotes

Information on preparing files for printing from Image Science

Screen Shot 2013-07-02 at 6.22.25 PM

 

PREPARING OUTPUT FILES

The key concept to internalise at this point is that of WORKFLOW:

Slide3

Protect your Master file. Employ non-destructive editing techniques such as using layer masks instead of deleting pixels and preserve your layers when you save the file so that you can make changes at a later date. Do not resize your master file.

When you prepare files for output, firstly DUPLICATE the file before you flatten the layers and start resizing the file.

The file size and quality of an image file is determined by the pixel dimensions.

The web is ‘resolution independent‘, whereas resolution is central for print quality.

In other words, resolution is not relevant for screen but essential for print.

 

 

PIXEL DIMENSION VS RESOLUTION (PPI)

There is a key difference between pixel dimensions and resolution (ppi)

note that ppi = pixels per inch, not pixels per centimetre. Many photography conventions are in imperial measurements.

 

  • If the M&Ms were pixels, what is the pixel width in the row below?
  • How many M&Ms per inch?

pixel1-24wide2ppi

  • Now what is the pixel width?
  • And what is the ppi?

pixel2-24wide1ppi

  • Pixel width?
  • ppi?

pixel3-12wide2ppi

 

  • What are the pixel dimensions of this image, Mona Lisa Remixed (2009) by Gary Andrew Clarke?
  • If this image were 10 inches wide, how many pixels per inch (ppi)?

mona lisa remixed

  • What is the pixel dimensions of the image below?
  • Without changing the pixel dimensions, note the change in Document Size when we go from 360ppi to 240ppi.

monalisaSIZE

 

OPTIMISING FOR THE WEB

The key for web is to make the file as small as possible without compromising the image quality and maintaining the illusion of continuous tone.

Note that the web is ‘resolution independant’ – it does not matter what the ppi resolution is!

The optimum size for your web files is determined by the width of your website column.

For example, within WordPress, different themes may have a different column width.

Find the column width of your WordPress theme here:

 

Scroll down till you find the following info:

Note that different themes have different specifications – you may choose to look for a theme with large image sizes

 

PRACTICAL EXERCISE:
prepare outputs for web and print

  • prepare outputs from a master file for web and print using the following specifications:

SPECIFICATIONS

  • WEB:  JPEG, 1024 pixels wide, sRGB colour space
  • PRINT: TIFF, A4 240ppi or 360ppi, Adobe RGB colour space, no layers

 

  • If you do not have a large master file to work with, you can download a high res image here:
    HIGH RES MONA LISA
  • To prepare outputs, first make DUPLICATES (derivatives) from the Master File

 

Try following the steps below:

 

  • This is my master file – I want to preserve the layers and pixels
  • Note that Photoshop is only displaying 10% of the pixels in this view.
  • See the % info in the lower left hand corner and in the file tab info bar

  • To protect your master file, make duplicates of the master file BEFORE you make any changes to the file size.
  • MENU: Image / Duplicate

  • Get into the habit of naming your files in a way that helps you keep track of what it is.
  • Save one file for WEB and another file for PRINT
  • The ‘Duplicate Merged Layers Only’ checkbox will flatten the file and make the file size smaller (MB etc).

  •  You now have 3 copies of the image. View them all side by side:
  • MENU: Window / Arrange / 3-up Vertical

  • Close the Master file so that you cannot accidentally resize or flatten it.
  • Keep the the web and print files open

SELECT THE WEB FILE FIRST

Now we need to adjust the pixel dimensions.

  • Click in the tab for the web file to select that file.
  • MENU:  Image / Image Size

(did you spot my mistake? I am working with the file name PRINT …  )

You can resize the Image Size dialogue box to get a larger preview

NOTE: P3.16 now has Photoshop CC, whereas P2.11 still has Photoshop CS6

The Image Size interface is slightly different! See video:

 

Toggle the measure from Centimetres to Pixels

  • So the width of the image file is 7601 pixels

  • Change the width of the pixel dimensions to 1024 pixels wide.
  • Note the change in the Preview!

  • Note that you can select different Resampling Interpolation options
  • Experiment with the effects of the different options
  • Note that the BIG advantage of the Photoshop CC Image Size dialigue box is the abilty to PREVIEW the edits!

  • Click OK to save the Pixel Size edits
  • Note that web file is now much smaller (although I have accidentally done this to the PRINT file … )

SIDE BAR: You may be more familiar with the FILE / SAVE FOR WEB dialogue box
but it does not have the same preview functions as the IMAGE / IMAGE SIZE diallogue box.

 

NOW RESIZE THE PRINT FILE

  • We want: A4 240ppi or 360ppi
  • The aspect ratio of your photo is probably different to that of the paper.
  • Do not stretch the image to fit the aspect ratio of the paper!
  • 240ppi is the minimum resolution for print. The optimum is 360ppi.
  • As you will know from the recommended reading, ppi is different from dpi!
  • NOTE that I have toggled the measure from Pixels to Centimetres and the the Resolution checkbox is unticked

Adjust the centimetre size to fit within the size of your paper

Note that the PPI number has changed and that the pixel dimensions have not changed

  • Recheck the Resample box and enter the appropriate PPI – either 240ppi or 360ppi
  • Choose the ppi that will cause the least resampling
  • Experiment with the effects of the Resampling interpolation options
  • Click OK to same the edits

Instead of making the image exactly A4, I will use Canvas Size (MENU: Image / Canvas Size) to create a border and specify exactly where the image will sit on the paper.

So, here is the web and the print file, both at 25%, which means you are only seeing 1/4 of the pixels in the file.

(now with the correct edits on the correct file!)

  • Here are both files as 100% each
  • MENU: View / 100%

  • If you zoom in even further, you can begin to see the difference.
  • Also, take a look at the relative file size for each of your outputs.

COLOR SPACE

  • Now set the ‘color space’.
  • MENU: Edit / Convert to Profile (NOT Assign Profile!)
  • We will be looking more closely at profiles and color spaces in the theory presentation.

 

  • For the web file, we want sRGB and for the print file we want Adobe RGB
  • sRGB is the colour space of the web, whereas Adobe RGB contains a larger range of colours that can be printed.

I will discuss Rendering Intent during the Theory lecture

We will discuss colour space in more detail during the theory presentation, but:

 

You can see this also when you use MENU: File / Save for Web

The image below shows the original file on ProPhoto color space on the left and the web file in sRGB colorspace.

Finally, let’s discuss sharpening

The final step before printing or posting to the web is to apply a little sharpening.

‘Sharpening’ does not replace crisp focus but enhances the appearance of definition of details. It need to be handled with subtlety!

Video tutorial: http://tv.adobe.com/watch/learn-photoshop-cs6/sharpening-an-image-with-unsharp-mask/

 

See also ‘Preparing an Image for Output’ (13.55 mins)’, Photography techniques with Adobe Photoshop CS5 [electronic resource] : learn by video [S.l.] : Video2brain.com : Peachpit Press, 2010 http://encore.deakin.edu.au/iii/encore/record/C__Rb2680965

 

FINALLY: SAVE AS TIFF & JPG

MENU: FILE / SAVE AS

Note the color space 

Note the Quality settings are a compression slider – see the changes to the image size

Let’s compare the difference in the final output files:

FURTHER INFO

Check the further ideas blog for more: https://acm202.wordpress.com/tag/outputs-for-screen-and-web/

 

This webpage has a good summary of how to get fast loading web images: http://www.imagemaven.com/how-to-get-quick-loading-images/

 

‘Preparing an Image for Output’ (13.55 mins)’, Photography techniques with Adobe Photoshop CS5 [electronic resource] : learn by video [S.l.] : Video2brain.com : Peachpit Press, 2010 http://encore.deakin.edu.au/iii/encore/record/C__Rb2680965

 

See Chapter 12 of the Martin Evening textbook for more detail on preparing for print:

 

And the Manual of Photography 2011 has excellent detailed background on how printers and screens work:

 

 

The manual of photography edited by Elizabeth Allen, Sophie Triantaphillidou, Oxford ; Burlington, MA : Focal Press, 2011, 10th ed
http://encore.deakin.edu.au/iii/encore/record/C__Rb2505254

 

BTW, if you are working with Photoshop CC thoughout your workflow, you can take advantage of a full RAW workflow, see

Galer, M, & Andrews, P 2014, Photoshop CC Essential Skills : A Guide To Creative Image Editing / Mark Galer, Philip Andrews, n.p.: Burlington, MA : Focal Press, 2014., DEAKIN UNIV LIBRARY’s Catalog

p.48-49

Screen Shot 2014-07-30 at 4.44.15 pm Screen Shot 2014-07-30 at 4.44.26 pm

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s