The most versatile section of the Photoshop tutorials, it includes guidelines on drawing and editing of different objects in Photoshop.  Home Photoshop Drawing Techniques Globe Button for Your Website

Globe Button for Your Website


Let's begin! Make a new document with the resolution 500x300 for this tutorial and fill this canvas with white color. Then select the Rounded Rectangle Tool (Radius: 30 px) and draw the next shape using the color of #d61d23.

Globe Button for Your Website image 1

After that apply following layer styles to this layer:

Globe Button for Your Website image 2

Globe Button for Your Website image 3

Your button should look as mine:

Globe Button for Your Website image 4

Now, time to bring reflection to the button. Duplicate current layer using Ctrl+J, then create a new one and flip it with copied layer to get all layer styles in one layer. After that flip it vertical with Edit > Transform > Flip Vertical as on my picture below:

Globe Button for Your Website image 5

To make reflection more transparent at the bottom of the picture apply Quick Mask Mode with gradient as below:

Globe Button for Your Website image 6

Then go back to Standard Mode. Now we have some selected area. Press Delete to clear image into the selected area.

Globe Button for Your Website image 7

Remove selection with Ctrl+D. Go to the next step. I would like to add some glare to the button. To do this select the Rounded Rectangle Tool (Radius: 80 px) and create a new one form using white color.

Globe Button for Your Website image 8

Rasterize this layer with Layer > Rasterize > Shape. After that apply Quick Mask Mode one more time and fill the next gradient:

Globe Button for Your Website image 9

Go back to Standard Mode and we received selected area again. Press Delete to clear selected part of image.

Globe Button for Your Website image 10

Deselect chosen area with Ctrl+D and change layer mode to Overlay for current layer.

Globe Button for Your Website image 11

We are done with the button. Now, move to the next step. I think it will looks better when we will put some design elements on it. To do this get out the Ellipse Tool and create rounded shape as on my picture below using white color:

Globe Button for Your Website image 12

After that apply such Blending Options to this layer:

Globe Button for Your Website image 13

Globe Button for Your Website image 14

Globe Button for Your Website image 15

Globe Button for Your Website image 16

See the result below:

Globe Button for Your Website image 17

Time to bring some picture to our rounded design element. Find some picture of the Earth on the Google Images or use mine or find it somewhere. Open it and reduce a little bit, then place the picture as shown below.

Globe Button for Your Website image 18

Good, then make it black and white using Image > Adjustments > Desaturate (Ctrl+Shift+U) and change layer mode to Overlay for this layer:

Globe Button for Your Website image 19

Select the Sharpen Tool (Brush: 100 px, Mode: Normal, Strength: 40%) to make this fragment more sharpen.

Globe Button for Your Website image 20

And the last one thing that we need to do. To finish off the tutorial let's add some text. Get out the Horizontal Type Tool and write out something with white color like on my picture below.

Globe Button for Your Website image 21

In the above image I've used Segoe UI as my font of choice, and I've used white color. Actually, it is commercial font, but if you don't have it, you can easily find a good alternative, for example, Arial Black. After that apply the following layer style to this layer:

Globe Button for Your Website image 22

Now, we have something like this.

Globe Button for Your Website image 23

Great! Our work is done! Enjoy your own cool globe button. Also you can change it color.

Globe Button for Your Website Tutorial: Final Result



Author's URL: PhotoshopStar
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Globe Button for Your Website"

Only registered users can write comment

No comments yet...