Photoshop
Posted By Subhadeep

How To Create A Cool Glossy Shiny Web 2.0 Heart in Photoshop


Recently Web 2.0, glossy, shiny styles have become a craze, everybody wants to move on and create something cool and shiny, why should i be leftover? Yes.. i don’t want my self to be leftover so i created this cool looking web 2.0 heart (give it to whoever it may concern), yepee now i’m a part of 2.0 ..lol

This tutorial will teach you to create glossy heart using 3 aspects

  • Layer Styles
  • Layer Overlay
  • Layer Gradient

Setting Up The Background

Same old first step should i need to say ? anyways create a new file of any size (File >New) i’ll stick to the size 380px*260px.

Change the foreground color to #c1c0c0 and background colour to #e7e8e7

Foreground And Background

Foreground And Background

Select Gradient Tool (G) and on the menu bar select the gradient to Foreground to Background, then using the gradiesnt tool drag from center towards outwards

Gradient Drag

Gradient Drag

This will create a subtle greyish background, its for proper showcasing, its totally optional

The Making Of The Heart

Now we’ll move on the most important thing the heart. Its pretty simple though you just need to select the Custom Shape Tool and select a heart shape from all the shapes (incase you cannot see the heart shape select the small arrow on shape menu and select all, this will load up all the shapes)

custom_shape

Custom Shape

Now drag and draw a custom shape (press shift while drawing it will preserve the aspect ratio)

Heart Drawn

Heart Drawn

Now we need to add some layer styles, make sure you have the heart layer selected and then press the fx button lower edge of layers panel and select gradient overlay

Fx Button

Fx Button

Follow the next image and set all settings to as shown

Gradient Overlay Settings

Gradient Overlay Settings

Then we need to add a 1 px stroke of #cf0000, follow the next image

Stroke Settings

Stroke Settings

Then we need to give it an inner glow, follow the next image

Inner Glow Settings

Inner Glow Settings

Giving The Shine

Now we’ll work on giving it a shine, this step may require couple of try before you come to desired result depending on your photoshop capability. CTRL+Click on the heart layer, this will create a selection of the heart, now without deactivating the selection create a newlayer by clicking new layer on layers panel

New Layer

New Layer

Then select elliptical marque tool (don’t deselect the heart selection) and then click on subtract from selection on top menu

Elliptical Marque

Elliptical Marque

Subtract Form Selection

Subtract Form Selection

Now draw a elliptical marque starting from downwards and going all way around, when you release after drawing the selection will be subtracted, this step requires several tries to get the desired result. If you have donw it wrong press CTRL+Z and try it again

Selection Subtract

Selection Subtract

Once you are done with the selection, press D on your Keyboard and then press CTRL+BACKSPACE, this will fill the selection with white colour. Now deselect and change the opacity of the white layer to 14% and the layer style to overlay. Your web 2.0 shiny heart is ready !!

If you’d also like to add the shadow which i have added here just for showcasing, select calligraphic brush (horizontal and elliptical one) then draw a small very small line and give it a guassion blur and motion blur and change its opacity. do this again but with smaller brush size and you’ll come up with the shadow, if u think you shadow is wide just transform it and make it narrow.

Final Heart

Final Heart

Hope you have enjoyed the tutorial, thanks for visiting…



Currently working as MD in SandBoyMedia. Based in India having keen interest in Design and Development.

    View Comments