We continue with graphic elements for web design, explaining clipart, dingbats and another resource as important as animations.
We continue our tour of the graphic elements for design with cliparts, dingbats and animations, within the .
Cliparts and Dingbats
A clipart is an already designed image that we can use in a design, either directly or after having been retouched in a graphic program.
The original term “clipart” referred to small drawings on paper that were sold to be used in different projects, usually without paying additional royalties. Currently the term has come to be used to designate graphic files that can be used directly.
There are countless free cliparts, which can be used without further ado. For example, the Microsoft Office package applications have extensible libraries of these graphics, and on the Internet we can find websites dedicated to making them available to anyone who wants to use them.
Clipart can be vector or bitmap.
Vector cliparts offer the advantage of being able to be edited with different illustration programs and change their size or shape without losing definition. The most common vector formats are EPS, WMF and EMF, although there are graphic programs that contain cliparts in their native format.
This is the case of CorelDraw, which includes a multitude of clipart in .CDR format. Also Microsoft Office, which normally stores cliparts in the Program Files > Common Files > Microsoft Saved > Clipart folder. To edit them vectorially, just open them in an illustration program and work with them in the normal way.
As far as bitmap clipart is concerned, they are not used as much as vector ones, mainly due to the difficulties it presents in adapting it to a specific project. But with the popularization of web pages they are becoming more common, being able to find clipart libraries in GIF and JPEG format. The gifs can also be animations.
Apart from the clipart that comes with most drawing, editing, and word processing applications, there are many companies that sell this type of graphics, either on storage media such as CD-Rom or DVD, or directly through Internet. Just go to any search engine (Google, for example) and enter “clipart” in the search box to obtain an extensive list of websites that offer them.
Another type of graphics already designed are dingbats or symbol fonts, Truetype or Type 1 font files with the particularity that instead of having alphabetic or numeric characters assigned, they contain monochrome drawings, generally in black and white.
These drawings are used as any font, and its attributes can be modified as if it were normal text (size, alignment, color, etc.). They can also be converted to strokes in an illustration program, allowing for more advanced treatments.
The theme of the dingbats is varied, being able to find realistic figurative material, stylized symbols, signs, geometric shapes, etc., there are also dingbats specially designed to create continuous patterned backgrounds, like a mosaic.
The main advantage of dingbants over other types of charts already designed in order to use a dingbat you don’t need any special software. They can be used from any Windows or Mac program, and without versioning problems. The main limitation they have is that they are monochrome, but they can be easily edited in an illustration program and colored.
The applications of dingbats are many, being able to be used as icons, in logo design, to build simple images, to create patterns, etc.
To be able to use dingbats, you must first have the fonts that incorporate them installed. Generally we all have a series of these fonts installed, since they come with many editing applications, word processors and graphics programs. For example, if we have Microsoft Office installed we will find fonts like Webdings:
Or as Wingdings:
We can also use the Internet to find sources of this type. As before, just go to Google and enter the word “dingbats” in the search box to find quite a few websites that offer them. We will find a good set of them, among which is the well-known ZapfDingbats:
And the helpful Signs:
Once downloaded, just open the Zip that contains them and extract them to the /Windows/Fonts/ folder to have them in any word processor or graphic program that we have installed.
Focusing on web pages, neither clipart nor dingbats are directly applicable to them, as they are not supported by web browsers. If we want to use this type of graphics on the web, we will have to create it in a graphics program (usually illustration) and then save the resulting image in GIF, JPEG, PNG or SWF format.
The thus converted clipart can be used as icons, illustrations, logo elements, etc. As far as dingbats are concerned, they can be used as icons, list bullets, navigation menu motifs, etc.
animations
Animations are an increasingly used resource in the design of web pages, both in its classic version of animated GIF and in the most current and interactive Flash movie (SWF format).
Updated 2015: Today the landscape of animation on the web has changed a lot. 10 years ago this article was written and in its day the most modern animations were made in Flash, but Flash is currently losing more and more ground on the web, although that does not mean that it is being completely discontinued, since it still it is an important engine for games. Today the most modern animations are done directly with the technologies associated with HTML5, be it CSS3 or even Javascript together with the Canvas api or working with SVG (see the end of this article to find more information about HTML5 animations. Gifs Classic animations still work well on all systems so they continue to be a safe way to bring animation to the web, although it has very little versatility and no user interaction capabilities.
As we have already seen, an animated GIF consists of a series of images in GIF format placed consecutively and displayed on the screen during a certain interval of time. The animation thus created can be shown once, several or infinitely (it will always be running).
GIF animations have the advantages of being supported by any browser without the need for special plugins, generally offering a fast download, allowing the use of transparency, etc. As a counterpart, the number of possible colors is limited to 256.
The most common uses for GIF animations are creating banners, animated icons, and animated illustrations.
SWF animations or movies, generally created with Macromedia Flash, are increasingly used in web pages, mainly due to the standardization of the necessary plugin (the most common browsers already have it included) and the increase in connection bandwidth. to Internet.
Its basic operation is very similar to that of animated GIFs, although SWF particles offer additional features that make them more versatile and operative: work with vector graphics, interactivity, the possibility of programming through script code (ActionScript), form presentations, etc. .
SWF animations are widely used as website presentations (usually on the home or main page), to build banners, as logos, etc. In addition, its use is not limited to web pages, since it is possible to build self-executing interactive presentations, viewable independently of any other program.
Animations can be very useful elements on certain web pages, but they are also sometimes a nuisance for users, especially when they present merely corporate or advertising information that does not offer any practical utility or interesting content for the visitor. In addition, they excessively attract attention, mislead the main content and if their weight is excessive they can greatly slow down the loading of the page.
Therefore, before including an animation in a web page, you must carefully consider its true usefulness. As a general rule, if the website can do without it, it’s better not to include it.
HTML5 animations
In 2015 open standards are the best option to produce animations. Currently we have two important aspects.
Animations with CSS3: Theoretically, the best way to produce animations is with CSS3. CSS3 animations can use the full power of the computer where a page is being viewed and allow for a multitude of transformations, as well as easy user interaction. Through the CSS language, transformations are expressed, which basically allow you to change the CSS properties of elements with respect to the passage of time.
Animations with Javascript: In practice when an animation is complicated, either because the interaction with the user has to intervene (such as in games) or because the animations depend on various events that are not detectable by CSS (such as depending on the state of other page elements), Javascript is required to be able to control them through a programming language. In addition, through Javascript we can use APIs such as Canvas to produce drawings in motion, or access SVG elements through the DOM to change their state over time.
It should be clear that making Javascript animations does not mean having to stop using CSS3, all technologies can collaborate to optimally solve the objectives. About HTML5 animations we have written a lot during these years and if you use the internal search engine with the words “css3 animations” you will find a lot of content. We have a whole section within the . You will also find various videos such as the presentation or the , as well as the comparative article .
To delve into animation and interaction technologies, you can also consult the article that explains how to use , of which we have also published a .
Facebook Comments
Disqus