J321C Fundamental of Multimedia Journalism Tutorial: Photoshop (Photo Editing)

1. Creating a new image in Photoshop

2. Opening an existing image in Photoshop

3. Undo and History

4. The Toolbar

Move Tool Marquee Tool Lasso Tool Zoom in Zoom out Crop Tool

5. Rotate and resize images6. Layers

7. Photo retouching basics

8. Sharpening an image

9. Saving an image

Prepared by: Sung Woo Yoo

1

1. CREATING A NEW IMAGE IN PHOTOSHOP

Click File in the menu bar on top of the Photoshop window and then click New

The following window then appears. Enter details such as, the image size (which is normally in pixels while dealing with the web). You can also set other image details such as, resolution (which is normally 72 for the web), color mode and background contents, along with several other presets.

The above window is of 800*600 pixels and has a resolution of 72 pixels/inch. This image is in 8 bit, RGB color mode (i.e. in this image, red, blue and green colors are mixed in various ways to form several other colors). Also, the background of this image will be white.

Click OK and create a new image, to get a white canvas of 800*600 pixels. This is the newly created image.

2

2. OPENING AN EXISTING IMAGE In order to open an image in Photoshop, click on File in the top menu bar and select the second option there - Open. Or Ctr/Cmd+O

You can variety of file types in Photoshop, and these are represented in the drop down menu in the Open window. But, for most parts you will be concerned with '.jpg' '.gif' '.png' and '.psd' files types - most images used for the web will be in jpg, gif, or png formats. And it is important to remember that '.psd' is the default Photoshop format.

Exercise. 1. Open 6 images, Mexico, Crop straigthen, Crop shaun, Crop natalie, surfer, snow2. Navigate to different photos by clicking their names on top.3. Now navigate using Cmd+tab4. Open two of them, all four of them 5. Return to where we were by Window> arrange >consolidate to tabs

3. UNDO AND HISTORY

Photoshop allows you to undo any changes you make to your image. The undo option can be accessed from the Edit menu by clicking on Undo ___.

The short cut keys for undoing a change are ‘cmd’ + ‘z’. ‘cmd’ + ‘opt’ + ‘z’ allows you to undo multiple changes.

Photoshop offers another option to access the history of changes made while editing an image. This option is called the history option. This can be accessed from the Window menu.

3

Clicking on the History option will pop open the following window that allows you to backtrack several steps in your image editing.

4. THE TOOLBAR

4

http://www.lynda.com/Photoshop-tutoriacls/Introducing-Tools-panel/124075/136787-4.html

The following toolbar is located on the left-hand side of the Photoshop window.

Here are some important tools on this toolbar -

Move Tool (V)This is the most basic tool on the toolbar (it is highlighted in the above toolbar). It is used to move various elements in a Photoshop image (or canvas). It is selected by clicking on it. After that, you need to click and drag the element in your image that you need to move. Marquee Tool (M) :

5

This tool (pictured below as selected) is used to select a portion of your image. When you click at the bottom right side of this icon, four options appear. These indicate four different ways in which you can make your selection.

The Rectangular Marquee Tool makes a rectangular selection across a desired area.

Similarly, the Elliptical Marquee Tool enables you to select an elliptical (or oval) area. Whereas, the Single Row and Column Marquee Tools are used to select a row or a column that is one pixel wide or long.

To use any of these tools you need to select them first, and then you need to CLICK and DRAG them across the desired area on your image.

Another important thing to remember is that whenever you want to make a perfect square selection, you should select the Rectangular Marquee Tool and then hold down the Shift key on your keyboard and simultaneously click and drag across the desired area on your image. The same logic applies while making a circular selection. All you have to do is select the Elliptical Marquee Tool and hold the Shift key of your keyboard and simultaneously click and drag. Try it!

Here's how the Marquee Tool's function can combine with the function of the Move Tool we reviewed a little while earlier: In order to place your selection (or marquee) at a desired spot on your image, you simply need to click on the Move Tool to select it and then click and drag the marquee to place it at a desired spot.

This is illustrated with the Rectangular Marquee Tool Below -

In the first image, a portion of the image is selected using the Rectangular Marquee Tool. The second image illustrates how the marquee (or selection) is moved to the right hand corner of the image using the Move Tool.

6

Exercise) use Crop shaun photo. Draw a perfect circle. Move it around. Go to where

7

we were. Use history panel.

Lasso ToolThe Lasso Tool is the next tool on the Photoshop toolbar. It is another way to make specific selections in an image. There are three types of Lasso Tools - the regular Lasso Tool, the Polygonal Lasso Tool and the Magnetic Lasso Tool. Either of these tools can be activated by simply clicking on the small arrow at the right hand bottom of this tool and selecting the appropriate tool form the drop down menu (similar to the one in the Marquee Tool).

8

Zoom in Zoom out + Hand-Zoom and Hand tools are place together because they are used together. -Hit Zoom tool or Z, it will zoom in, and then you use hand tool to move around.-Take a look at navigator window at the upper right corner (or Window + navigator) Red rectangle will show you your spot. -Alt or Opt + Zoom tool will zoom out –Double click zoom is 100% size (or Ctr/Cmd 1). Double click hand is original size (Ctr/Cmd).

Crop ToolThis is one of the most important on the toolbar. It is used to edit out excessive areas from an image. We will do some exercises here. An example of how this tool works -

Open one of crop files from class folder.

Then select the Crop Tool and click and drag it over the area of the image that you want.

9

Now, that you have selected the part of the image that you want to keep, simply hit Enter on your keyboard. This will crop your image and it’ll look something like this –

The above tools are the most basic tools required to edit images in Photoshop.

Crop demonstration-Select crop tool or click C

10

-Make sure Delete Cropped Pixels is unchecked-Adjust Ratio-Click and drag-Three ways to finalize crop

Click the Check mark at the topDouble click the imageHit Enter

-Reactivate Turn the cursor to crop and click the photoOr use history panel

-Changer ratio and repeat

More exercise: Use crop shaun Repeat the process

Straighten the horizon: Use photo crop straightenMethod 1: Select Crop tool, rotate.Method 2:

-Click Straighten icon at the top-Drag a horizontal line-Adjust further by rotating with the crop cursor

Use Marquees, image rotation, image size option for cropping: use photo crop diana-Select marquis tool -Select crop-Enter or double click-Go to image tap-Use image rotation-Use image adjustment> Brightness/contrast-Use exposure

C. Circle or other shapes with layers. -Open photo-layer unlock-Select path at the top-Select shape tool (circle of polygon/ custom shape)-Shift and drag-Right click on the circle line-Make selection > OK(0 pixels)-Select> inverse-Edit> clear -Crop image-Save image. (PNG with transparency)-Add layer-Edit> fill> choose color

11

https://www.youtube.com/watch?v=v4Jq2nIX9eE

6. ROTATE AND RESIZE IMAGES

Your image (canvas) can be rotated by accessing the Image Rotation Canvas option in the Image menu.

This enables you to rotate the canvas in any direction, by proving a host of options, such as Flip Canvas Horizontal and Flip Canvas Vertical. It also allows for the canvas to be rotated in an arbitrary angle by choosing the Arbitrary option.

Images can be resized in Photoshop using the Image Size option under the Image menu.

12

When you click on Image Size, the following window will appear. This window will allow you to adjust the width and height of the image. It allows you to reduce or increase the overall size of your image (but don’t try to enlarge any image – it will result in poor quality). Always keep the Constrain Proportions option active.

13

7. PHOTO RETOUCHING BASICSThe most basic tools for retouching are brightness/contrast, color balance

Using layersIt is one of the most powerful tool. You can use it to retouch, shapes and special effects.

Show example photos of multiple layers with graphic or new color tone.**Always create a new layer when retouching photo.

1) How to make add effects using layers. Open layer panelCreate a new layer: Click new layer icon.Duplicate layer: Drag the layer to new later icon.Name the new layer by double clicking.

Try black and whiteDuplicate a layer, name it.

Go to layer> layer adjustment> black and whiteTry two versions by hiding the layer.

Try special effect. Duplicate a layer, name it. Go to Filter tab> oil paintingTry two versions by hiding the layer.

*Try this with exercise photo crop shaun. *Try color adjustment using exercise photo mexico.

-Click background, drag to new layer icon. -Rename the new layer. -Click image in the top menu. Then go to Adjustments > brightness/contrast. -Try auto and compare. You can compare by unchecking preview. -Then adjust the photo manually. This photo needs more contrast.

In the same photo, try to strengthen the color of the jar. -Click image in the top menu. Then go to Adjustments color balance.-Adjust red.

* Same exercise with Photo crop straighten -create a new layer-Use image> adjustment> brightness/control.-Try to make the sky better.-Next, Use image> color balance -Let’s adjust blue-Next adjust cyan (red)-Use preview check to see if it is improved-Use opacity for further adjustments

14

* Shadow/ Highlights. Brighten dark area. This adjustment focuses on either dark or bright area. -Use surfer photo -create a new layer-Image> adjustment> shadow/highlight.-Try to make the wave better.

1) Fix overexposure-Use snow photo-create a new layer-Use image> adjustment> shadow/highlight.-Try to make the snow better adjusting shadow.-Go to option.-Use tone and radius for additional correction -as the last option use quick select. -select snow.-use shadow/ highlight

2) Using level and curves: adjusting simultaneously.

Open an image in Photoshop. Click Image in the top menu. Then go to Adjustments and then to Levels.

You will get the following window in which you can move the gray slidebar to get the desired color effect. This can cure typical issues such as, brightness and contrast.

15

Another important option in the Adjustments menu is Curves. Clicking on this option opens the following window.

You can adjust the curve in order to adjust the brightness and contrast of the image. This curve can be moved by clicking and dragging to achieve the desired effect.

16

If you drag up it will be brighter. If you drag down darker. You can also choose multiple points of adjustment. S curb adjustment is making use of multiple points to correct images.

Also, under the Adjustments menu, there is the Exposure option, which is often used for image correction. It helps adjust the exposure levels of your image.

The following window opens when you click on Exposure.

You can adjust the exposure, offset and gamma levels to the appropriate ones by simply dragging the corresponding gray arrows, or you can simply enter the desired values in the adjacent boxes.

17

You can also adjust the color balance of your image by accessing the Color Balance option in under the Adjustments menu.

The following window opens when you click on Color Balance.

18

Here you can adjust the levels of Red, Blue and Green (which are the component colors of your image). The following image illustrates how a change in one of these component colors affects the image.

This image illustrates how increasing the level of Green gives a greenish tint to the image. You can apply such tints of various colors by adjusting the three component in different combinations.

Similarly, there are other options under the Adjustments menu that help in retouching an image. These options help in retouching an image and correcting any color defects it might have.

One important feature is shadow/highlight.You can adjust shadows to be brighter, or highlights to be darker

3) Retouching portrait

Please learn and practice Adobe tutorial if there is a need.

Retouch a portrait soften skin and sharpen eyes

https://helpx.adobe.com/photoshop/how-to/photoshop-cr-soften-skin.html

Fix blemishes

https://helpx.adobe.com/photoshop/how-to/fix-flaws-retouch-photos.html

19

7. SHARPENING AN IMAGE

Almost all website photos need sharpening. You can sharpen images in Photoshop using the Sharpen option under the Filter menu.

The Sharpen option allows you to four options – Sharpen, Sharpen Edges, Sharpen More, Smart Sharpen, and Unsharp Mask – to sharpen your image to your desired level.

Here we will mostly use Smart Sharpen option. Open the photo ‘boats’.First set a new layer. Then, Filter > Sharpen > Select smart sharpenA general (all-purpose) setting is as follows (it depends on each photo though):

Amount: Intensity of sharpening. 150-300% works bestRadius: Prevents halo effect. Usually less than 1. Not more than 2. Reduce noise: When photos are sharpened, unwanted noise increases.

Procedure to use Smart Sharpen are as follows. 1. Set Radius to 0.5-12. Increase Amount till image breaks. And then reduce it.3. Adjust Radius4. Reduce Noise5. Increase the size of photo and check different parts.

20

Try it with sunrise.

8. SAVING AN IMAGE

Photoshop allows you to save your images in a variety of file formats. But, the most basic file formats that are pertinent to the web are .jpg, .gif, and .png. You can save your file in either of these formats using the Save for Web & Devices option from the File > export menu.

When you click on Save for Web & Devices, the following window will pop open.

21

This window allows you to choose the format you want to save you image in, with a drop down menu on the right.

You can also choose the quality of the image by choosing the appropriate option from the following menu.

22

If you want to compare the image quality across different settings (formats, quality, and file size), choose the “2-up” or “4-up” tab on the upper left corner.

Finally, you can also adjust the image size by clicking on the Image Size tab on the right hand side of this pop up window. This enables you to adjust the size of the image, just like the Image Size option discussed earlier in this tutorial.

23

Once you are done with choosing the appropriate options, you can save your image by clicking on the Save button on the top right hand corner. This enables you to save your image in at a location of your choice (just like MS Word or Excel).

Keep in mind that NO IMAGES SHOULD BE LARGER THAN 100KB if served on the web.

24