![]() Select the white squares and from the Right click menu select Isolate Selected Group. We have grouped all the white squares together but we need to adjust that group of elements. ![]() We will be using a mix of white and light gray tones. We just need to find a great match of solid colors that will constitute the gradient. Linear gradients will help us to do that. We need to make it appear to stand out more. Set their Fill color to Black (#000000).Īs you can see, our checkered design looks a bit flat. Select the rest of the blue squares and Group them as well (Ctrl / Cmd + G). Select every second square and Group them (Ctrl / Cmd + G). Just look for it in the Layer Panel (Just scroll the list of layers down and remove the large rectangle). Underneath all of them there is a large rectangle we are going to remove. Now, we are going to Ungroup (Shift + Ctrl / Cmd + G) the group of squares. You should end up with nice even squares. We are going to set the numbers of tiles to 26 and 2. Now select Object > Create Object Mosaic. Under the Object select Rasterize, leave the default settings and hit the OK button. For this tutorial it will be W=168 and H=11. Just set them to the closest, lower round number. ![]() Select the new rectangle and make sure to adjust its dimensions under the Transform Panel (W and H). Make sure to open Transform Panel (Window > Transform). Now we are going to adjust the size of the new rectangle. Remove the Stroke color and set the Fill color to any color you like (color is not important). Just make sure to create a rectangle slightly larger then the loading part of the loading bar. Grab it from the Tool Panel and draw a rectangle as shown on the picture below. In this tutorial we will be creating a checkered pattern. It can be anything you want stripes pattern, grungy metal pattern,…anything you like. Now we need to create a nice pattern for our loading bar. Select both green shapes and under the Pathfinder Panel hit the Unite button. Make sure to move the green shape on the right to meet the one on the left side (don’t forget to hold the Shift key for the straight dragging). You should end up with something like this. ![]() Ungroup (Shift + Ctrl / Cmd + G) the divided shape and remove the middle part by hitting the Delete key on your keyboard. It will divide the yellow shape into three smaller shapes. Select both vertical lines and the copy of the smaller shape we have just created and under the Pathfinder Panel hit Divide button. Select the Line Tool (/) from the Tool Panel, create two vertical lines and place them as shown on the picture below (don’t forget to hold the Shift key on your keyboard for the straight dragging). Now we are going to create the loading part of the loading bar (the part that actually moves during the load).ĭuplicate the smaller shape (Ctrl / Cmd + C, Ctrl / Cmd + F). Select the basic shape from the previous step and under the Object select Path > Offset Path. That edge will increase the depth for our design element. Let’s create a small edge for the shape we have just created. We have created the basic shape for our loading bar. ![]() Make sure to set the dimensions as it shown in the picture below and hit the OK button. The Rounded Rectangle option box will pop up. Select it from the Tool Panel and click somewhere on the Artboard. There are a few different shapes of loading bar we can create, but for this tutorial we will be using the Rounded Rectangle Tool to create a basic shape. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |