Web graphics optimization
Graphic Information is much slower than text, and the loading time of images is proportional to the size of their graphic files. That's why fast loading Web pages require a small size of graphic images embedded in them, which is achieved through their optimization. Image optimization is understood as its transformation that provides the minimum file size while maintaining the image quality required in this case, which is achieved primarily by reducing the number of colors in graphic images, using compressed and special file formats, and optimizing compression settings for individual image fragments.
Illustrator has built-in image optimization tools that provide various methods preview fast and efficient optimization process. Preview gives a fairly accurate idea of how the optimized image will look like in real time, which helps to evaluate the optimization result and choose the right one desired settings. And you can optimize both images created directly in Illustrator, and others, such as photos that you intend to put on a Web site.
Optimization parameters are set in the window Save for Web(Save for Web), called by the command of the same name from the menu file(File). The program offers to use one of four preview modes, but two are best for evaluating the quality of optimization:
- 2-Up(two options) simultaneous viewing of the original and the optimized image in accordance with the specified settings (Fig. 1);
- 4-Up(four options) in this mode, the viewing area is divided into four windows (Fig. 2) to display original image and three optimized versions: the first version is generated based on the set optimization values, and the other two are variants of the current optimization settings.
Both modes allow you to significantly save time on finding the best optimization option, as they eliminate the need to save images from different settings optimization and their subsequent visual comparison. In addition, it is possible to evaluate not only the quality of the optimized image, but also its size and download time for different connection options. For comparison, the most convenient mode is 4-Up (four options), which allows you to visually evaluate the impact of compression or palette reduction on image quality and size, and ultimately determine the best optimization parameters.
Illustrator lets you optimize Web graphics not only in GIF, JPG, PNG-8, and PNG-24 formats, but also in SWF and SVG. Indexed images that have a small number of colors are saved in GIF format. To save full-color and grayscale images photos and color-rich graphics such as gradient fills the JPG format is used. For full-color images with transparent areas, apply PNG format, which allows you to save both indexed and full-color images, while in PNG-8 the maximum possible number of colors of an optimized image is 256, and in PNG-24 an image can have millions of colors, and therefore it looks like jpeg format. The difference between PNG-24 and JPEG is that the compression method used to optimize PNG-24 images does not result in loss of quality, but it does increase the file size. The SVG and SWF formats combine graphics, text, and interactive components and can also be optimized.
Consider specific example image optimization. Let's say, in the Illustrator program, a site emblem was developed (Fig. 3), originally saved in AI format. An attempt to immediately optimize it for the Web will not lead to anything good, since in this case the image will be automatically cropped, which will not take into account the true position of the inscription obtained as a result of deformation (Fig. 4 and 5).
Therefore, let's try to export the logo to PSD format team File=>Export(File=>Export) The size of the generated image will be 143 KB. Open the resulting PSD file and use the command File=>Save for Web(File=>Save for Web). Given the limited number of colors involved in the image, in this case, the GIF format is optimal, with the specific settings of which you need to decide. By experimenting with the settings, you can see that best quality gives the program's default compression algorithm selective(Selective). As for smoothing, then, given the presence of a gradient fill, it is better to choose an algorithm with noise generation noise(Fig. 6). The size of the resulting optimization file will be 6.729 KB (Fig. 7), while the background transparency will be preserved, which is easy to verify by saving the GIF image along with the HTML file (Fig. 8). As a result, in this example the files emblem.html and emblem.gif were obtained in the folder Primer1 .
Buttons
An indispensable specific design element of any Web pages are graphical controls buttons. It is simply impossible to imagine a page without them. Drawing buttons today has become a special genre, and Illustrator allows you to create the most intricate options. For example, buttons designed as grid objects and (or) with masks look much more effective than usual ones.
Consider the option of creating a round raised button in Illustrator. Draw a vector object filled with an arbitrary color in the form of a circle (Fig. 9) and convert it to a grid using the command Object=>Create Gradient Mesh(Object=>Create Gradient Mesh) by specifying four rows and four columns, and in the list Appearance(View) by selecting an option To Center highlight(Backlight) to 60 (Figure 10). Choose a tool Direct Selection and click on the left upper corner object, highlighting the nodal points located there (Fig. 11). Change the color of the corresponding cell to white by selecting it in the palette Swatches(Fig. 12).
Take a tool Ellipse(Ellipse), set the mouse marker to the center of the circle created before and, while holding down the keys alt And Shift, stretch the new circle on top of the old one so that it is larger than the old one by 1-2 pixels on all sides. Make it a black border Stroke) 1-2 px wide and fill it with a radial gradient from red to white (Figure 13). Drag the created vector object 1-2 pixels to the right and down, then, without removing the selection, right-click on it and select the command from the context menu Arrange=>Send To Back(Organize=>Send back). As a result, we get a blank for the button shown in Fig. 14.
As a rule, on any Web page there are several buttons of the same type, differing, for example, only in the direction of the arrows drawn on them, which indicate the direction of moving around the site. Consider the simplest case of having two buttons, one of which, with a down arrow, means moving to the next page, and the button with an arrow up to the previous one. As a blank for the arrow, let's take a regular triangle drawn with the tool Polygon(Polygon) filled with black and also styled as a mesh object for greater effect. Move the arrow to the button and adjust the position of all objects relative to each other using the corresponding palette buttons Align(Alignment). The first of the received buttons is shown in fig. 15. Make a copy of the layer with the button by selecting the command Duplicate Layer Layers, as a result, we obtain two identical layers. Then select the arrow on the copy of the layer and rotate it by 180° by selecting the command from the context menu Transform=>Rotate Transformation=>Rotate. We get the same button as shown in Fig. 16. Please note that it is much more convenient to store all the same type buttons of one project in one file on different layers, which is demonstrated in this case.
Now you need to save the optimized options for each of the buttons. Make the bottom layer invisible first in this case the button on the top layer will be kept. Choose a team File=>Save for Web(File=>Save for Web), configure the button optimization parameters, for example, as shown in fig. 17, click the button Save(Save) and enter a file name. The button saved as a result is shown in Fig. 18. Now make the bottom layer visible, make the top layer invisible, and save the second button in the same way, giving it a different name. The result is shown in fig. 19.
Now all that's left is to make sure the buttons look good on the Web page and place them on a custom page (Figure 20). As a result, in this example, the Primer2.html file and two graphic images were obtained in the images folder (folder Primer2).
If desired, during the optimization process, the button can be easily turned into a slice. In this case, after choosing the command File=>Save for Web(File => Save for Web) and optimization settings should be selected from the tool palette tool Slice Select(Slice selection) and double-click on the image, which will automatically turn into a slice with serial number 1 (Fig. 21). Repeated double click mouse will open a window Slice Options(Slice Options), in which you will need to specify a link and, if desired, change the name of the slice (Fig. 22), and then save the optimized image. The result in this case will be the files Primer3.html (Fig. 23) and Primer3.gif (Primer3 folder).
Interactive elements
One way to spice up a page is to introduce design elements that change their appearance(or state) depending on the behavior of the mouse or, more rarely, in case of any other situations: zooming, scrolling, loading, errors, etc.
Among these elements, the most famous are rollovers (from the English roll over to roll, roll over) elements that change their appearance under the influence of the mouse. Animated buttons are examples of typical rollovers. Rollovers are often used when creating other site navigation elements. In fact, any rollover is not one, but several (up to four) images, each of which corresponds to a specific event. The main events are considered to be the following: Normal normal state, Over hovering the mouse cursor over the element and Down pressing the left mouse button when hovering over it. Theoretically, events such as Click releasing the left mouse button after clicking, Up after releasing the button, Out when leaving the active zone can be involved. However, in practice, it is more often limited to changing the element only for the first three or even two events.
Classic rollovers
In the classical sense, a rollover is a series of graphic images in GIF format and their corresponding HTML code, thanks to which, depending on the behavior of the mouse, one image replaces another in the browser window.
Illustrator is not designed to directly create rollovers in the classic sense, but it can help with the development of the initial elements for them. The idea in this case is to create a layer with an image corresponding to the first event. Then make a copy of the layer and transform the image to match the second event, and so on. The resulting layered image is exported to a PSD file with layers preserved, on the basis of which a rollover is created in Image program Ready. The advantage of using Illustrator, as in many other cases, is a number of its interesting features that are not available in other software tools, combined with the convenience of vector graphics transformation.
Let's try to create a rollover in the form of an inscription that changes color depending on the behavior of the mouse. Open Illustrator and create a shape in the form of a rounded and filled with black rectangle (Fig. 24), make a copy of it and place it in a free part of the screen. Convert the first copy of the rectangle to a grid object with a highlight in the center (command Object=>Create Gradient Mesh Object=>Create Gradient Mesh), specifying four rows and ten columns (Fig. 25). Activate the second copy of the rectangle and set a gradient fill for it, similar to the one shown in fig. 26. Overlay the gradient object on top of the mesh, reduce the opacity of the gradient object to about 80%, and the size of the gradient object to about 1 pixel to simulate a bulge effect in the end. And then over the objects print the inscription. In its original form, let it have a white color that will correspond to the Normal state (Fig. 27), and then when the rollover state changes, the color of the inscription will change, for example, to green when the mouse marker is hovered over it (Over state) and to blue when the mouse button is pressed (Down state).
Pay attention to the palette Layers at this stage, it has only one single layer. Make two copies of this layer using the command Duplicate Layer(Duplicate Layer) from the palette menu Layers, there will be three layers in the palette (Fig. 28). Then, in the first copy of the layer, change the color of the inscription to green, and in the second to blue (Fig. 29). As a result, the necessary blank for rollover will be obtained.
Export the created image to PSD format with layers preserved using the command File=>Export(File=>Export) and selecting the RGB color model (Fig. 30). Open the generated PSD file in ImageReady (Figures 31 and 32). Create frames based on layers by choosing the command Make Frames From Layers(Create Frames from Layers) from the palette menu Animation. The Animation window will look like in fig. 33. At the same time in the palette Rollovers Initially, a single Normal state will be created.
Then in the window Animation select the frame corresponding to the hovered state, while in the palette Layers the layer is automatically selected Layer 1 Copy(Fig. 34). Go to palette Rollovers and click on the button Create Rollover State(Create rollover state) fig. 35, which will cause the state to appear Over State in the palette Rollovers(Fig. 36). Create the state in the same way Down State. Activate State Normal in the palette Rollovers and delete in the palette Animation all frames except the one that should match the state Normal. As a result, for each rollover state in the palette Animation there will be only one frame (Fig. 37, 38 and 39).
Rice. 38. View of the image, the Animation window and the Layers and Rollovers palettes for the Over State
Check the result by clicking on the button Preview in Default Browser(Browser Preview) on the toolbar and by going to the browser window (Figure 40). After that, save the file using the command File=>Save Optimized(File=>Save with optimization) and specifying the option HTML and Images (*.html). As a result, in this example, the Primer4.html file and a series of graphic images in the images folder were obtained.
Rice. 40. Browser window with Rollover element
SVG rollovers
Gaining popularity SVG format(Scalable Vector Graphics scalable vector graphics), created on the basis of the XML standard, also allows you to get a variety of interactive elements, in particular rollovers, only in practice this is implemented in a completely different way. It is worth noting that the creation of interactive SVG rollovers, unlike the classic ones, when the corresponding HTML code is generated completely automatically, requires knowledge JavaScript language and understanding the basic principles of object-oriented programming.
A special palette is designed to work with SVG objects. SVG Interactivity, which is easy to open with the command Window=>SVG Interactivity(Window=>SVG interactivity) fig. 41.
Consider this option creating a rollover on the example of an interactive button, the color of the label on which will change from black to blue when the mouse is hovered over and turn back to black when the mouse leaves the active area.
Create a rectangular button with rounded edges and choose a suitable gradient fill for it, for example, as shown in fig. 42. Adjust the transparency of the button in the palette Transparency(Transparency) in this example, the value of the parameter Opacity(Opacity) is set to 50%. Make a copy of the button, fill it with dark green (Fig. 43), and then convert it to a mesh object with the command Object=>Create Gradient Mesh(Object=>Create Gradient Mesh) by specifying four rows and ten columns, and in the list Appearance(View) by selecting an option To Center(Towards the center) and setting the value highlight(Highlight) to 100. Lower the opacity of the mesh object layer to about 40% (Figure 44). Place the mesh object on top of the gradient object, and the button will look like the one shown in Fig. 45.
Rice. 44. Turning a Copy of a Button into a Grid Object
Complete the button with the intended inscription and adjust its position using the corresponding palette buttons Align(Alignment). The resulting image will contain one layer with three objects superimposed on each other (Fig. 46). Scheduled events will refer to a text object, so for convenience, change its name to Text by double-clicking the object and entering a new name. Similarly, change the layer name from Layer 1 to Layer(Fig. 47).
Event processing involves the use of JavaScript procedures, so you need to include a file with a description of these procedures. It is called Events.js and is saved to disk in the Sample Files\Sample Art\SVG\SVG folder when Adobe Illustrator is installed. To include the Events.js file, use the command JavaScript Files SVG Interactivity(Fig. 48). Next, you need to press the button Add(add) and find desired file on the hard drive. When his name appears in the field URL(fig. 49), click on the button Done(Go out).
Rice. 48. Selecting the JavaScript Files Command
After that, you should define the reaction to mouse events for the object Text. Select the Text object, in the field event(Event) palettes SVG Interactivity select an event onmouseover elemColor(evt, "Text", "#3333FF") this will mean that when the mouse is over the object Text its color will change to blue (Fig. 50). In order for the text color to change to black after the mouse leaves the active zone, you need to create one more event onmouseout select it in the field event(Event) palettes SVG Interactivity. Then in the action line enter the text elemColor(evt, "Text", "#000000") this will return black (Fig. 51).
Rice. 51. The final look of the SVG Interactivity palette for the Text object
Save the generated rollover as an SVG file with the command File=>Save as(File=> File type format SVG, and then setting the options for saving the SVG file as shown in fig. 52. After saving, only one single file with the SVG extension will be obtained, and not two, as in the case of the classic rollover, in this case, the Primer5.svg file (Primer5 folder) was obtained. However, in order for the rollover to really work, you must additionally copy the Events.js file with the description of JavaScript procedures to the folder with the SVG file. After that, you can check the performance of the rollover the result will look like as shown in Fig. 53.
SVG animation
The SVG format can also be used to convey animation. Let's try to create a simple animation element (in this case, it will be information about the company), which will appear on the screen when the mouse is hovered over the corresponding graphic object and disappear when the mouse is removed from the interactive element.
Let's create approximately such a series of graphic and text objects, as shown in Fig. 54. Rename all the created objects in a convenient way by successively clicking on the name of the next object in the palette Layers and entering the desired name (Fig. 55). Note that highlighted in Fig. 56 items Text1, Text2, Text3 And Path1 will always be visible, and all others only when you hover over the object Text1.
Rice. 54. Original view of the image
Include the Events.js file with a description of JavaScript procedures by using the command JavaScript Files(JavaScript files) from palette SVG Interactivity by pressing the button Add(Add) by selecting the desired file on the hard drive and clicking the button Done(Go out).
Define a mouse event response for an object Text1. Select object Text, in field event(Event) palettes SVG Interactivity select an event onmouseover and in the line below enter the text elemShow(evt, "Text4"); elemShow(evt, "Path2"). As a result, when the mouse is over the object Text1 objects will become visible Text4 And Path2. Please note that if several actions must be performed when an event occurs, they must be specified through the “;” sign. Then do the same for the event onmouseout, entering the text for it, which will mean hiding objects (Fig. 57).
Save the result as an SVG file with the command File=>Save as(File=>Save as), specifying the file name, selecting in the field File type SVG format, and then setting the options for saving the SVG file in accordance with Fig. 58. After saving, the Primer6.svg file (Primer6 folder) will be obtained. Do not forget to copy the Events.js file to the folder with this file. If after that you run coz given file, you will see the result shown in Fig. 59. This is almost what you need. The only thing that was not included in our plans was the initial appearance of objects Text 4 and Path 2 when loading. To get rid of this shortcoming, select both these objects at once and create an action for them elemHide(evt, "Text4"); elemHide(evt, "Path2") on event onload(Fig. 60). Save the file again and make sure the objects are now Text4 And Path2 visible only when hovering the mouse over the object Text1.
GIF animation
Any Web page is unthinkable without Web animation, including animated gifs. One way to create them is to use the Adobe ImageReady application, which, among other things, allows you to create animation from layers. In this case, the multilayer image itself can be prepared in different applications, including in Adobe Illustrator.
It is very easy to create an animation based on elements from the palette Symbols(Symbols) opened by the command Window=>Symbols(Window=>Symbols) or from one of the symbol libraries that can be opened using the command Window=>Symbol Libraries(Window=>Symbol Libraries).
For example, let's try to increase the size of any object-symbol, the key stages of the process of increasing the object must be set on separate layers. First, simply place the symbol objects one above the other, and then increase the size of each subsequent object, for example, as shown in Fig. 61. As a result, in the palette Layers one layer with many objects will be created (Fig. 62). If you directly export this image to PSD format, then this will not work, since there is only one layer, and naturally, when you open the PSD file in ImageReady, there will also be only one layer. Therefore, you must first place objects on different layers. This can be done different ways the easiest way is to first select the layer Layer 1 in the Layers palette and use the command Release to Layer(Release in layers). The result will be moving each of the objects to its own layer, but they will all be nested in the layer Layer 1. Therefore, you will then have to manually drag all nested layers to the top of the Layers palette so that they are above the layer Layer 1, and then the empty layer Layer 1 easy to remove (Fig. 63). Export the image to PSD format using the command File=>Export(File=>Export) with settings as in fig. 64.
Load the created PSD file in the ImageReady program (Fig. 65 and 66). Open the palette menu AnimationMake Frames From Layers(Create frames from layers). As a result, five frames will be created, each of which will correspond to its layer, and the palette window Animation will look like in Fig. 67.
After that, set the duration of each of the created frames in this case, the duration of all frames is set to 0.2 s. And then save the optimized animation with the command File=>Save Optimized(File=>Save with optimization). The result obtained may resemble Fig. 68.
It is even more convenient to use the functions Live Blends Illustrator software. This combined use of Illustrator and ImageReady significantly speeds up the process of creating GIF animations.
For example, draw two arbitrary multi-colored objects, and then blend them with the appropriate parameters (Fig. 69). It is impossible to use this file directly to create an animation, since the image is located on a single layer (Fig. 70). Therefore, you will first need to place each element of the blend object on a separate layer. To do this, in the window Layers highlight the line
Rice. 70. Initial state of the Layers window
Export the created file to PSD format with the command File=>Export(File=>Export). Open the created PSD file in ImageReady (Fig. 73). Please note that all the layers created in the Illustrator program will appear in the layers window (Fig. 74), and in the window Animation there will be only one frame.
Activate the palette menu Animation, by clicking on the black arrow in the upper right corner of the palette, and choose the command Make Frames From Layers(Create frames from layers) in the end, in this example, five frames will be created, and the palette window Animation will take the form in accordance with Fig. 75. Select all frames by holding the key Shift, and set a suitable frame duration in this example, the same time of 0.2 s is taken for each of the frames. Then save the file with the optimization command File=>Save Optimized(File=>Save with optimization) setting in the list File type option Images Only (*.gif). The animation will resemble Fig. 76.
Much more interesting is not the movement, but the smooth resizing of blend objects. For example, you can use the already created blend transition. In this case, after creating separate layers for each element of the blend transition, place all objects on top of each other using the buttons Horizontal Align Center(Alignment relative to the horizontal center) and Vertical Align Center(Vertical center alignment) palettes Align(Fig. 77).
Export the created file to PSD format ( File=>Export File=>Export) and open the created PSD file in the ImageReady program (Fig. 78). Create animation frames based on layers ( Make Frames From Layers Create frames from layers) and choose the appropriate duration for them (Fig. 79). And then, to make the animation more effective, copy the existing frames, but in reverse order so that the image first increases and then decreases, and so on in a circle (Fig. 80). Then save the optimization file ( File=>Save Optimized File=>Save with optimization). The resulting animation is shown in fig. 81.
Rice. 80. State of the Animation window after duplicating frames
Rice. 81. Finished animation
Hi all! Today I will try to make a description of the features of the program Adobe Illustrator, comparing it with the capabilities of the flush. This will not be a global analysis of the bone program, but rather a description of some of the interesting chips that I discovered in this program. I collected information piece by piece as I studied it in order to put it all in one post. I must admit right away that I am not a super-experienced illustrator user, only for the last six months I have been using it in drawing (before that, I drew everything in flash). Many complain that the illustrator is complex, not always intuitive. To some extent, I agree that after the flash, this program is difficult. But the main thing here is not to quit, but to continue studying. And after a couple of weeks, the thought arises, how did I manage without it before!
So, what I liked about illustrator, and what I found for myself that is not in flash.
1. I'll start with the simplest, but at the same time necessary. Try to arrange objects in a circle in flash. Previously was Deco Tool, but it was removed, apparently considered unnecessary. We decided that it would be more fun to do it by hand. Illustrator has this feature: Effect - Distort&Transform - Transform.
Everything is fast and simple, we set the values (distance between objects, number of copies) ourselves in the settings.
2. Zigzag
Even more simple, but nevertheless useful thing. It would seem a trifle, but in flash you have to draw by hand, in illustrator this is a matter of seconds.
3. Deformation of objects (Warp)
There is nothing like this in Flash. In the example below, I showed only 2 ways to deform simple shapes (Effect - Warp - Arc / Fish). Actually there are 15 of them. latest version programs.
4. Automatic rounding of corners (Round Corners)
It can be done manually: on a graphical object, when selected in a corner (in all corners), a white dot and a rounded line sign appear. Drag the mouse, adjust to your taste.
But this only applies to shapes, with a pencil line a little differently - apply the rounding effect ( Effect - Stylize - Round Corners). At the output we get the same result.
5. Roughen
The effect is applied to simple shapes ( Effect-Distort&Transform-Roughen). As a result, we get something resembling low-poly 3D models. I think it's cool :) And most importantly - very simple.
6 Pucker&Bloat(Pull in and Inflate)
An example in the picture below:
7. Form extension (Offset Path)
In the flash there is a function Expand Fill (fill extension), it does not work with pencil lines at all, unlike illustrator.
8. Brushes (Art Brush, Pattern Brush, Scatter Brush)
See the picture below for examples:
9.Texture Brush (Texture Brushes)
There are also many texture brushes in illustrator that I wrote about and how they appeared in the new version of flash - . It has been noticed that the use of brushes in Adobe Animate is terribly slow. That's it:(
10. I'm not sure if this is a trick, but I want to focus on a brush with a funny name blobBrush. Located on the toolbar, a very nice brush to use. It has a bunch of settings, I like it more than usual. It’s hard to explain its benefits in words, it’s better to try it once.
10.Split to Grid
Another useful feature is the Split to Grid (Object-Path-Split to Grid) function. It allows you to cut the form into equal segments. What does this remind us of? That's right - windows in a high-rise building. As for me, a cool thing for drawing, for example, urban landscapes;)
Another one useful tool, presented in illustrator, probably since its first release. With it, you can create, for example, wood textures:
12. Move (right - Transform - Move)
Offset an object by a given distance. If desired, you can immediately create a copy that will be placed at the desired distance from the selected object horizontally / or vertically. An earlier version of flash had a plugin that did this function. Unfortunately, I don't remember its name.
It is very convenient to create seamless patterns in illustrator ( Object-Pattern-Make). I remember how I frantically excelled in flash with the creation of . In the illustrator version of CC 2015, everything is automated, a bunch of settings will help you create a pattern in dozens of variations, with just a few graphic elements at hand. In earlier versions of the program, everything had to be done manually, as in flash so far.
(Note - the pattern can be made a vector editable object using the parse function ( Object-Expand Appearance).
14. Object Mosaic (Mosaic)
Create a color palette based on an existing image. Import the picture you like into the illustration (Open), then Object - Create Object Mosaic. In the settings, we specify the division frequency in height and width.
And at the output we get:
15.Blend (Mixing)
Used to create gradients. You can create step-by-step transitions, as, for example, in the picture. I can't say that I use it often, but it might come in handy for someone. It seems to me that it can be used in creating simple background pictures.
The tool can also be used to clone objects. We place two objects at a distance from each other and apply Blend Options, select the number of steps (the number of cloned objects).
16. Build Shape Tool. A very handy thing for working with primitives. In a flash, as it seemed to me, it is less convenient.
Holding Alt and clicking on the selected segments - delete the segments. If we simply drag the mouse over several selected areas - connections.
Addition - a tool that helps to automatically cut, connect, etc. selected forms. As for me, it is not very convenient, I use it more often Buildshapetool.
(artboards)
18.Custom Tool Panel
The ability to create your own toolbar, discarding unnecessary ones, and select only those that you use.
In flash, artboards, namely scenes ( Scene 1,2,3..) are located separately and you need to switch between them (Shift + F2). In illustrator, they can all be positioned before your eyes. It is convenient when you make several versions of the same drawing, so that all options are in front of your eyes for comparison.
19. Isometric with Graphic Styles
And the last thing is the creation of isometry without using 1 click (or rather, 3 clicks, because we have 3 sides;) using graphic styles ( Graphic Styles). How this is done, I will write next time.
What illustrator has in common with flash is the ability to save an object into a symbol (symbol) and this symbol can also be transferred to flash without problems (open an .ai file in flash, by Import - Import to stage).
The symbol in illustrator has the same properties as in flash.
And in the end, I’ll write what in illustrator, in my opinion, is inferior to flash. Yes, yes, and there is. And this is the fill tool ( paint bucket). No matter how hard I try to get used to it in illa, it is more convenient in flash.
If my notes have become useful for you or if you want to add something on your own - wellcome in the comments! Good luck to all;)
You have one or two icons that you would like to bring to life with animation. Where would you start? Let's say you have SVG files, Illustrator CC and After Effects CC, but the solution eludes you.
In this article, I'm going to show you how to easily animate an SVG file, including preparing the SVG file in Illustrator and importing it into After Effects CC. I will also explain how you can convert it to Shape Layers and add movement. And finally, let's talk about exporting and rendering.
The end result of the work.
Now let's get down to the most interesting part - learn how to animate images.
Preparing the SVG file in Illustrator
Let's start by opening your SVG file in Adobe Illustrator CC. I'll be animating a small car icon which is available for free on Week Of Icons.
After opening the file, we need to ungroup and separate all objects into layers. You can do it manually or use Release to Layers (Sequence) to speed up the process. Before we import the file into After Effects, we need to save it as an Illustrator file format.
We can ungroup objects using Release to Layers (Sequence) so as not to waste precious time. Importing and organizing a file in After Effects CC
You are now ready to import into After Effects CC. Let's use keyboard shortcut Ctrl+I (Windows) or Command+I (Mac) to load dialog box import file, or go to File > Import > File… In the same place, select the Illustrator CC file we prepared and click import. A small dialog box should appear with the name of the selected file. Select composition from the drop down list called Import Kind.
More fast way importing a file - double-click on the place of the column on the project panel. In the Timeline Panel, we will see the new composition. We double click on it. We should now see Illustrator CC layers with orange icons to the left of their names.
Before we get down to business, we need to convert all these layers to shape layers. We need to select them all with Ctrl+A/Command+A, or manually using Shift + Left Mouse. After that right click on the layer and select Create > Create Shapes from Vector Layer.
Now that the new layers are selected, drag them to the top of the panel above the Illustrator CC layers, and then delete the Illustrator CC layers so they don't get in the way.
Converting Illustrator CC Layers to Shape Layers in After Effects CC While not necessary, it is important that we give each layer an appropriate name and/or color. This will allow us to work more efficiently as we focus on keyframes. In the example below, the label colors more or less match the fills of their respective layers.
Labeling Shape Layers with appropriate names, colors, labels, and positions is very practical. Use the keyboard shortcut to configure settings Ctrl+K/Command+K or Composition > Composition Settings… From the Composition Settings, we need to select the Width, Height, Frame Rate, and Duration for the Width, Height, Frame Rate, and Duration. For this project, I chose 60 fps to keep the animation smooth.
At this point, everything seems to be ready to go, but there is one more thing that needs to be done. We need to group certain layers together so that their movements are in sync with the main layer that we can control. This method is called parenting.
Use Pick Whip to assign a parent layer to multiple layers. In our example, I assigned less significant layers (child layers) such as windshield, body parts, wood and ropes to the primary body layer (parent layer). This allowed me to control the position and rotation of the entire car (excluding the wheels) using the parent layer.
Animation creation
I wanted the car to hit a rock and hang in the air for a bit. I also wanted the tree to move up and down and open the trunk. I started by building the stone, the car and the wheels. Then it was time to get over the biggest hurdle - putting the action on the tree. Once that was done, I got to work on the little details like the rack and the ropes.
Sketch describing the animation The first step was to make a rock element or layer, but instead of going back to Illustrator CC to add another layer, I just used the Pen Tool in After Effects CC. This allowed me to quickly design a small stone.
Oh, mighty Pen Tool! The trunk was a relatively simple task. I installed it at the back of the car and made an anchor point at the bottom left vertex. Using Pick Whip , I assigned it to the body's parent layer. The penultimate step was to give the effect of rotation, which in turn made the bouncing moment of the car more realistic. Bodymovin in combination with the Lottie mobile library.
P.S. you can find my Illustrator CC and After Effects CC files.
The icon set is available for free download at .
Today we have not quite the usual Adobe tutorial Illustrator. Because this time we will not make a static picture, but a real animation. Imagine, it turns out that with the help of Adobe Illustrator you can also draw cartoons :)
And we need nothing for this. Competent organization of layers and export of the final work to swf format, where each layer is converted into an animation frame. In today's tutorial we will draw a countdown animation in retro movie style. The output should be a flash movie with this same countdown.
The first thing to do is to draw all the necessary elements for future animation. To do this, I made two film frame positions in a separate document, a circle for reference, which is cut into separate sectors, a texture and a vertical scratch to add the effect of antiquity, as well as all the numbers and inscriptions.
When all the parts of our cartoon are ready, you can start creating the animation itself. For convenience, this is best done in a new document. In this case, the layers will play the role of animation frames. And in the very first layer, you just need to copy the frame of the film. Position it in the middle of the work area.
Now create a second layer and copy the film frame into it, in which the holes at the edges are made with a shift. It also needs to be centered.
From these two layers, you can already get the animation of a moving film. But later we will need a lot more layers. So select the first two layers, go to the panel options and make a copy of the layers.
In a similar way, we need to accumulate 12 layers with film frames that define its movement.
Now we have a whole bunch of layers and they are all visible. In the sense that the upper layers block the lower ones, which is not very convenient for work. Therefore, you can turn off some layers by clicking on the eye icon to the left of the layer name. To turn all layers off or on at once, hold down the Alt key while clicking on the eye icon. Turning layers on and off, you can see exactly what is located in a certain frame of our future animation. And now, in order for us to add a slight shake to the film movement, we need to move the received frames a little bit in different sides. To do this, turn on only the layer with which you are going to work at the moment, and then shift the frame by a couple of pixels in any direction.
When you have gone through all the layers and added a little shift, you can start creating the animation of the moving circle. To do this, copy the circle consisting of sectors from the cartoon parts document and place it on the first layer on top of the film frame.
If you remove the selection from the circle, then it will look like a single whole. This is exactly what we need.
But since it consists of separate sectors, it is possible, by changing their color, to create animation very quickly and easily. To do this, copy this circle to the second layer and make the first sector lighter. You remember that the film shakes during movement, so it is not necessary to put the circle exactly in the center of the frame. Place it on the eye.
Similarly, you need to copy the circle to each next layer, while painting with a lighter color one sector more than the previous time. Together, these 12 layers form an animation of the movement of the film with a filling circle.
Next we need to add texture to our layers. Turn on the first layer and copy the texture from the source file with spare parts there.
Then turn on the next layers in turn and copy the same texture there. To make it look different on every frame, just rotate it 90 degrees. As you may have guessed, we need to add texture to all 12 frames.
If you are already rather tired of copying, then I can please you - there is very little left. The hardest part is over. It remains to add vertical scratches, and almost everything. To do this, again, copy the original scratch and put it in an arbitrary place in several layers. In my case, scratches appear in just two layers.
Now that the main cycle with the film animation is ready, it remains to add the numbers. Since we are counting from 3 to 1 plus the word Go!!!, we need even more layers. Not 12, but as many as 48. To do this, you need to make three more copies of ready-made layers with film animation.
And then everything is simple. Turn on the very first layer and put the number three there.
Then you need to copy this figure to the next layers until the circle animation ends. When you get to the next copy of the layers, where the circle will again be completely filled, you need to put the number two. In the same way, copy the number one into the desired layers. And when you get to the final layers for the Go!!! label, simply delete the circle before copying the label onto the desired layer.
That's all with animation. The main thing here is not to get confused. You can give the layers some convenient names, but I was somehow too lazy :) And yet, when you are done, be sure to turn all the layers back on by clicking on the eye icon.
In the export settings window, be sure to set Export As: AI Layers to SWF Frames. It is this option that turns Illustrator layers into animation frames. Next, click the Advanced button.
Will open additional settings. Here you need to set the Frame Rate. I have 12 frames per second. The Looping checkbox is responsible for cycling the animation. Thanks to her, the video will play in a circle. And the option Layer Order: Bottom Up renders the illustrator layers from bottom to top in the panel. This is exactly how we built our animation.
As a result, we get a flash movie with our animation.
Now you see that simple animation doing in Adobe Illustrator is not so difficult as it seems at first glance.
But for creating long videos or interactive applications, it is still better to use Adobe Flash or other flash editors. For example, I made this cat in an old Macromedia Flash that I dug up at work.
Also recently, HTML5 and CSS3 are increasingly used to create animation. Given code supported modern browsers and does not require the use of a flash player.
Roman aka dacascas especially for the blog
Subscribe to our newsletter so you don't miss anything new:
Format Flash file(SWF) based on vector graphics and is designed for scalable, compact graphics for the web. Since this file format is based on vector graphics, the object retains image quality at any resolution and is ideal for creating animation frames. In Illustrator, you can create individual animation frames on layers and then export the image layers as individual frames for use on the website. You can also define symbols in an Illustrator file to reduce the size of the animation. When exported, each symbol is defined only once in the SWF file.
Export command (SWF)
Provides the most control over animation and bit compression.
Provides more control over the mixture of SWF and bitmap formats in a fragmented layout. This command offers fewer image options than the Export (SWF) command, but uses the most recently used Export command options (see ).
Keep the following guidelines in mind when preparing an object for saving as SWF.
By using Apps Device Central, you can see what an Illustrator graphic will look like in the app Flash Player on various handheld devices.
Inserting an Illustrator graphic
Artwork created in Illustrator can be quickly, easily and easily copied and pasted into Flash application.
When you paste an Illustrator graphic into a Flash application, the following attributes are preserved.
Stroke thickness
Definitions of gradients
Text (including OpenType fonts)
Related images
Blend Modes
Contours and shapes
In addition, Illustrator and Flash support the following features when pasting a graphic.
Selecting entire top-level layers in an Illustrator artwork and pasting them into Flash preserves the layers and their properties (visibility and blocking).
Illustrator color formats other than RGB (CMYK, grayscale, and custom formats) are converted by Flash to RGB format. RGB colors inserted in the usual way.
When you import or paste Illustrator artwork, you can use various options to save certain effects (such as a shadow cast by text) as Flash filters.
Flash saves Illustrator masks.
Export SWF files from Illustrator
SWF files exported from Illustrator are of the same quality and compression as SWF files exported from Flash.
When exporting, you can choose from a variety of pre-defined styles for optimal output, and specify how multiple artboards are used, how characters, layers, text, and masks are converted. For example, you can choose to export Illustrator symbols as movies or graphics, and create SWF symbols from Illustrator layers.
Importing Illustrator Files into a Flash Application
To create a complete layout in Illustrator and then import it into Flash in one step, you can save your artwork in Illustrator native (AI) format and import it with high fidelity into Flash using the File > Import To Workspace commands. area" or "File" > "Import to Library".
If the Illustrator file contains multiple artboards, select the artboard to import from the Flash Import dialog box and specify the settings for each layer in that artboard. All objects in the selected artboard are imported into Flash program as a single layer. When you import another artboard from the same AI file, objects from that artboard are imported into Flash as a new layer.
When you import Illustrator artwork as AI, EPS, or PDF files, Flash retains the same attributes as when you paste it graphic objects Illustrator. Also, if the Illustrator file you are importing contains layers, you can import them using one of the following methods.
Convert Illustrator layers to Flash layers.
Convert Illustrator layers to Flash frames.
Convert all Illustrator layers to one Flash layer.