그래픽 디자인에서 모든 것의 근간이 되는 기초 개념인 레이어입니다. 레이어는 필름을 여러장 겹친 것이라 생각하면 됩니다. 각 레이어는 투명도를 가져 뒤에 있는 레이어까지 볼 수 있습니다. 레이어를 이용해 여러 이미지를 합쳐 새로운 이미지를 만들 수 있습니다.
걸릴 시간
- 30분
이 수업이 끝나면
- 그래픽 디자인의 기초인 레이어를 다룰 수 있게 됩니다.
- 간단한 도형을 만들고 크기를 바꾸고 정렬할 수 있게 됩니다.
레이어 넣기
상단 툴바에서 도형 모양을 클릭하고 원하는 도형을 선택하고 캔버스 위에서 클릭-드래그하면 도형이 추가됩니다. 동일한 방식으로 아트보드, 도형, 벡터, 텍스트 등을 캔버스에 추가할 수 있습니다.
- 모양 도구 선택 –
키보드 Ror상단 도구 탭 선택 - 모양 레이어 만들기 –
캔버스에서 클릭&드래그 - 비율이 유지되는 레이어 만들기 –
Shift+클릭&드래그 - 중앙을 기준으로 레이어 만들기 –
Option(Alt)+클릭&드래그
레이어 선택
캔버스에서 클릭해서 선택하거나 왼쪽 패널의 레이어 리스트에서 선택할 수 있습니다.
- 여러 레이어 선택 –
Shift+클릭 - 그룹 레이어 안의 세부 레이어 선택 –
Command(Ctrl)+클릭 - 겹친 레이어 중 뒤에 있는 레이어 선택 –
겹친 영역 우클릭/select layer
그룹 레이어 안에 있는 요소 선택 – Command(Ctrl) + 클릭
겹친 레이어 중 뒤에 있는 레이어 선택 – 겹친 영역 우클릭/select layer
레이어 이동과 복사
레이어는 클릭&드래그해 위치를 바꿀 수 있습니다. 클릭을 떼면 레이어가 해당 위치로 이동합니다.옮기는 위치 근처에 다른 레이어가 있으면 자동으로 정렬을 가이드합니다.
- 레이어 이동 –
레이어 클릭&드래그 - 레이어 복사 –
Option(Alt)+레이어 클릭&드래그 - 이전 복사 반복 –
Command(Ctrl)+D
레이어 크기 변경
레이어를 선택하면 크기를 조절할 수 있습니다. 우측 패널의 숫자를 넣어 정교하게 변경할 수도 있습니다. Scale 도구를 이용하면 전체 비율을 유지하면서 크기를 조절할 수 있습니다.
- 레이어 크기 변경 –
꼭지점 포인트 클릭&드래그 - 비율 유지하면서 변경 –
Shift+꼭지점 포인트 클릭&드래그 - 중앙 기준으로 변경 –
Option(Alt)+꼭지점 포인트 클릭&드래그 - 세부 요소 비율 유지하면서 변경 –
레이어 선택+키보드 K+꼭지점 포인트 클릭&드래그
클릭+드래그 크기 조절
비율을 유지하는 scale 기능
레이어 정렬하기
여러 레이어를 정렬할 수 있습니다. 위, 중간, 아래를 기준으로 정렬하고 정렬되는 수치도 정할 수 있습니다.
숫자를 조절해 구체적인 간격을 지정할 수 있습니다.
레이어 상세 정보
레이어를 선택하면 우측 패널에 자세한 정보가 표시됩니다. 캔버스나 레이어 리스트에서 선택한 레이어의 자세한 속성을 제어하기 위한 영역입니다. 해당 레이어의 위치, 크기, 색, 선, 그림자 등을 자세한 수치로 제어할 수 있습니다. 선택하는 요소의 성격에 따라 표시되는 내용이 달라지고 한개를 선택했을 때, 여러 개를 선택했을 때, 그룹을 선택했을 때 등 상태가 다를 때도 표시되는 내용이 달라집니다.
레이어 1개 선택, 2개 선택, 그룹 레이어, 프레임별로 inspector가 달라집니다.
그룹 레이어
여러 레이어를 하나로 묶을 수 있습니다. 이것을 그룹 레이어라고 부릅니다. 레이어를 그룹으로 묶으면 개별 레이어를 항상 선택하지 않아도 됩니다. 그룹 레이어로 묶였을 때만 가능한 기능도 있습니다. 묶인 레이어의 전체 크기를 조절할 때 세부 요소들이 고정되는 규칙, 묶인 레이어의 세부 요소의 크기가 변하면 자동으로 여백을 만들어주는 규칙을 정할 수 있습니다.
*아래 3가지는 고급 기술로 이번 강의에서는 쓰지 않습니다. 어떤 기능이 있는지 알아두기만 하세요.
제한 Constraint
레이어의 비율이나 위치를 고정할 수 있습니다. 상위 레이어를 선택해 크기를 조절할 때 하위 레이어는 어떻게 변하는지 규칙을 정하는 것입니다. 하위 레이어의 비율이나 위치를 정할 수 있습니다.
오토 레이아웃 Auto Layout
레이어 여백을 자동으로 적용할 수 있습니다. 하위 레이어가 글자일 경우 글자를 치는만큼 자동으로 상위 레이어에 여백이 적용됩니다. 버튼 같은 것을 만들 때 유용합니다.