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).
- Chrome: Page Ruler
- Firefox: MeasureIt
Here is a simple challenge for you to figure out yourself.
Using Blending Options and find out how to make the following buttons as shown in the screenshot bellow without using Stroke.