Criei, especialmente para este making of, uma divertida ilustração para o header do blog da minha irmã, a Stella. No seu blog e ela narra situações do dia-a-dia com leveza e bom humor, e achei que seria divertido desenvolver uma ilustração que representasse isso. Espero que esse meu passo a passo ajude os profissionais que estão começando a se aventurarem pelo mundo do design e ilustração. Clica em “continue reading” para ver todo o giga-post completo.
Hey guys! I created specially for this making of a fun illustration for my sister Stella’s blog. In her blog she writes about funny daily situations and I thought that it would be nice to develop an illustration that expressed that somehow. I hope that this step by step help the new designers and illustrators. So, prepare yourself, and click “continue reading” to check out my huuuge post!
» Brainstorming ftw
Sempre que inicio uma ilustração pessoal para alguém, gosto de fazer um brainstorm sobre as coisas que aquela pessoa gosta, para criar uma espécie de moodboard e captar bem a sua personalidade no desenho. No caso da minha irmã, por exemplo, Itália, Viagem e Macarrão não podiam faltar de jeito nenhum na ilustração. Nessa etapa também crio despretensiosamente rascunhos da ilustração, testando novas formas e composições interessantes.
When I’m creating an illustration for someone, I like to make a brainstorm and write down stuff that person likes, to create a moodboard and capture her personality in the drawing. In my sisters case, for example, Italy, Trips and Pasta were mandatory in the illustration. In this step I also make preliminary roughs, testing new shapes and interesting compositions.
.
» Roughs, Sketches & Drawings
Depois de definidos os elementos que farão parte da ilustração e de escolhida uma linha gráfica inicial, eu começo o rascunho que servirá de base para o vetor. Nesta etapa eu gosto de ser mais detalhista, utilizo lapiseira e um lápis macio para simular os contornos e gradientes do vetor. Muitas pessoas pulam esta etapa e iniciam o desenho diretamente no computador, mas eu pessoalmente prefiro criar primeiro no papel. Além de eu me sentir mais criativa nele, serve como desculpa para sair um pouco do computador.
After I pick the elements that will be part of the final illustration, and develop an initial graphic style, I start the rough that will be used as a direct reference for the vector. In this step I like to use a lot of details to simulate strokes and vector gradients. Lots of people ditch this part and go straight to the computer, but I personally prefer to create first in the paper. No only I feel more creative, it’s also a pretty good excuse to leave the computer for a change.
.
» Vector madness
Terminado o rascunho, eu escaneio ou tiro uma foto dele, para depois importar o jpg em um software de ilustração vetorial (meu preferido do momento é o Illustrator). Nesta etapa eu me preocupo somente em criar os outlines das formas, deixando o preenchimento com cores para depois. Recomendo trabalhar com uma cor que se destaque bastante do desenho de base para auxiliar na visualização. Nessa ilustração eu escolhi um stroke vermelho.
After I finish the rough, it’s time to scan it. (0r take a picture of it, if the paper it’s too big for your scanner). Then, I place the jpg file into a vectorial illustration software. My favorite software is illustrator, but feel free to use the one you like the most. Right now I only care about making the strokes and outlines, leaving the colors and filling for later. I recommend using a color that contrast with your sketch, to help you visualize it. In this case i chose a red stroke.
.
» Cool tip #01
Eu gosto do illustrator porque ele oferece vários recursos para facilitar o processo de vetorização. Um artifício que eu uso frequentemente é o Pattern Brush. Em vez de desenhar uma flor inteira, por exemplo, você pode desenhar somente uma pétala, transformá-la em pattern brush, criar uma forma com este outline, e conseguir resultados bem legais. Esta dica é especialmente boa para quem gosta de composições abstratas, como eu.
I like Illustrator because it offers you a ton of cool resources to help your vectorizing process. A solution that I often use is called Pattern Brush. Instead of drawing a whole flower, for example, you can make just one petal, turn that petal into a patten brush, create a shape with that outline, and achieve fun results! This tip is specially useful to illustrators that prefers abstract compositions, like me.
.
» Cleaning up the house
Depois que eu termino finalmente de vetorizar toda a composição, eu dedico um tempinho para organizar o arquivo, colocando todos os objetos na ordem certa, para facilitar a próxima etapa, que eu considero a mais difícil…
After I finally finish the whole vector madness, I spend a little while organizing the file, putting the objects into the right order. All this to help the next step, that I consider to be the hardest part…
.
» Choosing Colors
O momento de escolher as cores e pintar a ilustração é sempre o mais difícil para mim. Nesse projeto me inspirei nas cores da bandeira da Itália, mescladas com os tons alegres da bandeira do Brasil, mas com um look vintage. Nesta fase também desenvolvo os gradientes e escolho as texturas que utilizarei. Minha dica é dar uma olhada nos Patterns do próprio Illustrator, dentro de Swatches » Patterns » Basic Graphics.
The moment to chose the colors and paint the illustration is the hardest and longest part to me. In this project I was inspired by the italy flag colors, mixed with the vibrant colors of the brazilian flag, all this with a vintage look and feel. In this step I also develop some gradients and chose the textures that I’ll use later. My tip is to take a look at the patterns from illustrator, hidden inside Swatches » Patterns » Basic Graphics.
.
» Color Groups & Inspiration
Um bom site para buscar inspiração em cores é o colourlovers.com. Lá você pode pesquisar entre inúmeras paletas criadas pelos usuários. Ah, e depois de escolhida a paleta de cores, vale a pena criar um new color group com os tons escolhidos.
A great site to search for color inspiration is colourlovers.com. There you can search between endless palettes developed by their creative users. After I chose my color palette, I find really usefull to create a new color group with the chosen tones.
.
» Almost there
…Colore mulata, colore!
Sneak peek of the coloring process.
.
» Font maniac
A escolha da fonte para compor com a ilustração é uma etapa muito divertida. Adoro testar várias combinações e ir à procura de fontes novas. O problema é que empolgo tanto nessa etapa, que as vezes pré-seleciono 30 fontes e depois sofro para escolher a final. Para esta ilustração pensei em uma fonte forte, bold e moderna, contrastando com uma segunda fonte manuscrita.
Choosing a font to use in the illustration is really fun! I love to test lots of combinations and to “hunt” for new fonts. The problem is that I get *too* excited in this step, and sometimes I download 30 fonts, and later I simply can’t decide which one to use. For this illustration I imagined a strong, bold and modern font, making a visual contrast with a script font.
.
» Cool tip #02
Quando você for utilizar a mesma forma diversas vezes, uma boa dica é usar o recurso de símbolos do illustrator. Você cria um motion clip, e espalha o objeto pela composição conforme seu preset. Com as opções da ferramenta você tem a possibilidade de aumentar e diminuir o símbolo, mudar sua posição, opacidade, etc. Desta forma você não precisa duplicar e reposicionar o objeto manualmente.
When you are going to use the same shape over and over again, a good tip is to use the symbol tool. You make a motion clip, and spread the object in your comp, according to your preset. With the tool’s options you can increase or decrease the symbol, change it’s opacity, position, etc. This way you don’t have to duplicate and reposition the object manually.
.
» Blending Modes
Depois de preencher o vetor com os tons escolhidos, gosto de dar uma refinada na composição com gradientes e texturas. Algumas ilustrações ficam bonitas com cores chapadas, mas nessa preferi trabalhar com gradientes para deixar o resultado final com mais profundidade. Um dos segredos para uma composição visualmente rica é testar diferentes texturas e blending modes. Eu utilizo com frequência as opções multiply, overlay e softlight. Também gosto de brincar com diferentes opacidades e nuances.
After I fill al my shapes with my chosen colors, I like to refine the composition with gradients and textures. Some illustrations look better with solid colors, but in this case I decided to use gradients to create more volume. One secret to a visually rich comp is to test different textures and blending modes. My fav ones are: multiply, overlay and softlight. I also like to play with different opacities.
.
» I (heart) Photoshop
Depois de terminar a vetorização, eu exporto o trabalho para um polimento final no photoshop. No photoshop eu mesclo o vetor à imagens em bitmap, para atingir um visual mais orgânico. Lá eu também utilizo as adjustment layers e faço testes com ajustes de cores, levels, curvas e etc.
After I finish the vector process, I export my work for a final polishing in Photoshop. At photoshop I mix the vector with bitmap images, to achieve a more organic feel. I also use the adjusment layers e test some colors adjustments, levels, curves, etc. And use brushes.
.
» Don’t be messy
Com a grande quantidade de layers criada, é comum se perder e gerar um arquivo bagunçado. Tente sempre evitar isso, e mantenha um documento com camadas nomeadas corretamente e com pastas organizadas.
It’s common to make a looot of layers in Photoshop, and It’s really easy to lose yourself in the mess. Try to avoid that, and keep a file with the layers named in an appropriate manner and use organized layer groups.
.
» Brushes and Scribbles
Ainda na ideia de deixar os vetores com uma aparência mais orgânica, inseri nessa etapa final elementos desenhados à mão, criando uma composição hibrida. Também adicionei brushes e luzes coloridas, todos em layers separadas, preservando a ilustração original.
With the idea to create an organic look in mind, I blended the original vector illustrations with hand drawn scribbles, to create a hybrid composition. I also added brushes, colorful gradients, all in separated layers, preserving the original illustration.
.
» Ta-da!
Depois de terminar a ilustração do header, é hora de criar o layout do restante do blog. Mas isso fica para um próximo passo-a-passo. 
Obrigada por ter me aturado até aqui! Caso você queira ficar por dentro de mais devaneios meus, dicas e links interessantes (ou não, hah), estou lá no twitter: www.twitter.com/carolrivello.
And that’s it. Now It’s time to create the rest of the layout… But thats for another making of. Thanks for reading the whole post! If you want to read more nonsense from me, or for more cool tips and random links, feel free to follow me on twitter: www.twitter.com/carolrivello.
49 responses to "Making of" »
muié tu existe? tu é fera.
Parabéns Carol, sempre fazendo um ótimo trabalho.
Adoro o seu estilo
Exelente trabalho, Parabéns!!
Carol, belíssimo trabalho…
Incrível como um “making of” estimula a criatividade alheia! Rsrsrs.
Amo tipografia e alguns desenhos meus (ainda sem essa qualidade gráfica maravilhosa) ficam apenas no papel por “preguiça”…
Sou um fã de suas formas, texturas e cores. Seu trabalho é lindo e muito caprichado!
Posso copiar? Rsrsrs. Brincadeira…
Esses “seja organizado com suas layers”, “não delete o arquivo original”, “use uma linha em tom diferente pra dar destaque”, foram PRA MIM! Rsrsrs. Às vezes a pressa atropela o andamento e acabam deixando o processo mais “falho”.
Mas vou tentar seguir suas dicas.
No mais, parabéns! Seu estilo é top!!!
Uau =D
Podem dizer o que quiserem, Lóu, mas ninguém gostou mais do que eu (a irmã mala)
;D Hihihih!!!
BEM mala by the way.
“Lóu quando fica pronto?”
“Já tá pronto?”
“Quando posso divulgar?”
“Muda a cor do fundo?”
“Muda minha blusa?”
“Fica pronto até dia 20?”
saco. hauaahauha
Olá Carol,
Sempre acompanho seu blog e mais uma vez você mostrou que é fera no que faz! Ficou fodástico esse trabalho e com certeza a Stella deve ter gostado muito. E quando o blog estiver no ar avisa a gente para poder conferir!!!
Como disse o Tiago acima, deu até vontade e inspiração para vetorizar e colorir minhas ilustras. Quando terminar alguma mando pra vc dar um palpite se puder!
Vlw e mais uma vez parabéns!!!!!
Amazing! I just love your work!
Ai Carol, eu sempre acompanho vc no twitter e acho seus trabalhos simplesmente fantásticos!!! O toque feminino é o charme nos seus trabalhos! Lindo!
Sou assistente de arte e essas dicas, por mais básicas q seja, ajudam e inspiram muito!!!
Parabéns pelo trabalho!
Dispensa qualquer comentário. Você é de mais, menina!!
Muito bom, Carol!!! Isso já me ajudou bastante, porque, acredite, você matou uma curiosidade minha só pelo detalhamento. Parabéns, mesmo!!!
Nossa, que máximo! Sério, adorei o mega post
Todas as dicas e passo-a-passo.
Parabéns!
levanta o braço quem gostou do trabalho e do post da Carol! \o/
Eu! Amei.
o/
hauahauahauaha
Sensacional o tutorial Carol. Parabéns! =]
Só achei que as imagens ficaram muito pequenas, dificultou pra ter uma referência visual.
Obrigado.
Belíssimo!!! Carol Owna…
Carol, acompanho teu blog a algum tempo e acho ele excelente! Teus trabalhos são fantásticos, com formas e cores muito bem escolhidas e de muito bom gosto. Adorei esse teu “passo a passo”, que por sinal já tinha visto na ABCDesign e quando vi disse: olha, é um trabalho daquele menina do blog que eu adoro! Enfim, fica aqui minha total admiração pelo teu trabalho e espero novas atualizações (que eu vou ficar sabendo porque já te sigo no twitter!)
Ótimos post Carol, as dicas são maravilhosas, e estamos sempre procurando referências e idéias
Anotadíssimo!
=:’D
Ai Carol, você é demais!
Sempre, sempre, a minha favorita, a minha primeira referência de ilustração. *-*
Fiquei encantada com o passo a passo, é perfeito e a ilustração é maravilhosa. Você poderia colocar um link em alta resolução pra gente ver os detalhes, né?
DE MAIS! =O
Eu estava aqui pensando em refazer meu site, agora com certeza vou me basear nos seus PASSOS para chegar la!
Parabens!
Puts… tá lindo desde o começo até o fim!
E que empenho para fazer o post, né? Tudo bonitinho…
Parabéns — gostei muito.
Pois é… na realidade a trabalheira eu já tinha tido, quando fiz o making of pra AbcDesign. Mas o post deu trabalho sim, pq fiquei traduzindo as etapas… (com esse meu inglês fantástico) hehehe. Beijão, obrigada.
Ficou muito fino… só resta uma dúvida: quanto tempo foi gasto para o processo completo?
Puxa vida. Ótima pergunta. Acho que foram uns 3 dias de trampo, Pedro! Não sei dizer certinho, pq foi bem picado, eu ia fazendo quando sobrava tempo na pauta… Mas acho que se eu fosse fazer direto, teria sido isso, 3 ou 4 dias.
a carolzinha não sabe brincar
(joselita)
nhé nhé nhé, olha quem fala
É a minha filha!!
Belíssimo trabalho. tem como postar a imagem ampliada para ver os detalhes?
http://www.flickr.com/photos/carolrivello/4820919335/sizes/l/in/photostream/
Znakomita robota!
babando aqui =P
Essas layers organizadas da Carol são uma mão na roda na hora de começar o HTML!
tenho praticamente TOC por organização no photoshop, haha
já a minha mesa de trabalho… hihi
O primeiro esboço da menininha tava mais bonitinho, de forma mais caricata… pq mudooou?
=)
ótimo o making of!
Meu… muito bom tudo isto. Parabéns mesmo pela iniciativa.
Sucesso sempre!
Ótimo trabalho, Carol! Parabéns.
Essa fonte é Arial Rounded sem counters?
Oi Angelo!
Ih, esqueci o nome da fonte. Acho que é baruta black o nome. Mas me deu um branco!
Mas arial rounded com certeza não é
Abração!
Que garota fera!!! adorei seus trabalhos e o theme do seu site!
Parabéns!!
Carol, seu trabalho é lindo! E que fantástico compartilhar o processo todo com a gente! Poucas pessoas fazem isso! Parabéns!
Tu manda muito no vetor, na composição e nas combinações de cores! Fera mesmo! Parabéns!!
Realmente muito bom o layout, a arte, a organização, o cuidado com detalhes, incrível Carol!! Vc com certeza será uma referencia para meus humildes trabalhos (se permitires é claro hehe).
Really nice post
Thanks Carol
Amazing! Wait for video=)
Seu trabalho é muito legal! conheci hoje o blog e já tá nos favoritos. o/
Parabens Carol!! Sensacional, vc é uma inspiração pro nosso trabalho. To até procurando um curso de desenho para aprimorar a técnica das minhas ilustrações “no computador”, pq acho lindo o modo como vc desenha ;D
Mais uma vez Parabens! ;D
Muito obrigada, Juliana!
E eu estou procurando um curso para aprimorar minhas técnicas fora do computador, hehe. Beijo e obrigada novamente.