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 Control
C vem para capa mobile, tira o que a gente criou
já Control V.
Vou até tirar esse background
que a gente não vai precisar deixar só o que a gente criou.
Vou bloquear
e ai vou pegar esses outros elementos.
Control C
Control V Já estamos com os elementos aqui
criados. Opa!
Segurando 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
control C
control V.
Ela criou por cima, não quero por cima, quero por baixo da modelo.
Posso até aumentar um pouquinho assim.
Legal é usar a borracha para
apagar.
Vou colocar até para baixo das nossas elementos
aqui para ficar acima apenas do background.
Perfeito.
Foi a capa de banho mais rápida que a gente já criou
e vamos salvar em MP.
É importante você saber que o site
pode utilizar imagens também como JPEG e PNG.
Mas quando você pensa num site otimizado, um site leve, rápido,
bom para ranquear nos mecanismos de busca da internet.
O formato web é o melhor formato que tem.
Então, para isso, vamos vir aqui.
Feel no Photoshop.
Vamos antes dar um control S
para deixar salva a nossa capa e vamos aqui
sem viés.
Não, não, não, não, não.
Aqui não sei viés, Temos só PSD, PDF e TIFF.
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.