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 salvar na nossa
pasta, que está aqui,
deixa eu ver, nessa
pastinha aqui, "a laranja"
e vamos deixar
como "capa mobile".
Vou tirar aqui, e "save".
Aqui, eu posso reduzir
ou aumentar a qualidade.
Quando eu habilito
essa metadata,
ele leva uma série de informações
para a imagem que a gente não quer,
porque só pesa a imagem.
Então, eu vou deixar
aqui em "lossy",
eu posso até diminuir
um pouquinho mais, para 95,
e dar um "ok" e salvar.
Vamos salvar em PNG também
para eu mostrar a diferença
quando você salva duas imagens
em formatos diferentes,
a diferença de tamanho.
Então vamos aqui em nossa pasta,
deve estar aqui em "a laranja",
a WebP está aqui, a PNG eu
devo ter salvo em outro lugar,
vamos salvar de novo.
Ah, separei mesmo,
vou pegar e dar um ctrl+x
e vou colar na nossa
pasta, "a laranja", ok.
"Save", "yes".
Vamos voltar para a pasta.
Estão as duas imagens
aqui em PNG é WebP.
PNG, se a gente vier aqui
com o botão direito
e clicar em "propriedades",
a gente consegue visualizar
que ela está em 1,57 MB, em PNG.
E em WebP, se a gente fizer
a mesma coisa, ela está em 256 KB,
ela reduziu muito e continua
com a mesma qualidade.
E, aqui, se a gente abre
o PNG, está bonitinho,
é uma imagem pixelizada,
então, conforme o for crescendo,
vai perdendo um pouco a resolução,
mas, para site, isso
não tem importância,
o mais importante
é usar o WebP.
E aqui eu vou abrir
com o nosso Google Chrome
para visualizar
que ela também está grande
o suficiente para o site,
principalmente para mobile.
Então é uma imagem grande,
com uma 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 em um melhor formato
para interface digital,
que é a WebP,
aqui no Photoshop.