Learn How to Create Glossy Text Gravatar Using Photoshop

Adobe Photoshop is ultimate tool for web and graphic designers, we already so many tricky tutorials to you but in this tutorial we have something for beginners as “Learn How to Create Glossy Text Gravatar Using Photoshop” fully creative and elegant design, we using layers and blending options in this smart photoshop tutorial, making a textual effect using some beautiful font appearance and a complete transparent look.

We have complete solution about our twitter profile picture and gravatar image for wordpress comments as look inspiring to keep user interest, hopefully this basic text effect tutorial give you stylish way of glossy designs through Photoshop.

Step #1 (New Photoshop Document)

We create a new document in Photoshop, i am creating this as 530 x 530 because I want this image to use as wordpress gravatar or twitter profile picture.

New Photoshop Document

Step #2 (Gradient Background)

Create a new layer (Press – CTRL + SHIFT + N)

Create a new layer

with the name of “Gradient Background” as image below, now select Gradient Tool (G), draw in a radial gradient of blue as follow: light blue color #559ee7, middle blue color #2b5884 and darker blue color #112538, so you get something like what is shown below.

radial gradient of blue

 

Step #3 (Add Text Layer with caption)

in this Text Layer we add a caption as “TL” that we call “Tutorial Lounge” with font color #83c2ff, for display in twitter profile image and gravatar, we using font “Helvetica LT Compressed” download here, this is also created image below for reference:

Add Text Layer with caption

Step #4 (Blending Options: Drop Shadow)

we have some specific amount of properties on our text layer where caption is “TL”, all settings are placed in below image:

  1. Blend Mode – Black (#000000)
  2. Opacity – 59%
  3. Angle – 120 with Checked “Global Light”
  4. Distance – 0%
  5. Spread – 0%
  6. Size – 35%
  7. Contour – Gaussian

Blending Options: Drop Shadow

Step #5 (Blending Options: Inner Shadow)

now we go ahead on our text layer “TL” with “Inner Shadow” properties, all settings are placed in below image:

  1. Blend More – Screen using color #ade5ff
  2. Opacity – 75%
  3. Distance – 0%
  4. Choke – 0%
  5. Size – 8px

Blending Options: Inner Shadow

Step #6 (Current Position of our Glossy Text Gravatar)

in this stage we have some creative appearance as we sharing image below as reference because if you following this text effect tutorial, that should be look like:

Current Position of our Glossy Text Gravatar

Step #7 (Blending Options: Outer Glow)

Now we are on “Outer Glow” to keep on our glossy text effect and all settings showing below:

  1. Blend Mode – Overlay
  2. Opacity – 25%
  3. Noise – 0%
  4. Color #a6d0ff
  5. Technique – Softer
  6. Spread – 0%
  7. Size – 32%
  8. Quality Range – 50%

Blending Options: Outer Glow

Step #8 (Blending Options: Bevel and Emboss)

we’re keep on the way of our creative glossy text effect result and setting “Bevel and Emboss” all settings showing below:

  1. Style – Inner Bevel
  2. Technique – smooth
  3. Depth – 100%
  4. Direction – up
  5. Size – 10px
  6. Soften – 0px
  7. Angel – 120 and checked “Global Light”
  8. Altitude – 30
  9. Gloss Contour –  “Con – Inverted”
  10. Highlight Mode – Overlay using color #ffffff
  11. Opacity – 75%
  12. Shadow Mode – Multiply using color #000000
  13. Opacity – 0%

Blending Options: Bevel and Emboss

Step #9 (Blending Options: Bevel and Emboss and Contour)

we have little addition in “Bevel and Emboss and Contour” as we showing below as well:

  1. Contour – Linear
  2. Range – 50%

Blending Options: Bevel and Emboss and Contour

 

Step #10 (Blending Options: Satin)

In this step we setting “Satin” with some specific properties as we showing below as well:

Blending Options: Satin

Step #11 (Blending Options: Stroke)

we are near about conclusion and now adding “Stroke” to make something sharp output.

  1. Structure Size – 1px
  2. Position – Outside
  3. Blend Mode – Normal
  4. Opacity – 44%
  5. Fill color #9bd8ff

Blending Options: Stroke

Step #12 (Text Layer: White to transparent gradient)

We will add white transparent gradient in this step as follow: Hold CTRL and click on Text Layer where caption is “TL” and add a new layer,

Hold CTRL and click on Text Layer

and follow white to transparent gradient as we sharing below in image and settings:

  1. Transparent Layer
  2. Fill Opacity – 35%

Transparent Gradient Editor

white to transparent gradient

Step #13 (Text Layer Re-Create with Elliptical Marquee Tool)

we are adding “Elliptical Marquee” as image below with invert selection (CTRL + SHIFT + i) of Elliptical Marquee and delete all selected area, in return result should be given below:

Text Layer Re-Create with Elliptical Marquee Tool

Text Layer Re-Create with Elliptical Marquee Tool

Step #13 (Custom Shapes – Polygon Tool)

Now select “U” key to create a shinny star on our gravatar or twitter profile image, also follow below properties and guide image also helping as follow as we need results

Custom Shapes - Polygon Tool

Step #14 (Polygon Tool – Replicate Shinny Stars)

in this step we place all shinny stars on some edges to get desired results as follow below image:

Polygon Tool - Replicate Shinny Stars

Step #15 (Twitter Profile Picture)

In this we’re placing this created glossy text gravatar for twitter profile picture, we have sample in below image:

Twitter Profile Picture

Step #16 (Glossy Text Gravatar Showing in Comment Area)

In this we’re placing this created glossy text gravatar for wordpress comment area as prominent and elegant appearance:

Glossy Text Gravatar Showing in Comment Area

Glossy Text Gravatar Final Result

Glossy Text Gravatar Final Result

Download Photoshop Source File

Comments
  1. Posted by Multyshades
  2. Posted by Imran Haider
  3. Posted by PSDDude
  4. Posted by kazirhut

Add Your Comment