Manual Básico para Designers

MARKETING DE CONTEDO PASSO A PASSO
Manual bsico
para designers
Os mais acessados do
Vitamina Publicitria sobre
Design
Manual bsico para designers: Os mais acessados do Vitamina Publicitria sobre Design

Manual bsico para designers: Os mais acessados do
Vitamina Publicitria sobre Design
Copyright 2014 Vitamina Publicitria

Todos os direitos reservados.

Sinta-se livre para compartilhar, republicar ou passar este livro pela internet Apenas no
altere o seu contedo, combinado? Obrigado!

2

vitaminapublicitaria.com.br
P U B L I C I T R I A
itamina

Contedo:

27 blogs que todo designer deve conhecer....05
53 colees 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 ilustrao vetorizada do sketch at a arte !nal.97
10 Tcnicas de Design para Fotos com Textos....105
Como !car em alta no mundo do branding (mesmo com um oramento curto)..119

3

Top Branding 2011
Os 50 Que Mais Inspiram
Grandes Ideias

Introduo

Por Daniel Z. Choh

A sesso de Design sempre foi a mais acessada do Vitamina Publicitria.

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 contedo de primeiro pra
voc levar para qualquer lugar.

Introduo ao Design

Temos certeza que voc ir tirar proveito das tcnicas e indicaes que reunimos aqui
para todos os designers, seja voc um iniciante ou expert neste ambiente
maravilhoso.

Boa leitura!

4


27 blogs que todo designer deve conhecer

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

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

Designers Brasileiros

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

5


Assuntos Criativos

Blog referncia na rea de Design e Publicidade.

100% Design

O 100% Design aborda variados assuntos e fonte de inspirao visual e
informao de qualidade com mais de 500 posts e 8.000 imagens.

6


Bons Tutoriais
7


Blog de Design com uma pitada de criatividade de qualidade, Inspiraes,
Ideias para Campanhas Publicitrias, Tutoriais Photoshop, Web Design e
muito mais.

Boteco Design

O Boteco Design teve incio como um grupo do Google de colegas da
faculdade que gostavam de divulgar e comentar notcias, trabalhos,
exposies, cursos, e tudo mais relacionado ao nosso curso, Design.

Choco La Design

Choco La Design um dos maiores veculos independentes de produo de
contedo relacionado a Design.
8


Clube do Design
9


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 inspiraes, tutoriais, Web Design,
Eventos de Design, Dicas para Blogs e idias para Campanhas publicitrias.

Cutedrop

Visual e inspiracional. Blog sobre design, tecnologia, moda, culinria,
publicidade, msica e muito mais.

10


Design Blog

11


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,
Comunicao, aes criativas e as mais diversas expresses de artes.

Design Fera

Blog Parceiro do DB e um dos maiores do Brasil.

12


Design In a Box
13


Blog com informaes sobre design gr!co, web design, ilustrao, arte,
publicidade, fotogra!a, moda e todas estas coisas bacanas que ns
adoramos.

Irresistveis

Inspirao para mentes criativas.

Design On The Rocks

Blog referncia quando o assunto Design, com layout e domnio nova, visa
crescer muito mais.

14


Vitamina Publicitria
15


Blog sobre Publicidade, Design, Marketing Digital, Redes Sociais, Tecnologia
e Jornalismo. Somos ns!

Designer Efects

O Designer E"ects um blog que aborda tudo sobre o mundo do design, do
impresso a web, do analgico ao digital.

Designerd

Blog de Design e Web Design, com dicas para estudantes e pro!ssionais,
inspiraes para designers, ilustradores e outros pro!ssionais criativos e
muito mais.
16


Designine
17


O blog mostra, como contedo principal, campanhas publicitrias, design,
artistas e seus trabalhos, novidades e muita criatividade!

Des1gnOn
Blog voltado para estudantes, pro!ssionais e pessoas em geral que curtem
design e artes. Na minha opinio, um dos blogs mais bacanas atualmente
voltados a design. Tambm um dos parceiros do Vitamina Publicitria.

LogoBR
18


respeitado e citado como referncia por estudantes, acadmicos e
pro!ssionais quando se trata de branding.

Orange Design

A maior razo para a existncia do Orange Design divulgar o design e sua
pro!sso atravs de artigos, entrevistas com designers premiados e anlise
de produtos.

Paroxismo Records

Blog parceiro do Designers Brasileiros e trata sobre vrios assuntos.

19


Pixel Cofee
20


Podcast bem humorado sobre design, propaganda, games, programao,
msica e muito mais.

Revelando Ideias

Blog dedicado inteiramente para os apreciadores de inovao, criao,
design, fotogra!a, ilustrao, animao e muito mais.

Sala7 Design

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

21


Caf Com Galo
22


Blog muito bacana sobre design, entretenimento, fotogra!a e marketing.

De Volta ao Retro

Lab Criativo
23


DESIGNICES

Design & Chimarro
24


LOGO.BR

abduzeedo.com / abduzeedo.com.br
25


A List Apartlist

Smashing Magazine
26


Desao Criativo

27


53 colees de cones para Flat Design

2013 foi o ano do Flat Design e milhares de colees foram criadas pelos mais
variados designers. O Mashable fez uma matria que reuniu 53 colees 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 no o mais famoso portal de marketing digital do mundo, e
cobre as principais notcias de mdias sociais sobre temas como Facebook, YouTube,
Gmail, Twitter, Amazon, Pinterest e muito mais.

1. FlatIcons.co

28


O FlatIcons.co oferece cones lindos disponveis PSD, SVG, EPS e em quatro tamanhos
diferentes. Como so vetores, permitem a ampliao perfeita para qualquer tamanho
mantendo a qualidade.

2. Linecons

O Linecons do DesignModo, uma das principais referncias em #at design.
Disponibiliza cones gratuitos totalmente escalveis em vetor com estilos de contorno.
Cada cone est disponvel em HTML, CSS, PDF, AI, PSD, PNG e SVG.
29


3. FlatIcons.net

FlatIcons.net um fabricante de cones, permitindo que voc crie seus prprios
cones #at livres de royalties, que voc pode vender, doar ou usar. Para comear,
basta escolher um cone dos 2500 disponveis e personaliz-lo.

30


4. Flatalicious

Aqui voc vai encontrar um conjunto bem concebido de 48 cones #at, disponveis em
formato PSD. So cones em vetor totalmente escalveis, que podem ser
redimensionados para qualquer exigncia. Eles so perfeitos para projetos web,
aplicativos ou infogr!cos.

5. IconShock

Esta uma coleo 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 disponveis em trs formatos, h cones aqui para atender a qualquer
exigncia.

31


6. Pixeden
32


Esta coleo a minha favorita. A Pixeden oferece uma coleo completa de cones
#at criados em um estilo minimalista com detalhes nicos. Cada cone est disponvel
em vetor e PSD.

7. Program Icons
Criado pela equipe de design da Applove , esses cones so muito bem trabalhados e
projetados, com requintada ateno aos detalhes. O site apresenta os cones de
programas como o Adobe Photoshop, iTunes, Chrome e Firefox, entre outros.
33


8. Meteocons

Meteocons um conjunto #at com mais de 40 cones disponveis 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.
34


9. Flat Icons PSD

Este um conjunto de 20 cones #at coloridos em formato vetorial PSD, disponveis
no tamanho de 128 x 128 pixels, e inspirado por cones do Google. So camadas
vetoriais, para que eles possam ser facilmente editadas e livres para uso pessoal e
comercial.

35


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.

36


11. Stroke Line Icons
Aqui est um outro conjunto de cones simples na linha da Pixeden, disponveis em
PSD, EPS, AI e PNG.

12. Long Shadow Social Icons
37


Estes cones lindos de mdia social so projetados em um estilo de sombra, e esto
livres para projetos pessoais e comerciais. Eles esto disponveis em tamanhos de 32,
48, 72, 128 e 256px.

13. Flat Icons Jan Dvok

Este pacote de cones #at do designer Jan Dvo$k inclui 24 cones disponveis como
um download gratuito em PSD, para fcil personalizao.

38


14. Flat Icons Freebie
Esta coleo de cones #at do designer Seevi Kargwal so maravilhosamente
trabalhados com um estilo nico. So seis cones que incluem o Safari, Instagram e
bate-papo, disponvel como um PSD livre.

15. Flat Icons Pierre Borodin
39


Uma seleo de cones #at do designer Pierre Borodin, com smbolos de interface,
como um relgio, calendrio, notas e e-mail. Tambm est disponvel 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.
Disponvel em formato PSD.

40


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

41


Conjunto de 16 cones #at da Pixeden, disponvel como um PSD livre. Cada cone
projetado com um efeito de sombra longa, com o PSD facilmente editvel. O conjunto
inclui os principais cones de mdia social, incluindo Twitter, Behance, LinkedIn,
Dribbble e muito mais.

19. Flat UI

O kit de UI #at da Designmodo inclui uma seleo de cones #at para os principais
elementos da interface, incluindo um calendrio, chat, compras, relgio e lista de
tarefas. Com certeza um dos melhores desta lista.

42


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
43


Inspirado no estilo #at do Windows 8, este enorme conjunto inclui mais de 725 cones
para aplicativos, navegadores e sistemas operacionais. Todos os cones tambm esto
disponveis em 256px. Formato ico.

22. Flat PSD Freebie Alberto Valentin

Estes pequenos cones deslumbrantes do estilista Alberto Valentin esto disponveis
em formato PSD. Eles seguem o estilo #at perfeitamente, com grande uso de cores
brilhantes e incluem chat, iMac, cones de relgio e muitos outros bacanas.

44


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 impresso e web. Eles esto no formato EPS,
so totalmente escalonveis e baseados em uma grade para resultar em uma
preciso extrema. Tambm est disponvel a verso pronta web em HTML, em CSS3
animado!

45


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
46


Alexander Schultz desenvolveu este belo conjunto de cones de programas,
disponveis em formato PSD, com cones para muitas aplicaes importantes,
incluindo o Adobe Photoshop, Illustrator e Dreamweaver, entre outros.

26. Publicons

De Joshua Sortino, Publicons uma coleo crescente de cones #at. Enquanto
trabalhava em projetos de editor, Joshua se cansou de recriar cones para plataformas
que normalmente no so includos com conjuntos de cones.

27. Flat File Icons
47


Um conjunto Premium, que consiste em uma coleo de estilo #at, cones de arquivos
baseados em vetor. Eles so super simples e podem ser usado em conjunto com
qualquer tipo de cone ou texto. As cores tambm so facilmente editvel.

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 tambm fez outros dois pacotes que esto disponveis
para download.

48


29. Plex Icon Set

Plex um pacote de cone #at disponvel apenas para uso pessoal, e inclui mais de
119 cones em formato PNG, que vo desde Chrome, Firefox, calculadora, e HTML
para VLC, YouTube e Twitter.

49


30. Cosmo Mini Icons

Esta uma verso #at dos cones Cosmo fornecidos pelo IcoJam, e inclui uns
impressionantes 1.262 cones em 40 x 40px. Formato PNG.

31. Flat Icon Set Stae Anatolie
50


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 calendrio, relgio, cmera, 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,
calendrio, notas, cmera e muito mais.
51


34. Social Icon Set Stae Anatolie
52


Este um outro cone #at de!nido pelo designer de Sta!e Anatolie, com logos e
smbolos dos mais populares sites de mdia 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 vrios cones sociais e cartes de
crdito populares.

53


36. Flat Icons Visual Creative

Este um conjunto !namente trabalhado de cones #at do estdio Visual Criativo, em
formato PSD com 512px. Os cones incluem um calendrio, boto de mdia, dicionrio
e sacola de compras.

54


37. Eldorada Mini
Eldorado Mini uma verso gratuita de cones e inclui mais de 1262 PNGs 40 x 40px.
Estes cones esto disponveis para uso em projetos pessoais e comerciais.

38. Flat Credit Cards
55


Aqui est uma seleo de cinco cones de carto de crdito no estilo #at do designer
Ian Silber, usando uma fonte Open Sans para a consistncia. O conjunto inclui vrios
grandes fornecedores do carto de crdito, incluindo American Express, Visa e
Mastercard.

39. Circle Flat Icons

Conjunto de 24 cones de alta qualidade, retina e prontos para mdias sociais, que tm
formas circulares e apresentaes vibrantes, combinando duas cores. Eles esto
disponveis em formato PNG em quatro tamanhos diferentes: 256 x 256px, 128 x
128px, 64 x 64 e 32 x 32px.

56


40. Flat Social Media Icons Nathan Brown

Um conjunto de 30 cones #at de mdia social em formato vetorial, disponvel 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
57


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 so nomeados e agrupados em
um arquivo PSD, que inclui dimenses de 32 x 32px a 512 x 512px.

42. Simple Flat Icons Graphics Fuel

Coleo com 20 cones #at de mdias sociais para as suas necessidades de
compartilhamento social. Os cones so criados em 114 & 114px, e podem facilmente
ser redimensionados e utilizado para dispositivos mveis ou para a web. Criado com
camadas inteligentes, o arquivo PSD pode ser editado facilmente.

43. Free Flat Icon Pack Nathan Brown
58


Este pacote de cones de Nathan Brown contm 25 cones #at em vetor em um
arquivo PSD. O pacote tem um estilo nico e contm 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
disponvel como um download gratuito PSD. Os cones incluiem uma pasta, e-mail,
chat, downloads, bloco de notas e muito mais.

59


45. Flat Icons OthMane Machrouh
Othmane Machrouh desenvolveu esta coleo de seis cones #at, que pode ser
baixado em formato PSD. Machrouh tambm criou um outro conjunto de cones #at
que esto disponveis de forma gratuita.

46. Flat Custom CS Icons
60


Este um conjunto de 15 cones personalizados da Adobe Creative Suite, do estilista
Tom Newton. Eles esto disponveis em formato icns. Tambm tem at um vdeo 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 vrios tamanhos, de
48 x 48 pixels at 512 x 512 pixels, e est disponvel 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

Coleo com 32 cones de estilo #at do designer Allan McAvoy, disponveis em
formato eps., e cada cone facilmente escalvel e editvel. O conjunto inclui muitas
61


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

49. Flat Vector Icons Jared Kennedy
62


Do designer Jared Kennedy, esta uma seleo de 12 cones em vetor disponvel
como um download gratuito em PSD. Os cones tm um toque retro, e apresentam
um jogador de !lme, cmera 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, seleo apresenta 15 cones de
mdia social belamente projetados em forma de polgono, incluindo Twitter,
Facebook, YouTube, Tumblr e outras opes populares.

63


51. Hex Icons Pack

Este um grande pacote de cones do designer Martin Knize, com mais de 170 cones,
alm de 45 cones de jogo. H uma grande ateno ao detalhe, com cada cone
projetado dentro de uma forma hexagonal. Voc pode solicitar cones adicionais a
serem includos em pacotes futuros.

64


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 so em 128 x 128 pixels de tamanho, inspirados nos cones
do Google e de tendncia de design #at. So vetores totalmente editveis.

53. Free Flat Icons Nikki Hampson
65


Conjunto com nove cones #at, do designer Nikki Hampson, so livres para uso
pessoal e comercial. Cada um foi muito bem trabalhado, e a coleo 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 incrvel
pra voc criar os seus cones com o conceito long shadow, da Pixeden.

Download

66


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 concepo do skeumor!smo, design plano, ou #at design centra-
se em formas simples, cores e tipogra!a 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 lanamento do iOS 7 provou que o #at design
no mais uma moda passageira, mas com certeza, um passo a frente.

O achatamento de estilo signi!ca simpli!car os elementos da interface, remoo de
elementos estranhos e decorao 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 comear 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 utilizao em seus projetos.
H qualquer outro kit de UI de #at design que voc recomendaria? Se sim, por favor,
compartilhe o link nos comentrios abaixo, com os nossos leitores.

67


1. Flat UI Pro
Flat UI Pro baseada no Twitter Bootstrap e desenhada em um estilo simples,
contendo um grande nmero de componentes bsicos, cones e smbolos. O kit inclui
tambm uma verso em PSD.

2. Flat UI Free
68


Flat UI Free um recurso livre da Designmodo, e contm os principais elementos
bsicos de uma interface web para utilizao.

3. Flat Design Toolkit

Um kit projetado pelo Freepik, contm todos os componentes essenciais de interface
de usurio, fornecendo gr!cos e per!s de usurio.

69


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 Innity UI Kit

A Vertical In!nity UI Kit contm uma grande variedade de componentes, a partir de
menus, dropdowns, widgets, botes e players de mdia para formas e paginao. Ele
tambm otimizado para telas retina.

70


6. Flat UI Kit Riki Tanone

Este um kit #at de UI em PSD desenhado por Riki Tanone, com um widget de
calendrio, mapas, etiquetas e muito mais.

71


7. Flat UI PSD Devin Schulz

Este Kit UI de Devin Schulz possui um conjunto criativo de componentes, incluindo
navegao, caixas de entrada e botes.
72


8. Metro Vibes UI Kit

Vibes Metro um premiado Kit de UI desenhado e disponvel no PixelKit, que presta
ateno aos mnimos detalhes e s caractersticas das belas cores.

9. Flat UI PSD Riki Tanone

Este kit uma outra oferta gratuita de Riki Tanone, com mais componentes de
interface de usurio, incluindo um player de mdia e per!s de usurio.

73


10. Featherweight Flat UI Kit
74


Um kit de UI abrangente de Sarah Justine, onde cada elemento em vetor, otimizado
para retina e distribudo atravs de camadas. Os texto e as cores so facilmente
editveis, com projetos que so completamente livres para uso pessoal ou comercial.

11. Flat Web UI Kit

75


Este um pacote GUI que inclui o projeto de elementos de formulrio, controles,
widgets, formas e loaders.

12. Flat UI Kit Sebastiaan Scheer

Este um Kit UI de inspirao que gratuito para download como um PSD, e vem
com widgets de tempo, um media player e elementos de navegao.

13. Flat UI Kit Hseyin Yilmaz

Inspirado Kit de UI de Hseyin Yilmaz, este kit tem os principais componentes de
interface do usurio, incluindo per!s, players e formas de mdia.

76


14. Square UI

77


O Square UI um dos meus preferidos. um pacote de interface de usurio premium
incluindo um conjunto de componentes excelentes, ideal para prototipagem rpida.
H tambm uma verso gratuita disponvel 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 disponvel como um PSD livre.

16. Flat Beach GUI

Uma UI pastel temtica de Mike Clarke, est disponvel como um PSD gratuito e inclui
botes, widgets e componentes de mdia.

78


17. Flat UI Kit Zachary VanDeHey
79


A UI Kit de vero inspirada de Zachary Vandehey, disponvel como um arquivo gratuito
em Adobe Illustrator, que apresenta widgets, botes, per!s, cones e um media
player.

18. Design Shock Flat GUI
GUI em #at design disponvel em verso premium ou gratuita, com um enorme
nmero de componentes e elementos.

19. UI Pixels Flat UI Widget

Este um kit UI #at sensvel que usa apenas duas cores, por isso extremamente fcil
de editar e vem cheio de widgets e componentes de interface. Est disponvel como
um PSD livre.

80


20. Tempees Flat UI Kit

Tempees oferece um kit #at de UI para suas aplicaes ou sites, que inclui vrios
estilos de botes, cones de menus, blocos de per!l e widgets. Est disponvel como
um download gratuito em .PSD.

81


21. Eerste Flat UI Kit

Criado pela Design Your Way, Eerste inclui vrios elementos gr!cos, incluindo menus,
per!s de redes sociais, formulrios de comentrios, tabelas de preos, players de
vdeo, calendrios e muito mais.

82


22. Metro UI Kit

A Metro UI Kit outra UI excelente, inspirada pelo Microsoft Windows que apresenta
estatsticas, gr!cos, calendrio, menus e estilos de pesquisa.

83


23. Flat UI Kit Abhimanyu Rana

Um kit UI maravilhosamente concebido a partir de Abhimanyu Rana presta muita
ateno aos detalhes e cores, com widgets, players de mdia e per!s de usurio.

84


24. Flat UI Andy Law

Esta impressionante UI em .PSD est disponvel para download gratuito. Possui um
sistema #at de cor, estilo, media player, Widgets e muito mais.

85


25. UI Kit PSD Piotr Kwiatkowski

A UI Kit lindamente projetada de Piotr Kwiatkowski est disponvel como um PSD
grtis e tem widgets, gr!cos, galerias de arte, mapas e um carrinho de checkout.

26. Simple & Bold UI Kit

Elementos de interface do usurio em um kit PSD livre, com estados de boto, feeds
de notcias, media players, menus de lista, painis, widgets de calendrio e muito
mais.

86


27. Flat UI/UX Kit Asim Craft

Um Kit UI #at de Vectornpixel, que contm campos de formulrio, botes de
navegao, fotos e muito mais. Ele est disponvel como um download gratuito
em .PSD.

87


28. Flat UI Kit PSD Andreea Nicolaescu

Este kit de elementos de interface do usurio de Andreea Nicolaescu tem menus,
players de mdia, botes, forms, calendrios e listas suspensas, disponvel como um
download gratuito em .PSD.

88


29. E-Commerce Flat UI Kit

Est disponvel como um download gratuito em .PSD e contm vrios elementos de
interface do usurio para uso em projetos de comrcio eletrnico, os quais so
facilmente editveis.

89


30. Flat UI Elements Andrew Beckwith

Elementos de interface do usurio em alta qualidade com widgets e componentes
maravilhosamente concebidos com grande ateno tipogra!a.
90


91


31. Polaris UI Kit

Polaris UI Kit um belo conjunto de componentes de interface do usurio, que inclui
caixas de edio, botes de navegao e widgets para uso em seus projetos de
design.

92


32. Free Flat UI Kit Visual Creative

Este um kit UI livre da Creative Visual que possui um player de mdia, botes, um
relgio, formulrios de login e per!s de usurio. Disponvel como um download
em .PSD.

93


33. Flat UI Kit PSD Pro Web Design

Disponvel gratuitamente e inclui navegao, painis de usurios, gr!cos de rea,
gr!cos de barras, gr!cos de segmento circular, elementos de entrada, sliders,
interruptores, botes e reas de widget.

34. Dark UI Kit Hseyin Yilmaz

Outro kit UI de alta qualidade de Hseyin Yilmaz, caracteriza um projeto escuro, e
inclui botes de mdia social, widgets, formulrios de contato e navegao.

94


35. Super Clean Flat UI Kit
95


Limpo, bem organizado Kit UI de WeCreate, disponvel como um download gratuito
em .PSD. facilmente editvel, contendo vrios dos principais componentes de
interface.

36. Flat UI PSD Alexandre Crenn

Simples e bem organizado kit de Alexandre Crenn, que tambm apresenta um
wireframe de iPhone #at.

E assim !nalizamos as indicaes de 36 recursos para #at design.

Bom proveito!

96


Como fazer uma ilustrao vetorizada do
sketch at a arte nal

O que uma ilustrao vetorizada?

Vetores so demais! Ao contrrio 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 no
tm que se preocupar com dimenso em pixels ou com resoluo, uma vez que os
vetores so construdos a partir de caminhos e pontos e podem ser redimensionados,
sem preocupao 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.

97


Mos na massa!

Fazer arte em vetor fcil. Voc ver que a possibilidade de editar as linhas e formas
permitir que voc trabalhe rapidamente, gastando seus esforos mais no lado
artstico do que no tcnico.

Este tutorial ir mostrar um passo-a-passo para se fazer uma arte vetorizada, mas no
se trata da nica maneira. Ento, sinta-se livre na utilizao de todas as tcnicas
apresentadas aqui.

O Adobe Illustrator o software mais popular na criao de vetores. Ele usado por
pro!ssionais e amadores e muito verstil. No entanto, voc ver que o Illustrator
no o programa mais fcil logo no incio.

Mas, brincando com as ferramentas e fazendo alguns testes, possvel aos poucos
se aprimorar.

98


Parte 1: Comece com um esboo

Desenhe e escaneie

Sketches so importantes. Voc tem uma ideia na cabea, mas voc no sabe como
ele vai se concretizar at que comece a desenhar. Sua primeira ideia raramente a
sua melhor criao, ento fazer vrios esboos 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 faa um esboo e aplique-o no ilustrador,
para poder us-lo como um guia para fazer o vetor.

99


Sugestes de ferramentas

A Brush uma ferramenta de desenho sensvel presso (que pode
se usada como pincel).

A ferramenta Pencil para o caminho bsico de desenho / edio.
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
100


Depois de ter o esboo no Illustrator, podemos comear a trabalhar. Faa o seu
esboo transparente usando con!guraes de opacidade do Illustrator (no Control
da paleta, na parte superior ou utilizando a paleta Transparency).

Mantenha o seu trabalho artstico organizado, usando camadas. Eu acho que o
melhor para manter o seu esboo transparente e para criar camadas de cada fase de
criao de sua arte.

Tire suas linhas usando a ferramenta Brush ou a ferramenta Pencil. Como j
indiquei, o Brush recomendado porque sensvel presso (se voc estiver
trabalhando com um tablet), e mostra as linhas como voc est desenhando.

A ferramenta Pencil tambm tem alguns usos, tais como desenhos de linhas
mecnicas e uniformes.

Parte 3: Adicionando cores

Na camada abaixo de sua linha de trabalho, vamos comear 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 alteraes em suas cores a qualquer momento, mas muito mais
simples de fazer alteraes nesta fase inicial, antes que voc tenha ido longe demais e
j acrescentado muitos detalhes.
101


Eu tambm 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 mtodos que voc pode usar para fazer suas reas de cor.

No importa como voc opta por adicionar a sua cor, pois no 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 mo formas grandes e planas, usando a ferramenta
Pencil. Esse tende a ser o mtodo mais rpido.

102


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 traos para criar o efeito de profundidade!

Se voc estiver usando um tablet de desenho sensvel presso, voc pode usar os
traos !nos e grossos para pintar facilmente nas formas exatas que voc precisa.

103


Feito!

Sua obra-prima est pronta! Se voc chegou at aqui, voc deve ter uma criao
vetorizada, que est bem organizada em camadas, com formas facilmente editveis.

Este tutorial foi concebido para ser geral, ento eu no entrei em muitos detalhes
sobre cada etapa, apenas uma rpida viso geral do processo de abertura do
esboo arte !nal. O Illustrator no o programa mais fcil de aprender, mas se voc
tiver um tempinho, pode descobrir um novo talento.

Texto e ilustraes: Doodle Machine Andr Jolicoeur (www.doodlemachine.com)

Fonte: iStock by Getty Images (www.istockphoto.com.br)

104


10 Tcnicas de Design para Fotos com Textos

Uma das melhores tcnicas que voc pode ter atualmente em seu arsenal criar
artes que possuam fotos com texto. Esta prtica est sendo utilizada em uma
quantidade absurda de blogs e aes publicitrias. Porm, pode ser uma das
habilidades mais difceis de fazer da forma correta.

necessrio ter a foto certa, um olhar de fotgrafo e saber o que se deseja atingir pra
tirar o mximo das tipogra!as em fotos. Se voc est disposto a tentar o desa!o, aqui
vo 10 dicas pra fazer o seu design acontecer:

1. Adicione Contraste

105


O texto precisa realmente ser legvel. O maior desa!o pode estar na harmonia do
contraste do texto com a foto. Tenha certeza que as cores do texto possuem contraste
su!ciente para se destacarem com o fundo da foto. Se a foto clara, trabalhe com
uma tipogra!a escura.

O contraste tambm pode dizer respeito ao tamanho do texto com o que est
acontecendo na foto. O texto tem que trabalhar a favor de, e no contra, a imagem.
No exemplo do site da Pack acima, a imagem grande o texto !no, o que d o
contraste necessrio pra imagem funcionar.

2. Faa o Texto Parte da Imagem

As vezes acontece de voc ter a sorte de conseguir mesclar a imagem com o texto.
Pode ser difcil conseguir atingir esta ttica e s funciona em alguns casos, mas
quando acontece mais fcil 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.

106


107


3. Siga o Curso da Imagem
108


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
lgica na foto. E por favor, no coloque texto sobre as partes importantes da imagem,
como a ao 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
espaos vazios. Os exemplos acima mostram os personagens com uma linguagem
corporal que est totalmente dentro da foto. Planeje a sua ao, seja um publicitrio 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
109


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
usurios do site.

5. Coloque o Texto em uma Caixa
110


Quando a foto tem muitas cores ou sesses com diferenas 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 crculo) 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 amigvel e
apresentar mais da foto de fundo.

6. Adicione Texto ao Fundo

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


O resultado !nal natural e no necessita de um monte de truques ou alteraes 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.
112


7. Exagere
113


Quando voc no tem certeza do que dizer, considere exagerar no tamanho das
palavras. Esta tcnica aplicvel s imagens e ao texto. Elementos grandes chamam a
ateno 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 no est
na foto como um todo, enquanto o outro aplica uma cor que faz parte da
composio. As duas tcnicas podem ser utilizadas com sucesso.

114


9. Use uma Combinao de Cores
115


Um efeito que est se tornando popular a utilizao de combinaes de cores sobre
imagens que auxiliam na aplicao do texto. Pode ser difcil atingir o resultado
almejado, mas o efeito excelente. Opte por uma combinao de cores visualmente
interessante.

O balano est em fazer a imagem de fundo poder ser vista, mas deixar tambm o
texto legvel. Provavelmente voc precisar testar com vrias combinaes de cores e
opes de fotos antes de dominar o efeito. No tem certeza de que cores usar?
Comece com uma combinao das cores da sua marca.

10. Simplique

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 contrrio.

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 obstrues e continue trabalhando no seu design at que o texto possa ser lido
claramente e boa sorte!

116


117


Dica Extra

Utilize o plugin GuideGuide para trabalhar com o seu design dividido perfeitamente
como voc quiser no Photoshop. Provavelmente ele no vai ajudar a aplicar as
tcnicas acima, mas em outros layouts ser de grande ajuda. grtis e excelente.

Dica Extra 2

Alm dos exemplos acima, vale a pena conferir os sites. Alm de apresentar as artes
em tamanho real, o desenvolvimento e as tcnicas utilizadas so de vanguarda. Todas
estas dicas podem ser aplicadas desde anncios em revistas e outras aes a
Websites.

Este post uma verso do original 10 Tips for Designing with Type on a Photo.

118


Como car em alta no mundo do branding
(mesmo com um oramento curto)

Por Jennifer Borton*

Somos ensinados quando crianas a no julgar um livro pela capa. No entanto, essa
lio no se aplica necessariamente aos negcios, e os clientes muitas vezes julgam
uma empresa pela aparncia 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 estratgia de branding de
qualquer empresa, independentemente do tamanho ou do setor. Como a expresso
visual de uma marca, ela pode abranger muitos elementos de design, como forma,
cor, imagens, tipogra!a e composio. Um estilo consistente deve ser identi!cvel em
todas as comunicaes visuais, desde materiais impressos at mdias digitais.
Atualmente, para ser levado a srio, voc precisa de uma presena na web limpa e
organizada (clean), apoiada por papel timbrado e material impresso pro!ssionais
para ajudar a reforar sua identidade visual. Uma vez estabelecida, essa identidade
forte ajuda a de!nir sua empresa, distanci-la da concorrncia e promover certa
lealdade sua marca.

Sua marca visual tem tanta importncia quanto o seu plano de negcios!

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 comear a criar.

Invista em sua marca visual o mesmo que voc investiu no seu planejamento
comercial. Prepare uma estratgia que de!na claramente suas ideias e o que voc
deseja alcanar. Examine seu contedo 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 contedo que ajudaro o leitor a compreender
o que est escrito.

119


Simplique

Embora isso dependa essencialmente da marca, uma regra fundamental de design
que, normalmente, menos mais. Uma ilustrao limpa e inteligente transmitir uma
ideia mais rapidamente e distncia. Uma imagem vale mais que mil palavras, ento
a imagem que voc escolher falar tudo sobre sua marca.

Selecione imagens que tenham um elemento nico, algo de destaque que torne sua
marca memorvel e sempre combine com seu estilo visual. Por isso, se voc estiver
usando uma ilustrao, 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 coeso visual a suas comunicaes e poder at dar a
impresso de que suas imagens foram criadas exclusivamente para seu material.

Conhecer sua concorrncia

No se esquea de observar a concorrncia. No que eles esto acertando e o que
poderiam melhorar? Que outras marcas (at mesmo fora do seu espao) voc admira
e por qu? possvel reproduzir o que eles !zeram bem sem ser um imitador?

Ferramentas criativas prossionais

Muitas pequenas empresas no tm recursos para contratar empresas de design ou
fotgrafos pro!ssionais para criar seu contedo e tendem a coordenar isso por conta
prpria. A criao de uma identidade visual coesa no precisa ser complicada ou cara.
Bancos de contedo, por exemplo, alm de fotos, so timos lugares para procurar
ilustraes, incluindo arquivos que podem ser usados como planos de fundo, bordas
ou elementos de design de materiais impressos.

Depois de de!nir a aparncia, elabore um conjunto de diretrizes para ajudar a
garantir que sua marca mantenha a consistncia medida que ela crescer e evoluir.
Essas diretrizes devem descrever os valores e a essncia da empresa, o tom de voz, o
estilo de tipogra!a, o estilo fotogr!co ou ilustrativo, a paleta de cores, os layouts, etc.
A de!nio dessas diretrizes de uma vez e sua implementao em todas as
comunicaes visuais o ajudaro a evitar !car com um site ou folheto da empresa
com aparncia amadora, que no represente adequadamente a marca.

120


Entretanto, com o passar do tempo, como voc avalia se os materiais que voc tem
precisam de atualizao? Pergunte a si mesmo: J se passou muito tempo desde que
voc projetou sua apresentao? Voc encontra di!culdade para reunir algo toda vez
que um possvel cliente pede informaes? Seu setor mudou desde o
estabelecimento de seu negcio?

Existe muita concorrncia? E como so os materiais das empresas concorrentes em
comparao com o seu?

Principais tendncias

Somos bombardeados com publicidade de tantas formas e h tanto tempo que o
pblico consegue identi!car quais mensagens so falsas, inferiores ou foradas.
Parcialmente devido in#uncia da televiso com muito foco na realidade, no
cotidiano das pessoas, h uma tendncia a re#etir pessoas e situaes reais em
materiais impressos de marketing.

Imagens que capturam um momento autntico, um momento da vida, permitem que
o leitor se identi!que instantaneamente com a mensagem transmitida.

Em recentes viagens Austrlia, notei que o pas tem uma cultura particularmente
rica em ilustraes, com meios ilustrativos que vo desde renderizaes 3D at
vetores encontrados em propagandas, convites, folhetos e outros materiais de
marketing.

Isso no nenhuma surpresa, pois a capacidade de adaptao in!nita de vetores
continua a fazer deles a principal escolha para planos de fundo, texturas e
sobreposies, elementos de navegao, banners e decoraes.

O que est mudando o modo como as ilustraes so usadas, alm dos estilos que
esto evoluindo e se popularizando. Re#etindo a tendncia para autenticidade e sites
minimalistas como o Pinterest e a loja virtual de empresas de pequeno e mdio porte
Etsy, as pessoas esto criando e usando estilos antigos, distanciando-se de ilustraes
com forte manipulao por computador.

121


Estas so algumas das principais tendncias de ilustrao 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 mo
O visual de design feito mo no uma
tendncia nova, mas continuar
de!nitivamente forte por enquanto. Os
designers continuar a explorar as texturas
de giz, pintura, caneta e tinta, esboo e
pinceladas em planos de fundo sobre papel.

Tcnicas orgnicas
A moda das artes e dos ofcios se re#ete no
crescente nmero de ilustradores que
misturam suas ferramentas e tcnicas,
adaptando tecnologias para colocar seu
estilo artstico na tela, em vez de deixar que
as ferramentas decidam o que eles podem e
no podem fazer.

Inspirao em materiais
impressos
Um resultado espec!co de todo esse
cruzamento de disciplinas e modos de
criao a tendncia para gr!cos
inspirados em materiais impressos. Chapas
de cores inspiradas em xilogra!a de alto
contraste so combinadas com ricas
texturas indicativas da era anterior
impresso digital.

122


Maiores detalhes
Com o aumento das resolues, desde o novo monitor na sua rea de trabalho at a
tela do seu dispositivo mvel, os designers esto tirando vantagem dos pixels extras.

Charme retr
Uma tendncia verstil que incorpora belos padres, rendas e um toque retr.

O vetor heri
Estamos vendo mais ilustraes na frente e no centro, no 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 desconexo entre a
promessa e a experincia da marca, minando a con!ana do cliente em seu negcio.

Sua marca um re#exo do seu negcio; por isso, seja !el aos valores fundamentais
de sua empresa e ao que ela representa.

*Gerente de Ilustrao Snior da iStock by Getty Images (www.istockphoto.com.br)

123


124

Gostou?
Compartilha!

Manual Básico para Designers

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Manual Básico para Designers

Hochgeladen von

Copyright:

Verfügbare Formate

MARKETING DE CONTEDO PASSO A PASSO

Das könnte Ihnen auch gefallen