Learning how to use a new software application can be an incredible task. It can take several weeks to months before you are comfortable with your new software. Personally, I think that the best way to learn all about a new software application is by jumping right in and starting to work on simple projects. Over the next few months, I will teach you a few important Adobe Illustrator techniques that will help you get started as a designer while also allowing you to become comfortable with the Adobe Illustrator software application.
Today, I am going to teach you how to create a Delicious icon. Delicious.com is a social bookmarking service that has become very popular on the web. This service allows you to simply and easily bookmark your favourite pages on the web for reference in the future. Icons such as the Delicious icon are now seen everywhere on the web. Icons are added to both websites and blogs so that people can quickly and simply perform tasks such as bookmarking and social media. Many social media icons like Facebook and Twitter provide a direct link from a person's website to their Facebook or Twitter page. Most icons are easily recognizable and fairly simple to recreate.
Below is a beginners Adobe Illustrator tutorial that covers the simple steps involved in creating a Delicious icon. This tutorial is also intended to teach you a variety of simple techniques that you will help you as you become familiar with and explore Adobe Illustrator.
Required: Illustrator 9+
How to create the Delicious icon in Adobe Illustrator
Here is the Delicious icon that we are going to create.
Step 1: Create the square shapes
Using the Rectangle Tool (ctrl+M), create a rectangle path and fill it with black. Next, copy (Ctrl+C) it and paste this copied square in front of the original black square (Ctrl+F). Fill this square with dark grey and outline it with white. This dark grey square should now be covering the first black square. Scale down this grey square so that it is now about 90% the size of the black square. You should be left with something like this:
Next, create four small squares that are all the same size and place them inside the grey square. Colour two of them white, one black and one blue as shown in the Delicious icon image above. To each of these squares, you now need to add a drop shadow. To do this, select one of the small squares. Go to Window -> Appearance. On the bottom of this 'Appearance palette', there is a 'fx' symbol. If you hover over this symbol, it says 'Add New Effect'. Click on this 'fx' symbol, slect Stylize -> Drop Shadow. Input the settings below:
Repeat this technique on each of the small squares until all four of the smaller middle squares have a slight drop shadow. Your illustration should now look something like this:
Step 2: Adding the Light Reflection
Select the original black square (the one that is in the background). Copy it (Ctrl+C) and Paste in Front (Ctrl+F). In the Menu, select Object -> Arrange -> Bring to front. The illustration that you have created should now be covered with a black square. Fill this front black square with a black & white gradient. With it still selected, select Window -> Transparency and change the Blend Mode from Normal to Screen. Decrease the size of this square so that it covers only the top half of the icon et voila!
You have made your very own Delicious Icon. Congratulations!
This tutorial has been brought to you by Pixellogo.com