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.

Matte White Square Check Mark Icon

01-free-matte-white-square-social-networking-icons-webtreats-preview

Here we’re going to show you how to create the Matte White Square Social Media Icons that we have on Webtreats ETC.

STEP #1

First you will need to download and install a couple free photoshop patterns seen below. Alternatively you can download the project source files which include these patterns below.

Click here to download all tutorial assets in zip file.

STEP #2

Create a new document 512px * 512px then create a new pattern fill layer by going to LAYER >> NEW FILL LAYER >> PATTERN in the menu and selecting the 10th fabric pattern from the pattern set you installed in step one as seen below.
Step-2

STEP #3

Create another pattern fill layer this time selecting the brushed metal pattern. Then set the layer blend mode to overlay as seen below.
Step-3

STEP #4

Create a new hue/saturation layer by going to LAYER >> NEW ADJUSTMENT LAYER >> HUE/SATURATION in the menu and set Saturation = 0 and Lightness = 30. Then set the layer blend mode to overlay as seen below.
Step-4

STEP #5

Now lets create the square base of the icon. To do this activate the shape tool by pressing U. Make sure the rounded rectangle shape tool is selected and the radius set to 60px then draw out a square 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”

Step-5

STEP #6

Activate the layer styles pallet by going to LAYER >> LAYER STYLE >> BLENDING OPTIONS in the menu. Then enter the settings below.
Step-6e Step-6d Step-6c Step-6b Step-6a

STEP #7

To create the shadow that helps give these icons their 3D look first create a new layer beneath the square layer you just created. Activate the brush tool [sniplet brush]. Choose a simple round brush, set the opacity to 50%, the size to 50, and the sharpness to 0, then paint in a shadow around the base of the icon as seen below.
shadow

STEP #8

Now above the square 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 check mark 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”

Step-8

STEP #9

Activate the layer styles pallet by going to LAYER >> LAYER STYLE >> BLENDING OPTIONS in the menu on the check mark layer you just created. Then enter the settings below.
step-7e step-7c step-7b step-7a

That’s it!

You should now have something like what you see below.

white-matte-icon-done

What’s Included in the Download

  • Fully layered source PSD
  • .ASL file containing the layer styles needed to create the icons
  • .PAT file with both patterns needed for the tutorial – ready to install!
  • .JPG files of both patterns used
  • BONUS: 36 fully layered popular icons in this style.
Download
You might also like
Starfield Tileable Twitter Background Tutorial Glossy Silver Web 2.0 Icon Tutorial Glossy Black Button Icons Method Wordpress Theme Fusion Wordpress Theme Blue Retro Grunge Text Effect and Icons Grunge Yellow Warning Striped Icon & Text Effect Create a Professional Coming Soon Landing Page PSD Template 3D Transparent Glass Text Effect Myriad Wordpress Theme Grungy Rusted Carbon Fiber Text Effect Adding Column Layout Shortcodes to Your WordPress Theme Dejavu Wordpress Theme Data URI Tileable Transparent Patterns Red and White Pearl Download Icon Crystal Clear Bubble Icons Construct Wordpress Theme Watercolor Social Networking Icons Echelon Wordpress Theme Yellow Road Sign Icons Image Masking and Sliding Transition Effect Modular Wordpress Theme Adding Versatile Button Shortcodes to your WordPress Theme Brushed Silver Reflective Text Effect

2 comments on “Matte White Square Check Mark Icon

    Matte White Square Check Mark Icon | WKS News

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>