In this tutorial, I'm going to show you how to make nice and clean download button 3D in Photoshop. Along the way, we'll be using ' different tools and apply unique styles to layers, to get a good product that looks finished. . 3D button is the new trend in web design, accessible to CSS3. There's no need to use images when coding keys, but only pure CSS, which is really awesome.
Final result: final results:
the final button How to Create a Clean 3D Button in Photoshop
The first step, open Photoshop and create a new project. Set the canvas to whatever dimensions you want. Set the canvas to any dimensions you want. For your info, Iwas 580x400px just because it is tutorial image 580pxwide. . In this way, the images used in the tutorials are high quality and offer the possibility to see the changes from each of the other steps.
How to Create a canvas Clean 3D Button in Photoshop
With the Paint Bucket Tool (G), paints the backgroundgray (# ebebeb). . Then select the Rounded Rectangle Tool (U), set the radius to 10px and draw a rectangle 250x60px. Very important, make sure to set the tool to"Shape Layers mode" and not a "Path" (see image below) to get a new layer when drawing.
Apply the next layer styles into a new layer. Right click+ "Blending options" or just double click the layer to open the palette of styles.
We have obtained a lovely green button you can already use but no 3D yet.
3D effect can be obtained very easily and fast to do it,duplicate the layer and place the layer currently duplicated under the original. T Then change it by increasingthe height from 60 to 68px. . To do that, go to Edit-Transform-Scale > > and pull 8px bottom line lower. Of course, feel free to play with the dimensions, by expanding even more areas below.
The shape is beginning to look like a 3D button. Now apply a layer style to the next with the duplicated but first clear the current layer style inherited from the original by right clicking on the layer and choose "Clear Layer Style".
The buttons look very nice and clear 3D effect.
Let's add a finishing touch to form. Let ' s make the button glows a bit by adding the points of light in the middle area. First, be sure to create a new layer above all. Second, Ctrl + click on the layer thumbnail to reveal thefirst selection. . In this way, all we are doing now will apply only in the selection. Back to an empty layer just created, select the Brush Tool (B) and with big round Soft Brush, preferably 200px and white color, paint 1-2 times below and above the button. You will see how the top and bottom areas of the button will become brighter.
Take a look at what we've done until now: take a look at what we've done up to now:
The last step is to add some text to the button .... Become a button built for the purpose of downloading andbecause it is tutorial, I decided to type "Tutorial".Again, you can use whatever text you like and for what you need. Once again, you can use any text you like and for whatever you need. The font I used is the very popular "League Gothic". The font I'm using is the very popular "League Gothic".
Before you can actually use it, you must install it. Download fonts and depending on what operating system You're working, Windows or Mac OS, drag the Font to the font folder located in Control Panel for Windows orthe system if you have a Mac. Fonts must be already registered into the list of Fonts to Photoshop.
set the font-size 36px and type:
Stylize the text by adding a gradient overlay and a slight drop shadow:
With the finishing touches, our download button is finished and ready to be encoded. I hope you enjoy the tutorial and learn
No comments:
Post a Comment