SlideShare ist ein Scribd-Unternehmen logo
1 von 45
DESIGN
PARA WEB
RENATO MELO - 2014
CORES,
MEDIDAS E
RESOLUÇÃO
RGB

RED
GREEN
BLUE

PADRÃO OFICIAL PARA
TVS, MONITORES,
CELULARES E MÁQUINAS
DIGITAIS.
RGB

72 A 120 DPI
PIXELS
PNG:
GIF:
Imagens
animadas

- Qualidade

JPG:

Fundo
Transparente

Instagram

Sites

Sites

Facebook

+ Leve

+ Qualidade
COMO FUNCIONA NO
FACEBOOK?
QUANDO VOCÊ ABRE O FACE,
300 POSTAGENS ESTÃO LHE
ESPERANDO...
AS FOTOS PRECISAM DE UM
TRATAMENTO ESPECIAL, COM
CORES MAIS VIVAS E FOCO
MAIS NÍTIDO.
IMAGENS AMADORAS,
REAIS, COM POUCA
PRODUÇÃO E
ESPONTÂNEAS
TAMBÉM CONVERTEM
BEM.
VAMOS ABRIR UM ARQUIVO
NOVO PARA UM POST PARA
UMA FANPAGE
O ARQUIVO DEVE SEGUIR O
FORMATO QUADRADO:
600X600 PIXELS E 100 DPI
É IMPORTANTE QUE A IMAGEM
SEJA QUADRADA! O FACEBOOK
PODE GERAR UM THUMBNAIL
QUADRADO DA SUA IMAGEM,
DEIXANDO PARA TRÁS
INFORMAÇÕES IMPORTANTES!
TEXTOS MUITO GRUDADOS FICAM FEIOS.
POR ISSO, VAMOS CRIAR UMA LINHA
GUIA PARA NOS HABITUAR VISUALMENTE.
VAMOS FAZER AGORA AS
MARCAÇÕES DE MARGEM DE
SEGURANÇA. CASO SUA RÉGUA
NÃO ESTEJA VISÍVEL, HABILITE
CONFORME IMAGEM AO LADO.
COM O BOTÃO DIREITO DO
MOUSE, CLIQUE PARA DEIXAR A
RÉGUA EM MILÍMETROS
CADA TRAÇO EQUIVALE
A 2mm. POSICIONE
ENTRE O 2 E O 3 PARA
OBTERMOS OS 5mm.
PARA FAZER AS MARCAÇÕES,
BASTA CLICAR EM CIMA DA
RÉGUA, SEGURAR O BOTÃO E
PUXAR COM O MOUSE.

FAÇA ISSO PARA OS 4
LADOS DO ARQUIVO.
DEPOIS DE PRONTO, MANTENHA
A RÉGUA EM MILÍMETROS.
VAMOS USAR UM BANCO DE
IMAGENS?
SITE: INMAGINE.COM
LOGIN: esamcsantos
SENHA: esamcsantos
PARA NÃO ESQUECER!!
LEMBRE-SE DO JOHN LENNON
VAMOS PROCURAR UMA
IMAGEM SOBRE FAMÍLIA
(FAMILY). LEMBRE-SE DE
MARCAR A ORIENTAÇÃO
SQUARE (QUADRADA)!
ACHOU UMA IMAGEM?
CLIQUE NA SETINHA E
ESCOLHA A OPÇÃO
DISPONÍVEL PARA EXIBIR
A FOTO SEM MARCA
D’ÁGUA
EM EDIT – FREE
TRANSFORM, VAMOS
AUMENTAR A IMAGEM
DO TAMANHO DO POST
EM IMAGEM – AJUSTES
VÁ EM HUE E
SATURAÇÃO.
ACRESCENTE 20 OU 30
DE SATURAÇÃO.
AGORA VAMOS
ESCREVER UM SLOGAN.
ESCOLHA A COR E
CLIQUE NO TEXTO. PODE
TROCAR A FONTE OK?
O TEXTO DO
SLOGAN DEVERÁ
ESTAR DENTRO DA
MARGEM DE
SEGURANÇA.
VAMOS AGORA
ADICIONAR UMA
SOMBRA PARA
DESTACAR O
TEXTO
MODO DE
TRANSPARÊNCIA E
OPACIDADE
ÂNGULO DA
SOMBRA
PROJETADA
A DISTÂNCIA QUE
A SOMBRA SERÁ
PROJETADA
O NÍVEL DE
DESFOQUE DA
SOMBRA
O TAMANHO DA
SOMBRA
O IDEAL É CRIAR UMA
PLATAFORMA PARA
QUE O TEXTO SEJA
MELHOR
INTERPRETADO
VAMOS, DESDE JÁ,
APRENDER A DEIXAR O
NOSSO ARQUIVO
ORGANIZADO. DÊ
DOIS CLIQUES NA
IMAGEM (NO NOME E
NÃO NA MINIATURA) E
DÊ UM NOME A ELA.
SEGURE O SHIFT E
SELECIONE A
CAMADA DO TEXTO.
COM AS DUAS
SELECIONADAS,
APERTE CTRL+G PARA
AGRUPÁ-LAS.
PARA RENOMEAR O
GRUPO, O
PROCEDIMENTO É O
MESMO. CLIQUE DUAS
VEZES E DÊ UM NOME.
PARA ABRIR OU
FECHAR O GRUPO,
BASTA CLICAR NA
SETINHA.
SELECIONE A FOTO E
VAMOS DEIXAR ELA
MAIS NÍTIDA
VAMOS AGORA
SELECIONAR A
MÁSCARA DE NITIDEZ
ATIVE O PREVIEW E
DEIXE O THRESHOLD
EM ZERO. FEITO ISSO,
AUMENTE PRIMEIRO O
AMOUNT E VÁ
CONTROLANDO O
RADIUS.
GRUPO
bit.ly/gruporenato
FACEBOOK.COM/
RENATOMELOMKT
renato@iskadigital.com.br

Weitere ähnliche Inhalte

Was ist angesagt?

METODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFINGMETODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFING
Andrea Dalforno
 

Was ist angesagt? (20)

O que é identidade visual
O que é identidade visualO que é identidade visual
O que é identidade visual
 
Aula 03 O Que é ProduçãO GráFica
Aula 03 O Que é ProduçãO GráFicaAula 03 O Que é ProduçãO GráFica
Aula 03 O Que é ProduçãO GráFica
 
Fechamento de Arquivo - Computação Gráfica - 2022
Fechamento de Arquivo - Computação Gráfica - 2022Fechamento de Arquivo - Computação Gráfica - 2022
Fechamento de Arquivo - Computação Gráfica - 2022
 
Aula01 conceito design
Aula01 conceito designAula01 conceito design
Aula01 conceito design
 
Modelo espelho
Modelo espelhoModelo espelho
Modelo espelho
 
Copywriting e neuromarketing
Copywriting e neuromarketing Copywriting e neuromarketing
Copywriting e neuromarketing
 
Direção de Arte Publicitária - Intro
Direção de Arte Publicitária - IntroDireção de Arte Publicitária - Intro
Direção de Arte Publicitária - Intro
 
METODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFINGMETODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFING
 
Tipografia
TipografiaTipografia
Tipografia
 
Aula 6 - Comunicação Gráfica e Design
Aula 6  - Comunicação Gráfica e DesignAula 6  - Comunicação Gráfica e Design
Aula 6 - Comunicação Gráfica e Design
 
Manual de identidade visual Construpro
Manual de identidade visual Construpro Manual de identidade visual Construpro
Manual de identidade visual Construpro
 
Diagramação 01.3
Diagramação 01.3Diagramação 01.3
Diagramação 01.3
 
Usabilidade no Webdesign 2022
Usabilidade no Webdesign 2022Usabilidade no Webdesign 2022
Usabilidade no Webdesign 2022
 
Tipografia - Aula
Tipografia - AulaTipografia - Aula
Tipografia - Aula
 
Principios desenho
Principios desenhoPrincipios desenho
Principios desenho
 
Percepção + Elementos Básicos - Ling. Visual
Percepção + Elementos Básicos - Ling. VisualPercepção + Elementos Básicos - Ling. Visual
Percepção + Elementos Básicos - Ling. Visual
 
Branding aula 1 diego gervaes
Branding aula 1 diego gervaesBranding aula 1 diego gervaes
Branding aula 1 diego gervaes
 
Tipografia
Tipografia Tipografia
Tipografia
 
Criação e criatividade na campanha
Criação e criatividade na campanhaCriação e criatividade na campanha
Criação e criatividade na campanha
 
Semiótica Aplicada ao Design (Aula 01)
Semiótica Aplicada ao Design (Aula 01)Semiótica Aplicada ao Design (Aula 01)
Semiótica Aplicada ao Design (Aula 01)
 

Andere mochten auch

Curso de Direção de Arte Polo Criativo
Curso de Direção de Arte Polo CriativoCurso de Direção de Arte Polo Criativo
Curso de Direção de Arte Polo Criativo
Augusto Linck
 
Como baixar os estudo no slideshare
Como baixar os estudo no slideshareComo baixar os estudo no slideshare
Como baixar os estudo no slideshare
Moisés Sampaio
 

Andere mochten auch (11)

DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
 
Direção de Arte
Direção de ArteDireção de Arte
Direção de Arte
 
Aula - Publicidade e Arte - Direção e Finalização de Arte para Impressos
Aula - Publicidade e Arte - Direção e Finalização de Arte para ImpressosAula - Publicidade e Arte - Direção e Finalização de Arte para Impressos
Aula - Publicidade e Arte - Direção e Finalização de Arte para Impressos
 
Direção de arte
Direção de arteDireção de arte
Direção de arte
 
Portfolio ViSUALESCO 2016
Portfolio ViSUALESCO 2016Portfolio ViSUALESCO 2016
Portfolio ViSUALESCO 2016
 
As cores no design gráfico
As cores no design gráficoAs cores no design gráfico
As cores no design gráfico
 
Curso de Direção de Arte Polo Criativo
Curso de Direção de Arte Polo CriativoCurso de Direção de Arte Polo Criativo
Curso de Direção de Arte Polo Criativo
 
Direção de Arte
Direção de ArteDireção de Arte
Direção de Arte
 
SPP - Design e Direção de Arte
SPP - Design e Direção de ArteSPP - Design e Direção de Arte
SPP - Design e Direção de Arte
 
Como baixar os estudo no slideshare
Como baixar os estudo no slideshareComo baixar os estudo no slideshare
Como baixar os estudo no slideshare
 
Passo a passo para baixar slides
Passo a passo para baixar slidesPasso a passo para baixar slides
Passo a passo para baixar slides
 

Mehr von Renato Melo

Mehr von Renato Melo (20)

Expressa Esamc - Oficina de Reels e TikTOk
Expressa Esamc - Oficina de Reels e TikTOkExpressa Esamc - Oficina de Reels e TikTOk
Expressa Esamc - Oficina de Reels e TikTOk
 
Redação para Gestão de Crise 1 - Técnicas de Redação em RP
Redação para Gestão de Crise 1 - Técnicas de Redação em RPRedação para Gestão de Crise 1 - Técnicas de Redação em RP
Redação para Gestão de Crise 1 - Técnicas de Redação em RP
 
HTML 1 e 2 - Webdesign - 2022
HTML 1 e 2 - Webdesign - 2022HTML 1 e 2 - Webdesign - 2022
HTML 1 e 2 - Webdesign - 2022
 
Redação para E-mail - Jornalismo Multimídia
Redação para E-mail - Jornalismo MultimídiaRedação para E-mail - Jornalismo Multimídia
Redação para E-mail - Jornalismo Multimídia
 
Html e E-mail Marketing - Webdesign 2022
Html e E-mail Marketing - Webdesign 2022Html e E-mail Marketing - Webdesign 2022
Html e E-mail Marketing - Webdesign 2022
 
Anúncio para AT Revista - Computação Gráfica 2022
Anúncio para AT Revista - Computação Gráfica 2022Anúncio para AT Revista - Computação Gráfica 2022
Anúncio para AT Revista - Computação Gráfica 2022
 
Marketing por Conteúdo - Projeto Web 2022
Marketing por Conteúdo - Projeto Web 2022Marketing por Conteúdo - Projeto Web 2022
Marketing por Conteúdo - Projeto Web 2022
 
FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022
FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022
FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022
 
Storytelling no Jornalismo - Jornalismo Multimídia 2022
Storytelling no Jornalismo - Jornalismo Multimídia 2022Storytelling no Jornalismo - Jornalismo Multimídia 2022
Storytelling no Jornalismo - Jornalismo Multimídia 2022
 
HTML - Webdesign - 2022
HTML - Webdesign - 2022HTML - Webdesign - 2022
HTML - Webdesign - 2022
 
Imagens para Redes Sociais - Computação Gráfica 2022
Imagens para Redes Sociais - Computação Gráfica 2022Imagens para Redes Sociais - Computação Gráfica 2022
Imagens para Redes Sociais - Computação Gráfica 2022
 
Social Ads - Projeto Web - 2022
Social Ads - Projeto Web - 2022Social Ads - Projeto Web - 2022
Social Ads - Projeto Web - 2022
 
Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022
Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022
Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022
 
Storytelling - Técnicas de Redação em RP 2022
Storytelling - Técnicas de Redação em RP 2022Storytelling - Técnicas de Redação em RP 2022
Storytelling - Técnicas de Redação em RP 2022
 
Jornalismo em Vídeo - Jornalismo Multimídia 2022
Jornalismo em Vídeo - Jornalismo Multimídia 2022Jornalismo em Vídeo - Jornalismo Multimídia 2022
Jornalismo em Vídeo - Jornalismo Multimídia 2022
 
Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022
Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022
Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022
 
Jornalismo nas Plataformas Digitais - Jornalismo Online 2022
Jornalismo nas Plataformas Digitais - Jornalismo Online 2022Jornalismo nas Plataformas Digitais - Jornalismo Online 2022
Jornalismo nas Plataformas Digitais - Jornalismo Online 2022
 
Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022
Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022
Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022
 
Escrevendo para o SEO - Técnicas de Redação em RP - 2022
Escrevendo para o SEO - Técnicas de Redação em RP - 2022Escrevendo para o SEO - Técnicas de Redação em RP - 2022
Escrevendo para o SEO - Técnicas de Redação em RP - 2022
 
COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022
COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022
COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022
 

AULA DE PHOTOSHOP - DESIGN PARA WEB