Mini-post para avisar que o blog da minha irmã finalmente entrou no ar! Yay! O layout não ficou exatamente como eu tinha planejado (tive que substituir as fontes, snifs), pois como não compramos um domínio nem hospedagem (mão fechada feelings), tivemos que contar com o que o wp.com oferecia. Aliás, a querida Fernanda teve que se virar pra dar conta! (não só de programar dentro do wp, mas de me aguentar também, heh). Para quem caiu de paraquedas no blog hoje, dá uma olhada nesses outros dois posts: Making of | Abduzeeda. Um beijo especial pra minha irmã, que não se prestou a fazer um briefing quando eu pedi, mas depois do blog pronto quer alterar um monte de coisa no layout! #socorro

Quick-post to announce that my sister’s blog is finally online, yay! The layout didn’t turned out exactally like I had planned (I had to change the fonts *sobs*), because we chose not to buy a domain or a hosting thingy. Because of that, the lovely Fernanda used only what wp.com had available to implement the layout. But her biggest accomplishment was to survive another project with me! For you who just landed here out of nowhere, check out also theses other two posts: Making of | Abduzeeda. A special thanks to my sister, that didn’t make a briefing when I asked her to, and now wants to change “a few things” in the layout! #killmenow

A couple of months ago I developed a set of illustrations for Petrobras Prata da Casa, an award that celebrates and recognizes the employees that are exceptional in hobbies and activities outside the company. The challenge was to represent people from all around the world doing all sort of things (not to mention that character illustration is not my specialty) but it was fun. I also developed a hotsite, a website, tons of banners, animations… Check out all the illustrations after the jump!

Para o blog não ficar tão jogado às traças, decidi colocar mais um rascunho reprovado por aqui. Este sketch foi feito para um estúdio de design, em 2007 ou 2008, e eu não lembro direito o porquê da reprovação. Aprendizado: As vezes mesmo seguindo o briefing criativo, sua ideia será reprovada. Legal, não? Em tempo: criei uma categoria só para as idéias reprovadas, check it out!

Another unapproved idea! This sketch was made for a design studio, in 2007 or 2008, and I really can’t recall why it wasn’t approved. What I’ve learned: Even if you follow the creative briefing, your ideas will get rejected sometimes. Isn’t it awesome? (I created a new category just for my unused ideas, check it out!)

É tão triste quando você se empolga com um projeto, faz um rascunho todo caprichado e ouve o clássico “…não era bem isso” do cliente, né? E ver aquela idéia que você tinha adorado sendo jogada no limbo da sua gaveta, que tragédia. Mas agora achei um jeito de ressucitar esses projetos assassinados pelo cliente: colocarei aqui no blog, e explicarei o porquê da reprovação. O rascunho que inicia essa seção foi feito para um site italiano (camuflei o nome da empresa com aquele Lorem Ipsum malandro, hehe). Eles não curtiram porque acharam muito infantil. E agora, mais de um ano depois, vejo que eles tiveram razão, o projeto deles pedia por algo mais sóbrio. Aprendizado: provavelmente acabei desperdiçando uma idéia legal com um rascunho muito infantil.

I’s so sad when you get really excited about a project, make a neat sketch, only to hear the classic “meh… it wasn’t what I was expecting…” from the client, right? And to see that idea been thrown into your drawer, oh the tragedy. But now I found a way to ressucitate the killed projects: I’ll upload them here in my blog! Plus, I’ll explain why the idea wasn’t approved. The sketch above was made for an italian website (I protected the companies identity with a laughable lorem ipsum, hehe). They didn’t liked it because it was too childlike. And now, more than a year later, I see that they were right, their project asked for something more sober. What I’ve learned: I probably threw a nice idea away by making a too cartoonish sketch.

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.

My blog was dead offline for awhile, so I used to upload my #SketchxVector series into my twitpic. Now that my website is up and running again, I guess it makes more sense to post these images over here, right? I made this illustration for a Chinese/Japanese restaurant and I used a lot of oriental icons to build the layout. (ps: I need English lessons asap )

Eu adoro ver making of de projetos. Acho tão legal analisar os rascunhos e ver o trajeto criativo que aquele profissional traçou. Por isso, sempre que puder, vou colocar meus rabiscos aqui! Os sketches da vez são para um projeto que ainda não foi veiculado (assim que o trabalho final ficar pronto, publico aqui também). Clica aqui para ver todas as imagens.

Eu vivo reclamando que não tenho tempo para escrever aqui no blog, né? Mas também pudera, entre os meus freelas e meu vício por redes sociais quase não sobra tempo pra nada, hehe. É Flickr, Twitter, Facebook, Behance, etc etc etc, ufa! Em homenagem ao meu amor pelas redes sociais e outras tralhas utilidades da internet, criei essa ilustração aí em cima, com minhas distrações on-line preferidas. Alguém se arrisca a achar todas? Hein? Valendo! Agora que percebi que esqueci o Shelfari ali em cima. Tá vendo? É tanto vício que nem eu dou conta de lembrar

Declare você também o seu amor pelas inutilidades on-line!
Escolha a resolução que mais se adequa ao seu monitor e baixe aqui seu wallpaper:

• Resolução 1024 x 768
• Resolução 1280 x 1024
• Resolução 1440 x 900
• Resolução 1680 x 1050