GDW CAP05 2025 VA01 TAMANHO E FORMATO PARA MOBILE

Você sabe quais são
os tamanhos padrões de capas

para interfaces digitais,
como desktop, tablet e mobile?

Vamos para o Photoshop para
aprender quais são esses tamanhos

e vamos criar um template para
desenvolver as nossas capas.

Aqui no Photoshop, vamos
criar um novo documento,

ou um novo arquivo.

Em vez de utilizar o tamanho
padrão de 1920 pixels por 1080,

vamos colocar 2560

e, aqui na altura, vamos
colocar 650 pixels.

Como é para telas,
para interfaces digitais,

então 72 de resolução
e RGB Color.

Criei, ok, tem uma capa,
aqui, de 2560 pixels.

E porque 2560 pixels?

Porque hoje tem
muitas telas UltraWide

que necessitam que os sites
tenham uma largura maior.

Então, a gente vai criar
um template com esses tamanhos

para fazer uma capa adaptada a esse
formato de telas de hoje em dia.

Para habilitar as réguas, você
pode acessar "view" no menu fixo

e, aqui em "rulers",
você habilita elas,

mas também tem o atalho
ctrl+r, que desabilita e habilita.

Ok, temos a nossa interface
já previamente preparada

e, agora, vamos pegar
um shape layer retangular,

ou a ferramenta de retângulo.

E, aqui, eu vou criar
um retângulo.

Pode ser verde mesmo.

Ele ainda não está no tamanho
que eu gostaria que estivesse,

então eu vou ajustar
ele aqui bonitinho

e, aqui na transformação, eu consigo
colocar o tamanho adequado.

Perceba que ele
está quase lá,

se eu vier aqui e colocar
1920 pixels e der um enter,

ele altera o tamanho da altura.

Pode ver que sobrou
um pouquinho aqui,

então, para colocar
no tamanho correto,

eu desbloqueio e, aqui,
eu coloco 650 pixels.

A altura das capas é relativa,

depende do projeto
que você está trabalhando.

Alguns projetos necessitam
de uma capa com altura pouco maior,

outras não, fica
ao seu critério.

Aproveitando que ela está aqui,
vamos centralizar essa capa.

Mas, para centralizar essa capa,
eu vou selecionar essa daqui

e vou dar uma pintada
para deixar ela mais bonitinha.

Eu posso vir, deixa eu ver,
no baldezinho de tinta aqui

e clicar.

Ele pintou de cinza, eu quero
uma cor que dê mais contraste,

então vou colocar
esta cor aqui.

Pode ser a cor
que você decidir.

E, aqui, juntando essas duas
camadas, eu vou centralizar

para ficar com a mesma
medida em ambos os lados

e, aí sim, eu trago a régua

para a gente começar
a mensurar o nosso template

com os tamanhos de formatos
das nossas capas.

Ok.

Agora, eu tenho uma tela de tamanho
2560 pixels para um UltraWide

e tem um tamanho
padrão de tela 1920 pixels

e, para tablet, eu tenho que seguir
a mesma linha que eu fiz agora,

essa de 1920 pixels.

Então, vou pegar novamente

a ferramenta de shape layer,
vou mudar a cor,

vou colocar um amarelo para dar
um contraste, e vou trazer para cá.

Ela ainda não está no tamanho
ideal, então o que eu fazer?

Com ela selecionada, vou
colocar 1280 pixels por 650,

que é a altura que a gente
está utilizando aqui.

Vou selecionar e, aqui
em alinhamento, alinhar bonitinho.

Trazer a nossa régua para mensurar
e criar um padrão do nosso tamanho.

Então se eu apagar,
ocultar essa interface,

essa capa, melhor dizendo,

eu consigo ainda saber
quais são os tamanhos dela

pela posição das réguas, mas
vamos manter assim por enquanto.

E aí, vamos pegar aqui
e fazer uma barra,

e mudar de cor.

Está ficando um carnaval,
mas é para ser assim mesmo,

quanto mais cores, mais
o nosso cérebro vai fixando

os tamanhos adequados
para as nossas capas.

E, aqui, vamos pegar
a ferramenta de texto

e vamos digitar
"2560px", pixel.

Para dar um bom contrastezinho,
vamos jogar um branco aqui.

A alteração é sempre
no campo de propriedades.

Aqui na barra contextual,
eu posso reduzir para 72

para ficar um tamanho
adequado, e aí

eu vou juntar
esses dois aqui

e com o alt, segurando
o alt, duplicar.

Essa aqui vai ser a nossa
barra de 1920 pixels, 1920.

E vou fazer isso
novamente,

duplicando para criar
a nossa barra de tablet.

o nosso tablet aqui.

Como você pode ver,
ele está com 1280 pixels,

mas temos tablet
até com largura de até 750 pixels.

Isso aqui é um tamanho padrão
aceitável para utilizar

em todos os tamanhos de tablet.

Então vamos lá.

1200.

E 80 Pixel.

E aí?

Vamos reduzir a largura dele

para 1920

e aqui

1280.

Selecionar

as três barras.

E centralizar

o habilitar aqui em si Should
transform controls

que as bordas de edição
ficam habilitadas.

Se eu tirar ele some.

Por que eu estou criando
esse template?

Porque eu vou deixar ele guardadinho
na minha máquina

Como web designer,
como como designer gráfico

eu posso utilizar em diversos
momentos,

então
sempre que eu tiver esse template

eu não vou precisar ficar
criando esse processo todo.

Ele é uma maneira de otimizar
o nosso processo de desenvolvimento,

da nossa peça,
do nosso site, da nossa arte.

Então deixa bem bonitinho.

Aqui você pode prepara

do jeito

que for mais adequado para você.

Você pode modificar as cores
e aproveite

para salvar da maneira correta
clicando em File sem viés.

Um download aqui.

Vamos supor que aqui esteja a nossa

a nossa pasta

pasta do template.

E aqui

tem leite

de capa

para site

salva em PSD
para manter o arquivo aberto

para você poder editar
sempre save ok?

E aí vamos abrir outro arquivo.

Só que agora em 1080 e

por 1080 p

Como é para tela você tem
tem dois de resolução RGB,

criei e vamos fazer o mesmo
processo,

só que aqui a gente vai habilitar
uma régua

bem no cantinho para a gente
preservar as nossas laterais.

Eu vou deixar aqui
mais ou menos essa distância.

Deixa eu ver.

Aqui está.

Eu posso utilizar a régua
como parâmetro?

Pronto.

E vamos fazer a mesma coisa.

Eu posso usar
a forma para criar o fundo

importante

aqui ele
preserva o 1080 para 1080 p.

Deixa eu dar um delete.

Posso usar o balde de tinta
para pintar

ou eu posso usar

a ferramenta

aqui no menu inferior
do campo de propriedades

que habilita um BG sólido?

Então eu clico aqui.

Ele utiliza essa cor aqui
que já está aqui.

O eu posso modificar automaticamente
quando abrir

a de jogar um pouco mais vermelhinho
e ok.

Temos 1/1 da nossa capa mobile,
a capa mobile.

Use um 80 por 80 como padrão.

Obviamente
tem vários formatos de tipo

mobile de 340 pixels de 540 pixels
e aí por diante.

Só que aqui o padrão é 1030 por 1030

e aí no nosso projeto
a gente pode reduzir ele.

Então aqui eu só vou manter.

Este fundo

e vou criar a minha barra
indicando que ele é 1080

pixels.

Opa, faltou um zero aqui.

Vou reduzir para 60.

E pronto,

Vou deixar salvo para utilizar

no desenvolvimento da minha capa

mobile.

Vou salvar.

Como normalmente a gente

primeiro
faz a capa padrão do desktop,

que também serve para tablet,

depois é só a gente adaptar
a arte para o mobile.

Então a gente usa bem menos.

Mas para trazer a arte para cá
e fazer alguns pequenos ajustes.

E assim a gente tem um template
prontinho para subsidiar

a construção da sua arte,
da sua capa para sua interface

digital, seja desktop,
seja mobile, ou seja tablet.