Beautiful RSS icons with Photoshop

Beautiful RSS icons with Photoshop

0 24245
Beautiful RSS icons with Photoshop

Photoshop tutorial. If you do not know what is RSS, this is special format of posts in a blog, which allows you to receive updates from the site without necessity to visit it. To read RSS, we can use special programs – RSS readers (eg Google Reader). As a rule, each blog has a button that allows you to subscribe to the articles on your blog with RSS. It can be placed anywhere but it should be visible, it is often placed in the sidebar closer to the header, and sometimes give it an impressive size, so visitors will notice it easily. In any case, the user does not need search for it specifically.

As usual, the RSS icon has a certain standard, it is usually orange with white background inside. However, recently, designers started to experiment in this direction, creating original and delightfully different icons. So why do not we also draw something own?

Let’s start creating our own RSS icon for our website – we just need to follow the three basic steps:

Step 1. Create a form

Download the set of forms for the RSS icons, for example here, or download any other set of forms. Now, to connect them in Photoshop, find the directory where the Photoshop is installed, and copy the downloaded CSH file in the folder ‘Presets\Custom Shapes’. Further, in the graphics editor Photoshop in the sidebar select element with forms:

prepare shapes

A new block with elements of different shapes will appear in the upper toolbar. When you click on it, a window with available set will appear, on the right of which will be a small arrow. Click on it, and choose ‘Load Shapes’ in the drop-down menu to download the new forms. Thereafter, the number of available elements will be increased.

Choosing the right form (of the RSS icon) and begin to draw. Hold down the Shift key, and we get the “right shape” without stretch marks in width or height. The form is ready, the corresponding layer is created.

photoshop forms

Step 2: Setting the style for icons

Style – a set of properties for the object (shadow, glow, outline), which are grouped into one and apply to one or another element with a mouse click. You may find many ready styles in the Internet, many of them are at Deviantart website, for instance, you can download it here and here.

In order to install their styles, back to the Photoshop, in the ‘Edit’ main menu find the item ‘Preset Manager’.

installing styles

In the drop-down list, select the ‘styles’. After you select it, a list of the already existing elements will appear. To load new styles, press the button ‘Load’. After it is completed, click ‘Done’.

Now it’s time to apply the styles. For this purpose, firstly check if the necessary element with form is already selected in Layers, then click on any style you like. The result will be immediately applied.

work with styles

Step 3. Cosmetic Changes

Now, based on the gained knowledge, we can slightly improve our icon. To do this, add another layer (#1), and move it under the layer with the form:

work with styles

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

As we’ve already said, the style is the combination of different properties of an object. If you look at the layer, you will see a list of most of these properties (#1):

work with styles (2)

Therefore, we can make changes in every style. To do this, just click twice on the icon (#2) and in the pop-up window we can modify new settings of the style. For instance, you can add a shadow in the form (#3). To save your changes, simply click ‘OK’ button.

After all, we can merge all visible layers – ‘Layer’ section in the main menu, then click MergeVisible (or Ctrl+Shift+E).

Congratulation, our RSS icon is ready

Having different shapes and styles you can quickly and easily create other original RSS icons for your websites.

other icons


Leave a Reply