Using Adobe PhotoShop CS3 for Game Design Documentation

Using Adobe PhotoShop CS3 for Game Design Documentation

by Philippe Poulin

Using the Interface

Current Picture Canvas (You edit this)

Unused spaced when zoomed out

Menu Bar Tool-Specific Parameters Bar

Layer Window

History Window

Info Window

Tool Bar

Current Foreground / Background

colors (You draw with the foreground color if you use the brush for

example)

• This is my own setup but you can customize yours at will by using the Window Menu.

• You can also use the « F » key to switch between various display modes if you think the interface is too tight or cluttered.

Other Windows (Click to expand)

Layers Window

Opacity of the current layer

(0% is completely transparent)

Current Layer (You work on this layer)

Blending Mode of the current layer

Layer Visibility (If there is no eye, the layer is

hidden.)

Delete Current Layer

Layer Thumbnail (Double-Click to edit

Layer Effects) Layer Name (Double-Click to edit name)

Add a New Layer on top of the current one

Add a New

Group

Drag layers up and down to change their display order or move

them to groups

Edit Layer Effects

Select multiple Layers using SHIFT and click this to link layers together.

Edit locks on the current layer

Additional Layer Options

History Window • The History Window is most useful to keep track of the

actions you performed.

• The actions are organized in the following order: – The bigger thumbnail at the very top is the original state of the

document when you opened it or when you created it. (A)

– Oldest actions at the top. (B)

– Most recent actions at the bottom. (C)

• To go back to a previous state of your picture, simply click on any past state. This will revert the picture to how it was when you performed that action. (D)

• You will only be able to go back so far though, so be careful.

• You can go back forward to states in the « future » by re-clicking on greyed out states. (C)

• Be careful! You won’t be able to restore states if you went back to an old state (D) and performed a new action at that point.

• You can edit the maximum number of states in the History List in Edit Preference Performance History & Cache.

A

B

C

D

Info Window • This window is useful to keep track of data such as:

– Color Data (A)

– Cursor Position (B)

– Width and Height of the current picture (C)

– Picture size (D)

– Other useful info about the current tool you’re using. (E) A

B C

D

E

Essential Shortcuts • CTRL z – Undo / redo last action only • ALT CTRL z – Undo multiple actions in succession • Hold Spacebar + Left Click & Drag – Move the camera around the canvas • CTRL + – Zooms the camera in • CTRL - – Zooms the camera out • Hold CTRL & Left Click & Drag – Move the content of a layer • Hold CTRL & Left Click on Layer Thumbnail – Make a selection out of what is in a layer • CTRL d – Deselect everything • CTRL e – Merge down current layer • Hold ALT with any color-drawing tool & Left-Click – Pick a color using the Eyedropper Tool • x – Toggle between the foreground and background colors • v – Move Tool • b – Brush Tool • e – Eraser Tool • g – Bucket Tool • m – Marquee Select Tool • r – Smudge Tool • w – Magic Wand Tool • t – Text Tool • BACKSPACE or DELETE – Clears the content of a selection • CTRL BACKSPACE – Fills a selection with the Background Color (A layer must selected/active).

Drawing In Photoshop, There is a variety of drawing tools you can use.

Now, designers usually don’t have a Wacom or Cintiq tablet so we can’t draw elaborate pictures. Here I will explain how to draw simple shapes and icons using the available tools with a mouse.

Here are the essential tools to draw:

• Brush

• Eyedropper and Color Picker

• Eraser

• Bucket

• Clone Stamp

• Path (Pen)

• Smudge

• Text

• Shapes

Drawing Tool: Brush • Use this tool to draw using any brush shape with the Foreground Color.

– Click on the icon and hold to switch between

• Brush Tool (Draws using an anti-alias smoother brush shape)

• Pencil Tool (Draws using a sharp pixel-precise brush shape)

• Before clicking to draw, – Simple Left-Click: Draw normally

– Simple Right-Click: Select a brush shape

– Hold Shift & Left-Click: Draws a straight line between the spot where you last drew and the current location of the brush cursor.

– Hold Alt & Left-Click : Use the Eyedropper Tool to select a color from anywhere in the picture and set it as the current Foreground Color

– Hold Ctrl & Left-Click : Move the content of the active selections or layer.

• Once you have left-clicked and you are holding the button, – Simple Left-Click: Draw

– Hold Shift: Forces a straight vertical or horizontal line.

• Parameters: – Master Diameter: Increase or decrease the size of your brush shape.

– Hardness: Increase or decrease the smoothness of the edges of the brush.

– Opacity: Change the transparency of the brush. This is independent from the opacity of the layer.

Drawing Tool: Eyedropper & Color Picker

• Use those tools to pick a color and set it as the Foreground Color – Eyedropper Tool (Select a color from any open picture visible on the screen within PhotoShop)

– Color Picker (Select a color from the entire palette)

• Before clicking with the Eyedropper Tool – Simple Left-Click: Set the selected color as the Foreground Color

– Hold Alt & Left-Click : Set the selected color as the Background Color.

• You can also use the Eyedropper by clicking on colors in any open picture while the Color Picker tool is open.

• You can also use the Eyedropper Tool by holding Alt and left-clicking while using the Brush tool or Bucket tool.

• Color Picker (A & B) – Click on the forward square (A): Select a color for the Foreground Color.

– Click on the back square (B): Select a color for the Background Color.

A B

Drawing Tool: Eraser (E) • Use this tool to erase any color you drew

– The eraser will instead draw the Background Color if there is only 1 layer and no transparency.

• Before clicking to draw, – Simple Left-Click: Draw normally


– Hold Shift & Left-Click: Draws a straight line between the spot where you last drew and the current location of the eraser cursor.


• Once you have left-clicked and you are holding the button, – Simple Left-Click: Erase




– Mode: Switch between a smooth brush (Brush) and a sharp pixel precise brush (Pencil).

– Opacity: Change the transparency of the eraser. This is independent from the opacity of the layer and cumulative as you erase the same spot over and over again with a low opacity eraser.

Drawing Tool: Bucket & Gradient (G) • Use this tool to f ill an area or selection with a color

– Bucket Tool (Fill an area or selection with 1 color)

– Gradient Tool (Fill an area or selection with a gradient)

• Before clicking to f ill, – Simple Left-Click: Fill the desired area with color. (Click multiple times to keep spreading more color)


• Once you have left-clicked and you are holding the button with the Gradient Tool, – Drag: Draw a line along which the gradient will follow. Release to apply the gradient.

– Hold Shift: Constrains the direction of the gradient to 45 degrees increments.

• Bucket Parameters: – Opacity: Change the transparency of the fill. This is independent from the opacity of the layer.

– Tolerance: The lower the number, the more picky the Bucket will be about the colors replaced when filling an area.

– Anti-Alias: Enables or disable Anti-Alias (If enabled, color fills will be smoother without rough edges)

• Gradient Parameters: – Change gradient color presets (A) (You can customize your own gradient here)

– Change gradient type (B)

– Opacity (C) : Change the transparency of the gradient. This is independent from the opacity of the layer.

A

B

C

Drawing Tool: Clone Stamp (S) • Use this tool to clone and draw with other parts of the picture

• Before clicking to draw, – Right-Click: Choose a brush shape.

– Hold Alt & Left-Click : Select an area to sample and clone.

• Once you have held Alt and left-clicked to select the area to clone, – Simple Left-Click: Draw using the sampled area as paint.




– Opacity: Change the transparency of the brush. This is independent from the opacity of the layer.

– Sample: Switch between different sample settings. • Current Layer – The tool will clone only the content of the current layer when holding Alt & left-clicking to sample.

• Current & Below – The tool will clone the content of the current layer as well as layers below it when holding Alt & left-clicking to sample.

• All Layers – The tool will clone the content of all visible layers when holding Alt & left-clicking to sample.

Drawing Tool: Path (Pen) (P) • Use this tool to draw curves using anchor points and

control points (A) • To draw a Path,

– Simple Left-Click: Add an anchor point to draw a curve – Simple Right-Click: Select additional options (See below) – Left-Click & Drag: Drag and thus stretch control points around an anchor

point (Changes the curve) – Hold SHIFT while dragging a control point:

Contrain control point movement to 45 degrees increments. – Hold ALT while dragging a control point:

Allows you to break the control point from its straight line. – Place cursor over first anchor point in path & Left-Click:

Close the path in a loop – Place cursor over any other point in path & Left-Click:

Delete an anchor point – ENTER while drawing a path:

Confirms and closes the current path.

B • Once you have a path drawn you can edit it with the Direct Selection Tool (Hold CTRL)

• Hold CTRL while using Path Tool: Activates Direct Selection Tool • When using the Direct Selection Tool, your cursor becomes a white arrow. (B) The Direct Selection Tool allows you to select a path, multiple paths or even multiple anchor points and move them around.

• Additional Options • Stroke Path: Draws a line along the selected path using the current brush and Foreground Color. • Fill Path: Fills the selected path with the Foreground Color. • Make Selection: Turns the selected path into a selection.

• Parameters • Automatically f ill the path with the Foreground Color. (C) • Create a simple path without f illing it automatically. (D) • Normal Pen (E): Draw curves using anchor points.

Free Form Pen (F): Draw by dragging the cursor. • Auto-Draw Shape Paths (G): Draw automatically-generated shapes.

Anchor Point Control Point

A

C

D E F G

Drawing Tool: Smudge (R) • Use this tool to smudge a picture, as if you were spreading the color by swiping your

f inger on the drawing surface. – Click on the icon and hold to switch between

• Smudge Tool (Smudges the color using a brush shape)

• Blur Tool (Blurs in the areas where you draw using a brush shape)

• Sharpen Tool (Opposite of Blur - Sharpens the area where you draw using a brush shape)

• Works like the brush and eraser tools, before clicking to draw, – Simple Left-Click: Draw normally


– Hold Shift & Left-Click: Draws a straight line between the spot where you last drew and the current location of the brush cursor.



• Once you have left-clicked and you are holding the button, – Simple Left-Click: Draw




– Strenght: Increase or decrease the strength of the smudge/blur/sharpness effect.

Drawing Tool: Text (T) • Use this tool to write text anywhere in the picture.

• Click where desired to add text using the Foreground Color – Simple Left-Click: Set a location to start writing text at.

– Left-Click & Drag: Set a text box within which you can type.

• Parameters: – Text orientation: Toggles the orientation of the text between vertical and horizontal. (A)

– Font & Font Style: Change the font. (B)

– Font Size: Increase or decrease the size of the text. (C)

– Anti-Alias Method: Switch between different anti-alias settings (Smoother or sharper edges). (D)

– Text Alignment: Choose between left, right or center alignment. (E)

– Text Color: Change the color of the selected text without changing the Foreground Color. (F)

• Note: When you install a new font, you will have to restart PhotoShop after installing the new font.

A B C D E F

A B C

Drawing Tool: Shapes (U) • Use this tool to draw lines, arrows and other shapes using the Foreground Color.

• Select a shape – From the available shapes in the parameters at the top.

– By holding the button when selecting the tool icon.

• Once you have left-clicked and you are holding the button, – Line Tool:

• Hold Shift: Constrains the line drawing to 45 degrees increments

– Rectangle, Rounded Rectangle, Ellipse and Polygon Tools:

• Hold Shift: Forces a perfect symmetrical shape instead of an irregular shape.

• Hold Alt: Forces a concentric shape drawing instead of drawing from the corner of the shape.

• Note: Once you have drawn a shape, it actually creates a path and a new layer associated to it. – If you want to modify the shape you have to use the Path and Direct Selection Tools.

– To edit pixels further or merge the layer down, you must rasterize the shape layer (Turn it into pixels only and not a path). (To rasterize, right-click the Layer name and select ”Rasterize Layer”)

Parameters: • Automatically f ill the shape with the ForegroundColor. (A) • Create a simple shape path without f illing it automatically. (B) • The parameters of the shape tools depend on the shape chosen. (C)

• The Line options allows you to draw various types of arrows. • The Rounded Re.ctangle options allw you to adjust the roundness of

the corners • The Polygon options allow you to determine how many edges the

polygon has.

Making Selections In Photoshop, you will use selections constantly to achieve your goals. With selections, you mark a specif ic area of the picture in order to edit only that part of the image. • Selections appear as an animated dotted line in PhotoShop. (A)

• When you have a selection active, you can’t edit the image outside of that selection

• Although it is not apparent, selections do take transparency into account so keep that in mind.

Here are the essential ways to make & edit selections:

• Using Basic Tools – Marquee

– Lasso

– Magic Wand

– etc…

• Using Keyboard shortcuts – CTRL & Left-Click on a layer thumbnail to make a selection out of it

• Using Menu Commands («Select» menu (B)) – Select All - Select entire canvas (CTRL-A)

– Select Deselect - Removes all selections (CTRL-D)

– Select Inverse- Selects unselected areas and unselects selected areas. (SHIFT-CTRL-I)

– Select Color Range - Allows you to select specif ic colors

– Select Modify - Allows you to tweak a selection (Expanding or contracting it)

– Select Transform Selection - Tranform a selection without affecting its content

– Select Load/Save Selection - Load or Save selections

A

B

Selection Tool: Marquee (M) • Allows you to make a selection in a specif ic shape.

– Click on the icon and hold to switch between • Rectangular marquee (Makes a rectangular selection.) • Elliptical marquee (Makes an elliptical selection.

• Before clicking to make your selection, – Simple Left-Click outside of an existing selection: Deselects everything and make a selection from scratch – Hold Shift & Left-Click: Adds your selection to an already existing selection. – Hold Alt & Left-Click : Substracts your selection from an already existing selection. – Hold Ctrl & Left-Click : Move the content of the active selections.

• Once you have left-clicked and you are holding the button, – Rectangular Marquee:

• Hold Shift: Forces a perfect square instead of a rectangle. • Hold Alt: Forces a concentric selection instead of selecting from the corner of the shape.

– Elliptical Marquee: • Hold Shift: Forces a perfect circle instead of an ellipse. • Hold Alt : Forces a concentric selection instead of selecting from the corner of the shape.

• Once you have a selection made, – Left-Click inside an existing selection & Drag: Moves all active selections WITHOUT moving their content.

• Parameters: – Feather: Increase this number to make the edges of selections smoother. (in Pixels) – Style:

• Normal: Basic Marquee • Fixed Ratio: Always create selections of the same ratio. • Fixed Size: Always create selections of the same shape.

Selection Tool: Lasso (L) • Allows you to draw and make a complex selection yourself

– Click on the icon and hold to switch between

• Regular Lasso (Simple drawing mechanic)

• Polygonal Lasso (Draw a polygon)

• Before clicking to make your selection, – Simple Left-Click outside of an existing selection: Deselects everything and make a selection from scratch

– Hold Shift + Left-Click: Adds your selection to an already existing selection.

– Hold Alt + Left-Click : Substracts your selection from an already existing selection.

– Hold Ctrl + Left-Click : Move the content of the active selections.

• Once you have left-clicked and you are holding the button, – Polygonal Lasso:

• Hold Shift: Constrains selection segments to 45 degrees increments.

• Hold Alt: Forces the regular lasso to draw normally (Regular Lasso) Release to return to Polygonal Mode)

• To close your selection you have 2 possible options, – Double Left-Click (This will close the selection no matter the distance between the last point and the f irst)

– Move the cursor to the f irst point until the cursor shows a circle icon and left-click.

• Once you have a selection made, – Left-Click inside an existing selection + Drag: Moves all active selections WITHOUT moving their content.

• Parameters: – Feather: Increase this number to make the edges of selections smoother. (in Pixels)

Selection Tool: Magic Wand (W) • Allows you to select an area of an image

• Before clicking to make your selection, – Simple Left-Click outside of an existing selection: Deselects everything and make a selection from scratch

– Hold Shift + Left-Click: Adds your selection to an already existing selection.

– Hold Alt + Left-Click : Substracts your selection from an already existing selection.

– Hold Ctrl + Left-Click : Move the content of the active selections.

• You can adjust the sensitivity of the Magic Wand – Tolerance: The lower the number, the more picky the Magic Wand will be about the colors it selects.

• 1 means the wand will only select the color you clicked and never allow more subtle variations of that color.

• The higher you set the Tolerance, the more lenient the Magic Wand is when selecting colors

• Once you have a selection made, – Left-Click inside an existing selection + Drag: Moves all active selections WITHOUT moving their content.

• Parameters: – Tolerance: The lower the number, the more picky the Magic Wand will be about the colors it selects.

– Anti-Alias: Enables or disable Anti-Alias (If enabled, selections will be smoother without rough edges)

– Sample All Layers: Turn this on to make selections as if all visible layers were merged together.

Other Ways to Select • Using Keyboard shortcuts

– CTRL & Left-Click on a layer to make a selection out of it

• Using Menu Commands («Select» menu (A)) – Select All - Select entire canvas (CTRL-A)

– Select Deselect - Removes all selections (CTRL-D)

– Select Inverse- Selects unselected areas and unselects selected areas. (SHIFT-CTRL-I)

– Select Color Range - Allows you to select specif ic colors (See next)

– Select Modify - Allows you to tweak a selection (See next)

– Select Transform Selection - Tranform a selection without affecting its content

– Select Load/Save Selection - Load or Save selections

A

Color Range • The Select Color Range menu allows you to make a selection out of specif ic colors in the

picture.

• With the Color Range window open, use the Eyedropper cursor to select a color from the picture. – Hold SHIFT or click on to add more colors to your selection.

– Hold ALT or click on to substract colors from your selection.

– Use the Fuzziness slider to increase or decrease how picky the color is selected.

– Check the Invert box to invert the selection.

Modify Selection • Original Selection

• The Modify option in the Select menu is not available if you have no selection active.

• Border • This turns the edges of the current selection into a border. • Change the number to determine the width of the border

in pixels.

• Smooth • This smoothens the shape of the selection • Adjust the smoothness of the selection by changing the

value.

• Expand

• This expands the selection • Change the number to determine the size of the expansion

in pixels.

• Contract • This contracts the selection • Change the number to increase or decrease the

contraction in pixels.

• Feather • This smoothens the edges of the selection. • Change the number to adjust the amount of feather in

pixels.

Move Tool (V) • Allows you to move the content of a layer or selection

• Left-Click + Drag to move something – If nothing is selected, it will move the entire content of the active layer. (A)

– If something is selected, it will cut and move the content of the selection. (A)

• (Be careful, as this doesn’t create a new layer with the cut content)

– Hold Alt: Drag and duplicate the content.

– Hold Shift: Constrains movement of content to 45 degrees increments. (B)

B A

Cropping • Cropping takes the active selection and crops the picture to create a smaller picture around

this selection. The result is always a square or rectangular picture though.

• To crop you can either use the Crop Tool (C) and draw around the area of the picture you want to keep or make a selection in any way you want and use the Image Crop command.

Image Crop

Transform • With a selection active, you can apply a

transformation to its content. • In Edit Free transform (CTRL-T), you can

perform basic scaling and rotations. • In Edit Transform, you have a variety of

possible transformations you can apply to the content of a selection.

• You can use the SHIFT and ALT keys to experiment with those transformations.

• When you are done with your transformation, press ENTER to apply it. • Scale – Basic scaling of the selection

• Rotate – Basic rotations

• Skew – Allows you to drag the handles of the transformation rectangle along their axes

• Distort – Allows you to drag the corners of the transformation rectangle freely.

• Perpective – Forces you to move the handles to create perspective effects.

• Warp – Turns the selection into a 3 x 3 grid of which you can drag the lines as curves.

• Rotate 180º – Does a perfect 180º rotation with the content of the selection.

• Rotate 90º CW – Does a perfect 90º clockwise rotation with the content of the selection.

• Rotate 90º CCW – Does a perfect 90º counter clockwise rotation with the content of the selection.

• Flip Horizontal – Flips the content of the selection horizontally

• Flip Vertical – Flips the content of the selection vertically.

Image Size • Image Image Size (ALT + CTRL + i) allows you to change the size and resolution of the entire

picture. It doesn’t crop the canvas. • This is mostly used to increase or decrease the size and/or resolution of the entire picture to save

more eff icient f iles or make various adjustments • Edit the numbers in “Pixel Dimensions” to change the size of the picture. • Edit the resolution under “Document Size”. • “Constrain Proportions” automatically adjusts the size to keep the proportions intact. • “Resample Image” has 2 useful options:

– Bicubic (best for smooth gradients) - Resizes the picture and smoothens it out. – Nearest Neighbor (preserve hard edges) - Resizes the picture and keeps pixels and hard edges intact without smoothing.

(Useful to scale up pixelated images to keep them pixelated)

Canvas Size • Image Canvas Size (ALT + CTRL + c) allows you to increase the size of the picture by adding

empty areas around the main picture. You can also decrease the size of the canvas but the picture will be automatically cropped.

• Changing the Canvas size doesn’t change the content of the picture, only the size of the Canvas (or workspace). If you decrease the size of the canvas, the picture will be clipped.

• (A) – The current size of the picture

• (B) – The new size of the picture. You can change the unit used. (Pixels, Centimeters, etc.)

• (C) – You can change in which direction the change will be applied. (See below)

• (D) – You can change what is applied to the new area. (Background Color, Transparent areas, etc.)

A

B

C

D

Stroke Selection • Edit Stroke allows you to stroke a line along the edges of a selection.

• (A) – The width of the line that is going to follow the selection’s edges.

• (B) – The color of the line.

• (C) – Determines if the line is going to be completely inside the selection, along the middle of its edge or completely on the outside of it.

• (D) – Allows you to change the blending mode and transparency of the line.

A

B

C

D

Rotate Canvas • Use Image Rotate Canvas to apply a variety of changes to the entire picture.

• Rotation (180º, 90º Clockwise and 90º Counter Clockwise)

• Arbitrary – Allows you to determine the exact angle of rotation.

• Flip Canvas Horizontal – Flips the entire picture horizontally.

• Flip Canvas Vertical – Flips the entire picture vertically.

Grid • Use View Show Grid to display the grid.

• Use View Snap To Grid to make the tool cursors snap to the grid.

• Use View Snap to quickly turn the Snapping on and off.

• You can edit the grid settings in Edit Preference Guides, Grid & Slices (see below) – You can change the color and the dimensions of the grid under the Grid menu. (A)

A

Custom Brush Shapes • You can create your own brush shapes in Photoshop and it

can be a very useful feature.

1. (A) – First draw your new shape over a transparent background and make a selection around it. If you draw with different tranparencies, the new brush also takes those into account.

2. (B) – Go to Edit Def ine Brush Preset…

3. (C) – Name your new brush shape and press OK.

4. (D) – Right click on the canvas with the brush tool to select a brush shape. Scroll down the list to select your new brush shape

5. Draw using your new brush shape!

A

B

C

D

Brush Dynamics • Use Brush Dynamics in the Brushes window (F5) to draw in a variety of ways and get various effects

when drawing with the brush or eraser. • Check the different effects to apply all the ones you want at the same time.

Spacing In Brush Tip Shape, a useful feature is that you can increase the Spacing between brushes strokes to draw a dotted line.

Shape Dynamics In Shape Dynamics you can play around with the Size Jittter, Minimum Diameter and Angle Jitter to make the brush strokes vary in size and angle and create nice particle effects.

Use this in conjunction with Spacing & Scattering for more variety.

Scattering Scattering allows you to stamp brush strokes all around the cursor instead of drawing exactly where you put the cursor.

You can play with the distance and with the count.

Other Dynamics A useful feature in Other Dynamics is the ability to play with the Opacity Jitter, which applies a random opacity to your brush strokes.

Adjustments • The two Adjustments tools I use the most are

– Image Adjustments Hue/Saturation • Change the hue and saturation of a picture or the content of a selection.

– Image Adjustments Levels • Change the levels of Shadows, Mid-Tones and Highlights of a picture or the content of a selection.

Play with the sliders to change the hue of the picture or hyper- saturate or desaturate the colors.

Play with the sliders to increase or decrease the levels of the Shadows, Mid-Tones or Highlights.

Hue Saturation Original Greater Highlights Original

Automated Actions

• In the New Action dialog window (On the right):

– Name your new action

– Assign a keyboard shortcut to it (Here is it Shift + F12)

– Click Record

• You can then see at the bottom of the Actions Window that the Record Button turns red: ( )

• Now, carefully perform all the actions you want Photoshop to perform whenever you press the specif ied keyboard shortcut.

– In this example, you would perform: • Image Adjustments Hue/Saturation

• Completely desaturate the picture, Confirm

• File Save

• File Close.

• Once you are done, click the Stop button: ( )

• Now, everytime you use the keyboard shortcut, it will perform those actions.

– You can see your newly recorded action in the Actions Window list.

– You can even see all the commands Photoshop will perform when you use that action.

The Actions Window

• If you have a repetitive task you have to perform multiple times on multiple f iles for example, you can create a custom command (Action) that will perform those tasks instanttaneously with a simple keyboard shortcut.

– An example of such a command could be to desaturate the colors in 30 pictures and then save and close them.

• Display the Actions Window by going to Window Actions or pressing ALT + F9.

• In the Actions window, click the Create New Action icon. ( )

Tips & Tricks • If you draw but no color is applied, make sure that you are on the correct

layer or check that your are not drawing outside of an active selection.

• Save your pictures in PNG format with transparency so that when you paste them into your documents you will see the background of the document through the transparent parts of your pictures.

• When you create a new picture, you can set the background to transparent instead of White or Background Color. (A)

• If you have loaded an existing picture but it has no transparent background, duplicate the Background Layer and hide the original Background Layer

• Name your layers by double clicking on their names to organize your work.

• You can also organize your layer in folders.

• Always keep a PSD f ile of your work in case you have to edit it. A checkered background means it is transparent.

A

• If you think a JPG is too big (in terms of data), you can reduce its compression rate when you save it.

• You can minimize windows within PhotoShop. • If you Undo the f irst action performed after

switching active layer, Photoshop switches back to the previous active layer so watch out for that.

• The Gaussian Blur f ilter is most useful to add polish to otherwise pixelated or low-resolution scaled-up pictures.

• To draw color over a black & white sketch, put the sketch on a layer and set the layer to the Multiply blending Mode, then draw the color on a layer under it.

Have fun!

Using Adobe PhotoShop CS3 for Game Design Documentation

Documents

Transcript of Using Adobe PhotoShop CS3 for Game Design Documentation