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.