Publishing System Settings Logout Login Register
How To Create a Google Plus (Google+) Mobile App Icon Using Photoshop
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on March 7th, 2013
675 views
Adobe Photoshop

 

Step 1

  • Open a new document.

  • Set the size to 128 x 128 or to any size you desire.

Step 2

Lay out the guides.

  • For Vertical Guides use 0px, 32px, 64px, 96px, 128px

  • For Horizontal Guides use 0px, 20px, 128px

Step 3

  • Set canvas size to 600 pixels wide by 400 pixels high. Youcan find the setting at image > canvas size

Step 4

  • Create a new layer. Name it “background”

  • Fill your canvas with a radial gradient using #ffffff to#eeeeee

Step 5

  • Create a rectangle with round edges on the center of thecanvas

  • Fill with color 343434

  • The shape radius must be set to 20 pixels

Step 6

  • Rasterize this layer. Go to layer > rasterize >layer

  • Create 4 duplicates to come upwith 5 similar images

  • Name each layer respectively withany name you want e.g. “icon bottom” for the first layer, “icontop 1” for the second layer, “icon top 2” for the third layer,“icon top 3” for the fourth layer, and“icon top 4” for thefifth layer

Step 7

  • Cut away parts of each layer using the marquee selectiontool and the guides

  • For the “icon bottom” layer,cut off 20 pixels of the icon.

  • For the “icon top 1” layer, cut off all except the 32 X20 px area on top

  • Do the same process on all the other layers

Step 8

  • Apply a bevel and emboss gradient overlay blending option onyour “icon bottom” layer. Go to blending options.

  • Set the Bevel and Emboss Blending on the option settings:

Style: Inner Bevel
Technique: Smooth
Depth: 1000%
Direction: Up
Size: 5px
Soften: 0px
Angle: 90
Highlight Opacity: 0%
Shadow Mode: Multiply
Shadow Color: 000000
Opacity: 15%

  • Set Gradient Overlay Blending to the following options:

Blend Mode: Normal
Opacity: 100%
Gradient: 1d1d1d to 292929
Style: Linear
Angle: 90

Step 9

  • Apply an inner shadow and color overlay blending to “icontop 1” layer to create this image:

Inner Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 15%
Angle: 90
Distance: 5px
Choke: 0%
Size: 0px

Color Overlay Blending Option Settings:

Blend Mode: Normal
Color: f23a3f
Opacity: 100%.

Step 10

  • Apply shadow blending option toother layers. Right Click on the “icon top 1” layer on the layers palette and click copylayer styles.

  • Right click on the other top layers and click paste layers styles.

Step 11

  • Change the color of the other 3layers in the color overlay blending option with the following colors:

Icon Top 2 Layer Color Overlay: 5988f5
Icon Top 3 Layer Color Overlay: 5fb816
Icon Top 4 Layer Color Overlay: ffc000

Step 12

  • Create a new layer. You may nameit “radial gradient” or anything you want.

  • Select the entire image using yourpreferred selection method.

  • Drag out a radial gradient (whiteto transparent) from the top center of the icon.

  • Change blend mode to overlay.

  • Adjust theopacity to 30%.

Step 13

  • Crop a small letter “g” from aGoogle's logo.

  • Paste it on a new document.

  • Go to Select > Color Range.

  • UseEye Dropper Tool andand click on the blues part of the letter.

  • Set thefuzziness to 200.

Step 14

  • Copy and paste the enhanced “g”back to the original document.

  • Position it just about left of thecenter in the dark gray area.

Step 15

  • Go to blending options for the layer where “g” was added.

  • Apply a coloroverlay blending option set to the following:

Color Blending Option Settings:

Blend Mode: Normal
Color: ffffff
Opacity: 100%

Step 16

  • Add the symbol “+” by usingthe Type Tool to completethe Google Plus icon. Use the guides to position correctly.

 

 

Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
Liez

This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top