Adobe Photoshop is the industry standard tool for working with digital images. Whether the image comes from a digital camera, scans, stock imagery, Web-ready artwork, or even vector graphics, all of them can be manipulated in Photoshop. Used for both enhancing and manipulating photographs as well as creating original artwork, Photoshop is used by photographers, designers, videographer and 3d artists.
- Rotate an image
- The Crop Tool: Crop or resize images
- Modifying Color
- Crop an image
- Align an image
- Correcting Exposures
- Adjust tonal properties such as lightening a dark image
- Restoring and Retouching Images
- Combining multiple images into composites
- Simulating a variety of lens effects
- Color correction of images
- Dust and scratch removal
- Opening or saving in a variety of file formats
- Photoshop integrates with InDesign for print production, After Effects for video compositing and Illustrator for print design.
Designers use Photoshop to create:
- Textures for website backgrounds
- Creating comps of website and mobile applications
Videographer use Photoshop for:
- Assembling image sequences into timeline animation
- Removing unwanted objects from frames in their video
- Repairing video using the cloning and healing tool
- Creating frame by frame animations
3d Artists use Photoshop for:
- Creating 3 dimensional shapes used in other applications
- Creating 3d objects
- Painting 3d environments
Adobe Photoshop CANNOT:
- Make a blurry photograph sharper
- Increase the size of a low resolution image to a large one
- Change a raster based image into a vector based image
The Photoshop CS6 Interface
This video covers the basics of the Photoshop interface, from changing the interface’s color, finding the Tools bar, the Options bar and exploring Photoshop’s panels.
Getting Started – 1. Workspace Layout
2. Options Bar
Located just below the main menu on Mac computers, the options bar is contextual in nature. Depending on which tool you’re on, the options displayed will change.
3. Tools Palette
Many of the icons used for the tools in Photoshop are now industry standards across all types of software including Illustrator, InDesign and After Effects.
You can align your tool palette to show two rows of tools as opposed to one. It’s your choice. Notice, if you see a small triangle in the lower right hand corner on any of the icons on a tool in the tool bar, it signifies that there is more than one tool to choose from in that button.
Just click and hold down the button and a small window will pop up offering additional tools.
4. Common Tools
Crop Tool: Used to cut off a portion of your photo or resize the photo.
Used to select a specific part of a photo. If you want to draw a shape on your photo, use this tool. It forms a selection marquee and any adjustments you make will only affect this portion of the photograph.
Allows you to add text to your image. Any text placed on your image will become part of your image once the document is saved.
Dodge and Burn Tools:Allows you to dodge light from the image, causing it to lighten. Or, force light into a particular area to darken (burn) the image. The opacity setting allows you to gradually implement these tools.
Rubber Stamp:Also known as the clone tool, the rubber stamp allows the user to manipulate the photo in some way by sampling a particular area of a photo, and stamping it in another area. To sample, press and hold the ALT key.
5. UNDO and History Palette
Command-Z (Mac) or CTRL-Z (PC) is the “undo” command that will undo the last action you took. Photoshop only allows you to undo the last step when using this shortcut. To undo more than one action, pull up the History palette. Window –> History menu. The history palette stores every action you take in the program as a list. To undo, simply click on a previous item on the list and it will undo every action listed after it.
6. Opening an Image
To open an image, click on the File menu and select Open. You can also use the Browse option. By using Browse, Photoshop will automatically launch another Adobe Bridge, which allows you to preview thumbnails from folders.
If your image is crooked or not aligned to the horizon, you may want to rotate it. Go to the image menu and select Image Rotation and select either 90 degrees Counter Clockwise (90 CCW), or 90 Clockwise (90 CW) depending on which way the photo is situated. Click 180 degrees if the photo is completely upside down.
Straightening a Crooked Image Video
The Crop Tool
Once you have the image open, click on the crop tool in your tool palette. Then click and drag open a box on your image, highlighting the area you want to crop.
Notice the anchor points, the small boxes in the corner of the image, You can click and drag on the small boxes to reshape your crop. When hovering over the boxes, your mouse cursor will change into different arrows indicating how that anchor point will shape the crop if you click on it. When you hover your mouse arrow just outside one of the corner boxes, it changes your cursor into a curve. This curve indicates that it will rotate your crop.
Resizing while Cropping
You can save a lot of time by resizing the image while you are cropping. You’re telling Photoshop which dimensions the image should result in after your crop. Place a numerical value for inches or points in the width and height fields, you can also put in a resolution value, in the option bar while the crop tool is selected. If you write 600px, that stands for 600 pixels. If you write 600in, that stand for 600 inches. Photoshop normally defaults to “in”, which stands for “inches”.
You don’t necessarily have to crop an image to resize it. That’s just an added plus if you were planning on cropping the image anyway. If you wish to resize your image without cropping, Photoshop offers a number of methods. Click on the image menu. The image resize option will be found under here.
You can resize an image by cropping it or without cropping it, Photoshop offers a number of options. Click on the image menu, then image size. The image size dialogue box will display and present list of options. There are two sections to this dialogue, the Pixel Dimensions section at the top and the Document Size at the bottom. In the pixel dimensions section, you type in the values of the height and width. If the Constrain Proportions checkbox is checked, then when you change either the height and width the other value will change respectively based on the ratio of their dimensions. If you don’t have this box checked, you will distort the photograph when resizing.
Using the new Crop tool in Adobe 6.0 Video
Tones, Contrast and Color
There are many ways to adjust an image in Photoshop, it’s really your preference.
To adjust levels go to the menus Image –> Adjustments –> Levels
You’ll see a graph showing the values across the spectrum of the image called a histogram. To simplify it:, the left side of the graph is the shadows and blacks and the right side displays the highlights and whites. You note in the graph that there are few black or white tones, as the graph is rather flat on the edges. To adjust the image, move the three slider arrows at the bottom to their appropriate settings. The black slider arrow defines the black point, that is the darkest part of the photo. The white slider defines the white point, the brightest part of the photo that is white. The middle slider adjusts what are called the mid-tones. Drag the outside sliders inward until the are lined up with the edge of the histogram.
Right away the contrast picks because the image didn’t have a very solid white or black point. Next, adjust the middle slider to set the mid-tones of the image. Mid-tones adjusts the overall brightness of the image.
Adjusting Colors Using Levels
You can also adjust the colors of an image using levels. Simply select the Channel option at the top to choose one of the three primary colors. Your choice allows you to either increase or decrease that particular color from the image (sliding either the white point, black point, or mid-tones). If you subtract a particular color, it’s relative secondary color will start to emerge in the image. If ou want to add some yellow to your image, you would subtract blue. Set the channel to blue, and slide the black slider inward.
Variations is another way to adjust the levels of a photo. It’s much less precise, but sometimes its all you need. Variations presents you with a window dialogue that shows several copies of your image.
Auto Corrections Video
Correction and Adjustments in Photoshop Video
Using Adjustment Layers Video
Dodging and Burning
Dodging and burning refers to “lightening” and “darkening” portions of the photograph. The dodge tools looks like a black lollipop while the burning tool looks like a hand forming a circle. When you select the dodge or burn tools, the option bar at the top will give you a new set of parameters to adjust the tool’s usage.
Adjust these settings so that you only change the photo in small increments so that nothing stands out too quickly. Use the exposure setting to adjust the amount of dodging or burning that occurs with each pass. The range will specify the range of tones that will be affected. You want to lighten highlights and darken shadows. If your goal is to brighten shadows or darken highlights, then use the mid-tones setting. The brush size will specify the size of the tool you will be using.
The master diameter is the size of what Photoshop calls the “brush” size. The hardness refers to how soft the brush’s edges are. When using dodging or burning, you want a low hardness setting to offer the softest brush. If you are trying to be more exact, you can increase the brush hardness, but increase the chance that the touch-up will be noticeable.
Sharpening increases the contrast of edges found in the photograph, giving the appearance of a sharper or clearer photograph.Note that using the sharpening filter cannot make an out-of-focus photo, into a sharp, or in-focus photo.
When you open an image background layer is your primary layer. Adding additional layers allows you add elements (contained within those layers) to your image. This allows you to add additional information to your document without affecting the other layers. Each layer is superimposed over the other and can be modified without affecting the other layers.
To add a new layer, click on the layer icon located at the bottom of the layers palette. Rename your layers by double clicking on it and typing the new layer name. Once you added a new layer, now it’s time to add information to that layer.
Here’s a quick step by step on how to add text to an image.
- Create a new layer
- Rename your new layer “Text”, indicating that the layer will contain text.
- Select the text tool.
- Click on the image and the text box will appear.
- Type in your text and click OK.
- To position the text, select the move tool and drag your text.
- Your text is now on a separate layer you can manipulate it without affecting the original image.
Once you’ve finished manipulating your image, you’ll need to save them. There are two ways I recommend saving images. First, save a copy of the image that retains the individual layers. To do that, you’ll need to save it as a PSD file. Saving a copy of the image as a PSD fil, you’ll retain the individual layers which allows you to reopen the image in Photoshop and manipulate those layers at a later time. To save your image as a PSD file, go to File, Save As and make sure you save click PSD.
Note that once you flatten the image, the individual layers will no longer be available. All of the layers will be flattened into one layer. This will prevent you from manipulating any of the data. For example you will no longer be able to move the text around.
If you want to use your image on the Web, you need to flatten the image so that it consists of only one layer which consists of all the data from each of the layers. You to flatten the image first, and save a copy of your image as a .jpg, .gif or .png file. Note that once you flatten the image, you won’t be able to manipulate the individual layers. All of the layers will be flattened into one layer.
Step 1: Go to the Layer menu and select Flatten Image.
Step 2: Go to File, Save As and save the image as a JPG or whatever format you choose.
Using the Panels
To reset panels: Window > Wordspace > Reset Essentials
Choosing Other Panels
History Panel: The History panel allows you to undo and redo steps up to 20 steps.
Click on the History panel. If you can’t find it choose Window > History
Click back on the various history states to see how your steps are undone.
Expanding and Collapsing Your Panels
To bring back your workspace to its original configuration: Window > Workspace > Reset Essential.
Collapse groups of panels by double-clicking the dark gray bar (title bar) at the top of the panels. Double-click it to reopen.
If the History panel is no longer open, click the icon for the History panel.
Click the double-arrow in the upper-right to collapse the panel back to an icon.
Some of the tools in the Tools panel display a small triangle at the bottom-right corner; this indicates there are additional tools hidden under the tool.
PSD vs JPG vs GIF vs PNG
PSD preserves all the layers in your file. You should ALWAYS save a copy of your image as a PSD. Once you’ve done that, then consider which file format below best fits your needs.
Image File Formats: There are three primary image file formats used for graphics viewed on the web. Each of these file types were designed for the purpose of compressing memory usage. Each file type does this a different way.
Jpegs work well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple cartoons, or line drawings. JPEG is “lossy,” meaning that the decompressed image isn’t quite the same as the one you started with. (There are lossless image compression algorithms, but JPEG achieves much greater compression than is possible with lossless methods.) JPEG is designed to exploit known limitations of the human eye, notably the fact that small color changes are perceived less accurately than small changes in brightness.
Graphics Interchange Format. A format used for displaying bitmap images on World Wide Web pages, usually called a “gif” because .gif is the filename extension. These files use “lossless” compression and can have up to 256 colors.
Png-8 and Png-24
PNG is a compression scheme that has two main benefits: it is a lossless compression image format and it holds alpha channel information. Originally, the Portable Network Graphics (PNG) format was designed as a royalty-free format, which would replace GIF and JPEG. Png-24 allows for smooth blending between alpha and opaque.
When speaking about image size on the web, there are three possible interpretations of this that you must take into account.
File Size refers to the amount of disk space an image occupies (in KB or MB)
Image Dimensions refers to the physical size of the image, expressed in height and width.
Resolution refers the pixel density of an image. This is expressed in pixels per inch (ppi). Images are displayed on the web at 72 dpi. Printed images are generally of higher resolution.
Compression shrinks down the file size of the photo so that it loads on the user’s computer quickly, but maintains a certain level of quality.
Click the Save button to save your image. ALWAYS ave your original photo for archiving, or if you intend to reopen it later PRIOR to using the save for web.
Save and Export
There are two ways of saving a photo in Photoshop. The first is to use the Save As… dialogue, the other is called Save for Web & Devices… which is used to save your photos in preparation for publication to the Web.
1) Save as: I recommend saving the file type as a Photoshop or .PSD file, which will also save extra Photoshop-specific information about your photo and allows you to go back to the file at a later date and manipulate all layers. You will not lose any quality when you re-save it multiple times. Saving as a .jpg, .png or .gif compresses the photo allowing you to use it on the web.
2) Save for Web: Use this when you are ready to export your photo for publication to the Web. The Save for Web allows you to see how your photo will appear once it’s published to a Web site. Optimized will show you how your photo will appear once it’s published on a Web site, and 2-up/4-up will show you comparisons so you can see how the different levels of compression will affect your photo when saving. These are automated ways to save your image for the Web.
You should end up with a total of FIVE different images. Upload them to your Flickr site and label them:
Word document, research, sketches, design iterations and final design in the following formats: .ai, .jpg and .doc should be UPLOADED TO DROPBOX and labeled as follows: Last Name_First Name_Date_Project II_Illustrator_Infographic.
The design will be turned in via DropBox as a Adobe Illustrator file, a .jpg file as well as printed in color. The written description and research for the project in Microsoft Word will be turned in .doc format and the project sketches will be turned in .jpg format. ALL project files should be on BOTH your Illustrator Project II page as well as DropBox. ALL research, inspiration, low and high fidelity sketches, Illustrator v1 and v2 should be completed. They should all be linked to your project II page.