Creating a beautiful RSS icon for your blog

For those who do not yet know RSS, a special blog post format that allows you to receive updates from a site without having to visit it. For reading special programs are used – RSS readers (for example, Google Reader).

Typically, every blog has a button that allows you to subscribe to your blog s articles via RSS. It can be located anywhere, but it should be noticeable, it is often placed in the sidebar closer to the site header, sometimes it is given an impressive size so that visitors will notice. In any case, the user should not specifically search for it.

rss icon

Basically, the RSS icon has a certain standard, so to speak – orange with a white image inside. However, recently, designers have begun experimenting in this direction, creating original and dissimilar icons. So why don t we draw something of our own too!

Let s start creating our own RSS icon for your blog – for this you need to run 3 easy steps

Step 1. Create the form

Downloading a set of forms for RSS icons. To connect them to Photoshop, find the directory where it is installed and copy the * .csh file to the folder Presets Custom ShapesNext, in the graphics editor photoshop in the side toolbar, select the element with the shapes (point 1 in the figure below):

shapes for photoshop

A block with elements of different shapes will appear in the upper control panel. When you click on it, a window with an available set will appear, to the right of which there will be a small arrow. Click on it and in the drop-down menu select the Load Shapes item in order to load new shapes. After that, the number of available items will increase.

Choose the shape we need and start drawing. Holding down the Shift key, we will get a “regular shape” without any width or height extensions. The form is ready, the corresponding layer is created.

photoshop shapes

Step 2. Setting the style for the icon

Style is a set of properties for an object (shadow, glow, outline), which are grouped into one whole and applied to a particular element with one click of the mouse. In the last post I wrote about beautiful styles for Photoshop, where I indicated links to 2 archives with styles (you can download them there).

Before using styles, you also need to install them. To do this, in the Edit section of the main menu, find the item Preset Manager

Setting styles (styles) in Photoshop

In the drop-down list, select the item styles (styles). After selection, a list of already existing elements will appear. To download new ones you need to press the button Load… After completion, click Done

Now we actually apply these very styles. To do this, first, make sure that the element with the shape we need is selected in the layers, and then click on any style that we like there. The result will be applied immediately.

Working with styles in Photoshop

Step 3. Cosmetic edits

Now, based on the knowledge gained, we can slightly improve our icon. To do this, add another layer (point 1 in the figure below), and it should be located under the layer with the shape:

tutorial with styles in Photoshop

Select a rectangular area that completely covers the picture inside the icon (point 2). After that, select the fill tool (point 3) and fill the selected area with the default color. Then again, just click on the style you like and it will be applied to this rectangular area.

As I said before, a style is a collection of different properties of an object. If you look at the layer, you will notice a list of these very properties (point 1 in the figure below):

photoshop styles

Therefore, you can make your own changes to each style. To do this, double-click on the icon (point 2) and create new style settings in the pop-up window. You can, for example, add a shadow in the form (point 3). To save the changes, click “OK”.

After all the settings, merge the visible layers of the image – the Layer section in the main menu, the MergeVisible item (or Ctrl + Shift + E).

RSS the icon is ready!

With many different shapes and styles available, you can quickly and easily create an original RSS icon for your blog.

rss icons for blog

If you liked the lesson – subscribe to the RSS or click on the corresponding icon in the blog 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *