Parameter name: request
Translate Request has too much data
Parameter name: request
With this tutorial I’ll show you how to create an iOS map indicator icon perfect for importing into your next map based app design. We’ll be using a single shape with multiple Appearance attributes to create an easy to use and edit Graphic Style in Adobe Illustrator.
Let’s start off by preparing our document. Open Illustrator and hit Command + N to create a New document. Enter 500 in the width box and 500 in the height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the Align New Objects to Pixel Grid box is unchecked before your click OK.
When working with resolution independent devices pixel perfection is a must and in order to create crisp shapes it would be easier to have Grid View set up and Pixel Snapping enabled so we’ll do that now. Let’s enable the Grid (View > Show Grid) and then Snap to Grid (View > Snap to Grid). After those are on, you’ll need a grid every 1px. Simply go to Illustrator > Preferences > Guides & Grid, enter 1 in the Gridline every box and 1 in the Subdivisions box. Now let’s set the unit of measurement to pixels from Illustrator > Preferences > Unit > General. Once completed your document should look like the images below.
Now that our document is set up let’s start by creating our circle shape used for the indicator icon. Since we’re creating for a retina display we’ll need to work at double the size of the object we want to create. On our retina device we will want the indicator to appear to be 16px by 16px so if we multiply that by 2 we arrive at 32px. With this in mind let’s select our Ellipse Tool (L) then click anywhere on the canvas. When the dialog box appears let’s type in 32px for both the width and the height. This will create the perfect circle needed for our indicator.
Tip: Press the letter “D” on your keyboard to reset your Fill and Stroke color to their default settings.
With our shape drawn we can get to the fun stuff. Open the Appearance panel (if it isn’t already go to Window > Appearance) and let’s begin creating our icon.
There are a quite a few Appearance attributes for this shape so to make it easier to follow we’ll be working from the bottom up in the Appearance panel.
To begin, in the Appearance panel select the bottom Fill item and we’ll create an opaque to transparent radial gradient as outlined in the image below then adjust the Opacity to 50%. With that Fill item still selected we’ll also go click the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Path > Offset Path and enter the attributes outlined below. We will also need to Transform the Fill item so select the Add New Effect button again and navigate to Distort & Transform > Transform and enter the attributes as seen below. If you haven’t guessed yet, this will be the shadow for the indicator icon and what we’ve done is create a completely vector drop shadow that gives a slight halo to our main shape and is nudged down just enough to provide depth. It doesn’t look like much now but things will start to pull together soon.
Now, let’s create another Fill item above our gradient Fill item. By default this will add our black to transparent gradient but we’ll need to remove this gradient in lieu of a flat color Let’s go ahead and select a nice bright red color for this layer as outlined below. At this point it may seem strange to use such a vibrant red but it will all make sense in a moment. This bottom layer will act as both our base color as well as our secondary highlight once we move on to the next step.
Once again let’s create another Fill item. This will default to the flat red color we chose earlier but we want a nice radial gradient for this item so select the Gradient panel and input the attributes outlined below. A nice purple to white combo set to Multiply and the Opacity dropped to 50% will add a nice full bodied rounded 3D shape to the icon. To push the 3D effect even further let’s Zoom (Z) in to our icon until we see the individual pixel squares on our art board. With that gradient item still selected choose your Gradient Tool (G) from the Tool panel and this will show the gradient bar over the icon. We are going to Click and drag this bar up about 2.5 pixels using our art board as a guide making sure to keep the bar as centered as possible.
Now we’ll start to create our primary light source. Please remember we’re working from bottom to top so things may not make sense until we finish with the next few steps.
Keeping in mind we’re trying to create a bright shine on our icon it stands to reason that this shine will cast some diffusion lighting against our object so this is what we’re going to create now. Again we’re going to create a new Fill layer. Let’s adjust this gradient so it’s opaque to transparent as outlined below with an over all Opacity of 60%. Select the Gradient Tool (G) and using the white handle bar with the black center on the left side of the gradient marquee click and drag that handle towards the center of the circle so it’s almost half its original size then click the center gradient bar and drag it up and over to the left a bit. Keep an eye on this layer as you may want to come back to it later to line it up exactly with our main white highlight layer later on.
Now that we have some diffusion we’ll add a glow to the highlight itself. Create another Fill layer and fill it with a white to transparent gradient as outlined below. Please keep in mind that the gradient position will match the layer below so before you adjust this gradient please click the “None” swatch in the Swatches panel to clear out that fill then add then add the new opaque to transparent gradient so its position is reset. With the gradient in place we are going to want to Offset and Transform this Fill layer also. Click the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Path > Offset Path and enter the attributes outlined below. We will also need to Transform the Fill item so select the Add New Effect button again and navigate to Distort & Transform > Transform and enter the attributes as seen below.
With that glow out of the way let’s add our actual highlight. Click the Add New Fill button again and fill it with a flat white color Then select the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Path > Offset Path and enter the attributes outlined below. We will also need to Transform the Fill item so select the Add New Effect button again and navigate to Distort & Transform > Transform and enter the attributes as seen below.
At this time you can go back to the red gradient diffusion layer we made a few steps back and adjust the center point of the gradient to be directly under the white highlight.
Now let’s adjust that black border that has been sitting there staring at us this whole time. We’ll set it to outside with a Stroke Weight of 2px and the color outlined below.
The indicator itself is now complete but let’s take it a step further and create the GPS radius ring as well. Click the Add New Fill button again and fill it with a red to transparent gradient as outlined below and drop the Opacity to 25%. Then select the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Path > Offset Path and enter the attributes outlined below.
For the last piece of the icon we’ll add the border around the GPS radius ring. Click the Add New Stroke button on the bottom of the Appearance panel and choose a 2px red Stroke Weight on the inside of the shape. Now let’s offset the path by clicking the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Path > Offset Path and enter the attributes outlined below. And then finally we’ll add an Outer Glow to this stroke. To do so click the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Stylize > Outer Glow
At this point you can Shift + Click on the two GPS radius ring items to select them both in the Appearance panel then drag them to the bottom of this list so that the actual indicator icon sits on top.
With the indicator out of the way we’ll now create the name pop up. Select the Rounded Rectangle tool and click on the page and enter the information outlined in the image below. Keep in mind that the width can be anything you desire so long as the name you choose later on fits but for the purposed of this tutorial we’ll use this set width.
We’ll also need to click once more with the Rounded Rectangle tool to create the arrow on the bottom. for this we’ll need it to be perfectly square and we’ll drop the radius as well as indicated below. When the shape made let’s rotate it 45 degrees. To do so, select the Selection Tool (V) then position your mouse near any corner of the square and while holding the Shift key on your keyboard drag the shape in any direction until it looks like a diamond as seen in the screenshot below.
Now we’ll align these objects to be centered with one another. With the Selection Tool (V) in hand shift click both objects so they are both selected at the same time. We’ll now navigate to the Align panel (Window > Align) and choose the second option under the Align Objects header called Horizontal Align Center. Then click the last option under that same header called Vertical Align Bottom.
With the Selection Tool (V) still enabled, click on the smaller diamond shape so it is the only object now selected. While holding Shift on the keyboard press the Down arrow on your keyboard once. Release shift then press the down arrow on your keyboard three more times to move the diamond into the perfect position.
Shift click the larger rounded shape so both objects are selected once again and navigate to the Pathfinder panel (Window > Pathfinder) then click the first option under the Shape Modes header titled Unite. Both objects should now be joined in to one.
With our pop up. shape now created we’ll work on styling it. With the shape selected navigate to the Appearance panel (Window > Appearance) and select the Stroke. We’ll be keeping this as basic black but let’s set it to be outside the shape with a Stroke Weight of 2px.
Next, select the Fill and we’ll fill this with a grayscale semi-transparent 90 degree gradient as outlined below.
Lastly we’ll add a drop shadow effect to this object. Click the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Stylize > Drop Shadow and enter the options outlined in the screenshot below.
Let’s give this object a nice highlight at the top. With the object selected we’ll Copy (Command + C) then Paste in Front (Command + F). Let’s quickly reset to the default style by pressing “D” on your keyboard. This will remove the effects we added previously and return the shape to basic white with a black stroke. For the purpose of this highlight we won’t need a stroke so navigate to your Tools panel and click on the stroke fill option near the bottom to select it. Then click the white square with the diagonal red line through it to remove the stroke completely. With the stroke gone let’s Copy it (Command + C) then Paste in Front (Command + F) again so we now have two plain white shapes one on top of the other. Then while the top most shape is selected and the Selection Tool (V) is enabled press the down arrow on your keyboard twice to nudge the object down. Once nudged, shift click the plain object behind it to select both at once. While both objects are selected navigate to the Pathfinder panel (Window > Pathfinder) and select the second option under the header “Shape Modes” titled “Minus Front”. You should now be left with a small sliver of the original shape at the very top. With this sliver selected let’s lower it’s Opacity to 25% in the Appearance panel (Window > Appearance).
Now we’ll create the text for this pop up. Select the Type Tool (T) from the Tools panel and then click on the art board and type out the name you wish. In the Tools panel click the Fill color and change it to white. Now navigate to the Character panel (Type > Type > Character) and adjust the size and the font type as outlined below.
With the text selected navigate to the Appearance panel (Window > Appearance) and click the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Stylize > Drop Shadow and enter the options outlined in the screenshot below. We can also use the Selection Tool (V) to drag the text to the desired location in the bubble shape. Because Smart Guides and Snap to Grid is enabled this should be easy to find.
With the text out of the way let’s create the arrow icon. Select the Rounded Rectangle tool and click on the art board then plug in these options.
Now select the Selection Tool (V) and click on the newly created rectangle. With the object selected we’ll Copy (Command + C) then Paste in Front (Command + F). Now let’s rotate this new object 90 degrees. Now we’ll align these objects to form a backwards L shape. With the Selection Tool (V) in hand shift click both objects so they are both selected at the same time. We’ll now navigate to the Align panel (Window > Align) and choose the third option under the Align Objects header called Horizontal Align Right. Then click the last option under that same header called Vertical Align Bottom.
With both objects still selected navigate to the Pathfinder panel (Window > Pathfinder) then click the first option under the Shape Modes header titled Unite. Both objects should now be joined in to one. With the Selection Tool (V) still selected let’s rotate the shape 45 degrees. To do so, select the Selection tool (V) then position your mouse near any corner of the square and while holding the Shift key on your keyboard drag a corner on the right of the bounding box up until it looks like an arrow pointing to the right.
With the arrow selected navigate to the Appearance panel (Window > Appearance) and click the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Stylize > Drop Shadow and enter the options outlined in the screenshot below. We can also use the Selection Tool (V) to drag the arrow shape to the desired location in the bubble shape.
With the pop up. section completed enable the Selection Tool (V) and drag out a selection over all the pop up. objects to select them all simultaneously. Now go to Object > Group (Command + G) in the menu panel to Group these objects together. We can then drag this group above the indicator icon and center it so it looks like the screenshot below. And with that in place, we’re done!
I hope I was able to show you how to use the Appearance panel to create complex effects without the need for extra layers. Feel free to play with different colors as you see fit. With so many resolution independent devices floating around now-a-days it’s really great to be able to use infinitely scalable objects that can be used and reused in your app designs.
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন