The most versatile section of the Photoshop tutorials, it includes guidelines on drawing and editing of different objects in Photoshop.  Home Photoshop Drawing Techniques Stylish Icons for Website or Multimedia Presentation

Stylish Icons for Website or Multimedia Presentation


So, let's start! In the beginning create a new file about 500x300 pixels and fill it with white color. Now, proceed directly to creating the icon. Create a new layer, then select the Ellipse Tool to make the round shape as you can see on my picture below.

Stylish Icons for Website or Multimedia Presentation image 1

After that apply following Blending Options: Gradient Overlay and Stroke.

Stylish Icons for Website or Multimedia Presentation image 2

Stylish Icons for Website or Multimedia Presentation image 3

Now we have something like this:

Stylish Icons for Website or Multimedia Presentation image 4

Not really looks like icon is not it? Don't worry, we process the tutorial. Now, use the Elliptical Marquee Tool to make the selection what you can see on my screenshot below, then create a new layer and fill the selection with dark blue (#1c2133) to transparent gradient.

Stylish Icons for Website or Multimedia Presentation image 5

Ok, now select our round shape icon (Ctrl+Left click on the layer thumbnail in layers palette) and invert the selection with Ctrl+Shift+I. clear selected area by pressing Delete button.

Stylish Icons for Website or Multimedia Presentation image 6

Deselect chosen area with Ctrl+D and move to the next step of the tutorial. Use the Ellipse Tool again to make a new one round shape with color of #5ebf1a. Be attentively that second one round shape should be a little bit less then the main shape.

Stylish Icons for Website or Multimedia Presentation image 7

Then apply such layer styles as Inner Glow and Stroke to this shape layer.

Stylish Icons for Website or Multimedia Presentation image 8

Stylish Icons for Website or Multimedia Presentation image 9

Stylish Icons for Website or Multimedia Presentation image 10

But we are not finished the icon yet! Go on! Rasterize this shape with Layer > Rasterize > Shape. Then get out the Elliptical Marquee Tool to make the similar selection as was before in the beginning of this tutorial, then use the Dodge Tool (Brush: 100 px, Range: Midtones, Exposure: 20%) to make the bottom part of green shape a little lighter.

Stylish Icons for Website or Multimedia Presentation image 11

After that invert the selection with Ctrl+Shift+I and change Dodge Tool Range from Midtones to Highlights and continue to work.

Stylish Icons for Website or Multimedia Presentation image 12

Ok, after that revert the selection back and now use the Burn Tool (Brush: 100px, Range : Midtones, Exposure: 30%) to add the contrast to the button.

Stylish Icons for Website or Multimedia Presentation image 13

Ok, we are almost done! Remove the selection with Ctrl+D and move to the next step. I would like to bring some ornament to the green shape. Select the Custom Shape Tool and use one of the standard Photoshop shapes from the gallery. I tried to use this one:

Stylish Icons for Website or Multimedia Presentation image 14

It will look better if we apply some Blending Option such as Drop Shadow

Stylish Icons for Website or Multimedia Presentation image 15

The result should be the same as mine:

Stylish Icons for Website or Multimedia Presentation image 16

Ok, now merge all of layers of the icon in one and apply Edit > Transform > Distort:

Stylish Icons for Website or Multimedia Presentation image 17

After that duplicate this layer using Ctrl+J and move the lower original layer as in my picture below:

Stylish Icons for Website or Multimedia Presentation image 18

Use the Color Overlay layer style for this layer.

Stylish Icons for Website or Multimedia Presentation image 19

See the difference now?

Stylish Icons for Website or Multimedia Presentation image 20

It remains to add a shadow at the bottom and our icon will be ready. Ok, move to the background layer and create a new layer above. Select the Elliptical Marquee Tool to create the selection as on my picture below and fill it with black color.

Stylish Icons for Website or Multimedia Presentation image 21

Deselect this layer with Select > Deselect and apply Filter > Blur > Gaussian Blur with similar settings to these:

Stylish Icons for Website or Multimedia Presentation image 22

Then apply another one Filter > Blur > Motion Blur.

Stylish Icons for Website or Multimedia Presentation image 23

The result should be the next:

Stylish Icons for Website or Multimedia Presentation image 24

Ok, we are done for now! Also I made a couple of icons more. Try to experiment and the result will be better that ever!

Stylish Icons for Website or Multimedia Presentation Tutorial: Final Result



Author's URL: PhotoshopStar
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Stylish Icons for Website or Multimedia Presentation"

Only registered users can write comment

No comments yet...