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 8866.
In the following quick tip you will learn how to create a simple step by step progress bar using Adobe Illustrator. For the main shapes we’ll use some basic tools along with the Transform effect and some simple Pathfinder options. For the small details we’ll use some basic vector shape building techniques, several Drop Shadow effects and some simple blending techniques. In the final steps we’ll add the simple pieces of text and the little check symbol.
Open Illustrator and hit Command + N to create a new document. Enter 600 in the width box and 200 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). 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.
We’ll start with the background. Using the Rectangle Tool (M), set the fill color at R=235, G=235, B=235, create a shape the size of your artboard and open on the Appearance panel (Window > Appearance). Add a second fill for this shape using the Add New Fill button from the bottom of the Appearance panel. Select this new fill and add the radial gradient shown in the following image. The yellow zero from the gradient image stands for opacity percentage. Make sure that your rectangle is still selected, return to the Appearance panel and add a third fill. Select it, drag it in the top of the Appearance panel, set the color at black, lower its opacity to 4%, change the blending mode to Multiply and go to Effect > Artistic > Film Grain. Enter the properties shown below and click OK. Move to the Layers panel and lock this rectangle to make sure that you won’t accidentally select/move it.
Using the Rectangle Tool (M), create a 425 by 7px shape and fill it with black. Switch to the Ellipse Tool (L) and create a 27px circle. Fill it with R=205, G=205, B=205, place it as shown in the second image and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image, click OK and go to Object > Expand Appearance.
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. Reselect all the shapes made in the previous step, open the Pathfinder panel and click on the Unite button. Select the resulting shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px 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 and lower its Opacity to 20%.
Reselect the first shape made in the previous step and go to Object > Path > Offset Path. Enter a -3px Offset and click OK. Select the resulting shape, fill it with the linear gradient shown in the following image and bring it to front (Shift + Control + ] ).
Reselect the main shape made in the fourth step and go to Effect > Stylize > Drop Shadow. Enter the data shown in the left window, click OK and go again to Effect > Stylize > Drop Shadow. Enter the data shown in the middle window, click OK and go one more time to Effect > Stylize > Drop Shadow. Enter the data shown in the right window and click OK.
Reselect the shape made in the fifth step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white.
Reselect the shape made in the fifth step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 20%.
Reselect the shape made in the fifth step and go to Effect > Stylize > Drop Shadow. Enter the data shown in the left window, click OK and go again to Effect > Stylize > Drop Shadow. Enter the data shown in the right window and click OK.
Set the fill color at R=70, G=70, B=70, pick the Type Tool (T) and add some simple numbers as shown in the first image. Use the "Maiandra GD" font with the size set at 11pt. Make sure that all these numbers are selected and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the first image and click OK. Continue with the Type Tool (T) and add some bits pieces of text as shown in the second image. This time use the "Sakkal Majalla" font with the size set at 15pt. Select all these pieces of text and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the second image and click OK.
Enable the Snap to Grid (View > Snap to Grid). Grab the Rectangle Tool (M), set the fill color at R=57 G=181 B=74 and create a 3 by 6px shape. Continue with the Rectangle Tool (M), create an 8 by 3px shape and place it as shown in the second image. Select both rectangle and click on the Unite button from the Pathfinder panel. Select the resulting shape and go to Object > Transform > Rotate. Enter a 45 degrees angle and click OK.
Reselect the shape made in the previous step and go to Effect > Stylize > Rounded Corners. Enter a 1px radius, click OK and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image and click OK. Move to the Appearance panel and add a stroke for this shape. Make it 1pt wide and set the color at R=3, G=106, B=58. Finally, you can place this check sign as shown in the second image. Don’t forget to remove the little numbers behind.
Now your work is done. Here is how it should look. This element is a great one to include in your overall UI element portfolio and something which is easily customizable. Try it yourself and see!
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন