Step 1
Step 2
Lay out the guides.
-
For Vertical Guides use 0px, 32px, 64px, 96px, 128px
-
For Horizontal Guides use 0px, 20px, 128px
Step 3
Step 4
Step 5
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
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%
Blend Mode: Normal
Opacity: 100%
Gradient: 1d1d1d to 292929
Style: Linear
Angle: 90
Step 9
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
Step 11
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
Step 15
Color Blending Option Settings:
Blend Mode: Normal
Color: ffffff
Opacity: 100%
Step 16