For this tutorial, I\u2019ve taken a hypothetical e-book website (let\u2019s call it Libro) that could use some visual touches, so that the user browsing it could distinguish different sections by simply looking at icons. Since the most popular e-book reader out there is made by Amazon, we will use the Kindle as a visual representation for device portability and create a vector based icon from\u00a0it.<\/p>\n
Step 1 \u2013 Do\u00a0Your\u00a0Research<\/span><\/h2>\nAs with any new project, the first stage of the creative process begins with\u00a0defining the idea, phrase or word that you want to portray using\u00a0imagery.<\/p>\n
By doing so, you will lay down defining aspects that you will need in order to figure out what might (or might not) help you shape your\u00a0icon.<\/p>\n
The best resources to do this\u00a0include:<\/p>\n
\n- A dictionary<\/strong>: Whether it\u2019s online or hardcover, this little guy will always help you get a first glimpse at what your product should be or represent.<\/li>\n
- A website specialized in dealing with icons<\/strong>: Try\u00a0Iconfinder<\/a>, which has\u00a0a nifty search engine that goes through tons of categorized icons that are related to specific keywords.<\/li>\n
- A stroll through the city<\/strong>: You\u2019ll be amazed of the amount of information our surroundings have to offer in terms of symbols.<\/li>\n
- Google:<\/strong>\u00a0If there\u2019s something that Google does best, it\u2019s finding relevant information (definitions, characteristics and most important images) all directly linked to the word you search.<\/li>\n<\/ul>\n
Assuming that you\u2019ve carried out your detective work, you should have a deeper sense of what it is that you want to represent by use of color, lines and other forms of imagery. Now you can actually start getting\u00a0creative.<\/p>\n
Step 2 \u2013 Start\u00a0Sketching<\/span><\/h2>\nAs with any new product, the way you translate the information you now hold is deeply connected to your person, as no two ideas are identical. There are no rules, but most importantly no boundaries to which you need to adapt or constrain to \u2013 the only true variable is your\u00a0imagination.<\/p>\n
Whether it\u2019s a cup a coffee or some good old Nirvana (the band), find that something that gets your mind going and your hand flowing and start drawing. It doesn\u2019t matter how good you are, what matters is that by doing so, you start laying down the form and functions that your icon will\u00a0use.<\/p>\n
Quick tip:<\/strong>\u00a0Never throw stuff away. Even if you started an idea, and abandoned it along the way, always try to establish a path, so that you can see the directions from which your design emerged. By doing so, you can overlay pieces from one version to another and refine the quality of the visual\u00a0composition.<\/em><\/p>\nThese first two steps are somewhat general. For our project, a couple of images representing the actual Kindle will suffice; it has a simple design that can be easily reproduced using basic\u00a0shapes.<\/p>\n
Step 3 \u2013 Commence\u00a0Illustrator<\/span><\/h2>\nWhether you\u2019ve been pushing pixels for a long time, or just starting, one of the\u00a0most important tools is\u00a0Adobe Illustrator. I\u2019m not going to talk about the actual software, but will\u00a0guide you through setting up a\u00a0New Document<\/strong>\u00a0and starting to build\u00a0an\u00a0icon.<\/p>\n3.1. Set Up a New\u00a0Document<\/span><\/h3>\nAssuming you already had Illustrator up and running in the background, create a New Document by pressing\u00a0Ctrl + n<\/strong>\u00a0(or\u00a0\u2318<\/strong>\u00a0+\u00a0n<\/strong>\u00a0if you\u2019re using a Mac) or by going to\u00a0FILE > New\u2026<\/strong>\u00a0and let\u2019s go through some of the\u00a0settings<\/strong>\u00a0that will\u00a0pop-up.<\/p>\n![\"New](\"https:\/\/designmodo.com\/wp-content\/uploads\/2014\/07\/new-document.jpg\")
<\/p>\n
<\/p>\n
\n- Name<\/strong>: This one is obvious; give it any name that suits your project.<\/li>\n
- Profile<\/strong>: This is important because\u00a0graphics designed for the web will be different from those based on a profile for printing.\u00a0Make sure to select\u00a0Web<\/em>\u00a0from the\u00a0drop down\u00a0menu.<\/strong><\/li>\n
- Number of Artboards<\/strong>: The Artboard according to Adobe, represents regions that can contain actual artwork. I usually go for a bigger artboard even if I have multiple designs, and put them on different layers so they will be at\u00a0hand and select exactly the ones I want to see.<\/li>\n
- Width\u00a0<\/strong>and\u00a0Height<\/strong>: Measures from which you can size your artboard \u2013 in our case, we\u2019ll go for a 120 by 120 pixels.<\/li>\n
- Units<\/strong>: Illustrator is intended for use with\u00a0web and print, so you have a lot of options; for this project we will go with\u00a0pixels.<\/strong><\/li>\n
- Color Mode<\/strong>: Double-check that this option suits the medium you are creating for.\u00a0RGB<\/strong>\u00a0(Red, Green, Blue) is color specific to the digital medium, whereas\u00a0CMYK<\/strong>\u00a0(Cyan, Magenta, Yellow, Black) is used in projects that involve printing. For our project, we will use RGB.<\/li>\n<\/ul>\n
Quick Tip<\/strong>: Learn more about the differences between\u00a0RGB<\/strong>\u00a0and\u00a0CMYK<\/strong>\u00a0in this\u00a0official Adobe tutorial<\/a>\u00a0(which does a good job explaining key differences you need to be aware\u00a0of).<\/em><\/p>\n![\"New](\"https:\/\/designmodo.com\/wp-content\/uploads\/2014\/07\/new-document-settings-01.jpg\")
<\/p>\n
\n- Raster Effects<\/strong>: There are three\u00a0values to choose from<\/li>\n<\/ul>\n
\n- Screen (72 ppi),<\/strong>\u00a0which is the default value. This is the standard option that you would go for if you would design for the web (which in our case, we are).<\/li>\n
- Medium (150 ppi).<\/strong><\/li>\n
- High (300 ppi).<\/strong>\u00a0The two last options are intended for graphics that will be used for printing.<\/li>\n<\/ol>\n
Quick Tip<\/strong>: Now that you\u2019ve created artwork, and let\u2019s assume your design uses effects from the\u00a0Stylize<\/strong>\u00a0menu such as\u00a0Drop Shadows<\/strong>,\u00a0Outer Glow<\/strong>\u00a0or\u00a0Inner Glow<\/strong>, you need to ensure quality. The printed version needs to\u00a0look as smooth and clean as the one on your monitor. Accomplish this by selecting\u00a0Effect > Document Raster Effects Settings\u00a0<\/strong>and choosing a higher resolution from the checkboxes \u2013 you can also input your own value in the\u00a0Other<\/strong>\u00a0field.<\/em><\/p>\nAlthough we are going to design for the web (72 ppi<\/strong>), the art will end up as a\u00a0png<\/strong>\u00a0or\u00a0jpeg<\/strong>\u00a0which are\u00a0raster images<\/strong>. If you go to the\u00a0Adobe site<\/a>, you will find out another tip that focuses on the effect of the\u00a0ppi<\/strong>\u00a0on the strokes of the\u00a0design:<\/p>\n\u201cThe crisp appearance of pixel-aligned strokes is maintained in the raster output at a resolution of 72-ppi only. For other resolutions, there is a high possibility of such strokes producing anti-aliased\u00a0results.\u201d<\/em><\/p>\n\n- Align New Objects to Pixel Grid<\/em><\/strong>: If\u00a0you\u2019re shooting for pixel-perfect designs, this is a must. The program instructs vector objects to align themselves to the pixel grid whenever they are moved or scaled, realigning them with\u00a0new positions.<\/li>\n<\/ul>\n
There it is: A\u00a0one-time tell-it-all intro that will fill in some gaps that might appear when starting\u00a0out.<\/p>\n
3.2. Getting Basic\u00a0Shapes<\/span><\/h3>\nFirst, set up a\u00a0circle<\/strong>\u00a0that will act as a background for the entire design. Using the Ellipse Tool (L) left click<\/strong>\u00a0anywhere in Illustrator to get the\u00a0Rounded Rectangle Settings Box<\/strong>\u00a0and set the\u00a0Width<\/strong>\u00a0and\u00a0Height<\/strong>\u00a0of the circle. Enter\u00a0110px for both<\/strong>\u00a0and click OK. Select the newly created object and remove the color from the stroke, and give it a nice light redish fill (HEX=<\/strong>ff7171 or R=255, G=113,\u00a0B=113<\/strong>).<\/p>\n![\"Select](\"https:\/\/designmodo.com\/wp-content\/uploads\/2014\/07\/select-color-01-01.jpg\")
<\/p>\n
Grab the\u00a0Rounded Rectangle Tool\u00a0<\/strong>(located on the left tool bar, same place as the\u00a0Rectangle Tool<\/strong>), left click on the artboard and create a\u00a055 x 80px\u00a0<\/strong>shape with a\u00a05px corner radius<\/strong>. Using\u00a0Align\u00a0<\/strong>options (Window > Align<\/strong>) select the new object and\u00a0horizontally\u00a0<\/strong>and\u00a0vertically\u00a0<\/strong>align it to the artboard. Give it a dark grey fill\u00a0#606060\u00a0<\/strong>(R=96, G=96,\u00a0B=96<\/strong>)<\/p>\nQuick Tip<\/strong>: If you just set up the Align panel, default\u00a0alignment will apply\u00a0to selected objects. To align to the artboard, look at the right lower corner, click \u201cAlign To\u201d<\/strong>\u00a0 and select\u00a0Align to\u00a0Artboard.<\/strong><\/em><\/p>\n![\"Create](\"https:\/\/designmodo.com\/wp-content\/uploads\/2014\/07\/align-to-artboard-01.jpg\")
<\/p>\n
Following the same steps as before, create a new rounded rectangle (Width=39px, Height=64px, Corner radius=1px<\/strong>). Select the new object and horizontally align it to the artboard and move it toward the top of the larger\u00a0rectangle.<\/p>\nWith the object selected, change its fill color to a slightly lighter grey\u00a0D3D3D3\u00a0<\/strong>(R=211, G=211,\u00a0B=211<\/strong>).<\/p>\nThis is\u00a0the basic frame and screen that will represent\u00a0a\u00a0Kindle.<\/p>\n
![\"Basic](\"https:\/\/designmodo.com\/wp-content\/uploads\/2014\/07\/basic-shapes-01-01.jpg\")
<\/p>\n
3.3 Layering\u00a0Buttons<\/span><\/h3>\nThe next step has to do with\u00a0buttons<\/strong>. Select the\u00a0Rounded rectangle tool<\/strong>\u00a0and create a\u00a05 x 5px\u00a0<\/strong>object with a\u00a02px corner radius<\/strong>. Horizontally align it to the other parts, and move it to the middle of the space between the lower side of the screen and the lower side of the body (you can also do this by dragging and creating a rectangle and vertically aligning the button to it). Assign a fill color (474747, R=71, G=71, B=71<\/strong>), then copy it and paste it in place (Ctrl + f \/\u00a0<\/strong>\u2318<\/strong>\u00a0+f<\/strong>). Select the duplicate button and flip its stroke with the fill color, leaving it at\u00a01px<\/strong>.<\/p>\n![\"Main](\"https:\/\/designmodo.com\/wp-content\/uploads\/2014\/07\/main-button-01-01.jpg\")
<\/p>\n
We now have our main button; next are the four\u00a0rounded ones. Select\u00a0the\u00a0Ellipse Tool\u00a0<\/strong>(L<\/strong>) and create a\u00a03 x 3px<\/strong>\u00a0circle. Select it, and while holding\u00a0Alt<\/strong>, drag it to the left to duplicate. Having both selected, again hold down\u00a0Alt\u00a0<\/strong>(\u2325<\/strong>\u00a0Option on Mac<\/strong>),<\/strong>\u00a0and drag to the right side of the main button. Select all the round buttons and the main one. Left click on the center button and using the\u00a0Align<\/strong>\u00a0panel and vertically center them. Now we need to space them up, with all the objects still selected, go the left lower corner of the\u00a0Align\u00a0<\/strong>to\u00a0Distribute Spacing<\/strong>, and give it\u00a04px<\/strong>\u00a0and select\u00a0Horizontal Distribute\u00a0Space<\/strong>.<\/p>\n![\"Spacing](\"https:\/\/designmodo.com\/wp-content\/uploads\/2014\/07\/spacing-the-buttons-01-01.jpg\")
<\/p>\n
For the side buttons, we will create a round corner object (Width=5px, Height=30px, Corner Radius=1px<\/strong>), and vertically align it to the main body of the icon. Drag it a little to the right so that it overlaps. Using the\u00a0Shape Builder Tool\u00a0<\/strong>(Shift + m<\/strong>) subtract the intersection of the two objects and you have page navigation\u00a0buttons.<\/p>\n![\"Nav](\"https:\/\/designmodo.com\/wp-content\/uploads\/2014\/07\/nav-buttons-01.jpg\")
<\/p>\n
Select the new object and change the fill to\u00a03d3d3d\u00a0<\/strong>(R=61, G=61, B=61<\/strong>). Duplicate and flip it vertically (right click > Transform > Reflect > Vertical<\/strong>), then align to the right side of the main\u00a0body.<\/p>\nAt this point, the icon is starting to take shape. In the next step we will start\u00a0adding\u00a0details<\/strong>.<\/p>\n3.4. Adding\u00a0Details<\/span><\/h3>\nWith our Kindle now laid out, we will start adding finishing touches to the screen. Grab the\u00a0Rectangle Tool\u00a0<\/strong>and draw a\u00a0100 x 55px\u00a0<\/strong>object. Rotate it by pressing\u00a0R<\/strong>, and then drag one corner to the left while holding down\u00a0Shift<\/strong>\u00a0to get a nice 45-degree angle. Duplicate the screen of the Kindle and\u00a0select both it and the rotated object<\/strong>\u00a0and press\u00a0Shift + M\u00a0<\/strong>for the\u00a0Shape Builder Tool.\u00a0<\/strong>Subtract the intersected path for a nice\u00a0reflection.<\/p>\n![\"Screen](\"https:\/\/designmodo.com\/wp-content\/uploads\/2014\/07\/screen-reflection-01.jpg\")
<\/p>\n
Repeat the step above, but instead of subtracting from the screen rectangle, move the rotated object slightly above the first reflection, subtract again and give it a lighter color. Also use this effect on the primary button of the device, and its actual body to\u00a0give it a little more\u00a0polish.<\/p>\n
![\"Icon](\"https:\/\/designmodo.com\/wp-content\/uploads\/2014\/07\/icon-polished-01.jpg\")
<\/p>\n
Once more select the screen, copy and paste it in place, flipping the fill with the stroke and giving it a darker grey\u00a0(3d3d3d<\/strong>).<\/p>\nSelect the main body of the device, duplicate it, and again flip the fill with its stroke. From the color palette select a more visible grey so that you can distinguish it from the rest of the\u00a0body.<\/p>\n
3.5.\u00a0Add a Long\u00a0Shadow<\/span><\/h3>\nWe will finish our icon by casting a long shadow. Duplicate the main icon body (Ctrl + c\u00a0<\/strong>then\u00a0Ctrl + f)<\/strong>\u00a0to paste in place. Select the new object and drag it at a 45 angle toward the right lower corner. We will do so by holding down\u00a0Alt<\/strong>\u00a0and while dragging to the right, press and hold\u00a0Shift<\/strong>\u00a0so that you get it exactly at 45\u00a0degrees.<\/p>\n![\"Long](\"https:\/\/designmodo.com\/wp-content\/uploads\/2014\/07\/long-shadow-drag-01.jpg\")
<\/p>\n
Create a\u00a0blend<\/strong>\u00a0between the two objects; go to\u00a0Object > Blend Options<\/strong>\u00a0and in the\u00a0Specified Steps\u00a0<\/strong>enter\u00a0200<\/strong>. Now using the same path select\u00a0Make<\/strong>.<\/p>\nThe two have united into a single form. Go to\u00a0Object > Expand > OK<\/strong>, and then from the\u00a0Transform\u00a0<\/strong>window, click on\u00a0Unite<\/strong>. This is a\u00a0basic shadow. Give it a darker color than the background circle, and then mask it so that it doesn\u2019t fall out of the actual design. Change the color to\u00a0d85d5d\u00a0<\/strong>(R=216, G=93, B=93<\/strong>) then copy and paste the circle in front of the long shadow. Select both the shadow and its above object and then\u00a0right click > Make Clipping\u00a0Mask<\/strong>.<\/p>\nWe nailed\u00a0it!<\/strong><\/p>\nYou can change the colors as you please, adapting the style to your needs. Also, as we did all this using vectors, we can scale the icon as big or as small as we\u00a0want.<\/p>\n
![\"Finished](\"https:\/\/designmodo.com\/wp-content\/uploads\/2014\/07\/finished-icon-01.jpg\")
<\/p>\n
Step 4 \u2013 Save\u00a0for the\u00a0Web<\/span><\/h2>\nWe have a nice looking icon, but how about saving it so that we can actually use it for what we had in mind in the first place \u2014 the web? Export artwork using the\u00a0SVG (Scalable Vector Graphics)<\/strong>\u00a0XML based vector format. The main advantages of using\u00a0SVG<\/strong>\u00a0compared to other formats (such as PNG)\u00a0are:<\/p>\n\n- Editability:<\/strong>\u00a0You can edit the image at any time using any text editor.<\/li>\n
- Scalability:<\/strong>\u00a0You can easily scale images once they\u2019re live on the internet without the need of creating multiple versions.<\/li>\n<\/ul>\n
So let\u2019s go ahead and see some of the settings that come with this format. Go to\u00a0File > Save as >\u00a0<\/strong>and from the\u00a0Save as type\u00a0<\/strong>click on the dropdown and select\u00a0SVG\u00a0<\/strong>(*.SVG<\/strong>) \u2013 don\u2019t forget to click on the\u00a0Use Artboards<\/strong>\u00a0checkbox so that it only saves the elements on your artboard. You should get a pop-up window \u2013 click on the\u00a0more<\/strong>\u00a0option to\u00a0see the full set of options. Let\u2019s go through each of\u00a0them:<\/p>\n![\"SVG](\"https:\/\/designmodo.com\/wp-content\/uploads\/2014\/07\/svg-settings-01-01.jpg\")
<\/p>\n
\n- SVG Profiles<\/strong>: Since August 2011, the standard version promoted by the\u00a0W3C\u00a0<\/strong>is\u00a01.1<\/strong><\/li>\n
- Fonts<\/strong><\/li>\n<\/ul>\n
Type:<\/strong>\u00a0Controls the way fonts are embedded in the actual file. Usually if you have text,\u00a0Adobe recommends<\/strong>\u00a0SVG,<\/strong>\u00a0but this has some drawbacks and\u00a0isn\u2019t supported by\u00a0Firefox.<\/p>\nSubsetting<\/strong>: Using\u00a0SVG\u00a0<\/strong>you can save a subset of glyphs (characters) into the actual file (which will increase size but will allow you to modify content) but we will go with\u00a0Only Glyphs Used<\/strong>\u00a0because our design does not include\u00a0text.<\/p>\n\n- Image Location<\/strong>: This option has a lot to do with how you choose to embed images within the\u00a0SVG\u00a0<\/strong>file. According to Adobe, the best option is to use\u00a0Link<\/strong>, and then modify the\u00a0href\u00a0<\/strong>parameter to point to your own image file, which you should compress using\u00a0Photoshop<\/strong>\u00a0or any other image editing software.<\/li>\n
- CSS Properties<\/strong>: By using\u00a0Style Elements<\/strong>\u00a0you can modify your\u00a0SVG<\/strong>\u00a0code to your needs after exporting the file, and using it on your website.<\/li>\n
- Decimal Places<\/strong>: The value here will define the precision of vectors you export. The higher number the larger file size. It is recommended that you input a value of\u00a01.<\/strong><\/li>\n
- Output fewer <tspan> elements<\/strong>: If your artwork incorporates a lot of text, use this option to reduce the overall file size of your\u00a0SVG\u00a0<\/strong>\u2013 our icon doesn\u2019t rely on text, so we can leave this unchecked.<\/li>\n<\/ul>\n
After selecting all of the above options, click\u00a0Save<\/strong>.<\/p>\nQuick tip:<\/strong>\u00a0For more info on the rest of the save options please\u00a0visit this\u00a0link<\/a>.<\/em><\/p>\nIt\u2019s a wrap!<\/h4>\n
I hope you enjoyed this tutorial, and managed to learn how to build icons in Illustrator. \u00a0These techniques can be applied to any project, no matter the\u00a0subject.<\/p>\n","protected":false},"excerpt":{"rendered":"
Assuming that you\u2019ve carried out your detective work, you should have a deeper sense of what it is that you want to represent by use of color, lines and other forms of imagery. Now you can actually start getting\u00a0creative.<\/p>\n
Step 2 \u2013 Start\u00a0Sketching<\/span><\/h2>\nAs with any new product, the way you translate the information you now hold is deeply connected to your person, as no two ideas are identical. There are no rules, but most importantly no boundaries to which you need to adapt or constrain to \u2013 the only true variable is your\u00a0imagination.<\/p>\n
Whether it\u2019s a cup a coffee or some good old Nirvana (the band), find that something that gets your mind going and your hand flowing and start drawing. It doesn\u2019t matter how good you are, what matters is that by doing so, you start laying down the form and functions that your icon will\u00a0use.<\/p>\n
Quick tip:<\/strong>\u00a0Never throw stuff away. Even if you started an idea, and abandoned it along the way, always try to establish a path, so that you can see the directions from which your design emerged. By doing so, you can overlay pieces from one version to another and refine the quality of the visual\u00a0composition.<\/em><\/p>\nThese first two steps are somewhat general. For our project, a couple of images representing the actual Kindle will suffice; it has a simple design that can be easily reproduced using basic\u00a0shapes.<\/p>\n
Step 3 \u2013 Commence\u00a0Illustrator<\/span><\/h2>\nWhether you\u2019ve been pushing pixels for a long time, or just starting, one of the\u00a0most important tools is\u00a0Adobe Illustrator. I\u2019m not going to talk about the actual software, but will\u00a0guide you through setting up a\u00a0New Document<\/strong>\u00a0and starting to build\u00a0an\u00a0icon.<\/p>\n3.1. Set Up a New\u00a0Document<\/span><\/h3>\nAssuming you already had Illustrator up and running in the background, create a New Document by pressing\u00a0Ctrl + n<\/strong>\u00a0(or\u00a0\u2318<\/strong>\u00a0+\u00a0n<\/strong>\u00a0if you\u2019re using a Mac) or by going to\u00a0FILE > New\u2026<\/strong>\u00a0and let\u2019s go through some of the\u00a0settings<\/strong>\u00a0that will\u00a0pop-up.<\/p>\n<\/p>\n
<\/p>\n
\n- Name<\/strong>: This one is obvious; give it any name that suits your project.<\/li>\n
- Profile<\/strong>: This is important because\u00a0graphics designed for the web will be different from those based on a profile for printing.\u00a0Make sure to select\u00a0Web<\/em>\u00a0from the\u00a0drop down\u00a0menu.<\/strong><\/li>\n
- Number of Artboards<\/strong>: The Artboard according to Adobe, represents regions that can contain actual artwork. I usually go for a bigger artboard even if I have multiple designs, and put them on different layers so they will be at\u00a0hand and select exactly the ones I want to see.<\/li>\n
- Width\u00a0<\/strong>and\u00a0Height<\/strong>: Measures from which you can size your artboard \u2013 in our case, we\u2019ll go for a 120 by 120 pixels.<\/li>\n
- Units<\/strong>: Illustrator is intended for use with\u00a0web and print, so you have a lot of options; for this project we will go with\u00a0pixels.<\/strong><\/li>\n
- Color Mode<\/strong>: Double-check that this option suits the medium you are creating for.\u00a0RGB<\/strong>\u00a0(Red, Green, Blue) is color specific to the digital medium, whereas\u00a0CMYK<\/strong>\u00a0(Cyan, Magenta, Yellow, Black) is used in projects that involve printing. For our project, we will use RGB.<\/li>\n<\/ul>\n
Quick Tip<\/strong>: Learn more about the differences between\u00a0RGB<\/strong>\u00a0and\u00a0CMYK<\/strong>\u00a0in this\u00a0official Adobe tutorial<\/a>\u00a0(which does a good job explaining key differences you need to be aware\u00a0of).<\/em><\/p>\n<\/p>\n
\n- Raster Effects<\/strong>: There are three\u00a0values to choose from<\/li>\n<\/ul>\n
\n- Screen (72 ppi),<\/strong>\u00a0which is the default value. This is the standard option that you would go for if you would design for the web (which in our case, we are).<\/li>\n
- Medium (150 ppi).<\/strong><\/li>\n
- High (300 ppi).<\/strong>\u00a0The two last options are intended for graphics that will be used for printing.<\/li>\n<\/ol>\n
Quick Tip<\/strong>: Now that you\u2019ve created artwork, and let\u2019s assume your design uses effects from the\u00a0Stylize<\/strong>\u00a0menu such as\u00a0Drop Shadows<\/strong>,\u00a0Outer Glow<\/strong>\u00a0or\u00a0Inner Glow<\/strong>, you need to ensure quality. The printed version needs to\u00a0look as smooth and clean as the one on your monitor. Accomplish this by selecting\u00a0Effect > Document Raster Effects Settings\u00a0<\/strong>and choosing a higher resolution from the checkboxes \u2013 you can also input your own value in the\u00a0Other<\/strong>\u00a0field.<\/em><\/p>\nAlthough we are going to design for the web (72 ppi<\/strong>), the art will end up as a\u00a0png<\/strong>\u00a0or\u00a0jpeg<\/strong>\u00a0which are\u00a0raster images<\/strong>. If you go to the\u00a0Adobe site<\/a>, you will find out another tip that focuses on the effect of the\u00a0ppi<\/strong>\u00a0on the strokes of the\u00a0design:<\/p>\n\u201cThe crisp appearance of pixel-aligned strokes is maintained in the raster output at a resolution of 72-ppi only. For other resolutions, there is a high possibility of such strokes producing anti-aliased\u00a0results.\u201d<\/em><\/p>\n\n- Align New Objects to Pixel Grid<\/em><\/strong>: If\u00a0you\u2019re shooting for pixel-perfect designs, this is a must. The program instructs vector objects to align themselves to the pixel grid whenever they are moved or scaled, realigning them with\u00a0new positions.<\/li>\n<\/ul>\n
There it is: A\u00a0one-time tell-it-all intro that will fill in some gaps that might appear when starting\u00a0out.<\/p>\n
3.2. Getting Basic\u00a0Shapes<\/span><\/h3>\nFirst, set up a\u00a0circle<\/strong>\u00a0that will act as a background for the entire design. Using the Ellipse Tool (L) left click<\/strong>\u00a0anywhere in Illustrator to get the\u00a0Rounded Rectangle Settings Box<\/strong>\u00a0and set the\u00a0Width<\/strong>\u00a0and\u00a0Height<\/strong>\u00a0of the circle. Enter\u00a0110px for both<\/strong>\u00a0and click OK. Select the newly created object and remove the color from the stroke, and give it a nice light redish fill (HEX=<\/strong>ff7171 or R=255, G=113,\u00a0B=113<\/strong>).<\/p>\n<\/p>\n
Grab the\u00a0Rounded Rectangle Tool\u00a0<\/strong>(located on the left tool bar, same place as the\u00a0Rectangle Tool<\/strong>), left click on the artboard and create a\u00a055 x 80px\u00a0<\/strong>shape with a\u00a05px corner radius<\/strong>. Using\u00a0Align\u00a0<\/strong>options (Window > Align<\/strong>) select the new object and\u00a0horizontally\u00a0<\/strong>and\u00a0vertically\u00a0<\/strong>align it to the artboard. Give it a dark grey fill\u00a0#606060\u00a0<\/strong>(R=96, G=96,\u00a0B=96<\/strong>)<\/p>\nQuick Tip<\/strong>: If you just set up the Align panel, default\u00a0alignment will apply\u00a0to selected objects. To align to the artboard, look at the right lower corner, click \u201cAlign To\u201d<\/strong>\u00a0 and select\u00a0Align to\u00a0Artboard.<\/strong><\/em><\/p>\n<\/p>\n
Following the same steps as before, create a new rounded rectangle (Width=39px, Height=64px, Corner radius=1px<\/strong>). Select the new object and horizontally align it to the artboard and move it toward the top of the larger\u00a0rectangle.<\/p>\nWith the object selected, change its fill color to a slightly lighter grey\u00a0D3D3D3\u00a0<\/strong>(R=211, G=211,\u00a0B=211<\/strong>).<\/p>\nThis is\u00a0the basic frame and screen that will represent\u00a0a\u00a0Kindle.<\/p>\n
<\/p>\n
3.3 Layering\u00a0Buttons<\/span><\/h3>\nThe next step has to do with\u00a0buttons<\/strong>. Select the\u00a0Rounded rectangle tool<\/strong>\u00a0and create a\u00a05 x 5px\u00a0<\/strong>object with a\u00a02px corner radius<\/strong>. Horizontally align it to the other parts, and move it to the middle of the space between the lower side of the screen and the lower side of the body (you can also do this by dragging and creating a rectangle and vertically aligning the button to it). Assign a fill color (474747, R=71, G=71, B=71<\/strong>), then copy it and paste it in place (Ctrl + f \/\u00a0<\/strong>\u2318<\/strong>\u00a0+f<\/strong>). Select the duplicate button and flip its stroke with the fill color, leaving it at\u00a01px<\/strong>.<\/p>\n<\/p>\n
We now have our main button; next are the four\u00a0rounded ones. Select\u00a0the\u00a0Ellipse Tool\u00a0<\/strong>(L<\/strong>) and create a\u00a03 x 3px<\/strong>\u00a0circle. Select it, and while holding\u00a0Alt<\/strong>, drag it to the left to duplicate. Having both selected, again hold down\u00a0Alt\u00a0<\/strong>(\u2325<\/strong>\u00a0Option on Mac<\/strong>),<\/strong>\u00a0and drag to the right side of the main button. Select all the round buttons and the main one. Left click on the center button and using the\u00a0Align<\/strong>\u00a0panel and vertically center them. Now we need to space them up, with all the objects still selected, go the left lower corner of the\u00a0Align\u00a0<\/strong>to\u00a0Distribute Spacing<\/strong>, and give it\u00a04px<\/strong>\u00a0and select\u00a0Horizontal Distribute\u00a0Space<\/strong>.<\/p>\n<\/p>\n
For the side buttons, we will create a round corner object (Width=5px, Height=30px, Corner Radius=1px<\/strong>), and vertically align it to the main body of the icon. Drag it a little to the right so that it overlaps. Using the\u00a0Shape Builder Tool\u00a0<\/strong>(Shift + m<\/strong>) subtract the intersection of the two objects and you have page navigation\u00a0buttons.<\/p>\n<\/p>\n
Select the new object and change the fill to\u00a03d3d3d\u00a0<\/strong>(R=61, G=61, B=61<\/strong>). Duplicate and flip it vertically (right click > Transform > Reflect > Vertical<\/strong>), then align to the right side of the main\u00a0body.<\/p>\nAt this point, the icon is starting to take shape. In the next step we will start\u00a0adding\u00a0details<\/strong>.<\/p>\n3.4. Adding\u00a0Details<\/span><\/h3>\nWith our Kindle now laid out, we will start adding finishing touches to the screen. Grab the\u00a0Rectangle Tool\u00a0<\/strong>and draw a\u00a0100 x 55px\u00a0<\/strong>object. Rotate it by pressing\u00a0R<\/strong>, and then drag one corner to the left while holding down\u00a0Shift<\/strong>\u00a0to get a nice 45-degree angle. Duplicate the screen of the Kindle and\u00a0select both it and the rotated object<\/strong>\u00a0and press\u00a0Shift + M\u00a0<\/strong>for the\u00a0Shape Builder Tool.\u00a0<\/strong>Subtract the intersected path for a nice\u00a0reflection.<\/p>\n<\/p>\n
Repeat the step above, but instead of subtracting from the screen rectangle, move the rotated object slightly above the first reflection, subtract again and give it a lighter color. Also use this effect on the primary button of the device, and its actual body to\u00a0give it a little more\u00a0polish.<\/p>\n
<\/p>\n
Once more select the screen, copy and paste it in place, flipping the fill with the stroke and giving it a darker grey\u00a0(3d3d3d<\/strong>).<\/p>\nSelect the main body of the device, duplicate it, and again flip the fill with its stroke. From the color palette select a more visible grey so that you can distinguish it from the rest of the\u00a0body.<\/p>\n
3.5.\u00a0Add a Long\u00a0Shadow<\/span><\/h3>\nWe will finish our icon by casting a long shadow. Duplicate the main icon body (Ctrl + c\u00a0<\/strong>then\u00a0Ctrl + f)<\/strong>\u00a0to paste in place. Select the new object and drag it at a 45 angle toward the right lower corner. We will do so by holding down\u00a0Alt<\/strong>\u00a0and while dragging to the right, press and hold\u00a0Shift<\/strong>\u00a0so that you get it exactly at 45\u00a0degrees.<\/p>\n<\/p>\n
Create a\u00a0blend<\/strong>\u00a0between the two objects; go to\u00a0Object > Blend Options<\/strong>\u00a0and in the\u00a0Specified Steps\u00a0<\/strong>enter\u00a0200<\/strong>. Now using the same path select\u00a0Make<\/strong>.<\/p>\nThe two have united into a single form. Go to\u00a0Object > Expand > OK<\/strong>, and then from the\u00a0Transform\u00a0<\/strong>window, click on\u00a0Unite<\/strong>. This is a\u00a0basic shadow. Give it a darker color than the background circle, and then mask it so that it doesn\u2019t fall out of the actual design. Change the color to\u00a0d85d5d\u00a0<\/strong>(R=216, G=93, B=93<\/strong>) then copy and paste the circle in front of the long shadow. Select both the shadow and its above object and then\u00a0right click > Make Clipping\u00a0Mask<\/strong>.<\/p>\nWe nailed\u00a0it!<\/strong><\/p>\nYou can change the colors as you please, adapting the style to your needs. Also, as we did all this using vectors, we can scale the icon as big or as small as we\u00a0want.<\/p>\n
<\/p>\n
Step 4 \u2013 Save\u00a0for the\u00a0Web<\/span><\/h2>\nWe have a nice looking icon, but how about saving it so that we can actually use it for what we had in mind in the first place \u2014 the web? Export artwork using the\u00a0SVG (Scalable Vector Graphics)<\/strong>\u00a0XML based vector format. The main advantages of using\u00a0SVG<\/strong>\u00a0compared to other formats (such as PNG)\u00a0are:<\/p>\n\n- Editability:<\/strong>\u00a0You can edit the image at any time using any text editor.<\/li>\n
- Scalability:<\/strong>\u00a0You can easily scale images once they\u2019re live on the internet without the need of creating multiple versions.<\/li>\n<\/ul>\n
So let\u2019s go ahead and see some of the settings that come with this format. Go to\u00a0File > Save as >\u00a0<\/strong>and from the\u00a0Save as type\u00a0<\/strong>click on the dropdown and select\u00a0SVG\u00a0<\/strong>(*.SVG<\/strong>) \u2013 don\u2019t forget to click on the\u00a0Use Artboards<\/strong>\u00a0checkbox so that it only saves the elements on your artboard. You should get a pop-up window \u2013 click on the\u00a0more<\/strong>\u00a0option to\u00a0see the full set of options. Let\u2019s go through each of\u00a0them:<\/p>\n<\/p>\n
\n- SVG Profiles<\/strong>: Since August 2011, the standard version promoted by the\u00a0W3C\u00a0<\/strong>is\u00a01.1<\/strong><\/li>\n
- Fonts<\/strong><\/li>\n<\/ul>\n
Type:<\/strong>\u00a0Controls the way fonts are embedded in the actual file. Usually if you have text,\u00a0Adobe recommends<\/strong>\u00a0SVG,<\/strong>\u00a0but this has some drawbacks and\u00a0isn\u2019t supported by\u00a0Firefox.<\/p>\nSubsetting<\/strong>: Using\u00a0SVG\u00a0<\/strong>you can save a subset of glyphs (characters) into the actual file (which will increase size but will allow you to modify content) but we will go with\u00a0Only Glyphs Used<\/strong>\u00a0because our design does not include\u00a0text.<\/p>\n\n- Image Location<\/strong>: This option has a lot to do with how you choose to embed images within the\u00a0SVG\u00a0<\/strong>file. According to Adobe, the best option is to use\u00a0Link<\/strong>, and then modify the\u00a0href\u00a0<\/strong>parameter to point to your own image file, which you should compress using\u00a0Photoshop<\/strong>\u00a0or any other image editing software.<\/li>\n
- CSS Properties<\/strong>: By using\u00a0Style Elements<\/strong>\u00a0you can modify your\u00a0SVG<\/strong>\u00a0code to your needs after exporting the file, and using it on your website.<\/li>\n
- Decimal Places<\/strong>: The value here will define the precision of vectors you export. The higher number the larger file size. It is recommended that you input a value of\u00a01.<\/strong><\/li>\n
- Output fewer <tspan> elements<\/strong>: If your artwork incorporates a lot of text, use this option to reduce the overall file size of your\u00a0SVG\u00a0<\/strong>\u2013 our icon doesn\u2019t rely on text, so we can leave this unchecked.<\/li>\n<\/ul>\n
After selecting all of the above options, click\u00a0Save<\/strong>.<\/p>\nQuick tip:<\/strong>\u00a0For more info on the rest of the save options please\u00a0visit this\u00a0link<\/a>.<\/em><\/p>\nIt\u2019s a wrap!<\/h4>\n
I hope you enjoyed this tutorial, and managed to learn how to build icons in Illustrator. \u00a0These techniques can be applied to any project, no matter the\u00a0subject.<\/p>\n","protected":false},"excerpt":{"rendered":"
These first two steps are somewhat general. For our project, a couple of images representing the actual Kindle will suffice; it has a simple design that can be easily reproduced using basic\u00a0shapes.<\/p>\n
Step 3 \u2013 Commence\u00a0Illustrator<\/span><\/h2>\nWhether you\u2019ve been pushing pixels for a long time, or just starting, one of the\u00a0most important tools is\u00a0Adobe Illustrator. I\u2019m not going to talk about the actual software, but will\u00a0guide you through setting up a\u00a0New Document<\/strong>\u00a0and starting to build\u00a0an\u00a0icon.<\/p>\n3.1. Set Up a New\u00a0Document<\/span><\/h3>\nAssuming you already had Illustrator up and running in the background, create a New Document by pressing\u00a0Ctrl + n<\/strong>\u00a0(or\u00a0\u2318<\/strong>\u00a0+\u00a0n<\/strong>\u00a0if you\u2019re using a Mac) or by going to\u00a0FILE > New\u2026<\/strong>\u00a0and let\u2019s go through some of the\u00a0settings<\/strong>\u00a0that will\u00a0pop-up.<\/p>\n<\/p>\n
<\/p>\n
\n- Name<\/strong>: This one is obvious; give it any name that suits your project.<\/li>\n
- Profile<\/strong>: This is important because\u00a0graphics designed for the web will be different from those based on a profile for printing.\u00a0Make sure to select\u00a0Web<\/em>\u00a0from the\u00a0drop down\u00a0menu.<\/strong><\/li>\n
- Number of Artboards<\/strong>: The Artboard according to Adobe, represents regions that can contain actual artwork. I usually go for a bigger artboard even if I have multiple designs, and put them on different layers so they will be at\u00a0hand and select exactly the ones I want to see.<\/li>\n
- Width\u00a0<\/strong>and\u00a0Height<\/strong>: Measures from which you can size your artboard \u2013 in our case, we\u2019ll go for a 120 by 120 pixels.<\/li>\n
- Units<\/strong>: Illustrator is intended for use with\u00a0web and print, so you have a lot of options; for this project we will go with\u00a0pixels.<\/strong><\/li>\n
- Color Mode<\/strong>: Double-check that this option suits the medium you are creating for.\u00a0RGB<\/strong>\u00a0(Red, Green, Blue) is color specific to the digital medium, whereas\u00a0CMYK<\/strong>\u00a0(Cyan, Magenta, Yellow, Black) is used in projects that involve printing. For our project, we will use RGB.<\/li>\n<\/ul>\n
Quick Tip<\/strong>: Learn more about the differences between\u00a0RGB<\/strong>\u00a0and\u00a0CMYK<\/strong>\u00a0in this\u00a0official Adobe tutorial<\/a>\u00a0(which does a good job explaining key differences you need to be aware\u00a0of).<\/em><\/p>\n<\/p>\n
\n- Raster Effects<\/strong>: There are three\u00a0values to choose from<\/li>\n<\/ul>\n
\n- Screen (72 ppi),<\/strong>\u00a0which is the default value. This is the standard option that you would go for if you would design for the web (which in our case, we are).<\/li>\n
- Medium (150 ppi).<\/strong><\/li>\n
- High (300 ppi).<\/strong>\u00a0The two last options are intended for graphics that will be used for printing.<\/li>\n<\/ol>\n
Quick Tip<\/strong>: Now that you\u2019ve created artwork, and let\u2019s assume your design uses effects from the\u00a0Stylize<\/strong>\u00a0menu such as\u00a0Drop Shadows<\/strong>,\u00a0Outer Glow<\/strong>\u00a0or\u00a0Inner Glow<\/strong>, you need to ensure quality. The printed version needs to\u00a0look as smooth and clean as the one on your monitor. Accomplish this by selecting\u00a0Effect > Document Raster Effects Settings\u00a0<\/strong>and choosing a higher resolution from the checkboxes \u2013 you can also input your own value in the\u00a0Other<\/strong>\u00a0field.<\/em><\/p>\nAlthough we are going to design for the web (72 ppi<\/strong>), the art will end up as a\u00a0png<\/strong>\u00a0or\u00a0jpeg<\/strong>\u00a0which are\u00a0raster images<\/strong>. If you go to the\u00a0Adobe site<\/a>, you will find out another tip that focuses on the effect of the\u00a0ppi<\/strong>\u00a0on the strokes of the\u00a0design:<\/p>\n\u201cThe crisp appearance of pixel-aligned strokes is maintained in the raster output at a resolution of 72-ppi only. For other resolutions, there is a high possibility of such strokes producing anti-aliased\u00a0results.\u201d<\/em><\/p>\n\n- Align New Objects to Pixel Grid<\/em><\/strong>: If\u00a0you\u2019re shooting for pixel-perfect designs, this is a must. The program instructs vector objects to align themselves to the pixel grid whenever they are moved or scaled, realigning them with\u00a0new positions.<\/li>\n<\/ul>\n
There it is: A\u00a0one-time tell-it-all intro that will fill in some gaps that might appear when starting\u00a0out.<\/p>\n
3.2. Getting Basic\u00a0Shapes<\/span><\/h3>\nFirst, set up a\u00a0circle<\/strong>\u00a0that will act as a background for the entire design. Using the Ellipse Tool (L) left click<\/strong>\u00a0anywhere in Illustrator to get the\u00a0Rounded Rectangle Settings Box<\/strong>\u00a0and set the\u00a0Width<\/strong>\u00a0and\u00a0Height<\/strong>\u00a0of the circle. Enter\u00a0110px for both<\/strong>\u00a0and click OK. Select the newly created object and remove the color from the stroke, and give it a nice light redish fill (HEX=<\/strong>ff7171 or R=255, G=113,\u00a0B=113<\/strong>).<\/p>\n<\/p>\n
Grab the\u00a0Rounded Rectangle Tool\u00a0<\/strong>(located on the left tool bar, same place as the\u00a0Rectangle Tool<\/strong>), left click on the artboard and create a\u00a055 x 80px\u00a0<\/strong>shape with a\u00a05px corner radius<\/strong>. Using\u00a0Align\u00a0<\/strong>options (Window > Align<\/strong>) select the new object and\u00a0horizontally\u00a0<\/strong>and\u00a0vertically\u00a0<\/strong>align it to the artboard. Give it a dark grey fill\u00a0#606060\u00a0<\/strong>(R=96, G=96,\u00a0B=96<\/strong>)<\/p>\nQuick Tip<\/strong>: If you just set up the Align panel, default\u00a0alignment will apply\u00a0to selected objects. To align to the artboard, look at the right lower corner, click \u201cAlign To\u201d<\/strong>\u00a0 and select\u00a0Align to\u00a0Artboard.<\/strong><\/em><\/p>\n<\/p>\n
Following the same steps as before, create a new rounded rectangle (Width=39px, Height=64px, Corner radius=1px<\/strong>). Select the new object and horizontally align it to the artboard and move it toward the top of the larger\u00a0rectangle.<\/p>\nWith the object selected, change its fill color to a slightly lighter grey\u00a0D3D3D3\u00a0<\/strong>(R=211, G=211,\u00a0B=211<\/strong>).<\/p>\nThis is\u00a0the basic frame and screen that will represent\u00a0a\u00a0Kindle.<\/p>\n
<\/p>\n
3.3 Layering\u00a0Buttons<\/span><\/h3>\nThe next step has to do with\u00a0buttons<\/strong>. Select the\u00a0Rounded rectangle tool<\/strong>\u00a0and create a\u00a05 x 5px\u00a0<\/strong>object with a\u00a02px corner radius<\/strong>. Horizontally align it to the other parts, and move it to the middle of the space between the lower side of the screen and the lower side of the body (you can also do this by dragging and creating a rectangle and vertically aligning the button to it). Assign a fill color (474747, R=71, G=71, B=71<\/strong>), then copy it and paste it in place (Ctrl + f \/\u00a0<\/strong>\u2318<\/strong>\u00a0+f<\/strong>). Select the duplicate button and flip its stroke with the fill color, leaving it at\u00a01px<\/strong>.<\/p>\n<\/p>\n
We now have our main button; next are the four\u00a0rounded ones. Select\u00a0the\u00a0Ellipse Tool\u00a0<\/strong>(L<\/strong>) and create a\u00a03 x 3px<\/strong>\u00a0circle. Select it, and while holding\u00a0Alt<\/strong>, drag it to the left to duplicate. Having both selected, again hold down\u00a0Alt\u00a0<\/strong>(\u2325<\/strong>\u00a0Option on Mac<\/strong>),<\/strong>\u00a0and drag to the right side of the main button. Select all the round buttons and the main one. Left click on the center button and using the\u00a0Align<\/strong>\u00a0panel and vertically center them. Now we need to space them up, with all the objects still selected, go the left lower corner of the\u00a0Align\u00a0<\/strong>to\u00a0Distribute Spacing<\/strong>, and give it\u00a04px<\/strong>\u00a0and select\u00a0Horizontal Distribute\u00a0Space<\/strong>.<\/p>\n<\/p>\n
For the side buttons, we will create a round corner object (Width=5px, Height=30px, Corner Radius=1px<\/strong>), and vertically align it to the main body of the icon. Drag it a little to the right so that it overlaps. Using the\u00a0Shape Builder Tool\u00a0<\/strong>(Shift + m<\/strong>) subtract the intersection of the two objects and you have page navigation\u00a0buttons.<\/p>\n<\/p>\n
Select the new object and change the fill to\u00a03d3d3d\u00a0<\/strong>(R=61, G=61, B=61<\/strong>). Duplicate and flip it vertically (right click > Transform > Reflect > Vertical<\/strong>), then align to the right side of the main\u00a0body.<\/p>\nAt this point, the icon is starting to take shape. In the next step we will start\u00a0adding\u00a0details<\/strong>.<\/p>\n3.4. Adding\u00a0Details<\/span><\/h3>\nWith our Kindle now laid out, we will start adding finishing touches to the screen. Grab the\u00a0Rectangle Tool\u00a0<\/strong>and draw a\u00a0100 x 55px\u00a0<\/strong>object. Rotate it by pressing\u00a0R<\/strong>, and then drag one corner to the left while holding down\u00a0Shift<\/strong>\u00a0to get a nice 45-degree angle. Duplicate the screen of the Kindle and\u00a0select both it and the rotated object<\/strong>\u00a0and press\u00a0Shift + M\u00a0<\/strong>for the\u00a0Shape Builder Tool.\u00a0<\/strong>Subtract the intersected path for a nice\u00a0reflection.<\/p>\n<\/p>\n
Repeat the step above, but instead of subtracting from the screen rectangle, move the rotated object slightly above the first reflection, subtract again and give it a lighter color. Also use this effect on the primary button of the device, and its actual body to\u00a0give it a little more\u00a0polish.<\/p>\n
<\/p>\n
Once more select the screen, copy and paste it in place, flipping the fill with the stroke and giving it a darker grey\u00a0(3d3d3d<\/strong>).<\/p>\nSelect the main body of the device, duplicate it, and again flip the fill with its stroke. From the color palette select a more visible grey so that you can distinguish it from the rest of the\u00a0body.<\/p>\n
3.5.\u00a0Add a Long\u00a0Shadow<\/span><\/h3>\nWe will finish our icon by casting a long shadow. Duplicate the main icon body (Ctrl + c\u00a0<\/strong>then\u00a0Ctrl + f)<\/strong>\u00a0to paste in place. Select the new object and drag it at a 45 angle toward the right lower corner. We will do so by holding down\u00a0Alt<\/strong>\u00a0and while dragging to the right, press and hold\u00a0Shift<\/strong>\u00a0so that you get it exactly at 45\u00a0degrees.<\/p>\n<\/p>\n
Create a\u00a0blend<\/strong>\u00a0between the two objects; go to\u00a0Object > Blend Options<\/strong>\u00a0and in the\u00a0Specified Steps\u00a0<\/strong>enter\u00a0200<\/strong>. Now using the same path select\u00a0Make<\/strong>.<\/p>\nThe two have united into a single form. Go to\u00a0Object > Expand > OK<\/strong>, and then from the\u00a0Transform\u00a0<\/strong>window, click on\u00a0Unite<\/strong>. This is a\u00a0basic shadow. Give it a darker color than the background circle, and then mask it so that it doesn\u2019t fall out of the actual design. Change the color to\u00a0d85d5d\u00a0<\/strong>(R=216, G=93, B=93<\/strong>) then copy and paste the circle in front of the long shadow. Select both the shadow and its above object and then\u00a0right click > Make Clipping\u00a0Mask<\/strong>.<\/p>\nWe nailed\u00a0it!<\/strong><\/p>\nYou can change the colors as you please, adapting the style to your needs. Also, as we did all this using vectors, we can scale the icon as big or as small as we\u00a0want.<\/p>\n
<\/p>\n
Step 4 \u2013 Save\u00a0for the\u00a0Web<\/span><\/h2>\nWe have a nice looking icon, but how about saving it so that we can actually use it for what we had in mind in the first place \u2014 the web? Export artwork using the\u00a0SVG (Scalable Vector Graphics)<\/strong>\u00a0XML based vector format. The main advantages of using\u00a0SVG<\/strong>\u00a0compared to other formats (such as PNG)\u00a0are:<\/p>\n\n- Editability:<\/strong>\u00a0You can edit the image at any time using any text editor.<\/li>\n
- Scalability:<\/strong>\u00a0You can easily scale images once they\u2019re live on the internet without the need of creating multiple versions.<\/li>\n<\/ul>\n
So let\u2019s go ahead and see some of the settings that come with this format. Go to\u00a0File > Save as >\u00a0<\/strong>and from the\u00a0Save as type\u00a0<\/strong>click on the dropdown and select\u00a0SVG\u00a0<\/strong>(*.SVG<\/strong>) \u2013 don\u2019t forget to click on the\u00a0Use Artboards<\/strong>\u00a0checkbox so that it only saves the elements on your artboard. You should get a pop-up window \u2013 click on the\u00a0more<\/strong>\u00a0option to\u00a0see the full set of options. Let\u2019s go through each of\u00a0them:<\/p>\n<\/p>\n
\n- SVG Profiles<\/strong>: Since August 2011, the standard version promoted by the\u00a0W3C\u00a0<\/strong>is\u00a01.1<\/strong><\/li>\n
- Fonts<\/strong><\/li>\n<\/ul>\n
Type:<\/strong>\u00a0Controls the way fonts are embedded in the actual file. Usually if you have text,\u00a0Adobe recommends<\/strong>\u00a0SVG,<\/strong>\u00a0but this has some drawbacks and\u00a0isn\u2019t supported by\u00a0Firefox.<\/p>\nSubsetting<\/strong>: Using\u00a0SVG\u00a0<\/strong>you can save a subset of glyphs (characters) into the actual file (which will increase size but will allow you to modify content) but we will go with\u00a0Only Glyphs Used<\/strong>\u00a0because our design does not include\u00a0text.<\/p>\n\n- Image Location<\/strong>: This option has a lot to do with how you choose to embed images within the\u00a0SVG\u00a0<\/strong>file. According to Adobe, the best option is to use\u00a0Link<\/strong>, and then modify the\u00a0href\u00a0<\/strong>parameter to point to your own image file, which you should compress using\u00a0Photoshop<\/strong>\u00a0or any other image editing software.<\/li>\n
- CSS Properties<\/strong>: By using\u00a0Style Elements<\/strong>\u00a0you can modify your\u00a0SVG<\/strong>\u00a0code to your needs after exporting the file, and using it on your website.<\/li>\n
- Decimal Places<\/strong>: The value here will define the precision of vectors you export. The higher number the larger file size. It is recommended that you input a value of\u00a01.<\/strong><\/li>\n
- Output fewer <tspan> elements<\/strong>: If your artwork incorporates a lot of text, use this option to reduce the overall file size of your\u00a0SVG\u00a0<\/strong>\u2013 our icon doesn\u2019t rely on text, so we can leave this unchecked.<\/li>\n<\/ul>\n
After selecting all of the above options, click\u00a0Save<\/strong>.<\/p>\nQuick tip:<\/strong>\u00a0For more info on the rest of the save options please\u00a0visit this\u00a0link<\/a>.<\/em><\/p>\nIt\u2019s a wrap!<\/h4>\n
I hope you enjoyed this tutorial, and managed to learn how to build icons in Illustrator. \u00a0These techniques can be applied to any project, no matter the\u00a0subject.<\/p>\n","protected":false},"excerpt":{"rendered":"
3.1. Set Up a New\u00a0Document<\/span><\/h3>\nAssuming you already had Illustrator up and running in the background, create a New Document by pressing\u00a0Ctrl + n<\/strong>\u00a0(or\u00a0\u2318<\/strong>\u00a0+\u00a0n<\/strong>\u00a0if you\u2019re using a Mac) or by going to\u00a0FILE > New\u2026<\/strong>\u00a0and let\u2019s go through some of the\u00a0settings<\/strong>\u00a0that will\u00a0pop-up.<\/p>\n<\/p>\n
<\/p>\n
\n- Name<\/strong>: This one is obvious; give it any name that suits your project.<\/li>\n
- Profile<\/strong>: This is important because\u00a0graphics designed for the web will be different from those based on a profile for printing.\u00a0Make sure to select\u00a0Web<\/em>\u00a0from the\u00a0drop down\u00a0menu.<\/strong><\/li>\n
- Number of Artboards<\/strong>: The Artboard according to Adobe, represents regions that can contain actual artwork. I usually go for a bigger artboard even if I have multiple designs, and put them on different layers so they will be at\u00a0hand and select exactly the ones I want to see.<\/li>\n
- Width\u00a0<\/strong>and\u00a0Height<\/strong>: Measures from which you can size your artboard \u2013 in our case, we\u2019ll go for a 120 by 120 pixels.<\/li>\n
- Units<\/strong>: Illustrator is intended for use with\u00a0web and print, so you have a lot of options; for this project we will go with\u00a0pixels.<\/strong><\/li>\n
- Color Mode<\/strong>: Double-check that this option suits the medium you are creating for.\u00a0RGB<\/strong>\u00a0(Red, Green, Blue) is color specific to the digital medium, whereas\u00a0CMYK<\/strong>\u00a0(Cyan, Magenta, Yellow, Black) is used in projects that involve printing. For our project, we will use RGB.<\/li>\n<\/ul>\n
Quick Tip<\/strong>: Learn more about the differences between\u00a0RGB<\/strong>\u00a0and\u00a0CMYK<\/strong>\u00a0in this\u00a0official Adobe tutorial<\/a>\u00a0(which does a good job explaining key differences you need to be aware\u00a0of).<\/em><\/p>\n<\/p>\n
\n- Raster Effects<\/strong>: There are three\u00a0values to choose from<\/li>\n<\/ul>\n
\n- Screen (72 ppi),<\/strong>\u00a0which is the default value. This is the standard option that you would go for if you would design for the web (which in our case, we are).<\/li>\n
- Medium (150 ppi).<\/strong><\/li>\n
- High (300 ppi).<\/strong>\u00a0The two last options are intended for graphics that will be used for printing.<\/li>\n<\/ol>\n
Quick Tip<\/strong>: Now that you\u2019ve created artwork, and let\u2019s assume your design uses effects from the\u00a0Stylize<\/strong>\u00a0menu such as\u00a0Drop Shadows<\/strong>,\u00a0Outer Glow<\/strong>\u00a0or\u00a0Inner Glow<\/strong>, you need to ensure quality. The printed version needs to\u00a0look as smooth and clean as the one on your monitor. Accomplish this by selecting\u00a0Effect > Document Raster Effects Settings\u00a0<\/strong>and choosing a higher resolution from the checkboxes \u2013 you can also input your own value in the\u00a0Other<\/strong>\u00a0field.<\/em><\/p>\nAlthough we are going to design for the web (72 ppi<\/strong>), the art will end up as a\u00a0png<\/strong>\u00a0or\u00a0jpeg<\/strong>\u00a0which are\u00a0raster images<\/strong>. If you go to the\u00a0Adobe site<\/a>, you will find out another tip that focuses on the effect of the\u00a0ppi<\/strong>\u00a0on the strokes of the\u00a0design:<\/p>\n\u201cThe crisp appearance of pixel-aligned strokes is maintained in the raster output at a resolution of 72-ppi only. For other resolutions, there is a high possibility of such strokes producing anti-aliased\u00a0results.\u201d<\/em><\/p>\n\n- Align New Objects to Pixel Grid<\/em><\/strong>: If\u00a0you\u2019re shooting for pixel-perfect designs, this is a must. The program instructs vector objects to align themselves to the pixel grid whenever they are moved or scaled, realigning them with\u00a0new positions.<\/li>\n<\/ul>\n
There it is: A\u00a0one-time tell-it-all intro that will fill in some gaps that might appear when starting\u00a0out.<\/p>\n
3.2. Getting Basic\u00a0Shapes<\/span><\/h3>\nFirst, set up a\u00a0circle<\/strong>\u00a0that will act as a background for the entire design. Using the Ellipse Tool (L) left click<\/strong>\u00a0anywhere in Illustrator to get the\u00a0Rounded Rectangle Settings Box<\/strong>\u00a0and set the\u00a0Width<\/strong>\u00a0and\u00a0Height<\/strong>\u00a0of the circle. Enter\u00a0110px for both<\/strong>\u00a0and click OK. Select the newly created object and remove the color from the stroke, and give it a nice light redish fill (HEX=<\/strong>ff7171 or R=255, G=113,\u00a0B=113<\/strong>).<\/p>\n<\/p>\n
Grab the\u00a0Rounded Rectangle Tool\u00a0<\/strong>(located on the left tool bar, same place as the\u00a0Rectangle Tool<\/strong>), left click on the artboard and create a\u00a055 x 80px\u00a0<\/strong>shape with a\u00a05px corner radius<\/strong>. Using\u00a0Align\u00a0<\/strong>options (Window > Align<\/strong>) select the new object and\u00a0horizontally\u00a0<\/strong>and\u00a0vertically\u00a0<\/strong>align it to the artboard. Give it a dark grey fill\u00a0#606060\u00a0<\/strong>(R=96, G=96,\u00a0B=96<\/strong>)<\/p>\nQuick Tip<\/strong>: If you just set up the Align panel, default\u00a0alignment will apply\u00a0to selected objects. To align to the artboard, look at the right lower corner, click \u201cAlign To\u201d<\/strong>\u00a0 and select\u00a0Align to\u00a0Artboard.<\/strong><\/em><\/p>\n<\/p>\n
Following the same steps as before, create a new rounded rectangle (Width=39px, Height=64px, Corner radius=1px<\/strong>). Select the new object and horizontally align it to the artboard and move it toward the top of the larger\u00a0rectangle.<\/p>\nWith the object selected, change its fill color to a slightly lighter grey\u00a0D3D3D3\u00a0<\/strong>(R=211, G=211,\u00a0B=211<\/strong>).<\/p>\nThis is\u00a0the basic frame and screen that will represent\u00a0a\u00a0Kindle.<\/p>\n
<\/p>\n
3.3 Layering\u00a0Buttons<\/span><\/h3>\nThe next step has to do with\u00a0buttons<\/strong>. Select the\u00a0Rounded rectangle tool<\/strong>\u00a0and create a\u00a05 x 5px\u00a0<\/strong>object with a\u00a02px corner radius<\/strong>. Horizontally align it to the other parts, and move it to the middle of the space between the lower side of the screen and the lower side of the body (you can also do this by dragging and creating a rectangle and vertically aligning the button to it). Assign a fill color (474747, R=71, G=71, B=71<\/strong>), then copy it and paste it in place (Ctrl + f \/\u00a0<\/strong>\u2318<\/strong>\u00a0+f<\/strong>). Select the duplicate button and flip its stroke with the fill color, leaving it at\u00a01px<\/strong>.<\/p>\n<\/p>\n
We now have our main button; next are the four\u00a0rounded ones. Select\u00a0the\u00a0Ellipse Tool\u00a0<\/strong>(L<\/strong>) and create a\u00a03 x 3px<\/strong>\u00a0circle. Select it, and while holding\u00a0Alt<\/strong>, drag it to the left to duplicate. Having both selected, again hold down\u00a0Alt\u00a0<\/strong>(\u2325<\/strong>\u00a0Option on Mac<\/strong>),<\/strong>\u00a0and drag to the right side of the main button. Select all the round buttons and the main one. Left click on the center button and using the\u00a0Align<\/strong>\u00a0panel and vertically center them. Now we need to space them up, with all the objects still selected, go the left lower corner of the\u00a0Align\u00a0<\/strong>to\u00a0Distribute Spacing<\/strong>, and give it\u00a04px<\/strong>\u00a0and select\u00a0Horizontal Distribute\u00a0Space<\/strong>.<\/p>\n<\/p>\n
For the side buttons, we will create a round corner object (Width=5px, Height=30px, Corner Radius=1px<\/strong>), and vertically align it to the main body of the icon. Drag it a little to the right so that it overlaps. Using the\u00a0Shape Builder Tool\u00a0<\/strong>(Shift + m<\/strong>) subtract the intersection of the two objects and you have page navigation\u00a0buttons.<\/p>\n<\/p>\n
Select the new object and change the fill to\u00a03d3d3d\u00a0<\/strong>(R=61, G=61, B=61<\/strong>). Duplicate and flip it vertically (right click > Transform > Reflect > Vertical<\/strong>), then align to the right side of the main\u00a0body.<\/p>\nAt this point, the icon is starting to take shape. In the next step we will start\u00a0adding\u00a0details<\/strong>.<\/p>\n3.4. Adding\u00a0Details<\/span><\/h3>\nWith our Kindle now laid out, we will start adding finishing touches to the screen. Grab the\u00a0Rectangle Tool\u00a0<\/strong>and draw a\u00a0100 x 55px\u00a0<\/strong>object. Rotate it by pressing\u00a0R<\/strong>, and then drag one corner to the left while holding down\u00a0Shift<\/strong>\u00a0to get a nice 45-degree angle. Duplicate the screen of the Kindle and\u00a0select both it and the rotated object<\/strong>\u00a0and press\u00a0Shift + M\u00a0<\/strong>for the\u00a0Shape Builder Tool.\u00a0<\/strong>Subtract the intersected path for a nice\u00a0reflection.<\/p>\n<\/p>\n
Repeat the step above, but instead of subtracting from the screen rectangle, move the rotated object slightly above the first reflection, subtract again and give it a lighter color. Also use this effect on the primary button of the device, and its actual body to\u00a0give it a little more\u00a0polish.<\/p>\n
<\/p>\n
Once more select the screen, copy and paste it in place, flipping the fill with the stroke and giving it a darker grey\u00a0(3d3d3d<\/strong>).<\/p>\nSelect the main body of the device, duplicate it, and again flip the fill with its stroke. From the color palette select a more visible grey so that you can distinguish it from the rest of the\u00a0body.<\/p>\n
3.5.\u00a0Add a Long\u00a0Shadow<\/span><\/h3>\nWe will finish our icon by casting a long shadow. Duplicate the main icon body (Ctrl + c\u00a0<\/strong>then\u00a0Ctrl + f)<\/strong>\u00a0to paste in place. Select the new object and drag it at a 45 angle toward the right lower corner. We will do so by holding down\u00a0Alt<\/strong>\u00a0and while dragging to the right, press and hold\u00a0Shift<\/strong>\u00a0so that you get it exactly at 45\u00a0degrees.<\/p>\n<\/p>\n
Create a\u00a0blend<\/strong>\u00a0between the two objects; go to\u00a0Object > Blend Options<\/strong>\u00a0and in the\u00a0Specified Steps\u00a0<\/strong>enter\u00a0200<\/strong>. Now using the same path select\u00a0Make<\/strong>.<\/p>\nThe two have united into a single form. Go to\u00a0Object > Expand > OK<\/strong>, and then from the\u00a0Transform\u00a0<\/strong>window, click on\u00a0Unite<\/strong>. This is a\u00a0basic shadow. Give it a darker color than the background circle, and then mask it so that it doesn\u2019t fall out of the actual design. Change the color to\u00a0d85d5d\u00a0<\/strong>(R=216, G=93, B=93<\/strong>) then copy and paste the circle in front of the long shadow. Select both the shadow and its above object and then\u00a0right click > Make Clipping\u00a0Mask<\/strong>.<\/p>\nWe nailed\u00a0it!<\/strong><\/p>\nYou can change the colors as you please, adapting the style to your needs. Also, as we did all this using vectors, we can scale the icon as big or as small as we\u00a0want.<\/p>\n
<\/p>\n
Step 4 \u2013 Save\u00a0for the\u00a0Web<\/span><\/h2>\nWe have a nice looking icon, but how about saving it so that we can actually use it for what we had in mind in the first place \u2014 the web? Export artwork using the\u00a0SVG (Scalable Vector Graphics)<\/strong>\u00a0XML based vector format. The main advantages of using\u00a0SVG<\/strong>\u00a0compared to other formats (such as PNG)\u00a0are:<\/p>\n\n- Editability:<\/strong>\u00a0You can edit the image at any time using any text editor.<\/li>\n
- Scalability:<\/strong>\u00a0You can easily scale images once they\u2019re live on the internet without the need of creating multiple versions.<\/li>\n<\/ul>\n
So let\u2019s go ahead and see some of the settings that come with this format. Go to\u00a0File > Save as >\u00a0<\/strong>and from the\u00a0Save as type\u00a0<\/strong>click on the dropdown and select\u00a0SVG\u00a0<\/strong>(*.SVG<\/strong>) \u2013 don\u2019t forget to click on the\u00a0Use Artboards<\/strong>\u00a0checkbox so that it only saves the elements on your artboard. You should get a pop-up window \u2013 click on the\u00a0more<\/strong>\u00a0option to\u00a0see the full set of options. Let\u2019s go through each of\u00a0them:<\/p>\n<\/p>\n
\n- SVG Profiles<\/strong>: Since August 2011, the standard version promoted by the\u00a0W3C\u00a0<\/strong>is\u00a01.1<\/strong><\/li>\n
- Fonts<\/strong><\/li>\n<\/ul>\n
Type:<\/strong>\u00a0Controls the way fonts are embedded in the actual file. Usually if you have text,\u00a0Adobe recommends<\/strong>\u00a0SVG,<\/strong>\u00a0but this has some drawbacks and\u00a0isn\u2019t supported by\u00a0Firefox.<\/p>\nSubsetting<\/strong>: Using\u00a0SVG\u00a0<\/strong>you can save a subset of glyphs (characters) into the actual file (which will increase size but will allow you to modify content) but we will go with\u00a0Only Glyphs Used<\/strong>\u00a0because our design does not include\u00a0text.<\/p>\n\n- Image Location<\/strong>: This option has a lot to do with how you choose to embed images within the\u00a0SVG\u00a0<\/strong>file. According to Adobe, the best option is to use\u00a0Link<\/strong>, and then modify the\u00a0href\u00a0<\/strong>parameter to point to your own image file, which you should compress using\u00a0Photoshop<\/strong>\u00a0or any other image editing software.<\/li>\n
- CSS Properties<\/strong>: By using\u00a0Style Elements<\/strong>\u00a0you can modify your\u00a0SVG<\/strong>\u00a0code to your needs after exporting the file, and using it on your website.<\/li>\n
- Decimal Places<\/strong>: The value here will define the precision of vectors you export. The higher number the larger file size. It is recommended that you input a value of\u00a01.<\/strong><\/li>\n
- Output fewer <tspan> elements<\/strong>: If your artwork incorporates a lot of text, use this option to reduce the overall file size of your\u00a0SVG\u00a0<\/strong>\u2013 our icon doesn\u2019t rely on text, so we can leave this unchecked.<\/li>\n<\/ul>\n
After selecting all of the above options, click\u00a0Save<\/strong>.<\/p>\nQuick tip:<\/strong>\u00a0For more info on the rest of the save options please\u00a0visit this\u00a0link<\/a>.<\/em><\/p>\nIt\u2019s a wrap!<\/h4>\n
I hope you enjoyed this tutorial, and managed to learn how to build icons in Illustrator. \u00a0These techniques can be applied to any project, no matter the\u00a0subject.<\/p>\n","protected":false},"excerpt":{"rendered":"
<\/p>\n
<\/p>\n
- \n
- Name<\/strong>: This one is obvious; give it any name that suits your project.<\/li>\n
- Profile<\/strong>: This is important because\u00a0graphics designed for the web will be different from those based on a profile for printing.\u00a0Make sure to select\u00a0Web<\/em>\u00a0from the\u00a0drop down\u00a0menu.<\/strong><\/li>\n
- Number of Artboards<\/strong>: The Artboard according to Adobe, represents regions that can contain actual artwork. I usually go for a bigger artboard even if I have multiple designs, and put them on different layers so they will be at\u00a0hand and select exactly the ones I want to see.<\/li>\n
- Width\u00a0<\/strong>and\u00a0Height<\/strong>: Measures from which you can size your artboard \u2013 in our case, we\u2019ll go for a 120 by 120 pixels.<\/li>\n
- Units<\/strong>: Illustrator is intended for use with\u00a0web and print, so you have a lot of options; for this project we will go with\u00a0pixels.<\/strong><\/li>\n
- Color Mode<\/strong>: Double-check that this option suits the medium you are creating for.\u00a0RGB<\/strong>\u00a0(Red, Green, Blue) is color specific to the digital medium, whereas\u00a0CMYK<\/strong>\u00a0(Cyan, Magenta, Yellow, Black) is used in projects that involve printing. For our project, we will use RGB.<\/li>\n<\/ul>\n
Quick Tip<\/strong>: Learn more about the differences between\u00a0RGB<\/strong>\u00a0and\u00a0CMYK<\/strong>\u00a0in this\u00a0official Adobe tutorial<\/a>\u00a0(which does a good job explaining key differences you need to be aware\u00a0of).<\/em><\/p>\n
<\/p>\n- \n
- Raster Effects<\/strong>: There are three\u00a0values to choose from<\/li>\n<\/ul>\n
- \n
- Screen (72 ppi),<\/strong>\u00a0which is the default value. This is the standard option that you would go for if you would design for the web (which in our case, we are).<\/li>\n
- Medium (150 ppi).<\/strong><\/li>\n
- High (300 ppi).<\/strong>\u00a0The two last options are intended for graphics that will be used for printing.<\/li>\n<\/ol>\n
Quick Tip<\/strong>: Now that you\u2019ve created artwork, and let\u2019s assume your design uses effects from the\u00a0Stylize<\/strong>\u00a0menu such as\u00a0Drop Shadows<\/strong>,\u00a0Outer Glow<\/strong>\u00a0or\u00a0Inner Glow<\/strong>, you need to ensure quality. The printed version needs to\u00a0look as smooth and clean as the one on your monitor. Accomplish this by selecting\u00a0Effect > Document Raster Effects Settings\u00a0<\/strong>and choosing a higher resolution from the checkboxes \u2013 you can also input your own value in the\u00a0Other<\/strong>\u00a0field.<\/em><\/p>\n
Although we are going to design for the web (72 ppi<\/strong>), the art will end up as a\u00a0png<\/strong>\u00a0or\u00a0jpeg<\/strong>\u00a0which are\u00a0raster images<\/strong>. If you go to the\u00a0Adobe site<\/a>, you will find out another tip that focuses on the effect of the\u00a0ppi<\/strong>\u00a0on the strokes of the\u00a0design:<\/p>\n
\u201cThe crisp appearance of pixel-aligned strokes is maintained in the raster output at a resolution of 72-ppi only. For other resolutions, there is a high possibility of such strokes producing anti-aliased\u00a0results.\u201d<\/em><\/p>\n
- \n
- Align New Objects to Pixel Grid<\/em><\/strong>: If\u00a0you\u2019re shooting for pixel-perfect designs, this is a must. The program instructs vector objects to align themselves to the pixel grid whenever they are moved or scaled, realigning them with\u00a0new positions.<\/li>\n<\/ul>\n
There it is: A\u00a0one-time tell-it-all intro that will fill in some gaps that might appear when starting\u00a0out.<\/p>\n
3.2. Getting Basic\u00a0Shapes<\/span><\/h3>\n
First, set up a\u00a0circle<\/strong>\u00a0that will act as a background for the entire design. Using the Ellipse Tool (L) left click<\/strong>\u00a0anywhere in Illustrator to get the\u00a0Rounded Rectangle Settings Box<\/strong>\u00a0and set the\u00a0Width<\/strong>\u00a0and\u00a0Height<\/strong>\u00a0of the circle. Enter\u00a0110px for both<\/strong>\u00a0and click OK. Select the newly created object and remove the color from the stroke, and give it a nice light redish fill (HEX=<\/strong>ff7171 or R=255, G=113,\u00a0B=113<\/strong>).<\/p>\n
<\/p>\nGrab the\u00a0Rounded Rectangle Tool\u00a0<\/strong>(located on the left tool bar, same place as the\u00a0Rectangle Tool<\/strong>), left click on the artboard and create a\u00a055 x 80px\u00a0<\/strong>shape with a\u00a05px corner radius<\/strong>. Using\u00a0Align\u00a0<\/strong>options (Window > Align<\/strong>) select the new object and\u00a0horizontally\u00a0<\/strong>and\u00a0vertically\u00a0<\/strong>align it to the artboard. Give it a dark grey fill\u00a0#606060\u00a0<\/strong>(R=96, G=96,\u00a0B=96<\/strong>)<\/p>\n
Quick Tip<\/strong>: If you just set up the Align panel, default\u00a0alignment will apply\u00a0to selected objects. To align to the artboard, look at the right lower corner, click \u201cAlign To\u201d<\/strong>\u00a0 and select\u00a0Align to\u00a0Artboard.<\/strong><\/em><\/p>\n
<\/p>\nFollowing the same steps as before, create a new rounded rectangle (Width=39px, Height=64px, Corner radius=1px<\/strong>). Select the new object and horizontally align it to the artboard and move it toward the top of the larger\u00a0rectangle.<\/p>\n
With the object selected, change its fill color to a slightly lighter grey\u00a0D3D3D3\u00a0<\/strong>(R=211, G=211,\u00a0B=211<\/strong>).<\/p>\n
This is\u00a0the basic frame and screen that will represent\u00a0a\u00a0Kindle.<\/p>\n
<\/p>\n3.3 Layering\u00a0Buttons<\/span><\/h3>\n
The next step has to do with\u00a0buttons<\/strong>. Select the\u00a0Rounded rectangle tool<\/strong>\u00a0and create a\u00a05 x 5px\u00a0<\/strong>object with a\u00a02px corner radius<\/strong>. Horizontally align it to the other parts, and move it to the middle of the space between the lower side of the screen and the lower side of the body (you can also do this by dragging and creating a rectangle and vertically aligning the button to it). Assign a fill color (474747, R=71, G=71, B=71<\/strong>), then copy it and paste it in place (Ctrl + f \/\u00a0<\/strong>\u2318<\/strong>\u00a0+f<\/strong>). Select the duplicate button and flip its stroke with the fill color, leaving it at\u00a01px<\/strong>.<\/p>\n
<\/p>\nWe now have our main button; next are the four\u00a0rounded ones. Select\u00a0the\u00a0Ellipse Tool\u00a0<\/strong>(L<\/strong>) and create a\u00a03 x 3px<\/strong>\u00a0circle. Select it, and while holding\u00a0Alt<\/strong>, drag it to the left to duplicate. Having both selected, again hold down\u00a0Alt\u00a0<\/strong>(\u2325<\/strong>\u00a0Option on Mac<\/strong>),<\/strong>\u00a0and drag to the right side of the main button. Select all the round buttons and the main one. Left click on the center button and using the\u00a0Align<\/strong>\u00a0panel and vertically center them. Now we need to space them up, with all the objects still selected, go the left lower corner of the\u00a0Align\u00a0<\/strong>to\u00a0Distribute Spacing<\/strong>, and give it\u00a04px<\/strong>\u00a0and select\u00a0Horizontal Distribute\u00a0Space<\/strong>.<\/p>\n
<\/p>\nFor the side buttons, we will create a round corner object (Width=5px, Height=30px, Corner Radius=1px<\/strong>), and vertically align it to the main body of the icon. Drag it a little to the right so that it overlaps. Using the\u00a0Shape Builder Tool\u00a0<\/strong>(Shift + m<\/strong>) subtract the intersection of the two objects and you have page navigation\u00a0buttons.<\/p>\n
<\/p>\nSelect the new object and change the fill to\u00a03d3d3d\u00a0<\/strong>(R=61, G=61, B=61<\/strong>). Duplicate and flip it vertically (right click > Transform > Reflect > Vertical<\/strong>), then align to the right side of the main\u00a0body.<\/p>\n
At this point, the icon is starting to take shape. In the next step we will start\u00a0adding\u00a0details<\/strong>.<\/p>\n
3.4. Adding\u00a0Details<\/span><\/h3>\n
With our Kindle now laid out, we will start adding finishing touches to the screen. Grab the\u00a0Rectangle Tool\u00a0<\/strong>and draw a\u00a0100 x 55px\u00a0<\/strong>object. Rotate it by pressing\u00a0R<\/strong>, and then drag one corner to the left while holding down\u00a0Shift<\/strong>\u00a0to get a nice 45-degree angle. Duplicate the screen of the Kindle and\u00a0select both it and the rotated object<\/strong>\u00a0and press\u00a0Shift + M\u00a0<\/strong>for the\u00a0Shape Builder Tool.\u00a0<\/strong>Subtract the intersected path for a nice\u00a0reflection.<\/p>\n
<\/p>\nRepeat the step above, but instead of subtracting from the screen rectangle, move the rotated object slightly above the first reflection, subtract again and give it a lighter color. Also use this effect on the primary button of the device, and its actual body to\u00a0give it a little more\u00a0polish.<\/p>\n
<\/p>\nOnce more select the screen, copy and paste it in place, flipping the fill with the stroke and giving it a darker grey\u00a0(3d3d3d<\/strong>).<\/p>\n
Select the main body of the device, duplicate it, and again flip the fill with its stroke. From the color palette select a more visible grey so that you can distinguish it from the rest of the\u00a0body.<\/p>\n
3.5.\u00a0Add a Long\u00a0Shadow<\/span><\/h3>\n
We will finish our icon by casting a long shadow. Duplicate the main icon body (Ctrl + c\u00a0<\/strong>then\u00a0Ctrl + f)<\/strong>\u00a0to paste in place. Select the new object and drag it at a 45 angle toward the right lower corner. We will do so by holding down\u00a0Alt<\/strong>\u00a0and while dragging to the right, press and hold\u00a0Shift<\/strong>\u00a0so that you get it exactly at 45\u00a0degrees.<\/p>\n
<\/p>\nCreate a\u00a0blend<\/strong>\u00a0between the two objects; go to\u00a0Object > Blend Options<\/strong>\u00a0and in the\u00a0Specified Steps\u00a0<\/strong>enter\u00a0200<\/strong>. Now using the same path select\u00a0Make<\/strong>.<\/p>\n
The two have united into a single form. Go to\u00a0Object > Expand > OK<\/strong>, and then from the\u00a0Transform\u00a0<\/strong>window, click on\u00a0Unite<\/strong>. This is a\u00a0basic shadow. Give it a darker color than the background circle, and then mask it so that it doesn\u2019t fall out of the actual design. Change the color to\u00a0d85d5d\u00a0<\/strong>(R=216, G=93, B=93<\/strong>) then copy and paste the circle in front of the long shadow. Select both the shadow and its above object and then\u00a0right click > Make Clipping\u00a0Mask<\/strong>.<\/p>\n
We nailed\u00a0it!<\/strong><\/p>\n
You can change the colors as you please, adapting the style to your needs. Also, as we did all this using vectors, we can scale the icon as big or as small as we\u00a0want.<\/p>\n
<\/p>\nStep 4 \u2013 Save\u00a0for the\u00a0Web<\/span><\/h2>\n
We have a nice looking icon, but how about saving it so that we can actually use it for what we had in mind in the first place \u2014 the web? Export artwork using the\u00a0SVG (Scalable Vector Graphics)<\/strong>\u00a0XML based vector format. The main advantages of using\u00a0SVG<\/strong>\u00a0compared to other formats (such as PNG)\u00a0are:<\/p>\n
- \n
- Editability:<\/strong>\u00a0You can edit the image at any time using any text editor.<\/li>\n
- Scalability:<\/strong>\u00a0You can easily scale images once they\u2019re live on the internet without the need of creating multiple versions.<\/li>\n<\/ul>\n
So let\u2019s go ahead and see some of the settings that come with this format. Go to\u00a0File > Save as >\u00a0<\/strong>and from the\u00a0Save as type\u00a0<\/strong>click on the dropdown and select\u00a0SVG\u00a0<\/strong>(*.SVG<\/strong>) \u2013 don\u2019t forget to click on the\u00a0Use Artboards<\/strong>\u00a0checkbox so that it only saves the elements on your artboard. You should get a pop-up window \u2013 click on the\u00a0more<\/strong>\u00a0option to\u00a0see the full set of options. Let\u2019s go through each of\u00a0them:<\/p>\n
<\/p>\n- \n
- SVG Profiles<\/strong>: Since August 2011, the standard version promoted by the\u00a0W3C\u00a0<\/strong>is\u00a01.1<\/strong><\/li>\n
- Fonts<\/strong><\/li>\n<\/ul>\n
Type:<\/strong>\u00a0Controls the way fonts are embedded in the actual file. Usually if you have text,\u00a0Adobe recommends<\/strong>\u00a0SVG,<\/strong>\u00a0but this has some drawbacks and\u00a0isn\u2019t supported by\u00a0Firefox.<\/p>\n
Subsetting<\/strong>: Using\u00a0SVG\u00a0<\/strong>you can save a subset of glyphs (characters) into the actual file (which will increase size but will allow you to modify content) but we will go with\u00a0Only Glyphs Used<\/strong>\u00a0because our design does not include\u00a0text.<\/p>\n
- \n
- Image Location<\/strong>: This option has a lot to do with how you choose to embed images within the\u00a0SVG\u00a0<\/strong>file. According to Adobe, the best option is to use\u00a0Link<\/strong>, and then modify the\u00a0href\u00a0<\/strong>parameter to point to your own image file, which you should compress using\u00a0Photoshop<\/strong>\u00a0or any other image editing software.<\/li>\n
- CSS Properties<\/strong>: By using\u00a0Style Elements<\/strong>\u00a0you can modify your\u00a0SVG<\/strong>\u00a0code to your needs after exporting the file, and using it on your website.<\/li>\n
- Decimal Places<\/strong>: The value here will define the precision of vectors you export. The higher number the larger file size. It is recommended that you input a value of\u00a01.<\/strong><\/li>\n
- Output fewer <tspan> elements<\/strong>: If your artwork incorporates a lot of text, use this option to reduce the overall file size of your\u00a0SVG\u00a0<\/strong>\u2013 our icon doesn\u2019t rely on text, so we can leave this unchecked.<\/li>\n<\/ul>\n
After selecting all of the above options, click\u00a0Save<\/strong>.<\/p>\n
Quick tip:<\/strong>\u00a0For more info on the rest of the save options please\u00a0visit this\u00a0link<\/a>.<\/em><\/p>\n
It\u2019s a wrap!<\/h4>\n
I hope you enjoyed this tutorial, and managed to learn how to build icons in Illustrator. \u00a0These techniques can be applied to any project, no matter the\u00a0subject.<\/p>\n","protected":false},"excerpt":{"rendered":"
- CSS Properties<\/strong>: By using\u00a0Style Elements<\/strong>\u00a0you can modify your\u00a0SVG<\/strong>\u00a0code to your needs after exporting the file, and using it on your website.<\/li>\n
- Fonts<\/strong><\/li>\n<\/ul>\n
- Scalability:<\/strong>\u00a0You can easily scale images once they\u2019re live on the internet without the need of creating multiple versions.<\/li>\n<\/ul>\n
- Editability:<\/strong>\u00a0You can edit the image at any time using any text editor.<\/li>\n
- Medium (150 ppi).<\/strong><\/li>\n
- Screen (72 ppi),<\/strong>\u00a0which is the default value. This is the standard option that you would go for if you would design for the web (which in our case, we are).<\/li>\n
- Profile<\/strong>: This is important because\u00a0graphics designed for the web will be different from those based on a profile for printing.\u00a0Make sure to select\u00a0Web<\/em>\u00a0from the\u00a0drop down\u00a0menu.<\/strong><\/li>\n