Step 4Īdd the main shape for the eye using a 32 x 20 px ellipse, which we will color using #ffffff and then center align to the square that we’ve just adjusted. Step 3Īdjust the shape that we’ve just created, by opening up the Transform panel, and then setting the Radius of its bottom-right corner to 12 px, and its remaining ones to 28 px. New (or by using the Control-N keyboard shortcut), which we willĬreate the main shape for the icon’s body using a 56 x 56 px square, which we will color using #494951 and then center align to the underlying Artboard using the Align panel’s Horizontal and Vertical Align Center options. To start by setting up a New Document, by heading over to File >
Adobe illustrator icon with x software#
So, assuming you already have the software running in the background, bring it up and let jump straight into it!Įstimated Completion Time: 20 Minutes Step 1Īs we with every new project, we’re going Just another coffee addict / pixel grinder, creating colorful projects one pixel at a time.In today’s tutorial, we’re going to take an in-depth look behind the process of creating a visibility icon, and see how we can make some simple shapes and turn them into a finished usable product. That being said, if you have any questions feel free to post them within the comments area and I’ll get back to you as soon as I can! Once you’re done, position the resulting shape on top of the previous section, making sure to select and group ( Control-G) all of its composing shapes afterwards.Īs always, I hope you’ve managed to follow each and every step and most importantly learned something new and useful along the way. Once you’re done, group ( Control-G) and then center align the two shapes to the larger underlying section.įinish off the battery and with it the project itself by adding the top cap using a 12 x 4 px rectangle ( #B6B6C1), which we will adjust by setting the Radius of its top corners to 2 px. Next, create two 28 x 4 px rectangles which we will vertically stack on top of the previous section, making sure to color the bottom one using #C4C4CC and the top one using #3E3D49.Ĭreate the upper section of the battery using a 28 x 24 px rectangle ( #D69569), which we will adjust by setting the Radius of its top corners to 2 px, positioning the resulting shape on top of the previous segments.Īdd the little plus sign using an 8 x 2 px rectangle ( #3E3D49) on top of which we will stack another 2 x 8 px one ( #3E3D49).
Once you’re done, select and group the two resulting shapes together using the Control-G keyboard shortcut before moving on to the next step. Start working on the little bolt symbol, by creating two 8 x 16 px rectangles which we will color using #F2C47C, and then overlap and position as seen in the reference image so that a 4 x 4 px square will form at their intersection.Īdjust the shapes that we’ve just created by removing the top ones top-left anchor point and the bottom ones bottom-right one using the Delete Anchor Point Tool (-). Start working on the actual icon, by creating the bottom cap using a 20 x 4 px rectangle, which we will color using #B6B6C1, and then center align to the underlying Artboard, positioning it at a distance of 4 px from its bottom edge.Īdjust the shape that we’ve just created, by setting the Radius of its bottom corners to 4 px from within the Transform panel’s Rectangle Properties.Ĭreate the main shape for battery’s lower section using a 28 x 48 px rectangle ( #3E3D49), which we will position on top of the previous section, making sure to set the Radius of its bottom corners to 2 px from within the Transform panel’s Rectangle Properties. Quick tip: most of the indicated settings can be automatically triggered if you set the document’s Profile to Web, the only one that you’ll have to manually adjust being the Artboard’s Size ( Width x Height). Kick off the project by setting up a New Document ( File > New or using the Control-N keyboard shortcut), which we will adjust as follows: Topics Covered: Design Theory, Compositional Construction, Shape Alignment, Grid Positioning.Program: Adobe Illustrator CS6 – CC 2018.That being said, make sure you grab a fresh batch of coffee and let’s get started! Tutorial Details: Battery Icon In today’s tutorial, we’re going to look behind the process of creating a battery icon using a couple of basic geometric shapes which we will adjust here and there.
0 kommentar(er)
