Home > Uncategorized > Tutorials > PhotoShop Tutorials > Designing idea of a button(original tutorial)

Designing idea of a button(original tutorial)

A button has something to say, Please read on.

Download PSD file

1. When began to learn to design and make buttons, I could only set the background color, add shadows, make words white and draw a fillet.

2. Stroke, fonts, Inner Shadow
Through viewing many cases, I then mastered some skills, such as inner strokes and IPX deep color strokes to improve the effect, paying attention to make strokes press close to the color of buttons and never using pure black or pure white color.
Secondly, do not use pure white color as the color of words, but should use a monochrome close to the color of the button as the color of words.
When having mastered the skill of inner shadow, you will discover that high-light buttons look very wonderful.


3. Gradient Overlay
Gradient Overlay can make the button have more texture effects. Try more and you will have new discoveries.



4. 1 pixel Highlight
If it is a variety of Gradient, it has clear lightness and darkness. Secondly, what I want to say here is using vector diagrams to make 1px highlight, along with left, right and up, will make stronger button texture.



5. Blur light overlay
It is one common web button with magnificent highlight. The skill can even overlay yellow light on the red button or purple light on the black button. You can play freely.

6. Pattern Overlay
Generally, pattern overly is to enhance textures on materials like leather, metal and wood, and emphasize the uniqueness of buttons. The overlay here has expanded the texture.

7. Outer Glow
Make use of the outer glow of words to make buttons look more luminous. Take note that the color of light should be close to that of buttons and there should be no big difference between them.

8. Drop Shadow
Don’t always use the default shadow. Try more on their values, and you will have different feelings. Also, add 1px inner shadow onto fonts to make words more raised.


9. 1px inner shadow and Drop Shadow
After having known the usage of inner shadow and projection, try more on the power of 1px. It will make your buttons have a stronger sense of depressed.


10. Inverse Gradient
This skill is mostly used to achieve the effect of button touching, making a big contrast with the static button, so as to remind the users that the mouse hovers over it.

11. Bevel and Emboss
If you can make full use of this skill, it will become magic. It can create button effects in a moment and create metallic texture. Of course, you should adjust its curve in order to do so. You can try it.

12. External auxiliary
Such peripheral assistance will make buttons look more depressed and attractive. Also, pay attention to the PSD gradient of this button. It is not layer overlapping but direct gradient.

13. Increasing the thickness
Such button is in common use now. Add another layer to make the sense of space stronger. It is used in many cell phone application downloading buttons. Pay attention to the usage of its shadown in PAD.

14. Transparent
Peripheral assistance also has such function. Adjust its filling or transparency. The effect of such button is especially outstanding in webs with background.
Light overlapping we discussed before can also be overlapped in this way.

15. Inner Glow
Creating buttons with inner light are hard to master and is easy to get wrong. But it will improve your design if it is used well. Inner light is not limited to bright light, but also include dark light.

16. Detail
There is no so much skills to explain here. The only thing you should pay attention to is details.
Take an example, when drawing a 2px fillet, make the color of words bluer, make the brightness and darkness of the shadow more comfortable, use gradient in strokes, or adjust words that are not alignment before.
All of these are details.
At the beginning, it may take us one minute to create a button. But then, it may take us 30 minutes or even 1 hour to think, adjust and try.

17. Flat
Flat design is popular now. It makes people feel it is very easy to learn and simple.
However, it is not so. It is not so easy as it looks like and there are secret adversaries. It has lowered all texture of shadow. Try to lower the texture to the degree that its existence can not be felt to improve its aesthetic perception.
If you are now asked to design a button, what will you think of?

Let’s review the changing history of buttons. What have you benefited from it?
I am looking forward to discussing more wonderful designs with you!

Anyone is welcomed to redistribute and quote the content only if he or she notes its origin. http://4-designer.com/2013/06/designing-idea-of-a-button-original-tutorial


Link to this page:

Pic link:


Important note:
Pin for file decompression: 4-designer.com