まず、私はモバイル開発者であり、最初からアプリのレイアウトを開発するリスクを負っています。次の問題が見つかりました。Photoshopはフォームの測定単位としてPXを使用し、開発ではアプリはDPを使用します。PXからPDへの変換がどのように機能するかを知っています

dp = px *(160 / dpi)

ただし、数式を適用してプログラミングで値を使用すると、レイアウトが壊れます。高さ、幅、ピクセル密度など、アプリをモックアップするための基礎として使用できるPSDファイル構成があるかどうかを知りたいので、モバイルやタブレットでこれらの対策を簡単に実行できるようにしますか?

回答

Photoshopは、フォームの測定単位としてPXを使用し、アプリの開発に使用しますDPを使用しているので、PXからDPへの変換がどのように機能するかを知っています

変換はoに依存しますnPhotoshopの元のデザインがどのように構築されたか。 Androidのdpユニットは、密度に依存しないピクセルです。 1dpは、デバイスとAndroidの設定に応じて、1画面ピクセル、2、3、4、またはその他の値としてレンダリングされる場合があります。

一般的な変換のリストは次のとおりです。

  • 1 dp = 1ピクセル、つまり1x、mdpiディスプレイの場合(〜160PPI)。
  • 1 dp = 1.5ピクセル、つまり1.5x 、hdpiディスプレイの場合(〜240PPI)。
  • 1 dp = 2ピクセル、または2x、xhdpiディスプレイ(〜320PPI)。
  • 1 dp = 3ピクセル、つまりxxhdpiディスプレイ(〜480PPI)の場合は3倍。
  • 1 dp = xxxhdpiディスプレイの場合は4ピクセル、つまり4倍(〜640PPI)。

つまり、大きな問題は、どの密度が必要かということです。モックアップを作成するには?上記の密度のいずれかを選択できます。選択によって変換やその他の要素が決まります。

私の好みは、1 dp = = 1 CSS px = 1 iOS point。つまり、モックアップはデバイス自体よりも解像度が低くなりますが、変換に値を変更する必要がないことを意味します。

完了したら、Photoshopにはさまざまな密度のアセットをエクスポートする方法がいくつかあります。 。 Export AsGeneratorで他のスケールを作成することも、Save for Webとスライス( 私と同じように)。

これがPhotoshopの[名前を付けてエクスポート]ウィンドウで、エクスポートは1倍、2倍、3倍の密度に設定されています( iOSの場合、この場合)。

Photoshopのエクスポート先

回答

式が正しくありません。参考までに、 Android開発ガイドには次のように書かれています

px = dp *(dpi / 160)

したがって、dpの実際の式は

dp = px /(dpi / 160)

お役に立てば幸いです!

質問の2番目の部分では、Photoshopはかなり面倒です。アセットのエクスポート、さらにはスプライスのエクスポートになります。 Sketchを使用することに慣れている場合は、はるかに簡単です。しかし、申し訳ありませんが、モバイルデザイナーとして、pxからdpへの変換はそのプログラムでは簡単なことではないため、私はほとんどフォトショップを使用していません。

改訂

あなたの質問をよく理解できたと思います。探している値については、このサイトをご覧ください: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

コメント

  • 申し訳ありませんが、投稿に間違った数式を書き込んだため、変換に正しい数式を使用していました。質問は、ファイルのサイズをどのようにするかです。値を適切にエクスポートできます。Sketchでは使用できません。オペレーティングシステムはLinuxです。Photoshopを使用するには、LinuxでPhotoshopを実行できるWineというツールを使用する必要がありました。

回答

これはここではトピックから外れているかもしれませんが、画面のデザインにはPhotoshopをまったく使用しないことをお勧めします。 Illustrator、Sketchなどのベクターツールを使用します。違いは、後でデザインをスケールアップできることです。 Photoshopで1倍のサイズで作業している場合、最新のAndriod電話ではデザインがひどく見えます。高ppi画面で滑らかに見えるようにするには、デザインを少なくとも2倍、より適切には4倍に設定する必要があります。

ベクターツールで作成したすべてのアセットは、後で次のように使用できます。必要なすべてのサイズのアセット。Photoshopでは、後でエクスポートするためにボタンやアイコンなどを分離する方がはるかに手間がかかります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です