Quick Tip: Create a Round Switch Button in Photoshop

Quick Tip: Create a Round Switch Button in Photoshop

on Jun 22nd 2012 with 32 comments
Tutorial Details
  • Program: Adobe Photoshop CS5
  • Difficulty: Beginner
  • Estimated Completion Time: 1 Hour

Final Product What You'll Be Creating

Download Source Files

In this quick tip tutorial we will create a round switch button that you can use in your interface designs. Let’s get started!

Tutorial Assets

Creating the Background

Create a new file. Set Width to 1000 and Height to 1000 and the resolution to 72 PPI.

Applying the background pattern

Make a new Group and name it Background. Now go to this link Vertical cloth Pattern and download this pattern and load it. Using Rectangle Tool (U) draw a rectangle shape a little bigger than the canvas, and apply the pattern as a style to the shape layer.

Creating the button – Step 1

Create a new Group and name it Button. Using Elipse Tool (U) draw a perfect circle like the one in the example. Set the color to #0e0f0f and apply the layer styles. After you are done with the layer styles, reduce the Opacity to 20%.

Step 2

Now make another circle, this time a little smaller, set the color to #222429 and apply the layer styles.

Step 3 – Locating and applying the texture

Navigate to Pixeden site and download the Old School Retro PSD Text Effect inside wich we will find the texture that we need. After you’ve downloaded the file, open it with Photoshop and locate the layer called Grunge Texture. Import that layer in your PSD and set the blending mode to Pin Light and the Opacity level to 10%. Make this layer a Clipping Mask.

  • Step 4

    Using Elipse Tool (U) make another perfect circle also smaller than the one before him, set the color to #0d0d0e and apply the layer styles. Using Brush Tool (B) set the size of the brush to 200px and the Hardness to 0% and make a white #ffffff dot like the one in our example. Set the blending mode to Soft Light, and the Opacity level to 80% and transform this layer into a Clipping Mask. Now make another layer, change the color to black #000000 and brush around the lower part of the circle like seen in the example. Transform this layer into a Clipping Mask also.

    Step 5

    Again using Elipse Tool (U) make another perfect circle but make this one a few px smaller than the previous one. Set the color to #1a1a1b, and using Direct Selection Tool (A) move the lower anchor a few pixels to the top. Now apply the layer styles, import the Grunge texture again, set the blending mode to Linear Dodge and the Opacity level to 10%. Make a new layer, and using Brush Tool (B) keep the same settings that we used on our previous step, pick white #ffffff as our color, and brush away at the bottom part of our shape. Set the blending mode for this layer to Soft Light, and transform the layer into a Clipping Mask.

    Step 6

    Using Horizontal Type Tool (T), set the Font to Myriad Pro (standard font), Bold and the size to 48pt and write down the letter “I”. Set the color to #969696 and apply the layer style. Make another type, this one will say “O”, set the color to #fefefe. Right click on the layer, and select Rasterize Type. Now pres CTRL/CMD + T and holding CTRL/CMD + SHIFT + ALT drag the lower left corner to the left a few pixels. Apply the layer style and we’re done.

    Final Image

    • Paul Flavius is NechitaPaulFlavius on Graphicriver
    Tags: Tips
     
    Enjoyed this Post?

    Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

    By

    Rollover to read this author's bio or click through to see a full list of posts by this author.

    Hi there! My name is Paul and for the past 3 years I've dedicated my life to learning and getting to know everything Photoshop related. Now it's my time to share with all of you some of the great things I've learned! You can keep up with my work on Dribbble, Twitter and my personal portfolio.  

    Plus Premium
     
     
    • http://dmonzon.com Diego Monzon

      Well done Paul, I love it.

      • http://www.nechitapaulflavius.com Paul Flavius Nechita
        Author

        Thank you Diego.

    • Andre

      Brilliant. Although the top of the 0 would be a little flatter.

    • http://www.felixmgil.com Felix

      Very nice! thanks for sharing

    • Wooster

      Great tutorial, i’m currently making it and I really enjoy it. I have a question. How is it possible that your shapes are so smooth, while my are so sharp? Here is comparison: http://i45.tinypic.com/210zg5g.png

      • http://www.nechitapaulflavius.com Paul Flavius Nechita
        Author

        Hi Wooster,

        Did you create a new canvas having the Width and Height of 1000px and Resolution set to 72 DPI?

    • http://www.menacedesign.pl Artbeard

      This texture on a button is real nice.

    • Szcz

      You forgot to show the drop shadow styles on step 4. Instead, you’ve shown the default blending options.

      My guessed settings of this layer style are:

      Blend Mode: Multiply
      Opacity: 65%
      Angle: 90°
      Use Global Light: Checked
      Distance: 26px (or bigger/smaller – depends on your item size)
      Spread: 0%
      Size: 16px (or bigger/smaller – depends on your item size)

      Nice tip anyway. Thanks for sharing.

      • http://www.nechitapaulflavius.com Paul Flavius Nechita
        Author

        Hello Szcz,

        Sorry about that. You were almost right, although indeed depending on my item size the styles behave differently. Here is the Drop Shadow style <img src="http://dl.dropbox.com/u/15511256/Step%204%20-%20Drop%20Shadow.jpg&quot;.

        Thanks for reading,

        • Ben Slepp

          This link is broken, but people can always download the source file as well.

    • http://ravivora.com Ravi Vora

      A few things:

      - The texture should follow the perspective warp of the surface it’s on.
      - The I and the O are too close to the edge of the button and should have more “padding” from the edges to be more aesthetically appealing and also make the warping of the characters a bit easier.

    • http://www.amazing-web-design.co.uk/ Joe Elliott

      Hi There,

      Good tutorial, like mentioned some bits could be a bit clearer but all in all a good tut…

      Thanks
      Joe

    • http://realtimetricks.com/services Irfan Siddiqui

      Quite easy tutorial, easy to understand, easy to learn. Thank you for such an nice tutorial on PS.

    • http://www.creare-webdesign.co.uk/ Bradley

      Quite a detailed good tutorial, I really like some of the steps in this, as usually I wouldn’t go for this type of button effect. I think that it could work quite well with a website design itself if this sort of style was applied throughout. Thank you for sharing a great tutorial, I will keep a look out for some more on here soon.

    • Tex

      Nice job!

      I will say that you could do the same thing by using some simple 3D modeling app as well.

      • http://www.nechitapaulflavius.com Paul Flavius Nechita
        Author

        It would be nice to see a tutorial based on that. Maybe if feel like doing it, that would be great.

    • Sourav

      You are Genius!!!

      • http://www.nechitapaulflavius.com Paul Flavius Nechita
        Author

        Thanks Sourav! Can we see what you’ve come up with?

    • http://www.srjmovie-info.blogspot.com Md Sirajul Islam

      A very nice & great tutorial. Novice man like me will be benefitted following this tutorial. Thanks a lot.

    • http://www.kdweb.co.uk Nic Cohen

      Extremely easy to learn thank you! Someone mentioned that the top of the O would be better flatter, I’m not so sure!!

    • Josh

      Good project, although the tut was a little difficult to follow at times. I certainly would have benefited from the occasional look at your layers panel just to make sure everything was where it should have been (especially for the painted shadows and highlights).

      Also, why the huge canvas for an otherwise relatively small button?

      • http://www.nechitapaulflavius.com Paul Flavius Nechita
        Author

        Hi Josh,

        Thanks for reading. Making a big button was the idea. It’s better to see details at this level.

    • http://www.webtemplates-creare.com/ Paul Weston

      Thought this was a great tutorial and the final effect and look on the button is great. This tutorial has shown me some great techniques and tips that will be very useful to me in the future. I thought the final look of the button was great and there was good detail to guide you. Great tutorial and this will be a tutorial that I will be using and experimenting with to see what I can create.

    • vilinski

      Thanks a lot for this fine tutorial. I followed up your steps and here is what I created.
      http://i.imgur.com/FL9Ek.jpg

      • http://www.nechitapaulflavius.com Paul Flavius Nechita
        Author

        Very nice! Great job you did there.

    • Joshua

      Great tutorial :) Really learned a lot from it, Thanks Paul.

    • http://www.axaple.ru Ilya Utkaev
    • Ben Slepp

      I tried the tutorial twice. First time was as a circle switch, second time was as a rectangular one with an LED instead.

      http://schminkybeef.deviantart.com/#/d5cm7w2

    • kuni81

      Great tutorial!! thank you :)

    • Rozychou

      Very nice and easy tutorial, thanks a lot ! Here’s my version with the two of them :

      [IMG]http://imageshack.us/a/img705/2412/switchbutton.jpg[/IMG]

    • Rozychou

      Very nice and easy tutorial, thanks a lot ! Here’s my version with the two of them :

    • Rozychou

      Thanks for this nice and easy tutorial ! These are mine with the “ON” version