Hello everybody welcome to a new tutorial from HV-Designs. Today Alice will show us how to create an RSS Icon button. The techniques used for this tutorial could easily be used for other icons that you might want to create.

“RSS (most commonly expanded as Really Simple Syndication) is a family of web feed formats used to publish frequently updated works—such as blog entries, news headlines, audio, and video—in a standardized format. ”

“Although RSS formats have evolved from as early as March 1999, it was between 2005 and 2006 when RSS gained widespread use, and the icon was decided upon by several major Web browsers.”
(souce, Wikipedia: http://en.wikipedia.org/wiki/RSS)

So, I suppose you are well familiar with the tiny orange RSS icon, are you?
RSS is awesome, so that’s why I’ve chosen it as a theme for today’s tutorial ^_^
So. Today, instead of the tinsey-bitsey icon we usually see, let’s do something graaaand! Let’s do a glassy, huge, 3D RSS icon =D

….okay, I realize nobody would place an icon this big on their website but hey! We’re designers, we think with our hearts not our brains hehehe =]

So today, we’ll  learn how to do this:

To work I say! =D

• Step 1:

Create a new canvas, say about 450×450 pixels. Fill it with…say white #ffffff….and name the layer “Background”. Then, set your Foreground color to #e2832f

• Step 2:

Now, create a new layer (Ctrl/Cmd+Shift+N or click on the square icon at the base of your layers palette) and name it “Icon Base”.
Go to your Tools palette and take the Rounded Rectangle Tool (U), set it to Shape Layers and set its Radius to about 40px.

On the new layer you just created, hold down Shift key and click&drag to create an orange rectangle, like this:

• Step 3:

Okay…now go to Edit–>Perspective, and squeeze the shape down a bit, on the right side. Just hold&drag one of the controllers on the right side. Then press Enter to confirm the transformation and click Ctrl(Cmd on Mac)+T to freetransform the thingy, and from the right side resize it vertically (aka, squeeze it vertically).
Like this:

At this stage, you can enlarge your shape if you feel it’s gotten small….that’s up to you.

• Step 4:

Good until now…let’s move on =]

Create a new layer above the Icon Base one, right-click on it in the Layers Palette and choose “Create Layer Mask”. This will make the layer you just created into a layer mask, aka it will stop any pixels drawn on this layer to go out of the borders on the layer which it is assigned as a clipping mask to (in this case, the Icon base).

Kay, so now take the Gradient Tool (G) and set your Foreground color to #fac042 and your background one to #d75927 and setting your gradient to “Radial Gradient”, drag from the bottom to the top of your shape – of course, drag on the new layer….naturally. Like thiiiis……..:

• Step 5:

Okay, now on to a new layer…..name it “Top Reflection”. Then right-click and make it a clipping mask to the icon Base layer as well (but make sure it is placed above the gradient layer, okay? )
This is what your Layers Palette should look like now:

Kay, so now take the Pen Tool (P) and set it to Paths mode, then use it to make a path that looks like a ..well..erm…err….a…curve? xD;
Like this, anyway, images explain better now

Then right-click on that with the Pen Tool and choose “Make Selection”.  I set mine to Feather Radius 0, Anti-aliased, New Selection.
Okay, after you have your selection, take the Gradient Tool, set your Foreground color to #f2b46b and your gradient to Linear Gradient, Foreground to Transparent, Normal blending mode and opacity 100% drag from the top-right towards the bottom-left of the icon base shape, but don’t touch the bottom left, stop about 80 pixels from it, like this:

Then this is what you should have now:

• Step 6:

Now let’s make the “body” of our icon, shall we?

Duplicate the Icon Base layer. Pay attention that its two clipping masks will lose their mask abilities and become normal layers when you do this. Just right-click on them again and choose Create Clipping Mask to solve this ^_~

Now take the bottommost Icon Base copy and name it “Icon Body” then click Ctrl(Cmd)+T to free transform it. Hold down Shift key and drag from the bottom-left controller a little, like this:

Click Enter to confirm the transform then press Ctrl(Cmd)+t once again and squeeze the top-left and bottom-right points, like this:

Click Enter to confirm, then go to your Tools Palette….and choose the Direct Selection Tool (A) —that’s the one above the Pen Tool, the one which looks like a white arrow, NOT the one which looks like a black arrow, mind that o.o

Kay, now click with the white arrow somewhere on the orange of the Icon Body (now pay attention that you don’t accidentally click on the surface of the Icon Base, because then the arrow will select the Base …and we don’t want that, kay? )
So click on the flat orange of the Body, and you should see a little…wireframe…like a gray stroke around it, yea?

Click with the Direct Selection Tool directly on the gray wireframe, and then its anchor points will be visible ^___^
With the Direct Selection Tool, click on the two points I marked with red and drag them so that they give a nice, compact perspective view, and touch the Icon Base margins, like this:

So this is what you should have till now…or something close:

• Step 7:

So far so good >w<

Now go to your Icon Body’s blending options (either double-click the layer or go to Layer–>Layer Style—>Blending Options) and give it these settings:

• Step 8:

Okay, so now your thingy should look something like this, yea?

Yes—>proceed to step 8, no—>go back to revise hehehe

Buuuut, since all should be okay, let’s go on ^^

Kay, in order to do that, we absolutely need to get rid of the layer styles Icon Body layer has….but keep its styled look at the same time xD
….lost you? Lol, sorry
Here’s what we’ll do:

First, duplicate your Icon Base layer, move the copy under your background layer and click on the eye icon in the Layers Palette, to hide the layer. Yeah, it’s a nice layer style, keep it we might need it layer xD

Next, go back to your visible Icon Body and create a new layer above it. Holding down Ctrl(Cmd) key, click on the lcon Body layer as well, so now you have both the Icon Body and the new layer you just made on top of it in a dark blue color, and then…click Ctrl(Cmd)+E to merge them. That will get rid of the layer styles but at the same time..well..keep them ^^

That will also change your layer name to Layer 3 or..something, so now re-name it to Icon Body, kay?

Good….let’s go on now.

• Step 9:

Make a new layer above it, and right-click—>Create Clipping Mask.

Now, take the Gradient tool(G), set your Foreground color to #eca839 and your Tool to Foreground-to-transparent, Reflected Gradient, mode=Normal and opacity 100%.

Click and drag on your new clipping mask, at the 3 visible corners of the Icon Body, like this:

Set the layer to Screen mode, lower its opacity to about 90%.

Now Ctrl(Cmd)+E to merge it with your Icon Body……

• Step 10:

Kay, moooo-vin’ on

Take the Dodge Tool (O), set it to a round soft airbrush, size about 30px,  Range: Highlights, Exposure: 11% and make sure that Airbrush button is clicked.

Then brush a little on the Icon Body, at the bottom-left corner. So that it looks kinda like this (pay attention, we don’t want too much glowy stuff at the corner, kay?):

Next, brush a bit on the Body’s left side as well, but you know, only a bit, enough to change a bit its color compared to the bottom of the Body. Like thiiiissss…:

• Step 11:

Okay, now let’s temporarily go back to working on our Icon Base layer’s look

First, make a new layer, name it “Border”, move it on top of Icon Base’s clipping masks, then right-click on it and transform it into a Clipping mask as well…like so:

Kay, now Ctrl(Cmd)+click on your Icon Base layer’s thumbnail in the layers palette to obtain a selection of it….and then go to Edit–>Stroke, choose Center and 24 pixels.

Okay, now your stuffie looks somewat like this

Good.
Then remember, we must stay true to our belief…err…I mean, we must stay true to perspective’s rules, yea? =]

So, naturally, from this perspective …we must click Ctrl(Cmd)+T to transform our Border a bit, aka drag a little to the right and a bit to the top, to make the border on those two sides barely visible, like so (I am coloring it in red, so you can see the difference, okay?) :

Okay, now give your Border this layer style:

• Step 12:

Kay, now make a new layer and move it under the Border one.Obtain a selection of your Border layer, set your Foreground color to #fdf8d2 and your Background one to #f5dc88 and go to Edit–>Stroke–>Center–>4px.

Then set the layer to Overlay blending mode, lower its Opacity to about 50% and give it this layer style:

Ctrl(Cmd)+click on the Border layer afterwards, to have them both selected, and merge them by Ctrl(Cmd)+E.
After which, take the same Dodge tool we used earlier and give it a few highlights, then take the Burn Tool with the settings of round, soft, Shadows, Exposure: 11% and airbrush NOT clicked, and burn&pillage..errr.dodge I mean..around to get it to look like this:

• Step 13:

Make a new layer, and move it on top of your Icon Body one.
Obtain a selection of your Icon BASE layer (careful not to confuse it with Icon Body haha). Then right-click—>Create Clipping mask and go to Edit–>Stroke–>Center–>4px…..okay…then set it to Hard Light and lower Opacity to about 70%.

Good…now click on the the Lock Transparent Pixels icon at the top of your Layers Palette…here:

Set your Foreground color to #fbf2c7 and your Background one to #fbca30, take the Gradient Tool (G) set it to Foreground to Transparent, Radial Gradient and Give it a few highlits at the corners, and a few shadows at the bottom side, like soooo:

Then give it this layer style:

• Step 14:

Moooo-vin’ on >w<

Okay, obtain a selection of your Icon Base. Then create a new layer and move it so that it is placed between your Icon Body layer and the stroke you just created now, in the previous step. Make sure both the stroke and the layer you just made now are clipping masks to Icon Body, okay?

Kay, name your layer “Body 3D” and set your Foreground color to #c35c18 after which fill the selection you have with this color using the Paint Bucket Tool (G).

Set it to Color Dodge blending mode and lower its Opacity to about 20%. Deselect.

This is what it should look like….:

• Step 15:

Now we’l move our bisiness elsewhere…and that is to making the Base part look 3D =]

Okay, get a selection of the Icon Base layer again.

Create a new layer and move it just over the Top Reflection one, so that it is a Clipping Mask too. Name it “Body 3D” …Like this:

Lock its transparent pixels like we did before, and then set your Foreground to #f2af3b and the Background to #c25c18 then take the Gradient Tool (G) and set it to Foreground to background, then drag from the top-right of the rounded rectangle to the bottom-left….
Like so:

Set the layer to Multiply, and lower Opacity to about 27%.

• Step 16:

More work ^^
Set your Foreground color to #fcee88 and create a new layer above the Body 3D one and name it “Corners Glow”. Take the Gradient Tool (G), set it to Radial Gradient, Foreground-t-transparent, and drag a little in the corners, like this:

Set the layer to Linear Dodge, and lower Fill to about 35%.

• Step 17:

Okay, now deselec any existing selections you might have. Then obtain a selection of the Body 3D layer and set your Foreground color to #c35c18.
Make a new layer, name it “Shadow 3D” and place it as a clipping mask between the Border and the Corners Glow, like this:

Take the Gradient tool, make sure it’s set to Foreground-to-transparent, and Linear Gradient and drag from top-middle towards bottom-left, like this:

Lower the layer’s opacity to about 40% ^___^

• Step 18:

Make a new layer between the gradient one and the Top Reflection, like this:

Set it to Linear Burn, lower its opacity to about 70%. On that note, also lower your Top Reflection’s Fill to 90% and set it to Lighten.

Obtain a selection of your Body 3D layer and press Ctrl(Cmd)+Shift+I to invert selection, then take the Gradient tool with the same settings as before and drag from top to middle of the selection. Deselect.

This is about what you should have now

• Step 19:

Okay, now we’ll take care of the Reflections =]

Make a new layer and place it just under the Border one (so that it’s a clipping mask). Name it “Reflection 1″. Then, obtain a selection of your Icon Base, and click on the Elliptical Marquee Tool (M). Set it to Intersect with Selection, Feather: 0px and anti-alias checked.

Next, zoom out to about 70% and using the Elliptical Marquee Tool, click at about 11 o’clock, some 100px outside, so that you get a selection like this:

Okay…that done, let’s switch our tool of trade…to the Gradient tool hehehe
Set your Foreground color to white (#ffffff) and taking the Gradient Tool (G), with the Foreground-to-transparent setting, Linear Gradient, drag like this:

Set the layer to Color Dodge, and then lower its Fill to 35%

• Step 20:

Woohoo! Step 20, we’ve gone far hehehe >w<

Mmkay, now deselect…and your pic should look something like this:

Okay, one more highlight to go…
Obtain the seletion of your Icon Base again. Then make a new layer, under the Reflection 1…name..well of course, with the extra original name of “Reflection 2″! =D

Hehe….Now using the same Elliptical Marquee Tool (M) strategy we used in the previous step, make a selection something like this:

Then take the glooorious Gradient tool (G)…yes, same settings as before of course, and drag like this:

Set the layer to Hard Light blending mode and lower its Fill to about 25%.

• Step 21:

This is what your thingy should look like…or something similar

Kay. Good! Now let’s take care of our RSS symbol, okay?
Download this shape to your computer:

http://seiorai.deviantart.com/art/RSS-custom-shape-188328814

Make a new layer, above all your other layers.
Now load the shape into Photoshop and drag to create a shape that’d cover about 70% of the icon surface, like this:

Next, click Ctrl(Cmd)+T to freely transform it, by holding down Ctrl(Cmd)&click&dragging the top-right corner especially, into something like this:

• Step 22:

Duplicate it 2 times, hide two of them and the third move it under the Reflection 2 layer, so it is a clipping mask as well. Name it “RSS Face”.

Now add to it these Blending Styles:

Lower the layer’s Fill to 90%.

So now this is about how your pic should be like:

• Step 23:

Okay, now take one of the other 2 copies we made of the RSS shape, and move it under the RSS Face one. Then use the Move Tool (V0 to move it a bit to the left and then down, so that it looks like a shadow of the RSS face…like this:

If needed, you can transform it a bit so that you won’t see any “gap”..”valley” between the tips of the shaow and the tips if the RSS face.

Change its Shape color to #c35c18 this is very important.
Give it this layer style:

Now, lower its Fill to about 35%.

• Step 24:

Not much more till the finish, I promise xD

Know the third copy of the RSS shape? Move it under the other 2 copies of the shape……and set its shape color to #c55f1a.

Move it to the left and a bit down, like this:

Lower its Fill to about 20%.

Okay…done! =D

Final result:

Now go and have a snack, you deserve it ^_^

Hope you enjoyed this