내가 진정으로 즐기지 않는 일러스트 레이터 작업의 한 측면이 있다면 그것은 라인 아트를 모바일 또는 웹 용 svg 이미지로 변환하는 것입니다. 내보내기> 다른 이름으로 내보내기 메뉴를 사용하여 잔인 할 정도로 정직하게 웹을위한 저장 기능 - 내보내기> 웹용으로 저장 -은 사용하기가 쉽지 않았습니다.
그림을 .svg 형식으로 변환하면이 워크 플로를 처음 접하는 사람들에게 여러 가지 .svg 형식이 있다는 사실은 말할 것도없고 혼란스러운 여러 가지 옵션을 제공하는 다소 위협적인 대화 상자가 열렸습니다. 체재. 이 워크 플로에 익숙해지면 큰 문제는 아니지만 학습 곡선이 가파르게되었습니다.
이는 2016 년 6 월에 Illustrator CC 2015 에 도입 된 새로운 화면 내보내기 기능 - 내보내기> 화면 내보내기 - 및 자산 내보내기 패널에서 모두 변경되었습니다.이 "방법"에서 두 가지 방법을 모두 사용하는 방법을 보여 드리겠습니다. 풍모. 시작하자.
01 of 04
Adobe Illustrator CC 2015에서 화면 내보내기에 액세스하는 방법
Illustrator 88 이후로 일러스트 레이터 사용자가되었습니다. Illustrator를 웹 및 모바일 인터페이스 및 프로젝트를위한 진지한 디자인 도구로 생각하지 않으려 고합니다.
아트 보드가 CS4 버전 2008에 도입되었을 때, 저는 그것이 응용 프로그램에 흥미로운 요소가되었다고 생각했습니다. Illustrator에서 지금은 더 이상 사용되지 않는 웹용 저장 기능을 처음 보았을 때 재미 있었지만 Adobe Fireworks의 동일한 기능이 Illustrator보다 웹 그래픽에 더 잘 맞았습니다.
모바일 우선 디자인의 출현과 모바일 프로젝트 용 SVG 이미지에 대한 의존도가 증가함에 따라 Illustrator는 SVG 용 "이동"도구였으며 UI 디자인 워크 플로에서 중요한 역할을했습니다.
모바일 용 자산을 내 보내야한다면 Sketch 3 및 Photoshop CC 2015를 선택할 수 있습니다. 일러스트 레이터는 2016 년 6 월에 정말 멋진 화면 내보내기 메뉴를 사용하여 목록에 들어 왔습니다.
위의 예에서 아이폰을 대상으로하는 두 개의 화면이 있고 "집"과 "장소"라는 별개의 대지 위에 있습니다. 그들을 출력하기 위해 파일> 내보내기> 화면 내보내기를 선택했습니다. 화면 내보내기 대화 상자가 열립니다.
02 of 04
화면 내보내기 대화 상자 사용 방법
대화 상자가 나타나면 선택할 각 대지를 클릭하십시오. 그런 다음 체크 표시가 나타납니다. 대지의 이름을 두 번 클릭하여 선택하고 변경할 수도 있습니다. 아트 보드의 이름이 "Artboard 1"이고 "Artboard 2"라는 이름이 솔직하게 알려지지 않았 으면 알 수있는 좋은 방법입니다.
선택 영역에는 세 가지 선택 사항이 있습니다.
- 모두 : 이 선택 사항은 문서의 각 대지를 별도의 파일로 내 보냅니다.
- 범위 : 내보낼 대지 범위를 입력하십시오. 이것은 대다수의 대지가있는 프로젝트에 특히 유용합니다.
- 전체 문서 :이 옵션을 선택하면 모든 대지가 단일 문서로 병합됩니다.
내보낼 영역에서 출력의 대상 폴더를 선택할 수 있습니다. 기본 폴더는 Illustrator 문서의 현재 위치입니다.
형식은 "마술이 일어나는 곳"입니다. iOS라는 아이콘이 있음을 알 수 있습니다. 안드로이드와 기어. 처음 두 가지는 자명하다. 기어 아이콘은 목록의 각 파일 형식을 최적화하는 방법을 제어 할 수있는 형식 설정을 엽니 다. 이러한 설정은 "형식 특정"이며 일단 변경 한 후 설정 저장 버튼을 클릭하면 변경 내용이 출력 할 형식에 적용됩니다.
iOS 또는 Android를 선택하면 해당 플랫폼에서 사용할 수있는 모든 해상도가 목록에 포함됩니다. iOS 목록에는 Retina 디스플레이 의 배율 요소 가 표시되며 Android 선택 항목은 실질적으로 모든 Android 기기를 수용 할 수있는 .75x에서 4x 범위의 배율을 갖습니다.
제거하려는 형식이 있으면 "x"를 클릭하십시오. 추가하려는 항목이 있으면 + 크기 조정 추가 버튼을 클릭하십시오.
작업이 끝나면 대지 내보내기 버튼을 클릭하면 프로세스가 완료 될 때 진행 상태 막대가 표시됩니다.
03 of 04
Adobe Illustrator CC 2015에서 화면 파일 내보내기를 사용합니다.
화면 내보내기 결과를 확인하면 Illustrator에서 각 화면이 병합 된 버전으로 출력되었음을 알 수 있습니다. 표면적으로, 이것은 특히 Illustrator가 모든 비트와 조각을 이미지로 내보낼 것으로 예상 할 때 약간 약해 보일 수 있습니다.
한 걸음 물러서서 잠시 생각해보십시오. Adobe Experience Design , Principleformac, Atomic.io , UXPin 또는 다른 프로토 타이핑 응용 프로그램과 같은 프로토 타입 응용 프로그램에서이 출력을 사용할 수 있으므로 실제로 필요한 것입니다.
이 예에서는 Adobe Experience Design (XD)을 사용하여 간단한 클릭 연결을 만듭니다. 이 과정의 첫 번째 단계는 Illustrator 인터페이스의 크기와 일치하는 iPhone 6 크기를 선택하는 것이 었습니다
인터페이스가 열리면 대지 도구를 선택하고 대지를 한 번 클릭하여 다른 대지를 추가했습니다. 그런 다음 "집"과 "장소"라는 이름으로 각 대지를 선택하고 Illustrator에서 아트 보드로 png 이미지를 가져 왔습니다.
클릭 스루에 대한 "핫스팟"을 만들기 위해 홈 스크린의 탐색 버튼 위에 사각형을 그린 다음 속성 패널에서 해당 속성의 선택을 취소하여 채우기 및 경계 값을 none으로 설정했습니다. 지역 정보 페이지의 뒤로 버튼을 사용하여 동일한 작업을 수행했습니다.
상호 작용을 추가하기 위해 프로토 타입 모드를 선택한 다음 "핫스팟"을 클릭했습니다. 그런 다음 화살표 (와이어라고 함)를 장소 페이지로 드래그하고 장소의 전환 타겟, 왼쪽으로 이동하는 모션, 약화 할 여유 및 0.6 초로의 전환 지속 시간을 설정합니다.
장소 페이지의 핫스팟으로이 단계를 반복했습니다. 유일한 차이점은 전환이 밀어 내기로 설정되었다는 것입니다. 재생 버튼을 클릭했을 때 프로토 타입을 테스트했습니다.
04 04
Adobe Illustrator CC 2015에서 내보내기 자산 패널을 사용하는 방법
Save for Screens 메뉴와 함께 Adobe는 UI 디자인 워크 플로에서 엄청난 문제점을 제거한 Asset Export라는 새로운 패널을 추가했습니다.
고통의 포인트는 아이콘이었다. 일러스트 레이터는 훌륭한 벡터 드로잉 응용 프로그램이지만 출력하려면 40 개 또는 50 개의 페이지가 필요한 페이지에 10 개의 아이콘이 있다고 가정 해 봅니다. 각 페이지는 SVG 이미지로 저장됩니다. 이것은 필연적으로 SVG 패널을 연속적으로 방문하여 평상시보다 더 많은 시간을 필요로했습니다. 이 고통 점은 이제 과거의 일입니다.
이 새 패널은 Window> Asset Export에서 찾을 수 있습니다. 패널이 열리면 SVG 또는 다른 형식으로 변환 할 애셋을 선택하고 패널로 드래그합니다. 마우스를 놓으면 애셋의 미리보기 이미지가 패널에 추가됩니다. 자산의 이름을 지정하십시오. 작업이 끝날 때까지 객체를 패널로 드래그하십시오.
각 항목 선택 내보내기 설정 영역에서 Shift 키를 누른 상태에서 각 항목을 클릭하여 모두 선택하십시오. 형식을 선택하십시오 -이 예에서는 SVG-를 선택하고 내보내기 버튼을 클릭하십시오. 선택한 항목은 Illustrator 파일과 동일한 위치에 SVG 파일로 출력됩니다.
이 전체 프로세스가 더 깔끔 해지면 자산 내보내기 패널을 사용할 필요가 없습니다. 패널 하단의 Save for Screens 버튼을 클릭하면 대화 상자가 열립니다.
반대로 화면 저장 패널에서 자산 탭을 클릭하여 자산 내보내기 패널에 액세스 할 수 있습니다. 예를 들어 아트 보드에 사용자 정의 아이콘이있는 경우 화면 저장 대화 상자에서 자산 내보내기 패널을 열고 해당 항목을 자산 내보내기 패널로 드래그 할 수 있습니다.