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.