Subscribe Via RSS

3827 Subscribers

Subscribe Via RSS
Subscribe Via Twitter


Subscribe Via Twitter
Compass Tutorial

October 11th, 2007 in Photoshop Tutorials by Richard Carpenter

Compass Tutorial

1 Star2 Stars3 Stars4 Stars5 Stars17 Votes, Rating: 3.65
Loading ... Loading ...

Create a new document 500×400 with any desired background. Select the elliptical marquee tool and draw a circle, fill the circle with a temporary color. In the layers window click on your layer whilst holding the “CTRL” key on the keyboard to load a selection, now goto “select > modify > contract”. when the box comes up enter a value of around 20-30 pixels. Now goto “select > modify > smooth” and enter a value of 20. You should now have a ring like this.

Now add these layer styles to your ring.

You should have something like this.

Now create a shape like this.

All done with the elliptical marquee tool using to shapes, merge both shapes together on one layer and place behind your ring.

Right-Click your ring layer and goto “copy layer styles” then right-click your shape you just made and goto “paste layer styles” you should have something like this.

Using the same concept as the 1st step create another ring, only this time make it smaller to fit inside the first one we made.

Now add these layer styles.

You should have something like this.

Now create another circle big enough to fill whats left inside. Add these layer styles.

You should have something like this.

Add your letters N, E, S and W.

Add your lines that go around the compass, to do this we create a circle from the custom shapes menu, then select the type tool and use type on a path. Ive already written a tutorial about type text along a path check that out for more detail.

Select the pen tool and create a shape like this.

Fill the shape with the color white and set opacity to 25%.

Now goto the custom shapes tool within photoshop and select a custom shape same as the image below. Stretch it out to fit the inside of the compass also set layer opacity to 50%.

Now add your little arrows which are also shapes from the custom shapes menu, just fill each side of the shape a darker shade of the main color.

About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter and im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of Photoshop Plus. You can follow me on twitter HERE. You may also view my portfolio HERE.


Richard Carpenter has written 364 posts.

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

20 Responses to “Compass Tutorial”

  1. Bas says:

    Great tutorial!

    Thank you.

  2. Helpfull hand says:

    Looks like the Safari Compass, i like it :D

  3. tuananh says:

    Always great tutorial!

  4. KBT2M says:

    Good Tut… wonderful! ye … study!

  5. BARMAN2005 says:

    Nice tut man! Great result!

  6. Dude, this is awesome! Excellent technique, thanks for sharing!

  7. arabsquad says:


  8. Poxline says:

    Very nice and great tutorial.

    Finally look right very good !.

    Thanks guy.

  9. Lith says:

    Thanks very nice tutorial :)

  10. Rachael says:

    Awesome tutorial, thank you very much!

  11. wow what a very nice tutorial from ur friend ak.

  12. wow what a nice tutorial thats for that. from your friend ak. love u

  13. ali abdelkarim says:

    hey it is u r friend Ak agian i would like to see more toutorials from u dudes u are my best friends i love you guys u are my best friends i always watch your programs and i love it when you make new toutourlias so i understand photoshop and i love you dudes you are the best

  14. Cory Bellinghausen says:

    I don’t know what the other people are talking about. I was confused most of the time and I needed the assistance of others to tell me exactly what to do. Thanks for trying, but…you failed. Don’t do another tutorial, PLEASE!!!!!!!

  15. Tim says:

    It’s good, but don’t just assume we can find your tutorial on “typing along a path”. I’m having trouble matching up the notches perfectly with the circle.

  16. ADMIN says:

    the search facility is a good place to start…. thats why its there

  17. 3arbawi 4 ever says:

    always great and thank u 4 the hardwork and i wish i will get an A in it
    thank u very much

  18. wissam wild nasrallah says:

    thank u very much guys

Leave a Reply