그래픽 전문가들이 자신의 작품을 인쇄물뿐만 아니라 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 / 05Adobe Photoshop에서 모바일 장치 용 이미지를 준비하는 방법
이 프로세스의 첫 번째 단계는 대상 장치 또는 장치를 파악하는 것입니다. 이 경우 너비가 375 픽셀, 높이가 667 픽셀 인 화면 영역이있는 iPhone 6을 타겟팅하게됩니다. 디자인은 이미지가 화면 너비가되도록 요구합니다.
사용 된 이미지는 스위스 베른 (Bern)의 베른 교회 대성당 (Bern Minster Cathedral)에서 촬영되었습니다. 포토샵에서 이미지가 열리면, 이미지> 이미지 크기를 선택하십시오. 이미지의 크기와 해상도를 확인하십시오. 분명한 것은 해상도가 300ppi이고 파일 크기가 23.4Mb 인 이미지는 3156 x 2592이며 작동하지 않습니다.
이미지 크기 대화 상자에서, 해상도를 100ppi로 줄이십시오.. 이미지 크기가 변경되기 때문에이 작업을 먼저 수행하십시오. 해상도 설정에서 너비를 375 픽셀로 변경하십시오. 이미지 크기 데이터를 확인하면 이미지가 23.4Mb에서 모바일 친화적 인 338k로 축소되었음을 알 수 있습니다. 확인을 클릭하십시오. 변경 내용을 적용하고 이미지 크기 대화 상자를 닫습니다.
계속 읽기
02 of 02Adobe 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 형식입니다. 언뜻보기에는 이것이 약간 위로 보이지만 이미지 스케일링의 황금률을 기억하십시오 : 스케일 업보다 스케일 다운하는 것이 좋습니다.
결론은 개발자와 긴밀하게 협력하고 프로토 타입 소프트웨어를 사용하여 디자인 의도를 보여주는 것입니다. 궁극적으로 결국 동일한 자산은 최종 제품을 준비 할 필요가 있으며 개발자는 자신보다 필요한 것을 더 잘 처리 할 수 있습니다.
