How to Create Glossy Icons in Illustrator
By Vanilla-Bear | November 20, 2009 | Posted in Illustrator | 6 Comments
.jpg "vector tutorials tutorials 2 How to Create Glossy Icons in Illustrator")
This tutorial shows how to create vector glossy icons in Adobe Illustrator, you can use these icons for different uses on your site, this tutorial takes an example of creating RSS glossy icon that you can apply the same concept in other icons.
Ever wondered how they make all these RSS logos you see on most sites today?
Here’s how to go about it…
1. Open up Illustrator and create a new document. Click and hold the the mouse over the Rectangle Tool and select the Rounded Rectangle Tool below underneath. Draw your shape on the artboard while holding down Shift to create a square. You can use the arrow keys to change the roundness of the corners to your preference.
2. Head up to the top and clear the stroke of any presets, then open up the Gradient panel. Add an orange fill that goes from dark to light vertically on the shape.
.jpg "vector tutorials tutorials 2 How to Create Glossy Icons in Illustrator")
3. Select the shape, go to Object > Path > Offset Path. Enter -1mm in the options. Get hold of the corner of the object and drag it through 180 degrees, this will make the two gradients flow in opposite directions.
.jpg "vector tutorials tutorials 2 How to Create Glossy Icons in Illustrator")
4. Select the Circle tool and draw a circle anywhere on the artboard. Get rid of any fill preset and set stroke to a thick 16pt black one.
.jpg "vector tutorials tutorials 2 How to Create Glossy Icons in Illustrator")
5. Select the white arrow (Direct selection tool), click only the bottom left points of the circle and delete them to create a quarter of a circle.
.jpg "vector tutorials tutorials 2 How to Create Glossy Icons in Illustrator")
6. Copy (Ctrl+C) the quarter circle and paste on top (Ctrl+F). Scale it down whilst holding the shift key to keep everything to scale.
.jpg "vector tutorials tutorials 2 How to Create Glossy Icons in Illustrator")
7. Adjust the strokes to match the original 16pt
8. Now draw a small circle in alignment with the quarters to create the well known RSS shape.
.jpg "vector tutorials tutorials 2 How to Create Glossy Icons in Illustrator")
9. The two quarter circles are still stroked paths. lets convert them to shapes by going to Object > Expand and selecting the convert stroke option.
10. Select the 3 objects and add a grayish -whitey gradient running vertically. Also add a thin 1pt light grey stroke to finish off the RSS object.
.jpg "vector tutorials tutorials 2 How to Create Glossy Icons in Illustrator")
11. Now group these objects together by selecting them and pressing Ctrl+G.
12. Select the inner rectangle from the orange box. Copy (CTRL+C) and paste above (CTRL+F). Fill it with white.
13. Draw a wavy shape over the entire graphic, the shape depends on what you want. It could be a plain oval or an up and down curve, whatever suits you. Move it so it covers some of the white rectangle, again wherever suits you. Now select both the white rectangle and the new shape. Click the Intersect Shape option in the Pathfinder palette.
14. Now reduce the opacity of this new shape to around 20% to give it a sleek glassy shine.
You should end up with something similar to mine:
.jpg "vector tutorials tutorials 2 How to Create Glossy Icons in Illustrator")
Remember this isn’t just for RSS, the techniques here can be used in any modern logo.
I hope you like my first tutorial, if there is anything you need help with or would just like to comment on the tutorial itself please comment below.
Author: Vanilla-Bear (1 Articles)
I'm a freelance designer and web developer, an author at ThemeForest.net and a full time student :D. When I actually manage to get away from the computer, I'm biking, at school phh, or enjoying the countryside (on my bike) in sunny Yorkshire.
Related topics you may like to read
6 Comments to “How to Create Glossy Icons in Illustrator”
Post comment
 |
 |
|
|
Pages
New Arrivals
Resources News
- Household Items Vector PackFebruary 9, 2010
Many household items for your vector illustrations. This pack includes a fan, wind chime, trophy, margarita, globe, bread basket and more.
Royalty free vector. Free to use in your personal an… - Bring your websites alive: From Boring to Exciting…February 9, 2010
Some have a passion for web design; others consider it a mere task! This article is for those who consider web design more than just a task, in fact, it is ….
- Giveaway:One-Year Membership From Elegant ThemesFebruary 9, 2010
We all know ElegantThemes is one of the most popular theme provider in this business.The site is managed by Nick Roach a talented and professional web designer/WordPress developer.
- 40 Examples of Cool JavascriptFebruary 9, 2010
JavaScript has blossomed so rightly. Since then, there are jquery, Mootools , Scriptallicious, Prototype etc..which really produces cool effects. In todays time, java script is a must have componen…
- Fruity PhotographyFebruary 9, 2010
Photography inspires us all in different forms and styles, photography is often a snapshot of time which inspires us and reminds us of those moments in time we treasure. These are great photograph…
 |
 |
Useful Links
designfollow says:
great tutorial
thank you
designfollow´s last blog ..The Big Showcase Of Online T-Shirt Stores
Liz says:
Great tutorial! We added it to our free vector site
It would be cool if you did an extra few steps and showed how to add a reflection or drop shadow below the icon like you see on some.
Liz´s last blog ..How to Create Glossy Icons in Illustrator
Aaron Shaw says:
Icons are such fascinating pieces of art!
Peter says:
Great tutorial. I love the way it all comes alive.
Vanilla-Bear says:
Thanks for your lovely comments
I will bear the critiques in mind when I write my next one which will be soon I hope.
If you have any requests about what you want to see me write about feel free to get in touch with me through the various ways…
Will probably do a web design tutorial. I’m wanting to split it into 3 parts, first concept blocking the layout in photoshop, then moving onto the design in photoshop and finally marking it up to xhtml / css standards in dreamweaver.
Anyways wont let anything else out or no point you reading the tut xD
Cheers!!
VB
50+ Fresh New Tutorials From Around The Web | designrfix.com says:
[...] How to Create Glossy Icons in Illustrator How to Create Glossy Icons in Illustrator [...]