adobe photoshop: overview

Adobe Photoshop: Adobe Photoshop: OverviewOverview

Author: Andrew ConardAuthor: Andrew Conard

Common Uses of PhotoshopCommon Uses of Photoshop

Creating graphics for the web.Creating graphics for the web.Modifying photos.Modifying photos.Creating textures and other 2-D Creating textures and other 2-D backgrounds for games.backgrounds for games.

Note: No 3-D modeling features Note: No 3-D modeling features supported.supported.

Resizing/Formats/CroppingResizing/Formats/Cropping

Resize ImagesResize Images Reduce or expand size of picture.Reduce or expand size of picture.

Resolution can not be added to an image.Resolution can not be added to an image.

File Formats AllowedFile Formats Allowed PSD, GIF, JPGPSD, GIF, JPG

CroppingCropping Removing parts of an image off of the canvas.Removing parts of an image off of the canvas.

Gradients/PatternsGradients/Patterns

Useful for textures or backgrounds.Useful for textures or backgrounds.

FiltersFilters

About FiltersAbout Filters Filters are plug-ins in Photoshop. This means Filters are plug-ins in Photoshop. This means

that you can download new plug-ins online for that you can download new plug-ins online for specific filtering effects.specific filtering effects.

Artistic Filters (Examples: Colored Pencil, Artistic Filters (Examples: Colored Pencil, Plastic Wrap, Watercolor)Plastic Wrap, Watercolor)

Blur Filters (Examples: Gaussian Blur, Radial Blur Filters (Examples: Gaussian Blur, Radial Blur)Blur)

Filters (Continued)Filters (Continued)

Filters (Continued)Filters (Continued)

Brush Strokes (Examples: Angled Strokes, Brush Strokes (Examples: Angled Strokes, Ink Outlines)Ink Outlines)Distort (Examples: Glass, Ripple, Wave)Distort (Examples: Glass, Ripple, Wave)

Filters (Continued)Filters (Continued)

NoiseNoisePixelatePixelateRender (Examples: Lens Flare, Lighting Render (Examples: Lens Flare, Lighting Effects)Effects)Sharpen ImageSharpen Image

Filters (Continued)Filters (Continued)

Sketch (Examples: Chalk, Chrome, Sketch (Examples: Chalk, Chrome, Plaster)Plaster)Stylize (Examples: Glowing Edges, Tiles)Stylize (Examples: Glowing Edges, Tiles)And much more…And much more…

Type ToolType Tool

Placing text in images.Placing text in images.Anti-aliasing makes the edges of your type Anti-aliasing makes the edges of your type look nice and smooth instead of all jagged.look nice and smooth instead of all jagged.Font size and type can be changed.Font size and type can be changed. Crisp/Strong/Smooth TypesCrisp/Strong/Smooth Types

LayersLayers

All images in Photoshop are produced in All images in Photoshop are produced in layers.layers.Starting with the background layer, you Starting with the background layer, you can add or delete as many layers as you can add or delete as many layers as you need to.need to.Layers can be combined.Layers can be combined.

Layers (Continued)Layers (Continued)

All layers contain:All layers contain: Opacity (Transparency) ValueOpacity (Transparency) Value Layer Mode (Examples: Normal, Overlay, Layer Mode (Examples: Normal, Overlay,

Color Burn, Color Dodge)Color Burn, Color Dodge)

Selection ToolsSelection Tools

Used to select certain parts of a layer Used to select certain parts of a layer (Example: Someone’s head or a particular (Example: Someone’s head or a particular building in a photo) and modify it.building in a photo) and modify it.Marquee ToolMarquee Tool RectangleRectangle OvalOval Row of PixelsRow of Pixels Column of PixelsColumn of Pixels

Selection Tools (Continued)Selection Tools (Continued)

You usually want to select a more You usually want to select a more complicated shape than that, so…complicated shape than that, so… You can add or subtract from certain areas of You can add or subtract from certain areas of

the selection.the selection. For example, to add, simply hold down shift For example, to add, simply hold down shift

and make another selection.and make another selection. To subtract, simply hold down ALT and make To subtract, simply hold down ALT and make

another selection.another selection.

Selection Tools (Continued)Selection Tools (Continued)

LassoLasso Allows you to make the selection by manually Allows you to make the selection by manually

drawing it out with a pencil tool.drawing it out with a pencil tool.

Selection Tools (Continued)Selection Tools (Continued)

Magic WandMagic Wand Select all of the same-color or similarly-Select all of the same-color or similarly-

colored adjacent pixels.colored adjacent pixels. Tolerance LevelTolerance Level

Example TexturesExample Textures

Example Tutorial: ChromeExample Tutorial: Chrome

From: From: http://www.nk-graphix.com/index.php?paghttp://www.nk-graphix.com/index.php?page=chrome=chrom

Step 1: Start with a blank white canvas.Step 1: Start with a blank white canvas.Step 2: Select the ellipse tool. Turn on the Step 2: Select the ellipse tool. Turn on the Draw Circle option under the ellipse Draw Circle option under the ellipse options.options.

Chrome TutorialChrome Tutorial

Apply a gradient overlay by going to layer Apply a gradient overlay by going to layer styles and then “Gradient Overlay”. Apply styles and then “Gradient Overlay”. Apply the following settings:the following settings: Fill Method: NormalFill Method: Normal

OpacityOpacity:: 100% 100%Gradient ColorsGradient Colors:: 1. #999999 | 2. #424242 | 3. 1. #999999 | 2. #424242 | 3. #999999#999999StyleStyle:: Linear LinearAngleAngle:: 90° 90°

Chrome TutorialChrome Tutorial

Should look like this:Should look like this:

Step 3: Apply a smooth, black outer glow (also Step 3: Apply a smooth, black outer glow (also under Layer Options). Then apply the following under Layer Options). Then apply the following settings for an inner glow:settings for an inner glow:

Chrome TutorialChrome Tutorial

Settings:Settings: Fill Method: NormalFill Method: Normal Opacity: 30%Opacity: 30% Noise: 0%Noise: 0% Color: BlackColor: Black Technique: SofterTechnique: Softer Source: EdgeSource: Edge Choke: 0%Choke: 0% Size: 10pxSize: 10px

Chrome TutorialChrome Tutorial

Should look like this at this point:Should look like this at this point:

Step 4: Now apply the following Bevel & Step 4: Now apply the following Bevel & Emboss settings (also under Layer Options):Emboss settings (also under Layer Options):

Chrome TutorialChrome Tutorial

Settings:Settings: Style: Inner Bevel, Technique: Smooth, Style: Inner Bevel, Technique: Smooth,

Depth: 461, Direction: Down, Size: 13, Depth: 461, Direction: Down, Size: 13, Smooth: 0, Angle: 90°, Altitude: 55, Global Smooth: 0, Angle: 90°, Altitude: 55, Global Light: Off, Highlight Mode: Color Dodge, Light: Off, Highlight Mode: Color Dodge, Color: White, Opacity: 0%, Shadow Mode: Color: White, Opacity: 0%, Shadow Mode: Color Dodge, Color: #696969, Opacity: 56% Color Dodge, Color: #696969, Opacity: 56%

Chrome TutorialChrome Tutorial

Should look like:Should look like:

Step 5: Use the following “Satan” settings (also Step 5: Use the following “Satan” settings (also under Layer Options):under Layer Options):

Chrome TutorialChrome Tutorial

Settings:Settings: Fill Method: Color DodgeFill Method: Color Dodge Color: WhiteColor: White Opacity: 35%Opacity: 35% Angle: 144°Angle: 144° Distance: 44pxDistance: 44px Size: 40pxSize: 40px Smooth: OffSmooth: Off Invert: OnInvert: On

Chrome TutorialChrome Tutorial

Will eventually look like this after finishing Will eventually look like this after finishing touches:touches:

Sources/Other TutorialsSources/Other Tutorials

http://www.good-tutorials.com/http://www.good-tutorials.com/http://www.absolutecross.com/tutorials/phhttp://www.absolutecross.com/tutorials/photoshop/otoshop/http://www.phong.com/tutorials/http://www.phong.com/tutorials/http://www.photoshopcafe.com/tutorials.hthttp://www.photoshopcafe.com/tutorials.htmmhttp://www.nk-graphix.com/index.php?paghttp://www.nk-graphix.com/index.php?pagee==chromchrom