Manual básico para designers by tiago_ribeiro

MARKETING DE CONTEร DO PASSO A PASSO!

Manual bรกsico para designers Os mais acessados do Vitamina Publicitรกria sobre Design

! !

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! ! ! ! ! ! ! ! ! ! ! ! !

! ! ! ! !

Sinta-se livre para compartilhar, republicar ou passar este livro pela internet… Apenas não altere o seu conteúdo, combinado? Obrigado!

! ! ! ! ! ! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

itamina

P U B L I C I T Á R I A

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Conteúdo:

! 27 blogs que todo designer deve conhecer……………………..……………………………………..…05 53 coleções de ícones para Flat Design…………………………….…………………………………..…..28 Gerador de Sombra Flat em Plano Longo (Long Flat Shadow Generator Psd)..……….…66 36 recursos de Flat Design……………………………………….………………..………..………..………..…67 Como fazer uma ilustração vetorizada – do sketch até a arte ﬁnal…………………………….97 10 Técnicas de Design para Fotos com Textos………………………………………….……..……….105 Como ﬁcar em alta no mundo do branding (mesmo com um orçamento curto)..……119

! ! ! ! ! ! ! ! ! ! ! ! ! ! !

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Introdução

! ! Por Daniel Z. Chohfi ! A sessão de Design sempre foi a mais acessada do Vitamina Publicitária. !

Com artigos como 27 blogs que todo designer deve conhecer que chegaram a mais de 5.000 compartilhamentos somente dentro do blog e outros milhares nas redes sociais que sobem a cada dia, criamos este Ebook resumindo o conteúdo de primeiro pra você levar para qualquer lugar.

! ! Introdução ao Design !

Temos certeza que você irá tirar proveito das técnicas e indicações que reunimos aqui para todos os designers, seja você um iniciante ou expert neste ambiente maravilhoso.

! Boa leitura! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

27 blogs que todo designer deve conhecer

Este post acabou se tornando um dos mais compartilhados de todos os tempos do Vitamina e não é mais apenas os 26, 27 ou mais blogs que todo designer deve conhecer.

Adicionamos todas as indicações bacanas comentadas aqui no blog e nas redes sociais e esta tornou-se uma lista com dezenas de boas indicações.

Designers Brasileiros

Blog sobre dicas de design, eventos, colunas, tutoriais e assuntos gerais relacionados ao mercado brasileiro.

! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Assuntos Criativos

! Blog referência na área de Design e Publicidade. ! 100% Design !

O 100% Design aborda variados assuntos e é fonte de inspiração visual e informação de qualidade com mais de 500 posts e 8.000 imagens.

! ! ! ! ! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

Bons Tutoriais

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! ! !

Blog de Design com uma pitada de criatividade de qualidade, Inspirações, Ideias para Campanhas Publicitárias, Tutoriais Photoshop, Web Design e muito mais.

Boteco Design

! !

O Boteco Design teve início como um grupo do Google de colegas da faculdade que gostavam de divulgar e comentar notícias, trabalhos, exposições, cursos, e tudo mais relacionado ao nosso curso, Design.

! ! Choco La Design !

Choco La Design é um dos maiores veículos independentes de produção de conteúdo relacionado a Design.

! !

vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

Clube do Design

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! ! !

Dicas para designers. Os melhores posts de design, em um só lugar. Photoshop, Illustrator, CorelDRAW, Indesign e mais.

Criatives

Blog de Design e Criatividade com inspirações, tutoriais, Web Design, Eventos de Design, Dicas para Blogs e idéias para Campanhas publicitárias.

! Cutedrop ! !

Visual e inspiracional. Blog sobre design, tecnologia, moda, culinária, publicidade, música e muito mais.

! ! ! ! !

vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

Design Blog

! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Blog de design gráﬁco e web com artigos exclusivos, dicas, teoria do design e muito mais para você aprender design.

Design Culture

O Blog Design Culture nasce para levar o melhor do Design, Cultura, Comunicação, ações criativas e as mais diversas expressões de artes.

! ! ! Design Fera ! ! Blog Parceiro do DB e um dos maiores do Brasil. ! ! ! ! ! vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

Design In a Box

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! ! ! !

Blog com informações sobre design gráﬁco, web design, ilustração, arte, publicidade, fotograﬁa, moda e todas estas coisas bacanas que nós adoramos.

Irresistíveis

! Inspiração para mentes criativas. ! Design On The Rocks !

Blog referência quando o assunto é Design, com layout e domínio nova, visa crescer muito mais.

! ! ! ! !

vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

Vitamina Publicitรกria

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! ! ! !

Blog sobre Publicidade, Design, Marketing Digital, Redes Sociais, Tecnologia e Jornalismo. Somos nós!

! !

Designer Eﬀects

! !

O Designer Eﬀects é um blog que aborda tudo sobre o mundo do design, do impresso a web, do analógico ao digital.

! Designerd !

Blog de Design e Web Design, com dicas para estudantes e proﬁssionais, inspirações para designers, ilustradores e outros proﬁssionais criativos e muito mais.

! !

vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

Designine

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

O blog mostra, como conteúdo principal, campanhas publicitárias, design, artistas e seus trabalhos, novidades e muita criatividade!

Des1gn’On

Blog voltado para estudantes, proﬁssionais e pessoas em geral que curtem design e artes. Na minha opinião, é um dos blogs mais bacanas atualmente voltados a design. Também é um dos parceiros do Vitamina Publicitária.

LogoBR

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

É respeitado e citado como referência por estudantes, acadêmicos e proﬁssionais quando se trata de branding.

! ! Orange Design !

A maior razão para a existência do Orange Design é divulgar o design e sua proﬁssão através de artigos, entrevistas com designers premiados e análise de produtos.

! Paroxismo Records ! Blog parceiro do Designers Brasileiros e trata sobre vários assuntos. ! ! ! ! ! ! ! vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Pixel Coﬀee

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Podcast bem humorado sobre design, propaganda, games, programação, música e muito mais.

! Revelando Ideias !

Blog dedicado inteiramente para os apreciadores de inovação, criação, design, fotograﬁa, ilustração, animação e muito mais.

! ! Sala7 Design !

O Sala7 é um blog feito por estudantes de design que resolveram juntar o interesse, estudo, paixão e vontade bloggar, tudo em um só lugar.

! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Café Com Galo

! !

vitaminapublicitaria.com.br

Manual bĂĄsico para designers: Os mais acessados do Vitamina PublicitĂĄria sobre Design!

! ! ! Blog muito bacana sobre design, entretenimento, fotograďŹ a e marketing. ! De Volta ao Retro

Lab Criativo

! !

vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

DESIGNICES

! !

Design & Chimarrรฃo

! !

vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

LOGO.BR

abduzeedo.com / abduzeedo.com.br

! !

vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

A List Apartlist

Smashing Magazine

! !

vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

Desafio Criativo

! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

53 coleções de ícones para Flat Design

2013 foi o ano do Flat Design e milhares de coleções foram criadas pelos mais variados designers. O Mashable fez uma matéria que reuniu 53 coleções de ícones lindos para Flat Design e eu gostaria de compartilhar com nossos queridos leitores para que possam utilizar em seus projetos pessoais e comerciais de alta qualidade.

O Mashable é um dos, se não o mais famoso portal de marketing digital do mundo, e cobre as principais notícias de mídias sociais sobre temas como Facebook, YouTube, Gmail, Twitter, Amazon, Pinterest e muito mais.

! !

1. FlatIcons.co

! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

O FlatIcons.co oferece ícones lindos disponíveis PSD, SVG, EPS e em quatro tamanhos diferentes. Como são vetores, permitem a ampliação perfeita para qualquer tamanho mantendo a qualidade.

! 2. Linecons !

O Linecons é do DesignModo, uma das principais referências em ﬂat design. Disponibiliza ícones gratuitos totalmente escaláveis em vetor com estilos de contorno. Cada ícone está disponível em HTML, CSS, PDF, AI, PSD, PNG e SVG.

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

3. FlatIcons.net

FlatIcons.net é um fabricante de ícones, permitindo que você crie seus próprios ícones ﬂat livres de royalties, que você pode vender, doar ou usar. Para começar, basta escolher um ícone dos 2500 disponíveis e personalizá-lo.

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

4. Flatalicious

Aqui você vai encontrar um conjunto bem concebido de 48 ícones ﬂat, disponíveis em formato PSD. São ícones em vetor totalmente escaláveis, que podem ser redimensionados para qualquer exigência. Eles são perfeitos para projetos web, aplicativos ou infográﬁcos.

! ! 5. IconShock !

Esta é uma coleção gigantesca com mais de 3.600 ícones no estilo ﬂat, que podem ser utilizados em projetos pessoais e comercial. Criados em um estilo suave de cor vibrante, e disponíveis em três formatos, há ícones aqui para atender a qualquer exigência.

! ! ! ! !

vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

6. Pixeden

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Esta coleção é a minha favorita. A Pixeden oferece uma coleção completa de ícones ﬂat criados em um estilo minimalista com detalhes únicos. Cada ícone está disponível em vetor e PSD.

7. Program Icons

Criado pela equipe de design da Applove , esses ícones são muito bem trabalhados e projetados, com requintada atenção aos detalhes. O site apresenta os ícones de programas como o Adobe Photoshop, iTunes, Chrome e Firefox, entre outros.

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

8. Meteocons

! !

Meteocons é um conjunto ﬂat com mais de 40 ícones disponíveis em PSD, CSH, EPS, SVG, Desktop Font e formatos de fontes web. Eles podem ser utilizados em projetos pessoais e comerciais, e a Meteocons Font é fornecida em formatos TrueType e OpenType, completo com um kit @ font-face.

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

9. Flat Icons PSD

Este é um conjunto de 20 ícones ﬂat coloridos em formato vetorial PSD, disponíveis no tamanho de 128 x 128 pixels, e inspirado por ícones do Google. São camadas vetoriais, para que eles possam ser facilmente editadas e livres para uso pessoal e comercial.

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

10. Flatties

Flatties é um super conjunto legal de ícones ﬂat. Todo o conjunto é trabalhado a partir de formas vetoriais em 48 x 48px, e vem em um PSD organizado, AI e PNG separados.

! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

11. Stroke Line Icons

Aqui está um outro conjunto de ícones simples na linha da Pixeden, disponíveis em PSD, EPS, AI e PNG.

12. Long Shadow Social Icons

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! ! ! !

Estes ícones lindos de mídia social são projetados em um estilo de sombra, e estão livres para projetos pessoais e comerciais. Eles estão disponíveis em tamanhos de 32, 48, 72, 128 e 256px.

! !

13. Flat Icons – Jan Dvořák

Este pacote de ícones ﬂat do designer Jan Dvořák inclui 24 ícones disponíveis como um download gratuito em PSD, para fácil personalização.

! ! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

14. Flat Icons Freebie

Esta coleção de ícones ﬂat do designer Seevi Kargwal são maravilhosamente trabalhados com um estilo único. São seis ícones que incluem o Safari, Instagram e bate-papo, disponível como um PSD livre.

15. Flat Icons – Pierre Borodin

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Uma seleção de ícones ﬂat do designer Pierre Borodin, com símbolos de interface, como um relógio, calendário, notas e e-mail. Também está disponível um outro conjunto de ícones lisos de Borodin, como um PSD livre.

16. Colorful Flat Icons

Michael Dolejš projetou um conjunto de ícones ﬂat coloridos e livres, com ícones de aplicativos conhecidos como Chrome, Spotify, Skype, Evernote e muito mais. Disponível em formato PSD.

! ! ! ! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

17. Flat Social Media Icons

Este é um conjunto livre de 35 belos ícones em ambos os formatos PSD e PNG, que podem ser utilizados em projetos pessoais e comercial. Os ícones incluem Dribbble, Facebook, Google, HTML5, Twitter e muito mais.

18. Flat Social Icons

! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Conjunto de 16 ícones ﬂat da Pixeden, disponível como um PSD livre. Cada ícone é projetado com um efeito de sombra longa, com o PSD facilmente editável. O conjunto inclui os principais ícones de mídia social, incluindo Twitter, Behance, LinkedIn, Dribbble e muito mais.

19. Flat UI

O kit de UI ﬂat da Designmodo inclui uma seleção de ícones ﬂat para os principais elementos da interface, incluindo um calendário, chat, compras, relógio e lista de tarefas. Com certeza é um dos melhores desta lista.

! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

20. Metro UI Icons

Inspired by the ﬂat Windows 8 style, this huge set includes over 725 icons, and includes icons for applications, browsers and operating systems. All icons are also available in 256-pixel .ico format.

! !

21. Flat Icons – Buatoom

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Inspirado no estilo ﬂat do Windows 8, este enorme conjunto inclui mais de 725 ícones para aplicativos, navegadores e sistemas operacionais. Todos os ícones também estão disponíveis em 256px. Formato ico.

! !

22. Flat PSD Freebie – Alberto Valentin

Estes pequenos ícones deslumbrantes do estilista Alberto Valentin estão disponíveis em formato PSD. Eles seguem o estilo ﬂat perfeitamente, com grande uso de cores brilhantes e incluem chat, iMac, ícones de relógio e muitos outros bacanas.

! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

23. Flat Social Icons – Jorge Calvo

Este é um grande conjunto de ícones sociais minimalistas livres do designer Jorge Calvo, pronto para uso em projetos de impressão e web. Eles estão no formato EPS, são totalmente escalonáveis e baseados em uma grade para resultar em uma precisão extrema. Também está disponível a versão pronta web em HTML, em CSS3 animado!

! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

24. Flat Icons – Dan Vineyard

Estes 12 ícones ﬂat livres no formato PSD, do designer Dan Vineyard, podem ser usado no trabalho pessoal e comercial. O conjunto inclui ícones de perﬁl, zoom, lixo, ícones de bate-papo, ícones de pasta e muito mais.

25. Flat Program Icons – Alexander Schultz

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Alexander Schultz desenvolveu este belo conjunto de ícones de programas, disponíveis em formato PSD, com ícones para muitas aplicações importantes, incluindo o Adobe Photoshop, Illustrator e Dreamweaver, entre outros.

! !

26. Publicons

De Joshua Sortino, Publicons é uma coleção crescente de ícones ﬂat. Enquanto trabalhava em projetos de editor, Joshua se cansou de recriar ícones para plataformas que normalmente não são incluídos com conjuntos de ícones.

27. Flat File Icons

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Um conjunto Premium, que consiste em uma coleção de estilo ﬂat, ícones de arquivos baseados em vetor. Eles são super simples e podem ser usado em conjunto com qualquer tipo de ícone ou texto. As cores também são facilmente editável.

! !

28. Flat UI Kit PSD – Martin Knize

Um extenso pacote de ícones ﬂat do designer Martin Knize, que inclui mais de 150 ícones em formato PSD. Knize também fez outros dois pacotes que estão disponíveis para download.

! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

29. Plex Icon Set

Plex é um pacote de ícone ﬂat disponível apenas para uso pessoal, e inclui mais de 119 ícones em formato PNG, que vão desde Chrome, Firefox, calculadora, e HTML para VLC, YouTube e Twitter.

! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

30. Cosmo Mini Icons

Esta é uma versão ﬂat dos ícones Cosmo fornecidos pelo IcoJam, e inclui uns impressionantes 1.262 ícones em 40 x 40px. Formato PNG.

31. Flat Icon Set – Stafie Anatolie

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Este é um conjunto excelente de ícones maravilhosamente projetados em ﬂat design e formato PSD, de Staﬁe Anatolie. Os ícones incluem o Google Chrome, Gmail, YouTube, Apple e muito mais.

32. Free Flat Icon Set – Barry McCalvey

Este é um conjunto em escala de cinza de ícones do designer Barry McCalvey, num estilo simples, com um calendário, relógio, câmera, calculadora e muito mais.

33. Flat Icons Freebie – Seevi Kargwal

Aqui está outro belo conjunto de ícones ﬂat do designer Seevi Kargwal, que pode ser baixado gratuitamente em formato PSD. O conjunto inclui uma calculadora, calendário, notas, câmera e muito mais.

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

34. Social Icon Set – Stafie Anatolie

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Este é um outro ícone flat definido pelo designer de Stafie Anatolie, com logos e símbolos dos mais populares sites de mídia social, como Dribbble, Facebook, YouTube e outros.

! !

35. Flat Social Icons – Thiago Marques

Mais um brasileiro da lista, foi originalmente criado para um projeto de cliente. Estes ícones sociais do designer Thiago Marques incluem vários ícones sociais e cartões de crédito populares.

! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

36. Flat Icons – Visual Creative

! !

Este é um conjunto ﬁnamente trabalhado de ícones ﬂat do estúdio Visual Criativo, em formato PSD com 512px. Os ícones incluem um calendário, botão de mídia, dicionário e sacola de compras.

! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

37. Eldorada Mini

Eldorado Mini é uma versão gratuita de ícones e inclui mais de 1262 PNGs 40 x 40px. Estes ícones estão disponíveis para uso em projetos pessoais e comerciais.

38. Flat Credit Cards

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! ! !

Aqui está uma seleção de cinco ícones de cartão de crédito no estilo ﬂat do designer Ian Silber, usando uma fonte Open Sans para a consistência. O conjunto inclui vários grandes fornecedores do cartão de crédito, incluindo American Express, Visa e Mastercard.

39. Circle Flat Icons

Conjunto de 24 ícones de alta qualidade, retina e prontos para mídias sociais, que têm formas circulares e apresentações vibrantes, combinando duas cores. Eles estão disponíveis em formato PNG em quatro tamanhos diferentes: 256 x 256px, 128 x 128px, 64 x 64 e 32 x 32px.

! ! ! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

40. Flat Social Media Icons – Nathan Brown

Um conjunto de 30 ícones ﬂat de mídia social em formato vetorial, disponível como um download gratuito em PSD. Os ícones incluem plataformas populares, como o WordPress, Twitter, Skype, Evernote, Dropbox e muito mais.

41. Flat Icon Set – Design Deck

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Estes ícones ﬂat podem ser baixado como um conjunto gratuito de 20, ou como um conjunto que inclui mais de 800 ícones no total. Todos são nomeados e agrupados em um arquivo PSD, que inclui dimensões de 32 x 32px a 512 x 512px.

42. Simple Flat Icons – Graphics Fuel

Coleção com 20 ícones ﬂat de mídias sociais para as suas necessidades de compartilhamento social. Os ícones são criados em 114 × 114px, e podem facilmente ser redimensionados e utilizado para dispositivos móveis ou para a web. Criado com camadas inteligentes, o arquivo PSD pode ser editado facilmente.

43. Free Flat Icon Pack – Nathan Brown

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Este pacote de ícones de Nathan Brown contém 25 ícones ﬂat em vetor em um arquivo PSD. O pacote tem um estilo único e contém ícones para o Vimeo, Calendar, Facebook, Campﬁre, e-mail e muito mais.

44. Flat Icons – Mike Clarke

Este é um conjunto de nove ícones planos do designer Mike Clarke, que está disponível como um download gratuito PSD. Os ícones incluiem uma pasta, e-mail, chat, downloads, bloco de notas e muito mais.

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

45. Flat Icons – OthMane Machrouh

Othmane Machrouh desenvolveu esta coleção de seis ícones ﬂat, que pode ser baixado em formato PSD. Machrouh também criou um outro conjunto de ícones ﬂat que estão disponíveis de forma gratuita.

46. Flat Custom CS Icons

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! ! ! !

Este é um conjunto de 15 ícones personalizados da Adobe Creative Suite, do estilista Tom Newton. Eles estão disponíveis em formato icns. Também tem até um vídeo para mostrar como alterar os ícones para o estilo ﬂat, bacana heim!

47. Flat Icon Pack – Martin Knize

Este pacote de 50 ícones ﬂat do designer Martin Knize vem em vários tamanhos, de 48 x 48 pixels até 512 x 512 pixels, e está disponível em formato PNG. Os ícones Flat apresenta mais 45 novos ícones, e deﬁnitivamente vale a pena baixar.

! ! 48. Free Social Media Icons – Allan McAvoy ! !

Coleção com 32 ícones de estilo ﬂat do designer Allan McAvoy, disponíveis em formato eps., e cada ícone é facilmente escalável e editável. O conjunto inclui muitas

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

plataformas populares, incluindo Dribbble, Paypal, Flickr, Dropbox, Twitter e muito mais.

49. Flat Vector Icons – Jared Kennedy

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Do designer Jared Kennedy, esta é uma seleção de 12 ícones em vetor disponível como um download gratuito em PSD. Os ícones têm um toque retro, e apresentam um jogador de ﬁlme, câmera polaroid, juntamente com os ícones mais tradicionais, como o iPhone e bate-papo.

! !

50. Flat Polygon Icons

! !

Um pacote de ícones do designer Wahid Anggara, seleção apresenta 15 ícones de mídia social belamente projetados em forma de polígono, incluindo Twitter, Facebook, YouTube, Tumblr e outras opções populares.

! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

51. Hex Icons Pack

Este é um grande pacote de ícones do designer Martin Knize, com mais de 170 ícones, além de 45 ícones de jogo. Há uma grande atenção ao detalhe, com cada ícone projetado dentro de uma forma hexagonal. Você pode solicitar ícones adicionais a serem incluídos em pacotes futuros.

! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

52. Flat Icons Pack – Jagjeet Singh

Este é um pacote de 20 ícones ﬂat coloridos em um arquivo PSD de vetor, do designer Jagjeet Singh. Os ícones são em 128 x 128 pixels de tamanho, inspirados nos ícones do Google e de tendência de design ﬂat. São vetores totalmente editáveis.

53. Free Flat Icons – Nikki Hampson

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Conjunto com nove ícones ﬂat, do designer Nikki Hampson, são livres para uso pessoal e comercial. Cada um foi muito bem trabalhado, e a coleção inclui ícones para RSS, favoritos, mapas e muito mais.

! !

Gerador de Sombra Flat em Plano Longo (Long Flat Shadow Generator Psd)

E pra ﬁnalizar com chave de ouro, segue o link para o download de um .psd incrível pra você criar os seus ícones com o conceito long shadow, da Pixeden.

! Download ! ! ! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

36 recursos de Flat Design

Mais um artigo do Mashable que vale a pena traduzir para compartilhar com nossos leitores do Vitamina sobre Flat Design.

Em contraste com a concepção do skeumorfismo, design plano, ou flat design centrase em formas simples, cores e tipografia para enfatizar a clareza e a facilidade de uso. Era um termo cunhado por Allan Grinshtein da LayerVault em seu post “A Era do Flat Design“, publicado no ano passado. O lançamento do iOS 7 provou que o flat design não é mais uma moda passageira, mas com certeza, um passo a frente.

O achatamento de estilo signiﬁca simpliﬁcar os elementos da interface, remoção de elementos estranhos e decoração – como relevos, gradientes e texturas – para criar um design fresco (no bom sentido), limpo, e concentrado na hierarquia dos elementos do layout.

Para ajudar você a começar com o ﬂat design, o Mashable compilou 36 Kits de UI em .PSDs de alta qualidade, cada um com uma variedade de componentes de interface e elementos para a utilização em seus projetos. Há qualquer outro kit de UI de ﬂat design que você recomendaria? Se sim, por favor, compartilhe o link nos comentários abaixo, com os nossos leitores.

! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

1. Flat UI Pro

Flat UI Pro é baseada no Twitter Bootstrap e desenhada em um estilo simples, contendo um grande número de componentes básicos, ícones e símbolos. O kit inclui também uma versão em PSD.

2. Flat UI Free

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Flat UI Free é um recurso livre da Designmodo, e contém os principais elementos básicos de uma interface web para utilização.

3. Flat Design Toolkit

! !

Um kit projetado pelo Freepik, contém todos os componentes essenciais de interface de usuário, fornecendo gráﬁcos e perﬁs de usuário.

! ! ! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

4. Blog/Magazine Flat UI Kit

Este é um kit IU livre visando blogs e revistas, que inclui uma grande variedade de componentes que podem ser usados para criar Websites limpos e coloridos.

! ! ! 5. Vertical Infinity UI Kit !

A Vertical Inﬁnity UI Kit contém uma grande variedade de componentes, a partir de menus, dropdowns, widgets, botões e players de mídia para formas e paginação. Ele também é otimizado para telas retina.

! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

! ! 6. Flat UI Kit – Riki Tanone !

Este é um kit ﬂat de UI em PSD desenhado por Riki Tanone, com um widget de calendário, mapas, etiquetas e muito mais.

! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

! ! 7. Flat UI PSD – Devin Schulz !

Este Kit UI de Devin Schulz possui um conjunto criativo de componentes, incluindo navegação, caixas de entrada e botões.

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! ! !

8. Metro Vibes UI Kit

Vibes Metro é um premiado Kit de UI desenhado e disponível no PixelKit, que presta atenção aos mínimos detalhes e às características das belas cores.

! ! ! 9. Flat UI PSD – Riki Tanone ! !

Este kit é uma outra oferta gratuita de Riki Tanone, com mais componentes de interface de usuário, incluindo um player de mídia e perﬁs de usuário.

! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

10. Featherweight Flat UI Kit

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Um kit de UI abrangente de Sarah Justine, onde cada elemento é em vetor, otimizado para retina e distribuído através de camadas. Os texto e as cores são facilmente editáveis, com projetos que são completamente livres para uso pessoal ou comercial.

11. Flat Web UI Kit

! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Este é um pacote GUI que inclui o projeto de elementos de formulário, controles, widgets, formas e loaders.

12. Flat UI Kit – Sebastiaan Scheer

Este é um Kit UI de inspiração que é gratuito para download como um PSD, e vem com widgets de tempo, um media player e elementos de navegação.

! ! 13. Flat UI Kit – Hüseyin Yilmaz !

Inspirado Kit de UI de Hüseyin Yilmaz, este kit tem os principais componentes de interface do usuário, incluindo perﬁs, players e formas de mídia.

! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

14. Square UI

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

O Square UI é um dos meus preferidos. É um pacote de interface de usuário premium incluindo um conjunto de componentes excelentes, ideal para prototipagem rápida. Há também uma versão gratuita disponível para download que é excelente. Use!

! !

15. Flat UI Kit – Jamie Syke

Um Kit UI colorido de Jamie Syke, vem com uma interessante mistura de componentes e imagens e está disponível como um PSD livre.

! ! 16. Flat Beach GUI !

Uma UI pastel temática de Mike Clarke, está disponível como um PSD gratuito e inclui botões, widgets e componentes de mídia.

! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

17. Flat UI Kit – Zachary VanDeHey

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! ! !

A UI Kit de verão inspirada de Zachary Vandehey, disponível como um arquivo gratuito em Adobe Illustrator, que apresenta widgets, botões, perﬁs, ícones e um media player.

18. Design Shock Flat GUI

GUI em ﬂat design disponível em versão premium ou gratuita, com um enorme número de componentes e elementos.

19. UI Pixels Flat UI Widget

Este é um kit UI ﬂat sensível que usa apenas duas cores, por isso é extremamente fácil de editar e vem cheio de widgets e componentes de interface. Está disponível como um PSD livre.

! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

! 20. Tempees Flat UI Kit !

Tempees oferece um kit ﬂat de UI para suas aplicações ou sites, que inclui vários estilos de botões, ícones de menus, blocos de perﬁl e widgets. Está disponível como um download gratuito em .PSD.

! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

! ! ! ! ! 21. Eerste Flat UI Kit !

Criado pela Design Your Way, Eerste inclui vários elementos gráﬁcos, incluindo menus, perﬁs de redes sociais, formulários de comentários, tabelas de preços, players de vídeo, calendários e muito mais.

! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

! 22. Metro UI Kit

A Metro UI Kit é outra UI excelente, inspirada pelo Microsoft Windows que apresenta estatísticas, gráﬁcos, calendário, menus e estilos de pesquisa.

! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

23. Flat UI Kit – Abhimanyu Rana

Um kit UI maravilhosamente concebido a partir de Abhimanyu Rana presta muita atenção aos detalhes e cores, com widgets, players de mídia e perﬁs de usuário.

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

24. Flat UI – Andy Law

Esta impressionante UI em .PSD está disponível para download gratuito. Possui um sistema ﬂat de cor, estilo, media player, Widgets e muito mais.

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

25. UI Kit PSD – Piotr Kwiatkowski

A UI Kit lindamente projetada de Piotr Kwiatkowski está disponível como um PSD grátis e tem widgets, gráﬁcos, galerias de arte, mapas e um carrinho de checkout.

! ! ! ! 26. Simple & Bold UI Kit !

Elementos de interface do usuário em um kit PSD livre, com estados de botão, feeds de notícias, media players, menus de lista, painéis, widgets de calendário e muito mais.

! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

! ! ! ! 27. Flat UI/UX Kit – Asim Craft ! !

Um Kit UI ﬂat de Vectornpixel, que contém campos de formulário, botões de navegação, fotos e muito mais. Ele está disponível como um download gratuito em .PSD.

! ! ! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

! ! 28. Flat UI Kit PSD – Andreea Nicolaescu !

Este kit de elementos de interface do usuário de Andreea Nicolaescu tem menus, players de mídia, botões, forms, calendários e listas suspensas, disponível como um download gratuito em .PSD.

! ! ! ! ! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

! ! ! 29. E-Commerce Flat UI Kit !

Está disponível como um download gratuito em .PSD e contém vários elementos de interface do usuário para uso em projetos de comércio eletrônico, os quais são facilmente editáveis.

! ! ! ! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

! ! ! 30. Flat UI Elements – Andrew Beckwith !

Elementos de interface do usuário em alta qualidade com widgets e componentes maravilhosamente concebidos com grande atenção à tipograﬁa.

! !

vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

31. Polaris UI Kit

Polaris UI Kit é um belo conjunto de componentes de interface do usuário, que inclui caixas de edição, botões de navegação e widgets para uso em seus projetos de design.

! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! ! 32. Free Flat UI Kit – Visual Creative !

Este é um kit UI livre da Creative Visual que possui um player de mídia, botões, um relógio, formulários de login e perﬁs de usuário. Disponível como um download em .PSD.

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! ! 33. Flat UI Kit PSD – Pro Web Design !

Disponível gratuitamente e inclui navegação, painéis de usuários, gráficos de área, gráficos de barras, gráficos de segmento circular, elementos de entrada, sliders, interruptores, botões e áreas de widget.

! ! ! ! 34. Dark UI Kit – Hüseyin Yilmaz !

Outro kit UI de alta qualidade de Hüseyin Yilmaz, caracteriza um projeto escuro, e inclui botões de mídia social, widgets, formulários de contato e navegação.

! ! ! ! ! !

vitaminapublicitaria.com.br

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

35. Super Clean Flat UI Kit

! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Limpo, bem organizado Kit UI de WeCreate, disponível como um download gratuito em .PSD. É facilmente editável, contendo vários dos principais componentes de interface.

36. Flat UI PSD – Alexandre Crenn

Simples e bem organizado kit de Alexandre Crenn, que também apresenta um wireframe de iPhone ﬂat.

! ! E assim ﬁnalizamos as indicações de 36 recursos para ﬂat design. ! Bom proveito! ! ! ! ! ! vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Como fazer uma ilustração vetorizada – do sketch até a arte final

O que é uma ilustração vetorizada?

! !

Vetores são demais! Ao contrário da raster art (que é uma imagem feita de pixels, como um JPG), o vetor é feito de curvas, caminhos e pontos. Suas propriedades, como cor, preenchimento e contorno, podem ser facilmente editadas.

A melhor parte sobre vetores é o fato de serem incrivelmente úteis. Os designers não têm que se preocupar com dimensão em pixels ou com resolução, uma vez que os vetores são construídos a partir de caminhos e pontos e podem ser redimensionados, sem preocupação com perda de detalhes.

Um único vetor pode ser usado para uma miniatura na tela do computador, ou para ser impresso em um outdoor, com a mesma qualidade.

! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Mãos na massa!

Fazer arte em vetor é fácil. Você verá que a possibilidade de editar as linhas e formas permitirá que você trabalhe rapidamente, gastando seus esforços mais no lado artístico do que no técnico.

Este tutorial irá mostrar um passo-a-passo para se fazer uma arte vetorizada, mas não se trata da única maneira. Então, sinta-se livre na utilização de todas as técnicas apresentadas aqui.

O Adobe Illustrator é o software mais popular na criação de vetores. Ele é usado por proﬁssionais e amadores e é muito versátil. No entanto, você verá que o Illustrator não é o programa mais fácil logo no início.

Mas, “brincando” com as ferramentas e fazendo alguns testes, é possível aos poucos se aprimorar.

! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Parte 1: Comece com um esboço

! Desenhe e escaneie !

Sketches são importantes. Você tem uma ideia na cabeça, mas você não sabe como ele vai se concretizar até que comece a desenhar. Sua primeira ideia é raramente a sua melhor criação, então fazer vários esboços é a melhor maneira de testar e descobrir boas ideias.

Você pode fazer o seu desenho como quiser: pode ser escaneando ou fotografando um modelo, desenhando em um tablet ou usando outro programa como o Photoshop. Tudo o que importa é que você faça um esboço e aplique-o no ilustrador, para poder usá-lo como um guia para fazer o vetor.

! ! ! ! ! ! !

vitaminapublicitaria.com.br

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Sugestões de ferramentas

A “Brush” é uma ferramenta de desenho sensível à pressão (que pode se usada como pincel).

A ferramenta “Pencil” é para o caminho básico de desenho / edição. É útil para fazer formas.

A “Pen Tool” pode criar caminhos ponto a ponto, em linhas retas ou curvas.

! A “Select Tool” serve para selecionar os objetos. ! !

A “Direct Select Tool” é para selecionar e editar pontos individuais em seus caminhos.

! !

Parte 2: Desenhando suas linhas

! !

vitaminapublicitaria.com.br

100

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Depois de ter o esboço no Illustrator, podemos começar a trabalhar. Faça o seu esboço transparente usando conﬁgurações de opacidade do Illustrator (no “Control” da paleta, na parte superior ou utilizando a paleta “Transparency”).

Mantenha o seu trabalho artístico organizado, usando camadas. Eu acho que é o melhor para manter o seu esboço transparente e para criar camadas de cada fase de criação de sua arte.

Tire suas linhas usando a ferramenta “Brush” ou a ferramenta “Pencil”. Como já indiquei, o “Brush” é recomendado porque é sensível à pressão (se você estiver trabalhando com um tablet), e mostra as linhas como você está desenhando.

A ferramenta “Pencil” também tem alguns usos, tais como desenhos de linhas mecânicas e uniformes.

! !

Parte 3: Adicionando cores

Na camada abaixo de sua linha de trabalho, vamos começar a adicionar cor para preencher nossas formas.

Esta é uma etapa importante, pois é aqui que você vai decidir o esquema de cores da sua imagem como um todo.

Você pode fazer alterações em suas cores a qualquer momento, mas é muito mais simples de fazer alterações nesta fase inicial, antes que você tenha ido longe demais e já acrescentado muitos detalhes.

! !

vitaminapublicitaria.com.br

101

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Eu também gosto de mudar a cor da minha linha de trabalho para complementar as cores de base que eu estou escolhendo (só trabalhar com as linhas do desenho na cor preta é chato).

! Existem muitos métodos que você pode usar para fazer suas áreas de cor. !

Não importa como você opta por adicionar a sua cor, pois não há maneira errada para o trabalho, desde que ﬁque do seu gosto!

Você pode colorir seu desenho usando a ferramenta “Brush”. Usando diferentes tipos de pinceladas, permite criar muitos efeitos.

Ou você pode desenhar à mão formas grandes e planas, usando a ferramenta “Pencil”. Esse tende a ser o método mais rápido.

! ! ! ! ! ! !

vitaminapublicitaria.com.br

102

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Parte 4: Adicionando detalhes de cor

Agora em uma camada acima de sua camada cor de base (mas abaixo da camada de linha de trabalho), vamos adicionar alguns detalhes de cor.

Usando a ferramenta “Brush” dentro de suas áreas de cor, você pode pintar em alguns tons mais escuros e mais leves para adicionar sombras e luzes.

! É hora de brincar com as cores e traços para criar o efeito de profundidade! !

Se você estiver usando um tablet de desenho sensível à pressão, você pode usar os traços ﬁnos e grossos para pintar facilmente nas formas exatas que você precisa.

! ! ! ! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

103

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Feito!

Sua obra-prima está pronta! Se você chegou até aqui, você deve ter uma criação vetorizada, que está bem organizada em camadas, com formas facilmente editáveis.

Este tutorial foi concebido para ser geral, então eu não entrei em muitos detalhes sobre cada etapa, é apenas uma rápida visão geral do processo de abertura do esboço à arte ﬁnal. O Illustrator não é o programa mais fácil de aprender, mas se você tiver um tempinho, pode descobrir um novo talento.

! Texto e ilustrações: Doodle Machine – André Jolicoeur (www.doodlemachine.com) ! Fonte: iStock by Getty Images (www.istockphoto.com.br) ! ! ! ! ! vitaminapublicitaria.com.br

104

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

10 Técnicas de Design para Fotos com Textos

Uma das melhores técnicas que você pode ter atualmente em seu arsenal é criar artes que possuam fotos com texto. Esta prática está sendo utilizada em uma quantidade absurda de blogs e ações publicitárias. Porém, pode ser uma das habilidades mais difíceis de fazer da forma correta.

É necessário ter a foto certa, um olhar de fotógrafo e saber o que se deseja atingir pra tirar o máximo das tipograﬁas em fotos. Se você está disposto a tentar o desaﬁo, aqui vão 10 dicas pra fazer o seu design acontecer:

1. Adicione Contraste

! ! ! ! ! ! ! !

vitaminapublicitaria.com.br

105

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

O texto precisa realmente ser legível. O maior desafio pode estar na harmonia do contraste do texto com a foto. Tenha certeza que as cores do texto possuem contraste suficiente para se destacarem com o fundo da foto. Se a foto é clara, trabalhe com uma tipografia escura.

O contraste também pode dizer respeito ao tamanho do texto com o que está acontecendo na foto. O texto tem que trabalhar a favor de, e não contra, a imagem. No exemplo do site da Pack acima, a imagem é grande o texto é ﬁno, o que dá o contraste necessário pra imagem funcionar.

! ! 2. Faça o Texto Parte da Imagem ! ! !

As vezes acontece de você ter a sorte de conseguir mesclar a imagem com o texto. Pode ser difícil conseguir atingir esta tática e só funciona em alguns casos, mas quando acontece… É mais fácil atingir este resultado com uma imagem simples e pouco texto, como no exemplo da Mclaren acima, ou em uma foto que já seja realizada com o texto embutido.

! ! !

vitaminapublicitaria.com.br

106

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

! ! ! ! ! !

vitaminapublicitaria.com.br

107

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

3. Siga o Curso da Imagem

! !

vitaminapublicitaria.com.br

108

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! ! !

Trabalhar a ﬂuidez, o curso da imagem, é uma das dicas mais importantes ao trabalhar textos em fotograﬁas. Você precisa de palavras que encaixem de uma forma lógica na foto. E por favor, não coloque texto sobre as partes importantes da imagem, como a ação principal da foto, rostos ou no produto principal que você está tentando apresentar.

Uma dica bacana é aplicar o texto onde o sujeito da foto está olhando. Procure por espaços vazios. Os exemplos acima mostram os personagens com uma linguagem corporal que está totalmente dentro da foto. Planeje a sua ação, seja um publicitário e produza a foto sabendo onde o texto será implementado.

4. Borre a Imagem

Uma das ferramentas mais simples e eﬁcientes que você pode ter no seu kit de design é borrar partes da imagem para destacar o texto. Borrar a imagem ajuda o

! !

vitaminapublicitaria.com.br

109

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

texto a se destacar e adiciona foco ao conceito principal da mensagem, como o site da Wallmob acima. O desfoque do fundo acrescenta clareza ao texto e produto para os usuรกrios do site.

5. Coloque o Texto em uma Caixa

! !

vitaminapublicitaria.com.br

110

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Quando a foto tem muitas cores ou sessões com diferenças entre claro e escuro, colocar o texto em uma caixa pode realmente fazer ele se diferenciar.

Escolha uma forma (acima temos exemplos com um quadrado e um círculo) que funcione com as suas palavras e imagem.

Depois escolha uma cor para a forma que tenha contraste suﬁciente para se destacar perante o restante mas que harmonize com o layout.

Considere utilizar um pouco de opacidade para deixar a imagem mais amigável e apresentar mais da foto de fundo.

! ! 6. Adicione Texto ao Fundo !

Outra dica bacana é adicionar o texto ao fundo da imagem ao invés de utilizar o mesmo no primeiro plano. Normalmente os fundos tem menos elementos e é mais fácil trabalhar o texto. Os fundos tem normalmente apenas uma cor, o que facilita a leitura.

! !

vitaminapublicitaria.com.br

111

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

O resultado ﬁnal é natural e não necessita de um monte de truques ou alterações na foto original. Brinque com os efeitos sutis de sombra como na arte da Caitlin Wicker acima, assim como posicionamentos que adicionem profundidade a imagem.

! !

vitaminapublicitaria.com.br

112

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

7. Exagere

! !

vitaminapublicitaria.com.br

113

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Quando você não tem certeza do que dizer, considere exagerar no tamanho das palavras. Esta técnica é aplicável às imagens e ao texto. Elementos grandes chamam a atenção do leitor e facilitam a leitura.

Usar imagens grandes ou com zoom, como na imagem do café acima, ajuda ao utilizar sombras ou ter um contraste melhor. Usar textos grandes ou mais pesados possibilitam uma boa leitura em praticamente qualquer imagem.

! !

8. Adicione Cor

Usar cor adiciona um efeito muito interessante para a imagem. Os dois sites acima apresentam abordagens diferentes. Um utiliza o contraste com uma cor que não está na foto como um todo, enquanto o outro aplica uma cor que faz parte da composição. As duas técnicas podem ser utilizadas com sucesso.

! ! ! !

vitaminapublicitaria.com.br

114

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

9. Use uma Combinação de Cores

! !

vitaminapublicitaria.com.br

115

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Um efeito que está se tornando popular é a utilização de combinações de cores sobre imagens que auxiliam na aplicação do texto. Pode ser difícil atingir o resultado almejado, mas o efeito é excelente. Opte por uma combinação de cores visualmente interessante.

O balanço está em fazer a imagem de fundo poder ser vista, mas deixar também o texto legível. Provavelmente você precisará testar com várias combinações de cores e opções de fotos antes de dominar o efeito. Não tem certeza de que cores usar? Comece com uma combinação das cores da sua marca.

! 10. Simplifique !

O conselho master em design “keep it simple” se aplica tanto aos textos como às imagens. Você realmente quer que as pessoas vejam a foto e as palavras. Usar muitos efeitos pode trazer o resultado contrário.

Quando trabalhar com imagens, use uma tipograﬁa simples e uma imagem clara pra chegar aos melhores resultados. Lembre de deixar as partes importantes da imagem sem obstruções e continue trabalhando no seu design até que o texto possa ser lido claramente e boa sorte!

! ! !

vitaminapublicitaria.com.br

116

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

! ! !

vitaminapublicitaria.com.br

117

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! ! Dica Extra !

Utilize o plugin GuideGuide para trabalhar com o seu design dividido perfeitamente como você quiser no Photoshop. Provavelmente ele não vai ajudar a aplicar as técnicas acima, mas em outros layouts será de grande ajuda. É grátis e excelente.

! ! Dica Extra 2 !

Além dos exemplos acima, vale a pena conferir os sites. Além de apresentar as artes em tamanho real, o desenvolvimento e as técnicas utilizadas são de vanguarda. Todas estas dicas podem ser aplicadas desde anúncios em revistas e outras ações a Websites.

! Este post é uma versão do original “10 Tips for Designing with Type on a Photo“. ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! vitaminapublicitaria.com.br

118

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Como ficar em alta no mundo do branding (mesmo com um orçamento curto)

! Por Jennifer Borton* !

Somos ensinados quando crianças a não julgar um livro pela capa. No entanto, essa lição não se aplica necessariamente aos negócios, e os clientes muitas vezes julgam uma empresa pela aparência da sua marca. Portanto, é fundamental criar para sua marca uma identidade visual que seja atraente para os clientes e transmita as mensagens certas.

A identidade visual desempenha um papel fundamental na estratégia de branding de qualquer empresa, independentemente do tamanho ou do setor. Como a expressão visual de uma marca, ela pode abranger muitos elementos de design, como forma, cor, imagens, tipografia e composição. Um estilo consistente deve ser identificável em todas as comunicações visuais, desde materiais impressos até mídias digitais. Atualmente, para ser levado a sério, você precisa de uma presença na web limpa e organizada (“clean”), apoiada por papel timbrado e material impresso profissionais para ajudar a reforçar sua identidade visual. Uma vez estabelecida, essa identidade forte ajuda a definir sua empresa, distanciá-la da concorrência e promover certa lealdade à sua marca.

! Sua marca visual tem tanta importância quanto o seu plano de negócios! ! Como criar sua marca visual !

Embora seja importante pensar visualmente, é essencial que você esteja decidido a respeito das mensagens-chave que está tentando transmitir antes de começar a criar.

Invista em sua marca visual o mesmo que você investiu no seu planejamento comercial. Prepare uma estratégia que deﬁna claramente suas ideias e o que você deseja alcançar. Examine seu conteúdo e escolha os principais conceitos e temas que aparecem nele. Usando essas ideias como “palavras-chave”, comece a procurar elementos de design e imagens que os reﬂitam. Lembre-se de que as imagens devem servir como intervalos visuais para seu conteúdo que ajudarão o leitor a compreender o que está escrito.

! ! !

vitaminapublicitaria.com.br

119

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Simplifique

Embora isso dependa essencialmente da marca, uma regra fundamental de design é que, normalmente, menos é mais. Uma ilustração limpa e inteligente transmitirá uma ideia mais rapidamente e à distância. Uma imagem vale mais que mil palavras, então a imagem que você escolher falará tudo sobre sua marca.

Selecione imagens que tenham um elemento único, algo de destaque que torne sua marca memorável e sempre combine com seu estilo visual. Por isso, se você estiver usando uma ilustração, veja o que mais o artista produziu e pense em como esses recursos visuais poderiam ser incorporados em outras partes de seu site ou de seu material impresso. Isso dará coesão visual a suas comunicações e poderá até dar a impressão de que suas imagens foram criadas exclusivamente para seu material.

! Conhecer sua concorrência !

Não se esqueça de observar a concorrência. No que eles estão acertando e o que poderiam melhorar? Que outras marcas (até mesmo fora do seu espaço) você admira e por quê? É possível reproduzir o que eles ﬁzeram bem sem ser um imitador?

! Ferramentas criativas profissionais !

Muitas pequenas empresas não têm recursos para contratar empresas de design ou fotógrafos proﬁssionais para criar seu conteúdo e tendem a coordenar isso por conta própria. A criação de uma identidade visual coesa não precisa ser complicada ou cara. Bancos de conteúdo, por exemplo, além de fotos, são ótimos lugares para procurar ilustrações, incluindo arquivos que podem ser usados como planos de fundo, bordas ou elementos de design de materiais impressos.

Depois de definir a aparência, elabore um conjunto de diretrizes para ajudar a garantir que sua marca mantenha a consistência à medida que ela crescer e evoluir. Essas diretrizes devem descrever os valores e a essência da empresa, o tom de voz, o estilo de tipografia, o estilo fotográfico ou ilustrativo, a paleta de cores, os layouts, etc. A definição dessas diretrizes de uma vez e sua implementação em todas as comunicações visuais o ajudarão a evitar ficar com um site ou folheto da empresa com aparência amadora, que não represente adequadamente a marca.

! ! !

vitaminapublicitaria.com.br

120

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Entretanto, com o passar do tempo, como você avalia se os materiais que você tem precisam de atualização? Pergunte a si mesmo: Já se passou muito tempo desde que você projetou sua apresentação? Você encontra diﬁculdade para reunir algo toda vez que um possível cliente pede informações? Seu setor mudou desde o estabelecimento de seu negócio?

Existe muita concorrência? E como são os materiais das empresas concorrentes em comparação com o seu?

! Principais tendências !

Somos bombardeados com publicidade de tantas formas e há tanto tempo que o público consegue identificar quais mensagens são falsas, inferiores ou forçadas. Parcialmente devido à influência da televisão com muito foco na realidade, no cotidiano das pessoas, há uma tendência a refletir pessoas e situações reais em materiais impressos de marketing.

Imagens que capturam um momento autêntico, um momento da vida, permitem que o leitor se identiﬁque instantaneamente com a mensagem transmitida.

Em recentes viagens à Austrália, notei que o país tem uma cultura particularmente rica em ilustrações, com meios ilustrativos que vão desde renderizações 3D até vetores encontrados em propagandas, convites, folhetos e outros materiais de marketing.

Isso não é nenhuma surpresa, pois a capacidade de adaptação inﬁnita de vetores continua a fazer deles a principal escolha para planos de fundo, texturas e sobreposições, elementos de navegação, banners e decorações.

O que está mudando é o modo como as ilustrações são usadas, além dos estilos que estão evoluindo e se popularizando. Reﬂetindo a tendência para autenticidade e sites minimalistas como o Pinterest e a loja virtual de empresas de pequeno e médio porte Etsy, as pessoas estão criando e usando estilos antigos, distanciando-se de ilustrações com forte manipulação por computador.

! ! ! ! !

vitaminapublicitaria.com.br

121

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! !

Estas são algumas das principais tendências de ilustração para inspirar e ajudar você a dar o pontapé inicial ao criar a identidade visual e o material impresso para sua marca:

Estilo de desenho à mão O visual de design feito à mão não é uma tendência nova, mas continuará deﬁnitivamente forte por enquanto. Os designers continuar a explorar as texturas de giz, pintura, caneta e tinta, esboço e pinceladas em planos de fundo sobre papel.

! !

Técnicas orgânicas A moda das artes e dos ofícios se reﬂete no crescente número de ilustradores que misturam suas ferramentas e técnicas, adaptando tecnologias para colocar seu estilo artístico na tela, em vez de deixar que as ferramentas decidam o que eles podem e não podem fazer.

! !

Inspiração em materiais impressos Um resultado específico de todo esse cruzamento de disciplinas e modos de criação é a tendência para gráficos inspirados em materiais impressos. Chapas de cores inspiradas em xilografia de alto contraste são combinadas com ricas texturas indicativas da era anterior à impressão digital.

! ! !

vitaminapublicitaria.com.br

122

Manual básico para designers: Os mais acessados do Vitamina Publicitária sobre Design!

! ! !

Maiores detalhes Com o aumento das resoluções, desde o novo monitor na sua área de trabalho até a tela do seu dispositivo móvel, os designers estão tirando vantagem dos pixels extras.

Charme retrô Uma tendência versátil que incorpora belos padrões, rendas e um toque retrô.

! !

O vetor herói Estamos vendo mais ilustrações na frente e no centro, não simplesmente sobrepondo e apoiando outras imagens.

! !

Seja qual for o estilo que você escolher para sua marca visual, mantenha-o verdadeiro e consistente. Os visuais que você usa precisam reﬂetir os principais pontos de contato de sua marca, ou você corre o risco de criar uma desconexão entre a promessa e a experiência da marca, minando a conﬁança do cliente em seu negócio.

Sua marca é um reﬂexo do seu negócio; por isso, seja ﬁel aos valores fundamentais de sua empresa e ao que ela representa.

! *Gerente de Ilustração Sênior da iStock by Getty Images (www.istockphoto.com.br) ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! vitaminapublicitaria.com.br

123

Manual bรกsico para designers: Os mais acessados do Vitamina Publicitรกria sobre Design!

! !

Gostou? Compartilha!

vitaminapublicitaria.com.br

! !

vitaminapublicitaria.com.br

124