Learning Basic Photoshop FIRST TIME Chapter 9 part 3

Chapter 9: Editing Images • Using the Painting and Drawing Tools • Brushes • Gradient Editor • Typographic Terminology • Using Filters • Adjusting Images • Using Guides and the Grid for Alignment • Exercises • Review Questions

Using FiltersFilters  are a set of pre-set special effects that you apply to entire images, individual Layers , or selections.  Images must be in RGB mode to access Photoshop ’s full range of Filters. Applying Filters To apply a Filter, isolate the area of the image you wish to apply it too.  For instance, if you want to apply a Filter, such as Blur , to an entire Layer  you would select theLayer in the Layers  Palette .  If you wanted to apply theBlur Filter to a part of the image data on a Layer, you would make a selection on that Layer and apply the Filter. Open the flowers image from the chapter006 folder.  Select Filter/Artistic/Underpainting.  The Filter dialog box appears with the title of the currently selected Filter.  A set of Options  accompanies most Filters  (not all Filtershave Options).  Options change depending on the nature of the Filter. In this case, we have Brush Size , Texture  Coverage, Texture, Scaling, Relief, Light Direction, and Invert . Filters  usually have a preview window in the dialog box so you can see the effects of the Filter on your image and the effects that changing the Options  cause in real-time. {Click} OK.  Photoshop  applies the Filter to your image and the History Palette  creates a state.  You’ve effectively changed a photograph into a very stylized painting.

Fine-Tuning Filters with FadeOnce you’ve applied a Filter you can fine-tune it by selecting Edit/Fade Filter Name, where Filter Name is the name of the last Filter you applied.  In this case we select Fade Underpainting. Fade dialog box Fade controls include Opacity , Mode  (Blend Mode ), andPreview.  Input an Opacity value or use the slider to reduce the strength of the Filter’s effect on your image.  Experiment with different Blend Modes  to affect the manner in which the Filter is applied to the image.  CheckPreview to display your changes in real-time.  {Click} OK to make the changes. By experimenting with other Filters  you can learn about effects you like and various options that many Filtershave.  As we progress through creating buttons, navigation bars, and GIF animations, we’ll put someFilters to use.  Recall that Layers  have Layer  Styles , essentially specialized Filters linked to Layers.  We’ll be using these effects as well.  Some of the Layer Styles can be applied to editable Type Layers, but to applyFilters to Type Layers you’ll have to {Right-Click} the “T” icon in the Type Layer and select Rasterize Layer.  You won’t be able to edit your type after rendering it.

Adjusting Images In addition to modifying or adjusting images with Selections , Filters , Layers , using Blend Mode s , and using Painting and Drawing  Tools, Photoshop  also allows you to adjust a wide variety of color properties, such as tone, saturation, balance, and contrast.  Controls for adjusting these image qualities are located under Image/Adjust.  Adjustment controls include Levels , Auto-Levels, Auto-Contrast , Curves , Color Balance , Brightness /Contrast, Hue /Saturation, Desaturate , Replace Color, Selective Color, Channel Mixer , Invert , Equalize, Threshold, Posterize, and Variations.  Before using these controls however, you should examine the image’s Histogram. HistogramThe Histogram represents the pixels of an image in graph form.  It charts how many pixels an image contains and their distribution in terms of dark tones to bright tones.  Dark tones are charted to the left and bright to the right.  Dark tone areas are referred to as Shadows.  The area in between dark and bright tones is referred to as Midtones.  Bright tone areas are referred to as Highlights.  View theHistogram by selecting Image/Histogram. Histogram for “priests.psd” By examining the Histogram of an image, you can instantly see the Tonal balance of the image and use that information as a basis for your adjustments. ChannelSelect from Luminosity, Red, Green, or Blue when working with RGB images.  Luminosity is a composite of the Red, Green, and Blue Channels. Mean, Std Dev, Median, Pixels The values listed in the left hand column of the Histogramdisplay the average brightness value of the image (Mean), the range of variance from the mean (Std Dev), the middle brightness value (Median), and the number of pixels used to calculate these numbers.  If you’re viewing a Histogram for the entire image, all the pixels are used.  If you’re viewing a Histogram for a selection, the numbers of pixels within the selection are used. Level, Count, Percentile, Cache  Level{Click} and drag to highlight particular areas of theHistogram to get values for Level (the selected area’s brightness level), Count (the number of pixels in the selected area), and Percentile (the percentage of pixels within the selected tonal range.)  Cache  Level is set in File/Preferences /Memory & Image Cache.  If Use Cache for Histograms  is checked, the Histogram is based on theCache version of the image.  For absolute accuracy uncheck Use Cache for Histograms to force Photoshop  to use the real image data.  This is less of a concern for web development because you’re working on a low resolution (in terms of density as in 72 ppi) image, which matches the resolution of the Cache version.  However, if you are working on higher density images the accuracy of theHistogram is affected. Using Levels Open the buddha.psd image from the chapter006 folder and examine it visually.  You’ll notice that the image lacks contrast.  The whites aren’t particularly white and the blacks aren’t particularly black.  As a result, the statue doesn’t stand out from the background in terms of color brilliance, only in terms of shape and different, but subdued colors.  We can use Levels  to enhance the look of the statue and make it really stand out.  Select Image/Adjust/Levels. Levels  dialog box The Levels  dialog box contains a Histogram and controls for Channel, Input Levels, Input Level Sliders, Output Levels, Output Level Sliders, Shadows, Midtones, andHighlights Eyedroppers, a Preview option, and options toLoad and Save Levels as well as designate Auto Levels . ChannelSelect from the composite RGB to modify all channels simultaneously or select Red, Green, or Blue and modify channels on an individual basis. Input Levels /Input Levels SlidersInput Levels  display the range from the Black Point(Shadows) to the White Point, and the Mid Point in between.  By default, the range is 256 possible values, from 0 to 255 with the Mid Point being precisely in between.  By adjusting these Levels, you can increase or decrease each of the three primary tonal properties,Shadows, Midtones, and Highlights.  The Histogram for the statue image reveals that very few pixels are actually pure white.  {Click} and drag the White Point Slider to the left until you reach a value of 220.  The white areas at the base of the statue become more brilliant.  The image is no longer muddy and the statue stands out from the background.  We could have done the same thing for theShadows if the image had a deficiency in pure black pixels. Reduce the tonal range (at default 0 to 255) by adjusting the Output Levels  either by input or using the sliders. Levels  Eyedropper ToolsUse the Shadows, Midtones, and Highlights Eyedroppersto designate pure black, pure medium, and pure white manually by selecting the appropriate Eyedropper and{Clicking} on a point within the image.  If you select theMidtones Eyedropper and {Click} on the gray base of the lamp in the bottom left of the photograph the Histogramchanges to reflect your selection and the color of the image changes as well.  In this case, the Blue Channelbecomes dominant in the composite.  The Eyedroppers are generally more useful when changing the tone of grayscale images. PreviewCheck Preview to see the affect of your modifications in real-time. Auto Levels Selecting Image/Adjust/Auto Levels  causes Photoshop  to automatically adjust the tones in the image. Auto Contrast Select Auto Contrast  to automatically increase the contrast of colors in an image.  Colors increase in saturation and edges sharpen. Curves Use Curves  for greater control when adjusting image tone.  Curves are very similar to Levels  in that you adjust the Shadows (Black Point), Midtones (Medium Point), and Highlights (White Point), except you do so with a curve to which you can add points too for increased accuracy.  You manipulate the Curve by {Clicking} and dragging on a point.  You add points to the Curve by{Clicking} and dragging on the Curve where there isn’t a point or by {Single Clicking} on the Curve where there isn’t a point.  Controls for Curves include Channel, Input Values Bar and Field, Output Values Bar and Field, Edit Curve Button , Custom Curve Button, Black Point, Mid Point, and White Point Eyedroppers, Auto, Smooth, options to Save and Load Curve settings, the CurveWindow and the Curve itself.  The Controls common to theLevels adjustment work precisely the same in Curves. Curves  dialog box

Adjusting Tones with Curves Open the buddha image again and select Image/Adjust/Curves .  The Curve is in a straight line, at 45 degrees, indicating it has not yet been manipulated.  The point at the bottom left of the Curve represents the current Black Point while the point at the top right represents the White Point.  There is no point in the middle of the Curve by default because you can add points all along the Curve and {Click} and drag them for very accurate and precise control.  However, by{Clicking} the center of the Curve you can add a Midtone Point.

{Click} the center of the Curve to add a Midtone Point.  Next {Click}, hold, and drag the Midtone Point up and down the Curve, trying to keep the Curve as straight as possible.  By doing this you are mirroring Levels  controls where you {Click} and drag the Point sliders back and forth.  The distance between the sliders or Points changes the tone of the image.  With Curves , you have increased control because you can add multiple points between theBlack, Mid, and White Points.  {Click} twice at different locations on the Curve between the Midtone Point and theBlack Point to add two more points.  Now {Click} and drag these points back and forth and watch what happens to the buddha image.  By {Clicking} and dragging the points to add variance to the Curve more drastic tonal changes occur.  It takes practice to get used to usingCurves to adjust tone but as you can see it is a much more powerful option than using Levels. Points Added to the Curve in the Curves  dialog box Custom Curve Button In addition to using the default Curve, Photoshop  permits you to draw your own Curve in the Curve Window.  Simply {Click} the Custom Curve Button  and {Click} and drag inside the Curve Window to create your Curve.  Adjust the Curve as you would normally by {Clicking} EditCurve Button.

Color Balance Adjust the Color Balance  of an image, Layer , or Selection with the Color Balance controls.  Controls include Color Balancefields and sliders for Cyan to Red, Magenta to Green, andYellow to Blue, Tone Balance (Shadows, Midtones, and Highlights), Preserve Luminosity, and Preview.  Open the toysfile from the chapter006 folder and convert it to RGB Mode  to explore Color Balance. Color Balance  dialog box

Color Balance  Fields and SlidersUse the Cyan to Red, Magenta to Green, and Yellow to Blue fields and sliders to adjust color values.  As you experiment with them, notice how the color changes in the image.  To isolate particular tones within the image use the Tone Balance controls. Tone BalanceCheck Shadows, Midtones, or Highlights to isolate Color Balance  changes you to those particular tones of the image. Preserve LuminosityCheck Preserve Luminosity so that Color Balance  changes affect only the color of the pixels and not the brightness.

Brightness /ContrastUse the Brightness  and Contrast  sliders to increase or decrease the brightness and contrast of an image, Layer , or selection.  Try increasing Contrast to maximum and see what happens to toys. Brightness /Contrast  dialog box

Hue /SaturationUse the Hue /Saturation Controls to increase and decrease the Hue, Saturation, and Lightness of an image, Layer , or selection.  From Edit select Master to adjust all the colors or select from a list of color ranges that include Reds, Yellows, Greens, Cyans, Blues, Magentas.  When you select a color range, you can adjust the range using the sliders in between the color bars at the bottom of theHue/Saturation dialog box and by using the Eyedroppertools.  Experiment with toys.  {Clicking} Colorize causes the image, Layer, or selection to take on a duotone effect, where the image is tinted by one dominant color. Hue & Saturation dialog box Desaturate Selecting Desaturate  removes the color from an image.  The image will appear to be in Grayscale  Mode  but remains in RGB.

Replace ColorSelect Replace Color to change the Hue , Saturation, andLightness of a particular color or particular range of colors.  The Replace Color controls are similar to selecting by Color Range , including Fuzziness, Eyedroppers to select one color, select additional colors, or deselect colors, a Preview checkbox, and the ability to choose either Selection or Image in the Image Box.  In addition, the Replace Color controls include Hue, Saturation, andBrightness  sliders and fields, and the Sample Box that indicates the currently selected color or base color for the currently selected range. Replace Color dialog box

Make sure you have toys open.  Select Image/Adjust/Replace Color.  Make sure Selection is selected for the Image Box and use the Eyedropper to{Click} the blue gown on one of the toys.  AdjustFuzziness to 200 so that most of the content, other than the gowns, in the image are black.  You’ll notice that the blue area in the background of the photograph remains in the Image Box because the blue matches that of the gowns.  Now experiment with the Hue , Saturation, andLightness controls to modify the color of the toys

Selective ColorUse Selective Color to adjust CMYK  values for images destined for print.  Because you don’t use CMYK mode for the Internet you won’t have much use for this control.  However, feel free to experiment with it.  Like other controls, you can isolate a color range and use sliders to modify them.

Channel Mixer Use the Channel Mixer  to adjust the balance of each individual color channel in the image.  Select the desiredColor Channel with the Output Channel drop-down list.  You’ll notice that sliders for the Source Channels default to a value of zero, except for the currently selected Color Channel, which defaults to a value of 100%.  Use the sliders to increase and decrease the percentage values of each Channel to change the tone of the image.  Use theConstant slider to add or subtract black or white to the mix. Channel Mixer  dialog box

Gradient MapUse the Gradient Map dialog box to map either a custom or preset gradient to the grayscale values of an image.   The effect is somewhat like that of a Duotone  used in print but without the need of converting the image over to a Duotone. The default gradient consists of the currentForeground and Background Color , with the foreground mapped to black and the background mapped to white. {Click} on the black triangle to the right of the Gradient Used for Grayscale  Mapping preview to select alternate gradients or {Double Click} on the gradient preview itself to edit and create custom gradients.   Editing Gradients  used as a Gradient Map is no different than editing those used as a fill so navigating your way through the options should pose no problem.  Check the Dither checkbox if you’re going to publish your graphic as an indexed image and need to reduce the banding of the gradient in your.   Check the Reverse checkbox to flip the colors from right to left. Gradient Map dialog box Three Color Gradient mapped to an image

InvertUse Invert  to reverse the colors of the current image,Layer , or selection.  In effect, you make a photographic negative of your image. EqualizeUse Equalize to make Photoshop  designate the lightest pixel and the darkest value as absolute black and white and then adjust the pixels between evenly or equally. ThresholdUse Threshold on the current image, Layer , or selection to convert all pixels to either black or white.  Adjust theThreshold Level by enter a new value or using the slider.  Increasing the value adds more black and decreasing the value adds more white.  The range is from 0 to 255. PosterizeUse Posterize on the current image, Layer , or selection to reduce the amount of colors, and therefore tone.  For instance, if you enter a value of 5, the image is reduced to five of the most dominant colors.

VariationsUse Variations to view multiple results of tonal changes for the current image, Layer , or selection.  The Variations dialog box consists of 12Thumbnails  divided into three areas.  At the top is the image in its Original form beside which is the image as it appears with modifications.  To isolate tones and saturation control check Shadows,Midtones, Highlights, or Saturation.  Check Show Clipping when adjustingSaturation to ensure you do not over saturate a particular color.  Use theFine and Coarse slider to adjust the amount of each change. Affect changes by {Clicking} on the Thumbnails  in the Color orBrightness  areas.  The Color Area consists of Thumbnails to add moreGreen, Yellow, Cyan, Red, Blue, and Magenta.  Continue {Clicking} on the Thumbnails to add color.  Lighten or darken the image by {Clicking}on the Lighter or Darker Thumbnails in the Brightness area.  {Click} OK to affect changes.

Adjustment and Fill Layers Photoshop  features a powerful Adjustment Layer  you can use within the Layers  Palette  to affect tonal changes to all the Layers that lie beneath the Adjustment Layer.  To create an Adjustment Layer select the Layer that you want to affect and {Click} on the New Fill  or Adjustment Layerbutton at the bottom of the Layers Palette.  A drop down menu will appear that allows you to choose a LayerType.   For Fills select either Solid, Patter or Gradient and for Adjustments select either Levels , Curves , Brightness/Contrast , Color Balance , Hue /Saturation, Selective Color, Channel Mixer , Gradient Map, Invert , Threshold, or Posterize. Adjustment Layer  Options

An Adjustment Layer  is created with the name of your selected Adjustment and the applicable dialog box appears.  Make changes as you would normally.  To modify your adjustments {Double-Click} on theAdjustment Layer. Adjustment Layer Added

Using Guides  and the Grid  for AlignmentOften you will want elements within your image positioned relative to each other.  To align elements, such as a series of buttons or type you have two options, usingGuides  or using the Grid . Using GuidesTo create Guides  you must make the Rulers  visible.  Select View/Show Rulers.  The units of the Rulers depend on the setting you selected in File/Preferences /Units & Rulers.  Because you’re developing for the Internet, it’s a good idea to select Pixels  as the basic unit.  Make a guide by passing the pointer over either the horizontal or vertical Ruler and {Click}, hold, and drag the Guide  over the image.  {Release} to drop the Guide at the desired point.  By default, the Guide is blue in color.  Change the color by selecting File/Preferences/Guides & Grid .”  Make sure Snap  to Guides is enabled by selecting View/Snap To/Guides. Open toys from the chapter006 folder and create aVertical Guide  at 50 pixels from the left of the image.  Create two Type Layers , one with the text “Japanese Souvenirs” and one with the text “Children’s Toys”  Select the “Japanese Souvenirs” Type Layer  and drag it toward the Guide.  Notice how the edge the letter “J” snaps against the Guide.  Guides  ignore the transparent areas of a Layer and use image data to snap too.  Select the “Children’s Toys” Type Layer and drag it toward theGuide, just below the “Japanese Souvenirs” type.  Now both Type Layers are perfectly aligned. To discard a Guide  {Click} and drag the Guide off the image. To move a Guide hold the [CTRL] key over theGuide and drag whenever you are using a tool other than the Move Tool .  Holding [CTRL] and [ALT] simultaneously switches the orientation of the Guide from vertical to horizontal or horizontal to vertical.  You can use multipleGuides .  To discard all Guides select View/Clear Guides.

Using the Grid The Grid  works in a similar fashion to Guides  in that the content of your Layers  will snap to the lines of the Grid.  Select View/Show/Grid to display the Grid.  Make sure that Snap  to Grid is also enabled under View/Snap To/Grid.”  A light gray Grid covers the image.  To adjust the Grid setting select File/Preferences /Guides & Grid. By now it should be evident to you that Photoshop  is a very powerful and complex program that is easy to use.  Because there are numerous image editing options and many different ways to achieve imaging goals first time users might find the program overwhelming.  We’ve reviewed the fundamental elements you’ll need to put into practice when creating images for the Internet.  We’re going to use most, if not all, of these fundamentals in the chapters ahead to create actual images for the web, including static images, buttons, navigation bars, banners, and animated GIFs.

Exercises Open the gate image from the chapter006 folder. Use the Selection Tool or Selection Tools of your choice to select the red fence.  (Hint:  Use Select Color Range  and adjust the Fuzziness control.  Use Quick Mask  Mode  and the Airbrush Tool  to erase any Selections  outside of the gate.)    In Quick Mask  Mode  the Red Fence is clearly selected.   The Quick Mask  has been made blue in the Options  dialog box Change the color of the Fence using the Hue /Saturation control.  If you drag the Hue slider to 34 and the Saturation slider to -11 the fence turns yellow. The Hue /Saturation dialog box adjusted for the image.   The Gate turned Yellow

Review Questions What is the Brushes Palette used for? As you {Click} and hold the mouse button when using the Airbrush Tool  what happens? What does the Rubber Stamp Tool do? How do you create Custom Gradients ? What are Filters ? What is the Histogram? In Photoshop , tones are divided into three categories, they are? What advantage do Curves  have over Levels  when editing image tone? What does the Threshold command do?

Summary

As a result of this chapter, you should be able to Use all of Photoshop ’s Painting and Drawing  Tools Create Type. Understand and Use Filters . Adjust and Manipulate Color. Use Guides  and the Grid