0:00:07.686,0:00:09.926
Você sabe a maneira[br]correta de salvar a capa

0:00:09.926,0:00:11.988
que você criou[br]para o seu site?

0:00:11.988,0:00:14.701
A gente vai para o Photoshop[br]para fazer isso na prática,

0:00:14.701,0:00:19.386
mas, antes, vamos adaptar a capa[br]que a gente criou para o mobile.

0:00:19.386,0:00:21.098
Vamos lá.

0:00:21.098,0:00:27.247
Aqui está nossa capa, basta a gente[br]pegar os elementos que a gente quer,

0:00:27.247,0:00:31.384
ou eu posso até pegar[br]todos, melhor.

0:00:31.384,0:00:36.765
Primeiro, a textura, ctrl+c,[br]venho para capa mobile,

0:00:36.765,0:00:41.637
tiro o que a gente[br]criou já, ctrl+v.

0:00:43.003,0:00:45.344
Vou até tirar esse background[br]que a gente não vai precisar,

0:00:45.344,0:00:48.822
deixar só o que a gente[br]criou, vou bloquear

0:00:48.822,0:00:51.766
e, aí, vou pegar esses[br]outros elementos,

0:00:53.332,0:00:56.592
ctrl+c, ctrl+v.

0:00:56.592,0:01:00.719
Já estamos com os elementos[br]aqui criados.

0:01:00.719,0:01:01.868
Opa!

0:01:01.868,0:01:05.022
Segurando o shift para não[br]distorcer a imagem.

0:01:06.588,0:01:07.931
Ok.

0:01:07.931,0:01:11.993
Faltou um elemento aqui para criar[br]uma sensação de profundidade,

0:01:11.993,0:01:14.377
que é a textura.

0:01:14.377,0:01:18.218
Vou abrir a pastinha,[br]porque eu quero só uma,

0:01:18.218,0:01:20.144
ctrl+c

0:01:21.104,0:01:23.171
ctrl+v, ela criou por cima,

0:01:23.171,0:01:26.456
eu não quero por cima, eu[br]quero por baixo da modelo.

0:01:26.456,0:01:29.246
Posso até aumentar[br]um pouquinho assim,

0:01:29.246,0:01:35.312
legal, e usar a borracha[br]para apagar.

0:01:35.312,0:01:38.938
Vou colocar até para baixo[br]dos nossos elementos

0:01:38.938,0:01:43.250
para ficar acima[br]apenas do background.

0:01:43.250,0:01:47.811
Perfeito, foi a capa de mobile[br]mais rápida que a gente já criou,

0:01:47.811,0:01:51.243
e vamos salvar em WebP.

0:01:52.072,0:01:56.321
É importante você saber que o site[br]pode utilizar imagens, também,

0:01:56.321,0:02:00.786
como JPEG e PNG, mas quando[br]você pensa em um site otimizado,

0:02:00.786,0:02:02.542
um site leve, rápido,

0:02:02.542,0:02:06.762
bom para ranquear nos mecanismos[br]de busca da internet,

0:02:07.707,0:02:11.831
o formato WebP é o melhor[br]formato que tem.

0:02:11.831,0:02:17.237
Então, para isso, vamos vir[br]aqui em "file", no Photoshop,

0:02:17.901,0:02:22.311
vamos, antes, dar um ctrl+s,[br]para deixar salva a nossa capa,

0:02:22.311,0:02:25.689
e vamos aqui em "save as"?

0:02:25.689,0:02:26.840
Não, não, não, não, não.

0:02:26.840,0:02:31.408
Aqui em "save as", temos[br]só PSB, PDF e TIF,

0:02:31.408,0:02:33.046
não é isso que a gente quer.

0:02:33.046,0:02:35.595
A gente tem que salvar[br]como cópia.

0:02:35.595,0:02:39.762
Então, "save a copy",[br]ou alt+ctrl+s,

0:02:39.762,0:02:44.134
clico aqui e, quando a gente[br]abre, tem diversos formatos,

0:02:44.134,0:02:48.091
e o último formato, o mais[br]novo, o mais recente,

0:02:48.091,0:02:52.442
é o WebP, formato[br]criado pela Google.

0:02:52.442,0:02:57.587
Vamos salvar na nossa[br]pasta, que está aqui,

0:02:57.587,0:03:00.577
deixa eu ver, nessa[br]pastinha aqui, "a laranja"

0:03:00.577,0:03:05.098
e vamos deixar[br]como "capa mobile".

0:03:05.098,0:03:08.795
Vou tirar aqui, e "save".

0:03:08.795,0:03:13.777
Aqui, eu posso reduzir[br]ou aumentar a qualidade.

0:03:13.777,0:03:17.340
Quando eu habilito[br]essa metadata,

0:03:17.340,0:03:20.065
ele leva uma série de informações[br]para a imagem que a gente não quer,

0:03:20.065,0:03:21.711
porque só pesa a imagem.

0:03:21.711,0:03:24.237
Então, eu vou deixar[br]aqui em "lossy",

0:03:24.237,0:03:27.998
eu posso até diminuir[br]um pouquinho mais, para 95,

0:03:27.998,0:03:30.248
e dar um "ok" e salvar.

0:03:30.730,0:03:36.559
Vamos salvar em PNG também,[br]para eu mostrar a diferença

0:03:36.559,0:03:41.446
quando você salva duas imagens[br]em formatos diferentes,

0:03:41.446,0:03:43.733
a diferença de tamanho.

0:03:43.733,0:03:49.372
Então, vamos aqui em nossa pasta,[br]deve estar aqui em "a laranja",

0:03:49.372,0:03:53.603
a WebP está aqui, a PNG eu[br]devo ter salvo em outro lugar,

0:03:53.603,0:03:55.498
vamos salvar de novo.

0:03:58.343,0:04:01.517
Ah, separei mesmo,[br]vou pegar e dar um ctrl+x

0:04:01.517,0:04:06.993
e vou colar na nossa[br]pasta, "a laranja", ok.

0:04:06.993,0:04:09.752
"Save", "yes".

0:04:09.752,0:04:11.985
Vamos voltar para a pasta.

0:04:12.832,0:04:17.359
Estão as duas imagens[br]aqui, em PNG e em WebP.

0:04:17.359,0:04:19.225
PNG, se a gente vier aqui[br]com o botão direito

0:04:19.225,0:04:21.781
e clicar em "propriedades",

0:04:21.781,0:04:29.505
a gente consegue visualizar[br]que ela está em 1,57 MB, em PNG.

0:04:30.310,0:04:38.354
E em WebP, se a gente fizer[br]a mesma coisa, ela está em 256 KB,

0:04:38.354,0:04:43.590
ela reduziu muito e continua[br]com a mesma qualidade.

0:04:43.590,0:04:46.678
E, aqui, se a gente abre[br]o PNG, está bonitinho,

0:04:46.678,0:04:47.814
é uma imagem pixelizada,

0:04:47.814,0:04:52.011
então, conforme for crescendo,[br]vai perdendo um pouco a resolução,

0:04:52.011,0:04:53.971
mas, para site, isso[br]não tem importância,

0:04:55.595,0:04:57.681
o mais importante[br]é usar o WebP.

0:04:57.681,0:04:59.518
E aqui eu vou abrir

0:05:00.813,0:05:04.811
com o nosso Google Chrome[br]para visualizar

0:05:04.811,0:05:07.625
que ela também está grande[br]o suficiente para o site,

0:05:07.625,0:05:10.046
principalmente para mobile.

0:05:10.046,0:05:15.961
Então, é uma imagem grande,[br]com uma resolução bacana e otimizada.

0:05:15.961,0:05:18.364
Então, o que a gente fez[br]aqui foi apenas adaptar

0:05:18.364,0:05:21.241
a nossa capa de desktop[br]para mobile

0:05:21.241,0:05:24.572
e salvar em um melhor formato[br]para interface digital,

0:05:24.572,0:05:27.421
que é a WebP,[br]aqui no Photoshop.