![]() ![]() Since I want the background color to be totally opaque, I’ll set the Alpha value to 100 by typing “ff” at the end of our HTML value. ![]() In Inkscape, you also need to specify the Alpha channel value (RGBA stands for Red, Green, Blue, and Alpha), or the transparency/opacity of the background color. So, I’ll erase the old value, and will paste “606060” here instead. In our case, we want to set this RGBA color value to the color used in Illustrator – which has the HTML notation #606060. – I stayed with RGB, which is the default option) and the color sliders, or you can type in an HTML value for a specific color under the “RGBA” section (denoted by the red arrow). Here, you can either manually set a color in a variety of color modes (RGB, HSL, CMYK, etc. This will bring up the “Background Color” dialogue box. To set the background to a specific color, I can click the “Background Color” right below the Checkerboard Background checkbox under the Background section (denoted by the blue arrow in the photo above). However, I prefer to have my background be the same dark gray color as found in illustrator. To do this, go to the “Background” section and click the “Checkerboard Background” option (denoted by the green arrow above). If you prefer, you can set your document and canvas background to be transparent, which is represented by a gray checkerboard. Under the first tab labeled “Page,” (denoted by the red arrow in the photo above) there are a few sections that allow us to tweak our canvas settings. This will bring up my Document Properties dialogue box, which contains some customization options for our document and canvas. To start this process, I’ll go to File>Document Properties. Luckily it is pretty easy to make a few tweaks to Inkscape and have your canvas look exactly like Adobe Illustrator’s artboard. This makes it hard to tell precisely when you are drawing on the canvas and when you have gone off of it. In Inkscape, however, both the active and inactive parts of my canvas are white by default (shown in the bottom portion of the first photo), and the border disappears whenever an object is drawn on top of it (in other words, the object obstructs the border – shown in the photo above, denoted by the red arrow). Additionally, the border that outlined the artboard always displayed on top of any portions of my designs that spilled off the artboard. Perhaps this is simply because I was used to Illustrator’s artboard set-up (shown in the top portion of the photo), which included a dark gray background for all of the areas that weren’t on the artboard, and a white background for areas that were on the artboard. We tried creating icons using Photoshop and Fireworks but both do not support SVG the way Illustrator does.As a longtime Adobe Illustrator user, the toughest part of transitioning to Inkscape was opening the program and seeing an all-white canvas staring back at me. 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 |