As a beginner who wants to become a better graphic designer or web designer we all start learning on our own by reading tutorials around the web. We search things that we like to learn, such as a button effect tutorial, typography, web layouts, illustration, and a lot more. Along the way we end up hopeless, thinking that we can’t be as good as already established designers and then just stop there. Have you been there? I’ve been at that point. And I’m telling you, don’t look down on your skills because every person who strives hard will eventually reach success.

Be Curious of the things that you cannot do

So you were probably searching the web and came across a great and well-designed website and you were like, “oh, wow! What a lovely design!” Then you probably asked your self these questions:

How did they do these buttons, the shadow effect and 3D effect?
What color scheme did they use?
What is the actual width of the website?

Quick Challenge

First, I’ll assume that you know the basics of Photoshop. Here’s the thing you need to do. Don’t look for a tutorial out of it first, because you probably will end up searching the wrong effect you want to achieve, but instead, open up Photoshop and try to copy the effect of the button.

Sounds hard, right? Since you don’t know how to replicate the technique yet. But what’s good about this is that you will explore the Blending Options Panel and while playing with it, you will probably come across with other bunch of effects until you achieve the effect. I know, I know it will not be a 100% accurate imitation, but the good thing is that you will learn something while playing.

Second, you are curious of what color scheme they used? Well, it’s easy to find out how. Take a screenshot of the website and paste it on Photoshop, then use the Eye Dropper Tool(I) to inspect and find out the color.

For a quicker process, here are some browser extensions:

Chrome: Eye Dropper
Firefox: ColorZilla

Finally, here’s how to know the width of the website. It’s basically the same process on how to pick a color, but this time using the Ruler Tool(U).

Browser extensions:

Chrome: Page Ruler
Firefox: MeasureIt
Here is a simple challenge for you to figure out yourself.