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 ctrl+c,
venho para capa mobile,

tira o que a gente
criou já, ctrl+v.

Vou até tirar esse background
que a gente não vai precisar,

deixar só o que a gente
criou, vou bloquear

e, aí, vou pegar esses
outros elementos.

Ctrl+c, ctrl+v.

Já estamos com os elementos
aqui criados.

Opa!

Segurando o 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,

ctrl+c

ctrl+v, ela criou por cima,

eu não quero por cima, eu
quero por baixo da modelo.

Posso até aumentar
um pouquinho assim,

legal, e usar a borracha
para apagar.

Vou colocar até para baixo
dos nossos elementos

para ficar acima
apenas do background.

Perfeito, foi a capa de mobile
mais rápida que a gente já criou,

e vamos salvar em WebP.

É importante você saber que o site
pode utilizar imagens também

como JPEG e PNG, mas quando
você pensa em um site otimizado,

um site leve, rápido,

bom para ranquear nos mecanismos
de busca da internet,

o formato WebP é o melhor
formato que tem.

Então, para isso, vamos vir
aqui em "file", no Photoshop,

vamos, antes, dar um ctrl+s,
para deixar salva a nossa capa,

e vamos aqui em "save as"?

Não, não, não, não, não.

Aqui em "save as", temos
só PSB, PDF e TIF,

não é isso que a gente quer.

A gente tem que salvar
como cópia.

Então, "save a copy",
ou alt+ctrl+s,

clico aqui e, quando a gente
abre, tem diversos formatos,

e o último formato,
mais novo, mais recente,

é o WebP, 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.