WEBVTT

00:00:08.241 --> 00:00:08.908
Você sabe a maneira

00:00:08.908 --> 00:00:11.911
correta de salvar a capa
que você criou para o seu site?

00:00:12.178 --> 00:00:14.881
A gente vai para o Photoshop
para fazer isso na prática.

00:00:14.881 --> 00:00:18.952
Mas antes, vamos adaptar a capa
que a gente criou para o mobile.

00:00:19.586 --> 00:00:21.187
Vamos lá.

00:00:21.187 --> 00:00:22.922
Aqui está nossa capa.

00:00:22.922 --> 00:00:26.126
Basta a gente pegar os elementos
que a gente quer.

00:00:27.427 --> 00:00:30.230
Ou eu posso até pegar todos

00:00:30.230 --> 00:00:31.564
melhor.

00:00:31.564 --> 00:00:33.833
Primeiro, a textura Control

00:00:33.833 --> 00:00:37.837
C vem para capa
mobile, tira o que a gente criou

00:00:38.772 --> 00:00:41.775
já Control V.

00:00:43.143 --> 00:00:44.611
Vou até tirar esse background

00:00:44.611 --> 00:00:46.846
que a gente não vai precisar
deixar só o que a gente criou.

00:00:46.846 --> 00:00:48.982
Vou bloquear

00:00:48.982 --> 00:00:51.985
e ai vou pegar esses outros
elementos.

00:00:53.453 --> 00:00:55.288
Control C

00:00:55.288 --> 00:00:58.892
Control V
Já estamos com os elementos aqui

00:00:58.892 --> 00:01:01.895
criados. Opa!

00:01:02.128 --> 00:01:07.300
Segurando shift para não distorcer
a imagem. Ok.

00:01:08.101 --> 00:01:10.537
Faltou um elemento aqui para criar

00:01:10.537 --> 00:01:13.173
uma sensação de
profundidade que a textura.

00:01:14.507 --> 00:01:15.008
Vou abrir a

00:01:15.008 --> 00:01:18.011
pastinha porque eu quero só uma

00:01:18.378 --> 00:01:21.214
control C

00:01:21.214 --> 00:01:22.115
control V.

00:01:22.115 --> 00:01:25.919
Ela criou por cima, não quero
por cima, quero por baixo da modelo.

00:01:26.586 --> 00:01:29.456
Posso até aumentar um pouquinho
assim.

00:01:29.456 --> 00:01:32.725
Legal é usar a borracha para

00:01:34.194 --> 00:01:35.462
apagar.

00:01:35.462 --> 00:01:38.898
Vou colocar
até para baixo das nossas elementos

00:01:38.898 --> 00:01:42.068
aqui para ficar acima
apenas do background.

00:01:43.470 --> 00:01:44.504
Perfeito.

00:01:44.504 --> 00:01:47.507
Foi a capa de banho
mais rápida que a gente já criou

00:01:48.041 --> 00:01:51.044
e vamos salvar em MP.

00:01:52.212 --> 00:01:54.747
É importante você saber que o site

00:01:54.747 --> 00:01:58.251
pode utilizar imagens também
como JPEG e PNG.

00:01:58.718 --> 00:02:02.388
Mas quando você pensa num site
otimizado, um site leve, rápido,

00:02:02.722 --> 00:02:06.292
bom para ranquear
nos mecanismos de busca da internet.

00:02:07.827 --> 00:02:11.798
O formato web é o melhor formato
que tem.

00:02:12.031 --> 00:02:14.868
Então, para isso, vamos vir aqui.

00:02:14.868 --> 00:02:17.871
Feel no Photoshop.

00:02:18.071 --> 00:02:20.240
Vamos antes dar um control S

00:02:20.240 --> 00:02:23.743
para deixar salva
a nossa capa e vamos aqui

00:02:25.078 --> 00:02:25.879
sem viés.

00:02:25.879 --> 00:02:27.080
Não, não, não, não, não.

00:02:27.080 --> 00:02:31.618
Aqui não sei viés,
Temos só PSD, PDF e TIFF.

00:02:31.618 --> 00:02:33.286
Não é isso que a gente quer.

00:02:33.286 --> 00:02:35.755
A gente tem que salvar como cópia.

00:02:35.755 --> 00:02:41.227
Então, se a copy ou alt control s,
clica aqui e aqui.

00:02:41.227 --> 00:02:44.230
Quando a gente abre
tem diversos formatos

00:02:44.364 --> 00:02:47.467
e o último formato mais novo,
mais recente,

00:02:48.301 --> 00:02:51.571
é o Web, formato criado pela Google.

00:02:52.572 --> 00:02:56.943
Vamos, Vamos salvar na nossa pasta
que ela está aqui.

00:02:57.777 --> 00:03:01.748
Deixa eu ver nessa pastinha
aqui a laranja e vamos deixar

00:03:02.815 --> 00:03:05.218
em capa mobile.

00:03:05.218 --> 00:03:08.221
Vou tirar que é sempre

00:03:09.055 --> 00:03:09.355
aqui.

00:03:09.355 --> 00:03:12.559
Eu posso reduzir
ou aumentar a qualidade.

00:03:13.927 --> 00:03:17.230
Quando eu habilito esse metadado,
essa metadata,

00:03:17.530 --> 00:03:19.532
ele leva uma série de informações
para a imagem

00:03:19.532 --> 00:03:21.901
que a gente
não quer que só pegue a imagem.

00:03:21.901 --> 00:03:24.137
Então eu vou deixar aqui em nós.

00:03:24.137 --> 00:03:27.574
Diminui a opacidade,
diminui um pouquinho mais para 95

00:03:28.208 --> 00:03:33.513
e dá um ok salvar
e vamos salvar em PNG também

00:03:34.147 --> 00:03:36.749
para mostrar a diferença.

00:03:36.749 --> 00:03:40.386
Quando você salva
duas imagens diferentes em formatos

00:03:40.386 --> 00:03:43.389
diferentes, a diferença de tamanho.

00:03:43.923 --> 00:03:46.459
Então vamos aqui em nosso

00:03:46.459 --> 00:03:49.462
e nossa pasta
deve estar aqui em laranja

00:03:49.562 --> 00:03:53.666
a web preta aqui a png
eu devo ter salvado em outro lugar.

00:03:53.733 --> 00:03:54.701
Vamos salvar de novo

00:03:56.703 --> 00:03:59.606
e separei mesmo.

00:03:59.606 --> 00:04:06.379
Vou pegar e dar um control X e vou
colar na nossa pasta a laranja, ok?

00:04:07.113 --> 00:04:09.882
Serve. Yes!

00:04:09.882 --> 00:04:12.885
Vamos voltar para a pasta.

00:04:12.952 --> 00:04:14.520
Estão as duas imagens

00:04:14.520 --> 00:04:17.490
aqui em PNG é web.

00:04:17.490 --> 00:04:19.058
PNG Se a gente vem aqui com o botão

00:04:19.058 --> 00:04:21.961
direito,
clica e clica em Propriedades,

00:04:21.961 --> 00:04:27.033
a gente consegue visualizar
que ela está em 1,57 megas

00:04:28.134 --> 00:04:30.370
em PNG

00:04:30.370 --> 00:04:31.404
e em web page.

00:04:31.404 --> 00:04:34.374
Se a gente fizer a mesma coisa,

00:04:34.374 --> 00:04:38.144
ela está em 256 Kbytes.

00:04:38.544 --> 00:04:42.582
Ela reduziu muito
e continua com a mesma qualidade.

00:04:43.750 --> 00:04:46.252
E aqui
se a gente abre o png tá bonitinho.

00:04:46.252 --> 00:04:48.054
Aqui é uma imagem pixelizada,

00:04:48.054 --> 00:04:51.791
então conforme o for crescendo,
vai perdendo um pouco a resolução.

00:04:52.191 --> 00:04:55.194
Mas pra site
isso não tem importância.

00:04:55.795 --> 00:04:58.998
O mais importante é usar o
web page e aqui eu vou abrir

00:05:00.933 --> 00:05:04.437
com o
nosso Google Chrome para visualizar

00:05:04.971 --> 00:05:06.205
que ele também está grande

00:05:06.205 --> 00:05:09.208
o suficiente para o site,
principalmente para mobile.

00:05:10.276 --> 00:05:12.979
Então é uma imagem grande,
com a resolução

00:05:12.979 --> 00:05:15.982
bacana e otimizada.

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

00:05:18.584 --> 00:05:21.421
a nossa capa de desktop para mobile

00:05:21.421 --> 00:05:25.558
e salvar num melhor formato
para interface digital, que é o web.

00:05:25.858 --> 00:05:26.893
Aqui no Photoshop.