January 27, 2010 - 16 Comments
Graphic Design,Illustrator,Tutorial
  • RSS
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • co.mments
  • YahooMyWeb
  • E-mail this story to a friend!
Join 38,000 of our readers, by following us via our RSS Feed, on Twitter, on Facebook or on Digg

Following on from our last tutorial (Creating a Realistic Torn Photo Effect – Photoshop Tutorial), today we focus on Illustrator and how to create a classy social bookmarking icon set.
If you would like to jump on the bandwagon and write a tutorial for this weekly section, get in touch with me here: Contact.

How to Create a Photo Frame Social Icon Set with Illustrator

How to Create a Photo Frame Social Icon Set with IllustratorIn todays tutorial you will learn how to create a social bookmarking icon set that are wrapped in a photo frame and much just be good enough to hand on your wall.

The image on the left is what your finished icon will look like.

OK, over to todays author, Helen Gizi, she will guide you through the tutorial …lets get going…

Source Files

Before we start, you can download the source files, which include all the .ai source files…

Step 1

Select the Rectangle tool and press and hold Shift and draw the square below.

Creating a Photo Frame Social Icon Set Tutorial

Step 2

With the Pen tool click the top right anchor point of the square. This will remove the top left anchor point of the square and produce a triangle.

Creating a Photo Frame Social Icon Set Tutorial

Step 3

Having the new shape selected, select the Rotate tool, press and hold Shift + Alt to duplicate and rotate the triangle 45 degrees.

Creating a Photo Frame Social Icon Set Tutorial

Step 4

And here is the result of the previous step.

Creating a Photo Frame Social Icon Set Tutorial

Step 5

Press Ctrl + D to create two more triangles and create the below square. Select them all and rotate them 45 degrees (Object > Transform >Rotate > Angle > 45)

Creating a Photo Frame Social Icon Set Tutorial

Step 6

Let’s bring it to life with some color. Select the two opposite shapes and choose a color that you like. Do the same for the other two but this time select a color from the same palette in a darker tone. Now group them.

Creating a Photo Frame Social Icon Set Tutorial

Step 7

Duplicate the shape (Ctrl + C) (Ctrl + V) and apply a gradient as shown in the gradient window. In other words, create a gradient with a dark color at the end and at the beginning and a lighter color in the middle.

Creating a Photo Frame Social Icon Set Tutorial

Step 8

As we already have the gradient selected, create a new rectangle on the top of our previous shapes and make it a bit smaller. The result will be something similiar to the image below.

Creating a Photo Frame Social Icon Set Tutorial

Step 9

Repeat the previous step but this time apply a vertical linear gradient and make the shape a bit smaller once more.

Creating a Photo Frame Social Icon Set Tutorial

Step 10

Again, draw a small rectangle on top of everything but this time apply a gradient with two shades of green. One light and one dark. Also apply a thin stroke.

Creating a Photo Frame Social Icon Set Tutorial

Step 11

Now select the green shape and go to Object > Expand and select the stroke check box. Press ok and this will transform the stroke into a shape. Apply to the new shape (which was a stroke) a gradient of dark blue at the bottom and light green at the top.

Creating a Photo Frame Social Icon Set Tutorial

Step 12

Now let’s create our reflection. Grab the pen tool and create a shape similiar to the one below. Select the last two boxes in our stack and our curvy shape. Go to pathfinder and click “intersect shape areas”. This will create the shape that you will see in the next step.

Creating a Photo Frame Social Icon Set Tutorial

Step 13

Change the gradient of the curvy shape to something like the image below (a green to white gradient).

Creating a Photo Frame Social Icon Set Tutorial

Step 14

Now in the transparency box lower the opacity down to 20%.

Creating a Photo Frame Social Icon Set Tutorial

Step 15

Now let’s create the RSS icon. Using the arc tool and the circle tool, create a shape like the one below. In order to make the arcs thick, select them and apply a stroke of 20pt.

Creating a Photo Frame Social Icon Set Tutorial

Step 16

In your selection (the two arcs) go to Object > Expand, select the stroke check box and press ok. Select the circle and remove the stroke.

Creating a Photo Frame Social Icon Set Tutorial

Step 17

Now put the RSS icon on top of our previous shape but before our reflection (select the reflection and go to Object > Arrange > Bring to front).

Creating a Photo Frame Social Icon Set Tutorial

Step 18

Now put the RSS icon on top of our previous shape but before our reflection (select the reflection and go to Object > Arrange > Bring to front).

Creating a Photo Frame Social Icon Set Tutorial

Step 19 – Finished

With this method we can create several other shapes like the ones in the image below.

Creating a Photo Frame Social Icon Set Tutorial

About the Author

Creating a Photo Frame Social Icon Set TutorialHelen Gizi has been the author of todays icon tutorial, she is graphic designer based in Thessaloniki, Greece where she runs a small design agency. You can visit here personal website, Pink Moustache – Vector Sories, and view some of her amazing works and high quality freebies.
You can also follow her via Twitter.

You might also like…

The Best 40 Photoshop Text Effects from 2009 »
49 Most Creative Photoshop Tutorials of 2009 »
20 Beautiful HDR Photographs of the Marvels and Mysteries of Iceland »
30 Artistic and Creative Photoshop Poster Tutorials »
40 Amazing Photoshop Brush Directories and Collections »
50 Imaginative Fantasy Art Tutorials for Photoshop »
25 Cool Digital Photography Tutorials, Techniques and Effects »
30 Useful Photoshop Buttons and Badges Tutorials »
25 Photoshop Tutorials for Creating that Perfect Web Page Design »


8 Comments › Leave yours

  1. Michael
    27 Jan, 2010

    Great tutorial. I’m going to check out Helen’s site. Would love to see if she has the set available for download. (Why re-create the wheel) LOL

    Reply

  2. Web Design Cambridgeshire
    27 Jan, 2010

    Hey – this is a great tutorial. Icon looks great, will definitely apply this.

    Reply

  3. klou
    27 Jan, 2010

    Nice tut. Helen’s website rocks too :)

    Reply

  4. Myo Han Htun
    27 Jan, 2010

    Nice tutorial. I will try it. :)

    Reply

  5. abohabeba
    31 Jan, 2010

    Nice tutorial.

    Reply

  6. Atlanta Printing Company
    3 Feb, 2010

    wow! great information. Thank you.

    Reply

  7. choudhury
    24 Mar, 2010

    Great tutorial. I will try it myself.

    Reply

  8. Web Design Lebanon
    19 Aug, 2010

    Nice Tutorial.

    Reply