Web Design   Web Hosting   Photoshop Tutorials   Free Fonts   Drawing Basics  
Photoshop Tutorials - Free Fonts
[Read Me First!]
[Photoshop Tutorials]
[Canvas Tutorials]
[Corel Tutorials]
[Quark Tutorials]
[Illustrator Tutorials]
[FreeHand Tutorials]
[Drawing Basics]
[Porting Files]
[Free Fonts]
[Font Tutorials]
[Misc Tutorials]
[About Mike]
[Related Sites]

  Spinning Globe Tutorial
Part One - Making the Map Images
globe_11.gif Part One - Making The Map Images globe_11.gif

For this tutorial you will need Adobe® Photoshop® 4.0 or later to create the images. You will also need an animation program to assemble the images into an animated GIF file. Windows® users will need either Jasc® Animation Shop™ or Alchemy Mindworks GIF Construction Set™ (or some other animation program). Mac® users can use GIF Builder. These are shareware programs and may be found online. You will also need the TrueType® Webdings font installed on your computer. See the Links page for the link to obtain the Webdings font.

To make the animated globe you first need a map of the world. The one used in this tutorial is actually a character or symbol from the TrueType Webdings font. It is shown below at approximately 132 points in size. It has plenty of detail for the job. You display it by holding down the Alt key while typing 0251 on the numeric keypad.


postit.gif   Note: Mac users may have trouble finding a Macintosh version of the Webdings font. I have prepared a map image which can be used in either Windows or Mac (below).

For those who don't have the Webdings font...

Download the prepared map.gif image below, open it in Photoshop, save it as "Map.psd". Next, Click Image > Mode > RGB Color. The GIF image has a transparent background (even though it appears white).


To download in Windows®: Right click image and select "Save Image As...".

To download in Mac®: Drag image onto the Desktop.

Photoshop 4.x users:

Photoshop 4.x users will have to clear the background pixels first by following these additional steps:

A. Double-click the "Background" layer in the Layers palette. In the "Make Layer" dialog, enter a name or accept the default name (Layer 0) and click "OK".
B. Make sure the Options palette is visible (if not click Window > Show Options). Select the Magic Wand tool and set the tolerance to zero and uncheck the "Anti-aliased" check box in the Magic Wand Options tab of the Options palette.
C. With the Magic Wand click anywhere in the background. Next click Select > Similar to select all the background pixels.
D. When all the background pixels have been selected, press the Delete key or click Edit > Clear.

Then skip to step 6 below.

(Users of Photoshop 5.0 and up won't have to prepare the image with steps A - D above because these more recent versions support background transparency when opening GIF images).

For those who do have the Webdings font...

1. Begin by making a new 228 x 60 RGB image with a transparent background at 72 pixels per inch. Next set the foreground color to R=0 G=135 B=64.

2. Select the type tool typetool.gif and click anywhere in the image to open the type dialog. Choose the Webdings font, set the size to 85 points and make sure the "Anti-Aliased" box is checked. Click the mouse in the typing area and while holding down the Alt key type "0251" on the numeric keypad.

When you click "OK" to close the dialog, Photoshop will add a new layer to the image.

3. Next click:

View > Show Rulers
View > Show Guides
View > Snap To Guides

4. Drag a guide from the horizontal ruler to a level 56 pixels from the top. The guide will be nearly at the bottom of the image. You will be copying and pasting the first map to make a double map of the world. The guide provides a snap line to align both map images.

5. Next press Cmd+A / Ctrl+A to select the entire map layer, Cmd+C / Ctrl+C to copy it and Cmd+V / Ctrl+V to paste it.
This will paste another new layer of the map. Using the move movetool.gif tool drag it to the right so the right side of the first map mates with the left side of the second map. The image will snap to the guide on the bottom so it will line up perfectly. When you have positioned the layer in place merge the two maps together as one layer using the command:

Layer > Merge Down

Use the move tool and drag the guide you made down below the bottom of the image. This will get rid of it. Your image should look like the one below. When you are satisfied Press Cmd+S / Ctrl+S to save the file. Name it "Map.PSD".


6. Next you will prepare a new image with 11 layers which will form the basis of the animated frames. Make a new 60 x 60 RGB image 72 pixels per inch with a transparent background. Save this new image as "Globe.PSD".

Click the rectangular selection tool. rectool.gif In the options palette choose "Fixed Size" as the style with a width of 60 and a height of 60 pixels. Make sure "Feather" is set to zero. Click on the far left of the Map.PSD image. When the 60 x 60 selection marquee appears, select the move tool and keep it selected throughout the whole process of copying layers. Use the left or right arrow keys to position the marquee so that its left edge just touches or is just west of Hawaii. This will be your starting point. The ending point will be the corresponding point on the far right side of the map.

As it turns out, by making the map image 60 pixels in height and the Webding map symbol 85 points in size, you should be able to move the marquee exactly 110 clicks (pixels) to the right and the ending point will correspond with the starting point for a smooth animation. The actual globe image will be a 48 x 48 pixel image, so you will resample the 60 x 60 globe image to 48 x 48 when you are done copying and pasting layers.

You also have a choice between making 22 layers (one every 5 clicks) or 11 layers (one every 10 clicks) as this tutorial is laid out. Should you choose to make 22 layers you will have a smoother animation, but it will be a larger file.

7. With the marquee in place on the left side of the map, press Ctrl-C to copy the selection. Then activate the globe image by clicking on its title bar and press Ctrl-V to paste the first new layer. In the globe image, unclick the "eye" icon next to the background in the layers palette to hide it. The new layer should look like the one below with the checkerboard pattern as a background. That means the image is on a transparent layer.


8. Make the map image active again and click the right arrow exactly 10 times. When you have done this repeat the copying and pasting steps as directed. Repeat this process until all layers are pasted into the globe image. When you are finished, the layers palette for the Globe.PSD file should look like the image below:


9. Now resample the globe image from 60 x 60 to 48 x 48 with the command:

Image > Image Size

Enter 48 in the width box. If the "Constrain Proportions" box is checked, Photoshop will enter 48 in the height box. Make sure the "Resample Image" box is checked then click "OK".

Click Here To Continue...


Previous   Home    Contact Mike   Related Sites    Next

Copyright © 1998-2016 Mike Doughty, All Rights Reserved Legal Notices
Page Last Revised: October 26, 2016
Privacy Policy