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
Grunge Yellow Warning Striped Icon & Text Effect Fusion Wordpress Theme Data URI Tileable Transparent Patterns Persuasion Wordpress Theme Construct Wordpress Theme Adding Versatile Button Shortcodes to your WordPress Theme Adding Column Layout Shortcodes to Your WordPress Theme Starfield Tileable Twitter Background Tutorial Crystal Clear Bubble Icons Brushed Silver Reflective Text Effect Myriad Wordpress Theme Glossy Black Button Icons Glossy Silver Web 2.0 Icon Tutorial Grungy Rusted Carbon Fiber Text Effect Modular Wordpress Theme Watercolor Social Networking Icons Dejavu Wordpress Theme How to use Google Analytics Content Experiments Blue Retro Grunge Text Effect and Icons Echelon Wordpress Theme Create a Professional Coming Soon Landing Page PSD Template Yellow Road Sign Icons Elegance Wordpress Theme Image Masking and Sliding Transition 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>