Over a million developers have joined DZone.

Beautiful RSS Icons with Photoshop

· Java Zone

Discover how powerful static code analysis and ergonomic design make development not only productive but also an enjoyable experience, brought to you in partnership with JetBrains

Beautiful RSS icons with Photoshop

If you do not know what RSS is, it's a special format of posts in a blog which allows you to receive updates from the site without necessity visiting it. To read RSS, we can use special programs, such as RSS readers (e.g. 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, and it is often placed in the sidebar closer to the header, and sometimes it will have 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 a white background. However, recently designers have started to experiment, creating original and delightfully different icons. So, why not also draw something on our 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 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

Learn more about Kotlin, a new programming language designed to solve problems that software developers face every day brought to you in partnership with JetBrains.


Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}