Step 6
If you made it through all of that, the rest is downhill from here. The reason we had you highlight the body layer is so that when we add a new layer, it stays above the group rather than adding itself to that group. It's time to add some buttons.
Layers > New Raster Layer... > Ok
On the Materials palette, set your Foreground color to #f5f5f7 and your Background color to #94909f
On the Tools toolbar, select the Selection Tool (S)
On the Tool Options palette, set Selection type: Circle
Draw a circular selection towards the upper left corner of the controller:
Selections > Load/Save Selection > Save Selection To Alpha Channel... > Save
On the Materials palette,click on the Foreground color and select the Gradient tab. Select the Foreground-background gradient and use the following settings:
On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection
Selections > Select None
The idea here is to make the button looked raised above the main portion of the controller. We do this by blurring this layer.
Adjust > Blur > Gaussian Blur > Radius: 4 > Okay
We're going to repeat this next step twice.
Layers > Duplicate
Layers > Merge > Merge Down
One more time.
Layers > Duplicate
Layers > Merge > Merge Down
This actually helps make the base of our button wider and darker at the same time so that it stands out more.
Your image should now look similar to this:
Layers > New Raster Layer... > Ok
Selections > Load/Save Selection > Load Selection From Alpha Channel... > Load > Selection #4
Selections > Modify > Contract > Number of pixels: 3 > Okay.
We'll invert the angle of our gradient. On the Materials palette,click on the Foreground color and remove the checkmark form the Invert box:
On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection
Selections > Select None
It may take your eyes a bit to adjust, but if you look away from your monitor for a second then look back at your image, you'll see that the base to our button now looks raised up.
Layers > New Raster Layer... > Ok
This next part were going to do by hand because it seems if you shrink a circular selection to much, it ends up looking square on the ends.
On the Tools toolbar, select the Selection Tool (S)
On the Tool Options palette, set Selection type: Circle
Draw a circular selection in the center of our base. Be sure to leave some room so that you see all the way around the edge of the base:
Were going to use the same gradient but where going to change to the sunburst style to form our round button.
On the Materials palette,click on the Foreground color and click on the Sunburst style:
On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection
Let's darken this piece up.
Adjust > Brightness and Contrast > Brightness/Contrast...> Brightness:-75 Contrast:15> OK
Layers > New Raster Layer... > Ok
Selections > Modify > Contract > Number of pixels: 3 > Okay
Now let's go back to our linear gradient. On the Materials palette,click on the Foreground color and click on the Linear style:
On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection
Selections > Select None
Adjust > Brightness and Contrast > Brightness/Contrast...> Brightness:-75 Contrast:15> OK
Your image should now look similar to this:
We don't really want this button to look inset, but raised above the base as well. So we'll apply a small drop shadow to it, but first lets join the two button pieces together.
Layers > Merge > Merge Down
Effects > 3D Effects > Drop Shadow... and use the following settings:
Now that looks okay:
But if we apply the drop shadow one more time,
Effects > 3D Effects > Drop Shadow... use the same settings:
That looks a closer to what were looking for! Learning speedy tricks like this with the drop shadow can really advance your graphic skills and save a lot of time in the end. Now let's finish this button up. We need to create the small dimples that help keep your thumb from slipping of the button.
Layers > New Raster Layer... > Ok
On the Tools toolbar, select the Selection Tool (S)
On the Tool Options palette, set Selection type: Circle
Draw a really small circular selection at the top of our button:
On the Materials palette,click on the Foreground color and click on the Sunburst style:
On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection
Selections > Select None
Adjust > Brightness and Contrast > Brightness/Contrast...> Brightness:-55 Contrast:15> OK
Your image should now look similar to this:
Layers > Duplicate
On the Tools toolbar, select the Move Tool (M)
Move the duplicate image to the bottom of the button:
Now duplicate the layer two more times and arrange it accordingly:
Let's put this entire button into a group.
On the Layers palette, highlight the Raster 9 Layer and click on the New Layer Group Icon
When the Layer Properties dialog box opens, type in "btn1 " and click OK
Now go back to your Layers palette and drag the other two top layers into the group. Always remember to keep the layers in the same order when you move them into the group. When you've finished, highlight the btn1 Layer:
This button is identical to another button we need, so there's no use in re-inventing the wheel.
Layers > Duplicate
We already have a copy of everything we need if we want to change the button appearance later, so this button doesn't really need to be saved as a layered group.
Layers > Merge Group
On the Tools toolbar, select the Move Tool (M)
Arrange the second button on the controller so that it is similar to this:
We only have 5 more buttons to create! LOL.. have no fear, I'll show you the way I would do it.
|