1
00:00:07,686 --> 00:00:09,926
Você sabe a maneira
correta de salvar a capa

2
00:00:09,926 --> 00:00:11,988
que você criou
para o seu site?

3
00:00:11,988 --> 00:00:14,701
A gente vai para o Photoshop
para fazer isso na prática,

4
00:00:14,701 --> 00:00:19,386
mas, antes, vamos adaptar a capa
que a gente criou para o mobile.

5
00:00:19,386 --> 00:00:21,098
Vamos lá.

6
00:00:21,098 --> 00:00:27,247
Aqui está nossa capa, basta a gente
pegar os elementos que a gente quer,

7
00:00:27,247 --> 00:00:31,384
ou eu posso até pegar
todos, melhor.

8
00:00:31,384 --> 00:00:36,765
Primeiro, a textura, ctrl+c,
venho para capa mobile,

9
00:00:36,765 --> 00:00:41,637
tiro o que a gente
criou já, ctrl+v.

10
00:00:43,003 --> 00:00:45,344
Vou até tirar esse background
que a gente não vai precisar,

11
00:00:45,344 --> 00:00:48,822
deixar só o que a gente
criou, vou bloquear

12
00:00:48,822 --> 00:00:51,766
e, aí, vou pegar esses
outros elementos,

13
00:00:53,332 --> 00:00:56,592
ctrl+c, ctrl+v.

14
00:00:56,592 --> 00:01:00,719
Já estamos com os elementos
aqui criados.

15
00:01:00,719 --> 00:01:01,868
Opa!

16
00:01:01,868 --> 00:01:05,022
Segurando o shift para não
distorcer a imagem.

17
00:01:06,588 --> 00:01:07,931
Ok.

18
00:01:07,931 --> 00:01:11,993
Faltou um elemento aqui para criar
uma sensação de profundidade,

19
00:01:11,993 --> 00:01:14,377
que é a textura.

20
00:01:14,377 --> 00:01:18,218
Vou abrir a pastinha,
porque eu quero só uma,

21
00:01:18,218 --> 00:01:20,144
ctrl+c

22
00:01:21,104 --> 00:01:23,171
ctrl+v, ela criou por cima,

23
00:01:23,171 --> 00:01:26,456
eu não quero por cima, eu
quero por baixo da modelo.

24
00:01:26,456 --> 00:01:29,246
Posso até aumentar
um pouquinho assim,

25
00:01:29,246 --> 00:01:35,312
legal, e usar a borracha
para apagar.

26
00:01:35,312 --> 00:01:38,938
Vou colocar até para baixo
dos nossos elementos

27
00:01:38,938 --> 00:01:43,250
para ficar acima
apenas do background.

28
00:01:43,250 --> 00:01:47,811
Perfeito, foi a capa de mobile
mais rápida que a gente já criou,

29
00:01:47,811 --> 00:01:51,243
e vamos salvar em WebP.

30
00:01:52,072 --> 00:01:56,321
É importante você saber que o site
pode utilizar imagens, também,

31
00:01:56,321 --> 00:02:00,786
como JPEG e PNG, mas quando
você pensa em um site otimizado,

32
00:02:00,786 --> 00:02:02,542
um site leve, rápido,

33
00:02:02,542 --> 00:02:06,762
bom para ranquear nos mecanismos
de busca da internet,

34
00:02:07,707 --> 00:02:11,831
o formato WebP é o melhor
formato que tem.

35
00:02:11,831 --> 00:02:17,237
Então, para isso, vamos vir
aqui em "file", no Photoshop,

36
00:02:17,901 --> 00:02:22,311
vamos, antes, dar um ctrl+s,
para deixar salva a nossa capa,

37
00:02:22,311 --> 00:02:25,689
e vamos aqui em "save as"?

38
00:02:25,689 --> 00:02:26,840
Não, não, não, não, não.

39
00:02:26,840 --> 00:02:31,408
Aqui em "save as", temos
só PSB, PDF e TIF,

40
00:02:31,408 --> 00:02:33,046
não é isso que a gente quer.

41
00:02:33,046 --> 00:02:35,595
A gente tem que salvar
como cópia.

42
00:02:35,595 --> 00:02:39,762
Então, "save a copy",
ou alt+ctrl+s,

43
00:02:39,762 --> 00:02:44,134
clico aqui e, quando a gente
abre, tem diversos formatos,

44
00:02:44,134 --> 00:02:48,091
e o último formato, o mais
novo, o mais recente,

45
00:02:48,091 --> 00:02:52,442
é o WebP, formato
criado pela Google.

46
00:02:52,442 --> 00:02:57,587
Vamos salvar na nossa
pasta, que está aqui,

47
00:02:57,587 --> 00:03:00,577
deixa eu ver, nessa
pastinha aqui, "a laranja"

48
00:03:00,577 --> 00:03:05,098
e vamos deixar
como "capa mobile".

49
00:03:05,098 --> 00:03:08,795
Vou tirar aqui, e "save".

50
00:03:08,795 --> 00:03:13,777
Aqui, eu posso reduzir
ou aumentar a qualidade.

51
00:03:13,777 --> 00:03:17,340
Quando eu habilito
essa metadata,

52
00:03:17,340 --> 00:03:20,065
ele leva uma série de informações
para a imagem que a gente não quer,

53
00:03:20,065 --> 00:03:21,711
porque só pesa a imagem.

54
00:03:21,711 --> 00:03:24,237
Então, eu vou deixar
aqui em "lossy",

55
00:03:24,237 --> 00:03:27,998
eu posso até diminuir
um pouquinho mais, para 95,

56
00:03:27,998 --> 00:03:30,248
e dar um "ok" e salvar.

57
00:03:30,730 --> 00:03:36,559
Vamos salvar em PNG também,
para eu mostrar a diferença

58
00:03:36,559 --> 00:03:41,446
quando você salva duas imagens
em formatos diferentes,

59
00:03:41,446 --> 00:03:43,733
a diferença de tamanho.

60
00:03:43,733 --> 00:03:49,372
Então, vamos aqui em nossa pasta,
deve estar aqui em "a laranja",

61
00:03:49,372 --> 00:03:53,603
a WebP está aqui, a PNG eu
devo ter salvo em outro lugar,

62
00:03:53,603 --> 00:03:55,498
vamos salvar de novo.

63
00:03:58,343 --> 00:04:01,517
Ah, separei mesmo,
vou pegar e dar um ctrl+x

64
00:04:01,517 --> 00:04:06,993
e vou colar na nossa
pasta, "a laranja", ok.

65
00:04:06,993 --> 00:04:09,752
"Save", "yes".

66
00:04:09,752 --> 00:04:11,985
Vamos voltar para a pasta.

67
00:04:12,832 --> 00:04:17,359
Estão as duas imagens
aqui, em PNG e em WebP.

68
00:04:17,359 --> 00:04:19,225
PNG, se a gente vier aqui
com o botão direito

69
00:04:19,225 --> 00:04:21,781
e clicar em "propriedades",

70
00:04:21,781 --> 00:04:29,505
a gente consegue visualizar
que ela está em 1,57 MB, em PNG.

71
00:04:30,310 --> 00:04:38,354
E em WebP, se a gente fizer
a mesma coisa, ela está em 256 KB,

72
00:04:38,354 --> 00:04:43,590
ela reduziu muito e continua
com a mesma qualidade.

73
00:04:43,590 --> 00:04:46,678
E, aqui, se a gente abre
o PNG, está bonitinho,

74
00:04:46,678 --> 00:04:47,814
é uma imagem pixelizada,

75
00:04:47,814 --> 00:04:52,011
então, conforme for crescendo,
vai perdendo um pouco a resolução,

76
00:04:52,011 --> 00:04:53,971
mas, para site, isso
não tem importância,

77
00:04:55,595 --> 00:04:57,681
o mais importante
é usar o WebP.

78
00:04:57,681 --> 00:04:59,518
E aqui eu vou abrir

79
00:05:00,813 --> 00:05:04,811
com o nosso Google Chrome
para visualizar

80
00:05:04,811 --> 00:05:07,625
que ela também está grande
o suficiente para o site,

81
00:05:07,625 --> 00:05:10,046
principalmente para mobile.

82
00:05:10,046 --> 00:05:15,961
Então, é uma imagem grande,
com uma resolução bacana e otimizada.

83
00:05:15,961 --> 00:05:18,364
Então, o que a gente fez
aqui foi apenas adaptar

84
00:05:18,364 --> 00:05:21,241
a nossa capa de desktop
para mobile

85
00:05:21,241 --> 00:05:24,572
e salvar em um melhor formato
para interface digital,

86
00:05:24,572 --> 00:05:27,421
que é a WebP,
aqui no Photoshop.