Guide to Adobe Photoshop

Download 35.05 Kb.

Date	31.01.2017
Size	35.05 Kb.
	#13344
Type	Guide

A Guide to Adobe Photoshop:

A How-To for Curves, Web Buttons, and Glossy Figures

By:

Robert Bonfante

Kyle Gamble

Jonghyun(David) Na

Christina Oh

Preface………………………………………………………...……ii

Introduction………….……………………………………..…..…...1

Curves………………………………………………………………2

Glossy Figures………………………………………………..……..7

Web Buttons…………………….…………………………………11

Conclusion…………………………………………………...…….15

Works Cited………………………………………………………..16

Preface
Photoshop is one of the most important graphic editing software today. This tool mainly exists for creating digital picture, but it also uses for website designs, advertisements, and personal art works, etc. Adobe Photoshop CS4 is the recent version of software which is the eleventh edition. The original Photoshop was released in 1990 for Macintosh, and released in Microsoft Windows 3.1 version around 1995. Because of their success, Adobe Photoshop group merged with multiple softwares such as Dreamweaver, Flash, and Audition and able to monopoly graphic software market at this moment. The company “Creative Suite” rebranded its name to Adobe at 2005.
Introduction
Adobe Photoshop is the world’s leading image-editing program. It has so dominated the market that the term, Photoshop, has become synonymous with photo-editing. Photoshop has a wide array of applications, from correcting and editing digital images to preparing images for magazines to creating graphics for the Web. Photoshop can be found in photography studios, science and research labs, forensics labs, medical offices, Web designer studios and in classrooms and offices. It is a very versatile and powerful “killer app”.

First and foremost, Photoshop is designed to edit images. Through the years it has added a large number of features and applications. However, most of the workflow of Photoshop is a variation of taking the picture, editing the picture, and printing the picture.

This paper will show three functions that Photoshop can perform. First, it will show how to add a glossy effect to objects in an image. Second, it will show how to use Curves to color correct an image. Lastly, it will demonstrate how to create a professional looking button for a web page. Each procedure will be explained in step-by-step instructions with help from visual aids.

Creating a Good Tone Curve

Adobe Photoshop has a number of ways to correct color and obtain white balance. One of the most useful is the Curves feature. With Curves, you can adjust brightness, contrast and color balance, all in one tool (Smith 429). There are five steps involved in using Curves to create a good image. These steps are:

Setting up the correction
Finding the highlight and shadow
Setting the highlight and shadow
Adjusting the midtone
Finding a neutral

Setting up the Correction

Select the Eyedropper tool; on the Options bar, change the sample size to 3 By 3 Average in the Sample size dropdown list. This setting gives you more accurate readings.
If the Histogram palette isn’t visible, choose WindowHistogram.
If the Info palette isn’t visible, choose WindowInfo. The info palette will show you the color values.
Make sure that your color settings are correct. In Photoshop, it shows you the color mode at the top of the image. You want the setting to be RGB. If it isn’t choose ImageModeRGB.

Finding and Setting the Highlight and Shadow

Curves have a feature that makes it easy to find the lightest and darkest part of the image.

Choose WindowLayer (if the Layers palette isn’t open).
Click and hold on the Create New Fill or Adjustment Layer button at the bottom of the Layers palette and select Curves, as shown in Figure 1. The Curves palette, shown in Figure 2, appears. Notice the histogram in the background. The histogram is a helpful guide as you make corrections. Check the Preview check box to see your changes.

Figure 1.

Figure 2.

To help you see the highlights and shadows in the image, check the Show Clipping check box.
Grab the right modify curve slider (the white triangle on the bottom right corner of the Curve window), and slide it until you start to see white appear. When you click on the curve slider, the entire picture goes black. As you move the slider to the left, flecks of color will appear. When you start to see white dots, stop. It is worth noting that the white should appear at the point where the histogram slopes upward.
Grab the left modify curve slider and drag it until you see the darker part of the image appear. Clicking on the slider will make your picture white, and as you move the slider right, the shadows first appear, and then darken. Stop when you see black flecks and then uncheck the Show Clipping box.

Adjust the Midtone

Photographers often talk about “opening up the midtones.” This phrase basically means that you are lightening the midtone values of an image (Smith 435). Opening up the midtones adds contrast and detail to your picture. Here are the steps to adjusting the midtones:

In the Curves dialog box, click the middle of the curve ramp (the line that runs diagonally across the box) to create an anchor point; drag up slightly. The image will lighten. Do not move a dramatic amount and pay attention to your Histogram palette. In the Histogram, the bars will spread out, which is acceptable to a point.
To adjust the three-quarter tones (the shades around 75%); click halfway between the bottom of the curve ramp and the midpoint to set an anchor point. Use the grid in the Curves dialog box to find it easily. Adjust the three-quarter area of the tone curve up or down to create contrast. For more contrast, pull the point downward. You want something similar to a mild S-curve. Keep an eye on the Histogram palette!
If you are working on a grayscale image, your tonal correction is done and you can click OK. If you are working on color, move on to the final step.

Finding a Neutral

This last step only applies to a color image. To understand this final step, you need to know that equal amounts of color creates gray. By moving the mouse cursor over gray areas and reading the numbers in the Info palette, you can determine the colors you need to adjust (Smith 436).

With your Curves dialog box open, position so you can see the Info palette. If the Info palette is buried under another palette or dialog box, choose WindowInfo to bring it out front.
Position your cursor over your image and, in the Info palette, look for the RGB values in the upper left section. You will see color values and then forward slashes and more color values. The numbers before the slash are the values in the image before you opened Curves; the numbers after the slash are the values after the changes you have made in the Curves dialog box. Focus on the values after the slashes.
Position the cursor over something gray in your image. It can be a shadow or a road or building—anything that is a shade of gray. Look at the Info palette. If your image is perfectly color balanced, the RGB values after the forward slashes should all be the same.
If your color isn’t balanced, click the Set Gray Point Eyedropper in the Curves dialog box and click on the neutral or gray area of the image. Using Set Gray Point is an easy way to balance the colors.
Now you can click OK; if asked whether you want to save your color target values, click yes.

This is an easy workflow to follow but it takes some practice to get used to. Once you get familiar with Curves, you can experiment with some of its other features. A good follow-up to Curves is the Unsharp Mask filter which can sharpen a blurry image.

There are many different ways to color correct an image through Photoshop. While Curves might be the most complex, it is also the most versatile and complete method.

Creating a Glossy Effect
This tutorial will teach you step by step how to achieve a neat looking effect on any object in Photoshop. This tutorial will be using a sphere for instructive purposes.
Step 1: To keep it simple, create a shape on a blank canvas. This tutorial will use a sphere. On the toolbar to the left, select the shape tool > Ellipse Tool. Hold down Shift while you create the shape in order to make a perfect sphere.

Step 2: Now its time to construct the glossy part of the image. You need to select the area that you want to add the gloss to. Move over to the Layers window and hold down Ctrl and left click once on the shape. This will select the whole shape. Hint: The Layers window can be found under the Window tab > Layer

Step 3: Next step is to create a New Layer. While on the new layer, select the Elliptical Marquee tool from the toolbar and set it to Intersect with Selection. Next, drag an area over the sphere with the tool. It should look something like this:

Step 4: Select the Gradient tool from the toolbar and set the gradient to the one shown here:

Tip: You want to make sure your foreground is set to white in order to achieve the effect.

Step 5: Next, drag your mouse from the top over the shape to apply the gradient. Hit Ctrl-D after to deselect. Your shape should look something like this:

Step 6: Select the area of the actual shape again by Ctrl – Left click on the shape and then go to: Select > Modify > Contract.
Enter 2 px in the input box and hit enter.
Next you need to invert the selection by pressing and holding Ctrl and Shift and then hit the “I” key. Once this is complete, hit Delete and it will remove 2 pixels of the outside. You should have something like this:

Try using various shapes and colors. Enjoy!

Creating a Simple Web Button

1 – Creating the button shape

In a new layer, select a circular area with the selection tool. (Holding down Shift will make the selection stay circular, rather than being elliptical.)

Fill the area with the paint bucket. This is the curved end of your web button.

2 – Selecting a column for extension

Zoom in (Ctrl +) and select a one-pixel wide area in the centre of the circle. You can use the normal Selection Tool to do this, or you can hold down on the Selection Tool, and choose the Single Column Marquee Tool.

3 – Extending the button shape

With your one-pixel sliver of the web button selected, press Ctrl+T to "Free Transform" the selection. Extend the selection to the left as far as possible.

4 – Colouring Your web button

Press Ctrl+U to bring up the Hue/Saturation properties of the layer. Click "Colorize". Drag the sliders aronnd until your web button has a nice color.

5 – Giving the button some Effects

In the layers list, double-click this layer or right-click it and select "Effects". Give your web button a Drop Shadow and a Bevel.

6 – Texturising the button

Click Filter, Texture, Texturizer. Choose the type of the texture you like, and click it for texturise.

7 – Adding random colour variation

Create a new layer.

Click Filter > Render > Clouds (If your background isn't white, you'll first need to select the area of the button, by holding Ctrl and clicking on the button's layer in the layers list. This keeps the clouds inside that area.) Click Image > Adjustments > Brightness/Contrast. Set the contrast to maximum. (This turns the random grey clouds into equally random patches of black and white.)

Change the new layer from Normal to Overlay. (This changes the layer from solid colour to a kind of illumination, as if it were cellophane over the web button layer, instead of coloured paper.)

8 – Adding light to the button

Make another new layer.

Choose the Gradient tool. Click on the visual representation of the gradient

On the visual representation of the gradient, put in several tabs. These tabs should be in a black, white, black, white pattern.

Apply the gradient to your image, and change the layer's Mode from Normal to Overlay. This should give the button some nice illumination.

9 – Adding text to the button

Using the Text tool, add some text to your button. Some useful tips for button text are:

Make the button text all capitals.
Increase the tracking (letter spacing). It makes the text more dramatic.
Make the first letter of each word two points larger.
Make the first letter of each word red (pale yellow for white text.)
Use Palatino Linotype font in place of Times New Roman.

Note: you can only change the colour of individual letters of the button, you have to right-click the layer in the Layers list, and render it, then lasso the letters you want to change, then Press Ctrl+U to colour-shift them. Most annoying. :

10 – Embellishing the button text

Double-click the text layer or right-click it and select "Effects". Give it a Bevel and a white Outer Glow. I've also put a black outline on the button layer, to make it stand out more, but that's optional.

Conclusion
This tutorial shows one how to specifically recreate curves, glossy figures, and web buttons in Adobe Photoshop. Photoshop is a complex program that is very in depth and is hard to master without the assistance of tutorials. Using tutorials in order to accomplish tasks can further your proficiency in Photoshop because of the experience gained. You will use various tools and understand the effects created by each when following tutorials. Once you have done this, you will be able to explore on your own the various ways you can create unique material using Photoshop.

As shown, using curves can allow further editing of photographs and digital pictures. If you take pictures with your camera and upload them to your computer, you can enhance certain elements of the picture using curves. If you want fancy objects for your website or graphic poster, you can use the glossy effect on them. Along with these two features are the web buttons. Another useful addition to your website. These three tutorials are few of many tutorials out there for Adobe Photoshop and they will all contribute to your extensive knowledge in the program.

Works Cited
Smith, Jennifer, and Christopher Smith. Adobe Creative Suite 3 Design Premium All-in-One Desk Reference for Dummies. Hoboken, NJ: Wiley Publishing, Inc., 2007.
Marc. “Using Curves in Photoshop to Adjust Tone and Color in a Portrait.” Take Out Photo. 5 Nov. 2008. 1 May 2009. http://takeoutphoto.blogspot.com/2008/11/using-curves-in-photoshop-to-adjust.html
Daniel Piechnick. “How to create a web button” 5 Dec 2006. 6 Jan 2007. http://www.pegaweb.com/tutorials/howtomakebuttons/adobe-photoshop-buttons.htm

PROCESS MANUAL REVISION 2