![]() Once you’re done, select and group the two shapes together using the Control-G keyboard shortcut.Īdd the vertical handle using a 46 px tall 4 px thick Stroke line ( #264147) with a Round Cap, which we will position to the center of the lower body’s top edge so that the paths overlap as seen in the reference image.Ĭreate the main shape for the squeezing press using a 12 x 12 px square with a 4 px thick Stroke ( #264147), which we will adjust by setting the Radius of its top corners to 4 px from within the Transform panel’s Rectangle Properties. Give the shape that we’ve just created an outline using the Stroke method, by creating a copy of it ( Control-C) which we will paste in front ( Control-V) and then adjust by first changing its color to #264147 making sure to set its Width to 4 px and its Join to Round. Once you have the backgrounds in place, zoom in onto the first Artboard and create the main shape for the mop’s lower body using a 28 x 6 px rectangle which we will color using white ( #FFFFFF), and then center align to the underlying Artboard, positioning it at a distance of 2 px from the active drawing area’s bottom edge. With the reference grids in place, we can now start working on the actual icons, and we will do so by creating the colored backgrounds using six 48 x 48 px circles ( #7FD7E5), which we will position to the center of each of the underlying Artboards as seen in the reference image. Populate the remaining Artboards using five copies ( Control-C > Control-F) of the reference grid that we’ve just finished working on, making sure to lock the current layer before moving on to the next step. Start by positioning yourself onto bottom layer, and using the Rectangle Tool (M) create a 64 x 64 px square which we will color using #F15A24, and then center align to the first Artboard.Īdd the active drawing area using a smaller 56 x 56 px square ( #FFFFFF), making sure to select and group the two together afterwards using the Control-G keyboard shortcut. ![]() Next we need to create the reference grids, which are a set of precisely delimited surfaces, that allow us to give our icons a small protective padding. ![]() We tried creating icons using Photoshop and Fireworks but both do not support SVG the way Illustrator does.Let’s kick off the project by setting up a New Document by going to File > New or by using the Control-N keyboard shortcut, which we will adjust as follows:Īs soon as we’ve created our project file, we should take a couple of moments and structure our document, so open up the Layers panel and create a total of two layers, which we will rename as follows: ![]() Recently we (UNITiD & de Voorhoede) worked on a project that required some custom icons and making an icon font was the way to go. Icon fonts are supported by all modern browsers.Īdmittedly icon fonts are not the best solution for all projects, but by using them you can’t really go wrong either.Using CSS you can add: gradients, shadows and pretty much any CSS behaviour you fancy.Need a icon in different colors? No need to design it, just change it in the CSS!.Your icons are always crisp, even on retina displays.Need the same icon in different sizes? The SVG format is scalable and so are fonts so one size fits all.Just 5 situations that you want to use a font rather than a bitmap image: ![]() Next to boosting speed and performance it gives you a lot of freedom in the front-end development phase. So you might wonder “Why make an icon font?” for one it’s fun! Also you can create custom icons to give your design that little something special. Described in this post is the flow for working in Illustrator (any version that supports the ‘Artboards’ function should work fine). It is a small flow to create SVG files using Adobe Illustrator for using a service like Icomoon to create an icon font to use for websites. Today we have a pdf to share with you, one that you can print out and hang on a wall (either in your office or your bedroom, you decide). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |