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

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

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

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

0:00:19.586,0:00:21.187
Vamos lá.

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

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

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

0:00:36.135,0:00:41.775
tira o que a gente[br]criou já, ctrl+v.

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

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

0:00:48.982,0:00:51.985
e, aí, vou pegar esses[br]outros elementos.

0:00:53.453,0:00:56.172
Ctrl+c, ctrl+v.

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

0:01:00.739,0:01:02.128
Opa!

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

0:01:06.618,0:01:08.101
Ok.

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

0:01:12.183,0:01:14.507
que é a textura.

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

0:01:18.378,0:01:20.394
ctrl+c

0:01:21.214,0:01:23.311
ctrl+v, ela criou por cima,

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

0:01:26.586,0:01:29.456
Posso até aumentar[br]um pouquinho assim,

0:01:29.456,0:01:35.462
legal, e usar a borracha[br]para apagar.

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

0:01:38.898,0:01:43.470
para ficar acima[br]apenas do background.

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

0:01:48.041,0:01:52.212
e vamos salvar em WebP.

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

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

0:02:01.026,0:02:02.722
um site leve, rápido,

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

0:02:07.827,0:02:12.031
o formato WebP é o melhor[br]formato que tem.

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

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

0:02:21.841,0:02:25.879
e vamos aqui em "save as"?

0:02:25.879,0:02:27.080
Não, não, não, não, não.

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

0:02:31.618,0:02:33.286
não é isso que a gente quer.

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

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

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

0:02:44.364,0:02:48.301
e o último formato,[br]mais novo, mais recente,

0:02:48.301,0:02:52.572
é o WebP, formato[br]criado pela Google.

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

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

0:03:00.697,0:03:05.218
e vamos deixar[br]como "capa mobile".

0:03:05.218,0:03:09.055
Vou tirar aqui, e "save".

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

0:03:13.927,0:03:17.530
Quando eu habilito[br]essa metadata,

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

0:03:20.225,0:03:21.901
porque só pesa a imagem.

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

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

0:03:28.208,0:03:30.330
e dar um "ok" e salvar.

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

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

0:03:41.086,0:03:43.923
a diferença de tamanho.

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

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

0:03:53.733,0:03:55.461
vamos salvar de novo.

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

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

0:04:07.113,0:04:09.882
Serve. Yes!

0:04:09.882,0:04:12.885
Vamos voltar para a pasta.

0:04:12.952,0:04:14.520
Estão as duas imagens

0:04:14.520,0:04:17.490
aqui em PNG é web.

0:04:17.490,0:04:19.058
PNG Se a gente vem aqui com o botão

0:04:19.058,0:04:21.961
direito,[br]clica e clica em Propriedades,

0:04:21.961,0:04:27.033
a gente consegue visualizar[br]que ela está em 1,57 megas

0:04:28.134,0:04:30.370
em PNG

0:04:30.370,0:04:31.404
e em web page.

0:04:31.404,0:04:34.374
Se a gente fizer a mesma coisa,

0:04:34.374,0:04:38.144
ela está em 256 Kbytes.

0:04:38.544,0:04:42.582
Ela reduziu muito[br]e continua com a mesma qualidade.

0:04:43.750,0:04:46.252
E aqui[br]se a gente abre o png tá bonitinho.

0:04:46.252,0:04:48.054
Aqui é uma imagem pixelizada,

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

0:04:52.191,0:04:55.194
Mas pra site[br]isso não tem importância.

0:04:55.795,0:04:58.998
O mais importante é usar o[br]web page e aqui eu vou abrir

0:05:00.933,0:05:04.437
com o[br]nosso Google Chrome para visualizar

0:05:04.971,0:05:06.205
que ele também está grande

0:05:06.205,0:05:09.208
o suficiente para o site,[br]principalmente para mobile.

0:05:10.276,0:05:12.979
Então é uma imagem grande,[br]com a resolução

0:05:12.979,0:05:15.982
bacana e otimizada.

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

0:05:18.584,0:05:21.421
a nossa capa de desktop para mobile

0:05:21.421,0:05:25.558
e salvar num melhor formato[br]para interface digital, que é o web.

0:05:25.858,0:05:26.893
Aqui no Photoshop.