1
00:00:08,241 --> 00:00:08,908
Você sabe a maneira

2
00:00:08,908 --> 00:00:11,911
correta de salvar a capa
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:18,952
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:22,922
Aqui está nossa capa.

7
00:00:22,922 --> 00:00:26,126
Basta a gente pegar os elementos
que a gente quer.

8
00:00:27,427 --> 00:00:30,230
Ou eu posso até pegar todos

9
00:00:30,230 --> 00:00:31,564
melhor.

10
00:00:31,564 --> 00:00:33,833
Primeiro, a textura Control

11
00:00:33,833 --> 00:00:37,837
C vem para capa
mobile, tira o que a gente criou

12
00:00:38,772 --> 00:00:41,775
já Control V.

13
00:00:43,143 --> 00:00:44,611
Vou até tirar esse background

14
00:00:44,611 --> 00:00:46,846
que a gente não vai precisar
deixar só o que a gente criou.

15
00:00:46,846 --> 00:00:48,982
Vou bloquear

16
00:00:48,982 --> 00:00:51,985
e ai vou pegar esses outros
elementos.

17
00:00:53,453 --> 00:00:55,288
Control C

18
00:00:55,288 --> 00:00:58,892
Control V
Já estamos com os elementos aqui

19
00:00:58,892 --> 00:01:01,895
criados. Opa!

20
00:01:02,128 --> 00:01:07,300
Segurando shift para não distorcer
a imagem. Ok.

21
00:01:08,101 --> 00:01:10,537
Faltou um elemento aqui para criar

22
00:01:10,537 --> 00:01:13,173
uma sensação de
profundidade que a textura.

23
00:01:14,507 --> 00:01:15,008
Vou abrir a

24
00:01:15,008 --> 00:01:18,011
pastinha porque eu quero só uma

25
00:01:18,378 --> 00:01:21,214
control C

26
00:01:21,214 --> 00:01:22,115
control V.

27
00:01:22,115 --> 00:01:25,919
Ela criou por cima, não quero
por cima, quero por baixo da modelo.

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

29
00:01:29,456 --> 00:01:32,725
Legal é usar a borracha para

30
00:01:34,194 --> 00:01:35,462
apagar.

31
00:01:35,462 --> 00:01:38,898
Vou colocar
até para baixo das nossas elementos

32
00:01:38,898 --> 00:01:42,068
aqui para ficar acima
apenas do background.

33
00:01:43,470 --> 00:01:44,504
Perfeito.

34
00:01:44,504 --> 00:01:47,507
Foi a capa de banho
mais rápida que a gente já criou

35
00:01:48,041 --> 00:01:51,044
e vamos salvar em MP.

36
00:01:52,212 --> 00:01:54,747
É importante você saber que o site

37
00:01:54,747 --> 00:01:58,251
pode utilizar imagens também
como JPEG e PNG.

38
00:01:58,718 --> 00:02:02,388
Mas quando você pensa num site
otimizado, um site leve, rápido,

39
00:02:02,722 --> 00:02:06,292
bom para ranquear
nos mecanismos de busca da internet.

40
00:02:07,827 --> 00:02:11,798
O formato web é o melhor formato
que tem.

41
00:02:12,031 --> 00:02:14,868
Então, para isso, vamos vir aqui.

42
00:02:14,868 --> 00:02:17,871
Feel no Photoshop.

43
00:02:18,071 --> 00:02:20,240
Vamos antes dar um control S

44
00:02:20,240 --> 00:02:23,743
para deixar salva
a nossa capa e vamos aqui

45
00:02:25,078 --> 00:02:25,879
sem viés.

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

47
00:02:27,080 --> 00:02:31,618
Aqui não sei viés,
Temos só PSD, PDF e TIFF.

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

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

50
00:02:35,755 --> 00:02:41,227
Então, se a copy ou alt control s,
clica aqui e aqui.

51
00:02:41,227 --> 00:02:44,230
Quando a gente abre
tem diversos formatos

52
00:02:44,364 --> 00:02:47,467
e o último formato mais novo,
mais recente,

53
00:02:48,301 --> 00:02:51,571
é o Web, formato criado pela Google.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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