Workbook9 by English School Los Olivos

Year 9 Computing

student

GameMaker A beginner's guide to making your first game in Game Maker 7.

One of the most basic and classic computer games of all time is Pong. Originally released by Atari in 1972 it was a commercial hit and it is also the perfect game for anyone starting to learn game design. The game has only few elements. A couple of bats, a ball, score counters and a playing field. Let's make this game.

In this tutorial we will primarily be working with these three components of Game Maker: o o o

Sprites Objects Rooms

Now we need to create the graphics for the game. The first thing is the player controlled bats and here we can use Game Makers built-in image editor. It handles this sort of thing without a problem. Flat two dimensional images in games are called Sprites so we need to use Create a sprite. This is done by clicking on the red colored pacman icon.

3. Once you click the red pacman icon you will be shown the Sprite Properties window. Here all kinds of settings for a new sprite is set and 2

later saved. The first thing we need to do is to name the piece of graphic. Go ahead and delete the sprite0 text and name it bat instead. Note: It is very important to use good names for everything when making games or you will eventually lose track of the many small pieces. While it is possible to load graphics made ready elsewhere with the Load Sprite button we want to create our bat inside Game Maker. Therefore you should now press the Edit Spritebutton.

4. You are now shown a window called Sprite Editor but this is actually not where the bat is made. Double click on the square green image 0.

5. Now you are in the built-in image editor. Here a square green 32 by 32 pixel image is automatically shown. We can easily turn this into a bat by resizing it. Select Transform and then Resize canvas.

6. Deselect Keep aspect ratio and then change Width to 8 pixels instead. Then click OK.

7. A few steps will now finish the bat. First you need to select the color white. Second, select the Paint bucket tool. Third, use the paint tool on the green bat which then turns white. Fourth, click the green check sign to accept all changes.

You are now back in the Sprite Editor window. Here you also need to click the green check sign to save the bat. 8. Back in Sprite Properties window we can now see the saved version of the bat. There is only one thing left to do. Uncheck Transparency. This will make sure the bat is actually shown in the game. Note: Transparency is actually useful in many other situations where non-rectangular sprites are needed. If checked Transparency will make all colors similar to the pixel in the bottom left corner of the sprite impossible to see in the game.

When done click OK. 9. Now that the bat sprite is made we need a ball sprite. Many of the following steps will recreate parts of what you did with the bat sprite. Once again press the red pacman icon to Create a sprite. In the Sprite Properties window name it ball and click the Edit Sprite button. 10. In the Sprite Editor double click on image 0 to edit it. 5

11. Use Transform -> Resize Canvas... and set the size to 16 pixels in both height and width. This is the perfect size for the ball. Now to draw the ball you must first select a color for the ball. Second, select the ellipse tool. Third, choose the filled style. Fourth, draw the ball on to the image canvas. It can be a help to zoom in with the magnify tool.

Once this is done click the green check icon to accept all changes. Also click the same check icon back in the Sprite Editor window. 12. You are now back in the Sprite Properties window. It should look like the image below.

This time Transparent should be left checked so that Game Maker automatically removed all the unwanted pixels surrounding the ball. Click OK to finish this sprite. 13. We now need a wall sprite. This will be used for the top and bottom of the screen so that the ball can bounce of it. Go ahead and click Create a sprite. This time we will use Load Spritesince Game Maker actually comes with a 32x32 pixel wall sprite perfectly suited for our Pong game.

You can find this sprite under the folder various located in Programs\GameMaker7\Sprites\ When you have it loaded your Sprite Properties should look as the screenshot. Click OK to save this sprite. All the basic graphical elements are now done. We will return to do more sprites later but these are what we need to get the game running.

14. The next big part of this is to make something useful out of our sprites. By themselves they cannot do anything so some logic needs to be added to them. This is done with objects which is where sprites are tied together with commands. All this is done with graphical icons and does not require any programming knowledge. Our first object will be a bat. The easy way to start a new object is by clicking the blue ball icon in the menu.

This tells Game Maker to Create an object. 15. This looks a bit like when we worked with the sprites but there are important differences. First you should name your bat. In the image you can see it is called bat_right. This is because we will need two bats. One for the left side and one for the right side. Let us start with the right side.

To activate the bat sprite for this object you need to click on the small selector icon below the name of the object. A small menu will appear once you do so and you can now select the bat sprite. 16. Time to get some game logic into the bat. This is handled by Events and Actions. EachEvent can contain a series of Actions. Click Add Event. This will show a small menu called theEvent Selector.

In the Event Selector click Keyboard and select Up. Note: be careful not to select Key Press or Key Release in the Event Selector. This will have unwanted effects for controlling the bat.

This defines that the game will wait for the arrow key Up to be pressed. 17. Now we will add the first Action. This action will move the bat upwards. 9

Locate the Jump to position icon in the list of available actions. Drag this with your mouse into the Actions area.

When you let go of the mouse a new window is shown. Here we can define how much the bat moves per keypress. It needs to move up but since Game Maker is in-reverse on the y-axis when handling movement it needs to be set to -7 instead of just a positive value. We also need to check the Relative marker so that the bat is moved -7 according to itself and not the fixed coordinates of the room.

Click OK when you have this set. What will happen now is that the game will detect whenever the Up key is pressed down (the event) and therefore move the bat up (the action).

18. The up key is set but the down key must also be set. To do this you should once again click Add Event and select Keyboard in the Event Selector. The difference is that this time you select Down instead. Once this is done you can drag the Jump to position icon into Actions.

In the Jump to position menu that now appears we will now define that the bat should move 7 in the y-axis. Since it was reversed this means that it will move downwards. Remember to once again check the Relative marker. Click OK to finish and OK once again in the Object Properties window to save and close it. 19. It is finally time to make something happen in this game. The bat_right object should be able to move up and down so this should be tested. To do this we need a room. This is basically what many know as a level in computer games. Rooms in Game Maker contain all theobjects that make up a level. A room is created with the white box icon right next to the blue ball icon we used for objects. 11

Once clicked it will create the room in a new window called Room Properties.

In this window we can place our bat_right object. Since this bat is controlled by the up and down keys on the right side of the keyboard it is a good idea to place the bat in this side of the room. Place bat_right by clicking in the wanted spot. By keeping the mouse button down you can drag it around. If the bat needs to be moved later you can right-click on it to delete it and then you need to place it again. 20. The game needs to be tested now. First save your work by clicking the diskette icon.

It is a good idea to save your game after making changes so that you can return to an older version if something goes wrong. To run the game click the green play button. 12

It should look similar to the following image.

Try using the up and down keys on your keyboard. The bat should be able to move in the right directions. If it does not then maybe the Relative marker needs to be checked or the y-axis values are flipped. Return to step 16-18 to check everything is done correctly. Also notice that you are able to move the bat of the screen. This is something we will now fix. Press the Escape key to exit the game and return to Game Maker. 21. We will now create the wall object. Click on Create an object.

Name the newly created object wall and use the wall sprite from the selector menu. 13

This is all that needs to be done for this object. Click OK to save changes. 22. To make sure the bat does not go through the wall and exits the playing field we need to edit the bat_right object. Here we need to add a new event called Collision. This collision should take place between the bat and the wall.

When done drag the Bounce icon into Actions. In the Bounce window that will now appear you should then select all objects with the selector button.

Click OK in the Bounce window when done. 23. Before testing the new collision we need to insert walls into our Room. Doubleclick on your Room to open it.

For the easiest way to insert the wall object we can change the grid size. Objects automatically snap to the grid and since the wall is 32 by 32 pixels we will set the grid to this size.

Now we can insert all the wall pieces onto the playing field. The easiest way is to hold down the Shift key while holding down the left mouse button. This way you can drag the mouse over the wanted areas and place the walls correctly. See image below. Remember that if you want to delete a piece of wall then simply right click on it. Note: if your wall object is not selected then you can do so in the selector menu circled red in the image.

24. Save your work with the diskette icon and click on the green play button to test the game.

If the game runs correctly then the bat should not be able to go through the walls. If it does go through then go back to step 22 and check if everything was set right. Especially that collision in the bat_right object with the wall is set to all objects. 25. Time to create the second bat. With bat_right done this is easy when you right click on this object and select Duplicate.

Name this new object bat_left and click on the Up event and then select Change.

This makes it possible to change the key event while not having to change the Actions. In the Event Selector window that now is show you should select Keyboard -> Letters -> W.

When this is done repeat the process for the Down key event but select S as the new down key instead. The end result should look like this.

26. Open your Room again. Select the new bat_left object and insert it in the left side of the playing field.

Save your work and click the green play button to test the game. The new bat_left should behave exactly like bat_right only that it is controlled by W and S instead. 27. For this game to come alive we need the ball. Making it is easy. Click the blue ball icon to create a new object.

Object Properties will now be shown. First, name this object ball. Second, select the ball sprite for it. Third, add the event called Create. Fourth, drag the Move fixed icon into Actions.

A new window called Moved fixed will appear. It should be modified so that all the diagonal arrows are clicked and Speed is set to 8. This speed can always be modified later if the ball should move faster or slower. Click OK when done.

28. With ball movement in place we need collision or the ball will continue through objects it encounters. Click Add Event and select Collision. Start with bat_right.

Once the Event is set you can drag the Bounce icon into the Actions area. In the new Bounce window change against to all objects.

Click OK when done. 21

29. This process of adding collision should also be done with bat_left and the wall. Go ahead and do this. The end result should like like the following image and have Bounce set in Actionsfor all of them.

Click OK when done to save all new settings for the ball object. 30. Open your Room to insert the ball. It might help to set the grid back to 16 by 16 so that you can place it precisely in the center of the room.

Save your work and run a test game to see if the ball is moving. You must act quickly if you want to save the ball from leaving the playing field. If the ball does not have collision with any of the bats or the wall take a closer look at step 28 and 29 to see if something in your game is missing. 31. To keep the ball in the game some goal objects are needed. These objects are going to be invisible to the player but are highly important behind the scenes for the game to know when a goal has been scored.

Create a sprite, name it goal_right and use the standard 32x32 pixels in size. DeactivateTransparency and click OK.

Do the same thing, only this time making it yellow and naming it goal_left. You should end up with the following new sprites.

32. Add both of the new sprites to new objects. Make sure to deactivate Visible so that the player cannot see them in the game.

You will end up with the following new objects.

33. Now enter the ball object by double clicking on it. We need to add collision between the ball and the new goal objects. First add a collision event with goal_right and then drop the Jump to start position into Actions.

Then go into the score tab marked with red on the image below and drag Set Score intoActions. In the new Set Score window you need to enter 1 (one) into the text area and clickRelative so that the 1 point is added on top of the current score every time a goal is scored.

Also add a Sleep action found under the Main2 tab. Set it to 2000 milliseconds. This will pause the game for two seconds every time a player scores.

Click OK when done. 34. The process will now be repeated for the collision with goal_left. The difference is that since Game Maker only has one built-in score system we will cheat a bit and use the Lives system as a score counter for this goal. So add a collision event with goal_left and set Jump to start position as the first action. Then go into the score tab and drag Set Lives into Actions. Finish by adding the Sleep action and setting it to 2000 milliseconds.

Click OK to save all changes. 35. Go into your Room and insert the objects goal_left and goal_right as shown in the image below.

Save the changes and run the game. Notice how the ball returns to its starting position when a goal is scored. 36. The last thing this game of Pong needs is a set of score counters. The underlying setup has already been done in the last few steps so it only needs the finishing touches. Create a new object and name it controller. This is an object that handles the score counters. Add a Create event and drag Set Score and Set Lives into its Actions. Leave the settings for these on their standard values. This will set the scores to zero on the start of every new game.

Now add a Draw event. This will draw the score counters on the screen. Drag the event Draw Score into its Actions and set it to x:40, y:40 and name the caption Player left: Click OK when done.

Then drag Draw Lives into its Actions and set it to x:450, y:40 and name the caption Player right: Click OK when done.

Click OK to accept all changes for the controller object. 37. Open your Room and insert the controller object somewhere in it.

Having the controller placed somewhere will make it active and ensure that it can do what it is supposed to.

Accept the changes for the Room and remember to save your game. 38. Run the game. It should now look like the image below and have working score counters.

If the score counters are placed wrong then go back to step 36 and change the x and y values in the controller object to fine tune their positions. If the score counter sprites, the yellow and green squares, are visible in the game then go back to step 32 to disable Visible.

So remember, these are the main things in your game: 

rooms: the scenes (levels) in which the objects live



backgrounds: the images used as background for the rooms



objects: the things in the game



instances: one particular occurrence of an object



sprites: images that are used to show the objects



sounds: these can be used in games, either as background music or as effects



scripts: small pieces of code that can be used to extend the possibilities of your game.

Task: match the definitions on the right with the words on the left.

Adobe Photoshop

Editing an Image Once you have an image created or opened, you can edit or draw on top of it with Photoshop’s “Tools” window, which is the long, thin window that is automatically open on the left side. Here is a break down of all the tools contained on this bar:

1. Marquee Tool – used for selecting areas of an image 2. Move Tool – used for moving an image to a different area of the canvas 3. Lasso Tool – used for selecting areas of an image that may not necessarily be comprised of straight lines 4. Magic Wand Tool – used for auto-selecting large areas of an image that are similar in color 5. Crop Tool – used for reducing the image to a certain area (“cropping”) 6. Slice Tool – used to “slice” an image into different sections; generally used for the creation of images for a web page design 7. Healing Brush Tool – used to fix imperfections in an image by copying other pixels from the image. The Healing Brush tool will also match the texture, lighting, and shading to perfectly match the are you are fixing 8. Brush Tool – used with the mouse 9. Jump to ImageReady – used to easily launch the ImageReady program

Cropping an Image If an image is too large and you would like to cut it to just focus on one section of the image, you can “crop” it to that size and area. Select the “Crop” tool, and click and drag around the area you want.

You can resize the area (or rotate it) with the mouse by clicking any of the corners. When you’re done, just click over to any other tool and a window will appear asking you if you’d like to crop the image. Click yes, and the image will be reduced to the area you’ve specified.

Resizing an Image If you don’t want to crop your image (meaning you want the ENTIRE image, just at a smaller size), you can resize your image to any dimensions you wish. Select “Image Size” from the “Image” menu.

The default in Photoshop is to keep image resizing at “Constrain Proportions.” This means that if the height is changed, the width will be changed at the same ratio. This keeps your image looking approximately the same, only at different sizes. If you wish to change this, just un-click the “Constrain Proportions” check box at the bottom of the “Image Size” window. You can

change the image size either by

pixels or

percentages. Use either you

wish to

either enlarge or reduce the size

of your

image (keep in mind that

enlarging

images will reduce the quality).

Moving an Image You can move an image to any area of the canvas you wish. Select the “Move” tool, and click and drag the image to any area of the canvas you wish.

Selecting / Deleting a Part of an Image Choose the “Marquee” tool, and click and drag around a part of an image. A rotating, dotted line will surround that area. To delete this section that you’ve selected, hit the “Delete” key on your keyboard.

The “Magic Wand” can select a larger area of an image by grabbing similar looking pixels and grouping them together. Select the Magic Wand tool and click an area of an image. It will select a large portion of the area which you can move, delete, etc.

Adding Text Click the “Text” tool on the tool bar and click in your image where you’d like to add text.

The text will appear on top of the image, and it will be on its own new layer. You can change the font, style, size, anti-aliasing, and color of your text on the menu directly below the main Photoshop menu.

Altering Your Images Photoshop’s most powerful aspect is its ability to edit and manipulate images easily and with professional quality. The second section of the tool menu contains tools that specifically help you to edit your images. When you click any of these tools, Photoshop’s sub-main menu will change to reflect new options available to you. Most will look something like this, or very similar:

1. Name – The name of the tool you’re using. 2. Brush Picker – Here you can select the diameter, hardness, and spacing of the brush / tool you are using. 3. Mode – Effect mode 4. Opacity – The transparency of the tool’s effects. 5. Flow – The flow rate of the stroke.

6. Airbrush – Click to enable airbrush capabilities with the tool. 62

Brush / Pencil Tool The Brush tool can be right-clicked to also show the Pencil tool as an option. Both are very simple tools that allow you to directly draw on top of an image. Select a color with the Foreground Color option on the tool bar, and select a brush size from the tool’s sub-main menu, above. Click and drag across an image to draw on top of it.

Clone Tool The Clone tool will copy pixels from one part of an image and copy them to a new part of the image. The Clone tool is most useful in situations such as removing blemishes from a face in a photograph, clearing a few clouds out of a bright blue sky, etc. Choose the Clone tool. Hold the “Alt” button on your keyboard, and click in an area of the image that you’d like to copy. Now click elsewhere in the image, and move the cursor around. The image will “clone” itself to that second area.

Eraser Tool The eraser simply deletes sections of an image. Click the Eraser tool, and click and drag around your image. The eraser will “erase” the image to what’s set as the Background color.

Gradient / Paint Bucket Tool The Gradient tool can be used on its own, or right-clicked to also select the Paint Bucket tool.

A gradient is a horizontal fading of colors, most commonly used in the creation of banners for web pages. Select the Gradient tool, and go to the sub-main menu for a drop-down of available gradients. The default is the most common.

Once youâ&#x20AC;&#x2122;ve selected which gradient you wish (and a color in the Foreground color tool), just click and drag across your image. The direction you drag (left to right, right to left, etc.) determines the flow of the gradient.

The Paint Bucket lets you

fill in a large section with

the same color. Select the

Paint Bucket by right-

clicking the Gradient tool,

and click in an area of

your image. It will fill with

the color selected as the

Foreground color.

Blur Tool The Blur tool is useful for covering up small distortions in an image by blending the surrounding pixels together. To blur something, select the Blur tool, and click and drag around the area you wish to blur.

Rotating an Image You can rotate and flip your image in any direction you wish. In the “Rotate Canvas” list under the “Image” menu, there’s a wide variety of options to choose from. If you select “Arbitrary” for a rotation, a new window will appear asking you for the direction (clockwise or counterclockwise) and the degree of the rotation.

Drawing Shapes While Photoshop’s main power is in manipulation of images, it’s also possible to draw your own (as seen with the pencil and pen tools). The Rectangle tool (and all of its sub-tools) allows you to draw shapes on a canvas. To draw a simple rectangle, pick a Foreground color (which will be the fill color for the shape), select the Rectangle tool, and click and drag on the canvas until it’s the size you wish. Note that drawing a shape will create a new layer. You can draw a wide variety of shapes with the Rectangle tool and its sub-tools, including the Custom Shape Tool, which gives you even more options. Select the Custom Shapes Tool (by right-clicking the Rectangle tool), and look through your options in the drop-down box from the sub-main menu. Your choices include word bubbles, arrows, and even shapes that don’t fill themselves in with a color.

Eyedropper Tool When working with images, you may find that you want to reselect a color you’ve used, but aren’t sure exactly what color it is. You can use the Eyedropper tool to reselect that exact color for you. Select the Eyedropper tool, and click anywhere on an image that has the color you want to select.

The Foreground color will change itself to the color you’ve selected.

Zoom Tool If you find that you need to zoom in or out of your image for any reason (for example, to be more precise in deleting areas), you can use the Zoom tool. Click the Zoom tool (it looks like a magnifying glass). If you click once on your image, it will zoom to double its size (100% to 200%, and so on). If you right-click, you can select the “Zoom Out,” which will reduce its size. Note that this doesn’t actually change the size of the image. It simply changes your view of the image on the canvas.

Brightness & Contrast Sometimes when working with images, you may need to adjust the brightness and/or contrast (especially with scanned images). Photoshop makes this very easy. Select “Brightness/Contrast” from the “Adjustments” >> “Image” menu.

A new window will appear allowing you to slide the brightness and contrast any way you wish.

The Brightness/Contrast command lets you make adjustments to the overall tonal range of an image. Adjustments made in here will affect every pixel in your image, unless a selection is made beforehand.

Filters Photoshop has a wide variety of filters you can apply to your images. They include obvious ones such as blurring and sharpening, but also very advanced ones such as ripples, distortions, and rendering clouds. You can browse through the available filters by selecting the Filters menu. Play around with the available filters, and remember that you can undo your actions at any time with the History window. Digital Nip/Tuck Photoshop is probably the cheapest alternative to plastic surgery possible. Unfortunately, Photoshop is only helpful in computer land. In this tutorial, I'll show you how to do your own plastic surgery with a nose job to up and coming MTV starlet, Ashlee Simpson.

This is a quick and easy way to reduce the size of body parts. In this example we will reduce the size of this girl's nose. 1. Select the Lasso Tool L. 2. In the Options Bar, set the feather to something like 10px. Quick tip: Pressing the Enter key (next to your number pad) quickly selects the Feather Box in your Options Bar. 3. Draw a wide selection around the area you want to modify. In this case, it's Ashlee Simpson's nose country. 4. Go up to Filter>Liquify Ctrl + Shift + X. The Liquify dialog box will open, and you will see your selection with the Quick Mask red around it. 5. Now you can select the Pucker Tool S. Use the tool right at the inside edge of the area you want to shrink. It changes pretty quickly. If it's too much, lower the Brush Pressure in the Tool Options to your right.

Once you get your desired reduction, press OK

Matrix effect This is a very popular special effect inspired the famous movie called The Matrix . Let's see how to create it. Step 1: Start a new document of size 400x400 pix make sure u select the background as white and press 'd' to reset the colour to the photoshop defaults i.e. black foreground and white background. Step 2: Now let us add some falling grains to the image for that go to Filter>Texture>Grain and add the settings as u will get this

Step 3: Let's add some glow to it so what it shines more 70

Filter>Atristic>Neon glow after adding u will get this

Step 4: now it look a bit similiar isn't it. Let's make it a bit sharper so it looks better. Select Filter>Sharpen>sharpen More and our matrix effect is ready. here is what i got.

Create a 3D Well 1- Create a new image and fill the background, Alt + Backspace w/ a light colour. 2- Next go to Filter - Stylize - Extrude, and enter settings like below. You can try diferent settings too.

3- Now go to Filter - Distort - Polar Coordinates. Make sure you click rectangular to polar:

5- Now apply some lighting effects (Render > Lighting effect), or anything you feel will enhance your image: That's it:

Making Selections | Quick Mask 1. Download the images from the Work Files page on my web site. You will need to get the image called “cell_phone.jpg” and “SilverLake_Blurred.psd”. Click on the link for the image, once the image is fully loaded, right click (Control click on a Mac) then download the image.

2. Go back to Photoshop 3. Open “cell_phone.jpg”. Go to File > Open and then browse for the image, it’s most likely on the Desktop unless you specified somewhere else to save the files. We will open the other image later. 4. Choose the Magnetic Lasso Tool. The Magnetic Lasso Tool clings to the edge of a change in tone as you drag your cursor along the edge of the item you are trying to select. Therefore, it works best where you have good contrast between the subject and it’s background, This tool very rarely gives you perfect results, but it’s a fast way to get a semi-decent selection that we will modify using the quick Mask. 5. This is what my Options Palette looks like.

For now make sure that you have the New Selection setting clicked and feather is set to 0. The New Selection button is the first of that set of four under the word Photoshop in the menu. The other three settings in this palette are all default settings and to keep it simple, they control how the tool clings to the edge. The Options Palette changes from tool to tool. It is a palette that referred to as context sensitive, or contextual. In plain English this means it changes depending on what tool you have selected.

6. Start dragging your cursor along the edge of the phone, whenever you get to a severe corner or change in direction click to hold the selection in place. Be as accurate as you can but don’t be to concerned if you miss a bit. Remember the point of this exercise is to use the Quick Mask to clean up an imperfect selection. Once you get back to the start it should automatically change into the familiar “Marching Ants” if not, double click to finish the selection. 7. Click on the “Edit in Quick Mask Mode” icon at the bottom of the Tool Palette. Once you have clicked on the Edit in Quick Mask Mode icon. The area around the selection will be tinted red. This may vary is the default settings have been changed. 8. Double click on the Quick Mask icon to open the Quick Mask Options dialog box. Here you see you can swap between masked areas and Selected Areas. You can also change the color and opacity of tha Quick Mask. Click OK. 9.

Choose the Zoom Tool (Z). Drag around an area in the mask that needs to be edited.

10. Choose the Brush Tool (B). Then choose the brush size. Check the Options Palette to make sure that the painting mode is set to normal, Opacity and Flow are both on 100% 11. Paint to add to the selection and subtract from the selection. Black ads to the mask (the red film) or deducts from the selection, white removes from the selection or ads to the mask (the red film).

Tip: You can toggle between Foreground and Background colors by using the X key. Also, you can change the brush size by using the open bracket and close brackets on the keyboard. 12. Move around the image to clean up all the areas that need to be fixed by using the Hand Tool. To save keep changing from the Brush Tool to the Hand Tool and back You can access the Hand Tool while on any other tool in the tools palette, except the Type Tool, by holding down the Space Bar. When you let go you will be still on the Brush Tool and you can continue to edit the mask. 13. Once you are happy that you have cleaned up your selection using the Quick Mask completely, click the Quick Mask icon. Now you will have a selection again.

Now that we have our selection lets use it to cut the image out and drag the image into the blurred image that you also downloaded at the start of this worksheet. 14. If your layers Palette is not open go to Window > Layers to open the Layers Palette. 15. Double Click the Background layer and then in the dialog box that opens simply click OK. 16. Apply a Layer Mask by clicking on the Layer Mask icon at the bottom of the Layers Palette. Your layers will look like the screen capture (see screen capture). 17. Open the image that is called â&#x20AC;&#x153;SilverLake_Blurred.psdâ&#x20AC;? that you had downloaded earlier. Go to File > Open (Command O, Control O on PC). Then Click back into the image that you just work on with the phone. If you need to; move this phone image out of the way so that you can see the Blurred image. 18.

Choose the Move Tool and then drag the image of the phone into the blurred image. When you drag the image into the other image you may get a Paste Profile Mismatch warning, if so click OK.

19. Still on the Move Tool drag the image to the left hand side so that the hand is coming out of the bottom left corner of the image. Congratulations! You managed to make a selection using the Magnetic Lasso convert it into a Quick Mask to edit that selection. After that you added a layer mask hiding the background and dragged the image into another document making a simple composite. Practice makes perfect try going through the exercise again without looking at the worksheet. Once you feel comfortable trying using this technique on other images. Final image

Exercises (need folder with files) http://distans.svefi.net/exercises/index.htm Exercise 1 This exercise can be solved using the following functions: Selection Tools, Copy, Cut, Paste, Move Tool

Copy the pictures in paintings.jpg and paste them into wall.jpg.

1. Save the pictures paintings.jpg och wall.jpg to your student folder. See the chapter Steal a picture from the net if you're unsure of how to do it. 2. Open the picture paintings.jpg in Photoshop. Use the rectangular selection tool to select the square painting, and copy it. 3. Open the picture wall.jpg in Photoshop (without closing paintings.jpg). Paste the square picture onto the wall. Once you've pasted it there, use the Move Tool to place the painting near the right-hand edge of the wall. 4. Use the elliptical selection tool to select the round painting in the picture pictures.jpg. Cut it out. 5. Paste the round painting into the picture wall.jpg. Use the Move Tool to place it near the left-hand edge of the wall.

Exercise 2 This exercise can be solved using the following functions: Selection Tools, Copy, Paste, Paste Into, Move Tool

Copy the pictures in framethis1, 2 and 3. Use the function Paste Into to get them into the empty frames.

1. Save the pictures framethis1.jpg, framethis2.jpg, framethis3.jpg and emptyframes.jpgto your folder. 2. Open the pictures you just saved in Photoshop. 3. Use a fitting Selection Tool to copy a picture from one of the framethis-pictures. When you've copied it, Select the empty space inside one of the borders in the picture emptyframes.jpg. Use the function Paste Into to paste the picture you just copied into the frame. 4. Use the Move Tool to move the picture around inside the border until it fits. 5. Repeat until all the empty frames are filled.

Exercise 3 This exercise can be solved using the following functions: Lasso- and Polygonal Lasso Selection Tools, Copy, Paste Into, Move Tool, Zoom Tool, Transform

Use the Lasso- or Polygonal Lasso Tool to Select and copy the dog. Paste the dog into the doghouse..

1. Save the pictures dog.jpg and doghouse.jpg to your folder. 2. Open the pictures in PhotoShop. 3. Use the Lasso- or Polygonal Lasso Selection Tools to select the dog. Be careful around the edges. You will probably have to use the Zoom Tool. Read more about how to effectively use these selection tools in the Tools chapter in the compendium. 4. When you've Selected the dog, copy it. 5. Use the Polygonal Lasso Tool to create a selection in the opening of the doghouse. Use Paste Into to put the dog in there. Move the dog around with the Move Tool. Use Transform Scale to shrink the dog a bit. Read more about how to do this in the chapter Transform in the compendium.

Exercise 4 This exercise can be solved using the following functions: Selection Tools, Copy, Paste, Paste Into, Move Tool, Transform, Opacity

Copy the ghost and paste at least ten copies of it into the castle picture. Use the Transform function on each ghost, and give the layer of each ghost a different Opacity.

1. Save the pictures ghost.jpg and ghostcastle.jpg to your folder. 2. Open the pictures in Photoshop. 3. Use a Selection Tool to Select the ghost. Copy it. Paste at least ten copies of the ghost into the ghostcastle picture. Feel free to use Paste Into if you like. Use the Move Tool to place each ghost where you want it. 4. Use the Transform functions to change the way each ghost looks. 5. Give each ghost's layer an Opacity that's less than 100%.

Exercise 5 This exercise can be solved using the following functions: Quick Select Tool (or Magic Wand Tool), Invert Selection, Copy, Paste

Use the Selection Tool Quick Select to select the black area around the guitar. When you've selected all of it, Invert the selection. Now you can copy the guitar! Paste it onto the flowery background.

1. Save the picures guitar.jpg and flowerback.jpg to your folder. 2. Open the pictures in Photoshop. 3. We're going to select the guitar. The fastest way to do that is here is to select the black area around the guitar and then invert the selection -- to turn it inside out, so that the guitar ends up being selected while the black area becomes deselected. If you're using Photoshop CS3, try using the Quick Select tool to Select the black area around the guitar. Read about how the Quick Select Tool works in the Tools chapter in the compendium. If you're using Photoshop 7, use the Magic Wand Tool to Select the black area around the guitar. We weren't supposed to have to use Photoshop 7 when I started writing this course so I never mentioned Magic Wand Tool in the compendium, but it's fairly easy to use: click on the Magic Wand Tool in the Tool Box (it's in the same button as the Quick Select Tool, look it up in the chapter Tools in the compendium for a picture that shows you where it is). Once you've clicked on the Magic Wand Tool, make sure the value for Tolerance is more than 0 up in the Alternatives Bar -- somewhere around 20-30 would be good. Now click once on the black area around the guitar and you'll see that everything but the guitar becomes Selected (look at the edges of the picture and you'll see the selection bordering them; everything black has been selected, but not the guitar.) 4. Regardless of how you Selected the black area, now it's time to Invert the selection. Do that. Read about how in the Selection Tools Basics and Fancy Tricks section in the Tools chapter in the compendium. 5. Once you've inverted the selection everything that wasn't selected before (the guitar) should be selected, and everything that was (the black) should be deselected. Now you see how Invert works, it can be very handy! Now copy the guitar. 6. Paste the guitar into the flowerback picture.

Exercise 6 This exercise can be solved using the following functions: Paint Bucket Tool, Color Picker, Brush Tool

Use the Paint Bucket Tool to color the picture. Make sure to pick the right layer before you use the tool.

1. Save the picture colorize.psd to your folder. 2. Open the picture in Photoshop. It's in .psd-format because it consists of several layers. 3. Use the Paint Buchet Tool to color each part of the picture. Make sure to pick the right layer before you start coloring it! Read about how to pick a color under Color Picker and Eye Dropper Tool in the Tools chapter. 4. The layer "ansikte" (meaning "face") is empty. Use the Brush Tool to paint a face in it.

Exercise 9 This exercise can be solved using the following functions: Text Tool, Selection Tools, Copy, Paste, Transform

Use the Text Tool to add text to the speech bubbles. Give the text different looks depending on what they're saying. Feel free to add more bubbles if you need it.

1. Save the picture dialogue.jpg to your folder. 2. Open the picture in Photoshop. What are the men talking about? You decide! Use the Text Tool to type their dialogue into the speech bubbles. Use different fonts, sizes and colors where needed. Read how under Text Tool in the Tools chapter. Add more bubbles if you want to by Selecting a bubble, copy it, and paste it. Use the Transform function and the Move Tool to make it look like you want it.

Exercise 10 This exercise can be solved using the following functions: Transform, Move Tool, Opacity, Eraser Tool

Use the function Transform to change sizes, places and rotations of all the things in this picture.

1. Save the picture transform.psd to your folder. 2. Open the picture in Photoshop. 3. The picture consists of eight layers: seven things and one background. Your task here is to move the things around and use the Transform function to put them where you think they should be, and make them look the way you want. 4. Put the diver out in the water. Use the Eraser Tool set on a medium Opacity to make him look like part of him is below the water's surface.

Exercise 11 This exercise can be solved using the following functions: Selection Tools, Selection Types, Color Balance

Use the Selection Tools to Select different parts of the picture. Colorize the parts using the Color Balance function.

1. Save the picture color.jpg to your folder and open it in Photoshop. 2. Use a Selection Tool to carefully select the iris and pupil of an eye on the girl to the left (that's the "inside" of the eye, the ring of color and the black dot). 3. Now set the Selection Type to Add To Selection and select the other eye as well. Read more on Selection Types under Selection Tools: Basics and Fancy Tricks in the Tools chapter. 4. Use the Color Balance function to change the color of the girl's eyes. When you're done, turn off the selection by Deselecting it. 5. Repeat this procedure with everything in the picture. Use different Selection Types on your selection where it fits. When you use Color Balance, try switching between Shadows, Midtones and Highlights. This will give you some very different results.

Exercise 12 This exercise can be solved using the following functions: Crop

Use the Crop Tool to cut your pictures down to size.

1. Save the pictures crop1.jpg, crop2.jpg and crop3.jpg to your folder. Open them in Photoshop. 2. Use the Crop Tool on the three pictures to cut them the way you think they'll look the best.

Exercise 13 This exercise can be solved using the following functions: Canvas Size, Brush Tool, Eraser Tool

Increase the picture's Canvas Size -that's the area you can use tools on -and add some more things to it.

1. Save the picture house.jpg to your folder and open it in Photoshop. 2. As you can see the picture is of a remarkably pretty house, but I couldn't fit everything I wanted in it! I wanted a flag pole, a cat, the sun and some clouds, but they just didn't fit. Use the function Canvas Size to increase the picture's work area and paint the things I couldn't fit in.

Exercise 14 This exercise can be solved using the following functions: Clone Stamp Tool, Smudge Tool

Use the Clone Stamp Tool to fix up scratchy photos and pictures with similar blemishes.

1. Save the picture scratches.jpg to your folder and open it in Photoshop. 2. As you can see the picture has a lot of scratches on it. That's not good. Try to remove them by using the Clone Stamp Tool on them.. Try to make the picture look as "undamaged" as possible. A few tips here: • Use small brushes, not much larger than the scratch you're trying to repair. • Switch source often (the area you Alt-click on). • Feel free to use the Smudge Tool to smoothen out whatever sharp edges and lines that might pop up around your fixes. Remember to use small brushes here too, and keep it fairly weak, or things may come out looking a bit strange.

Exercise 15 This exercise can be solved using the following functions: The Dodge, Burn, Sponge, Blur, Sharpen and Smudge Tools

Use the Dodge, Burn, Spinge, Blur, Sharpen and Smudge Tools to make the picture look different.

1. Save the picture tone.jpg to your folder and open it in Photoshop. 2. Use some, or all, of the tools listed above on the picture. There's nothing that's in need of fixing, but you can use the tools to make the picture look better -- or just different. Try them all out to see how they work. 3. Make the background blurry by using the Blur Tool. You might have to create a Selection around the girl to make sure that she won't be affected by this. And if you create a selection around the girl you will have to Invert it so that everything but the girl becomes selected.... Desaturate the background using the Sponge Tool. Sharpen the details on the girl. Remember to take it easy here, the Sharpen tool works quick and strong and might ruin it for you. 4. Brighten the lights and deepen the shadows on her.

Exercise 17 This exercise can be solved using the following functions: The Brush Tool, the Shape Tool

Create more things in this picture using only the Brush and Shape Tools. Feel free to get more brushes and shapes that you can use.

1. Save the picture talkischeap.psd to your folder and open it in Photoshop. 2. What's the snail saying? Is he cursing up a storm or solving a math problem? Use nothing but brushes and shapes in this picture! Paint a background, but only use brushes you find in different categories. Use shapes to fill the speech bubble with fitting symbols and things.

Exercise 18 This exercise can be solved using the following functions: The Shape Tools, the Styles palette

Use only Styles and Gradients to color this picture.

1. Save the picture landscape.psd to your folder and open it in Photoshop. 2. Use only styles or gradients on each of the picture's layers. Feel free to get more gradients and styles you want to use. You add more gradients in exactly the same way you added brushes to the Paint Brush Tool: pick the Gradient Tool. Now click on the box with gradients in the Alternatives Bar. In the window that opens, click on the small, triangle-shaped arrow button. Now you should see a long menu. At the bottom of this menu you'll find different categories of gradients. Click on the gradient you want to add, and click the Append button in the box that pops up. Now new gradients have been added to the gradient window! To reset the gradients you just bring up the menu again and choose Reset Gradients. 3. Add three shapes of your own into the picture. Give them the styles or gradients you think will fit them.