Quick Tip: Create a simple pen-tool free, file icon in Illustrator

Error in deserializing body of reply message for operation 'Translate'. The maximum string content length quota (8192) has been exceeded while reading XML data. This quota may be increased by changing the MaxStringContentLength property on the XmlDictionaryReaderQuotas object used when creating the XML reader. Line 1, position 8783.
Error in deserializing body of reply message for operation 'Translate'. The maximum string content length quota (8192) has been exceeded while reading XML data. This quota may be increased by changing the MaxStringContentLength property on the XmlDictionaryReaderQuotas object used when creating the XML reader. Line 1, position 9044.

In the following steps you will learn how to create a simple file icon in Adobe Illustrator. It’s a pretty simple tutorial that will introduce you to the basics of pixel perfect vector shape building techniques. For the starting shapes you will only need the Rectangle Tool (M), the Rounded Corners effect and some simple Pathfinder options. Next, for the coloring you will need a simple linear gradient, a bunch of flat colors and some simple blending techniques. In the final/extra step you will learn how powerful the Transform effect can be.

Open Adobe Illustrator and hit Command + N to create a new document. Enter 600 in the width box and 300 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.

Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). Next, you’ll need a grid every 1px. Simply go to Edit > Preferences > Guides & Grid, enter 1 in the Gridline every box and 1 in the Subdivisions box. You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement at pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Using the Rectangle Tool (M), create a 49 by 64px shape, fill it with R=210, G=212, B=214 and go to Effect > Stylize > Rounded Corners. Enter a 2px radius, click OK and go to Object > Expand Appearance.

Focus on the top, right corner of the shape made in the previous step. Using the Rectangle Tool (M), create a 22px square and place it as shown in the first image. Fill it with none but at a 1pt, black stroke. Make sure that this new shape is selected, switch to the Delete Anchor Point Tool (-) and simply click on the top, right anchor point (highlighted in the first image). This should turn your little square into a triangle as shown in the second image. Make sure that the Direct Selection Tool (A) is still active, select the bottom, left anchor point (highlighted in the second image) and hit the Delete key from your keyboard. In the end you should get a simple, oblique path as shown in the third image.

Select the oblique path and the rounded rectangle, open the Pathfinder panel (Window > Pathfinder) and click on the Divide button. Select the resulting group of shapes and Ungroup it (Shift + Control + G).

Select the smaller shape made in the previous step, fill it with R=190, G=192, B=194, bring it to front (Shift + Control + ] ) and go to Object > Transform > Rotate. Enter a 180 degrees angle and click OK.

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Select the little triangle shape edited in the previous step and go to Object > Path > Offset Path. Enter a -1px Offset and click OK. Select the resulting shape, make a Copy in front (Control + C > Control + F), select it and move it 1px up using the up arrow from your keyboard. Select both shapes made in this step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=210, G=212, B=214.

Reselect the triangle shape and go again to Object > Path > Offset Path. Enter a -1px Offset and click OK. Select the resulting shape, make a Copy in front (Control + C > Control + F), select it and move it 1px down using the down arrow from your keyboard. Select both shapes made in this step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white.

Select the bigger shape made in the fourth step and make a copy in front (Control + C > Control + F). Return to the triangle shape, select it and go to Object > Path > Offset Path. Enter a 1px Offset and click OK. Select the resulting shape along with the copy made in the beginning of the step and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 5%.

Reselect the triangle shape and focus on the Appearance panel (Window > Appearance). First, replace the flat color used for the fill with the linear gradient shown in the following image then add a 1pt stroke. Align it to inside and set the color at R=210, G=212, B=214. Select this triangle shape along with the other three shapes made in the last three steps and group them (Control + G).

Let’s move to the bigger, grey shape. Select it and go to Object > Path > Offset Path. Enter a -1px Offset and click OK. Select the resulting shape, make a Copy in front (Control + C > Control + F), select it and move it 1px up. Reselect both shapes made in this step and click on the Minus Front button from the Pathfinder panel. For the moment the resulting shape won’t be visible, so don’t worry if you can’t notice any change.

Reselect the grey shape and go to Object > Path > Offset Path. Enter a -1px Offset and click OK. Select the resulting shape, make a Copy in front (Control + C > Control + F), select it and move it 1px down and to the right. Reselect both shapes made in this step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white.

Reselect the grey shape and focus on the Appearance panel (Window > Appearance). First, replace the flat color used for the fill with the linear gradient shown in the following image then add a 1pt stroke. Align it to inside and set the color at R=210, G=212, B=214.

Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create a 47 by 1px shape, fill it with R=198, G=215, B=235 and place it as shown in the first image. Move to the Layers panel, select this thin rectangle, drag it below the group made in the ninth step then go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and click OK.

Using the Rectangle Tool (M), create a 1 by 60px shape, fill it with R=232 G=190 B=189 and place it as shown in the following image.

Using the Ellipse Tool (L), create two, 3px circles and place them as shown in the following image. Fill both shape with R=250, G=250, B=250 and add a 1pt stroke with the color set at R=210, G=210, B=210.

Using the Rectangle Tool (M), create a 49 by 3px shape, fill it the linear gradient shown below and place it as shown in the first image. The yellow zeros from the gradient image stand for Opacity percentage. Select this new shape, send it to back (Shift + Control + [ ) and lower the Opacity to 15%.

Select all the shapes created so far and Group them (Control + G). Finally, select this new group and add a simple Transform effect (Effect > Distort & Transform > Transform) as shown in the following image.

Now your work is done. Here is how it should look. Try playing with the Transform effect to create multiple different stacks of paper, be it organized in a pile or all mixed up.

View the original article here

Quick Tip: How to Create a Heart Illustration without the Pen Tool!

AppId is over the quota
Translate Request has too much data
Parameter name: request

In the following steps you will learn how to create a simple heart illustration. It’s a pretty simple quick tip that will teach you how to avoid using the Pen Tool when you’re looking to create a somewhat complex vector shape. We’ll start with two simple rectangles. Next, using basic Transform options, the Rounded Corners effect, a little script, some simple tools and the Warp Fisheye effect we’ll build the main heart shape. Moving to the coloring, we’ll use the Appearance panel, several linear gradients, Pathfinder options plus some basic effects and blending techniques. For the final touches we’ll use a simple Transform effect.

Hit Command + N to create a New document. Enter 600 in the width box and 400 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.

Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). For this tutorial you’ll need a grid every 5px. Simply go to Edit > Preferences > Guides > Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box. You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Using the Rectangle Tool (M), create a 90 by 150px shape, fill it with R=235, G=235, B=235 then make a Copy in Front (Control + C > Control + F). Select this copy and replace the light grey used for the fill with R=238, G=26, B=26. Move to the Layers panel, focus on the red rectangle and make it invisible by clicking on the little eye icon. You’ll need this shape later, but for the moment it’s better to keep it hidden.

Let’s focus on that grey rectangle. Select it and go to Object > Transform > Rotate. Enter a 45 degrees angle, click OK and go to Object > Transform > Reflect. Check the Vertical button and click on the Copy button. Obviously, this will create a horizontally, flipped copy of the grey shape. Select this copy and go to Object > Transform > Move. Enter 42.4px in the Horizontal box and 0px in the Vertical box then click OK. In the end your flipped rectangle should be placed as shown in the fourth image. Select both grey rectangle, open the Pathfinder panel and click on the Unite button. Using the Rectangle Tool (M), create a 125 by 60px shape and place it as shown in the sixth image. Select this new rectangle along with the grey shape and click on the Intersect button from the Pathfinder panel. The resulting shape should look like in the seventh step.

Focus on the Layers panel and turn on the visibility for that red rectangle made in the second step. Select it and go to Effect > Stylize > Rounded Corners. Enter a 45px radius, click OK and go to Object > Transform > Rotate. Enter a 45 degrees angle, click OK and go to Object > Transform > Reflect. Check the Vertical button and click on the Copy button. Select the newly created shape and go to Object > Transform > Move. Enter 42.4px in the Horizontal box and 0px in the Vertical box then click OK. Select both red shapes, go to Object > Expand Appearance then click on the Unite button button from the Pathfinder panel. Finally, select the red shape along with the grey triangle made in the previous step and click on the Unite button from the Pathfinder panel.

Next, you’ll need the Round Any Corner script. You can find it in the Vectortuts+ article 20 Free and Useful Adobe Illustrator Scripts. Save it to your hard drive, return to Illustrator and grab the Direct Selection Tool (A). Select the top anchor point highlighted in the first image and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 3px Radius and click OK. Continue with the Direct Selection Tool (A), select the bottom anchor point highlighted in the first image and go again to File > Scripts > Other Script. Open the Round Any Corner Script, enter an 8px Radius and click OK. Switch to the Delete Anchor Point Tool (-) and simply remove the anchor points highlighted in the second image.

Make sure that your red shape is still selected and go to Effect > Warp > Fisheye. Enter the properties shown in the following image, click OK and go to Object > Expand Appearance. Move to the Layers panel, double click on this red shape and simple name it "heart".

Select "heart" and make a copy in front (Control + C > Control + F). Using the Ellipse Tool (L), create a 185 by 90px shape and place it as shown in the second image. Select it along with the copy made in the beginning of the step and click on the Intersect button from the Pathfinder panel. Select the resulting shape and go to Object > Path > Offset Path. Enter a -3px Offset and click OK. Remove the original shape and focus on the newly created vector path. Select it, fill it with the linear gradient shown in the following image, lower its Opacity to 70% and change the Blending Mode to Overlay. The yellow zero from the gradient image stands for Opacity percentage.

Select "heart" and go to Object > Path > Offset Path. Enter a -3px Offset and click OK. Fill the resulting shape with the linear gradient shown in the second image, lower its Opacity to 10% and change the Blending Mode to Multiply. Reselect "heart" and make a Copy in Front (Control + C > Control + F). Select it, fill it with the radial gradient shown in the fourth image, lower its Opacity to 75% and change the Blending Mode to Multiply. Remember that the yellow zeros from the gradient images stand for Opacity percentage.

Disable the Grid (View > Hide Grid) and the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Select "heart" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px down using the down arrow from your keyboard. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 5% and change the Blending Mode to Multiply. Select "heart" and make a copy in front (Control + C > Control + F). Select this copy, move it 2px down using the down arrow from your keyboard then duplicate it (Control + C > Control + F). Select this new copy and move it 3px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white, lower its Opacity to 70% and change the Blending Mode to Overlay.

Select the second shape made in the previous step and go to Object > Path > Offset Path. Enter a -1px Offset and click OK. Select the resulting shape and increase its Opacity to 100%. Select "heart" and make a copy in front (Control + C > Control + F). Select this copy, move it 2px down then duplicate it (Control + C > Control + F). Select this new copy and move it 8px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white, lower its Opacity to 40% and change the Blending Mode to Overlay.

Select "heart" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px up using the up arrow from your keyboard. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 20% and change the Blending Mode to Multiply. Select "heart" and make a Copy in Front (Control + C > Control + F). Select this copy, move it 2px up then duplicate it (Control + C > Control + F). Select this new copy and move it 2px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white, lower its Opacity to 40% and change the Blending Mode to Overlay.

Select "heart" and make a Copy in Front (Control + C > Control + F). Select this copy, move it 4px up then duplicate it (Control + C > Control + F). Select this new copy and move it 3px up. Reselect both copies made in this step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image, lower its Opacity to 5% and change the Blending Mode to Multiply.

Select "heart" and make a Copy in Front (Control + C > Control + F). Select this copy, move it 4px up then duplicate it (Control + C > Control + F). Select this new copy and move it 11px up. Reselect both copies made in this step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image, lower its Opacity to 5% and change the Blending Mode to Multiply.

Select "heart" and make a Copy in Front (Control + C > Control + F). Select this copy, move it 4px up then duplicate it (Control + C > Control + F). Select this new copy and move it 18px up. Reselect both copies made in this step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image, lower its Opacity to 5% and change the Blending Mode to Multiply.

Select "heart", focus on the Appearance panel and add a 1pt stroke. Select it, set the color at black, align to inside and lower its Opacity to 10%. Make sure that your "heart" shape stays selected, keep focusing on the Appearance panel and add four new stroke using the Add New Stroke button (pointed by the little, blue arrow). Select the top, new stroke, make it 14pt wide, set the color at R=162, G=25, B=24, align it to inside and lower its Opacity to 5%. Move down to the next stroke, select it, make it 7pt wide, set the color at R=162, G=25, B=24, align it to inside and lower its Opacity to 15%. Continue with next stroke, select it, make it 3pt wide, set the color at R=162, G=25, B=24, align it to inside and lower its Opacity to 20%. Finally, select the bottom, new stroke, make it 1pt wide, set the color at R=162, G=25, B=24, align it to inside and lower its Opacity to 25%.

Select "heart" and focus on the Appearance panel. Select the fill and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the top, left window, click OK then add the other four Drop Shadow effects shown in the following image.

Select All the shapes created so far (Control + A) and Group them (Control + G).

Using the Rectangle Tool (M), create a shape the size of your Artboard, fill it with R=40, G=40, B=40 and send it to back (Shift + Control + [ ). Make sure that this rectangle stays selected, focus on the Appearance panel and add a second fill using the Add New Fill button (pointed by the little, blue arrow). Select this new fill, set the color at black, lower its Opacity to 15%, change the Blending Mode to Multiply and go to Effect > Artistic > Film Grain. Enter the properties shown in the following image and click OK.

Finally, select the group made in the seventeenth step and go to Effect > Distort & Transform > Transform. Enter the properties shown in the left window, click OK and go again to Effect > Distort & Transform > Transform. Enter the properties shown in the right window, click OK and you’re done.

Now your work is done. Here is how it should look. You can do a lot more with those Transform effects added in the final step. Simply add a different angle for the rotation and the outcome might surprise you.

View the original article here

Workshop: Vector criticism #31

VECTORTUTS + is about Turbo help people upload their skills, and today we have an other special Community body which will help our readers to take your images to the next level. The best is that you can to be a part of it! Learn on the go.

A work has offered this workshop participants, who would you like to help with, please note this when you want to share your thoughts. The images are not perfect, but they can be with the right advice and some friendly encouragement. (Vectortuts + reserves rude comments delete)If you're better with images (let's be honest, most of us) like a screenshot of the image with Little Snapper, Skitch or a similar program and add a link to the annotated image in the comment box with explanation he tweaks.

Add your work to our Facebook gallery or send it via the Tuts + workshop form with a description of the piece and the help/advice you are looking for that. We are elected on our website are published as part of the next Vectortuts + workshop, if they are not immediately - chosen, do not worry - your work is selected for a future session.

Information:

'Lip 'a' drip
I'm currently trying to mouth illustrations in an attempt to "Master" drawing a human mouth focus. Since I I have a fascination with "Goop" illustrations, and I'm also trying to perfect my technique in the creation of this.

I am looking for expert advice especially when the lighting/depth of the piece. Of course, I'd love to reviews about other aspects of the piece, but my main focus would be the lighting/depth. At the moment I a layer "Overlay" highlights use on "Multiply" layer for shade on a level with color. The overlay and layers multiply contained only white and black, makes it easy to change the color of the artwork and still maintaing the highlights and shadows. "

What are your thoughts on the above mentioned work? Criticism of the work helps the artists see new opportunities, and it also helps you learn, the art to assess, that helps you take the same analysis and apply it to your own work. Below in the comments with your opinions to improve the above work to participate.

View the original article here

Quick Tip: Create like iOS card counters with graphic styles

Translate Request has too much data
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.

View the original article here