This article is part of a series of tutorials thought for Photoshop beginners. I’ll explain in depth those features that can result difficult to understand for a newbie. In the previous article I’ve explained the flexibility of Layer masks and how they can be used to add and remove pixels from a layer at any time during the workflow.
Today we will learn how to use blending options and layer masks to create buttons destined to web.
Call to action
Web buttons have a fundamental role in site layouts. They are used to give instructions to the visitors and are always placed in strategic points of the site. Let’s consider WeGraphics as example: we have several buttons that link to the signup page. In our product page, we’ve placed the set preview, which is the first thing that attracts the visitors’ attention, on the left, and near, on the right, the action button, which is the way to obtain the resource. It’s like to say:” here is the resource. If you like it, here is how to get it”.WebDesign lovers don’t want a button that is only visible, but also elegant, grunge or minimal, in according with the whole design. So today we will learn some useful techniques to create beautiful web buttons:
Preview:
Since the tutorial is very detailed, I’ve decided to divide it in 2 parts. Today you will see how to create the first 2 buttons. Next week I’ll publish the second part of the tutorial. So stay tuned! Follow us on Twitter or subscribe to our rss to don’t miss the second part ;-)
Button 1
Create a new Photoshop document at 72pixels/inch. Size is not important. Take in mind that our buttons are not longer than 100px width, so a 640×480 pixels canvas will work fine. Also consider that our buttons are destined to webdesign, so once completed they will be extracted. The best would be to directly create buttons on the .psd file of your layout.
To make the background nicer to see (this white background is so tedious!), add a gradient overlay. Right-click on the background layer and select “Blending Options”. Here select gradient overlay (radial) and add a gradient going from a light grey (#f3f3f3) to a darker one (#c6c6c6).
Why can’t I add blending options to the background layer? Before adding layer styles to the background layer you have to unlock it. Double click on the layer thumbnail in the layers window and hit OK to unlock.
Grab the Rounded Rectangle Tool and create the main shape of the button (with a radius of 5px).
Right-click on the rectangle layer thumbnail and select blending options. It’s time now to play with layer styles to add character to the button. Let’s start with a gradient overlay going from a dark blue (#0d3079) to a lighter one (#557bc9).
Now to stand out the button from the background, add a 1px dark blue (#0b2258) stroke.
To give depth to the button, add a 1px inner glow. Set white (#FFFFFF) as color and reduce opacity to 30%.
We’ve finished with layer styles. It’s time to add a soft noise effect. Create a new layer, then ctrl+click on the vector mask thumbnail of the main shape to select its pixels, grab the Paint bucket tool and fill the selection with black (#000000). Finally press ctrl+D to deselect. The screenshot below will explain better the whole process:
Go to Filter>Noise>Add noise and enter a value around 33% (make sure to check monochromatic)
Set the layer blending mode to screen and reduce opacity to around 15%. The noise effect is complete!
Why do I have to set the blending mode to screen? By setting the blending mode to screen all white areas will be retained, while black ones will disappear.
As we’ve made before, create a new layer, ctrl+click on the main shape vector mask, but this time fill the selection with white.
Then grab the Rectangular Marquee Tool and select the bottom half of the new shape. We’re going to create a nice light effect:
Hit delete to eliminate the selected area, then reduce the opacity of the layer to around 10%. Here is my result:
It’s time to add some text. The font used is Arial (Bold, 14pt).
The easiest way to create a kind of engraved effect is to duplicate the text layer (ctrl+J) and move the duplicated below the original one. Add a dark color overlay (Right-click>Blending options>Color overlay>#124d89) to the duplicated text and move it 1px on the left and 1px up (use the arrows on your keyboard).
With the Custom shape tool, draw a lens (from the library). Then use the same technique applied before to create the engraved effect to the lens too.
The last touch to complete the first button. Create a group and title it “light effect”. Switch the blending mode of the group to “color dodge”. Then ctrl+click on the main shape layer to make a selection of its pixels and add a layer mask by pressing the apposite button at the bottom of the layers window. In this way all what we will put inside the group will affect only the area delimited by the main shape.
Create a layer inside the group, set white as foreground color and grab a soft (hardness 0%) brush.
Click on some points of the button to create light effects, then reduce the opacity to make the effect more subtle. This is a useful trick to make more vivid our buttons.
Here is the final result:
Button 2
As with the first button, let’s start creating the main shape. This time use the Rectangle tool.
Select blending options and add a gradient overlay (from #d2d2d2 to #f7f7f7), a 1px stroke (#acacac) and a 1px white inner glow:
Create a new layer, zoom in, grab the Rectangular Marquee tool and make a 1px width selection as shown in the screenshot below:
Fill the selection with the same grey of the stroke effect of the main shape (#acacac). Then press ctrl+D to deselect.
Using the same technique, create a second 1px line, this time white, and move it to the right of the first line.
Create a new layer, set black as foreground color, grab a soft (hardness 0%) brush and click once over the 2 lines:
With the Rectangular Marquee tool select the 2 lines and the area on their right and hit delete. Then reduce the opacity of the layer to 15%. In this way we’ve created a soft shadow effect on the left of the 2 lines.
Select the 2 lines’ layers and the shadow’s one (from the layers window) and group them by pressing ctrl+G. Then add a layer mask to the group by pressing the “add layer mask” button at the bottom of the layers window. Finally grab a black soft brush and paint over the 2 end points of the lines to gently eliminate them.
How can I select more than one layer? In the layers window, hold down ctrl (cmd for Mac) and click on the layers you want to select. In case you want to select many contiguous layers, hold down shift and click on the first and the last layer that you want to select.
Now you can add the text. The font is always Arial (Bold, 16pt). Write something, then open the blending options window. We will use styles to create an engraved text effect. To achieve the effect simply add an inner shadow (#000000) and a color overlay (#bdbdbd):
To complete the text effect, duplicate the text layer (ctrl+J) and move the duplicated below the original. Right-click on the duplicated layer and select blending options. Here uncheck inner shadow and switch color overlay to white (#FFFFFF). Finally move the duplicated text 1px on the right and 1px down. Here is what you should obtain:
The arrow that points to the bottom is the classic download symbol. So grab the Custom Shape tool and select the arrow from the library. Create the arrow (remember to hold down shift to maintain constant proportions while drawing the shape).
Press ctrl+T to activate the transform tool and rotate the arrow of 90°. Then apply to the arrow the same style of the text. Also repeat the same method used with the text to add a 1px white shadow (bottom-right).
Is it possible to copy and paste the style? Yes. Right-click on a layer thumbnail and select “Copy layer style”, then right-click on the other layer and select “Paste layer style”.
Ok, we’ve completed the first part of the tutorial. Next time I’ll explain in depth how to create the other 2 buttons.
Here is what we’ve done today:
Tidak ada komentar:
Posting Komentar