How To Create Your Own Unique RSS Icon

by Steve Tolley

This tutorial will teach you some key skills that come in handy when creating different things in Photoshop, it’s main aim is to show you how to create your own unique RSS icon, very useful if you have your own website and you want to make it more unique, easy to understand and follow.

Step 1: Create a new document sized around 500 x 500 and set the background to transparent:

Step 2: Now choose the rectangle tool and hold down shift this will keep the sizes of the sides the same therefore creating a square, make sure this is in the centre of the canvas.

Step 3: Now to get the curved corners you need to refer to my previous tutorial by clicking HERE when you have done this you need to set some blending options (right click on the layer and choose blending options) on the rounded square to get the right colour and effect use the settings below but feel free to play around with the settings a bit to get something unique to you or your website etc…

Step 4: Now we need to add the symbol which will create the RSS icon, go to “Custom Shape Tool” and choose the Copyright symbol as shown below:

Step 5: Hold down shift and draw the symbol fairly large (don’t worry if it goes off the canvas) and position according to the centre of your square and right click the symbol layer and choose Rasterize Layer, next go to Edit > Transform > Flip Horizontal so that the symbol is backwards.

Step 6: Now select the Rectangular marquee tool and select the outer parts of the symbol and press delete to get rid of them as shown below:

Step 7: When this is done choose the Ellipse Tool and draw a small circle in the bottom left corner to finish off the icon.

Step 8: Now simply right click on the symbol layer and choose blending options and operate the Stroke and change the colour to black and the size to 3px and repeat this for the circle layer to get something similar to below:

Step 9: Now create a new layer (CTRL + Shift + N) now select the pen tool and draw a curved shape across the square and right click and choose make selection as below:

Step 10: Choose the Fill Tool and fill the selection White and then choose the move tool and move to the desired position

Step 11: With the white filled selection layer still selected CTRL + Click on the layer mask of the square and then press CTRL + Shift + I, and then simply press delete to leave only the white inside the square remaining:

Step 12: Now change the opacity of the selected layer to 25% to give the effect of a shiny surface, and you should end up with the end product as shown:

For added effect you can refer to my Simple Reflection Tutorial and create a reflection of the Icon, and then save it as a PNG file so that when uploaded to a website it will keep its transparent background.

Final Image:

The PSD file is available to download if anybody is interested then please leave a comment asking for it or simply e-mail me at: stevie489@googlemail.com and I will happily mail it back to you

Also if you have any problems with this tutorial or need any help Photoshop then feel free to leave a comment or e-mail me.

Category : Web Graphics
Tags : , , , ,
4 Comm

A Simple Text Reflection

by Steve Tolley

This tutorial is a simple tutorial that explains how to get a realistic looking reflection when using text or images, simple to follow and easy to understand

Step 1: Open up Photoshop and create a new document with the sizes set to around 500 x 500 and the background should be set to black

Step 2: Choose the text tool and write out whatever the text you want to reflect is, here I have chosen the word “Photoshop” as it is relevant to what I am doing.

Step 3: Now press the tick on the top toolbar when you have finished typing and then press CTRL+J this then duplicates the text layer so that there are now two

Step 4: With the duplicated layer selected go to Edit > Transform > Flip Vertical this will make the text upside down, now drag it below the original text so all the letters line up, and the press the “Add New Layer Mask” button under the layers palette as shown below:

Step 5: With the layer mask selected choose the gradient tool and then click above the “O” and hold Shift and drag downwards to a desired position (the more you drag the weaker the reflection, so it is better if you don’t drag a long way down this allows you to get a more realistic looking reflection)

Step 6: After you have found the gradient that you like best you are done and should end up with something like this image below:

If you have had any problems with this tutorial and would like some help then don’t hesitate to contact me either by leaving a comment below or e-mailing me at: stevie489@googlemail.com

Category : Text Effects
Tags : , , , ,
7 Comm

Creating The Google Blogger Icon In Web 2.0 Style

by Steve Tolley

This tutorial shows how to simply create the Google Blogger icon in Web 2.0 style using Photoshop, easy to follow and understand and can be used on any image/icon.

Step 1: First of all get the picture of the Blogger Icon (Can Be Found HERE) and copy and paste it into a new document (size: 500 width and 700 height) click and hold on the eraser tool and choose magic eraser and click at the bottom right and left corners to get rid of the white border around the image (if this is not done then the blending options will not work)

Step 2: Next we have to add a couple of “blending options” (right click on the layer and choose “blending options”) we are going to add an inner glow (colour white and size 20) and a bevel (size 200 and shadow opacity 30%) these are both shown below…

Step 3: After completing the above we need to add the highlights, to do this we need to create two new layers and right click on these and choose clipping mask (an arrow will appear next to the blank layer pointing to the blogger icon layer) now with the first clipping layer chosen, choose the elliptical marquee tool and put an oval around the top of your icon, and then fill this with white and change the fill percentage to 30 and you will be left with the below image…

Step 4: Now do the same with the second blank layer but do this at the bottom of the blogger icon and fill with black and change the fill percentage to 10 which will leave you with the below image…

Step 5: Now choose both of the new layers (clipping masks) and rotate to the left so that they are at an angle on the blogger icon as shown below…

Step 6: Now choose all of the layers (except for the background layer) and right click and choose “merge layers” this will put all of the layers into just 1

Step 7: Press CTRL + J (this copies the slected layer and pastes it into a new layer) and the choose EDIT > TRANSFORM > FLIP VERTICAL and then move the copied layer directly below the original layer and if needed select both layers and minimize slightly

Step 8: Finally add a layer mask to the flipped layer and choose the gradient tool (make sure the black and white option is chosen) and drag from the bottom upwards so that half of the image is white and if needed change the opacity this will leave you with the final image as shown below…

This can be done with any image using the same settings..
If there is any problems with this tutorial or you get stuck then leave a comment and I will respond to it ASAP.

Category : Other/Misc
Tags : , , ,
7 Comm