우선, 저는 모바일 개발자이며 처음부터 제 앱의 레이아웃을 개발할 위험이 있습니다. 다음 문제를 발견했습니다. Photoshop은 양식에 대한 측정 단위로 PX를 사용하고 개발 과정에서 앱은 DP를 사용합니다. PX에서 PD 로의 변환 작동 방식을 알고 있습니다.

dp = px * (160 / dpi)

그러나 수식을 적용하고 프로그래밍에서 값을 사용하면 레이아웃이 중단됩니다. 높이, 너비, 픽셀 밀도와 같은 PSD 파일 구성이 있는지 알고 싶습니다. 여기에서 앱을 모형화하는 기준으로 사용할 수 있으므로 모바일 및 태블릿에서 이러한 측정을 쉽게 수행 할 수 있습니까?

답변

Photoshop은 PX를 양식의 측정 단위로 사용하고 앱을 개발 중입니다. DP를 사용합니다. PX에서 DP로 변환이 어떻게 작동하는지 알고 있습니다.

변환은 o n Photoshop의 원본 디자인이 어떻게 구성되었는지. Android의 dp 단위는 밀도 독립형 픽셀입니다. 1dp는 기기 및 Android 설정에 따라 화면 1 픽셀, 2, 3, 4 또는 기타 값으로 렌더링 될 수 있습니다.

일반적인 전환 목록은 다음과 같습니다.

  • mdpi 디스플레이 (~ 160PPI)의 경우 1dp = 1 픽셀 또는 1x
  • 1dp = 1.5 픽셀 또는 1.5x , hdpi 디스플레이 (~ 240PPI)의 경우.
  • 1dp = 2 픽셀 또는 xhdpi의 경우 2 배 디스플레이 (~ 320PPI).
  • 1dp = 3 픽셀 또는 xxhdpi 디스플레이 (~ 480PPI)의 경우 3 배.
  • 1 xxxhdpi 디스플레이 (~ 640PPI)의 경우 dp = 4 픽셀 또는 4 배입니다.

그러므로 가장 큰 문제는 원하는 밀도입니다. 목업을 만들려면? 위의 밀도 중 하나를 선택할 수 있습니다. 귀하의 선택에 따라 전환 및 기타 요인이 결정됩니다.

내 선호는 1 배, 즉 1 dp = = 1 CSS px = 1 iOS point. 이는 모형이 장치 자체보다 해상도가 낮다는 것을 의미하지만 변환시 값을 변경할 필요가 없음을 의미합니다.

완료되면 Photoshop에서 다양한 밀도에 대한 에셋을 내보낼 수있는 몇 가지 방법이 있습니다. . Export AsGenerator는 다른 스케일을 구축하거나 Save for Web 및 슬라이스 ( 내가하는 것처럼 ).

여기에 1 ×, 2 × 및 3 × 밀도 ( iOS 용).

Photoshop의 다른 이름으로 내보내기

답변

수식이 잘못되었습니다. 참고로 Android 개발 가이드 에 따르면

px = dp * (dpi / 160)

따라서 dp의 실제 공식은

dp = px / (dpi / 160)

도움이되기를 바랍니다.

질문의 두 번째 부분에서 Photoshop은 다음과 같은 경우 다소 지루합니다. 자산 또는 스플 라이스를 내보내는 것입니다. Sketch 사용에 개방적이라면 훨씬 더 쉽습니다. 그러나 죄송합니다. 모바일 디자이너로서 저는 px를 dp로 변환하는 것이 그 프로그램에서 쉬운 일이 아니기 때문에 포토샵을 거의 사용하지 않습니다.

수정 됨

이제 귀하의 질문을 더 잘 이해 한 것 같습니다. 찾고있는 값은이 사이트에서 확인하세요. https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

댓글

  • 죄송합니다. 게시물에 잘못된 공식을 썼기 때문에 변환에 올바른 공식을 사용했습니다. 제 질문은 파일의 크기가 값을 제대로 내보낼 수 있습니다. 그리고 Sketch에서는 사용할 수 없습니다. 운영 체제는 Linux입니다. Photoshop을 사용하려면 Linux에서 Photoshop을 실행할 수있는 Wine이라는 도구를 사용해야했습니다.

답변

여기에서는 주제가 아닐 수 있지만 화면 디자인에 Photoshop을 사용하지 않는 것이 좋습니다. Illustrator, Sketch 등과 같은 벡터 도구를 사용하십시오. 차이점은 나중에 디자인을 확장 할 수 있다는 것입니다. Photoshop에서 1x 크기로 작업하면 최신 Andriod 휴대폰에서 디자인이 끔찍하게 보입니다. 높은 ppi 화면에서 매끄럽게 보이게하려면 디자인을 최소 2 배, 더 나은 4 배로 설정해야합니다.

또한 벡터 도구로 만든 모든 자산은 나중에 다음과 같이 사용할 수 있습니다. 필요한 모든 크기에 대한 에셋입니다. Photoshop에서는 나중에 내보내기 위해 버튼, 아이콘 등을 분리하는 데 훨씬 더 많은 작업이 필요합니다.

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다