How to draw buttons for the website

How to draw buttons for the website

The convenient interface, perfectly drawn graphics, the correct arrangement of elements on the page – a half of success of the website at the visitor. Drawing of buttons for the website – a small, but important part of work on the online project.

Instruction

1. Try to draw the round button. The way given below is universal also for creation of logos, avatars. It is not difficult to draw it, despite the number of actions which you should make.

2. Open the Adobe Photoshop program. Create the new document, having clicked a combination of "Ctrl+N". Parameters of the image 300*300, resolution are 72 pixels/inch. Background and color mode by default white and RGB respectively.

3. It is the best of all to draw vectors that at reduction of the button its quality did not worsen. Select the Oval tool, clamp Shift and from the center draw a circle.

4. Now apply several effects to the turned-out circle. Take place in the Layers menu - "Style of a layer" - "Imposing parameters". Here it will be necessary to impose a gradient.

5. Further here check opposite "Stamping" to give to the button necessary camber, and set the following parameters: style – the circling stamping, a method – a soft facet, depth – 220%, the size – 1 pixel, mitigation – 5 pixels, a corner – 135o without global lighting, height – 32, the illumination mode – normal with opacity of 30%, the shadow mode – multiplication with opacity of 25%

6. For giving of a bigger volume here in parameters of imposing check "Shadow" and set the following parameters: the imposing mode – multiplication, transparency – 40%, a corner – 125o with use of global lighting, shift – 5 pixels, the size – 20 pixels.

7. Such image, as shown in the drawing will become result of the made actions.

8. Now create a new layer, again select "Oval" and draw a circle of smaller radius, than the first figure. Open "Imposing parameters", check opposite "Inner shadow" and set parameters: the imposing mode – soft light, a corner – 125o, shift – 0 pixels, tightening – 45%, the Size – 21 pixels.

9. Further here in parameters of imposing note "Imposing of a gradient" and create a gradient with parameters as on the picture. Click OK

10. Further set style of imposing – radial, scale – 124%

11. Now check opposite to the Inking point and set such parameters: the size – 5 pixels, situation – outside, the imposing mode – normal, opacity – 100%, inking type – a gradient.

12. As a result of these actions something should turn out, already more similar to the button. You can reopen parameters of imposing and experiment with them.

13. Now it is necessary to add the button of flares that the button found the glass invoice. For this purpose again create a new layer, select the Oval Selection tool, create an oval over the button and fill in it white by means of the Filling tool. Clamp Ctrl, click on a layer with a color circle, invert selection ("Selection" - "Inversion"). Now press Delete. The oval should be cut off on circle perimeter.

14. On the panel of layers change the Normal parameter to "Soft light", then click an icon of a vector mask and select the Filling tool - "Gradient". Fill in a flare from below up. The button is almost ready.

15. It is possible to add an inscription on the button. It is also possible to apply to it effects of imposing, such as internal, outer glow, gradient and so on. Be not afraid of experiments, the more you apply imaginations in work, the quicker will master both the editor, and web-design.

Author: «MirrorInfo» Dream Team


Print