Month: January 2023

The question of advertising companies

“Do you want it in RGB or CMYK”?

This is one of the most repeated questions in any advertising or design agency. But what is RGB or CMYK? And, since we are, how does the human eye receive and perceive color? Let’s start at the beginning:

What is color?

The color itself is electromagnetic radiation in which each color has a different wavelength, and depending on it, we perceive one color or another.

And how do we perceive color and light?

The human eye has in its back what we know as cones. Cones are the photosensitive cells responsible for “reading” each wavelength and deciphering it in its color. There are three types of cones: those that interpret the color red, those that interpret green, and those that do so with blue.

As you can see, we are already talking about RGB, which stands for “red, green, and blue”. And it is a color model resulting from additive synthesis. “What?” Read!

Additive synthesis

Well, when we talk about additive synthesis we refer to the mixture of colors as light radiation. Imagine three lamps with red, green, and blue bulbs. If we turn them on and match them on white support, we would see something like this:

They are the three primary colors of light, and the mixture of them generates the cyan, magenta, and yellow colors (CMYK). We add “K” to add black, which if we get thin, is actually the absence of light and therefore color. There can be no color without light. The mixture of cyan, magenta, and yellow results in black. Conversely, mixing RGB results in white.

Subtractive synthesis

By referring to CMYK, we are switching to another color model: subtractive synthesis (pigments or dyes). Subtractive synthesis does not mix light radiation, but absorbs some and reflects others. Let me explain it briefly:

A wall painted green and illuminated by a white light, we will perceive, effectively, green. But it doesn’t really emit green radiation, because that would be an additive synthesis. Think that if we did, we would not need it to be illuminated and we could see the green wall in the dark. Subtractive synthesis absorbs, not mixes. That is, in our case, the green wall would absorb some of the wavelengths that make up white light and reflect those that we interpret as green. And… equilicuá!

Thus, red, green, and blue are the primary colors of additive synthesis, and their mixture generates three secondary colors, cyan, magenta, and yellow, which are the primaries of subtractive synthesis. And vice versa! 

So, can you summarize it for me quickly and clearly?

To understand it better, digital media use additive synthesis or RGB color mixing as light irradiation, while physical media such as a magazine or a painting are interpreted as CMYK or subtractive synthesis as a result of pigment mixing. And we, humans, when looking for example at the television (digital = RGB) or a picture (physical = CMYK) we get a wavelength that the cells (cones) located in the back of the eyes, interpret, and decipher in their corresponding color.

Images are a very important part of advertising and marketing. They transmit ideas, emotions, and sensations, and can influence the message of the campaign as much or more than the written message, but misused can produce a feeling of unprofessionalism or neglect, or even a very unpleasant visual effect for the user. To achieve the desired stimulus we must know how to apply them and what are the requirements of each type of support. Therefore, for certain projects a professional web design is essential.

In this post, we will focus on optimizing images for web pages.

Why is it essential to adapt the format and resolution of the images to the type of support?

Practically all of us at some point have encountered the following situations:

• A web page that takes an eternity to load (more than 5 seconds is already too long to load), and can be seen as one or several images of the page appearing little by little.
• A web page whose images are cropped, deformed horizontally or vertically, or are too large or small.
• Posters or any other type of graphic printed with images with little definition, blurry or poor quality.

This is due to a poor adaptation and optimization of the images since each support requires specific parameters. If we hire a designer to carry out our project, either online or physically (printed), he will take care of this optimization, but if we have to provide the images we must know what can serve him and what not.

Likewise, if we are going to do it ourselves, we will have to take into account several values depending on where and for what the images are going to be used.

The Importance Of Resolution And Size In Images

What is image resolution? We could say that it is the “quality” of that image. Usually, for monitors, it is measured in DPI (pixels per inch), or in English PPI (pixels per inch), which in printing translates into dots per inch. It is a measure of image density that relates the total number of pixels or dots that make it up, to its size.

Too technical? The simple explanation would be the following: the images are formed by colored dots, the more points the image has, the better its definition. This could lead us to think then that the more resolution, the better. But beware, for digital format, it is not like that.

What image resolution is used on web pages?

For web pages, the resolution used is 72 dpi since “normal” screens have that resolution. But now, with the novelty of retina displays, this resolution may be insufficient. This is solved by doubling the resolution (150 dpi for rounding), or by doubling the size of the image. The size of an image for the internet is always measured in pixels.

Uploading an image with a lot of resolution or size to the internet not only is useless, since its visual quality will not improve because of it (the monitor simply does not give for more), but it is also counterproductive. The more resolution an image has, the greater the memory it occupies.

What does this mean? Well, it will take much longer to load, and will affect the loading speed of the page. Likewise, even having an adequate resolution, if the image is too large it will also “weigh” us more than necessary.

Why is image size important on a web page?

It is necessary to adapt the size of the image to the space it will occupy to maximize loading efficiency. It is absurd for an image to have more resolution than the screen can reproduce as can be seen in the images below.

If we click on one of them with the right button and select “open image in a new tab”, the browser shows us the image in real size.

Think of a bitten apple, two golden arches forming an “m”, and a lowercase “e”… Sure you can automatically associate these logos with your brand, right? That is the objective that you must keep in mind when designing a logo.

The logo is your company’s calling card and therefore deserves as much attention as any other aspect of the business… Or more. In this article, we will see what you should take into account when designing your logo, whether you do it yourself or hire a professional.

1. Define a brand identity

First of all, you must establish certain principles of the company: vision, mission, and values… Perhaps some of these things are already defined and others are not, but it is important to have them clear and present at all times. The logo has to be consistent with all the core aspects of your company.

But … why is all this important when designing a logo? In fact, it is very important! The logo, the color palette, the fonts you use, and every other visual aspect of your brand will tell customers about the identity of the company. Therefore, all these elements have to condense your personality.

And how does this apply concretely in logo design? For example, a study in the Journal of Consumer Research lets us see how different geometric shapes influence the perception of the logo.

2. Establish a concept for the logo

If we already have a clear identity for our brand, it is time to start thinking about how to transfer that identity to the logo. That is, think about the concept behind the logo, the central idea that will take shape in this small image.

We can think of a literal concept, easily linked to what our company does (like the Burger King burger), or something more abstract (like Nike’s tick).

3. Use the right tools

Once you have a sketch of what your logo could be, it’s time to start translating this into images. For this, it is highly recommended to use specialized tools, such as Adobe’s logo maker.

If you have no experience designing, it is best to spend some time “playing” with the program, testing all its functions, to familiarize yourself with the commands. Although they are usually quite intuitive, knowing well the tool we are going to use is fundamental.

4. Pay attention to colors

A good idea is to start designing in black and white and then, when the logo has more shape, start playing and trying the different colors.
Colors transmit a lot, regardless of whether they are colors that we like more or less. Color psychology applied to marketing gives us a lot of information about what each color conveys. Here are some examples:

• Yellow: optimism, clarity, warmth.
• Orange: friendship, transparency, security.
• Red: emotion, courage, youth.
• Blue: security, strength, confidence.
• Green: peace, health, growth.
• Black: protection, elegance, sophistication.
• White: purity, simplicity, virtuosity.

5. Don’t make it too complex

Your logo will be everywhere: on your business cards, on your website, on your social networks, on your products, on posters… In short, everywhere! We need to think of a design that works on something as small as a business card and also works on something as big as an advertisement on public roads (dream big!). That is, we must design taking into account the scale of the logo.

If we design a very complex logo, with very small drawings or many details, when we have to shrink the size of the logo to put it in a small place, all those details will be lost.

For example, imagine this logo, but on a business card: