Login

Content:

• Easy button
• Medium button
• Complicated button

In this tutorial we will try to create round button in Aqua style.There is a great number of them in Internet and software.That's why we will show 3 buttons, which are should be named Aqua buttons.The first button(see picture) "a" — the easiest and the most common. The "b" button is more complicated and softy. The "c" button is the most complicated, but it is better to show sphere or to be big button.

These three variants are easy to create.Text is accompaned by screenshots on which are shown what is should be created on the left, and tunings of effects are shown on the right. The values in this article are for special objects, and if your object is bigger or smaller, you should set other values. And so we advise you to do everything like our examples(including sizes of objects).

1. Easy button

Its contains:

• Shadow of button (this will be "shadow")
• Body of button (this layer will be "body")
• Outer highlight (this layer will be named " outer specular")
• Scattered light (it will be named "inner diffuse")
  

1.1. Ready steady! Now we are creating (new and empty ) layer and drawing on this round (color #0065cb) like this:

1.2. After this we are covering it by soft gradient. It is necessary for visual depth. Values of gradient are shown on the picture:

1.3. Now we are adding to this object a shadow (it is like a shadow of the top of button because there is a light above this object). We will name this layer "body":

1.4. Now is time to make outer highlight — at first it will be just ellipse.For create this make new layer (name it " outer specular") and with Ellipse Tool drawing on it:

1.5. To make ellipse like specular you should add transparency to it.Create it by Erase tool.Or add mask(make it active), select Gradient tool and fill mask top-down by simple gradient, like this:

1.6. Create inner specular.Duplicate "outer specular" and name it "inner diffuse". Reflect vertical (Edit-> Trasform -> Flip vertcal) and set blending mode from Normal to Overlay — to make specular more similar to color of object:

1.7. To make specular more beliavable, apply filter Gaussian Blur:

1.8. It's time of shadows. Create new layer, name it "shadow" and draw on it small circle with color #003b97 (color of button + slightly darker).This piece of shadow may be also named Reflex, because background mirrors the light of circle, that's why for future I avdise you to take it not simply black or grey, but with dash of button's color (as now):

1.9. Make shadow degraded, using filter Gaussian blur

1.10. Put shadow under circle and slightly stretch for perspective (see picture "a"). Also you can make another shadow, simply add effect Drop Shadow (in place of shadow "a"). Both two views are admissibles, but button "a" likele stand, and button "b" — lies on mount. Usually variant "b" is more popular for buttons and variant "a" — for icons:

1.11. These are pictures of buttons with impositions on them additional symbols.You can experiment with values of buttons to get different variations of colors and reflections:

As you see the buttons are good, if they are small they look very nice. But when they are big they look plain. If you think the same, let's go to more detailed buttons.

2. Medium button

It contains:

• Shadow from the button (it will be named "shadow")
• Reflex from the button (it will be named "reflex")
• Body of button (it will be named "body")
• Outer specular from the button (it will be named "outer specular")
• Inner diffuse of button (it will be named "inner diffuse")

2.1. First steps repeat 1.1-1.5: create new layer and draw on it new circle with color #0065cb:

2.2. (=1.2.) After this cover it with light gradient. We do it for make more visual depth. Parameters of gradient are shown on the picture:

2.3. (=1.3.) Now we are adding to this object a shadow (it is like a shadow of the top of button because there is a light above this object). We will name this layer "body":

2.4. (=1.4.) Now is time to make outer highlight — at first it will be just ellipse.

1. For create this make new layer ( name it " outer specular")
2. And with Ellipse Tool drawing on it:

2.5. (=1.5.)To make ellipse like specular you should add transparency to it:

1. You can make it by Erase tool or...
2. Pick out layer with ellipse
3. Next add mask(make it active)
4. Select Gradient tool
5. And fill mask top-down by simple gradient, like this:

2.6. Create inner specular:

1. Create new layer, name it "inner diffuse"
2. Draw on it white circle
3. And degraded it with filter Gaussan blur

2.7. Move circle down and change Blending Mode to Overlay:

2.8. Cut all the unnecessary:

1. Select middle of button
2. Do inversion of selection (Shift+Ctrl+i)
3. Check up that layer "inner diffuse" is choosed
4. And delete everithing that is selected on it

2.9. Degraded inner specular:

1. Pick out layer "inner diffuse"
2. And use filter Motion Blur

2.10. Add softness to button with effect Inner Glow

1. Beсause object is on background it should accept all reflexes from the sides. Of course this effect is unreal but for this style it is suitable
2. Pick out layer "body"
3. In this case we choose white color, but in the future use color like color of background:

2.11. Add shadow and reflex from the button

1. Create new layer. It will be named "shadow". Next, in fact, we will repeat operations in step 1.8-1.9:
2. Draw simple cirlce by dark color - in this case #003b97, it will be shadow
3. Blur with filter (Gaussian Blur)
4. Create new layer, it will be named "reflex" — it will be reflex from button
5. Draw smaller circle by #cefafe color
6. Blur with filter (Gaussian Blur)
7. Now we will stretch cirles and move it under our button. Оn bottom It must be layer "shadow", over it layer "reflex" and over it layer "body"

So we have something like picture "b" and "c":

3. Complicated button

It contains:

• Shadow from the button (it will be named "shadow")
• Reflex from the button (it will be named "reflex")
• Body of button (it will be named "body")
• Mask of inner highlight (will be named "body mask")
• Outer specular from the button (it will be named "outer specular")
• Bottom outer specular (it will be named "bottom specular")

3.1. We will start from body of button:

1. Create new layer, it will be named "body"
2. Draw circle on layer (Ellipse Tool)
3. Apply radial gradient effect (Gradient overlay) for layer. Use values like screenshot
4. Move gradient just a bit down:

3.2. Create atmosphere reflection by Inner Shadow:

3.3. Repeat last operation, but now with "Inner glow" effect:

3.5. Let's draw outer specular — now just ellipse:

1. Create new layer (it will be named "outer specular")
2. Draw on layer with white color by Ellipse Tool:

3.6. Make ellipse like specular: add trasparency

1. You can make it by few methods: just eraser (Erase tool) or...
2. Or pick out layer with ellipse
3. After that add mask, and make mask active
4. Select Gradient tool
5. And fill mask top-down with usual (black and white) gradient, for result, like here:

3.7. Make mask on inner hihlight:

1. Pick out and duplicate layer "body". Rename new layer "body mask"
2. Turn off in layer "body mask" effects "Inner Shadow" and "Inner Glow":

3.8. Erase inner part of that circle. Do it any method, comfortable for you. For example, you can make radial mask:

1. Pick out layer "body mask"
2. Create mask
3. Select Gradient Tool
4. Choose Radial type
5. Set key colors of gradient like picture, and draw gradient
6. Perhaps, in first time result may be not very cool, but you can try again:

3.9. If position of layer "body mask" not like position of layer "body", you need to move "body mask" exactly over layer "body". Оn top It must be layer "outer specular", under it layer "body mask" and under it layer "body" — like on picture "b":

3.10. Let's draw bottom outer specular: just for intesify refraction from fictitious surface under our button

1. Duplicate layer "outer specular" and name it "bottom specular"
2. Make vertical reflection (Edit -> Transform -> Flip Vertical), like on the picture "a"
3. Decrease gradient in mask like picture"b"
4. And move to bottom of button, like picture "c"

3.11. Add shadow and refraction from fictious surface

1. Create new layer. It will be named "shadow". Next, in fact, we will repeat operations in step 1.8-1.9 or 2.11:
2. Draw simple cirlce by dark color — in this case #003b97, it will be shadow
3. Blur with filter (Gaussian Blur)
4. Create new layer, it will be named "reflex" — it will be reflex from button
5. Draw smaller circle by #cefafe color
6. Blur with filter (Gaussian Blur)
7. Now we will stretch cirles and move it under our button. Оn bottom It must be layer "shadow", over it layer "reflex" and over it layer "body"

We have button like "b' or "c" — with impositions on them additional symbols:

That's all.

You can download ready buttons (with layers) in PSD (free for use)

www.icojoy.com | Zhebrakov Andrew (Andy-S)