We start with screenshot from iTunes. I´m sure you know how it looks like, but for our work it´s necessary to know every detail, every single pixel. Therefore - try to remember it properly.
We place our prepared picture into the new document, just because we don´t want to work on white background (it´s only standard shape from Photoshop with few effects).
And let´s get to work. Draw a circle (our button) with Ellipse Tool, dark gray color - #D5D5D5.
Size of button makes no odds. Just take notice of color - it´s very similar as color of background shape. Because most of effects will be done only with Layer Styles.
Click twice on the layer name to bring up the Layer Style dialog. We start with highlight, because it will be the most difficult. For that we use Bevel and Emboss, which we set to some outstanding colors (in my case violet and pink) and blending mode to Normal. This way we can better see the result.
Than we experiment with Size property and light source (Angle and Altitude), until we have something similar to this picture. In the end we will probably use only one part of this effect - only shadows, or only lights. It depends on what will look better.
Once we see, that we can´t do more with these properties, it´s time for Gloss Contour. With this we can absolutely correctly affect the appearance of rendering highlights and shadows. Click into the preview to bring up the Contour Editor dialog and we can experiment.
Standard Contour in on picture A. First point (left bottom) determines highlights, second point (right top) determines shadows. With this linear contour, final effect is adjusted only with properties which we set earlier (size, light source...). To see how the effect is changing, try to set both points to the top - everywhere will be only light (as on picture B). Vice versa - if we set both points to the bottom, everywhere will be only shadow (as on picture C).
We need to make the effects really "sharp". To have sharp transition from light to shadows, and to have sharp edge between (as on first picture from iTunes. We can achieve this effect with placing these two points as cloce as we can on Y axis. Next three pictures show how position of these two points affect the result.
Third picture looks very similar to what we need. Don´t you think? Therefore decrease shadow opacity to 0 %, change color of light to the white, and decrease light opacity to about 70 %. If you think, that the edge is too sharp (too rough), change the Contour little bit, to have small space between our two points (not to have same position on Y axis). You can see our final Contour shape on this picture (in preview box).
The most important step is solved, now it´s only trivia. For next steps copy the original iTunes button into the document, to have something for comparison. You can clearly see, that the original button is highlighted from bottom.
We use Gradient Overlay effect for this. Set Style to Radial, gradient from black to white, blending mode to Screen. Or black to transparent, blending mode to Normal - result is completely the same. Click and drag with mouse to place the gradient to the right place (to the bottom). If you need, adjust the Scale.
On original picture, you can see subtle darkening around the edge. For that we use Inner Shadow. Set Size to big number, for example 13 px, Distance to 5 px and Angle to 120°. Now the shadow is from left top corner, and in right bottom corner it´s barely seen. Finally decrase the Opacity to about 20 %. Maybe even less.
Inner part of our button is done, now let´s make outer part (all the strokes). The biggest problem is one pixel wide white hightlight on the bottom. We use Drop Shadow effect, but with blending mode Screen and white color. Size to 2 px, Distance to 1 px, Angle to 90°. With this preset is our shadow, or if you like hightlight, at the bottom bigger. Set the Spread to 91 % and the effect is not blurred, but nicely sharp.
To have this hightligt only at the bottom, we need to cover it with outline - with effect Outer Glow. We set blending mode to Multiply, color to black, Opacity to 50 % and Size to 2 px.
To have this effect even more strong, we decrease the Range property to 32%.
Finally we add Stroke effect with size 1 px. This we set to Linear gradient from black to white. With this the outline will be dark on the top, and bright on the bottom. With all these effects, out button now looks like the original iTunes button!
Because we use only Layer Style, it´s now really easy to create another button. Just draw a shape and copy a layer stype. And you can make the new button bigger, you can make the new button smaller. It still looks very good. So, good luck to your work!
The last comment: Make a nice GUI from previous picture is really easy. Change the color a little (gray is boring), add icons and simulate over state with new blurred layer with blending mode Color? It´s only up to you, I believe you will find out another improvements...
Pessoas visualizando este tutorial
Total de visualizações
0 comentários:
Postar um comentário