Note technology rapidly evolves and this tutorial is over 3 years old, as a result some of the practices used in this tutorial may be out of date.

Red and White Pearl Download Icon

Here we’re going to create the download icon from the red and white pearl icons series at IconsETC.

You can get additional social media icons in this style on Webtreats:
108 Red & White Pearl Social Media Icons

red-white-pearl-download-arrow

STEP #1

Create a new document 400px * 400px with 72dpi and a white background as seen below.

new400

STEP #2

To create the base of the icon first activate the shape tool by pressing U. Make sure the ellipse shape tool is selected then draw out a circle similar to the one shown below.

TIP “Hold the shift key down while dragging to maintain the correct proportions and hold down spacebar to reposition”

circular-base-shape

STEP #3

Activate the layer styles pallet by double clicking on the layer you just created or by going to LAYER >> LAYER STYLE >> BLENDING OPTIONS in the menu. Then enter the settings below.

pearl-layer-styles-1 pearl-layer-styles-2 pearl-layer-styles-3 pearl-layer-styles-4 pearl-layer-styles-5 pearl-layer-styles-6 pearl-layer-styles-7 pearl-layer-styles-8 pearl-layer-styles-9

STEP #4

Now above the pearl layer create a new layer by going to LAYER >> NEW >> LAYER in the menu. Activate the shape tool by typeing U. Make sure the custom shape tool is selected then choose the built in arrow shape and drag out a shape similar to the one below.

TIP “Hold the shift key down while dragging to maintain the correct proportions and hold down spacebar to reposition”

arrow-shape

STEP #5

Rotate the arrow you just created by 90% by going to EDIT >> TRANSFORM >> ROTATE >> ROTATE 90 CW. Then select the move tool and center the arrow.

rotate-then-move

STEP #6

Activate the layer styles pallet on the arrow layer now and enter the settings below.

red red-2 red-3 red-4

That’s it!

You should now have something like what you see below.

red-white-pearl-download-arrow

What’s Included in the Download

  • Fully layered source PSD
  • .ASL file with layer style needed to create the icons – ready to install!
  • BONUS: 36 fully layered popular icons in this style.
Download
You might also like
Matte White Square Check Mark Icon Grungy Rusted Carbon Fiber Text Effect Starfield Tileable Twitter Background Tutorial Glossy Black Button Icons Glossy Silver Web 2.0 Icon Tutorial Grunge Yellow Warning Striped Icon & Text Effect Create a Professional Coming Soon Landing Page PSD Template Blue Retro Grunge Text Effect and Icons Crystal Clear Bubble Icons Fusion Wordpress Theme Adding Versatile Button Shortcodes to your WordPress Theme Adding Column Layout Shortcodes to Your WordPress Theme How to use Google Analytics Content Experiments Watercolor Social Networking Icons Data URI Tileable Transparent Patterns Dejavu Wordpress Theme Echelon Wordpress Theme Construct Wordpress Theme Method Wordpress Theme Elegance Wordpress Theme Modular Wordpress Theme Coffee Stain Social Networking Icons Tutorial Image Masking and Sliding Transition Effect Persuasion Wordpress Theme

15 comments on “Red and White Pearl Download Icon

  1. karen says:

    Although I haven’t used Photoshop before, I might say that this tool is very efficient in making icons and other stuff. I have seen the black white pearls icons and I have to say that the icons are very nice. Although the red and white pearl looked good, I like the astrological icons in black white pearls icons.

    May 1, 2011 9:20 pm
  2. Martin says:

    I still find the whole thing a little bit complicated. Can’t you explain the whole thing in a little more user-friendly manner – think about total newbies to photoshop. That’s me.

    Maybe people a little bit more familiar with the photoshop world, might have liked this and found it very useful tutorial.

    Regards,
    Webmaster – Photoshop Tutorials Videos

    June 5, 2011 3:48 am
  3. Dave says:

    @tutorials etc

    I was just wondering, when you rotated the icon, does the glow remain at the bottom and not pointing to the direction of the arrow?

    thanks

    Dave
    Custom Wine Cellar Marketer

    June 18, 2011 7:49 pm
  4. Roy says:

    instruction to create the icon using the Gipm helped me a lot. i appreciate your efforts that you have spent in this blog. Roy

    July 1, 2011 2:37 am
  5. Dave says:

    I think it was a very good tutorial. I am basically a newcomer to gimp, (have never used actual photoshop) and was able to figure out how to make this. While gimp is different I don’t think it is so different that with just a little poking around I was able to figure it out. Also, I googled three things because I could not find them. Thanks.

    October 10, 2011 8:44 pm
  6. Sagan Marketing says:

    Beautiful style. A gimp tutorial would be most welcome. The source files do not work in Gimp… though obviously Photoshop CS6 took them without a problem

    June 13, 2012 5:03 pm
  7. Evan says:

    @Martin: the explanation here is pretty minimalist – i really don’t see how it could be made very complicated : )

    However I gotta say that i believe certain details of design just aren’t that important for most sites that need to express clear user friendly content (apologies to design artists and purists). So I’d most probably use whatever templates came with the theme set.

    Evan
    My Site: http://LatestAccessoriesReviewed.com

    June 30, 2012 1:32 am

    Pearl Download Icon Video Tutorial in Photoshop | My Free Tutorials

    60+ Photoshop Tutorials For Icon Design

    60多个图标设计的Photoshop教程 | Focusec

    The Complete Guide To The Best Websites For Pictures This Guide Tells Once Clicked

    আইকন বানানো শিখতে চান?এই নিন ৬০টির বেশী ফটোশপ টিউটোরিয়াল

Comments are closed.