 |
|
|  |
|
|
| This is the final part of the Photoshop tutorial to design the Wii. Create the 3rd button using the elliptical marquue tool and a radial gradient. For the foreground I used BBBBBB and for the background 81818. Create a small light grey dot, to give it some shine, and then, using the elliptical marquee tool, make a black circle underneath the radial gradient, to make a shadow. |
|
| |
|
|
|
|
 |
 |
| |
|
|
| |
Next we're going to create the very top button, but first zoom into 500%. Make 3 single pixel wide lines, as shown in iamge a) and then 2 more above them. |
|
| |
 |
|
| |
|
|
 |
 |
 |
| |
|
|
| |
To the right of these lines, make a diagonal line to join them up and then use the pencil tool to draw a random little pattern, to make as if something is written on teh button. |
|
| |
 |
|
| |
|
|
 |
 |
 |
| |
|
|
| |
Zooming out to normal viewing, your button should look like those in image a). Next we're going to create the last part, which is the light. So, using the rounded rectangle tool, with a radius of 10 pixels, create a rectangle, as shwon below. |
|
| |
 |
|
| |
| a) |
|
b) Click image to enlarge |
 |
 |
 |
|
|
 |
 |
 |
| |
|
|
| |
Next create a new layer and then make gradient using light blue and white. This gradient should only be half the length of the blue rounded rectangle. |
|
| |
 |
|
| |
| a) |
 |
|
|
 |
 |
 |
| |
|
|
| |
Duplicate the gradient layer and then flip it vertically (edit > transform > flip vertical). Line it up with the original and then merge the 2 together. Use the transform tool (edit > free transform) to squash the gradient together, like in image b). Use gaussian blur on the gradient, with a radius of 0.4, and then merge it with the blue rounded rectangle. |
|
| |
 |
|
| |
| a) Click image to enlarge |
|
b) Click image to enlarge |
 |
 |
 |
|
|
 |
 |
 |
| |
|
| |
Next, use the transform tool to rotate the light, like in image a). Duplicate the light layer and then nudge the bottom one 2 pixels to the left, using the left arrow key. By going to image > adjustments > hue/saturation, change the sauration to -90 and the lightness to -40. You should now have a subtle shadow below the light. To make the glow around the light, make a selection out of it, adn then set the foreground to
BBBFD8. |
| |
 |
| |
|
 |
 |
| |
|
| |
Expand the selelction (select > modify > expand) byt 1 pixel and then feather it by 3 pixels. Create a new layer and then fill it with the light purple. Nudge the glow layer by 1 pixel to the left. Lastly, we're going to create the logo. Select Verdana font and then type in Nintendo, with the tracking set to 75. This will space out the letters more, so that they aren't too distorted when we manupulate the text. Create a rounded rectangle and then contract it by 2 pixels, removing the center. Merge the text and the rectangle outline together. |
| |
 |
| |
|
 |
 |
| |
|
| |
Use the transform tool to distort (edit >transform >distort) the logo, like in image a). Add some glint to the logo, by using the pencil tool to add a few light grey pixels on either side of the logo. |
| |
 |
| |
|
 |
 |
| |
|
| |
And finally we're finsihed! Hopefully you've leanrt a thing or two and enjoyed this tutorial :). |
 |
 |
|
 |