Graphic elements for design

Introduction to the graphic elements that we can find in designs in general and web design in particular: illustrations, texts, logos

Graphic elements are a fundamental part of design in all its modalities, introducing visual information into compositions that greatly complements the message to be conveyed, and which is sometimes as important in design as its textual content.

Books, brochures, posters, magazines, cards and web pages include graphic elements to a greater or lesser extent, and the designer must know the different graphic objects that can be used in each job, their meaning and their uses, since each of them is oriented to some specific tasks.

Graphic elements were initially little used on the web, mainly due to the weight of the necessary graphic files, which with the Internet connections available to average users made pages take too long to download from the server.

With the increase in bandwidth and the appearance of advanced image compression algorithms, graphics were increasingly introduced into web pages, and nowadays it is rare to find one that does not use them to a greater or lesser extent.

There are different graphic objects that we can use in our designs, among which we can mention logos, banners, icons, bullets, photographs, illustrations, etc. Each of them has its own design characteristics and communication capabilities, playing a different role in the composition.

We already know the types of graphic files, their nature and their properties. We are now going to study the different existing graphic elements and how we can use them properly in our work.

Illustrations

Illustration is one of the most used resources in classical design, since it is not strictly subject to a natural model, it allows the illustrator to freely draw the motif that best suits the composition.

If they are chosen appropriately to the sense of design, the illustrations are beautiful, appropriate to each context and very explicit, being pr therefore one of the missions of the designer to find an illustrator whose style adapts to the project at hand.

There are many techniques available to create beautiful single-color print illustrations (engraving, linocut, woodcut, doctor blade, silhouettes, pen and line drawings, etc.). In these woodcut or woodcut-like illustrations, there is an intriguing ambiguity between the classical technique of woodcut and the ultra-modern style of illustration.

Full-color illustration encompasses a huge range of styles, from the realistic to the bizarre and fantastic. Thus, it gives the designer ample possibilities to present graphic images in fresh and original ways. The color can be used in a smooth, opaque, semi-transparent or degraded way, being able to achieve a visual link between the illustration and other elements of the composition. It can also be used to recreate styles from specific periods.

Black and white illustrations are commonly used in black ink newspapers and magazines, while color ones are used to support all types of editorial material, posters, brochures, etc., an illustration can be used in such a way that the whole design rotates around it.

The illustration that is made for any design must be related to the reinforcing elements of the design and be reflected in them. Style and technique can be used to echo a particular period or image, brand or style, so in these cases the illustration should be conceived with that goal in mind.

When creating an illustration for digital works, such as presentations, application interfaces or web pages, we can choose either to draw them by hand, scan them and retouch them if necessary, or to start the drawing directly in a suitable graphic program.

Be that as it may, graphic programs are of great help when working with illustrations, since in them operations that are very laborious in drawing or painting are easily carried out (repetitive tasks, copying an entire image or part of it, drawing paths prefect geometric shapes, apply filters or effects, etc.).

To create an illustration we can, in principle, use any graphic program, although depending on the type of illustration sought there will be some more suitable than others.

Thus, if clean and geometric lines are going to predominate in our illustration, vector graphics programs such as Adobe Illustrator or Macromedia Freehand are especially indicated. On the other hand, if what we are looking for is an illustration that seems more natural, with blurred lines, games of colors or lights, gradients or specific tones, retouching programs, such as Adobe Photoshop or Paint Shop Pro, will be more suitable.

A good alternative is to use a combination of both types, creating the geometric objects and the pure lines with a vector program and then completing the illustration in a retouching program.

If we do not want to create the illustrations ourselves, we can always expressly commission them from a professional cartoonist or use the Internet, where there are websites specialized in this type of graphic component. In this case, we must be especially careful with copyright, especially if we decide to use illustrations taken from sites dedicated to their sale, and it is convenient to always make sure if the material that we are going to use is paid (in which case it will have to be bought). or free distribution and use.

On web pages they can also provide aesthetics and information, although this medium opts more for simple figures, such as icons or buttons, and for photographs in case more complex graphic material is needed.

However, in certain cases they may be important graphic elements that complement the information provided by the page, such as financial graphs, statistical graphs, maps and plans, etc.

Texts as images

The inclusion of texts in a composition is often limited by the typeface families available, because although it is true that there are many of them for printing, it must be taken into account that for many jobs we may need specific text styles that are not are reflected in any of the existing sources.

This limitation becomes more evident in compositions intended for digital media, and much more so in texts intended for the web, where the font families that can be used are very limited. In addition, and as we have already seen in the Typography topic, one of the main problems we encounter when including texts in works intended for computer screens is that increasing their size produces unwanted scaling effects, such as the tooth effect. saw, which can spoil the final design.

One way to solve these problems is to introduce these textual contents as images, not as normal texts, since with this we will be able to benefit from all the advantages that graphics offer.

Sometimes in a composition we want to introduce a drop cap (also called a capital letter), which gives a special touch at the beginning of a chapter, paragraph or block of textual content. Most graphic illustration programs allow you to automatically create this type of lettering, which is normally three lines of text tall, as well as placement options for the lettering relative to the surrounding text.

Once created with the necessary color and characteristics, it is enough to save it in isolation as a graphic and include it later in the composition.

If we need a special style for a word or phrase, we can use a vector illustration program and write it in a family available in it that looks relatively similar to the style we want, and then convert the text to vectors (usually using the “Convert” tool). to strokes”), with which we can then modify the nodes, strokes and Bézier curves that form the letters until we achieve the desired result.

In this way, beautiful illustrations are achieved that use the characters as a graphic element, showing a textual message through letters with various shapes (leaves, tools, people, animals, etc.).

We can also use graphics as text to overcome the strong limitations that the web presents in regards to font families, just by writing the text in a graphics program and saving it as a graphic in bitmap format, usually GIF or PNG. With this we will have available for our pages the large number of fonts that graphic programs incorporate, as well as a large number of them downloadable from the Internet, without the need for the user to have them installed.

In case of requiring large texts to be displayed on the screen, we can write them in a vector program, apply a raking, smoothing or antialiasing effect to them, and save them as an image in bitmap format, which will soften the edges of the letters being displayed correctly. This technique, widely used in web pages, is often performed automatically by simply saving the image in bitmap format.

By presenting the texts as images we can also achieve attractive effects that are impossible to apply to simple texts, such as gradients, filters, transparencies, etc.

The main drawback of using graphics as text in web pages is that the weight in Kb of the page will increase proportionally to the number of graphics used, their size, their number of colors and their complexity. In addition, there may be users who have disabled the upload of images, with which the information contained in them will be inaccessible.

For these reasons we must be careful when applying this technique, introducing few graphics and ensuring that the information they contain is not essential, and in those that we use, always insert the ALT tag with a description of its content.

logos

A logo is a distinctive or emblem made up of letters, abbreviations, graphic objects, etc., peculiar to a company, brand or product, which it represents and identifies unequivocally.

Logotypes, also known as logos, are one of the most important and difficult jobs that a graphic designer can carry out, and they represent a perfect example of the very essence of design, since all the considerations of communication, style and style are concentrated in a single object. and technique that are handled for larger projects.

For a company, product or institution, the logo is a key piece of its public identity, since it represents it in each and every one of its communication elements (envelopes, employee cards, publications, advertising, etc.) . It is therefore very important…