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