I will post images in a daily basis so you can follow the progress of the whole project: illustration, logo design and web design. I invite you to join the project, you can post your feedback or just ask any question you have.

Step 1: planning the page

Before starting to draw I do a quick sketch to plain everything, so I can figure how much room to play I have.

The page is going to be pretty simple, as you can see, just an illustration on the left and a login form in the right, the goal is increasing the conversion rate.

Step 2: sketching the illustration

En este paso uso prácticamente todo lo que tengo a mano para componer la ilustración, desde fotos a antiguos bocetos. Cuando estoy contento con la composición me dedico a limpiar y retocar las lineas hasta que consigo una base sobre la que trabajar.

Step 3: inking in Photoshop

I have explained the inking process a hundred of times so let’s go ahead, I just will post some images giving you some useful tips.

Step 3: coloring the illustration in Photoshop

Coming Soon!!

And remember, if you want to contribute just share this post in your Facebook or Twitter!

What is this tutorial about?

The object of this tutorial is the cute vectorial character illustration for Cheeky Monkey Media, web development company from Canada, designed by commission some months ago.

Final integration, cute, don´t you think?

Sadly the video is about 15 hours long, so I need to split it in different parts and accelerate the time to compress it within YouTube´s restrictions. I will write some annotations along the videos where I share some tips to improve your inking in Photoshop and your coloring in Illustrator but I’m sure lot of questions will pop up on your mind, feel free to ask.

Here you can see the character evolution from the concept to the final rendering.

This is the character evolution from sketch to final artwork

And some close-ups:

Remember there will be several videos and I will update this post frequently, so subscribing to my Youtube Channel, my Facebook page or my Twitter is a good idea to stay up to date.

Video 1: some tips to improve the quality of your lineart in Photoshop

I receive lot of questions about my digital inking process: how do I get so sharp and crisp lines?, what brush settings do I use?, how big is my canvas?… In this video I reply all these questions and some others, if your lineart looks pixelated or blurry take care of these advices and you will notice a change.

Video 2: how to vectorize your lineart in Illustrator

Vectorizing your lineart in Illustrator with Live Trace is so easy that you don´t really need to deal with vectors until the final conversion. I find much more comfortable and natural working with Photoshop and a Wacom tablet, also the inking process is much faster.

At the end of this step I have lot of white shapes over a black silhouette.

Video 3: Assigning flat colors in Illustrator

This video could be a bit boring for expert users, I just assign flat colors and organize the shapes into groups, it’s very important when working on complex illustrations.

Music courtesy of Nanowar.

Video 4: Applying gradient colors in Illustrator (Part I)

I forgot to record the first minutes of this video, I just applied very basic gradients and cut big areas into smaller ones, then I start the tricky part: adding shadows and lights.

Music courtesy of The Butcher’s Ballroom.

Video 5: Applying gradient colors in Illustrator (Part II)

So here is the last video, after 15 hours of work our vectorial mascot design is completely done. Crisp and clean!

Music courtesy of Shearer.

I hope you enjoyed the process, if you have any question or suggestion just let me know.
See you soon!

I used to do it by dragging the layers from one archive to another one, the issue is you need to disengage the window, select the layers and drag them. Then you need to move the layers to the right position.

But there is an easier way to move lots of layers to a different file, if the files have the same dimensions they go exactly to the same position, this is great when you work with lots of layers in high resolution.

To combine 2 PSD files y Photoshop:

1. Open both files
2. Select the layers or groups you want to move to another file
3. Go to Layer> Duplicate Layers
4. Choose the document of destiny… and done!

I’m a Photoshop user since its 6th version and I just discovered this command… what a tool!

In the meantime, there were some other redesigns, but none of them came out. I made a big mistake: I wasn´t clear about the reasons for the redesign.

But this time it´s definitive, at the beginning of the year SOSFactory V2 will finally see the light. I´ll tell you the main reasons for the redesign:

1.- I didn´t know the clients, I designed for myself.

When I designed SOSFactory my skills were quite limited. So I designed my web considering my tastes as an user. It was created by an artist, not by a designer.

The problem of this philosophy is it attracts one type of clients characterised by their low chances of success in their projects, regardless of their budgets. This kind of client makes decisions with the heart instead of with the head. No ofense, all of them were great to work with but a big percent of these projects never will be even started, obviously it doesn´t help to promote my services.

Now I do know my clients.

However, every corner of this new version is aimed at the client. Moreover, at a very specific type of client. My objective is to recycle my clients educating them, both directly (by articles and tutorials) and indirectly (acting as a model). And maybe to reach some other clients who appreciate communication strategies above visual impact. I mean, clients who put the reason before the heart.

The objective is to get a good portfolio of successful clients vs portfolio of profitable clients.

2.- I didn´t know my own needs.

Since I didn´t know my clients, I didn´t realise my own needs. SOSFactory V1 main page is a reflection of this fact, it´s just useless. I don´t need such a big news area, neither I need a welcome message, nor those links to my tutorials… everything randomly laid out.

Now I do know my own needs.

SOSFactory V2 is hierarchical. All the elements are distributed according to its relevance. My priority was design above illustration. Every decision has been taken in order to reach these 2 main tasks:

Improve my conversion rate:

1. Show my work in the most quick and effective way.
2. If the client decides to hire me, he has to find a quick way to do it.
3. If the client has doubts, I must offer him some reasons to decide.
4. It he finally doesn´t, at least he should enjoy the web and remember me.

Attract my target clients:

1. I want to attract a medium-high profile client: design agencies, big corporations, enterprising entrepreneurs with successful projects…

3.- I denied the social side of my job.

At first, I thought a blog would only distract the clients from buying. In fact, I had two different webs: On one hand SOSFactory, my portfolio, on the other hand SOSNewbie, which was my blog, rather a personal than a professional project.

Integrating my blog and my porfolio in just one domain is one of the best decisions I have ever taken since it increased my presence in the net.

Now I understand that the social side is the key.

This step made me understand how important the social factor is in the Internet. So I´m currently very active in the following networks:

• Facebook
• Twitter
• Youtube
• Deviantart

The new SOSFactory takes social networks into account. The objective is to improve my social support to improve my brand image. These are secondary objectives, but they´re quite important anyway:

1. Keep the users (clients or designers) well informed about possible events, thanks to the up-to-date news.
2. Offer resources to my users, through my articles, tutorials or my Youtube videos.
3. Promote my profile in social networks.
4. Promote my passive income by selling stock designs or premium tutorials.

4.- I didn´t have an identity.

Since I didn´t know my market, or my audience, I didn´t understand my needs, so I could´t have a corporative identity.

In time, I know myself better.

Now I know my own identity, I need a web which reflects my way to interact with the world:

• I´m a businessman more than an artist.
• I achieve my goals, in a simple and funny way.
• I´m a perfectionist, practical, modest and open-natured.
• I´m generous, my success depends on my clients´ success, and the success of everyone who interacts honestly with me.
• I offer good quality service which is worth a decent remuneration.
• I´m honest and I demand the same in exchange.
• I don´t need everybody to like me.
• I believe in hard work above talent.
• I believe in intelligence above aesthetics.
• I believe in facts above words.

5.- I was breaking all the basic rules about usability.

This was the weakest point in SOSFactory V1, I have a brilliant set of utterly silly decisions in this area:

• Instead of emphasizing my logo, y gave priority to this kind of "space" button with links to secondary parts of my web.
• Another epic mistake was using Flash for the navigation bar, just to add some animation and sound, because that was cool!
• The container is optimized for 800x600px resolution, so the content looks too compressed and the text is hard to read.
• The texts are corporative texts, quite generic, so they don´t reflect my personality.
• There is no room to display big images.
• … we could go on and on.

Now I know the basics about usability.

Even though I´m not an expert in this area, it´s one of the aspects of design I enjoy the most. I´m following some interesting blogs about usability, and I think I´ve improved quite a lot in this area.

Everything must be where it has to be, and if it´s not, just change it.

6.- I chose the wrong technology.

As a noob I was, I limited to use what I knew. I used plain HTML with some Flash touches. Templates are restrictive about the design, and the management takes quite long. Each change has to be done page by page.

My new web will be flexible and easy to manage.

It´s created with style sheets (CSS) + HTML, each element of the design is cut in different PHP files. I gain flexibility with this, it´s quicker to manage, and there are many more advantages. In addition, I have some Ajax touches to charge contents effectively as well as Javascript to make changes on the interface.

Final thoughts

The key to build a good website is the intentionality, every small choice must be oriented to a goal, in my case it was atrackting a different kind of client. But before you must know yourself and your market, so you can create the right enviroment, with the right tools.

In the next post I will disclose all the reasoning behind my choices.
And hopefully SOSFactory V2 will be online around middle January.

I hope you guys a great holidays, thanks a lot for your support!

Here you have an animated summary of the whole tutorial

The tutorial costs only 6US$ (if you use the pre-pay option, just 4US$) and it´s the most detailed tutorial about drawing and coloring characters I have ever made. Seriously, this one condenses all the tutorials in the blog. This tutorial is for advanced users, perfect for those who have already practised with some of my tutorials but still want to go further. For those who haven´t, I recommend that you practise the basics before.

What does the file contain?

• Obviously, the most complete tutorial I have ever made about drawing and coloring in Photoshop.
• PSD in very high resolution of the final design, valued at 700US$, under creative commons license. That means you can use it both for personal and commercial projects.
• Two fancy wallpapers you can use on your desktop.
• And everything in English and Spanish.

Here you can see the summary of the tutorial:

• Basic concepts: attitude, pose, action line and silhouette.
• Briefing and search of references
• Before starting to draw
• From the first sketch to the final lines, step by step
• Extracting the lines
• The importance of the history brush
• Plain colors
• Shadows
• Soft light
• Hard light
• Outlines
• Coloring
• Very important: Final effects using layer modes
• Final presentation and acknowledgements

Well buddies, if you download it, leave some feedback, ok? Greetings from Greece!!!

What is the History Brush?

The History Brush is a Photoshop tool used to “travel through time” to any event reflected on the History palette. At first it is hard to understand, but as we go further we will see a few examples that you will be able to perfectly understand.

How does the History Brush work?

Before we understand what the History Brush is, we have to understand the concept of History: every action we take in Photoshop is registered in the History panel as an event, being the top ones, the oldest. We can freely go back in history, something very useful to fix mistakes.

At the left of each event is a square, and in one of these squares there is an icon of a brush (on the original snapshot by default) that we can keep changing from location. This square is the one that sets the origin, the source of the History Brush.

If we mark a particular event as source and then we make changes to the canvas, with the History Brush we can “paint some areas of the canvas to make them go back in time” up to its original state or source. It would be like going back on the History panel, only that the changes don’t affect the whole canvas, only the area we have painted with the History Brush.

What use can I give to the History Brush?

The History Brush is a very powerful tool, you can give it unlimited uses; right on top of my head I can think of 3:

Example 1: suppose we have a color picture of a subject with a background and we want to leave the background black and white. We can desaturate the image and then with the History Brush we can put some of its previous stage back, I mean some color.

If we mark the event Desaturate as source and we paint with the History Brush again, the result will be that we are going to return the image back to black and white … we can do it at any stage in history.

Example 2: suppose that after painting a character I decide to make several tests. It happens that I like the head on the first test, the body on the second and the feet on the third. With the History Brush I could merge all the variants quickly and easily (although with some limitations that we will see later on).

Just take snapshots of every version and use the History Brush to join the parts you like from each version. Remember the History Brush works just by individual layers (see limitations below).

Example 3: I can use the History Brush as a selective eraser. I can erase part of a gradient or stroke, having the rest of the gradients and strokes frozen. Here is when we will connect with The longest Photoshop coloring tutorial.

Now I believe you have an idea of how powerful this tool is

Why is my History Brush not working?

This is one of the most frequent questions; the History Brush is a powerful tool that has its own rules:

1. It works on individual layers. If you want to make changes to several layers, either you do it one by one or you have to flatten the layers.
2. It works on existing layers on both sides of history (the event we marked as source and the current event). This means that if we mark an event and then we flatten it, erase it or if we create another layer, then the History Brush will not work on the affected layers.
3. The History stores a limited number of events, it may happen that you want to go back to a very old event and you find it is not there any longer (though the source event is always kept). This can be solved by creating a snapshot every once in a while. From the Photoshop’s preferences (Edit > Preferences > Performance) panel you can also increment the number of events stored, although it will use more resources.
4. It works both to go back to the past and to move to the future. Imagine that you make 10 strokes, you can go back to stroke 5 from history and mark stroke 10 as source, we would be moving to the “future”.

What is the Artistic History Brush?

It is a variant (less useful) of the History Brush, the concept is basically the same, only the result is artistic. It is useful in very particular cases in which we need some kind of texture, for example to paint clouds or give a painting finish to a photograph, or specific areas of a photograph.

I can´t figure any effective use, it just works fine if you need certain effects.

Let´s see if you got it !!!

If after reading this post and seeing the video again you can´t still figure the technique I use to paint complex gradients, don´t worry, within the next days I will go ahead with The longest Photoshop coloring tutorial and I will explain the proccess in detail.

Remember tweating and spreading the post if you found it useful.
See you soon!!

• The full tutorial in PDF format.
• A video compilation in high resolution and comments in English and Spanish.
• The high res PSD file under creative commons license (for personal and commercial use).
• The PSD layered for your own research.
• And the color swatches, some Photoshop action…

I think 5-10US$ for the whole pack would be a fair price… what do you think? think running a blog like this is not for free, and I need to spend lot of time and energie. Would be a nice way of support, so I can continue offering good quality content.

INDEX

• Day 1: download the lineart and let´s get started
• Day 2: extracting the lineart
• Day 3: making the flat colors template
• Day 4: painting basic areas
• Day 5: painting complex areas: the history brush

Day 1: Download the lineart and let´s get started

Some of you already did a try on the lineart, I suggest you color it again following this tutorial, would be nice seeing how you improve your coloring skills. If you didn´t try yet, you can download the lineart here:

So we are ready to start!
See you in a couple days, stay tunned and don´t forget tweeting the post if you like it.

Day 2: Extracting the lineart

The best method to color a drawing is by extracting the lines, because we will have the possibility of coloring them later very easily. Download the drawing, open it with Photoshop and follow these steps:

1. Open your image with Photoshop.
2. Go to the Channels panel and CTRL+click on the blue channel.
3. Select the Magic Wand (W) and right click, choose Select Inverse.
4. Go to Edit > Copy (CTRL+C) and then Edit > Paste (CTRL+V). The lines are already separated from the background.
5. On the "Background" layer, go to Image > Adjustments > Hue/Saturation (CTRL+U) and put the lighting at +100 to obtain a completely white layer.
6. Rename the new layer to "Lineart" and CTRL+U again, this time put the lighting at -100 to obtain completely black lines.

As you can see, the drawing is ultra-clean because I drew it digitally. In this tutorial we will only focus on the color, so if you´re interested in obtaining clean lines you can visit this post to learn how to ink a drawing in Photoshop.

Some advices to get clean lines:

• The best way to ink is digitally, wether it be with a pen tablet or with the vectorial drawing tools.
• Always work in high resolution, the higher the better. Make sure at least about 2.500 x 2.500 pixels.
• If you decide to work from a drawing on traditional paper, scan it in grey scale mode or convert it to grey scale in Photoshop before extracting the lines.
• Have a look to this post about How to ink a drawing in Photoshop.

Resume of the day

See you soon!!

Day 3: Making the flat colors template

Let’s create a new layer between the "Background" layer and the "Lineart" layer, and name it "Flat colors". Through this flat colors layer we can:

1. Choose our colors template.
2. Isolate the different areas to make quick selections with the magic wand (W).

The quicker way to paint our flat colors is making a selection of the area, using the Magic Wand (W) in question the "Lineart" layer (this one of the advantages of having such a clean lines). After this, expand the selection so the edges don’t look jagged (Select > Modify > Expand: 3px). Now choose the colour you like and click with the paint bucket (G) on the "Flat colors" layer:

Some advises to make a good flat colors template:

• Although you’re always in time to make changes, visualize the finished design and try to define your color sketch.
• Use medium colors, neither too saturated/desaturated, nor too bright/dark.
• Rename the layer as "Flat colors".
• Lock the pixels of the image in the "Flat colors" layer, this way you won’t paint on it by accident.

Resume of the day

Today we made a flat colors template to make quick selections and increase the workflow. And we decided our color sketch too.

See you in a couple of days!!

Day 4: painting basic areas.

Finally, our design is ready to color

Let’s begin with something easy like the eyes to explain the technique, and as we go forward the tutorial will become more complex. Considering that many people don’t own a Wacom tablet, today I’ll use the mouse, the vectorial drawing tools and gradients. You’ll see the result is the same, but we’ll have to invest more time. The rest of the days I’ll use my Wacom to go faster, if you need any help you can check this post about how to draw using vectorial drawing tools in Photoshop.

First of all, let me explain a piece of theory. You’ll find this very useful when it comes to apply a correct lighting:

As you can see in the image, I placed the source of light above and slightly on the left. This means that the illuminated areas will be on top and the shadows below. On the shadows, we’re adding some reflections to give volume. We’re not looking for a realist finish, but it must be coherent.

Step 1: shadows.

Let’s create a new group of layers. Name it "Eyes" and create a new layer inside it, on which we’re painting the shadows. Name it "Shadows" and put it in Multiply blend mode.

Now make a selection of the eyes using the Magic Wand (W) on our Flat Colors layer, then let’s go back to the "Shadows" layer and paint an outline with the same blue color of the background (#92b6e6). Looks darker because the layer is in Multiply mode. As we said, the light comes from above, so the shadows will be thicker below.

TIP: the dotted lines of the selections can be bothering sometimes. You can hide them pressing CTRL+H.

Now we’re going to soften the outline we created. Let’s use a thick brush with soft edges. The key is to paint from a distance, to make the outline blur but not to dissapear. Once you’re finished, put the layer in Normal mode again.

Eyes are easy to make because their shape is quite simple. Unfortunately, the whole process is not that easy, we must learn how to use the History Brush for more complex shapes (we’ll talk about this next day).

Step 2: light.

Let’s create a new layer under the "Shadows" layer, and name it "Lightness". On this layer we’re creating a gradient from white to transparent, from above on the left until below on the right. The key is to make this sofly, not covering in white the whole eye.

Step 3: reflected light.

Now we’re creating reflections to give volume to the eye. Create a new layer and name it "Reflected light". Make a white outline that doesn’t cover the whole shadow area. Then merge the inner outline, this time using the Eraser (E). Be careful not to erase it completely, we only want to make it a bit transparent.

Step 4: painting pupils.

To paint the character’s pupils we’re creating a new group of layers named "Pupils"above the "Lineart" layer.

We’re painting the pupils through 3 layers as we can see in the image:

• Image 1: layer we’re naming "Glow", we create a slightly oval circle and apply gradient from white to transparent. Try to leave the oval with some transparency instead of fully white.
• Image 2: create a new layer and name it "Glow 2", do a circular gradient with blue colour (#10a4fa), and put the layer in Linear Dodge mode.
• Image 3: create a new layer we’re naming "Pupil", and paint something similar to the image with the same blue.
• FINAL Image: this is what we get when we activate the 3 layers.

Step 6: coloring the lines.

Finally, we create a layer above the "Lineart" layer, and name it "Color hold", we’ll use this layer to color the lines.

CTRL+Click on the icon of the "Lineart" layer to make a selection of the lines, and go to the "Color hold" layer. Choose a slightly darker blue color (#223171) than the one we used for the eyeballs, this way we make the line merge with the design, but it’s still recognizable.

Summary of the day

Today we painted a simple shape, like the eyes of our character. Next day we’re painting the teeth, which is more complex, so we’ll have to learn how to use the history brush.

I see you in a couple of days!!!

Day 5: painting complex areas: the history brush.

Hello guys, tomorrow I´m flying to Berlin and I´m going to take several days off but before I leave I would like to post the last video of The World´s most detailed Photoshop coloring tutorial.

For now there is no tutorial just the video where you can see how I color more complex areas thanks to our buddy the History Brush, I put lot of care so hopefully you will understand how the History Brush works by yourself, anyway I will post the tutorial whithin the next days, until then, enjoy the video.

See you soon!!

Here you can dowload the high res lineart in Photoshop format of the character:

In the next days I will offer the final PSD file layered for free download, so you can do some research to know how I did it or you can use it in your designs.

Entries

Some supporting tutorials

Mascot design in Photoshop tutorial for Smashing Magazine

Character design Photoshop tutorial for PSDTuts

Character design Photoshop tutorial for PSDTuts (need paid subscription)

Vectorial illustration with Illustrator

Sometimes they have to use them at very small sizes, sometimes they are not well fitted in the context, very often they modify the design with disastrous results, usually they are too agressive with the compression of the image… and in many cases they don’t make a real usage of the designs.

Points you should have in consideration to make the most out of your mascot design.

• First of all, consider if you really need a mascot design. Is it adecuate for your public objective?
• Program your web in order to make the most out of your character design.
• Remember: the bigger you show the illustration (within reasonable limits) the nicer it will look.
• Leave margins around the illustration, let the design breathe.
• Make the mascot interact with the rest of the web, be creative.
• Apply your corporative colors to your mascot.
• Design a versatile mascot, this way you can use it for banners, avatars, T-shirts, or your "about" page.
• Choose a concept that matches your corporative values.
• Optimize the weight of the illustration, save it as JPG at 60%.
• If you have to make later modifications, ask the author of the design.
• Order your designs in high resolution (till 7000x7000px) or in vectorial format. This way you can print any size you need.
• Watch if your design fits the basic principles when it comes to design a mascot.

Characteristics of a good mascot design

• Memorable, it must cause impact.
• Easy to remember, it must remain etched in the memory of the observer.
• It must be unique, and easy to discriminate from the competitors
• Attractive, the character must be attractive for our target public.
• Iconic, the character must represent the corporative values of the brand.
• Functional, it must work in banners, in the headline of the web, in the logo.

Effective ways to integrate the designs of the characters in the web.

The use of the mascot integrated in the logotype is the most common way to integrate the character. This way we associate the character with the brand, it´s one of the most effective ways to use a mascot.

We can integrate the mascot very effectively by using it as an icon or integrating it in the buttons. We can use it in the "over" state of our buttons and animate it in Flash:

One of the most effective ways consists of using the illustration all the wide of the web. You sacrifice a lot of space but you get a great visual impact. John Cow‘s web was a good example of this, too bad they are reducing more and more the size of the illustration instead of optimizing the remaining space.

We don’t really need to use the mascot in the headline of the web, we can use it to highlight certain elements of the design:

To finish, some banners with character designs:

In my opinion, it is partially obsolete. The advance of impression techniques, the evolution of the consumers overburdened with publicity and the evolution of the mass media (Internet, Television, mobile phones, videogames industry…), have released the designers from many restrictions.

Don´t decorate, comunicate

The principle "don´t decorate, communicate" means that we must put the message itself before its aesthetic aspects, although we mustn´t leave them aside. I think this would be a more loyal version to its spirit: "Communicate first, then decorate", which is what it really means.

Applying this principle to corporative design we would have two opposite sides (using my own terminology):

• The ones who follow the principle of simplicity: text logos (Paypal), initials based logos (IBM), logos with graphic elements, iconic logos…
• The ones who don´t follow it: illustrative logos, the ones I like to design.

The art of decorating

If you know my work in SOSFactory, surely you already know I take this stream to the end. My logotypes have gradients, many colors, illustrative elements, sometimes even complex characters. I usually design for a web, so I have much more freedom to create. On the other side, my logotypes are not so versatile, although as we´ll see later, this problem can be solved adapting the logo to the other media.

Pros of illustrative logos

1. They cause more visual impact in big sizes.
2. More differentiation, they are more difficult to imitate or to mistake with other brands.
3. More effective for a certain type of consumer (children, for example), industry (videogames, clothing) or media (internet)
4. The "absorption" of the logo by the consumer is slower but more durable.
5. It´s easier to sell merchandising with our logo.
6. It creates a dependence relationship between the designer and the brand (this is "good" for the designer).

Cons of illustrative logos

1. They are less effective in small sizes or at far distances.
2. More cost of production (though printing is more and more cheap).
3. More time needed to identify the brand.
4. More difficult to copyright as a brand.
5. Redesigning is more expensive
6. It creates a dependence relationship between the designer and the brand (bad for the brand).
7. They are hard to identify on small promotional items, such as pens.

The adaptation to the media

We can solve most of these negative aspects by adapting the illustrative logo to the different media and sizes. Obviously, this requires more time, which means a bigger inversion

This way, on one side we have an illustrative version to use it on the screen, where the size of the application is usually bigger (web, tv, mobile phones) and on the other we have a simpler adaptation for possible printed applications, or for the use in smaller sizes.

A good corporative kit would include:

• Bitmap versions in JPG, PNG, GIF, TIFF, PSD formats, and vectorial files AI, EPS.
• Versions of the logotype in high and low resolution.
• Versions of the logotype in RBG and CMYK.
• Adaptations of the logotype with and without illustrative elements.
• Adaptation of the logo, to 1, 2 and 3 colors, full color and grey scale.
• Adaptation of the logo on dark background and light background.

Different adaptations of the same logotype: full color, 1 color, 3 colors and grey scale.