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.
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.