[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:07.69,0:00:09.93,Default,,0000,0000,0000,,Você sabe a maneira\Ncorreta de salvar a capa
Dialogue: 0,0:00:09.93,0:00:11.99,Default,,0000,0000,0000,,que você criou\Npara o seu site?
Dialogue: 0,0:00:11.99,0:00:14.70,Default,,0000,0000,0000,,A gente vai para o Photoshop\Npara fazer isso na prática,
Dialogue: 0,0:00:14.70,0:00:19.39,Default,,0000,0000,0000,,mas, antes, vamos adaptar a capa\Nque a gente criou para o mobile.
Dialogue: 0,0:00:19.39,0:00:21.10,Default,,0000,0000,0000,,Vamos lá.
Dialogue: 0,0:00:21.10,0:00:27.25,Default,,0000,0000,0000,,Aqui está nossa capa, basta a gente\Npegar os elementos que a gente quer,
Dialogue: 0,0:00:27.25,0:00:31.38,Default,,0000,0000,0000,,ou eu posso até pegar\Ntodos, melhor.
Dialogue: 0,0:00:31.38,0:00:36.76,Default,,0000,0000,0000,,Primeiro, a textura ctrl+c,\Nvenho para capa mobile,
Dialogue: 0,0:00:36.76,0:00:41.64,Default,,0000,0000,0000,,tiro o que a gente\Ncriou já, ctrl+v.
Dialogue: 0,0:00:43.00,0:00:45.34,Default,,0000,0000,0000,,Vou até tirar esse background\Nque a gente não vai precisar,
Dialogue: 0,0:00:45.34,0:00:48.82,Default,,0000,0000,0000,,deixar só o que a gente\Ncriou, vou bloquear
Dialogue: 0,0:00:48.82,0:00:51.77,Default,,0000,0000,0000,,e, aí, vou pegar esses\Noutros elementos.
Dialogue: 0,0:00:53.33,0:00:56.59,Default,,0000,0000,0000,,Ctrl+c, ctrl+v.
Dialogue: 0,0:00:56.59,0:01:00.72,Default,,0000,0000,0000,,Já estamos com os elementos\Naqui criados.
Dialogue: 0,0:01:00.72,0:01:01.87,Default,,0000,0000,0000,,Opa!
Dialogue: 0,0:01:01.87,0:01:05.02,Default,,0000,0000,0000,,Segurando o shift para não\Ndistorcer a imagem.
Dialogue: 0,0:01:06.59,0:01:07.93,Default,,0000,0000,0000,,Ok.
Dialogue: 0,0:01:07.93,0:01:11.99,Default,,0000,0000,0000,,Faltou um elemento aqui para criar\Numa sensação de profundidade,
Dialogue: 0,0:01:11.99,0:01:14.38,Default,,0000,0000,0000,,que é a textura.
Dialogue: 0,0:01:14.38,0:01:18.22,Default,,0000,0000,0000,,Vou abrir a pastinha,\Nporque eu quero só uma,
Dialogue: 0,0:01:18.22,0:01:20.14,Default,,0000,0000,0000,,ctrl+c
Dialogue: 0,0:01:21.10,0:01:23.17,Default,,0000,0000,0000,,ctrl+v, ela criou por cima,
Dialogue: 0,0:01:23.17,0:01:26.46,Default,,0000,0000,0000,,eu não quero por cima, eu\Nquero por baixo da modelo.
Dialogue: 0,0:01:26.46,0:01:29.25,Default,,0000,0000,0000,,Posso até aumentar\Num pouquinho assim,
Dialogue: 0,0:01:29.25,0:01:35.31,Default,,0000,0000,0000,,legal, e usar a borracha\Npara apagar.
Dialogue: 0,0:01:35.31,0:01:38.94,Default,,0000,0000,0000,,Vou colocar até para baixo\Ndos nossos elementos
Dialogue: 0,0:01:38.94,0:01:43.25,Default,,0000,0000,0000,,para ficar acima\Napenas do background.
Dialogue: 0,0:01:43.25,0:01:47.81,Default,,0000,0000,0000,,Perfeito, foi a capa de mobile\Nmais rápida que a gente já criou,
Dialogue: 0,0:01:47.81,0:01:51.24,Default,,0000,0000,0000,,e vamos salvar em WebP.
Dialogue: 0,0:01:52.07,0:01:56.32,Default,,0000,0000,0000,,É importante você saber que o site\Npode utilizar imagens, também,
Dialogue: 0,0:01:56.32,0:02:00.79,Default,,0000,0000,0000,,como JPEG e PNG, mas quando\Nvocê pensa em um site otimizado,
Dialogue: 0,0:02:00.79,0:02:02.54,Default,,0000,0000,0000,,um site leve, rápido,
Dialogue: 0,0:02:02.54,0:02:06.76,Default,,0000,0000,0000,,bom para ranquear nos mecanismos\Nde busca da internet,
Dialogue: 0,0:02:07.71,0:02:11.83,Default,,0000,0000,0000,,o formato WebP é o melhor\Nformato que tem.
Dialogue: 0,0:02:11.83,0:02:17.24,Default,,0000,0000,0000,,Então, para isso, vamos vir\Naqui em "file", no Photoshop,
Dialogue: 0,0:02:17.90,0:02:22.31,Default,,0000,0000,0000,,vamos, antes, dar um ctrl+s,\Npara deixar salva a nossa capa,
Dialogue: 0,0:02:22.31,0:02:25.69,Default,,0000,0000,0000,,e vamos aqui em "save as"?
Dialogue: 0,0:02:25.69,0:02:26.84,Default,,0000,0000,0000,,Não, não, não, não, não.
Dialogue: 0,0:02:26.84,0:02:31.41,Default,,0000,0000,0000,,Aqui em "save as", temos\Nsó PSB, PDF e TIF,
Dialogue: 0,0:02:31.41,0:02:33.05,Default,,0000,0000,0000,,não é isso que a gente quer.
Dialogue: 0,0:02:33.05,0:02:35.60,Default,,0000,0000,0000,,A gente tem que salvar\Ncomo cópia.
Dialogue: 0,0:02:35.60,0:02:39.76,Default,,0000,0000,0000,,Então, "save a copy",\Nou alt+ctrl+s,
Dialogue: 0,0:02:39.76,0:02:44.13,Default,,0000,0000,0000,,clico aqui e, quando a gente\Nabre, tem diversos formatos,
Dialogue: 0,0:02:44.13,0:02:48.09,Default,,0000,0000,0000,,e o último formato,\Nmais novo, mais recente,
Dialogue: 0,0:02:48.09,0:02:52.44,Default,,0000,0000,0000,,é o WebP, formato\Ncriado pela Google.
Dialogue: 0,0:02:52.44,0:02:57.59,Default,,0000,0000,0000,,Vamos salvar na nossa\Npasta, que está aqui,
Dialogue: 0,0:02:57.59,0:03:00.58,Default,,0000,0000,0000,,deixa eu ver, nessa\Npastinha aqui, "a laranja"
Dialogue: 0,0:03:00.58,0:03:05.10,Default,,0000,0000,0000,,e vamos deixar\Ncomo "capa mobile".
Dialogue: 0,0:03:05.10,0:03:08.80,Default,,0000,0000,0000,,Vou tirar aqui, e "save".
Dialogue: 0,0:03:08.80,0:03:13.78,Default,,0000,0000,0000,,Aqui, eu posso reduzir\Nou aumentar a qualidade.
Dialogue: 0,0:03:13.78,0:03:17.34,Default,,0000,0000,0000,,Quando eu habilito\Nessa metadata,
Dialogue: 0,0:03:17.34,0:03:20.06,Default,,0000,0000,0000,,ele leva uma série de informações\Npara a imagem que a gente não quer,
Dialogue: 0,0:03:20.06,0:03:21.71,Default,,0000,0000,0000,,porque só pesa a imagem.
Dialogue: 0,0:03:21.71,0:03:24.24,Default,,0000,0000,0000,,Então, eu vou deixar\Naqui em "lossy",
Dialogue: 0,0:03:24.24,0:03:27.100,Default,,0000,0000,0000,,eu posso até diminuir\Num pouquinho mais, para 95,
Dialogue: 0,0:03:27.100,0:03:30.25,Default,,0000,0000,0000,,e dar um "ok" e salvar.
Dialogue: 0,0:03:30.73,0:03:36.60,Default,,0000,0000,0000,,Vamos salvar em PNG também\Npara eu mostrar a diferença
Dialogue: 0,0:03:36.60,0:03:41.45,Default,,0000,0000,0000,,quando você salva duas imagens\Nem formatos diferentes,
Dialogue: 0,0:03:41.45,0:03:43.73,Default,,0000,0000,0000,,a diferença de tamanho.
Dialogue: 0,0:03:43.73,0:03:49.37,Default,,0000,0000,0000,,Então, vamos aqui em nossa pasta,\Ndeve estar aqui em "a laranja",
Dialogue: 0,0:03:49.37,0:03:53.60,Default,,0000,0000,0000,,a WebP está aqui, a PNG eu\Ndevo ter salvo em outro lugar,
Dialogue: 0,0:03:53.60,0:03:55.50,Default,,0000,0000,0000,,vamos salvar de novo.
Dialogue: 0,0:03:58.34,0:04:01.52,Default,,0000,0000,0000,,Ah, separei mesmo,\Nvou pegar e dar um ctrl+x
Dialogue: 0,0:04:01.52,0:04:06.99,Default,,0000,0000,0000,,e vou colar na nossa\Npasta, "a laranja", ok.
Dialogue: 0,0:04:06.99,0:04:09.75,Default,,0000,0000,0000,,"Save", "yes".
Dialogue: 0,0:04:09.75,0:04:11.98,Default,,0000,0000,0000,,Vamos voltar para a pasta.
Dialogue: 0,0:04:12.83,0:04:17.36,Default,,0000,0000,0000,,Estão as duas imagens\Naqui, em PNG e em WebP.
Dialogue: 0,0:04:17.36,0:04:19.22,Default,,0000,0000,0000,,PNG, se a gente vier aqui\Ncom o botão direito
Dialogue: 0,0:04:19.22,0:04:21.78,Default,,0000,0000,0000,,e clicar em "propriedades",
Dialogue: 0,0:04:21.78,0:04:29.50,Default,,0000,0000,0000,,a gente consegue visualizar\Nque ela está em 1,57 MB, em PNG.
Dialogue: 0,0:04:30.31,0:04:38.35,Default,,0000,0000,0000,,E em WebP, se a gente fizer\Na mesma coisa, ela está em 256 KB,
Dialogue: 0,0:04:38.35,0:04:43.59,Default,,0000,0000,0000,,ela reduziu muito e continua\Ncom a mesma qualidade.
Dialogue: 0,0:04:43.59,0:04:46.68,Default,,0000,0000,0000,,E, aqui, se a gente abre\No PNG, está bonitinho,
Dialogue: 0,0:04:46.68,0:04:47.81,Default,,0000,0000,0000,,é uma imagem pixelizada,
Dialogue: 0,0:04:47.81,0:04:52.01,Default,,0000,0000,0000,,então, conforme o for crescendo,\Nvai perdendo um pouco a resolução,
Dialogue: 0,0:04:52.01,0:04:53.97,Default,,0000,0000,0000,,mas, para site, isso\Nnão tem importância,
Dialogue: 0,0:04:55.60,0:04:57.68,Default,,0000,0000,0000,,o mais importante\Né usar o WebP.
Dialogue: 0,0:04:57.68,0:04:59.52,Default,,0000,0000,0000,,E aqui eu vou abrir
Dialogue: 0,0:05:00.81,0:05:04.81,Default,,0000,0000,0000,,com o nosso Google Chrome\Npara visualizar
Dialogue: 0,0:05:04.81,0:05:07.62,Default,,0000,0000,0000,,que ela também está grande\No suficiente para o site,
Dialogue: 0,0:05:07.62,0:05:10.05,Default,,0000,0000,0000,,principalmente para mobile.
Dialogue: 0,0:05:10.05,0:05:15.96,Default,,0000,0000,0000,,Então, é uma imagem grande,\Ncom uma resolução bacana e otimizada.
Dialogue: 0,0:05:15.96,0:05:18.36,Default,,0000,0000,0000,,Então, o que a gente fez\Naqui foi apenas adaptar
Dialogue: 0,0:05:18.36,0:05:21.24,Default,,0000,0000,0000,,a nossa capa de desktop\Npara mobile
Dialogue: 0,0:05:21.24,0:05:24.57,Default,,0000,0000,0000,,e salvar em um melhor formato\Npara interface digital,
Dialogue: 0,0:05:24.57,0:05:27.42,Default,,0000,0000,0000,,que é a WebP,\Naqui no Photoshop.