Em primeiro lugar, sou um desenvolvedor móvel e estou arriscando o desenvolvimento de um layout para meu aplicativo, desde o início. encontrei o seguinte problema, o Photoshop usa PX como unidade de medida para os formulários e no desenvolvimento o aplicativo usa DP, sei como funciona a conversão de PX para PD

dp = px * (160 / dpi)

No entanto, quando aplico uma fórmula e uso os valores na programação, o layout quebra, Gostaria de saber se há uma configuração de arquivo PSD, como altura, largura, densidade de pixels, onde posso usar como base para fazer a maquete do meu aplicativo para facilitar o transporte dessas medidas para celulares e tablets?

Resposta

O Photoshop usa PX como unidade de medida para os formulários e no desenvolvimento do aplicativo usa DP, eu sei como funciona a conversão de PX para DP

A conversão dependerá do n como o design original no Photoshop foi construído. As unidades dp do Android são pixels independentes de densidade. 1dp pode renderizar como 1 pixel de tela, ou 2, ou 3, ou 4, ou algum outro valor, dependendo do dispositivo e das configurações do Android.

Aqui está uma lista das conversões comuns:

  • 1 dp = 1 pixel, ou 1 ×, para mdpi monitores (~ 160PPI).
  • 1 dp = 1,5 pixels ou 1,5 × , para hdpi monitores (~ 240PPI).
  • 1 dp = 2 pixels, ou 2 ×, para xhdpi exibe (~ 320PPI).
  • 1 dp = 3 pixels, ou 3 ×, para xxhdpi exibe (~ 480PPI).
  • 1 dp = 4 pixels, ou 4 ×, para xxxhdpi monitores (~ 640PPI).

Portanto, a grande questão é qual densidade você deseja para construir suas maquetes? Você pode escolher qualquer uma das densidades acima. Sua escolha ditará a conversão e outros fatores.

Minha preferência é projetar em 1 ×, uma escala onde 1 dp = 1 px = 1 CSS px = 1 iOS point. Isso significa que suas maquetes têm resolução mais baixa do que o próprio dispositivo, mas significa que a conversão não exige nenhuma alteração no valor.

Quando terminar, o Photoshop tem algumas maneiras de exportar ativos para as várias densidades . Export As e Generator podem construir as outras escalas, ou você pode usar Save for Web e fatias ( como eu ).

Esta é a janela Exportar como do Photoshop, com a exportação configurada para densidades de 1 ×, 2 × e 3 × ( para iOS, neste caso).

Exportar como Photoshop

Resposta

Sua fórmula está incorreta. Como referência, o Guia de desenvolvimento do Android diz:

px = dp * (dpi / 160)

então a fórmula real para dp é

dp = px / (dpi / 160)

Espero que ajude!

Para a segunda parte da sua pergunta, o Photoshop é um tanto entediante quando se trata de exportar ativos, ou mesmo emendas. Se você está aberto para usar o Sketch, é muito mais fácil. Mas desculpe, como um designer móvel, eu dificilmente uso o photoshop porque a conversão de px para dp não é uma coisa fácil de fazer naquele programa.

Revisado

Acho que entendi melhor sua pergunta agora. Consulte este site para os valores que você “está procurando: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Comentários

  • Desculpe, escrevi a fórmula errada na postagem, então estava usando a fórmula correta para a conversão, minha dúvida é qual deveria ser o tamanho do arquivo para que eu posso exportar os valores corretamente. E no Sketch não consigo usar, o sistema operacional é Linux, para usar o photoshop foi necessário usar uma ferramenta chamada Wine que permite que o Photoshop rode no Linux.

Resposta

Isso pode estar fora do assunto aqui, mas eu recomendo não usar o Photoshop para design de tela. Use uma ferramenta vetorial como o Illustrator, Sketch ou similar. A diferença é que você pode dimensionar seus projetos posteriormente. Se você trabalha no Photoshop em um tamanho 1x, seus designs ficarão horríveis em um telefone Andriod moderno. Você “teria que configurar os designs em pelo menos 2x, melhor 4x para torná-los suaves em uma tela de alto ppi.

Além disso, todos os ativos que você cria com uma ferramenta de vetor podem ser usados posteriormente como ativos para todos os tamanhos necessários. No Photoshop, será muito mais trabalhoso isolar botões, ícones etc. para uma exportação posterior.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *