WEBVTT

00:00:08.241 --> 00:00:10.076
Você sabe a maneira
correta de salvar a capa

00:00:10.076 --> 00:00:12.178
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:19.586
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:27.427
Aqui está nossa capa, basta a gente
pegar os elementos que a gente quer,

00:00:27.427 --> 00:00:31.564
ou eu posso até pegar
todos, melhor.

00:00:31.564 --> 00:00:36.135
Primeiro, a textura ctrl+c,
venho para capa mobile,

00:00:36.135 --> 00:00:41.775
tira o que a gente
criou já, ctrl+v.

00:00:43.143 --> 00:00:45.344
Vou até tirar esse background
que a gente não vai precisar,

00:00:45.344 --> 00:00:48.982
deixar só o que a gente
criou, vou bloquear

00:00:48.982 --> 00:00:51.985
e, aí, vou pegar esses
outros elementos.

00:00:53.453 --> 00:00:56.172
Ctrl+c, ctrl+v.

00:00:56.172 --> 00:01:00.226
Já estamos com os elementos
aqui criados.

00:01:00.739 --> 00:01:02.128
Opa!

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

00:01:06.618 --> 00:01:08.101
Ok.

00:01:08.101 --> 00:01:12.183
Faltou um elemento aqui para criar
uma sensação de profundidade,

00:01:12.183 --> 00:01:14.507
que é a textura.

00:01:14.507 --> 00:01:18.378
Vou abrir a pastinha,
porque eu quero só uma,

00:01:18.378 --> 00:01:20.394
ctrl+c

00:01:21.214 --> 00:01:23.311
ctrl+v, ela criou por cima,

00:01:23.311 --> 00:01:26.586
eu não quero por cima, eu
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:35.462
legal, e usar a borracha
para apagar.

00:01:35.462 --> 00:01:38.898
Vou colocar até para baixo
dos nossos elementos

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

00:01:43.470 --> 00:01:48.041
Perfeito, foi a capa de mobile
mais rápida que a gente já criou,

00:01:48.041 --> 00:01:52.212
e vamos salvar em WebP.

00:01:52.212 --> 00:01:56.371
É importante você saber que o site
pode utilizar imagens também

00:01:56.371 --> 00:02:01.026
como JPEG e PNG, mas quando
você pensa em um site otimizado,

00:02:01.026 --> 00:02:02.722
um site leve, rápido,

00:02:02.722 --> 00:02:06.762
bom para ranquear nos mecanismos
de busca da internet,

00:02:07.827 --> 00:02:12.031
o formato WebP é o melhor
formato que tem.

00:02:12.031 --> 00:02:18.071
Então, para isso, vamos vir
aqui em "file", no Photoshop,

00:02:18.071 --> 00:02:21.841
vamos, antes, dar um ctrl+s,
para deixar salva a nossa capa,

00:02:21.841 --> 00:02:25.879
e vamos aqui em "save as"?

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 em "save as", temos
só PSB, PDF e TIF,

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:39.502
Então, "save a copy",
ou alt+ctrl+s,

00:02:39.502 --> 00:02:44.364
clico aqui e, quando a gente
abre, tem diversos formatos,

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

00:02:48.301 --> 00:02:52.572
é o WebP, formato
criado pela Google.

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

00:02:57.777 --> 00:03:00.697
deixa eu ver, nessa
pastinha aqui, "a laranja"

00:03:00.697 --> 00:03:05.218
e vamos deixar
como "capa mobile".

00:03:05.218 --> 00:03:09.055
Vou tirar aqui, e "save".

00:03:09.055 --> 00:03:13.927
Aqui, eu posso reduzir
ou aumentar a qualidade.

00:03:13.927 --> 00:03:17.530
Quando eu habilito
essa metadata,

00:03:17.530 --> 00:03:20.225
ele leva uma série de informações
para a imagem que a gente não quer,

00:03:20.225 --> 00:03:21.901
porque só pesa a imagem.

00:03:21.901 --> 00:03:24.137
Então, eu vou deixar
aqui em "lossy",

00:03:24.137 --> 00:03:28.208
eu posso até diminuir
um pouquinho mais, para 95,

00:03:28.208 --> 00:03:30.330
e dar um "ok" e salvar.

00:03:30.860 --> 00:03:36.749
Vamos salvar em PNG também
para eu mostrar a diferença

00:03:36.749 --> 00:03:41.086
quando você salva duas imagens
em formatos diferentes,

00:03:41.086 --> 00:03:43.923
a diferença de tamanho.

00:03:43.923 --> 00:03:49.562
Então vamos aqui em nossa pasta,
deve estar aqui em "a laranja",

00:03:49.562 --> 00:03:53.733
a WebP está aqui, a PNG eu
devo ter salvo em outro lugar,

00:03:53.733 --> 00:03:55.461
vamos salvar de novo.

00:03:58.293 --> 00:04:01.887
Ah, separei mesmo,
vou pegar e dar um ctrl+x

00:04:01.887 --> 00:04:07.113
e vou colar na nossa
pasta, "a laranja", ok.

00:04:07.113 --> 00:04:09.882
"Save", "yes".

00:04:09.882 --> 00:04:12.220
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.289
aqui em PNG é WebP.

00:04:17.289 --> 00:04:19.905
PNG, se a gente vier aqui
com o botão direito

00:04:19.905 --> 00:04:21.961
e clicar em "propriedades",

00:04:21.961 --> 00:04:30.370
a gente consegue visualizar
que ela está em 1,57 MB, em PNG.

00:04:30.370 --> 00:04:38.544
E em WebP, se a gente fizer
a mesma coisa, ela está em 256 KB,

00:04:38.544 --> 00:04:43.750
ela reduziu muito e continua
com a mesma qualidade.

00:04:43.750 --> 00:04:46.678
E, aqui, se a gente abre
o PNG, está bonitinho,

00:04:46.678 --> 00:04:48.054
é uma imagem pixelizada,

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

00:04:52.191 --> 00:04:54.964
mas, para site, isso
não tem importância,

00:04:55.795 --> 00:04:57.911
o mais importante
é usar o WebP.

00:04:57.911 --> 00:04:59.740
E aqui eu vou abrir

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

00:05:04.971 --> 00:05:07.385
que ela também está grande
o suficiente para o site,

00:05:07.385 --> 00:05:10.276
principalmente para mobile.

00:05:10.276 --> 00:05:15.982
Então é uma imagem grande,
com uma resolução 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:24.672
e salvar em um melhor formato
para interface digital,

00:05:24.672 --> 00:05:27.406
que é a WebP,
aqui no Photoshop.