Glassy & Vibrant Rss feed icon Tutorial – Vista Style.

Hey guys – want to see how I made this? Well its pretty easy…just takes some time…and easy to follow steps which is what I typed out for you guys!

feed_me11.jpg

Lets begin the tutorial: Start by opening a new document – any size you want is fine. 500px x 500px is good and big.

In the tools panel go select the custom shape tool. Than we go to the top of the screen and select the shape we want to use in our case it is like a yield sign triangle shape with rounded edges. Make sure all your shape properties look like this.

shape_tool_select_triangle.gif

Once you have that shape selected we can start by selecting a foreground color for our shape:

set_foreground_color.gif

set_froeground_green.gif

Go to the center of your document (I will call it the work stage) Hold down on CTRL (cmnd with mac) and drag out the mouse in any direction and release it when you have reached the size you want. This will create the shape on a new layer. Rename that layer”Triangle”. The triangle is upside down now – that’s ok. Just go to EDIT>TRANSFORM>FLIP VERTICAL and viola. That should do it.

Now go to the layers panel and right click while over the triangle layer and click on “blending option” .This will pop up the blending options box. Select Inner Shadow and check the box. Give it the following values:
Blend mode: multiply
Color: Black
Angle :120
Distance: 2
Choke: 9
Size 35
as screenshot.

trianlge_blending_opts.gif

Click OK. Good.

Now take your cursor and place it over the triangle icon and hold down on CTRL (mac=cmnd) and CLICK.

shape_selection.gif

This will give you a triangle selection on your work stage. Now add a new layer in your layers panel: new_layer.gif

Rename that layer ” Border”. and drag it down to below your triangle layer. Make sure your “border” layer is the one selected and now go to top of screen and SELECT>MODIFY>EXPAND>and type in 10-12 px and click ok. (The more pixels you choose the thicker your border will be) you will see what I mean soon. Now hold down on alt and at the same time press Backspace. This will fill your new selection. While still on the border layer right click and click on blending options. In the blending options box check off and select the “gradient overlay ” Blend mode shouold be set to normal and opacity to 100. now click on the gradient strip to open the gradient editor options .

From the presets at the top select a three striped one like so:

gradient_editor_byb1.gif

It doesn’t matter which you choose because we will change the colors now. Select one of the “stops” just below the gradient strip . Than click on the color box at the very bottom left
gradient_editor_bottom_left1.gif
and it will open a color selection box which you will enter the follwong values #b7b7b7gradient_editor_b7b7b71.gif

Press ok. Do the exact same to the other stops within the gradient editor until you have this.

gradient_editor_complete1.gif

Than press ok again. On your stage you should be seeing this.
triangle_with_border.gif

Your layers panel should look like this:
layers_pallette1.gif

Now we are going to add a cool shine to the triangle using the gradient tool. first add a new layer -same way as done previously.

new_layer.gif

Rename that layer “Shine” . With the shine layer being slected roll your mouse over the triangle icon once more and Click the mouse while holding down on ctrl. This will again give you the triangle selection . Now go to SELECT> MODIFY>CONTRACT and type in 3 pixels and click ok.

contract_values1.gif

Still on the shine layer – go select the gradient tool from the Main tool bar.

gradient_tool.gif

Go to the top of page and put in the correct properties for the gradient we want to use. To edit gradient we go here:

edit_gradient_style1.gif

a new box pops open and than select the “foreground to Transparent”

gradient_editor_stop_yellow.gif

Than go change the color of the one “stop” box . This time make the color a light yellowy green (#FFFC24)
click ok. NOw take your mouse over to your work stage. place your mouse just below the triangle and hold down on ctrl and drag upward to about half way through the triangle.

drag_gradient1.gif

Like so. and release. this will create a nice shine. Now in your layers panel add a new layer and rename it “RSS ICON” – I will not start explaining how to do this shape….as it can get complicated . SO please download this RSS ICON here – and just drag it from within photoshop to your “rss icon” layer. Resize it accordingly.
You should now see this :
almost_done1.gif

NOw again in your layers panel create a new layer and Rename it Glass. We are now going to give it a nice new glassy effect. With this layer selected bring your mouse over the triangle Icon again and hold down on ctrl and click

shape_selection.gif

This will select it..again. Go to SELECT>MODIFY>CONTRACT and type in 3 pixels – click ok.
go to the main toolbar and select the “ELIPTIC MARQUEE TOOL”

elip_marquee_tool1.gif

Go to the work stage and hold down on alt. Your cursor should transform from an arrow to a crosshairs with a minus sign attached.alt_crosshairs1.gif

It should be placed approximately here – about in the vertical middle of the shape , to the left side – as seen in the above screenshot. With alt still being held down…..now drag it to the right side of shape all the way across. and release

selection_top_triangle.jpg

your selection should look like this. now go select the Gradient tool from the main tool bar again. Make the foreground color white. You can set the foreground from within the main tool bar. (This gradient style should be like the last one we did – Foreground to transparent – since it was the last one you used – your properties should still be set to it – so have no worries) NOw bring your mouse to the work stage and place it just above the triangle shape and selection and drag downward to about middle of shape. The tutorial ends here…you should see this.

done1.gif

I really hope you all can benefit from this tutorial..as i put some serious thought and time into it.
If you want the PSD of this tutorial as I did it. Please contact me at aaronova@gmail.com I would be happy to send it over.

Looking Forward.

Related Posts with Thumbnails

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

[...] Hot Rss feed icon Tutorial IS HERE. 5 07 2007 HOT TUTORIAL – ITS HERE ! [...]

Nice!
1 Question: New feed for new site?
no more updates for http://photoshopit.wordpress.com/feed/ ?

[...] 4 02 2007 WE MOVED TO A NEW DOMAIN!! GET THIS RSS FEED ICON FREE OVER at PhotoshopCandy.com or GO CHECK OUT THE RSS ICON TUTORIAL -STEP BY STEP! Hey guys – after a long vacation – I am excited to be back. I am actually happy to see that web 2.0 [...]

[...] Photoshop Pyramidal RSS Icons [...]

I will be using this big time. It looks so crisp! Great work

[...] Glassy & Vibrant RSS feed icon Tutorial Vista Style für Photoshop [...]

[...] Glassy & Vibrant Rss feed icon Tutorial – Descarga [...]

I wonder if you sent me the PSD file for learn more about it.
Thanks!!

damn, ilke that green colour

[...] Learn to make your own RSS icon! I used this tutorial to make my heart RSS icon on my header in Photoshop. It didn’t come out [...]

[...] PhotoshopCandy The PSD is available upon request. [...]

Thanks a bunch for the tutorial. I’ll use it in my upcoming project.

One nice piece of tutorial..

http://thebloggermustdie.blogspot.com/

[...] Glassy & Vibrant RSS feed icon TutorialVista Style for Adobe Photoshop [...]

[...] Glassy & Vibrant RSS feed icon Tutorial Vista Style for Adobe Photoshop [...]

For some reason after I create the triangle, add the new layer, move the layer below the triangle, and go to expand it, the expand is grayed out so that I can not select it. Can you help me?

[...] ♦ Glassy & Vibrant Rss feed icon Tutorial – Vista Style [...]

wow, cant believe i will do that!!!!

http://www.getaio.com

amazing stuff. Love it.

[...] Glassy & Vibrant RSS feed icon Tutorial Vista Style for Adobe Photoshop [...]

[...] me introduce:Link Shots  My First link shot goes out to Photoshopcandy  for the neat RSS icon tutorial I used to create that box, yes I modified it somewhat because I wasn’t interested in creating [...]

[...] Glassy & Vibrant Rss feed icon Tutorial – Vista Style. [...]

Awesome tutorial. I’ve been needing to make an RSS icon for some time and you’ve really helped set me on the right path. Thanks a ton!

[...] Photoshopcandy: Design Vista style glassy and vibrant RSS feed icon [...]

Wow! This is such a great tutorial thanks a lot!

[...] Photoshopcandy: 设计Vista样式的 RSS 图标 [...]

Very Nice :)

[...] Glassy rss (tutorial): [...]

to 32s. that of barley to 24s. and that of oats to 16s. and ho scale model train track layouts he must be rich or poor according to the quantity of that labour which he jevbuaumpp

[...] Rss icon 1 + Rss icon 2 [...]

[...] Photoshopcandy: Design Vista style glassy and vibrant RSS feed icon [...]

[...] Photoshopcandy: Design Vista style glassy and vibrant RSS feed icon [...]

[...] to create your own customized RSS feed icons. Photoshopcandy: Design Vista style glassy and vibrant RSS feed icon Create RSS Icon rss-icons.com allows you to create customize RSS icons by filling up the form. [...]

[...] pack by bittbox Christmas RSS Icon Heart Shape RSS Icons RSS Reader Icon Photoshopcandy: Design Vista style glassy and vibrant RSS feed icon Create RSS Icon RSS Graphic Tool Yet another online service to create customize RSS Icon [...]

We used snapping names. and work the tree, for kids to actually for kids huge tree his

I like your website; I will share this with friends

england free student clean

[...] create or find a suitable RSS icon. You can find some excellent tutorials on creating feed icons here, here and here. Alternatively, you can download a whole bunch of free icons from [...]

I’m new to PS. Good tutorial and great results. Thanks for your efforts and sharing.

Steve S.
NJ, USA

kitchen house german green global clean yes boy keyboard

Nice tutorial and result! Maybe you could use the burn / dodge tool to add a bit more depth.

[...] Photoshopcandy: Design Vista style glassy and vibrant RSS feed icon [...]

all water boy look we

right greed microsoft google all tree joke frog minor vacant look

H2MziP hi! hice site!

great site for the safety of your child!

[...] Glassy rss (tutorial): [...]

[...] Photoshopcandy: Design Vista Style Glassy And Vibrant RSS Feed Icon [...]

[...] GLASSY AND VIBRANT RSS FEED ICON [...]

[...] Go to Tutorial Something to say? [...]

[...] Glassy & Vibrant Rss feed icon Tutorial – Vista Style. Digg it StumbleUpon Delicious [...]

[...] Glassy & Vibrant Rss feed icon Tutorial – Vista Style. [...]

Thanks, very helpful guide for designing own Rss feed in adobe.

We appreciate your post!

Great tut had to make a couple of adjustments with cs4 instead of holding control its hold alt while dragging for the gradient.
I also had to make the drag a bit longer to make the glass effect but still got there in the end.

Hello Id Like to fly you this flawless potentiality !

How relating to we try something a teeny-weeny empty remove this later ?

perluck something like this ?

http://www.godly87.com

In most cases a product’s rating went down, expanding the range between highest and lowest rated.Unlike Kaspersky, Symantec provides Norton users with little explanation of its features or settings, either in the configuration settings or on its technical support section. Also we don’t like Norton’s dependency on Internet Explorer to explain Help items or services provided by Symantec (windows pop up in IE even when Firefox is your default browser), or that fee-based services have once again crept into the technical support section. Having improved a lot
last year in Symantec’s flagship antivirus product, it makes sense we’d see more modest enhancements for this year’s Norton AntiVirus 2008. While Norton
AntiVirus.

Hi!

I’ve found your message to be very useful, though the information is not new.
I’m your permanent reader now!

p.s. BTW, what happened to your site template? Or is it just my browser? :)

http://samsungln46a650review.tumblr.com/

What is bumburbia?

[...] Glassy & Vibrant Rss feed icon Tutorial – Descarga [...]

links

[...] Photoshopcandy: Design Vista style glassy and vibrant RSS feed icon [...]

[...] Glassy & Vibrant RSS feed icon using Photoshop [...]

Nice tutorial. Really was helpful! thanks a lot!

Great Tutorial, your stuff is so cool :-)

[...] Photoshopcandy: Design Vista style glassy and vibrant RSS feed icon [...]

Thanks, this tutorial was great thanks a lot

[...] Photoshopcandy: Design Vista style glassy and vibrant RSS feed icon [...]

[...] Photoshopcandy: Design Vista style glassy and vibrant RSS feed icon [...]

[...] Photoshopcandy: Design Vista style glassy and vibrant RSS feed icon [...]

Hi, this articles is great, because is in english and I’m czech, I learnt a lot of thinks. Thanks.

[...] Photoshopcandy: 设计Vista样式的 RSS 图标 [...]

[...] Photoshopcandy: 设计Vista样式的 RSS 图标 [...]

[...] Photoshopcandy: Design Vista style glassy and vibrant RSS feed icon [...]

[...] Photoshopcandy: Design Vista Style Glassy And Vibrant RSS Feed Icon [...]

Браво, ваше мнение пригодится

[...] Glassy rss (tutorial): [...]

Неплохая подборка в блоге, хорошо сделано, автору спс.

[...] Glassy & Vibrant RSS feed icon Tutorial Vista Style for Adobe Photoshop [...]

Your site is a much needed addition to my life. THANK YOU!

Меня эта статья очень заинтересовала. Но есть и другие, более детальные мнения на этот счёт.
Автору всеровно спасибо

Тутнекоторые посетители задают такие вопросы, что охринеть можно. Не тем интересуетесь

Всем привет, смотрю что тут все такие подхалимы, что не коммент , то лесть полная….

На мой взгляд довольно неплохой блог, авторам салют, хорошо поработали.

Очень полезный материал, но немного тяжёл для восприятия.
Стоит писать более просто, дабы понять саму суть происходящего

Увлекательный материал, скажу без лишней скромности. Спасибо автору

Материал аслуживает повышенного внимания. Дабы изучить более подробно, добавлю в избранное

Для более подробного и внимательного изучения добавил в избранное. Буду изучать

Давно искал такой материал, перерыл весь рунет! Рад что наконец нащёл

if you want translate something just ask me

[...] ♦ Glassy & Vibrant Rss feed icon Tutorial – Vista Style [...]

Великолепный материал для понимающих людей, правда я бы добавил пару деталей

Amazing and very simple tutorial!

[...] Glassy & Vibrant Rss feed icon Tutorial – Vista Style Glassy & Vibrant Rss feed icon Tutorial – Vista Style [...]

Awesome tutorial — thanks!!!

[...] Photoshopcandy: Design Vista style glassy and vibrant RSS feed icon [...]

Интересно, подобного мало где найдёшь.

Отлично сделали блог, есть чему начинающим поучиться. Молодцы.

[...] Glassy & Vibrant RSS feed icon Tutorial Vista Style for Adobe Photoshop [...]

Да, не ожидал что увижу сдесь столько интересного в комментах.

Не часто такое можно увидеть, удивлен.

Конечно правильно думаешь, хотя можно и по другому.

спасибо за инфу , интересный урок – Применил на практике)
MyWarez´s last blog ..Adobe Acrobat 9.2.0.124 Pro Portable Rus My ComLuv Profile

It is a pity, that now I can not express – it is compelled to leave. But I will be released – I will necessarily write that I think on this question.
It here if I am not mistaken.
Quite right! It seems to me it is excellent idea. I agree with you.
It to you a science.
Has casually found today this forum and it was specially registered to participate in discussion.
Twitter: Novostnic

May be adding a bit more depth could help, specially with Photoshop CS

The yellow and black combination of the design gives the RSS feed icon much more appealing. The contrast is just perfect for the eyes.
CRM for small business´s last blog ..Differences between CRM implementation and CRM adoption (Part 2) My ComLuv Profile

so good page… thanks admin.
tüp bebek fiyatları´s last blog ..IMSI My ComLuv Profile

Absolutely agree with previous reports

Good post, not what can not be said.

Absolutely agree with previous reports.

Leave a comment

(required)

(required)


CommentLuv Enabled