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 chip 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 tivesse,

então vou ajustar
ele aqui bonitinho.

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

Percebe que ele está quase lá?

Se eu vim aqui colocar 1920 pixel

e dar 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.

Elas são relativas, depende
do projeto que você tá trabalhando

e 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 e vou

pintar
para deixar ela mais bonitinha.

Eu posso vim eu no balde de

tinta aqui e clicar

o que 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,

essas duas camadas,

eu vou centralizar para ficar

com a mesma medida de ambos os lados
e aí sim

eu trago a régua para a gente
começar a mensurar o nosso template

conforme 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 1000
900.920 pixels

e para tablet eu

tenho que seguir
a mesma linha que eu fiz agora,

essa de 1920
pixel, então vou pegar novamente

a ferramenta

de Chapeleiro, vou mudar a cor
para 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?

Colocar 1280

pixel 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.

Se eu apagar
ou ocultar essa interface?

Essa capa, melhor dizendo,

eu consigo ainda saber
quais são os tamanhos dela.

Utilizo pelas pela,
pela posição das réguas,

mas vamos manter assim por enquanto.

E aí vamos pegar aqui,

fazer uma barra.

E mudar de cor.

Tá 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 2560

px pixel

para dar um bom contraste.

Zinho, 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 alt segurando alt duplicar.

Essa aqui vai ser a nossa barra
de 1000 900.920 pixels e o 920.

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.