How to make the switch button of UI office
Posted by
vkdt
at
Friday, March 20, 2015
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.
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.
0 comments:
Post a Comment