To create a twitter icon, you don’t have to be an artist or expert in illustrator. By understanding some basic principals of gradients and transparency, you can create an excellent modern twitter icon to use in your blog.
Before we dive in to the steps, look at the final version of the twitter icon we are going to create.
I’m going to show the basic steps of drawing in illustrator and we shall move on to refine and get the final output in photoshop.
Step – 01
A. Open the illustrator (any version above cs will work fine). Create a 300×300 pixel artboard. Draw two ovals and transform them to match the screen shot.
B. Draw a shape for bird’s tail. We’ll be re-using this for wings as well. Duplicate it by holding the Alt and dragging it. Do this two times and transform accordingly to get the basic shape showed in the below screen shot.
Step – 02
If you look at the twitter icons in the web, you can see most of them use some nice blue colors. We’ll stick to the same convention to go aside with the usability.
A. Create a gradient to use for this icon with the colors shown in the screen shot.
B. Now apply the gradients to the shapes with following radial gradient settings.
Step – 03
A. Now we’ll create another oval shape inside, and give a white to transparent gradient filling for that. See the screen shot
B. Duplicate that shape and rotate it a bit. (see the screen shot)
Step – 04
Now we are going to create the beak of the bird. Draw a triangle with pen tool and duplicate it. Give the gradients in the screen shot below. Group both triangles and send them back by hitting Ctrl+Shit+[ (left bracket) keys.
Step – 05
To create the eye of bird, create a circle with the following radial gradient. Create another small white circle and place it over the black circle. Duplicate the white circle and scale it down a bit; then drop down the opacity to 40%. Place it top right corner like shown in the screen shot. This small circle will act as a highlight.
Step – 06
A. We are going to create a small highlight for the bird’s body. Drag the main body oval to an upper area while holding the Alt to duplicate it. Again duplicate it; place the new oval over it, then move it around 8px down – right. Then rotate it clock wise a bit and get the correct angle shown in the screen shot. Select both ovals and use pathfinder minus-front and cut it.
B. Give that new shape a white to transparent gradient and place it in the top of the body. Copy the feather shape in the tail; scale it down a bit and give the same gradient. Do this for all three feathers. Place all shapes as in the screen shot below and group them all.
Step – 07
Now we are going to create the wings of the bird. See the image below and create a shape like No.1.
You can use an empty area of your art board for this. Actually I’ve copied this one from the tail feather. You can also do the same. Alt+Drag to duplicate it. (of course you have to use the same gradient we have created earlier) select it; scale it down a bit and rotate it to align with the starting edge of the first feather.
Create another duplicate and do the same to that as well. Once you have done all 4 feathers, just copy each of them; scale them down a bit and give the highlight gradient (white to transparent) and place them over them like shown in the image above (No.4). Now group them all.Feather is done. Duplicate it, right click and transform > reflect and follow the setting in the image below.
Step – 08
Now almost we are done. The last step is to place the wings in the perfect location. See the image below and place wings in the locations.
You might have to rotate them a bit to match accordingly. Send the top side (right side of the bird) wing to back by hitting Ctrl+Shift+[ keys. ( you can right click the wing and choose Arrange>Send to back, instead of using the keyboard shortcuts).
Select the front wing set and send it to back (Ctrl+[ )until it goes behind the oval body highlights. Select all (Ctrl+a) group them all (Ctrl+g) and copy (Ctrl+c) and we are done with Illustrator. But don’t close the Illustrator yet.
Step – 09
a. Open photoshop and create a new image with 256×256 dimensions. Now paste in this what you have copied from Illustrator. Choose Smart object and enter. (choosing smart object will keep this object/layer as a vector, so you can scale it later on if you want). Now scale this layer bit down and hit enter again. See screen shot image. Double click the layer name and rename it to ‘bird’
b. without de-selecting the layer hit ‘v’ to get the arrow(move) tool, and hold shift and press up key once. This will move your bird image 10px above.
c. Hit Ctrl +j to duplicate the current bird layer. Give it a blending mode ’softlight’. By doing this, we are making the bird’s colors more vibrant and cool.
Step -10
Now we are going to give some shadows for the bird.
a. Create a blank layer above the copied bird layer and draw an oval as shown in the screen shot below.
fill it with black and de-select it(Ctrl+d). Give a Gaussian blur with 5px radius. Make the opacity of the layer 30%. Name the layer ’shadow’ . Hit Control+j to duplicate the shadow and Ctrl+t to free transform it. Scale the shadow down around 60% of the original one. You have to hold Shift+Alt when you transform. This will keep it in the center and save the proportions too.
hit enter to commit it and drop down the opacity of this layer to 15%. Move the shadow bit left (closer to the front wing so it would appear it’s darken in the closer area) One kind of shadow is done.
b. select the ‘bird’ layer and give a drop shadow with following settings.
Conclusion
If you hide or delete the background (white) layer and export the comp with alpha png file format, you will have a nice transparent twitter icon for your website. Feel free to experiment with different settings/variations.
See the final output again:
Download the source files
discuss this topic to forum
