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:56.943
Vamos, Vamos salvar na nossa pasta[br]que ela está aqui.

0:02:57.777,0:03:01.748
Deixa eu ver nessa pastinha[br]aqui a laranja e vamos deixar

0:03:02.815,0:03:05.218
em capa mobile.

0:03:05.218,0:03:08.221
Vou tirar que é sempre

0:03:09.055,0:03:09.355
aqui.

0:03:09.355,0:03:12.559
Eu posso reduzir[br]ou aumentar a qualidade.

0:03:13.927,0:03:17.230
Quando eu habilito esse metadado,[br]essa metadata,

0:03:17.530,0:03:19.532
ele leva uma série de informações[br]para a imagem

0:03:19.532,0:03:21.901
que a gente[br]não quer que só pegue a imagem.

0:03:21.901,0:03:24.137
Então eu vou deixar aqui em nós.

0:03:24.137,0:03:27.574
Diminui a opacidade,[br]diminui um pouquinho mais para 95

0:03:28.208,0:03:33.513
e dá um ok salvar[br]e vamos salvar em PNG também

0:03:34.147,0:03:36.749
para mostrar a diferença.

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

0:03:40.386,0:03:43.389
diferentes, a diferença de tamanho.

0:03:43.923,0:03:46.459
Então vamos aqui em nosso

0:03:46.459,0:03:49.462
e nossa pasta[br]deve estar aqui em laranja

0:03:49.562,0:03:53.666
a web preta aqui a png[br]eu devo ter salvado em outro lugar.

0:03:53.733,0:03:54.701
Vamos salvar de novo

0:03:56.703,0:03:59.606
e separei mesmo.

0:03:59.606,0:04:06.379
Vou pegar e dar um control X e vou[br]colar na nossa 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.