Meeting 23

Il lavoro nobilita l'uomo

Topics:
Duotones and Screens
Artistic Edges on Photos
Animations
Creative #4

Duotones and Screens in Photoshop

Duotones are pictures intended to be printed in two different colors of ink, usually black and another color. When printed, they often have an overall color cast to them, although black and gray duotones exist to smooth out the picture in high-end publications like a photographer's coffee table book. While a duotone costs more to print, the cost increment over a one-color print job is offset by enhanced appearance. Duotones represent a cost effective way to jazz-up a print job.

There are "fake duotones" (essentially a grayscale picture printed over top of a patch of another color), and there are RGB pictures that look like duotones, but they are fundamentally different from a true duotone.

This is an RGB file, not a duotone even though it resembles a duotone. This is the web (obviously!), so you can't see a true printed duotone here. Remember that duotones are for PRINT ONLY!

In a page layout program (QuarkXPress, or InDesign), RGB pictures will separate into CMYK when going to a printing press (but ideally should be converted first while in Photoshop if you're going to a  printing press!). CMYK pictures will of course separate into the four component colors - cyan, magenta, yellow, and black. However, a true duotone EPS file will separate into Black (usually) and another color. The second color in a duotone are usually  premixed Pantone colors, and they are usually chosen from printed swatch books to use in the design or to match colors specified by a client. Client choices are often made to match a specific logo color.

Steps to create a duotone:

Open a grayscale or a color photo. Use 07Final.psd in Exercises 4. Convert to grayscale if it is a color image.

Convert to duotone (Image>Mode>Duotone), and pick a second color. The second color can be selected after you click on the default white color patch of the second color. Click on the Color Libraries button to choose Pantone colors appropriate for a true duotone.

If a preset duotone curve is not loaded then the new color may not work very well. Color dominance is affected by the duotone curve shape. The default straight line curve is often NOT the ideal curve to use for a number of reasons. Click the Preset list and select a nearby color to the one you eventually want to use.

(Note: In older versions of Photoshop, finding the Duotone Presets was a chore. If you are using an older version and find that the presets don't display in the Preset list, you may have to click the little gear icon, click "Load Preset", then navigate to the Applications>Adobe Photoshop xxxx (for whatever version you have)>Presets>Duotones>Duotones>Pantone Duotones and pick one.)

Modify a preset by changing the Pantone color (Click on the color thumbnail in the Duotone Options dialog box). It is best to start with a similar color before you begin to change it.

Halftone Screen Angles
In commercial printing, rows of dots make up the simulated grays or color shades in a picture. The rows are placed at various angles to work best. Black is always printed at an angle of 45 degrees. The chart below shows screen angles for a typical CMYK print colors.

Typical process color (CMYK) angles:
Black	45 degrees
Cyan	15 degrees
Magenta	75 degrees
Yellow	90 degrees

In Photoshop, the default screen for duotone inks is often the same screen angle (i.e. 45 degrees) for every color. That won't work! If screen angles are set incorrectly, moire patterns may result. Sometimes they are so bad that the print job is useless.

To print well on a printing press the two colors in a duotone must have different screen angles. The printing company should be able to tell you what screen angle and screen frequency to use. If the printer cannot tell you much or you don't know what printing company will be employed, set black at 45 degrees, and use either the cyan or magenta screen angle from the table above.

Metro Trade's Recommendations for Duotone Screen Angles
It should be noted that some printshops or halftone trade shops (like Metro Trade in Columbus, OH, phone 614-461-9076) prefer that all duotone inks be set at screen angles 30 degrees between black and the second ink. In the chart above, both 15 degrees and 75 degrees for a screen angle meet this requirement. Whatever you choose, make sure that the lightest printing color is the one set at other than 45 degrees. Be sure to check with the print shop for any specific requirements that may differ from the recommendations here. Good communication is key to good printed reproduction quality.

Halftone Screen Frequency
Screen frequency is how many rows of printed halftone dots fit into an inch. The measurement for this is "lines per inch" in the USA. Screen frequency is limited by the type of paper and printing press used. While we'd like them to be very high to make them invisible, the real-world limitations of paper and printing press impose an upper limit. The more porous and absorbent the paper, the lower/coarser the screen frequency is because of the spreading of ink on the paper. All high-quality printing using 133 lpi or higher is on coated paper to control ink spread.Newsprint is usually a fairly coarse 85 to 100 lines per inch, while magazines traditionally use 133 to 150 lines per inch.

NOTE: Sadly, the ability to set halftone screens and dot shape has been removed from Photoshop CS5 and beyond. This is angrily reported on the Adobe User forum at http://forums.adobe.com/message/2955216

The ability to set screen angles for spot colors exists in InDesign, but there appears to be no control over halftone dot shape (round vs. elliptical, vs diamond, etc.) as there was in older versions of Photoshop. The screen capture below comes from InDesign's Print dialog box (File>Print). Navigate to the Output section of the dialog box, choose your printer (print settings will change with different printers), select a screen frequency based upon the type of paper used, and be sure to change the screen angle for the second color. It defaulted to 45 degrees on my copy (the same screen angle as black), which would be a printing disaster if the printing service didn't catch it either. Uncheck any unused colors (in my case below, I unchecked Cyan, Magenta, and Yellow) so that you don't accidentally print empty negatives (and be charged for them!).

Illustrator also has a similar Print dialog box with nearly the same options as InDesign. The steps outlined above should work there too.

Creating "Torn Paper" Artistic Edges on Photographs
There exist a series of third-party plug-ins for Photoshop that apply rough edges to a photograph or other illustration. The available styles of edges make it appear as a Polaroid print, or an alternative process with brushed edges, or other choices. One such company is AutoFX located at http://www.autofx.com if you wish to purchase one of their Photoshop Plug-ins to do photo edges.

A creative person can create their own rough edges for photos though it involves a few more steps than the plug-in. The example below is for a torn edge paper appearance and uses the two files called 70s skating.jpg and torn paper.jpg in Exercises 4.

	+		=
Original photo		Scanned paper w/ black background		Rough edges on photo

The steps are as follows:

Open both files - torn paper.jpg and the 70s skating.jpg pictures (Exercises 4).
TIP: The rough edges that will eventually surround the photo were made by scanning a sheet of torn paper. When making your own torn paper edges, try wetting the tear line with water to produce a pleasing texture on the edges. The scan or photo of it must be either white on black or vice versa. Avoid having detail in the center of the edge-producing item. You can paint away detail with the Brush tool, if needed.

If needed, adjust the color of the faded skating photograph using the Curves or  Levels.

Adjust the levels (Image>Adjustments>Levels) of the torn paper file to make the background area 100% black. The settings should be similar to that shown below.

The white of the paper still has some tone to it, and a slight tone at the edges is desirable. However, the center part of the picture should be pure white (255, 255, 255) to allow the photo to show through undisturbed.

To make the center a pure white color, first use the Rectangular Marquee tool to select the center of the picture.

Feather the selection about 20 pixels for this example. [Select>Modify>Feather]. Use a larger feather for higher resolution pictures, and less feather for 72 dpi screen resolution pictures.

Fill with white. (Edit>Fill, and select White for contents and fill the feathered selection.)

Deselect.

Dress up any areas near the edge that shouldn't have tone using the Paintbrush tool with medium to low opacity settings.

Select All (Command-A)

Copy (Command-C)

Click on the 70s skating picture to make it the active picture now.

Paste the copied paper w/edges picture into the skating picture (Command-V is the shortcut). This makes a new layer with the torn paper in it.

Change the Opacity of the torn paper layer to less than 100% so you can see the photo beneath.

Edit>Transform>Scale to adjust the size of the torn paper to cover the part of the picture you want to keep.

Adjust Opacity back to 100% for the torn paper layer.

Click on the Channels tab to show the picture's channels.

Drag the RGB channel onto the make selection from channel icon (dashed circle).

Now click the Save Selection as Channel icon (gray box w/ circle inside) to create an Alpha channel.




 

Deselect.

Click on the RGB channel to make sure it's active.

Click on the Layers tab to return to the layer view.

Hide the torn paper layer by click on the eye icon next to the layer in the layers palette.

Create another new layer by clicking the Create New Layer icon (upturned page icon) in the layers palette.

Fill it with white (Edit> Fill, choose White as contents.) You should see a new layer completely filled with white.

Return to the Channels Palette by clicking on the Channels tab.

Drag the newly created channel (Alpha 1) to the Load Channel as Selection button in the Channels palette (dashed circle icon). A marching ant marquee should appear in the shape of the torn paper shape.

Return to the Layers palette by clicking on the Layers tab.

On the white-filled layer, add a new Layer Mask using the selection. (Layer> Add Layer Mask > Hide Selection. Note: If Hide Selection doesn't work, then Undo, and try using Reveal Selection instead. It all depends on the mask preferences settings within your copy of Photoshop.)



Crop to suite.

TIP: Other rough edged elements may be used also. Examples may include a roughly brushed paint edge, a perforated metal edge, aluminum foil scanned and treated with a strong levels adjustment, and scanned Polaroid print edges. Use your imagination!

Note: If the textured shape is black on white, you can quickly reverse the tones by using Image > Adjustments > Invert.

GIF animation using Photoshop
Animated GIF files are useful for web publishing purposes. Click here for some sample GIF animations.

They must be kept small however, or they will not work properly. For example, do not try to animate a full-screen image -- it may exceed the capability of the program or the computer hardware.

To create an animation, make a file and add additional layers representing each step in your animation. Each layer up in the stack will be the next frame in the animation - think of going from bottom to top in the stack for the order of the animation sequence.

TIP: You can temporarily adjust each layer's Opacity setting (Layers palette, upper right) to see the layer underneath made previously. This will help you align the individual frames properly. Don't forget to reset Opacity back to 100% after doing what you need to.

Save the layered file as a PSD when you have completed making the animation layers.

Choose Window>Timeline to show the Timeline Palette.

By default, the Timeline palette may show Create Video Timeline, but to use layers as frames, click the down arrow to select the Create Frame Animation button located near the center of the Timeline palette. When Create Frame Animation shows as the button (as shown below), then click it to create the animation from your layered PSD file.

By default, only the top layer will be visible in this palette.

NOTE: If for some reason your Timeline palette shows the video timeline mode (colored bars running across the palette) when you are trying to do a frame animation, click the icon at the lower left of the palette to switch to Frame Animation. See below:

The layers stack in the original Photoshop file can be made into animation frames. To do this, click the upper right dialog button shown circled below in the Timeline Palette, and choose Make Frames from Layers. (Note: You may have to scroll to find Make Frames from Layers on small screen computers.)

After the above steps, your Animation Palette should look something like this...

The Animation window will be updated automatically with frames showing each step of the animation. If you want the animation to run as fast as it can on each individual machine, make sure each frame has 0 sec. frame time delay. You can change the time each frame displays by clicking on the delay time underneath each frame.

If you wish to set the frame delay to another amount for all frames, choose Select All Frames (upper right button in the palette), and then set the time delay of one frame to the desired amount. All other frames should be updated with the new amount. Generally a 0.1 second delay works fine with most animations.

The animation can be previewed by pressing the Play Animation button at the bottom of the Animation window.

Once it looks OK, save the file by choosing File> Export>Save For Web & Devices (Legacy), and check the looping option you desire (Forever,  Once, or Custom). Click the Save button at the top right of the box. In the next dialog box, choose the desired location for the saved file, and choose Images Only in the Format list.

For an animated GIF file, the filename should end in .gif and that should be automatically appended by Photoshop if you choose Images Only in the Save dialog box. Check to make sure your file is a GIF file. If not, you made a mistake.

To test any GIF animation file, open a browser window (Safari, Internet Explorer, etc.), and drag the saved file's icon into the browser's window. The browser will play the animation as if it were being viewed online. This is a great way to see if the intended animation plays well, or if the file needs adjustments.

Animations created in Photoshop can also be exported to other animation formats. (File>Export>Render Video) You can choose from a variety of animated formats including QuickTime Movie, AVI, MPEG-4, Flash Video (FLV) and other formats in the drop-down list. Some of these choices provide for millions of colors instead of the GIF file's 256 color limit. Exports can be edited and combined with sound in the inexpensive ($29.99) QuickTime Pro authoring program available from Apple for both Macs and PCs. Be aware that video file exports will demand much more space and produce much larger files than a simple animated GIF.

A sample animation that I created can be found at https://www.afterness.com/digital/images/bill_aim.gif

Here's another animation... https://www.afterness.com/smiley-dad.gif

TIP: Sometimes where you are working with a large stack of layers in the Layers palette, you can quickly hide or reveal the upper layers by clicking and dragging down the visibility icons (eyes). Click-dragging quickly toggles all the layers you roll over to either on or off.

Cinemagraphs
Cinemagraphs are still photos with a part that moves. The best ones incorporate a moving element with other elements that should move, but do not.  It's an unusual, eye-catching juxtaposition between still and moving parts. The worst cinemagraphs look just like a looping video clip, so pay attention to the unexpected stillness found in some parts compared to the moving parts.

It is reminiscent of the hallway pictures in a Harry Potter movie. I have examples on the Other Digital News and Information page. Basically they are animated GIF files too. Watch the color palette because a GIF file is limited to only 256 colors. Many makers of cinemagraphs desaturate the picture either in some places, or overall, to reduce the need for color spots in the GIF file palette.

In my Other Digital Imaging News and Information page, I have placed links to tutorials and to examples of cinemegraphs.

Editing Video in Extended version of Photoshop
This info is in Meeting 27. If you want to read ahead to learn the very basics of editing video in Photoshop, click the link to go to the meeting notes.

The same Animation palette shown above will be used, but the Timeline mode of the palette will be used instead of the Frame mode when working with video.
 

Creating Java Script Rollovers in ImageReady
OBSOLETE information. ImageReady is no longer a separate program in the Adobe bundle. It's still worth a look at Rollovers though.
A rollover is an image that changes state when a mouse moves over it on a web page. One example might be some words that change color to indicate that they are a link to another page. It adds some interactive pizzazz to a web page. Roll your mouse over the text below to see how a rollover works:

Here's another rollover saved as a pair of jpg files. Again, roll your mouse over the picture to toggle between the two pictures to clearly show "before and after" retouching in the picture :

Copyright 2006 William R Schneider All Rights Reserved

I began by creating a two-layer illustration in Photoshop. One layer is normally displayed, and the other one is displayed only when a mouse moves over the image. Rearrange layers to place the normal image on the top, and the mouseover layer on the bottom layer. An example of such an image, mouse_me.psd can be found in Exercises 7

I created some demo Java Rollovers using manual coding and they can be viewed at:

https://www.afterness.com/demojavafolder

NOTE - because these are hand-coded in the late 90s using Java script, it may not display properly in current browsers.

There is no assigned topic for this assignment. You can elect to do editorial illustrations, commercial promotions, or anything else that may boost your job-getting portfolio. It might be best to target the kind of illustration you may be doing later in your job (i.e. photography majors do something photographic in nature, etc.)

Avoid "refrigerator art" showing personal snapshots that have limited meaning outside of your personal life.

Notes: All digitized content (scans, digital photos, etc.) used in the making of your creative assignment must be submitted in a separate "assets" folder named "lastname_assets" (substituting your own name, of course.)  If you create the illustration completely in software, include some partially-completed steps in the assets folder. This folder is due on the day that the assignment is due. Please don't place your completed assignment into the assets folder though.

Some tips for a better grade...

Note that there is no critique sheet due for this assignment.