Create a Vector RSS Icon with Illustrator
Probably one of the most popular and recognisable icons in the web universe; the RSS icon is displayed on many website to indicate the availability of a subscription feed. There are pre-made icons you can download and place on your website, however this tutorial cover the process of creating your own custom vector RSS icon in Illustrator.
Since the icon is to be created in vector format, it can be scaled up or down in size for implementation on future websites you may work on, unlike a raster version which would have to be remade in larger dimensions to prevent pixelation.
For beginners to Illustrator, the following diagram shows the structure of the elements that will make up the icon. Similar to Photoshop, Illustrator works in layers but also, multiple objects can also be stacked on top of one another within a single layer. By using ‘CTRL/CMD + [‘ and ‘CTRL/CMD + ]’ you can alter the stacking order of a selected object and furthermore, pressing ‘CTRL/CMD + SHIFT + [‘ and ‘CTRL/CMD + SHIFT + ]’ will send an object to the bottom and top of the stack respectively.
To begin, draw a rounded rectangle. Tap the cursor keys Up and Down to adjust the roundness of the corners before releasing the mouse, and hold the SHIFT key to constrain the proportions to make it square. Alternatively, simply clicking on the artboard will bring up a dialog box where precise measurements can be entered.
Fill this shape with a vertical gradient ranging from a dark orange to a lighter tone.
Press ‘CTRL/CMD + C’ and ‘CTRL/CMD + F’ to copy the shape and place in front. Then scale down the shape slightly while holding ALT. Fill this shape with the darker of the orange tones previously used. Press ‘CTRL/CMD + C’ to Copy the shape.
With this smaller shape selected use the Gradient Mesh Tool to add a highlight in the top left, adjust the colour sliders to produce a brighter yellow hue.
Press ‘CTRL/CMD + F’ to paste in the shape copied in the previous step. We copied the shape before adding the gradient mesh because the mesh can limit the editability of the shape and basically mess things up! Fill the shape with white.
Use the Pen tool to create a shape that covers the lower half of the white object, and add a curve to the top, this will be used to cut away the shape to create a reflection.
Select both the white object and the new shape created with the Pen tool, then click the Subtract From Shape Area button in the Pathfinder Window, then Expand. Lower the Opacity of this shape to 20%.
To create the actual RSS symbol, draw a circle (hold SHIFT) and add a black stroke. Increase the stroke to produce a broad ring. Take a note of the size, in my case it was 12pt, but yours may depend on the size you are working at.
Use the Direct Selection Tool to select and delete two of the four points that make up the circle, this will leave you with just a quarter of the circle. Copy this shape and move down 45degrees to the left.
Use guides for visual assistance while you scale and align the shapes, depending if your preferences are set to scale strokes, you may need to reset the stroke of the second shape to 12pt (or whatever size you noted down earlier!).
Select the pair and go to Object > Expand and select the Stroke checkbox to convert the strokes into complete shapes.
Complete the symbol by adding a circle, hold SHIFT to constrain the proportions and use guides to align with the other objects, press ‘CTRL/CMD + G’ to group the objects then fill with a gradient from white to a light grey.
Align the symbol with the orange background objects, then order the reflection to the top of the stack by pressing ‘CTRL/CMD + SHIFT + ]’.
Finish off the icon with some subtle shading by selecting
Effects > Stylize > Outer Glow.
Like This Post? - Sharing & donating are great ways to say Thanks!
May 10th, 2007 at 2:21 pm
great!
May 21st, 2007 at 1:47 pm
nice and clear…like it!
May 21st, 2007 at 11:41 pm
Great and easy tutorial. Thanks for sharing.
May 22nd, 2007 at 4:09 am
Where did you get this wp template? I’ve been looking the whole day for something like this but I’m about to give up :((sorry, I know it’s not really on topic)RegardsNaida
May 22nd, 2007 at 9:23 am
Hi Naida
I created this design from scratch then modified the Default Wordpress template to suit.
If you are comfortable with CSS why not have a go at making your own template? The Firefox Web Developers Extension is very much recommended if you do decide to have a go!
Chris
May 23rd, 2007 at 6:26 pm
[...] has two (1-2) tutorial suggestions for [...]
May 24th, 2007 at 4:42 pm
Great. looks vey nice
May 25th, 2007 at 3:55 am
a bad job
May 29th, 2007 at 8:19 am
It’s fantastic!
June 10th, 2007 at 4:48 am
Pretty neat tutorial!
June 21st, 2007 at 6:24 am
Hello! Good Site! Thanks you! shnusdkbpb
July 20th, 2007 at 2:16 pm
[...] tutorial en Inglés para que puedas crear tu propio icono RSS con vectores. Create a Vector RSS Icon with Illustrator Mándalo a tu Twitter: :: temas que pueden estar relacionados :: Como hacer textura [...]
July 20th, 2007 at 3:01 pm
[...] a criar seu próprio logo RSS para colocar em seu site, aconselho a dar uma olhada nesse ótimo tutorial, e aproveite também para dar uma olhada nos outros [...]
July 20th, 2007 at 5:31 pm
[...] aprender a criar seu próprio logo RSS para colocar em seu site, aconselho a dar uma olhada nesse ótimo tutorial, e aproveite também para dar uma olhada nos outros [...]
July 21st, 2007 at 12:34 am
[...] Spoon Graphics » Blog Archive » Create a Vector RSS Icon with Illustrator (tags: tutorial) [...]
July 23rd, 2007 at 7:39 am
[...] Tutorial de Illustrator para crear un icono RSS de forma vectorial En BLOG VECINDAD… nos presenta un enlace a un tutorial en inglés (se puede seguir sin problemas), para que puedas crear tu propio icono RSS con vectores. Se trata de Create a Vector RSS Icon with Illustrator. [...]
July 23rd, 2007 at 11:19 pm
A couple of problems with this tutorial.
Error 1 - Offset the Path
Do not copy the rounded rectangle and scale it. As you can see, the rounded edges on the inner rectangle do not match the outer edges. By offsetting the first rectangle you maintain the proper radius for the rounded edge.
Error 2 - Transparency
The transparency setting on the outer glow should be set to Multiply. This will prevent a the black from looking muddy and will allow it to mix nicely with the orange below.
That’s all i’ve got. Hope this helps.
July 24th, 2007 at 5:51 pm
Foda dimais!
July 26th, 2007 at 11:13 pm
[...] Create a Vector RSS Icon with Illustrator [...]
August 5th, 2007 at 2:05 am
ace tutorial it wikid mate
September 3rd, 2007 at 11:08 am
Very Nice….and very impressive…
September 17th, 2007 at 7:13 am
[...] Create a Vector RSS Icon von Spoon Graphics für Illustrator [...]
September 18th, 2007 at 6:39 am
[...] Tutorial: Create a Vector RSS Icon with Illustrator [...]
September 27th, 2007 at 8:52 am
[...] Spoon Graphics Illustrator Tutorial. [...]
October 13th, 2007 at 1:45 pm
Excellent tutorial.. thanks for all.
November 1st, 2007 at 5:21 pm
[...] Create a Vector RSS IconFor Illustrator by Spoon Graphics. [...]
November 2nd, 2007 at 9:15 am
[...] Create a Vector RSS Icon For Illustrator by Spoon Graphics. [...]
November 14th, 2007 at 10:37 am
We have a blog that have rich information about WEB Designing .Have a look.
November 21st, 2007 at 5:06 pm
thanks for the GREAT post! Very useful…
December 3rd, 2007 at 9:48 pm
[...] ♦ Create a Vector RSS Icon with Illustrator [...]
December 16th, 2007 at 5:30 pm
Thanks for that. Was reasonably easy to follow for a beginner and produced really pleasing results.
Nice one!
December 18th, 2007 at 3:29 am
[...] Create a Vector RSS Icon For Illustrator by Spoon Graphics. [...]
December 27th, 2007 at 4:12 pm
nice,
it can help in creating logos
December 31st, 2007 at 1:37 pm
Superb tutorial. keep it up.
January 7th, 2008 at 5:11 pm
Excellent tutorial, thanks for posting this!!
January 15th, 2008 at 8:43 am
Just wanted to say thanks for this tutorial. That’s a real sexy RSS icon.
January 20th, 2008 at 11:33 pm
Thanks for that very nice tutorial from germany. It was a big help for me.
January 25th, 2008 at 10:49 am
Wow… this is a really great one! Thanks for the tutorial…
Also, your blog looks really awesome! Cool! Keep it up…
Bookmarked it…
January 25th, 2008 at 7:04 pm
[...] Bunların yanında bazı yabancı kaynaklar da ikon hazırlamakla ilgili ayrıntıları bloglarında ziyaretçileriyle paylaşmışlar. Çok şık bir RSS logosunun nasıl yapılacağı basamak basamak burada anlatılmış. Videoları izledikten sonra hırslanan tasarımcılar için okunması gereken bir yazı [...]
January 26th, 2008 at 8:53 am
[...] Bunların yanında bazı yabancı kaynaklar da ikon hazırlamakla ilgili ayrıntıları bloglarında ziyaretçileriyle paylaşmışlar. Çok şık bir RSS logosunun nasıl yapılacağı basamak basamak burada anlatılmış. Videoları izledikten sonra hırslanan tasarımcılar için okunması gereken bir yazı [...]
February 4th, 2008 at 7:54 am
[...] a link to some Free Cool RSS Icons at Vectoreezy. Here is a link to Blog Spoon Graphics on how to Create a Vector RSS Icon with Illustrator. I’ll be covering some details on the other icons I used here on another [...]
February 5th, 2008 at 4:17 pm
[...] Create a Vector RSS Icon with IllustratorProbably one of the most popular and recognisable icons in the web universe; the RSS icon is displayed on many website to indicate the availability of a subscription feed. There are pre-made icons you can download and place on your website, however this tutorial cover the process of creating your own custom vector RSS icon in Illustrator. [...]
February 5th, 2008 at 8:53 pm
[...] Create a Vector RSS Icon with Illustrator Probably one of the most popular and recognisable icons in the web universe; the RSS icon is displayed on many website to indicate the availability of a subscription feed. There are pre-made icons you can download and place on your website, however this tutorial cover the process of creating your own custom vector RSS icon in Illustrator. [...]
February 17th, 2008 at 9:59 pm
Thanks!!! it was so useful!
cheers,
dmn.
February 19th, 2008 at 2:08 pm
[...] passage un petit tutoriel sympa pour créer un bouton RSS sous [...]
February 19th, 2008 at 9:08 pm
i did it and it turned out completely perfect
thnx for sharing
February 28th, 2008 at 10:27 am
Hi,
We would like to create a tutorial section about Illustrator and Photoshop on pluginsworld.com. If you have any tutorial to submit, do not hesitate to contact us.
Thanks!
March 19th, 2008 at 6:00 pm
So how do i delete two of the four points? The author is assuming that everybody is a master and this makes the tutorial is useless
March 21st, 2008 at 11:32 pm
[...] passage un petit tutoriel sympa pour créer un bouton RSS sous Illustrator. Tags : illustrations, illustrator, tutoriel, [...]
March 25th, 2008 at 2:14 pm
[...] Create a Vector RSS Icon with Illustrator Probably one of the most popular and recognisable icons in the web universe; the RSS icon is displayed on many website to indicate the availability of a subscription feed. There are pre-made icons you can download and place on your website, however this tutorial cover the process of creating your own custom vector RSS icon in Illustrator. [...]
April 1st, 2008 at 10:19 am
hey!! thanx man..that was really helpful
thank you once again
April 4th, 2008 at 9:51 am
[...] Rss icon 3 + Rss icon 4 Tags: buton, ikon, logo, Photo Shop, rss, web [...]
April 4th, 2008 at 7:58 pm
[...] http://www.blog.spoongraphics.co.uk/tutorials/create-a-vector-rss-icon-with-illustrator [...]
April 9th, 2008 at 11:39 pm
Here is the completed files in Photoshop format.
http://www.readydone.com/files/RSS-vector.psd
You’re welcome.
(Not perfection, but as close as 16×16 would ever need.)
April 13th, 2008 at 5:36 pm
[...] Source : Créer un bouton RSS [...]
April 16th, 2008 at 8:59 am
[...] de créer des boutons de type RSS. La première, classique avec un tutorial sur illustrator sur spoongraphics (source) et la seconde pour les gens n’ayant aucune connaissance en logiciels graphiques avec [...]
April 16th, 2008 at 4:47 pm
Really Cool.. Thanks for sharing… Obrigada por compatilhar..
April 19th, 2008 at 2:12 pm
[...] gidin [...]
April 24th, 2008 at 1:38 pm
Buen tutorial para hacer botones tipo plastico o cristal…CONGRATULATIONS!!
April 29th, 2008 at 2:01 pm
[...] Create a Vector RSS Icon [...]
April 30th, 2008 at 2:40 pm
[...] Title: Create a Vector RSS Icon with Illustrator. URL:http://www.blog.spoongraphics.co.uk/… [...]
May 6th, 2008 at 2:09 pm
[...] Create a Vector RSS Icon with Illustrator Probably one of the most popular and recognisable icons in the web universe; the RSS icon is displayed on many website to indicate the availability of a subscription feed. There are pre-made icons you can download and place on your website, however this tutorial cover the process of creating your own custom vector RSS icon in Illustrator. [...]