Thursday, January 19, 2012

DIY Photoshop Blogger Icons

Check out our new Blogger Icons toward the upper right.  These are the icons for our RSS, Twitter, Flickr, Facebook, Pinterest and Instgram links.  These make it easy for our readers to get updates and share the love.

Recently K updated our banner.  To make this more cohesive I came up with a super simple button that incorporates the colors K loves in a simple icon.  Here's how I did it (click on any image to enlarge it):

Step One:

First create a new layer that's 1"x1"

Step Two:

Choose the Elliptical Marquee tool

Step Three:

Draw a circle, filling in the square.  Then select, "Edit - Fill - Foreground Color". I've already done a color select using the banner K created and used the eye dropper tool to collect the orange color.

Step Four:

Here's the completed circle filled in with the foreground color that I choose by using the eye dropper tool and selecting the orange used in the banner.

Step Five:

Create a new layer for the smaller circle inside the larger circle

Step Six:

I created a new small circle and filled it in using the eyedropper tool and selecting the darker green from the banner.  I use the paintbrush tool to fill it in.

Step Seven:

Duplicate the layer that has your new inner circle.

Step Eight:

With that duplicated layer selected, move that new circle to the right.  Use the magic wand tool to select that new duplicated circle (see the dotted lines that indicate it has been selected).

Step Nine:

First, use the eye dropper tool to select a new color from the banner.  Then select the brush tool (making sure that new circle is still highlighted).

 Step Ten:

The new circle has been filled in.
Ta-Da -- the new icon has been created.

To make the other icons, such as the Instragram one, I create a new circle and insert that image in the middle.  You can use the same PDF file with this circle and just hide the layers that are not needed.

We'll make this set of files available later in the week so you can grab them and customize them yourself with colors from your own banner.


No comments:

Post a Comment

Thank you for your kind words. We appreciate and read each and every one.