모바일 용 이미징이 항상 그런 것처럼 보이지는 않습니다.
그래픽 전문가 들이 자신의 작품을 인쇄물뿐만 아니라 iPhone, iPad, Android 기기 및 Android 태블릿과 같은 기기에서도 볼 수있게되는 것이 점차 보편화되고 있습니다. 표면적으로 이것은 우리의 작품이 디지털 화면으로 확대되는 미디어로서 "좋은 것"으로 간주 될 수 있습니다. 단점은 깎아 지른 수의 화면과 혼란스러운 화면 해상도입니다. CMYK 형식의 300 dpi 해상도 TIFF 이미지 가 표준이 된 시대에 무슨 일이 있었는지 궁금한 노련한 전문가의 말을 듣는 것은 드문 일이 아닙니다. 오, 좋은 옛날!
그 시절은 끝났어. 우리는 이제 200 x 200 이미지가 한 장치에서 잘 보이지만 다른 크기에서는 1/4 크기로 표시되고 또 다른 크기에서는 3/4 크기로 나타납니다. 모든 장치 제조업체가 경쟁 업체보다 더 많은 픽셀을 화면에 잼 으려고 할 때 "해상도 암 레이스 (Resolution Arms Race)"가 실제로 내려집니다.
이것은 우리가 "접미사의 부상"이라고 부를 것입니다. 접미사는 @ 2x, @ 3x와 같은 이미지입니다. 예를 들어 본질적으로 올바른 이미지를 올바른 장치의 올바른 위치에 배치합니다. 그렇다면 더 나아질 것입니다.
우리의 많은 작업에는 아이콘 작업이 포함되며, Flat 디자인 무브먼트의 등장과 함께 이러한 것들은 Illustrator 및 Sketch와 같은 벡터 드로잉 응용 프로그램에서 만들어집니다. 문제는 장치가 단순히 .ai 또는 .eps 파일을 렌더링 할 수 없다는 것입니다. Scalable Vector Graphics 로 변환해야하며 아이콘을 만드는 데 사용되는 응용 프로그램에 따라 SVG 옵션이 없을 수도 있습니다.
그렇다면 더 나아질 것입니다.
이미지와 아이콘이 장치에 쏟아져 나오기 전에 어셈블리 포인트가되는 새로운 종류의 소프트웨어 인 프로토 타이핑 응용 프로그램이 있으며 특성도 있습니다.
이 자습서에서는 Photoshop과 Sketch간에 그래픽을 이동하고 Adobe Experience Design 을 사용하여 아이디어와 최종 배포 사이의 몇 가지 문제점을 설명합니다. 시작하자.
01 / 05
Adobe Photoshop에서 모바일 장치 용 이미지를 준비하는 방법
이 프로세스의 첫 번째 단계는 대상 장치 또는 장치를 파악하는 것입니다. 이 경우 너비가 375 픽셀, 높이가 667 픽셀 인 화면 영역이있는 iPhone 6을 타겟팅하게됩니다. 디자인은 이미지가 화면 너비가되도록 요구합니다.
사용 된 이미지는 스위스 베른 (Bern)의 베른 교회 대성당 (Bern Minster Cathedral)에서 촬영되었습니다. Photoshop에서 이미지가 열리면 이미지> 이미지 크기 를 선택하여 이미지의 크기 와 해상도를 확인합니다. 분명한 것은 해상도가 300ppi이고 파일 크기가 23.4Mb 인 이미지는 3156 x 2592이며 작동하지 않습니다.
이미지 크기 대화 상자 에서 해상도를 100ppi로 줄 입니다. 이미지 크기가 변경되기 때문에이 작업을 먼저 수행하십시오. 해상도 설정에서 너비를 375 픽셀로 변경하십시오. 이미지 크기 데이터를 확인하면 이미지가 23.4Mb에서 모바일 친화적 인 338k로 축소되었음을 알 수 있습니다. 확인 을 클릭 하여 변경 내용을 적용하고 이미지 크기 대화 상자를 닫습니다.
02 of 02
Adobe Photoshop에서 "다른 이름으로 내보내기 ..."대화 상자 사용 방법
이미지를 내보낼 준비가되면 "내보내기> 다른 이름으로 내보내기 ..." 를 선택 하여 다른 이름으로 내보내기 대화 상자를 엽니 다.
이 대화 상자는 최근 Photoshop에 추가되었으며 수년 동안 사용해 온 "웹용으로 저장"대화 상자를 대체합니다. 여전히 필요한 경우 내보내기 팝업에서 찾을 수 있습니다. 이것은 명백한 이유로 현재 "Export For Web (Legacy)"로 알려져 있습니다. 이 대화 상자를 처음 방문하는 경우 간단한 둘러보기를 수행하십시오.
- 크기 : 이 열은 이미지의 출력 크기를 설정합니다. 이 영역의 흥미로운 점은 이미지를 확대 할 수 있지만 장치의 화면에 엄청난 수의 픽셀이 있기 때문에 이미지가 장치에 "흐릿한"것처럼 보이지 않습니다.
- 1X : 이것을 누르고 있으면 여러 가지 크기가 표시됩니다. 1x, 2x 및 3x 범주는 전통적으로 Apple의 Hi Dpi 장치와 관련이 있으며 일부 장치는 Android 장치 용 이미지를 준비합니다.
- 접미사 : 이 선택 사항은 크기를 표시하지만 @ 2x로 표시되거나 크기가 선택됩니다. 이 접미사가 이미지 이름에 추가됩니다.
- + 기호 : 다양한 크기의 출력을 추가하려면이 옵션을 클릭하십시오. 이 경우 두 번 클릭하고 팝업에서 2x 및 3x를 선택하십시오. 이것은 실질적으로 모든 iOS 장치를 포함합니다.
- 휴지통 : 이것을 클릭하면 라인업에서 선택 항목이 제거됩니다.
- 파일 설정 : 이미지에 가장 적합한 형식 (jpg, png, gif 또는 svg)을 선택하십시오. 파일 크기가 우려되면 품질 설정을 줄일 수도 있습니다.
- 이미지 크기 : 이미지 의 물리적 크기를 변경할 수 있습니다.
- 캔버스 크기 : 이미지 캔버스의 실제 크기를 변경할 수 있습니다.
- 메타 데이터 : 저작권 및 연락처 정보를 이미지의 메타 데이터에 추가 할 수 있습니다.
작업이 끝나면 모두 내보내기 버튼을 클릭하십시오. 이미지를 넣을 위치를 묻는 메시지가 나타납니다. 개발할 좋은 습관은 새 폴더 버튼을 클릭하고 내 보낸 이미지를 저장할 폴더를 만드는 것입니다. 내보내기를 클릭하면 폴더에 이미지가 표시됩니다.
03 of 05
보헤미안 코딩에서 Sketch 3의 모바일 장치 용 이미지를 준비하는 방법
보헤미안 코딩 (Bohemian Coding)의 매킨토시 전용 애플리케이션 인 스케치 3 (Sketch 3)은 웹 및 앱 디자인에 중점을두고 UX 및 UI 디자이너들 사이에서 급속도로 부상하고있다. 사실 Photoshop은 여러면에서 Sketch와 함께 "따라 잡아야"하는 이상한 위치에 있습니다.
스케치에서 모바일 용 이미지를 준비하려면 대지에서 이미지를 선택 하고 속성 패널 아래쪽에있는 내보내기 가능 버튼을 클릭합니다 . 내보내기 대화 상자가 열립니다. + 기호를 클릭하여 2x 및 3x 버전을 추가하고 접미사를 추가하십시오. 사용할 수있는 형식은 PNG, JPG, TIF, PDF, EPS 및 SVG입니다. 이 경우 JPG를 선택하십시오. 내보내기 단추를 클릭 하고 대상을 지정하거나 내보낼 다양한 이미지를 저장할 폴더를 만듭니다.
04 / 05
세 가지 (또는 그 이상) 버전의 이미지를 만드는 이유
많은면에서 모바일 시장은 해결책의 "와일드 웨스트 (Wild West)"이며 하나의 크기는 모든 사람에게 맞지 않습니다. 위의 Adobe Experience Design의 예제에서 이미지는 2 개의 iPhone 6 대지 및 Android 장치 대지 위에 배치됩니다. 왼쪽의 1x 버전이 절반 크기 인 것처럼 보입니다. 이것은 이미지가 망막 스크린이있는 iPhone 6에 나타나는 방식입니다. 2x 버전은 완벽하게 적합하며 Android 버전은 화면에서 벗어납니다. 이미지의 크기를 조절하거나 이미지를 다른 크기의 Photoshop에서 내보내는 것이 좋습니다.
05/05
조기 테스트, 자주 테스트, 아무것도 신뢰하지 말고 아무도 신뢰하지 말고 특히 자신을 신뢰하십시오
이해해야 할 것은 이것이 공정의 시작에 불과하다는 것입니다. 가능한 한 많은 장치 에서 작업을 보는 것이 워크 플로의 중요한 부분으로 간주되어야합니다. 또한 앱 또는 모바일 웹 프로젝트 용 그래픽 애셋을 만드는 과정의 첫 걸음임을 알고 있어야합니다.
프로토 타이핑 애플리케이션을 사용하는 것은 고통 지점을 찾아내는 좋은 방법이지만 개발자가 사용하기 위해 동일한 애셋을 출력해야합니다. 대부분의 경우 아이콘을 비롯한 자산의 물리적 크기는 물리적으로 커지지 만 svg가 아니라 png 형식입니다. 언뜻보기에는 이것이 약간 위로 보이지만 이미지 스케일링의 황금률을 기억하십시오 : 스케일 업보다 스케일 다운하는 것이 좋습니다.
결론은 개발자와 긴밀하게 협력하고 프로토 타입 소프트웨어를 사용하여 디자인 의도를 보여주는 것입니다. 궁극적으로 결국 동일한 자산은 최종 제품을 준비 할 필요가 있으며 개발자는 자신보다 필요한 것을 더 잘 처리 할 수 있습니다.