The Metalic Frame Button Photoshop Tutorial is created as a traditional ( text and images tutorial), and as a video tutorial.If you want to follow this tutorial by text and images continue reading the text.If you want to follow the video tutorial scroll down at the bottom of the page.
In this tutorial I’m going to show you how to make a shiny golden metallic frame button in photoshop. You need to have basic knowledge of the software and some spear time in order to complete the tutorial. After that you will be able to create your own metallic frame buttons and test your own ideas on button designs.The same button can be duplicated to create a navigation menu bar for your website or any kind of user interface.This is the final result that you should get.I have duplicated the final result of the button to show you how it will look when its stuck one on top of each other,or one next to another.First thing you need to do is to create a new document.Since this is going to be a button the size of the document can be set as you like.But even do the buttons are small in size and resolution i tend to create my buttons pretty big.That way,later on i can resize them to fit my need.
STEP 1 – Make the shape of the button frame
1A -This button is going to be rectangular and that’s what we are going to create.The size that we are going to use in this particular tutorial is: Width 9 cm (or 3.54 inches), Height 3 cm (or 1.18 inches) and Frame thickness 0.5 cm (or 0.19 inches).Press Ctrl + Shift + N to create a new layer and name it Frame.Make a frame as it is shown in the 1a, left bottom corner in the image below and fill the shape with this color (2c2c2c). After you have completed this tutorial you can try to create buttons with different sizes and shapes, but my advise is to stick with rectangular and square shapes.The layer that holds the rectangle you have created is going to be named Frame.Delete the inner part of the rectangle marked with orange lines in drawing 1A in the image bellow.
1B-Make a new layer by clicking Ctrl + Shift + N and name it Button Core.Set it under the Frame (Frame Layer).Make a selection as big as the frame and fill it with color ef7251.With the result you see in the image below you complete step 1 and move forward on to the next task.
STEP 2 – Adjusting the Button Core
2A -First of all you have to do in step 2 is to select the Button Core layer.Now click on the Layer styles button and pick the Gradient Overlay.Set the Blending Mode to Multiply, Opacity to 41 %,Gradient should be as it shown in the image below in the Gradient Editor-(Location 9% is with color c8c8c8, Location 19% is with color 262626,Location 78% is with color white ffffff), Style set to Linear, Angle to 90% and Scale to 100%.The same perimeters can be seen in the image below.
2B – Now make active the Inner Shadow Layer style.Set the Blending Mode to Multiply, Opacity to 100%, Angle to 90 °, Distance and Choke are at 0, Size is set to 152 px. Now all you have to do is press OK.The result can be seen in the bottom left of the image below.
2C – The last thing we have to do is set some highlight on the top of the Button Core.From my point of view this is the easiest part of the tutorial. It can be done in multiple ways. One way is to make a new layer and place a white dot with a brush or a selection. After that you can go to Filter->Blur->Motion blur and spread it out in a horizontal direction. Another way is to set your color to white and use the gradient tool,and it needs to be set to create radial gradients and to be the white to transparent preset. After that you can press Ctrl + T to activate the transform tool and squash it on the middle and by that making it a squashed ellipse.
The way how i like to do it is with a brush. I create a new layer and name it Button Core Highlight. Select B to activate the Brush tool. I set my brush to be soft and with an opacity around 15% and 20 % i make couple of horizontal strokes and then couple of more in the middle.That way i get a more transparent effect on the edges and more white saturated effect in the center.You can see the example and result in the image bellow.If you use this method and the highlight gets thick,you can still use the Ctrl + T or Free transform tool to squash the highlight.With the highlight finished we conclude with step 2 and move to step 3 where we will work on the frame of the button.
STEP 3 – Adjusting the Frame of the button
3A – We are going to make the golden metallic frame for the button.The first thing we are going to do is add a gradient to the the frame. Click on the Layer styles button and activate the Gradient Overlay style. The Blending Mode should be set to Normal, Opacity to 100%, Gradient should be set as it is shown in the image below on the Gradient Editor (Location 0% and 100% is with 2c2c2c color, Location 40% and 60% is with color e1bb5d, and for last at the middle Location 50% you have a white color or ffffff), Style is Linear, Angle 0°,Scale to 100%.With that set press OK. You can see the result in the image below,bottom left corner.
3B – Now create a new layer and name it Frame Shadow. Draw a shape as it is show in the left side of the image below and will it with this color (080706).Right under you can see how the result will look like.
3C – But the Frame Shadow we have created is to dark. So now we have to erase some parts of it to look more real. Click on the E button to activate the Eraser Tool. Select a soft brush and make sure that its opacity is low,somewhere between 15 % and 20 % Opacity. Now erase softly the areas that are shown in the image below right up corner. You can make selections at the areas i have show in the image below (right upper corner),and then erase with the brush. That way you wont erase necessary part from the Frame shadow. The result can bee seen in the right bottom part of the image bellow.
3D – Now we have to add some more shadow on the frame to make it look better. Create a new layer and name it Side Shadows. Press the P key to activate the Pen tool. Then draw some shapes as it is shown in the image below on the top left corner. Switch from the layers tab to the Paths tab and then on the bottom of the Paths tab you can find a button that says Load Path as a selection. As you have made the selection and with the Side Shadows layer selected activate the Gradient tool (Linear gradient and from Black to transparent preset selected) , and drag a gradient as it is shown in the top left corner of the image below. The result can be seen on the bottom left corner in the image bellow.
3E – Now all that is left is to add a highlight on the bottom of the frame. Create a new layer and name it Bottom Highlight. To create a gradient,so press on the G key, chose radial gradient and preset color to transparent (shown in the top right corner,section 3e). Chose (f49845) for a foreground color and create a tiny gradient. Don’t worry about the size,you are going to scale it later and fit it for your needs. Now after you have created the gradient go to Filter->Blur->Motion blur. Set the Angle to be 0° and Distance between 400 px and 430 px. Click OK. Now press Ctrl + T to activate the free transform tool and squash it till it gets like a line. Move the Bottom highlight to the bottom of the button as it is shown in the image below (right bottom corner).
3F – Now all that is left is for you to pick your text, chose a white color for it and place it on top of the button. I have set the Blending Mode of the text to Overlay,but you can set as you like. You can also change colors to the Button Core.All you have to do is to change the color of the Button Core layer and you are set. I have made some experiments you can see in the pictures below.
Post a Comment