Tetris Avatar--tutorial.jcwcn.com

This Photoshop tutorial will show you how to make an animated Tetris avatar. Perfect for use on forums or even to advertise a game site.

Step 1.

First, we're going to make the shapes for the Tetris avatar in Photoshop, and then we're going to load the saved PSD file into Image Ready, to animate it. When you're finished, you should have an animated GIF, looking life a mini Tetris game is being played, that you can use as an avatar.

Make 2 new documents, with first having dimensions of 75x75 and the second 7x7. The 7x7 square (image a) will be used as the building block for all the bricks in the Tetris Avatar. Fill the large image's background with black and smaller one with yellow. Select the yellow image in the layers panel and then drag it over to the larger image. The 75x75 image should now have 2 layers, and you can close the 7x7 document, without saving it because it's no longer needed.

Create a new set and place the yellow square in it. In the set, duplicate the yellow square 4 times, and make a shape like in image b). Merge the 4 duplicate square together, by selecting the first duplicate in the layers panel and then choosing Layer > Merge down. Do this until all 4 duplicates are merge into one. Ok, so you should have created your first shape, and also be left with the original 7x7 square. Use this square to create all the other shapes, as shown in image c).

Step 2.

Once you've merged all the layers to create these shapes, adjust the color of them. You can do this by selecting the shape's layer in the layers panel and then by going to Image > Adjustments > Hue/Saturation. Change the hue value to adjust the color.

Next, we're going to create the end frame of the animation that will be made of 8 shapes. The end frame needs show either the game being won of the game being lost, so that the animation can start again. For the tutorial I've chosen to show it being won. Move the green shape to the position shown in image b) and then name the layer of this shape as ?? We're going to number each shape from 1-8, indicating the order that they appear. It'll become clearer, as to why, later on when we animation the Tetris avatar. Name the blue shape's layer ?? the yellow's ?? duplicate the green shape and name its layer ??

a)		b)		c)

Step 3.

Rotate shape 4 clockwise by 90 degrees (Edit > Transform > Rotate 90 CW) and then place it as shown in image a). Duplicate the shape 3 (yellow), name it ??and then move it into the position shown in image b). Then, make another duplicate of shape 3 (yellow), name it ?? rotate it counter clockwise by 90 degrees (Edit > Transform > 90 CCW), and then put into the position shown in image c).

a)		b)		c)

Step 4.

Next, we need to place the red shape, so make its layer visible. Place it in the middle gap and name it ?? Create a duplicate of it and name that ?? Rotate ??in either direction by 90 degree, placing it flat to finish off the collective shape of a rectangle (image a). Create a border for the Tetris avatar, like in image b)

a)		b)

Step 5.

Image a) shows the layer set containing the 8 shapes you should have. Highlight the set and the right click on it, selecting Duplicate Layer Set.

a)		b)

Step 6.

With the duplicate layer set highlighted, go to Layer > Merge Layer Set, from the top menu. All the shapes, from that set, should merge together into one shape. Move that layer below the original set, like in the image below.

a)		b)

Step 7.

Make the original layer set invisible and reduce the opacity of the merged shapes to about 50%. The reason we've made a duplicate is so that, when you're animating the shapes in Image Ready, you can see where each shape needs to move. Save the PSD file and open it up in Image Ready. Right now there'll only be 1 frame (image c) .

a)		b)		c)

Step 8.

For the first frame, move the green shape (shape ?? up to the top, like in the image below.

Step 9.

Make a new frame, by clicking on the icon circled in the image shown below. To move the shape hold down the shift key, and then press the down arrow key once. Each shape will start at the top and then fall slowly, but as it moves further down, you'll need to move it towards its final position.

a)		b)

Step 10.

Again, make another frame and move it the shape down again.

a)		b)

Step 11.

With the next frame move the shape down AND left, again, by holding shift. When a shape doesn't line up nicely, like in image a), you can move it a bit extra, so that it's lined up like in image b). Make another frame or 2 for further down movements, depending on how fast you want it to fall. Remember when you player Tetris and the player presses down, the shapes fall faster! J

a)		b)		c)

Step 12.

For the avatar in this tutorial, I've used 8 frames, as you can see below.

Step 13.

Next, make shape ??visible and then repeat the steps carried out on shape ?? Continue to do the same for all the shapes until all 8 are in place. You can make all the shapes flash on and off for a few frames, if you like, to indicate that the rows in to Tetris avatar have been filled.

Step 14.

Create a blank frame at the start, and then change of each frame to have a delay of 0.5 seconds. Go to File > Save Optimized As�and then save the avatar as a .GIF.

	Step 15.
	So, there you go, a tetris avatar! You might have noticed that some of the shapes should rotate whan they come down. You can easily achieve this by going to Edit > Transform > Rotate. You can download the PSD file from < here >.

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Tetris Avatar

relation tutorial

Category

New

Hot