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,
tiro 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, o mais novo, o 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 e em 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 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.