Estou super feliz: no começo dessa semana fui “abduzeeda“. Explico: o Fábio Sasso, dono do super site de design Abduzeedo, publicou como “Tutorial da Semana” o passo a passo que fiz para o blog da minha irmã. Obrigada, Fábio! Fiquei tão feliz com a repercussão, que me empolguei em fazer novos tutoriais!

I’m really happy: This past monday I was… “abducted by design“. I explain: Fábio Sasso, the founder of one of the coolest design sites I know – Abduzeedo – published my making of as their “Tutorial of the week“. Thanks, Fábio! I’m thinking about making new tutorials, what do you guys think?

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.

Olha que super legal: fui convidada para participar da seção “Passo a passo” da revista AbcDesign #32. (Obrigada, Mari!) Para deixar a matéria bem interessante e completa, decidi fazer uma ilustração especialmente para ela, podendo assim registrar todo o processo de criação, do começo ao fim. Como minha irmã estava há tempos me enchendo a paciência por uma ilustração, decidi aproveitar a oportunidade e fazer um desenho para o header do blog dela: A modo mio. Aliás, o blog da minha irmã é muito divertido, recomendo! E fica a dica: essa edição da AbcDesign está muito legal, vale a pena comprar. Essa semana ainda coloco aqui no blog o passo a passo gigantesco na íntegra!

I was invited by AbcDesign magazine #32 to participate in their “Step by Step” session – super yay! To make the making of really interesting and complete, I decided to make an illustration specially for it, and register the whole creative process. Since my sister was bugging me for ages for an illustration, I decided to make a drawing for her blog: A modo mio. Btw, her blog is really funny, you should check it out. Also, this edition of AbcDesign is really cool, really worth the buy. Later this week I’ll post here the complete making of!

1982 – 2010.

.

Eu estava no começo da faculdade quando me mostraram a revista NewWebPick. Lembro de ficar dias e dias babando nas incontáveis páginas da revista digital mais legal que eu já tinha visto. Alguns anos se passaram e – vejam só – cá estou eu, participando da edição #28, com uma entrevista minha e um mini showcase do meu trabalho. Nem preciso dizer que amei o convite, né? Ah, e escolheram uma ilustração minha como background da revista, adorei! Como ainda não saiu a edição free da revista, fiz um printscreen das páginas para vocês e colei a entrevista na íntegra. Clica aqui para espiar o mega-post-completo.

I was featured in the NewWebPick digital magazine with an interview and a mini showcase of my work, yay! Check out the images and the full interview here.

» Tell us a little bit about your background?
I grew up in an pretty island located in southern Brazil named Florianópolis, a city with over 40 beaches. Even though Floripa is a beautiful place, at a early age I started to travel the world every chance I got. I always loved to draw, create artsy stuff and to stay for hours straight in the computer, so to study Graphic Design seemed like the right thing to do. I worked as an Art Director and Graphic Designer in studios and agencies in Brazil and Italy (where I lived for a year). Now I’m back in my hometown, where I work fulltime as a freelancer Designer and illustrator.

» Who are your main inspirations? / What are your influences?
My main inspirations are the nature, good music, the peculiarities of the daily life and interesting books. I also admire the artistic movement Art Nouveau and it is without a doubt a big influence in my works.

» How do you keep motivated and interested?
A good way to stay always motivated and excited about Graphic Design is to alternate both personal and commercial projects. I also try to work on projects that stimulate and defy me, pushing myself to always evolve.

» Do you have any new projects coming up that you can tell us about?
I’m currently developing illustrations and layouts for a nice project for Petrobrás (Brazilian petroleum company) that will target different people, from diverse cultures, ages, genders and ethnicities. The initial research was very fun and I just started developing the layouts.

» What do you know about your country’s design/designers?
Even though the formal practice of Graphic Design in Brazil is recent, I think that our designers are among the best in the world. I believe that our rich visual culture has contributed to a generation of inspired, creative and versatile professionals.

» What is your most favorite commercial design of your own?
I like a series of illustrations made for an Italian Design Studio, where I had to follow the clients briefing and use a really bright and saturated palette, instead of using my usual harmonic and washed colors. The challenge to work in a way that I wasn’t used to was positive and I really liked the final result.

» Any words you would like to pass it to new comer designers?
Create a website or a blog to showcase your layouts and illustrations, seek for other professionals feedback, accept constructive criticism and develop a network. Do personal projects and really apply to your academic projects to evolve as a designer and build a nice portfolio.

» Any final comments:
I would like to thank for this interview’s invitation. NewWebPick has been an important reference to me for a long time and it’s really cool to be able to be a part of it and, perhaps, inspire others as well. I would like to invite the readers to visit my website (www.carolrivello.com) and to check out my twitter (www.twitter.com/carolrivello). Cheers from sunny Florianópolis!

Eu sempre comento que a gente pode achar inspiração em qualquer lugar, né? Então decidi criar essa seção aqui no meu blog, com imagens que me inspiraram de alguma forma. Como recentemente estive passeando em Buenos Aires, achei legal começar por algumas fotos que tirei lá. Clica aqui para ver o post completo.

I always say that we can find inspiration everywhere, right? So I decided to create a session here in the blog dedicated to images that inspired me somehow. Since I just returned from a trip to Buenos Aires, I thought it would be nice to start with some pictures that I made there. Click here to read the full post.

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 )

Hoje decidi trocar o background do meu twitter por esse simpático monstrinho. Daí pensei: Ah, bem que eu podia disponibilizá-lo para download lá no blog também né? Clica aqui para fazer download do background! (Dica: para ver como ele fica aplicado, dá uma espiada no meu twitter). Ah, e se você ou sua empresa está querendo uma página do twitter personalizada e bem legal, já sabe quem chamar!

Today I decided to change my twitter background image. And then I thought: Hey, I could share this treat as a giveaway in my blog! Click here to download the background. And don’t forget: If you are looking for a cool and personalized twitter page for you or your company, you know who to call!

Para a aplicação dele ficar certinha, aqui vão algumas dicas:

• Mantenha a opção “tile background” desativada. Desta forma, a imagem vai ficar alinhada com o topo esquerdo da tela.
• Escolha uma cor para o background que combine com a imagem usada. Que tal usar a mesma cor do fundo da ilustração? É essa aqui: #d0ce9b
• Selecione cores para os links e textos que combinem com a ilustração!

Esse background está disponível sob a seguinte Licença Creative Commons: Atribuição-Uso / Não-Comercial / Vedada a Criação de Obras Derivadas. // This background image is available under the Creative Commons License: Attribution / Non Commercial / No Derivative Works.