AULA DE PHOTOSHOP - DESIGN PARA WEB

67 %
33 %
Information about AULA DE PHOTOSHOP - DESIGN PARA WEB
Design

Published on February 19, 2014

Author: RenatoMelo1

Source: slideshare.net

Description

Na Aula de Photoshop - Design para Web você confere como funciona a plataforma de cores RGB, o número de DPI e como configurar uma margem de segurança para o texto. Além disso, conta com um tutorial de como montar uma imagem para o Facebook, realçando a nitidez e as cores.

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

Add a comment

Related presentations

Related pages

Ferramentas de Seleção - Curso de Photoshop para Web ...

Aprenda a usar as ferramentas de seleção do Photoshop. Aprendendo a usar o Laço, o Laço Poligonal, Laço Magnético Também a Varinha ...
Read more

Curso de Photoshop Para WEB - Aula 07 - Animando o Banner ...

Curso de Photoshop para WEB - Aula 08 ... Apresentação e Introdução - Curso Photoshop para Web Design - Aula 1 - Alan Mosko - Duration: 5:27.
Read more

Curso de Webdesigner - Cursos Online Grátis | Prime Cursos

Criações de Arquivos para Web Vocabulário Utilizado no Photoshop ... Photoshop, HTML, formatação de páginas, estilos, noções de cores. ...
Read more

Aulas Photoshop

Aulas Photoshop Adobe ... Você está no controle com novos recursos indispensáveis que ajudam profissionais de design gráfico e design para a Web, ...
Read more

CURSO GRATUITO DE PHOTOSHOP - AULA 01 on Vimeo

Blog de design, publicidade, marketing, análises de campanhas, dicas para web e agora com um curso gratuito de photoshop! designfera.com.br
Read more

Curso de web design download video aula by baixar Download ...

video aula web design aulas de web ... curso de design para web curso web ... php design digital curso de php curso photoshop webdesign ...
Read more

Cursos de Design Gráfico e Webdesign | Intelecta Cursos

Aulas 100% em Vídeo, ... Curso de Adobe Photoshop CS6 em Design Gráfico e Webdesign. ... Curso de CorelDRAW X6 em Design Gráfico e Web.
Read more

Curso Web Design - Cursos do Básico ao Avançado Sobre ...

Cursos Online de Desenvolvimento Web para Formação ... ter uma Conta na Curso Web Design, ... 430 Aulas 61 ...
Read more

CURSO GRATUITO DE PHOTOSHOP - AULA 02 - FERRAMENTAS DE ...

Blog de design, publicidade, marketing, análises de campanhas, dicas para web e agora com um curso gratuito de photoshop! designfera.com.br
Read more