 |
 |
| This Photoshop tutorial will show you how to design a stylish, red/yellow button for you to use in your layouts. |
|
|
|
|
| First of all create a new Photoshop document and fill it with black. For this tutorial I'm going to make a large button using a 100x100 canvas, but you can make it smaller if you like. Next, choose the gradient tool and click on the drop down menu, in the top left corner, to edit the gradient. A box with options should come up, as shown in the image below. Only 2 pointers should be set at the moment, but you'll need 5 for this gradient. |
 |
|
|
| |
|
| Once you've set the gradient, create a circular selection with the elliptical marquee tool, and then create a new layer. Drag the gradient tool from the left, but not quite from the edge, to the right hand side of the selection. This should produce a gradient similar to what's shown in image a). While the circular selection is still active, create another layer above the last one, and then fill it with black. In the layers panel change the blending mode of the layer from normal to color burn. Your button should look something like image c) right now. Your foreground should still be set to black. Keep it that way and change your background to white. Next, go to filters > render > difference clouds, applying a cloud affect to the color burn layer. You may need to do this several times to achieve the desired result, shown in image d). |
|
|
|
|
|
| Once you're happy with the difference clouds, expand the selection by 3 pixels (select > modify > expand). Create a new layer below all the other layers and then fill it with grey. Contract the selection by 2 pixels (select > modify > contract) and then delete the selected area. You should be left with a 2 pixel wide ring, shown in image b). You might notice that the red/yellow layer is a bit rough on the edges. You can remedy this by applying a Gaussian blur of about 1.0 (filter > blur > gaussian blur). Next, we're going to create the shiny part, so create a new layer above all the other layers. Make a circular selection, fill it with white and then deactivate the selection |
|
|
|
|
|
| Now, go to filter > liquify, and you should be presented with a window with a chequered background. We're going to manipulate the circle, essentially cutting it in half but leaving it with rounded corners. You may want to zoom in to do this. Select the bloat tool circled in image b), and then choose a brush size around the same size as the white circle. This tool pushes areas of an image away from the brush, and we're going to use it to push the bottom of the circle inwards. Slowly use the tool just below the circle pushing upwards so that the white circles bottom becomes flat, like in image c). It may take a bit of practise and undoing but once you're satisfied with the result, reduce its opacity to 40%. Your button should now look something like the one in image d). ) |
|
|
|
|
|
| Naturally you can use the button for anything you please, but I've made it into a home button for the purpose of this tutorial. To create the house, start off making the roof with the line tool set to 5 pixels. |
|
|
|
|
|
| Next, use the polygonal lasso tool to create the base of the house, making the door using the rectangular marquee tool. Merge all the layers together and then move it over the button. The house will seem a bit too bright for the button so create a slightly darker border around it. |
|
|
|
|
|
| Naturally you can use the button for anything you please, but I've made it into a home button for the purpose of this tutorial. To create the house, start off making the roof with the line tool set to 5 pixels. |
|
|
|
|
| And that brings us to the end of this Photoshop tutorial! |
|
|
|
|
|
|
|
|
|
|
 |
