Turn any photo into a dot grid artwork with these Photoshop actions. You'll get great results with dots that change size. They get larger in brighter areas and smaller in darker areas. Free download available.
What you'll be creatingWe will be creating some flat social media icons: we'll start with the background then proceed with the icons. We'll finish it up by creating some effects to make the icons more original like the gloss effect or the long shadow. You'll need Photoshop CS3 or newer to follow this tutorial.
Step 1Create a New File at 500x400 pixels Create a New Group and name it 'Background'
Step 2Fill your background with the color #e7e9ea using the Fill Bucket Tool.
Step 3To add more effect to the background we will be adding some gradient. Click on the Adjustment Layer icon and choose Gradient... and use the following settings: Blend Mode: Soft Light | Opacity: 25%
Step 4Create another group and this time name it 'symbols'
Step 5Before anything else, to make this work easier and more organized-looking, we need Rulers and Grids. These can be accessed by simply going to View > Rulers and View > Show > Grids. Here are my setting for both the Rulers and Grids (this can be accessed by going to Edit>Preference): Now that we have that, we need to add giudes and this can be done by simply clicking and dragging from the ruler. Click and Drag from the vertical ruler if you want a vertical giude and vice versa. Here is how I divided the canvas (each icon being 50x50 pixels big and a 25 pixels space between each one):
Step 6With the font we are working with in this tutorial, Font Awesome, you can add costumizable icons for your website. Normally, this is done by placing the CSS of the font to your website but since we are working with Photoshop, we need to copy each icon you desire to use from their Cheatsheet. So open up the said page, scroll down and look for all the icons you would like to use. I used the icons for the following (social media) sites: Twitter; Facebook; Tumblr; Google +; Instagram; Youtube; Twitch; Dropbox; Deviantart; Pinterest; Skype; Feed.
Step 7Once you have found the icon you would like to use, copy it (Highlight it then Right Click> Copy..) Then go back to Photoshop and grab your Text Tool from the Tools Panel. Change the Font settings as shown: Now paste the icon you just copied from the cheatsheet. (Right Click > Paste..)
Step 8Repeat the previous step until you have pasted all the icons you would like to use.
Step 9Create a new group and rename it to 'icon bg' and place it below the 'symbols' Group
Step 10Create a new layer and place it into the group we just created. I renamed the layer to 'icon bg'.
Step 11Using the Rectangular Circle Shape Tool (located at the Tools Panel below the Text Tool) I created the background of the icons following the guides we did earlier. Create the background on that layer only to make your work easier to look at.
Here are all the colors I used: Twitter:#6bd1f4; Facebook:#5a93cb; Tumblr:#3c6a9c; Google +:#e44940; Instagram:#9bd29d; Youtube:#f4504c; Twitch:#a96db6; Dropbox:#81d5ed; Deviantart:#6e8e61; Pinterest:#f25f5f; Skype:#67d5f4; Feed:#e9951d;Now you don't specifically have to use the same colors as I did, you are obviously free to change the colors and use whichever color you prefer to make your work more original.