Google Plus has rapidly gained interest of the millions. Just like Facebook’s “Like” button, G+ has a button, but G+ has stylish buttons compared to other social networks.
A couple of days ago I looked at a G+ button, it was pretty cool but I immediately thought that I can design an even better one… and not just me, you can design that as well.
Like all my tutorials, I kept the novice user in mind while creating this so you must give it a try even if you are not a Photoshop guru. And don’t forget to download the PSD download file.
Download this Freebie
Simply enter your email address and the download link will be sent right to your inbox. If you did not get an email please check your junk folder.
We’ll begin with creating the initial shape.
Then Press Ctrl+R for enabling the rulers and place one horizontal ruler in the center, then place one vertical ruler in the center.
Now duplicate the shape layer, we’ll need this duplicate layer in the end of the tutorial so you might wanna hide this shape for now.
Time now to Rasterize Layer.
Then select the Rectangular Marquee Tool and make the selection like I’m doing below. Select a quarter of the shape, and cut it using CTRL+X then paste it on a new blank layer. Repeat the step on all four corners.
Now we have this shape in four parts on four separate layers.
Time for stylizing. Select a layer containing the quarter of the shape, and Go to Blending Modes. Add Inner Shadow.
Some Bevel and Emboss.
Contour as well.
Gradient Overlay is also necessary.
And in the end, a bit of Stroke.
I’m adding the Inner shadow
Now we’ll repeat everything we did in the previous step, but this time, we’ll use another color.
Here I’m Adding Bevel and Emboss
Orange this time.
Bevel and Emboss
This is the last one. We’ll be using red color this time.
Bevel and Emboss
Select the Rounded Rectangular tool, make a square and place it under all the stylized layers.
Adding a Pattern
First, I added some Inner Shadow in this newly drawn box.
Now I need a pattern to fill in it. Now we’ll have to make that pattern, we don’t already have it in Photoshop.
So let’s begin by opening a new blank file.
Draw rulers in the center and create a chessboard kinda design. Now select your design with Marquee Tool.
Go to>Edit>Define Pattern and give your pattern a name.
Now let’s get back to our tutorial. I’m adding Pattern Overlay.
The Finishing Touch
Remember the duplicated vector shape we preserved, its time for that now. Bring it on the top. Rasterize it and then strike Ctrl+Enter so you get a selection on the around the shape. Now Go to>Select>Modify>Contract and set the 15 Pixels and click OK.
Selection is contracted by 15px. Press DELETE button. (Make sure only one layer is selected and you don’t delete anything else).
Now we got this. A white outline around the graphic we made. If your outline is not at the right position, you can move it and even scale it. Time now to delete the outer white outline.
Make a marquee selection inside the outer outline, and hit CTRL+SHIFT+I, this will inverse the selection so now the outer outline is selected, Delete it. We are left with only the inner outline. You can use any other method to delete the outer line, this is the method I used.
Now select the upper half of the white outline, cut it from the layer and paste it on the new layer. Then, CTRL+Click on the thumbnail of the layer containing this upper part, this will select the pixels on that layer. Now just fill black color in it.
Now we have two layers containing half the outline each. Set the blend mode of both these layers to Overlay and adjust the opacity to 50 & 35 percent. Check the result in the final screenshot.
Make it Official
Now all this button needs is the official logo. I grabbed it from Google Plus website. You don’t need a permission to use this logo.
Give it a little bit of drop shadow.