1
00:00:08,241 --> 00:00:10,076
Você sabe a maneira
correta de salvar a capa

2
00:00:10,076 --> 00:00:12,178
que você criou
para o seu site?

3
00:00:12,178 --> 00:00:14,881
A gente vai para o Photoshop
para fazer isso na prática,

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

5
00:00:19,586 --> 00:00:21,187
Vamos lá.

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

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

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

9
00:00:36,135 --> 00:00:41,775
tira o que a gente
criou já, ctrl+v.

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

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

12
00:00:48,982 --> 00:00:51,985
e, aí, vou pegar esses
outros elementos.

13
00:00:53,453 --> 00:00:56,172
Ctrl+c, ctrl+v.

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

15
00:01:00,739 --> 00:01:02,128
Opa!

16
00:01:02,128 --> 00:01:05,068
Segurando o shift para não
distorcer a imagem.

17
00:01:06,618 --> 00:01:08,101
Ok.

18
00:01:08,101 --> 00:01:12,183
Faltou um elemento aqui para criar
uma sensação de profundidade,

19
00:01:12,183 --> 00:01:14,507
que é a textura.

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

21
00:01:18,378 --> 00:01:20,394
ctrl+c

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

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

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

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

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

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

28
00:01:43,470 --> 00:01:48,041
Perfeito, foi a capa de mobile
mais rápida que a gente já criou,

29
00:01:48,041 --> 00:01:52,212
e vamos salvar em WebP.

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

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

32
00:02:01,026 --> 00:02:02,722
um site leve, rápido,

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

34
00:02:07,827 --> 00:02:12,031
o formato WebP é o melhor
formato que tem.

35
00:02:12,031 --> 00:02:18,071
Então, para isso, vamos vir
aqui em "file", no Photoshop,

36
00:02:18,071 --> 00:02:21,841
vamos, antes, dar um ctrl+s,
para deixar salva a nossa capa,

37
00:02:21,841 --> 00:02:25,879
e vamos aqui em "save as"?

38
00:02:25,879 --> 00:02:27,080
Não, não, não, não, não.

39
00:02:27,080 --> 00:02:31,618
Aqui em "save as", temos
só PSB, PDF e TIF,

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

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

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

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

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

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

46
00:02:52,572 --> 00:02:56,943
Vamos, Vamos salvar na nossa pasta
que ela está aqui.

47
00:02:57,777 --> 00:03:01,748
Deixa eu ver nessa pastinha
aqui a laranja e vamos deixar

48
00:03:02,815 --> 00:03:05,218
em capa mobile.

49
00:03:05,218 --> 00:03:08,221
Vou tirar que é sempre

50
00:03:09,055 --> 00:03:09,355
aqui.

51
00:03:09,355 --> 00:03:12,559
Eu posso reduzir
ou aumentar a qualidade.

52
00:03:13,927 --> 00:03:17,230
Quando eu habilito esse metadado,
essa metadata,

53
00:03:17,530 --> 00:03:19,532
ele leva uma série de informações
para a imagem

54
00:03:19,532 --> 00:03:21,901
que a gente
não quer que só pegue a imagem.

55
00:03:21,901 --> 00:03:24,137
Então eu vou deixar aqui em nós.

56
00:03:24,137 --> 00:03:27,574
Diminui a opacidade,
diminui um pouquinho mais para 95

57
00:03:28,208 --> 00:03:33,513
e dá um ok salvar
e vamos salvar em PNG também

58
00:03:34,147 --> 00:03:36,749
para mostrar a diferença.

59
00:03:36,749 --> 00:03:40,386
Quando você salva
duas imagens diferentes em formatos

60
00:03:40,386 --> 00:03:43,389
diferentes, a diferença de tamanho.

61
00:03:43,923 --> 00:03:46,459
Então vamos aqui em nosso

62
00:03:46,459 --> 00:03:49,462
e nossa pasta
deve estar aqui em laranja

63
00:03:49,562 --> 00:03:53,666
a web preta aqui a png
eu devo ter salvado em outro lugar.

64
00:03:53,733 --> 00:03:54,701
Vamos salvar de novo

65
00:03:56,703 --> 00:03:59,606
e separei mesmo.

66
00:03:59,606 --> 00:04:06,379
Vou pegar e dar um control X e vou
colar na nossa pasta a laranja, ok?

67
00:04:07,113 --> 00:04:09,882
Serve. Yes!

68
00:04:09,882 --> 00:04:12,885
Vamos voltar para a pasta.

69
00:04:12,952 --> 00:04:14,520
Estão as duas imagens

70
00:04:14,520 --> 00:04:17,490
aqui em PNG é web.

71
00:04:17,490 --> 00:04:19,058
PNG Se a gente vem aqui com o botão

72
00:04:19,058 --> 00:04:21,961
direito,
clica e clica em Propriedades,

73
00:04:21,961 --> 00:04:27,033
a gente consegue visualizar
que ela está em 1,57 megas

74
00:04:28,134 --> 00:04:30,370
em PNG

75
00:04:30,370 --> 00:04:31,404
e em web page.

76
00:04:31,404 --> 00:04:34,374
Se a gente fizer a mesma coisa,

77
00:04:34,374 --> 00:04:38,144
ela está em 256 Kbytes.

78
00:04:38,544 --> 00:04:42,582
Ela reduziu muito
e continua com a mesma qualidade.

79
00:04:43,750 --> 00:04:46,252
E aqui
se a gente abre o png tá bonitinho.

80
00:04:46,252 --> 00:04:48,054
Aqui é uma imagem pixelizada,

81
00:04:48,054 --> 00:04:51,791
então conforme o for crescendo,
vai perdendo um pouco a resolução.

82
00:04:52,191 --> 00:04:55,194
Mas pra site
isso não tem importância.

83
00:04:55,795 --> 00:04:58,998
O mais importante é usar o
web page e aqui eu vou abrir

84
00:05:00,933 --> 00:05:04,437
com o
nosso Google Chrome para visualizar

85
00:05:04,971 --> 00:05:06,205
que ele também está grande

86
00:05:06,205 --> 00:05:09,208
o suficiente para o site,
principalmente para mobile.

87
00:05:10,276 --> 00:05:12,979
Então é uma imagem grande,
com a resolução

88
00:05:12,979 --> 00:05:15,982
bacana e otimizada.

89
00:05:15,982 --> 00:05:18,584
Então, o que a gente fez aqui
foi apenas adaptar

90
00:05:18,584 --> 00:05:21,421
a nossa capa de desktop para mobile

91
00:05:21,421 --> 00:05:25,558
e salvar num melhor formato
para interface digital, que é o web.

92
00:05:25,858 --> 00:05:26,893
Aqui no Photoshop.