Make a hi-tech button in Photoshop

In this tutorial, we will create a hi-tech button that you can use on the first page to open a web portal, in various programs and in Microsoft Powerpoint presentations.

Translator’s Note: in the lesson, in order to create the main figure, the author used Adobe Illustrator in his lesson, but I would not install such a monster for the sake of one lesson. All of the following can be done in Adobe Photoshop, if of course you are friends with contours and easily cope with them, if not, I will help you with the implementation of the first part of the lesson, which I adapted to Photoshop.
You can read the first part of the lesson in the illustrator here in the source of the lesson.
I wish you good luck and easy brush!

Materials for the lesson:


Part 1.Adaptation to photoshop

When doing a lesson in Photoshop, start by creating a document. Open Adobe Photoshop. Create a .PSD file with a size of 1024×768 pixels with the following parameters.

Creating a shapemainbutton“.
Step 1. Using tool Rectangle tool (the mode, now and further according to the lesson – the layer figure) create a rectangle 100×120 pixels.

Step 2. Create a guide to align the shape horizontally. The created guide should attach itself to the middle of the figure.
Choose a tool Add anchior point tool (Tool “Pen +” Add anchor point) and add an anchor point at the intersection of the upper border of the rectangle and guide.

Step 3. Choose a tool Pen tool (P) (Pen tool), hold ctrl and drag a new point upwards. In Adobe Photoshop, raising the pivot point, the curve is immediately rounded. So leave her – semi-circular!
It is also here using Direct selection tool (A) (Arrow tool) highlight the upper anchor point, hold down the Shift key and then click the right arrow on the keyboard.
Do the same with the top right anchor point, just move it to the left.

Step 4. Now we need to create two more similar objects. Select the shape tool Path selection tool (A) (Contour Selection Tool), copy Ctrl + C and immediately paste Ctrl + V. Activate the free transform Ctrl + T. Set the position of the center of the transformation in the center of the lower boundary (more details can be found here). Then rotate the duplicate by -120 ° (in the free transformation menu, enter -120 ° in the Rotate window). Now press Ctrl + Shift + Alt + T. You will receive a third object deployed another 120 °.

Step 5. Now we will need to combine all three objects into one. To merge the shapes, do the following: select again Path selection tool (A) (Contour selection tool), select all three objects and on the tool menu, click Merge. To round the edges of the shape just will not work. We will go a different way, passing which we get a slightly different result than the author using Adobe Illustrator. Create a selection by clicking on the thumbnail of the vector mask with Ctrl pressed. Now you can round the edges Select – Modify – Smooth (Selection – Modification – Optimize), enter 10 pixels and click Ok. Go to the Outlines palette and at the very bottom of the palette click on Make a selection of the work path from the selected area. Click on the new contour (in the Contours palette) two times and rename it to “main button”.

Creating a shape “Button bevel”.
Step 6. Since our button has an internal switch – some collective object on the front end – we need to repeat the previous steps, but this time the object will be much smaller.

Creating a shape “Backgr bevels”..
Step 7. I hope you made the previous figure without difficulty, move on to the next one.
We will create only one part of the new object, then reflect it in order to turn out symmetrically.
We continue. Use the tool Pen tool (P) (Pen Tool) and start the steps described in the image below.

Create a duplicate. Using the free transform and flip the shape horizontally. Combine the two mirror objects into one as described in Step 5.

Use the same duplication methods that were described earlier, expand objects to 120 ° so that you get three identical and equally distributed objects (see step 4)

Creating a shape “Lamps”.
Step 8. At the end we will create a circle, with the help of which we will later make light effects around the button. In the final processing in Adobe Photoshop, we will add a shape layer for some techniques with layer masks.

The order of the figures from top to bottom:

Translator’s note (method Photoshop):In the Photoshop tutorial section, namely in the Fundamentals of tools, you can learn more about curves. I hope I helped you!

Part 2.

Step 9. If you performed the first part of the lesson in Illustrator, select all the objects and press Ctrl + C to copy them to the Clipboard.
Close Adobe Illustrator and open Adobe Photoshop. Create a .PSD file with a size of 1024×768 pixels with the following parameters.

Translator’s Note: If you used to create figures in the first part of the lesson Photoshop , then skip this step.

Step 10. Paint the first layer black. Then apply the following effects to create a rear view gradient.

Translator’s Note: If you used Photoshop to create shapes, for convenience, when creating the background, hide the layers with the shapes.

Step 11.
Note: If you used to create shapes Photoshop. then proceed directly to step 14.

Use dark gray and black colors; create a radial gradient with a maximum size (130-150%). Remember that you can drag the center of the gradient to your taste anywhere on the canvas.

Step 12. Now paste the shape layers. Ctrl + V or Edit – Paste (Editing – Paste), paste as a layer-shape.

Step 13. We got a layer-shape at once with all the curves and we must divide it into different parts. Duplicate the layer several times, in our case four times, and in each, remove the extra parts, leaving one that we need separately.

Translator’s Note: the image above shows a window Layers (Layers) in which you see a glued-in shape layer from Adobe Illustrator – Shape 1 (in the vector mask thumbnail all the figures are shown at once), to divide this layer into its component parts, to further work with them, select the Path Selection Tool (A) (Contour Selection Tool). Now make three copies of the layer shape. Next, select, for example, on the bottom layer, the Thumbnail of the vector mask, then on the image start to select (just click on the edges of the object) the shapes you want to delete and click on Delete (in the next step you can see that the author left the shape he made in Adobe Illustrator in step 15), so repeat for the rest of the shape layers. And make sure that you have selected not only the layer-shape of the object being edited, but also the Thumbnail of the vector mask with which you delete unnecessary objects (recall that it is highlighted by simply clicking on it in the Layers Palette on the desired layer)!

Step 14. See how the order is organized in the layers in the image below and do not forget to name each layer to make it easier to work. The remaining layers will be added in the process of working in Adobe Photoshop. Add a layer style for the main button shape.

Step 15. Clicking a double click on a layer opens the Layer Style window for editing effects. On the menu Blending Options – Default (Blending options – Defaults) Deselect opacity to zero to see only layer styles. Next, add a Radial gradient using the same colors as the rear view. # 333333 (dark gray) and # 000000 (black). To make it gently flow from the center to the corners, zoom to 120%.

Step 16. Via Blending Options – Inner Shadow (The blending options are Inner shadow) and the Use Global Light option is disabled, since we always use 90 °, we invert this shadow, set the angle of the shadow to -90 °. This will enhance the shadow at the bottom of the button.

Step 17. We finished the first part of the edit button. Now we have the front part ready, the dark surface of which later we will add shine and pseudo 3D.

Step 18. Create a chrome stroke around the button. Add 3x Pixel Stroke with Gradient Fill Type Blending Options – Stroke (Overlay options – Stroke). We will add a gradient with many details inside the stroke. We will try to depict a chrome metal surface that will reflect the horizon and the sky in front of the button.

Step 19. Turn on the Gradient Invert option to expand the reflective effect of chromium. By turning the angle of the gradient we will place the light as we like. In this case, the maximum light will look good if it is placed at the top of the stroke.

Step 20. To add more light and shadow to the chrome surface for a metal effect use Blending Options – Bevel and Emboss (Overlay options – Emboss) and Gloss Contour (Gloss Contour), see settings below.

Step 21 Via Blending Options – Inner Glow (Blending options – Inner Glow) we will add embossing to the inner edges if it looks like 3D, try to make the corners merge with the objects behind.

Step 22 Now we need a selection to draw some details on the button. First, use the button shape and create a selection, which we will use as a mask for painting. In the Paths window, select the curve buttons to create a selection from this shape.

Step 23 Next, squeeze the selection: Select – Modify – Contract (Selection – Modification – Compress). Use 10 pixels as the size of the compression.

Step 24 Now soften the selection a little: Select – Modify – Feather (Allocation – Modification – Feather). Feather radius set 1 pixel and click Ok.

Step 25. Hide selection Ctrl + H to better see the editing. Via Brush tool (B) (Brush tool), 35 pixels and 10% Press, draw on a new layer of some type of reflection on the button using white color. Since the light on the button falls from above, more brightening of its upper part is needed, and the lower dark part should be slightly brightened with small patches of light.

Step 26. With a still invisible selection (to return visibility, press Ctrl + H) we will remove a little from the fact that we painted with a brush in order to add some interesting effect.

Step 27. Hide selection again Ctrl + H and press Delete, this will erase the extra brush strokes. This allows us to work manually and polish our work creating embossing, which enhances the 3D look of the button and gives the effect of a plastic surface.

Step 28. And so we did away with the main part of the button. Now let’s create a place for the switch in the center. First, remove the shape layer Opacity to 0%.

Step 29. Create a new effect for the layer: Blending Options – Inner Shadow (Blending options – Inner shadow), change the angle just as we did earlier for the main part of the button. See settings below.

Step 30. Add a stroke to separate the two objects from each other: Blending Options – Stroke (Overlay options – Stroke).

Step 31 Next, put a shadow on the surface: Blending Options – Drop Shadow (Overlay settings – Shadow), Blending mode – Screen (Blend Mode – Lightening), color is white. Size – 2 pixels for clarity, to create a depressed effect, you need to add a little light on top.

Step 32 Create an emboss for the inside of the button: Blending Options – Inner Glow (Overlay settings – Inner Glow).

Step 33 The main part is ready. In fact, this button is located in the background: through the added effects, we see that it is inserted on the background surface, has a metal stroke around it and contains a button inside, which when pressed is pressed.

Step 34 Now we will create a switch icon on the button. Download the free font from the archive.
Write in this font the letter “q”, 48 size.

Step 35 In the image below you can see how the emboss effect is superimposed on the icon, change the size of the stroke to 3 pixels, the color is the same as the surface of the button, then apply the settings Stamping.

Step 36 Embossing will allow us to create a beveled effect that will separate the icon from the background.

Step 37. Finally, create a metal texture for the icon, see settings below.

Step 38 Now we will create three LEDs, the light of which will turn on when you hover the cursor on the button. First, give the shape layer a color: # 06B9FB, double-click on it to select a color.

Step 39. Using the shape layer of the main shape of the button, we will create a selection.

Step 40. We need to expand the selection: Select – Modify – Expand (Allocation – Modification – Expand).

Step 41 As a size, set 8 pixels and click Ok.

Step 42 Invert the selection: Select – Inverse (Selection – Inversion).

Step 43 With this selection, we will create a mask to get our LEDs around the button.

Step 44. With the help of the Stroke, the color is the same as that of the button surface (the number of the color is shown below in the image), we will make a contour around the world. This will allow us to separate the object from the surface of the background.

Step45. With Embossing we get a darkened top and a clarified bottom. Strokes (light falls from above).

Step 46 With inverted Blending Options – Inner Shadow (The blending options are Inner shadow) and Blending mode – Multiply (Blend Mode – Multiplication) we create acrylic reflections over the top of these LEDs.

Step 47. At the end we will add the Shadow, Blending Options – Drop Shadow (The blending parameters are Shadow), this will allow you to imagine that this detail in the button design changes the surface of the background, when you press the button, a shadow is created around the LED.

Step 48 Below you can see what our button looks like now, but some effects are still missing.

Step 49 Duplicate the shape layer and fill it with white. We will create light to the LEDs using Blending Options – Outer Glow (Overlay settings – Outer Glow), settings below.

Step 50. Add light next to the LEDs using the Shadow and blending mode: Brighten: BlendingOptions – Drop Shadow (Overlay settings – Shadow), Blending mode – Screen (Blend Mode – Lightening).

Step 51 The main part of the button is ready. Now, using the selection with a feathering radius of 20 pixels inside the new layer, make the background having a convex view behind the button, which will create a soft ball from the center, the light on which falls on top.

Step 52 Fill the selection with white, previously mentioned the radius of feathering – 20 pixels. You can use the tool (G) (Fill tool) or the keyboard shortcut Alt + backspace, to color the layer you use Paint bucket tool as the main one.

Step 53 Remove to zero Fill opacity in the edit window Layer style

Step 54 Now the gradient menu, 50% opacity as well as blending mode Overlay (Overlap) (use white and black colors) we will increase the feeling of the spherical shape of the button background.

Step 55 Now we are done with the button and all its details. It remains to modify the background, add embossing using the remaining figures..

Step 56 As always, remove the fill up to 0%.

Step 57 Use the Stroke to create a relief, settings below for embossing in the background.

Step 58 White Shadow and blending mode Screen (Clarification) we will make as if the light falls on top of the emboss.

Step 59 Finally, remove extra embossing areas with a 20-pixel radius. Thus, they will merge gently with the background and disappear along the edges.

Conclusion. We have come a long way, but the result is worth it. At the end you can add a highlight on the chrome stroke. Always save your work in a .PSD file, this will save all effects and objects of work. You can see the finished work below or the image of the original size here.

Author: Alberto Sosa
Transfer, Adaptation under photoshop: John Jackson

Like this post? Please share to your friends: