Home > Tutorials > PhotoShop Tutorials > How to make the switch button of UI office

How to make the switch button of UI office

Recently, a project needs to make a material like small switch, and we will share the following steps with you.

Step 1. Find some pictures of things to analyze the structure of the switch, texture and color performance.

Make analysis of light and texture and make delineation of the location and intensity of illumination.

Step 2. Set a 1136 * 640 canvas (iPhone5s resolution).

Step 3. Based on the prototype drawing, use a graphical tool to draw a circle hook on the canvas as the button’s positive side and name the layer to be “button – below”.

Step 4. Copy the just circular pattern, select the bottom anchor point, drag the anchor position up as front of the button, and name the layer to be “button – on”.

Step 5. Edit “button – on” and draw the shape and texture of the switch front; layer style is as follows.




Step 6. Edit “button – below” and draw the shape and texture of the side bottom of the switch button; the layer style is as follows.




Step 7. Then we draw the groove bit to install the button; use the same method to draw a slightly larger concentric circle and the layer can be named “groove”.




Step 8. At the point, we have completed 70% of it, and then we need to add shadows; as for the shadow layer, I use a little “thin” oval shape, so that the formed shadows look more real.

Step 9. Finally, we make words of OFF and ON (note that ON should be slightly flat to be more in line with the perspective relationship), and then add a reddish light effect on the groove; thus, it’s completed.

Step 10. In the same way, we can also make the state of On.

Anyone is welcomed to redistribute and quote the content only if he or she notes its origin. http://4-designer.com/2014/09/how-to-make-the-switch-button-of-ui-office


Link to this page:

Pic link:


Important note:
Pin for file decompression: 4-designer.com