Create a Tropical Colored Compass

---

Create Our Compass Case

Create our background circle (Number 1). The gradient goes from neon green on the left to dark purple on the right. Next create another circle, fill it with a dark purple, and make it slightly smaller (Number 2). Then create a smaller white circle and give it a Transparency with an Opacity of 30 Percent (Number 3). Make another slightly smaller circle (Number 4). Have the top layer linear gradient go from blue to light blue to blue again. Set the gradient angle to 60. The far right shows them all lined up. Use the Align Palette if you need to. Or go to Window > Align and use the center align tools. It will also show up at the top of the screen if you select all the objects.

Bring in A World Map Image

First lets create a shadow at the bottom of the blue circle to add some depth. Create a circle a little smaller than the original blue circle and give it a blue to light blue linear gradient (Number 1). Then grab the top point with the Direct Select Tool (A) and drag it down. Then grab the handles one by one and reduce their size. Your result should look like the shape shown below (Number 2). Next give the shape a transparency set to 40 Percent (Number 3). And finally place it over the Compass Case at the bottom (Number 4).

Next locate or draw an Americas map (Number 1). Unfortunately, I don't remember where I got mine. I grabbed it from a previous project. Copy your blue circle and make a gray. Place the map where you would like to crop it (Number 2). Then click Intersect shape areas in the Pathfinder Palette (Number3). Then click the Expand button (Number 4). Next we place the cropped Americas map over our blue background. Give it a bright green to dark green to bright green linear gradient with a 120 Degree Angle (Number 5). Copy the bottom shadow that we placed over the blue background and Rotate it 180 Degrees (Number 6). Now change the gradient to go from white to green (Number 7). Set the shape to 15 Percent Opacity in the Transparency Palette and place it at the top of the compass (Number 8).

Zoom In To Add the Details

Create a guide and place it in the center of the compass. Start at the top and make a Rectangle 2px wide and 4px height. Then place an identical one at the bottom. Select both of them. Grab the Rotate Tool (R) and rotate copies until your design matches below. Hold down (Shift) while you rotate.

Now hide the rectangles you just made by going to Object > Selection > Hide or (Command/Ctrl + 3). Create the same rectangle design as above only make the Rectangles 1px wide by 4px height. After they are placed at 45 Degree Angles, make sure the Rotate Tool (R) is still selected, and all the rectangles, then hit Enter to bring up the Settings Window and use an Angle of 22.5. Then hit OK.

Now go to Object > Show All so all our rectangle increments show. Then create our directional text. I used a font called Arno Pro Bold Caption. Create a second Guide that goes horizontally through the center of the Compass. Then create a triangle that lines up as shown in the image below. Make it 18px wide and 2px height.

Now Rotate (R) copies of that triangle by placing the rotate point directly in the center of the Compass. Hold down the (Shift) key while rotating the copies into place.

Select all four of the center triangles. Rotate a copy 45 Degrees and then grab the Select Tool (V). Scale down this copy of the center triangles until it matches the image below.

Now draw the center needle and rotate it to Southeast to point toward where I'm living down in South America. Then place a circle over the center point to show that the needle is connected in place.

Add the Background Bar

Below our starting point is shown (Number 1). Then create two rectangles. The back one is 4px wide and the top one is 6px wide. Make the height something that looks right. For the back bar Fill it with a linear gradient that goes from bright green to dark purple. For the top bar use a linear gradient with the same colors only make 75 percent or more of the color be the dark purple (Number 2). Then place the green bar behind the purple bar (Number 3). Then Rotate (R) 45 Degrees to the left (Number 4). Lastly place it behind the Compass graphic (Number 5).

Final Tropical Colored Compass Design

Below is the final design at different sizes. If you need to use the design any smaller you should design it at that size. The smaller you design icons the more every pixel counts.

Conclusion

This was part of one of many logo designs I was working on for a friend's blog. He ended up getting busy with his work and had to take a step back from blogging. He ended up selling his blog. So, I had some fun logo designs with no home.

This design had the broadest appeal to be removed from the logo and used as an icon. I just wanted to give you some background on where the idea for the design came from. I didn't dream up a Tropical Colored Compass design tutorial. It was one of many concepts created that could no longer be used. So, it makes an excellent source to use for learning and contributing to the knowledge of the AiBURN community.