WEBVTT

00:00:07.686 --> 00:00:09.926
Você sabe a maneira
correta de salvar a capa

00:00:09.926 --> 00:00:11.988
que você criou
para o seu site?

00:00:11.988 --> 00:00:14.701
A gente vai para o Photoshop
para fazer isso na prática,

00:00:14.701 --> 00:00:19.386
mas, antes, vamos adaptar a capa
que a gente criou para o mobile.

00:00:19.386 --> 00:00:21.098
Vamos lá.

00:00:21.098 --> 00:00:27.247
Aqui está nossa capa, basta a gente
pegar os elementos que a gente quer,

00:00:27.247 --> 00:00:31.384
ou eu posso até pegar
todos, melhor.

00:00:31.384 --> 00:00:36.765
Primeiro, a textura ctrl+c,
venho para capa mobile,

00:00:36.765 --> 00:00:41.637
tiro o que a gente
criou já, ctrl+v.

00:00:43.003 --> 00:00:45.344
Vou até tirar esse background
que a gente não vai precisar,

00:00:45.344 --> 00:00:48.822
deixar só o que a gente
criou, vou bloquear

00:00:48.822 --> 00:00:51.766
e, aí, vou pegar esses
outros elementos.

00:00:53.332 --> 00:00:56.592
Ctrl+c, ctrl+v.

00:00:56.592 --> 00:01:00.719
Já estamos com os elementos
aqui criados.

00:01:00.719 --> 00:01:01.868
Opa!

00:01:01.868 --> 00:01:05.022
Segurando o shift para não
distorcer a imagem.

00:01:06.588 --> 00:01:07.931
Ok.

00:01:07.931 --> 00:01:11.993
Faltou um elemento aqui para criar
uma sensação de profundidade,

00:01:11.993 --> 00:01:14.377
que é a textura.

00:01:14.377 --> 00:01:18.218
Vou abrir a pastinha,
porque eu quero só uma,

00:01:18.218 --> 00:01:20.144
ctrl+c

00:01:21.104 --> 00:01:23.171
ctrl+v, ela criou por cima,

00:01:23.171 --> 00:01:26.456
eu não quero por cima, eu
quero por baixo da modelo.

00:01:26.456 --> 00:01:29.246
Posso até aumentar
um pouquinho assim,

00:01:29.246 --> 00:01:35.312
legal, e usar a borracha
para apagar.

00:01:35.312 --> 00:01:38.938
Vou colocar até para baixo
dos nossos elementos

00:01:38.938 --> 00:01:43.250
para ficar acima
apenas do background.

00:01:43.250 --> 00:01:47.811
Perfeito, foi a capa de mobile
mais rápida que a gente já criou,

00:01:47.811 --> 00:01:51.243
e vamos salvar em WebP.

00:01:52.072 --> 00:01:56.321
É importante você saber que o site
pode utilizar imagens, também,

00:01:56.321 --> 00:02:00.786
como JPEG e PNG, mas quando
você pensa em um site otimizado,

00:02:00.786 --> 00:02:02.542
um site leve, rápido,

00:02:02.542 --> 00:02:06.762
bom para ranquear nos mecanismos
de busca da internet,

00:02:07.707 --> 00:02:11.831
o formato WebP é o melhor
formato que tem.

00:02:11.831 --> 00:02:17.237
Então, para isso, vamos vir
aqui em "file", no Photoshop,

00:02:17.901 --> 00:02:22.311
vamos, antes, dar um ctrl+s,
para deixar salva a nossa capa,

00:02:22.311 --> 00:02:25.689
e vamos aqui em "save as"?

00:02:25.689 --> 00:02:26.840
Não, não, não, não, não.

00:02:26.840 --> 00:02:31.408
Aqui em "save as", temos
só PSB, PDF e TIF,

00:02:31.408 --> 00:02:33.046
não é isso que a gente quer.

00:02:33.046 --> 00:02:35.595
A gente tem que salvar
como cópia.

00:02:35.595 --> 00:02:39.762
Então, "save a copy",
ou alt+ctrl+s,

00:02:39.762 --> 00:02:44.134
clico aqui e, quando a gente
abre, tem diversos formatos,

00:02:44.134 --> 00:02:48.091
e o último formato,
mais novo, mais recente,

00:02:48.091 --> 00:02:52.442
é o WebP, formato
criado pela Google.

00:02:52.442 --> 00:02:57.587
Vamos salvar na nossa
pasta, que está aqui,

00:02:57.587 --> 00:03:00.577
deixa eu ver, nessa
pastinha aqui, "a laranja"

00:03:00.577 --> 00:03:05.098
e vamos deixar
como "capa mobile".

00:03:05.098 --> 00:03:08.795
Vou tirar aqui, e "save".

00:03:08.795 --> 00:03:13.777
Aqui, eu posso reduzir
ou aumentar a qualidade.

00:03:13.777 --> 00:03:17.340
Quando eu habilito
essa metadata,

00:03:17.340 --> 00:03:20.065
ele leva uma série de informações
para a imagem que a gente não quer,

00:03:20.065 --> 00:03:21.711
porque só pesa a imagem.

00:03:21.711 --> 00:03:24.237
Então, eu vou deixar
aqui em "lossy",

00:03:24.237 --> 00:03:27.998
eu posso até diminuir
um pouquinho mais, para 95,

00:03:27.998 --> 00:03:30.248
e dar um "ok" e salvar.

00:03:30.730 --> 00:03:36.599
Vamos salvar em PNG também
para eu mostrar a diferença

00:03:36.599 --> 00:03:41.446
quando você salva duas imagens
em formatos diferentes,

00:03:41.446 --> 00:03:43.733
a diferença de tamanho.

00:03:43.733 --> 00:03:49.372
Então, vamos aqui em nossa pasta,
deve estar aqui em "a laranja",

00:03:49.372 --> 00:03:53.603
a WebP está aqui, a PNG eu
devo ter salvo em outro lugar,

00:03:53.603 --> 00:03:55.498
vamos salvar de novo.

00:03:58.343 --> 00:04:01.517
Ah, separei mesmo,
vou pegar e dar um ctrl+x

00:04:01.517 --> 00:04:06.993
e vou colar na nossa
pasta, "a laranja", ok.

00:04:06.993 --> 00:04:09.752
"Save", "yes".

00:04:09.752 --> 00:04:11.985
Vamos voltar para a pasta.

00:04:12.832 --> 00:04:17.359
Estão as duas imagens
aqui, em PNG e em WebP.

00:04:17.359 --> 00:04:19.225
PNG, se a gente vier aqui
com o botão direito

00:04:19.225 --> 00:04:21.781
e clicar em "propriedades",

00:04:21.781 --> 00:04:29.505
a gente consegue visualizar
que ela está em 1,57 MB, em PNG.

00:04:30.310 --> 00:04:38.354
E em WebP, se a gente fizer
a mesma coisa, ela está em 256 KB,

00:04:38.354 --> 00:04:43.590
ela reduziu muito e continua
com a mesma qualidade.

00:04:43.590 --> 00:04:46.678
E, aqui, se a gente abre
o PNG, está bonitinho,

00:04:46.678 --> 00:04:47.814
é uma imagem pixelizada,

00:04:47.814 --> 00:04:52.011
então, conforme o for crescendo,
vai perdendo um pouco a resolução,

00:04:52.011 --> 00:04:53.971
mas, para site, isso
não tem importância,

00:04:55.595 --> 00:04:57.681
o mais importante
é usar o WebP.

00:04:57.681 --> 00:04:59.518
E aqui eu vou abrir

00:05:00.813 --> 00:05:04.811
com o nosso Google Chrome
para visualizar

00:05:04.811 --> 00:05:07.625
que ela também está grande
o suficiente para o site,

00:05:07.625 --> 00:05:10.046
principalmente para mobile.

00:05:10.046 --> 00:05:15.961
Então, é uma imagem grande,
com uma resolução bacana e otimizada.

00:05:15.961 --> 00:05:18.364
Então, o que a gente fez
aqui foi apenas adaptar

00:05:18.364 --> 00:05:21.241
a nossa capa de desktop
para mobile

00:05:21.241 --> 00:05:24.572
e salvar em um melhor formato
para interface digital,

00:05:24.572 --> 00:05:27.421
que é a WebP,
aqui no Photoshop.