hide💡Localization is the process of tailoring your content to local audiences.
Click to learn more about Localization with Amara.org.

< Return to Video

GDW CAP05 2025 VA03 FORMATO DE IMAGENS PARA SITES

  • 0:08 - 0:10
    Você sabe a maneira
    correta de salvar a capa
  • 0:10 - 0:12
    que você criou
    para o seu site?
  • 0:12 - 0:15
    A gente vai para o Photoshop
    para fazer isso na prática,
  • 0:15 - 0:20
    mas, antes, vamos adaptar a capa
    que a gente criou para o mobile.
  • 0:20 - 0:21
    Vamos lá.
  • 0:21 - 0:27
    Aqui está nossa capa, basta a gente
    pegar os elementos que a gente quer,
  • 0:27 - 0:32
    ou eu posso até pegar
    todos, melhor.
  • 0:32 - 0:36
    Primeiro, a textura ctrl+c,
    venho para capa mobile,
  • 0:36 - 0:42
    tira o que a gente
    criou já, ctrl+v.
  • 0:43 - 0:45
    Vou até tirar esse background
    que a gente não vai precisar,
  • 0:45 - 0:49
    deixar só o que a gente
    criou, vou bloquear
  • 0:49 - 0:52
    e, aí, vou pegar esses
    outros elementos.
  • 0:53 - 0:56
    Ctrl+c, ctrl+v.
  • 0:56 - 1:00
    Já estamos com os elementos
    aqui criados.
  • 1:01 - 1:02
    Opa!
  • 1:02 - 1:05
    Segurando o shift para não
    distorcer a imagem.
  • 1:07 - 1:08
    Ok.
  • 1:08 - 1:12
    Faltou um elemento aqui para criar
    uma sensação de profundidade,
  • 1:12 - 1:15
    que é a textura.
  • 1:15 - 1:18
    Vou abrir a pastinha,
    porque eu quero só uma,
  • 1:18 - 1:20
    ctrl+c
  • 1:21 - 1:23
    ctrl+v, ela criou por cima,
  • 1:23 - 1:27
    eu não quero por cima, eu
    quero por baixo da modelo.
  • 1:27 - 1:29
    Posso até aumentar
    um pouquinho assim,
  • 1:29 - 1:35
    legal, e usar a borracha
    para apagar.
  • 1:35 - 1:39
    Vou colocar até para baixo
    dos nossos elementos
  • 1:39 - 1:43
    para ficar acima
    apenas do background.
  • 1:43 - 1:48
    Perfeito, foi a capa de mobile
    mais rápida que a gente já criou,
  • 1:48 - 1:52
    e vamos salvar em WebP.
  • 1:52 - 1:56
    É importante você saber que o site
    pode utilizar imagens também
  • 1:56 - 2:01
    como JPEG e PNG, mas quando
    você pensa em um site otimizado,
  • 2:01 - 2:03
    um site leve, rápido,
  • 2:03 - 2:07
    bom para ranquear nos mecanismos
    de busca da internet,
  • 2:08 - 2:12
    o formato WebP é o melhor
    formato que tem.
  • 2:12 - 2:18
    Então, para isso, vamos vir
    aqui em "file", no Photoshop,
  • 2:18 - 2:22
    vamos, antes, dar um ctrl+s,
    para deixar salva a nossa capa,
  • 2:22 - 2:26
    e vamos aqui em "save as"?
  • 2:26 - 2:27
    Não, não, não, não, não.
  • 2:27 - 2:32
    Aqui em "save as", temos
    só PSB, PDF e TIF,
  • 2:32 - 2:33
    não é isso que a gente quer.
  • 2:33 - 2:36
    A gente tem que salvar
    como cópia.
  • 2:36 - 2:41
    Então, se a copy ou alt control s,
    clica aqui e aqui.
  • 2:41 - 2:44
    Quando a gente abre
    tem diversos formatos
  • 2:44 - 2:47
    e o último formato mais novo,
    mais recente,
  • 2:48 - 2:52
    é o Web, formato criado pela Google.
  • 2:53 - 2:57
    Vamos, Vamos salvar na nossa pasta
    que ela está aqui.
  • 2:58 - 3:02
    Deixa eu ver nessa pastinha
    aqui a laranja e vamos deixar
  • 3:03 - 3:05
    em capa mobile.
  • 3:05 - 3:08
    Vou tirar que é sempre
  • 3:09 - 3:09
    aqui.
  • 3:09 - 3:13
    Eu posso reduzir
    ou aumentar a qualidade.
  • 3:14 - 3:17
    Quando eu habilito esse metadado,
    essa metadata,
  • 3:18 - 3:20
    ele leva uma série de informações
    para a imagem
  • 3:20 - 3:22
    que a gente
    não quer que só pegue a imagem.
  • 3:22 - 3:24
    Então eu vou deixar aqui em nós.
  • 3:24 - 3:28
    Diminui a opacidade,
    diminui um pouquinho mais para 95
  • 3:28 - 3:34
    e dá um ok salvar
    e vamos salvar em PNG também
  • 3:34 - 3:37
    para mostrar a diferença.
  • 3:37 - 3:40
    Quando você salva
    duas imagens diferentes em formatos
  • 3:40 - 3:43
    diferentes, a diferença de tamanho.
  • 3:44 - 3:46
    Então vamos aqui em nosso
  • 3:46 - 3:49
    e nossa pasta
    deve estar aqui em laranja
  • 3:50 - 3:54
    a web preta aqui a png
    eu devo ter salvado em outro lugar.
  • 3:54 - 3:55
    Vamos salvar de novo
  • 3:57 - 4:00
    e separei mesmo.
  • 4:00 - 4:06
    Vou pegar e dar um control X e vou
    colar na nossa pasta a laranja, ok?
  • 4:07 - 4:10
    Serve. Yes!
  • 4:10 - 4:13
    Vamos voltar para a pasta.
  • 4:13 - 4:15
    Estão as duas imagens
  • 4:15 - 4:17
    aqui em PNG é web.
  • 4:17 - 4:19
    PNG Se a gente vem aqui com o botão
  • 4:19 - 4:22
    direito,
    clica e clica em Propriedades,
  • 4:22 - 4:27
    a gente consegue visualizar
    que ela está em 1,57 megas
  • 4:28 - 4:30
    em PNG
  • 4:30 - 4:31
    e em web page.
  • 4:31 - 4:34
    Se a gente fizer a mesma coisa,
  • 4:34 - 4:38
    ela está em 256 Kbytes.
  • 4:39 - 4:43
    Ela reduziu muito
    e continua com a mesma qualidade.
  • 4:44 - 4:46
    E aqui
    se a gente abre o png tá bonitinho.
  • 4:46 - 4:48
    Aqui é uma imagem pixelizada,
  • 4:48 - 4:52
    então conforme o for crescendo,
    vai perdendo um pouco a resolução.
  • 4:52 - 4:55
    Mas pra site
    isso não tem importância.
  • 4:56 - 4:59
    O mais importante é usar o
    web page e aqui eu vou abrir
  • 5:01 - 5:04
    com o
    nosso Google Chrome para visualizar
  • 5:05 - 5:06
    que ele também está grande
  • 5:06 - 5:09
    o suficiente para o site,
    principalmente para mobile.
  • 5:10 - 5:13
    Então é uma imagem grande,
    com a resolução
  • 5:13 - 5:16
    bacana e otimizada.
  • 5:16 - 5:19
    Então, o que a gente fez aqui
    foi apenas adaptar
  • 5:19 - 5:21
    a nossa capa de desktop para mobile
  • 5:21 - 5:26
    e salvar num melhor formato
    para interface digital, que é o web.
  • 5:26 - 5:27
    Aqui no Photoshop.
Title:
GDW CAP05 2025 VA03 FORMATO DE IMAGENS PARA SITES
Video Language:
Portuguese, Brazilian
Duration:
05:31

Portuguese, Brazilian subtitles

Incomplete

Revisions Compare revisions

Our website uses cookies for analysis purposes.