-
Você sabe a maneira
-
correta de salvar a capa
que você criou para o seu site?
-
A gente vai para o Photoshop
para fazer isso na prática.
-
Mas antes, vamos adaptar a capa
que a gente criou para o mobile.
-
Vamos lá.
-
Aqui está nossa capa.
-
Basta a gente pegar os elementos
que a gente quer.
-
Ou eu posso até pegar todos
-
melhor.
-
Primeiro, a textura Control
-
C vem para capa
mobile, tira o que a gente criou
-
já Control V.
-
Vou até tirar esse background
-
que a gente não vai precisar
deixar só o que a gente criou.
-
Vou bloquear
-
e ai vou pegar esses outros
elementos.
-
Control C
-
Control V
Já estamos com os elementos aqui
-
criados. Opa!
-
Segurando shift para não distorcer
a imagem. Ok.
-
Faltou um elemento aqui para criar
-
uma sensação de
profundidade que a textura.
-
Vou abrir a
-
pastinha porque eu quero só uma
-
control C
-
control V.
-
Ela criou por cima, não quero
por cima, quero por baixo da modelo.
-
Posso até aumentar um pouquinho
assim.
-
Legal é usar a borracha para
-
apagar.
-
Vou colocar
até para baixo das nossas elementos
-
aqui para ficar acima
apenas do background.
-
Perfeito.
-
Foi a capa de banho
mais rápida que a gente já criou
-
e vamos salvar em MP.
-
É importante você saber que o site
-
pode utilizar imagens também
como JPEG e PNG.
-
Mas quando você pensa num site
otimizado, um site leve, rápido,
-
bom para ranquear
nos mecanismos de busca da internet.
-
O formato web é o melhor formato
que tem.
-
Então, para isso, vamos vir aqui.
-
Feel no Photoshop.
-
Vamos antes dar um control S
-
para deixar salva
a nossa capa e vamos aqui
-
sem viés.
-
Não, não, não, não, não.
-
Aqui não sei viés,
Temos só PSD, PDF e TIFF.
-
Não é isso que a gente quer.
-
A gente tem que salvar como cópia.
-
Então, se a copy ou alt control s,
clica aqui e aqui.
-
Quando a gente abre
tem diversos formatos
-
e o último formato mais novo,
mais recente,
-
é o Web, formato criado pela Google.
-
Vamos, Vamos salvar na nossa pasta
que ela está aqui.
-
Deixa eu ver nessa pastinha
aqui a laranja e vamos deixar
-
em capa mobile.
-
Vou tirar que é sempre
-
aqui.
-
Eu posso reduzir
ou aumentar a qualidade.
-
Quando eu habilito esse metadado,
essa metadata,
-
ele leva uma série de informações
para a imagem
-
que a gente
não quer que só pegue a imagem.
-
Então eu vou deixar aqui em nós.
-
Diminui a opacidade,
diminui um pouquinho mais para 95
-
e dá um ok salvar
e vamos salvar em PNG também
-
para mostrar a diferença.
-
Quando você salva
duas imagens diferentes em formatos
-
diferentes, a diferença de tamanho.
-
Então vamos aqui em nosso
-
e nossa pasta
deve estar aqui em laranja
-
a web preta aqui a png
eu devo ter salvado em outro lugar.
-
Vamos salvar de novo
-
e separei mesmo.
-
Vou pegar e dar um control X e vou
colar na nossa pasta a laranja, ok?
-
Serve. Yes!
-
Vamos voltar para a pasta.
-
Estão as duas imagens
-
aqui em PNG é web.
-
PNG Se a gente vem aqui com o botão
-
direito,
clica e clica em Propriedades,
-
a gente consegue visualizar
que ela está em 1,57 megas
-
em PNG
-
e em web page.
-
Se a gente fizer a mesma coisa,
-
ela está em 256 Kbytes.
-
Ela reduziu muito
e continua com a mesma qualidade.
-
E aqui
se a gente abre o png tá bonitinho.
-
Aqui é uma imagem pixelizada,
-
então conforme o for crescendo,
vai perdendo um pouco a resolução.
-
Mas pra site
isso não tem importância.
-
O mais importante é usar o
web page e aqui eu vou abrir
-
com o
nosso Google Chrome para visualizar
-
que ele também está grande
-
o suficiente para o site,
principalmente para mobile.
-
Então é uma imagem grande,
com a resolução
-
bacana e otimizada.
-
Então, o que a gente fez aqui
foi apenas adaptar
-
a nossa capa de desktop para mobile
-
e salvar num melhor formato
para interface digital, que é o web.
-
Aqui no Photoshop.
