Power button
INTRODUCTION
Pixelmator comes equipped with tools to create lifelike images. This can be very beneficial when designing an user interface. Whether it’s an icon or a button – a well designed graphic is sure to improve the user experience. Create a power button with a metal finish.
Shape Tools, Effects, the Gradient Tool, Effects and other features of Pixelmator are used in this tutorial.
RESOURCES
PXM File
STEP 1
Open Pixelmator and create a new document. The image size used in this tutorial is 900×600 pixels. Then, select the Ellipse Shape Tool and draw a round shape in the middle of the canvas. Rename the “Shape” layer to “Base” and fill the shape with grey (color code – #999999). Finally, add a 5 px stroke of light grey (color code – #b3b3b3) to the shape. Use the example below as a reference.
STEP 2
Next, create a stainless steel effect. Create a new layer and name it “Gradient”. Control-click the “Gradient” layer and choose Create Clipping Mask from the shortcut menu. Then, use the Gradient Tool (G) to fill the layer with an angular gradient like in the example. Consult the tip below for further instructions on how to create the gradient. Finally, change the layer’s Blending to Overlay and reduce the Opacity to 70%.
Tip: To create a gradient used in step 2, first, open the Gradients Palette (View > Show Gradients). Then, click the Action button and choose New Gradient from the shortcut menu. Double-click the new gradient to show Brush Settings and select Angle as Gradient Type. Then, add several white and black color stops like in the example below. Make sure that the leftmost and rightmost color stops are the same color.
STEP 3
Now, add some bumps and scratches to the surface of the button. First, create a new layer and name it “Noise”. Then, Control-click the “Noise” layer and choose Create Clipping Mask from the shortcut menu. Use the Paint Bucket Tool (N) to fill the layer with white. Next, open the Effects Browser by choosing View > Show Effects. Choose the Stylize group in the browser and double-click the Noise thumbnail. Set Amount to 100% and click OK. Finally, change the layer’s Blending to Soft Light and reduce the Opacity to 10%.
STEP 4
Next, give the button an engine turned finish. Control-click the “Noise” layer and choose Duplicate from the shortcut menu. Then, select the “Noise copy” layer in the Layers Palette. Choose the Distortion group in the Effects Browser and double-click the Circular Wrap thumbnail. Set Radius to 5 px and Angle to 0º. Then, use the rope to point to the center of the shape and click OK.
STEP 5
Now, duplicate the “Base” layer and rename the new layer to “Rim”. Position “Rim” below “Base” in the Layers Palette. Then, fill the shape in the “Rim” layer with dark grey (color code – #666666) and deselect the Stroke option in the Tools Options Bar. Use the Move Tool (V) to position the shape in the “Rim” layer 10 px below. Then, create a new layer and name it “Gradient 2”. Make sure that the new layer is above the “Rim” layer in the Layers Palette. Control-click the “Gradient 2” layer and choose Create Clipping Mask from the shortcut menu. Use the Gradient Tool (G) to fill the layer with the gradient used in step 2.
Now, choose the Stylize group in the Effects Browser and double-click the Noise thumbnail. Set Amount to 5% and click OK. Finally, change the “Gradient 2” layer’s Blending to Overlay and reduce the Opacity to 50%.
STEP 6
Now, create the power symbol. First, use the Ellipse Shape Tool to draw a round shape somewhere on the canvas. Then, rename the new layer layer to “Power”. Next, choose Add to Shape in the Tools Options Bar and draw another circular shape. Select the new shape and click the Action button in the Tools Options Bar. Choose Path Composition and then choose Subtract from Shape from the menu. Next, resize and reposition the new shape like in the example below.
STEP 7
Now, select the Rectangle Shape Tool and draw a rectangle somewhere on the canvas. Then, select the new shape and click the Action button in the Tools Options Bar. Once again, choose Path Composition and then choose Subtract from Shape from the menu. Then, use the new shape to hide a part of the previously created circle. The result should look similar to the letter “c” rotated 90º to the left. Finally, draw another rectangular shape to complete the power symbol. The final result should look similar to the example below.
STEP 8
Now, use the Move Tool (V) to position the contents of the “Power” layer onto the button. Then, Control-click the “Power” layer and choose Duplicate from the shortcut menu. Rename the new layer to “Glow” and position it below the “Power” layer in the Layers Palette. Use the Move Tool (V) to align the contents of the “Power” and “Glow” layers. Then, Control-click the “Glow” layer and choose Convert into Pixels from the shortcut menu.
Next, choose the Blur group in the Effects Browser and double-click the Zoom thumbnail. Set Amount to 7 px and use the rope to point just below the symbol like in the example. Click OK. Then, change the “Glow” layer’s Blending to Soft Light and reduce the Opacity to 50%.
STEP 9
Now, duplicate the “Power” layer once more. Use the Move Tool (V) to align the contents of “Power” and “Power copy” layers. Then, Control-click the “Power copy” layer and choose Create Clipping Mask from the shortcut menu. Fill the shape in the “Power copy” layer with light blue (color code – #004080). Finally, use the Move Tool (V) to position the contents of the “Power copy” layer 3 px to the right and down like in the example below.
STEP 10
Add a glow effect to the power symbol. Create a new layer and name it “Gradient 3”. Control-click the new layer and choose Create Clipping Mask from the shortcut menu. Then, use the Gradient Tool (G) to fill the layer with a black to white radial gradient like in the example. Consult the tip below for further instructions on how to create the gradient. Next, choose the Stylize group in the Effects Browser and double click the Noise thumbnail. Set amount to 5% and click OK. Finally, change the “Gradient 3” layer’s Blending to Soft Light and reduce the Opacity to 60%.
Tip: To create a gradient used in step 10, first, open the Gradients Palette (View > Show Gradients). Then, click the Action button and choose New Gradient from the shortcut menu. Double-click the new gradient to show Brush Settings and select Radial as Gradient Type. Then, set the left color stop to white and the right one to black.
CONCLUSION
Congratulations, you’ve finished the tutorial! There is a variety of way to use the image produced in this tutorial. Below is an example of how combining the power button with a common texture can result in a lifelike image.
