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