Quick tutorial on how you can design you very own preloader in Illustrator

Quick-tutorialPreloader is a small image that appears mainly right before system or menu is displayed. It’s also used in flash websites or animations to tell the user how much of content is loaded.  Today I wanted to share with a few quick and easy ways to design your very own custom preloader.

1. Start by creating a new document in Illustrator. Doesn’t matter what size as this will be a vector and can be resized.
2. Show Grid by going to View>Show Grid or use shortcut ‘. Using the rectangular tool (M) draw a rectangular the size of 3.5 x 28 px and fill it with black. Using the Direct Selection Tool (A) click on the right bottom anchor and using the left arrow, more that anchor 3 time to the left. Do the same wit the right anchor but more it 3 times to the right. You should now have this shape.

3. Using the rectangular tool again (M) draw another shape size of 7 x 28px. Make sure this one contains no filling or stroke. Select both shapes and go to Windows>Align to reveal the Align Panel (if you don’t have it open already). With the two shapes selected, click Horizontal Align Center and Vertical Align Center icons to make sure the two shapes are aligned correctly on top of each others.


4. Open the Brushes Panel or go to Window>Brushes to open it and click on the the option arrow on the top right corner to open the options drop down. While the two shapes selected, choose New Brush.. then choose Pattern Brush and click OK. Another popup widow will open, you can give the brush a name but you don’t need to make any changes there. Click Ok.

screen03 screen04

5. Now you should be able to see the brush you just created in the brush list. Using the Ellipse Tool (L) hold the Shift key on your keyboard and draw a circle size 100 x 100 px or any size you want. Make sure the circle have no filling. Activate the stoke and use the new brush you just created as a stroke. it should look like this.


6. While the circle is selected, click on the new brush in panel. You shape should look like this.


7. Now change the stroke size to .5 pt to make the size of the brush a bit smaller. It should look like this.


8. Go to Object>Expend Appearance. That should give you a completely vector object. You now can resize it or color it as you want.

By using you creativity, you can create any shape you want. It could be a circle, arrow dash or whatever . I’ve created a few examples here:


Hope you enjoy it and as usual let me know what you think or if you have any questions.



Please only provide constructive feedback!

This entry was posted in Blog, Web Design and tagged , , . Bookmark the permalink.