Create a Vector RSS Icon

Beginner Illustrator Tutorial – Create a Vector RSS Icon

The best way to learn the ropes of a new application is to get stuck in with a working project. This Adobe Illustrator tutorial covers the simple steps involved in creating a vector RSS icon and includes a range of handy techniques that can be put into practice in future creations.

Adobe Illustrator is a vector graphics application, so it doesn’t matter what size the icon is created at. We can simply select all the objects and scale them up to the size of King Kong, or likewise scale them down to the desired size. Unlike Photoshop, all our lines and shapes will keep their crisp lines and colours because they’re made of mathematical calculations rather than good old pixels.

Open up Illustrator and create a new document. Click and hold the mouse over the Rectangle tool to select the Rounded Rectangle option hiding underneath. Draw your shape on the artboard while holding Shift, use the arrow cursor keys to adjust the roundness of the corners while dragging.

Another difference between Illustrator and Photoshop is the options sat at the bottom of the main tool palette. In Photoshop, I’m sure you’re familiar with the foreground and background swatches – In Illustrator this is replaced with the fill colour and stroke colour. Click the stroke option and clear off any defaults, then bring the fill into focus. Over in the Gradient Panel, add an orange fill that varies from dark to light vertically across the shape.

With the shape selected, go Object > Path > Offset Path. Enter -1mm in the options. Grab the corner of the new shape and rotate to 180 degrees so the gradients flow in opposite directions.

Grab the circle tool and draw a shape elsewhere on the artboard. Clear out any fill, and add a thick 16pt black stroke.

With the Direct Selection Tool (White Arrow), select only the left and bottom points of the circle. Hit delete on the keyboard to trim the circle down to a quarter.

Copy (CMD+C) the quarter circle and paste in front (CMD+F). Scale it down while holding the shift key to keep everything tight. Tip: Check the Scale Strokes and Effects option in the preferences and alter to your personal liking.

Adjust the stroke weight to match the 16pt of the original.

Press CMD+R to show the rulers, then drag a couple of guides out in alignment with the quarter circles. Using the intersection as a source, draw a small circle to finish off the traditional RSS shape.

Our two quarter circles are currently set as stroked paths, but we can quickly convert them to complete shapes by heading to Object > Expand, then selecting just the Stroke option.

With the three objects selected, add a grey-white gradient fill running vertically, and a 1pt light grey stroke.

Press CMD-G to Group the objects together, then scale and position them into place in the overall orange container.

Select the inner rectangle from the orange box, Copy (CMD-C) and Paste in Front (CMD-F). Fill it with white. One tip to remember is unlike Photoshop, Illustrator can hold multiple items in just one layer, each stackable on top of each other.

Draw a large, flat oval over the entire graphic. Pay close attention to how the bottom curve overlaps the white rectangle. With the oval and rectangle selection, click the Intersect Shape Area option in the Pathfinder palette.

Reduce the Opacity of this new shape down to around 15%, giving a sleek shine to the icon.

Finish off the graphic with a couple of specular hightlights in the form of circles. Use 15% opacity again to maintain a subtle appearance.

There we go, a simple vector RSS icon using some simple steps, but covering some of Illustrator’s powerful tools.

Download the source file

Simple organic shapes ! Shape it how u like it.

CREATE THE SHAPE

We start by creating a circle. Select the Ellipse Shape tool (L). Hold down Shift key while dragging. Turn on Smart Guides, go to View > Smart Guides or hit command/control + u. Make sure your Rulers are turned on. Go to View > Show Rulers or hit command/control + r. Drag a horizontal guide from the top Ruler to the middle of the circle. Select the Rotation tool and click in the center of the circle to set the rotation point. Rotate the circle 45°. While dragging hold down Shift key so the rotation snaps to 45°. With Smart Guides turned on you should also be able to see when you've turned the circle 45°. Select the Direct Selection tool (white arrow) and select the path segment on the right of the circle. Hit thedelete key.

Now select the Pen Tool and click in the top right point of the circle where you have just deleted the segment of the path to redraw this part as shown above in the image on the left. Hold down the Shift Key and click somewhere on the guide so you draw a perfect 45° line. Click in the bottom right point of the circle shape (that now looks more like a drop of water laying on its side) to close the path.

ADD LINEAR GRADIENT MASK

Now select the Rectangle tool (M) and draw a rectangle on top of the shape as shown in the image on the right above.

Give the rectangle a linear gradient fill, going from white to black at an angle of 0°. Now select both the drop shape and the rectangle. Go to the Transparency palette and select Make Opacity Mask from the palette's drop-down menu as shown in the image above. You should see the drop shape filled with a gradient as shown in the image below.

Select the mask thumbnail in the Transparency palette. Now you are in the Mask mode. Select the rectangle and select the Gradient tool from the toolbox. Redraw the linear gradient so the fill of the shape goes from 100% to 0% opacity from one end to the other. Click on the left of the shape, hold down Shift key and drag towards the other end on the right of the shape. The end point where you release is where you'll have 100% transparency. Leave the mask mode by clicking on the image thumbnail in the Transparency palette.

Grab the layer in the Layers palette and drag it onto the Create New Layer icon at the bottom of the palette to duplcicate the layer.

DUPLICATE AND CHANGE COLOR

Select the Rotation tool from the toolbox and click somewhere on the top right of the shape to define your rotation point. Hold down the Shift key while rotating the duplicated shape 180°.

Make the size of the shape slightly smaller (using the shape's handlers and the shift key to keep the exact proportion) and move the shape in position and give it a slightly different fill as shown above. Create a new layer and move it below the layer holding the shapes. Draw a rectangle the size of your document. Give it a suitable fill that serves as background. I used a dark background with subtle radial gradient fill. Lock the background layer (click in the square space next to the eye icon in the layers palette).

BUILD A 'PILE' OF SHAPES

Repeat the previous steps (Duplicate and change color) to create a pile of shapes as shown in the image above. Group the shapes, hit command/control + g.

GROUP IN A LAYER SET AND ADD A RADIAL GRADIENT MASK

Select the layer that holds the pile of shapes. Draw a rectangle on top and give it a radial gradient fill from white in the center to black. Select both shapes and rectangle. Just like before, go to theTransparency palette and select Make Opacity Mask from the palette's drop-down menu as shown in the image above. To edit the masking effect you click the mask thumbnail in the Transparency palette. To leave mask mode you click the image thumbnail.

DUPLICATE THE 'PILE', ROTATE AND RE-COLOR

Create a new layer by clicking the Create New Layer icon at the bottom of the Layers palette. Duplicate the shapes into the new layer by clicking on the layer that holds the shapes and dragging the colored square at the right while holding down the option/alt key. You should see a plus sign as shown in the image above, indicating you are duplicating the selection of objects. Rotate the shapes in the new layer by 180° and select shape per shape using the Direct Selection tool (white arrow) and change the color of each shape. To edit the mask if needed you can go into mask mode by clicking the mask thumbnail in the Transparency palette.

FINALIZING

You play around with the layer mode and choose Lighten for example and add some text to finish it off.

DIFFERENT RESULT

While this is possible to do in both applications, I still prefer Photoshop for this creation. I believe you have a bit more freedom and options in Photoshop. First of all there are more layer modes to play with and secondly you have more freedom for the masking. You can use a brush to reveal or hide certain areas for example. As for the layer modes I get the feeling the end result is a bit different as well. In Photoshop I also use Lighten, but had to set the layer to 50% transparency. In Illustrator even at 100% the effect isn't that dramatic and vivid in color. The big advantage of using Illustrator is the fact that everything is vector-based, which gives you the flexibility to scale your design at any size and still have the best quality. The choice is I believe a matter of comparing the pros and cons in combination with your personal preference.

Photoshop CS2 Splash Graphic

Tutorial Details

• Program: Adobe Illustrator CS4.
• Difficulty: Beginner/ 
• Estimated Completion: Half hour

You will learn how to use gradient and blending mode to replicate the Photoshop CS2 splash image (the feather graphic).

Create the Feather Paths

First create the paths of the feather with the Pen Tool.

2.Apply Gradient Color

Select the top 2 paths, fill it with Radial Gradient, pick similar colors as shown. Then repeat this step for the rest of the paths.

3.Apply Multiply

Select all the feather paths, go to Transparency pallate, select Multiply.

Final

Now you can duplicate the feather and lower the Opacity (Transparency).

This is the final product .... 

Have  a Nice Day.