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ê as habilita,

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 tenho 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,
está com 1280 pixels,

mas temos tablets com largura
de até 750 pixels.

Esse aqui é um tamanho
padrão aceitável

para utilizar em todos
os tamanhos de tablets.

Então, vamos lá.

1200...

1280 pixels.

E aí, vamos reduzir
a largura dele para 1920

e aqui

1280.

Selecionar

as três barras

e centralizar.

Vou habilitar, aqui, esse
"show 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 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.

É 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 preparar do jeito
que for mais adequado para você,

você pode modificar as cores.

E aproveite para salvar
da maneira correta,

clicando em "file",
"save as",

um download aqui.

Vamos supor que aqui
esteja a nossa pasta,

"pasta do template".

E aqui

"template

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 1080p

por 1080p.

Como é para tela,
72 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, ele preserva
o 1080p por 1080p.

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 que já está aqui,

ou eu posso modificar
automaticamente quando abrir.

Ok, deixa eu jogar um pouco
mais vermelhinho, e ok,

temos a primeira parte
da nossa capa mobile.

A capa mobile usa o 1080
por 1080 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
é 1080 por 1080

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,

é mais 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 a sua interface digital,

seja desktop, seja mobile,
ou seja tablet.