With this tutorial we will create a hi-tech style button that can be used in splash pages, applications or Powerpoint presentations. We will use Illustrator to create complex vectors and Photoshop to develop realistic effects.

Step 1

Using Illustrator we create a rectangle with the size shown. With the Rectangle tool we click on the work area and a window will appear that will allow us to determinate the exact sizes for the object. I recommend to set Illustrator preferences using pixels as measure unit.

Step 2

We place a guide as a reference for horizontal alignment. Using the Plus Pen tool (to add anchor points to an existing vector) we add one extra anchor point in the upper side of the rectangle.

Step 3

Now we select this new anchor point and take it higher than the line and we separate the lower anchor point from each other to obtain an object with this approximated shape.

Step 4

With the anchor point handles we use the upper point as an axis for a soft curve.

Step 5

Now we have to get two more objects that will integrate a three point object. We rotate this vector using its central bottom part as rotation axis. To start we select the Rotation tool and click on the bottom part. Then we will see the cursor change into a little black arrow.

Step 6

Pressing Alt key (that it is used to duplicate –you will see the black arrow together with a white arrow), we drag the object. We use the Information window to rotate the duplicated object a certain amount of degrees. Considering this is a three point object, we must divide 360° for this number (3), so our duplicated vector must rotate 120°. Drag it until you see this approximated number in the Info window.

Step 7

Pressing Ctrl+D (Windows) we automatically duplicate what we have done. So this vector will be duplicated again at 120°.

Step 8

We unite these objects into one. In the Pathfinder window we unite the vectors: click the Unite option and click the Expand button to convert the group into one solid object.

Step 9

Now we round the corners of this object. Go to Effect > Stylize > Round Corners.

Step 10

Set a 10 pixel Radius and preview the result by checking the Preview option box. The Radius depends on the curves amplitude you have drawn in the main object. With the Preview option you will realize if the Radius softens correctly the corners: if the amount of pixels is excessive the object will look distorted and not softly rounded.

Step 11

Now let’s separate the appearance (the created effect) from the original vector. Go to Object > Expand Appearance and obtain the final vector.

Step 12

This is the result of our work with vectors in Illustrator. It is a complex object to be done manually and this is why we use some techniques to achieve a symmetrical and ergonomic vector.

Step 13

As our button will have an inner insertion –some kind of assembled object in the frontal part- we will repeat the previous steps but this time with a much smaller and shorter object.

Step 14

Following exactly the same steps from Step 1 to Step 12, we create this new object. The rest of the vectors can be created manually or in an automatic way without so much complexity.

Step 15

We create just one half of a new object and then we reflect it to make it symmetrical. Please follow carefully the steps you see on this graphic.

Step 16

Using the Reflect tool we duplicate the object keeping the Shift+Alt keys pressed.

Step 17

Now we unite both halves using the Pathfinder tool. You can erase the remaining anchor points of this union with the Minus Pen tool.

Step 18

We use the same duplication method described before, rotating the object 120° to obtain also 3 identical objects and evenly distributed.

Step 19

Finally we create a simple circle, a vector that will be used as LEDs that will light up the button in its hover state. We will finalize the editing in Photoshop to add shaped layers masking techniques.

Step 20

Now we select all the vectors and pressing Ctrl+C (Windows) we copy them into the system clipboard.

Step 21

We close Illustrator and we open Photoshop. We create a .PSD of 1024×768 pixels and this initial configuration.

Step 22

We paint the initial layer in black. Then we apply a layer style to create a background gradient.

Step 23

Using dark grey and black colors, we create a Radial gradient and take it to its maximum scale (130-150%). Please remember that in this layer style window you can drag the gradient to take its center to the place in the screen that you wish.

Step 24

Now we paste the vectors as Shape Layers. Ctrl+V or Edit > Paste.

Step 25

We have the vectors in one Shape Layer and we must separate them in different layers. Let’s duplicate as much layers as parts we have got -4 in this case- and eliminate the unnecessary objects on each of them leaving the shape we are interested in.

Step 26

The order of the layers is the one you see in the picture and do not forget to name every layer to organize better your work. Some layers will be added to these ones that will be created completely in Photoshop. We will add layers styles to our main button.

Step 27

Making a double click on the layer at the main button window, we open the Edit window of this layer styles. On “Blending Options: Default” we take the opacity of this layer to zero in order to see only our layer effects. We start by adding a circular gradient using the same background colors #333333 (dark gray) and #000000 (black). Make sure this gradient is soft from the center to the edge, increasing its size up to 120%.

Step 28

With an inner shadow and unclicking the Use Global Light option (that we will ALWAYS use at 90°) we invert this shadow, dragging the angle editor of the shadow to -90°. This will help us to reinforce the bottom area shadows. .

Step 29

We have concluded the first part of the button editing process. We now have ready the frontal part of it that has an opaque surface that we will later add gloss and pseudo 3D extrusions.

Step 30

Now we create a chromed stroke around the button. We add a 3 pixel Stroke with Gradient type fill. We add some more details to this gradient inside the stroke. We reproduce a chromed metal reflective surface where we use the resource of reflecting the horizon and the sky of an outdoor stage.

Step 31

We apply the Reflected style to the gradient to enlarge the amount of chromed reflections. By turning the angle of the gradient we place the lighter areas where we wish to. In this case the maximum brightness should be seen in the upper area of the stroke.

Step 32

Now we make the chromed surface more complex by adding more lights and shadows details to the metal. With Bevel & Emboss and the Gloss Contour you see in this picture we add more little details to the surface.

Step 33

With Inner Glow we add an inner beveled edge to the button as if it was 3D, trying to make sharper the merge with the object’s background.

Step 34

Now we need a selection to paint some details manually over the button. The first step is to use the shape layer of the button and obtain a selection that will be used as a mask for it to be painted. Go to Paths window and select the button layer to create a selection with the same shape.

Step 35

Now we contract the size of this selection by going to Select > Modify > Contract. We reduce 10 pixels the selection from its original size.

Step 36

Now we soften the selection. Go to Select > Modify > Feather or Alt+Ctrl+D (Windows). We apply 1 pixel feather and press OK.

Step 37

We hide the selection using Ctrl+H to visualize better what we will do. With the Brush tool, using a 35 pixel brush and a 10% Flow, we paint inside a new layer some light reflections over the button, using white color. As the light of our scene comes from above, we will apply more brightness to the upper area of the button and we will enhance with little light spots some dark areas in the bottom part of the object.

Step 38

Still holding our selection (which will become visible again with Ctrl+H) we reduce it some pixels to erase a little of the work we have done with the brush and achieve a more sophisticated effect. This time we contract 3 pixels the selection.

Step 39

We hide this selection again by using Ctrl+H and pressing the Delete key we erase some parts of our previous brush traces. This allowed us to paint manually and then polish our work creating a beveled edge area that reinforces the 3D aspect of the button and giving a plastic texture to its surface.

Step 40

We ended the button structure. Now we must create an insertion on its center. The first step is to bring the shape layer opacity to zero (0%).

Step 41

Let’s create a new Inner Shadow in the inverted angle just like we did before for the main button. Make sure to add the values you see in this picture.

Step 42

Now a little Stroke will represent a bevel between both objects.

Step 43

The following step is a Drop Shadow used as a lighted surface by the Blend Mode Screen and the white color. The size of this light must be 2 pixels to make it very sharp, as if it was a beveled edge that receives some light from above.

Step 44

Finally with an Inner Glow we recreate the beveled edge of the inner button. This makes the observer interpret this object as a little beveled edged panel that is meshed inside the main button.

Step 45

We are done with the main button. Actually it is not a button placed on a background: through some additional effects it will be seen as an inset of the background surface, that has a metallic stroke around and that contains a button inside that can be pressed down.

Step 46

Now we create the Power icon of the button. Download this free font: http://www.dafont.com/guifx-v2-transports.font . You will be able to create this object by using the “q” key and this font in 48 points.

Step 47

In this picture you see how we can add an external beveled edge to the icon, using a 3 pixel stroke of the same color than the button surface and then applying the Stroke Emboss effect with these values.

Step 48

The Stroke Emboss effect as an option to create a beveled edge will allow us to create the beveled effect of the icon on the background.

Step 49

Finally we add a metallic texture to the icon using a gradient as you can see in this picture.

Step 50

Now we create 3 leds that will light up the button when we place the mouse over it. The first step is to give the Shape Layer the color #06B9FB, doing double click on it to edit its color.

Step 51

Using the Shape Layer of the main button we create a selection.

Step 52

We expand the size of this selection by going to Select > Modify > Expand.

Step 53

We set an 8 pixels expand and we press OK.

Step 54

We invert this selection by using Select > Inverse.

Step 55

With this inverted selection we create a mask to obtain the final shape and size of the leds around the button.

Step 56

With a Stroke with same color of button surface (use color picker to get it) we create a small bevel around these lights. This will allow us to give the idea of an inserted object on the background surface.

Step 57

With Bevel and Emboss we give an upper shadow and a bottom light to our Stroke (as if the light from above would impact on these beveled edges).

Step 58

With an inverted Inner Shadow and Multiply we create an acrylic reflection over the upper area of these leds.

Step 59

We finalize the edition of these objects with a Drop Shadow that allow us to give the idea that these details in the button design change the background surface, pressing it down and creating shadowed areas around them.

Step 60

This is how our button looks like by now, but there are still some effects missing.

Step 61

We will duplicate the layer of the previous LEDs and paint this new Shape Layer in white. We start to create the light up led effect with Outer Glow and these values.

Step 62

We add the lighting of the area near the leds using Drop Shadow on Screen Blend mode.

Step 63

The Rollover state of the button it’s done. Now, by using a selection with 20 pixels Feather inside the new layer we make the background to have a convex appearance behind the button as if the background would come out from its center creating a soft 3D ball that will react to the above light.

Step 64

We paint this selection in white, previously softened with a 20 pixels feather. You can use the Paint tool or the keyboard shortcut Alt+Backspace that paints the layer with the color you are using as Foreground.

Step 65

We set the opacity of this sphere on zero (0%) in the Layer Styles edition window.

Step 66

Now with a gradient at 50% transparency and Blend Overlay (using white and black colors that are set by default in the gradients editor) we reach this spherical sensation on the button background.

Step 67

Now we are finished with the button and all its details. We just need to create some beveled edges on the background using the symmetrical vectors created in Illustrator.

Step 68

As always we take the opacity to zero.

Step 69

With a Stroke and these values we create the bas-relief of these bevels in the background.

Step 70

With white Drop Shadow and Blend Screen, we create the lighted up area of these beveled edges.

Step 71

Finally we hide a part of these beveled edges with a 20 pixels softened mask. The idea is that these would merge softly with the background and disappear towards the corners.

Conclusion

It was a long ride but the results were worth it. The final touch is a little lens flare over the upper bright area of the chromed edge. Always save a .PSD file with these resources that provide a realistic and photographic effect to reflective objects. You can view the final image below or view a larger version here.