0:00:08.241,0:00:08.908 Você sabe a maneira 0:00:08.908,0:00:11.911 correta de salvar a capa[br]que você criou 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:18.952 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:22.922 Aqui está nossa capa. 0:00:22.922,0:00:26.126 Basta a gente pegar os elementos[br]que a gente quer. 0:00:27.427,0:00:30.230 Ou eu posso até pegar todos 0:00:30.230,0:00:31.564 melhor. 0:00:31.564,0:00:33.833 Primeiro, a textura Control 0:00:33.833,0:00:37.837 C vem para capa[br]mobile, tira o que a gente criou 0:00:38.772,0:00:41.775 já Control V. 0:00:43.143,0:00:44.611 Vou até tirar esse background 0:00:44.611,0:00:46.846 que a gente não vai precisar[br]deixar só o que a gente criou. 0:00:46.846,0:00:48.982 Vou bloquear 0:00:48.982,0:00:51.985 e ai vou pegar esses outros[br]elementos. 0:00:53.453,0:00:55.288 Control C 0:00:55.288,0:00:58.892 Control V[br]Já estamos com os elementos aqui 0:00:58.892,0:01:01.895 criados. Opa! 0:01:02.128,0:01:07.300 Segurando shift para não distorcer[br]a imagem. Ok. 0:01:08.101,0:01:10.537 Faltou um elemento aqui para criar 0:01:10.537,0:01:13.173 uma sensação de[br]profundidade que a textura. 0:01:14.507,0:01:15.008 Vou abrir a 0:01:15.008,0:01:18.011 pastinha porque eu quero só uma 0:01:18.378,0:01:21.214 control C 0:01:21.214,0:01:22.115 control V. 0:01:22.115,0:01:25.919 Ela criou por cima, não quero[br]por cima, quero por baixo da modelo. 0:01:26.586,0:01:29.456 Posso até aumentar um pouquinho[br]assim. 0:01:29.456,0:01:32.725 Legal é usar a borracha para 0:01:34.194,0:01:35.462 apagar. 0:01:35.462,0:01:38.898 Vou colocar[br]até para baixo das nossas elementos 0:01:38.898,0:01:42.068 aqui para ficar acima[br]apenas do background. 0:01:43.470,0:01:44.504 Perfeito. 0:01:44.504,0:01:47.507 Foi a capa de banho[br]mais rápida que a gente já criou 0:01:48.041,0:01:51.044 e vamos salvar em MP. 0:01:52.212,0:01:54.747 É importante você saber que o site 0:01:54.747,0:01:58.251 pode utilizar imagens também[br]como JPEG e PNG. 0:01:58.718,0:02:02.388 Mas quando você pensa num site[br]otimizado, um site leve, rápido, 0:02:02.722,0:02:06.292 bom para ranquear[br]nos mecanismos de busca da internet. 0:02:07.827,0:02:11.798 O formato web é o melhor formato[br]que tem. 0:02:12.031,0:02:14.868 Então, para isso, vamos vir aqui. 0:02:14.868,0:02:17.871 Feel no Photoshop. 0:02:18.071,0:02:20.240 Vamos antes dar um control S 0:02:20.240,0:02:23.743 para deixar salva[br]a nossa capa e vamos aqui 0:02:25.078,0:02:25.879 sem viés. 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 não sei viés,[br]Temos só PSD, PDF e TIFF. 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 como cópia. 0:02:35.755,0:02:41.227 Então, se a copy ou alt control s,[br]clica aqui e aqui. 0:02:41.227,0:02:44.230 Quando a gente abre[br]tem diversos formatos 0:02:44.364,0:02:47.467 e o último formato mais novo,[br]mais recente, 0:02:48.301,0:02:51.571 é o Web, formato 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.