Tag-Archive for » Icons «

Designer Icons – Professionally Hand-Crafted Free Icon Set

This Free Icon Pack is for use in your personal and commercial projects, and can be used without attribution. It may not be redistributed.

12 Professionally Hand-Crafted icons for designers and creatives. Each Icon is 32×32px with a transparent background.

You won’t find many free designer icons like this anywhere else. This set of icons was professionally crafted by professional icon artist, Parthiban Mohanraj. This set has all the values of stock icons, but we’re making it available for free here on Tutorial9.

Download the Icon Set

Download “Designer Icons”

This Icon Pack Contains:

  • Paint Brush Icon
  • Paint Bucket Icon
  • Easel Icon
  • Palette Icon
  • Camera Icon
  • Wacom Tablet Icon
  • Photoshop Icon
  • Blueprint Icon
  • Macbook Icon
  • Pencil Icon
  • Folder Icon



Create a Set of Glossy Metallic Icons in Photoshop

This tutorial is going to teach you how to make a stylish, metallic Adobe Icon Set with a glossy finish.

Quick Nav:

  • Tutorial
  • Download the PSD (Source Files)

Step 1: Creating a New Document

Step 1 - Creating a new document

We are going to create a new document with a standard resolution of 256px. But because our icon is quite short the height will be smaller.

Next, grab the Paint Bucket Tool (G), and fill the document with the following colour #F2F2F2. This is to make viewing easier.

Step 2: Setting The Base

Step 2a

Step 2b

Using the Ellipse Tool (U), draw an oval on a new layer as shown above. Let’s name this "Top".

Shape layers

Using the Shape layers instead of Fill pixels allows you to transform your circle as many times as you want without quality loss. This is great for experimenting.

Step 3: Going 3D

Stpe 3a

Step 3b

Select your Move Tool (V). While holding down the alt key, press the down arrow 20 times. This will determine the height of the icon. Now select the past duplicates and Merge (ctrl+E). Arrange that layer below the "Top" layer. Remember that there should be one extra layer named "Top". We’ll just name this new merged layer "3D" for readability.

Step 4: Layer Styles

Now we are going to apply some Layer Styles to the "Top" layer (the non-3D one). You can do this by double clicking on the layer.

Step 4aStep 4bStep 4cStep 4d

You should end up with this:

Step 4e

Step 5: 3D Layer Styles

Now select the "3D" layer and apply the following Layer Styles.

Step 5aStep 5bStep 5c

Once you are done you should have this:

Step 5d

Step 6: Creating The Shadow

Create a new layer below the previous two layers and name it "Shadow". Get the selection of the "Top" layer by ctrl+clicking on the layer icon. Fill the selection with Black and Deselect (ctrl+D) it. Go to Filters>Blur>Gaussian Blur and use 5px. Set the Opacity to 75%. Using the Move Tool (V), shift the shadow down just below the body of the icon.

Step 6a

Step 7: Adding Polish

Create new layer right at the top. Get a White Brush with a Hardness of 0% and Master Diameter of 125px. Get the selection of the "3D" layer and Brush once at the corner. Set the Opacity to 85%.

Step 7

Create another layer and get a Black Brush with a Hardness of 0% and a Master Diameter of 20px and Brush it downwards while holding Shift. Use Gaussian Blur with 8px. Now ctrl+click on the "3D" layer icon then ctrl+alt+click on the "Top" layer mask icon. Finally invert your selection with ctrl+shift+I and Delete the selection. Repeat the same process with a white Brush with 25px Master Diameter and set the Opacity to 70%.

Step 7b

Foreground & Background Colour

You can easily switch your background and foreground colour by pressing D. You can swap colours between the two by pressing X.

Step 8: Adding Glow

Create a new layer and name it "Glow". Get the selection of the "3D" layer and move it up by 7px. Fill the selection with the following colour: #6ab2f6. Before deselecting, shift the selection up by another 3px and press Delete. Bring down the Fill to 70%.

Step 8a

Now give it the following Layer Styles.

Step 8bStep 8cStep 8dStep 8e

Get the selection of the current layer and create a new layer. Get a White Brush with 0% Hardness and 300px Diameter and and click once right in the center of the selection. Bring down the Opacity to 70%. Set the Blending Mode to Overlay.

Step 8f

Brush cursor

you can easily find the center of the Brush cursor by pressing Caps Lock. Or you can go to Edit>Preferences>Cursors and enable "Show Crosshair in Brush Tip".

Step 9: Adding Definition

Create a new layer and get the selection of the "3D" layer. Fill the selection with any colour you want. I chose black for easier reference. Bring the Fill to 0% and add the following Layer Styles.

Step 9aStep 9b

Create another layer and get the selection of the “Top” layer. Shift it down by 4px and Fill it with black. Move the selection up by 2px and press Delete. Apply a 1px Gaussian Blur to it and set the Opacity to 10%.

Step 10: Making it Shine

Create a new layer with the Opacity of 75%. Get the selection of the “Top” layer and get a white Brush with 0% Hardness and 250px Diameter. Click once right at the edge of the selection.

Step 10a

Now create a new layer and get a Pen Tool (P). Draw it as seen below and right-click>Make Selection. Fill it with White. Set Opacity to 25% and Fill to 50%. Get the selection of "Top" layer and Invert Selection (ctrl+shift+I) then press Delete. Apply the following Layer Styles.

Step 10bStep 10c

Repeat the same process except with a different Layer Style so that it looks like so.

Step 10dStep 10e

Create a new layer with 80% Opacity. Click once with a White Brush on the edge of the selection of "Top" layer. It has 0% Hardness, 200px Diameter. Create another layer. With the same selection and same Brush with 70px Diameter, click once at the same spot.

Step 10f

With a new layer, get a selection of the "Top" layer and shift it down by 1px. Fill it with White and shift the selection up by 1px then press Delete. Apply Gaussian Blur with 1px.

Step 11: Creating The Face

Duplicate (ctrl+J) the "Top" layer, place it right at the top and rename it to "Inner". Transform (ctrl+T), and while pressing alt+shift, and shrink it as shown below. Then add the following Layer Styles.

Step 11aStep 11bStep 11cStep 11d

Create a new layer and get the selection of "Inner" layer. Using a White Brush click once at the center, bottom edge of the selection. Set the Opacity to 40%.

Step 12: Creating Depth & Detail

Duplicate the "Inner" layer and place it right at the top. Clear the Layer Style by right-clicking on the layer then "Clear Layer Style". Apply the following Layer Styles to it.

Step 12aStep 12bStep 12cStep 12dStep 12e

Create a new layer and get the Gradient Tool. You can select this by first selecting the Fill Tool (G) then pressing Shift+G. Set the colours to Default (D). Select the Radial Gradient option. Get the selection of "Inner" layer and Fill it as shown, then set the Opacity to 20% and Blending Mode to Screen.

Step 12f

Step 12g

Create a new layer. Get the selection of "Inner" and nudge it down and right once each. Fill it with White then nudge it back to it’s original position and press Delete. Set the Opacity to 80%.

Create a new layer and while using the same selection, nudge it down by 4px. Fill it with White and nudgeit down another 1px then press Delete. Set the Opacity to 30%.

Now create a new layer and and grab the Pen Tool and draw the following shape. Notice the point of contact between the shining areas. Also apply the following Layer Styles with 15% Opacity and 50% Fill.

Step 12hStep 12i

Step 13: Adding Alphabets

Create a new layer and select the Type Tool (T) with any colour. Use Arial as the font and set it to Bold and 98px. Any font is fine actually. Now type in "Ps" and place it in the center of the icon. Right-click on the layer and click Rasterize Type. Transform it and shorten it slightly. Right-click the bounding box and click Perspective. Squeeze the top in to make it look 3D. Later add the following Layer Styles with 0% Fill.

Step 13aStep 13bStep 13cStep 13dStep 13e

Step 14: Final Details

Create a new layer. Get the selection of the "Ps" layer and nudge it up and right once each. Fill it with White then shift the selection back and press Delete. Set the Opacity to 30%.

Finally create the last layer and get the selection of the "3D" layer. Fill it with White and apply Filter>Noise>Add Noise with Gaussian and Monochromatic enabled. Set the Blending Mode to Multiply and Opacity to 30%.

Now you are DONE! You can hide or delete the background if you want to export it as an icon. But it’s not over if you want to make a set. For now your icon should look something like this.

Step 14a

Step 15: Creating a Set

You can save this document and duplicate it. Open the new one and find for the layer called "Glow". Temporarily hide the layer right above it. Now go Image>Adjustments>Hue/Saturation or (ctrl+U) for layer "Glow" and adjust the Hue to whatever you like. Once you’re done, go to the Layer Style>Outer Glow and adjust the colour to whatever you like. Now you can un-hide your above layer.

Navigate to your font layer. Delete it and repeat the process I taught you to create another alphabet you want. Remember to change the above layer which is the edge shine. Repeat this step for as many other icons you want.

Download the PSD and Icon Set

Download the Icon Set



Metallic Adobe CS Icons

This Free Icon Pack is for use in your personal and commercial projects, and can be used without attribution. It may not be redistributed.

Download Free Icon Set

Download Icons



Category: Tutorial  Tags: , ,  Leave a Comment

Free Finance Icons from IconShock

Our friends at IconShock have designed another set of free icons especially for the readers of the Vandelay Design blog. This set includes 6 icons (in PNG format) that can be used for personal or commercial purposes.

Finance Icons

Download the icons (zip file)

If you want some more icon sets just check the huge stock icons library of IconShock.

You may also be interested in these other sets designed by IconShock for the Vandelay Design blog:

  • Gadget Icons
  • Portfolio Icons
  • Business Icons
  • Office Icons

The Ultimate Roundup of iPad Icons, Tutorials and PSDs

Since the iPad is Apple’s latest creation there’s bound to be many freebies for it and this article shows you the best of what is out there for your iPad (they’re free too!). For those of you who don’t know what an iPad is it is a tablet computer which has many key tasks such as browsing the web, email, sharing photos, watching videos, playing games, and reading digital book. The iPad also has many features including: Safari, App Store, iBooks, Maps, Notes, Calendar, Contacts and more. In this article we have written a round-up of iPad Icons, psds and tuts on how to draw it. Hopefully it will help you in future projects.

iPad Icons

1. 18 Different iPad Icons


This icon pack includes .ico, .icns, .png, 6 different motives and 3 different perspectives.

2. iPad Icons


512px high-resolution iPad icons for mac osx and other os.
License: Some rights reserved. This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

3. iPad Icons by Enthusiastik


2 iPad icons in a .png format.

4. Free Apple iPad Icon Set


The pack includes the full size graphic, as well as 256px, 128px and 64px icons sizes.includes four sizes of the iPad graphic, in PSD, PNG and Mac ICNS formats.

5. Icon Sweets


60 free vector Photoshop icons perfect for iPhone & iPad apps.
License: Some rights reserved. This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.

6. Imprint Icons


65 icons, easy-to-use icon template with tutorial video, custom Wallpaper and transparent dock.
License: Some rights reserved. This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.

7. iPad Icons


Apple’s iPad icon. Formats: Windows icon, Mac icon and PNG.

8. iPhone iKons


Don’t be alarmed when it says ‘iPhone’! These can be used with the iPad as well. The zip includes Mac and Windows icons, PNG images and iContainer. The only size included is 32px.

9. iPixelPad


Crisp pixel icons of the iPad in the sizes: 48px, 32px and 16px. They also come in two different versions for each size: with a matte highlight shine and with a harder gloss.

10. Icons


2 Versions: Mirrored and Non-Mirrored – 512 x 512 icons + 512 x 512 png.

11. Object Icons


Icons for the iPhone but can be used for iPad as well!

iPad Tutorials

Not every tutorial is the same even if it’s made with the same program. Below are a few tutorials I came across that can help you create your own iPad.

1. How to Design the Apple iPad in Photoshop


In this tutorial by Callum Chapman youll learn how to design the Apple iPad in Adobe Photoshop step by step.

2. How to Create the Apple iPad in Adobe Fireworks


This tutorial will show you how to make the Apple iPad in Adobe Fireworks from scratch.

iPad PSDs

1. Free Apple iPad PSD File


License: The Apple iPad PSD File File is licensed under the Creative Commons license and can be used for commercial and/or personal purposes.

2. Fully Editable Apple iPad PSD


Fully editable Apple iPad in PSD format. Every element you see is editable via vector masks. Everything is scalable.

3. iPad GUI PSD


Fully editable and scalable. The workable screen design is formatted to 768 1024 so anything you design in the Photoshop file can easily be brought over to the SDK.

4. iPad Icon PSD Template


Based off the exact overlays, outlines, and masks the iPhone and iPad OS use to mask icons, this template lets you preview the pre-supplied gloss, or modify it. Its made up entirely of shape layers and layer effects and should be completely pixel-accurate. If you use it, credit is welcome its not required, though.

5. iPad Package


4 different views of the iPad.

6. iPad PSD


A simple iPad PSD for whatever your uses may be.

iPad Wallpapers

Everyone likes to customize their things, right? With these wallpapers you can find the perfect one suitable for you!

1. Apple iPad


An awesome looking wallpaper that includes bright lines against a dark background.

2. iPad Electric


This wallpaper can also be used for your iPhone!

3. Blaze of Light


Blaze of Light comes as 1024px by 1024px JPG.

4. Elemental Flow


1024×1024px for the iPad and 320×480px for the iPhone.

5. iPad Wallpaper


iPad by: Krdesign and fog by Elizavebrushes. The size is 2560×1600.
License: Some rights reserved. This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

6. iPad Ink


Another wallpaper tat can be used for your iPad and/or iPhone.

7. iPAD


A joke style wallpaper for your iPad!

8. iPad Wallpaper


A 2560px X 1600px wallpaper for your iPad.
License: Some rights reserved. This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

9. Koma


A funky new iPad wallpaper.
License: Some rights reserved. This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

10. Skull Wallpaper


7 Colors and 2 exclusive versions!
License: Some rights reserved. This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.

11. Splash of Color


This download includes 2560×1600 (widescreen), 1920×1080 (16:9), 1600×1200 (standard), 1024×1024 (iPad), 320×480 (iPhone).

12. Wooden


A nice wooden wallpaper 1024×1024 in size.

13. Dirty Apple Wallpaper


This wallpaper pack included wallpaper in iPhone, iPad, full-screen and widescreen resolution in 3 different color variation plus clean version for iPhone or iPad home screen (iPhone OS 4.0 ready) and for your desktop.
License: Some rights reserved. This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

Let us know if we have missed some great resource and we will be happy to update the article.:)