iPad 또는 iPhone에서 Adobe Comp CC를 사용하여 인쇄, 웹 또는 모바일용 레이아웃을 신속하게 디자인할 수 있습니다. Comp를 사용하여 어디에서나 레이아웃을 만들고 데스크탑에서 레이아웃 디자인을 완성합니다.
Typekit 이름이 Adobe Fonts로 바뀌었습니다.
형식 선택
Comp CC를 실행한 다음 + 기호를 눌러 새로운 프로젝트를 만들고 웹, 모바일 또는 인쇄 프로젝트에 가장 적합한 형식을 선택합니다. 이 튜토리얼에서는 iPad(세로)를 선택합니다.
본 튜토리얼에 사용된 레이아웃을 만들어 보려면 Pigeon Scooter Library에 있는 에셋을 사용하십시오. Creative Cloud에 저장을 클릭하여 라이브러리를 자신의 계정에 복사하면 Comp CC에서 바로 에셋을 이용할 수 있습니다.
참고: 에셋을 복사하려면 Adobe ID로 Creative Cloud 계정에 로그인해야 합니다.
안내선 및 여백 설정
설정 > 눈금선 및 안내선 > 추가를 차례로 누릅니다.
화면 오른쪽 하단에 있는 격자 레이어에서 + 아이콘을 눌러 레이아웃에 열을 추가합니다.
안내선(T자) 아이콘을 누른 다음 가로 안내선 추가를 선택합니다. 새로운 안내선이 화면 상단에 표시됩니다. 새로운 안내선을 위 또는 아래로 드래그하여 페이지의 원하는 위치에 배치합니다. 안내선을 삭제하려면 x를 누릅니다.
완료를 눌러 레이아웃으로 돌아갑니다.
레이아웃 그리기
상자를 그리고 모서리 한 쪽에 원을 그리면 모서리가 둥근 직사각형이 만들어집니다. 이미지를 배치할 위치에 X를 그립니다. Comp는 그린 제스처를 개체로 변환합니다.
텍스트 한 줄을 만들려면 선 하나를 그린 다음 점을 추가합니다. 여러 줄의 텍스트를 만들려면 +를 그립니다. 텍스트 블록을 만들려면 몇 개의 선을 그린 다음 마지막 선 다음에 점을 추가합니다.
팁: 개체를 그리는 방법에 대한 자세한 내용을 살펴보려면 설정 아이콘 > 그리기 제스처 도움말을 누릅니다.
여러 개체 선택 및 정렬
이미지 자리 표시자를 눌러 선택한 다음 화면 하단에 있는 추가 옵션 아이콘을 누르고 복수 선택 을 선택합니다. 레이아웃에서 다른 두 개의 이미지 자리 표시자를 눌러 선택 항목에 추가하고 완료를 누릅니다.
화면 하단에 있는 맞춤 아이콘을 눌러 크기 맞추기를 선택한 다음 폭 및 높이 맞추기 아이콘을 누릅니다.
텍스트 편집
페이지 상단에 있는 텍스트 상자를 두 번 누른 다음 "INTRODUCING PIGEON"을 입력합니다. 키보드를 닫습니다. 텍스트 개체가 선택된 상태에서 화면을 눌러 키보드가 사라지면 텍스트 상자를 눌러 다시 선택합니다.
화면 하단에 있는 Text Format 아이콘을 누르고 텍스트를 가운데로 정렬합니다. 그런 다음 글꼴을 눌러 Typekit 글꼴 목록에서 원하는 글꼴을 선택합니다.
색상 아이콘을 누른 다음 텍스트 색상을 흰색으로 변경합니다. 레이아웃 상단에 있는 사각형을 선택하고 색상을 주황색으로 변경합니다.
팁: 글꼴 메뉴에서 추가를 누르면 Creative Cloud 멤버십에 포함되어 있는 1,000개 이상의 Typekit 글꼴을 이용할 수 있습니다. 데스크탑에서 Creative Cloud에 로그인하면 글꼴이 데스크탑과 동기화됩니다.
텍스트 스타일 복사
텍스트 스타일을 설정한 경우 레이아웃의 다른 텍스트 블록에 해당 스타일을 복사할 수 있습니다. 페이지의 하단에서 텍스트 블록을 선택합니다.
복사할 스타일이 포함되어 있는 텍스트 위에 대상을 그립니다. 그러면 텍스트 스타일이 선택된 모든 텍스트에 적용됩니다.
팁: 두 개 손가락으로 밀어 넘기면 실행이 취소됩니다. 세 개 손가락으로 왼쪽 또는 오른쪽으로 드래그하면 문서 작업 내역의 이전 또는 이후 단계로 이동합니다.
Creative Cloud Libraries의 그래픽 추가
이미지 자리 표시자를 누른 다음 화면 하단에 있는 그래픽 아이콘을 누릅니다.
Creative Cloud Libraries에서 전체 해상도 이미지를 사용하려면 내 라이브러리를 선택하고 Pigeon Assets 라이브러리를 선택합니다. 스쿠터를 타는 남자 이미지를 눌러 자리 표시자 프레임을 채웁니다. 이미지를 더 추가하려면 이 단계를 반복합니다.
또한 레이아웃에 벡터 그래픽을 추가할 수 있습니다. 화면 상단에 있는 그래픽 아이콘을 누릅니다. Pigeon Assets 라이브러리에서 Pigeon 로고, 재생 버튼 또는 기타 흰색 벡터 아이콘을 추가합니다.
Photoshop Fix에서 이미지 편집
Comp CC는 Adobe CreativeSync를 통해 Photoshop Mix 및 Photoshop Fix와 같은 다른 모바일 앱과 매끄럽게 연동되므로 Comp 레이아웃에서 즉시 업데이트되는 합성 이미지를 수정하거나 만들 수 있습니다.
스쿠터를 타는 남자 이미지를 누른 다음 여러 앱에서 편집 아이콘을 누릅니다. 연결 해제를 선택하면 라이브러리에 있는 원본 파일을 대체하지 않고도 그래픽을 편집할 수 있습니다 Photoshop Fix에서 복구를 선택합니다.
스팟 보정 툴을 사용하여 이미지 상단에 있는 작은 잡티를 제거합니다. 마지막으로 화면 상단에 있는 저장 후 Adobe Comp(으)로 돌아가기를 누릅니다.
개체 그룹화
레이아웃의 하단에 있는 여러 개의 텍스트 블록 위에 나선형을 그려 텍스트 블록을 선택합니다.
모든 텍스트 블록이 선택된 상태에서 그룹화 아이콘을 누릅니다. 텍스트 블록이 하나의 선택 항목으로 표시되면서 하나의 그룹에 포함되어 있음을 나타냅니다. 그룹화된 모든 텍스트를 움직여 페이지의 가운데에 배치합니다.
그룹 해제 아이콘을 누르면 개체의 그룹을 해제할 수 있습니다.
데스크탑으로 보내기
현재 진행 중인 레이아웃의 유형에 따라 다양한 데스크탑 애플리케이션으로 레이아웃을 보낼 수 있습니다.
- Illustrator로 보내기
- Photoshop으로 보내기
- InDesign으로 보내기
- Muse로 보내기
또한 Behance에서 진행 중인 레이아웃을 공유할 수 있습니다.
