- 스플래쉬 스크린 : 화면의 로딩 화면으로, 짧은 시간 반복적인 노출로 사용자에게 로고나 이미지를 각인시킬 수 있다.
- 첫 시작에는 하트와 하단 도형이 보이지 않다가 나중에 둘이 만나도록 하는 프로토타입을 주기 위해, 하트와 도형을 아트보드 밖으로 배치시켜준다. 이때 주의할 점은 화면 밖으로 아예 나가게 되면 XD에서 같은 객체로 인식할 수 없기 때문에 최소 1px 이상은 아트보드에 걸쳐 있어야 한다.
- 화면에 걸쳐져 있는 게 보일 수 있으니 불투명도를 100%로 준다.
완성 영상
[ 회원가입 ]
- 회원가입의 경우 사용자에게 입력을 요구하면 사용자는 이탈할 가능성이 높다. 그래서 최근에는 한 페이지에 한 카테고리의 정보를 입력 받거나 필수적 정보들과 선택적 정보들을 나누어 입력 받는 경우가 많다.
- Ctrl 1, 0을 눌러 100% 비율로 볼 것인지, 화면에 가득차게 볼 것인지 볼 수 있다.
- 아트보드의 이름은 더블클릭 후 변경 가능하고, 이름을 클릭하여 특정 아트보드를 선택할 수 있다.
- 좌측 툴바에서 돋보기 아이콘을 눌러 화면을 확대하거나, Alt 키를 눌러 축소할 수 있다.
Ctrl +, - 를 단축키를 눌러 확대나 축소하는 것도 가능하다.
- 스페이스바를 눌러 드래그 하여 손바닥 모양으로 화면을 움직일 수 있다.
- 좌측 툴바에서 아트보드 아이콘을 누르면 어도비XD 초기 화면에서 볼 수 없던 기타 아트보드들(겔럭시 화면, 탭 화면 등)도 볼 수 있다.
[ 레이어 이해하기 ]
- 좌측 하단에 레이어 아이콘을 누르면 아트보드 정보가 보여지고, 아트보드 왼쪽에 메모지 아이콘을 더블클릭하면 해당 하트보드에 생성되어 있는 레이어들이 보여진다.
- 레이어 위에 마우스를 올려놓으면 우측에 아이콘들이 보인다. 그리고 첫번째 아이콘을 누르면 '내보내기에 대해 표시' 옵션이 적용되는데, 이 옵션이 적용되지 않으면 나중에 외부에 공유했을 때 인터페이스의 구성요소는 보이지만 정보는 볼 수 없게 된다. 그렇기 때문에 습관적으로 클릭을 해주는 것이 좋다.
* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.
- 왜곡 툴을 사용하기 위해서는 상단에 Object - Envelop Distort 에 상단에 세개 옵션을 사용하면 된다.
Make with Warp: 곡선 형태로 변형
Make with Mesh : 줄과 선을 사용하여 망 형태로 변형(문자일 경우 면으로 속성을 바꾼 후 적용해야 가능하다)
Make with Top Object : 원하는 변형 형태를 위에 겹쳐놓고 적용하면 위에 겹쳐진 부분 형태로 변형할 수 있다.
- 텍스트의 경우 왜곡 속성이 제한될 수 있으므로 우클릭 후 Create Outlines 속성을 입혀 면으로 바꾸어준 뒤
좌측 툴바에서 여러가지 툴을 사용하여 변형할 수도 있다.
[ 왜곡 기능으로 볼록한 패키지 만들기 ]
- 툴바에서 Free Transform Tool 을 누르면 변형 관련된 위젯이 생성되는데, 여기에서 두번째 옵션은 원근으로 변형하는 툴이다(자주 사용하는 툴).
- 단축키를 사용해서 적용하려면 자유변형 툴을 들고 Ctrl Alt Shift를 모두 누른 채로 점을 드래그하여 적용할 수 있다.
[ 브러시 툴 ]
- 일러스트레이터에서의 브러시는 패스를 다양한 모양으로 표현할 때 사용한다.
- 브러시의 종류
1. 불규칙한 선두께를 표현하여 글씨나 카툰과 같은 그림 효과를 줄 수 있음
2. 오브젝트가 패스를 따라서 흩날림
3. 오브젝트가 패스를 따라서 변형됨(리본, 붓터치 등의 그림 효과)
4. 수채화 느낌
5. 등록한 패턴을 패스를 따라서 표현할 수 있음
- 펜 툴로 패스를 그리고 난 후 적용하면 디테일하게 표현할 수 있다.
- 브러시 패널 중 하단 우측 두번째 아이콘을 누르면 적용되어 있는 브러시의 속성을 변경할 수 있는 옵션창이 뜬다.
[ 브러시 툴로 엠블럼 그리기 ]
[ 블렌드 툴 ]
- 규칙적으로 오브젝트를 여러개 배치해야 할 경우 블렌드 툴을 사용하여 효율적으로 배치할 수 있다.
- 좌측 툴바에서 블렌드 툴을 더블클릭하면 옵션 창을 볼 수 있는데, 해당 속성에서 색상으로 연결할지, 개수로 연결할지, 거리로 연결할지 지정할 수 있다.
- 각 옵션에 따라서 다양한 효과를 적용할 수 있다.
- 직접 선택 툴을 누르고 Alt를 누른 채로 하나의 오브젝트를 선택하면 특정 하나의 오브젝트만 선택할 수 있고, 속성도 변형할 수 있다.
- Ctrl Y 를 눌러 윤곽선 보기로 보면 블렌드를 적용한 일직선만 보이게 되는데 상단 Object - Blend - Expand 를 누르면 면의 속성으로 변환을 할 수 있기 때문에 오브젝트들의 윤곽선을 볼 수 있다.
[ 블렌드 툴로 원근 문자 만들기 ]
- 문구와 테두리 적용: Create outlines, Offset Path 적용
- 블렌드 툴 설정창에서 옵션을 갯수로 연결하여 적용
- 중간중간 세부적인 수정은 Ctrl Y를 눌러 윤곽선을 보이게 하고 수정사항 적용
[ image trace 패널 ]
- 사진을 대고 그리기에 복잡한 오브젝트의 경우는 픽셀 속성을 팩터 속성으로 바꿔주는 기능을 활용한다. 하지만 파일 용량이 방대하게 커질 수 있으므로 자주 사용하지 않는 것이 좋다.
- 이미지 트레이스 설정창에서 mode는 3가지가 있다.
1. 보여지는 색상 그대로 오브젝트가 변환
2. 명도로 변환
3. 검은색과 흰색의 속성으로 변환(결과물 속성)
- Advanced 를 눌러 세부 속성을 추가적으로 적용할 수도 있다.
만약 이미지에서 특정 색상을 무시하고 싶다면(배경색과 같은) 속성창 하단에 Ignore Color 을 체크해주면 된다.
- 원하는 속성들을 적용한 후 그대로 오브젝트 속성으로 변환하고 싶다면 상단 Expand 버튼을 눌러야만 일러스트레이터에서 점과 패스로 이루어진 면으로 변환된다. 변환된 오브젝트는 모양을 바꾸거나 색상을 바꿀 수 있다.
[ 심벌 스프레이 ]
- 한 개의 오브젝트를 수십, 수백개를 생성할 때에 심벌 스프레이 툴을 사용하면 파일 크기 걱정 없이 효율적으로 구현할 수 있다.
- 우측 심벌 패널 하단 붓모양에서 여러가지의 심벌을 볼 수 있고, 흩날리는 효과를 주고 싶다면 좌측 패널에서 스프레이 툴을 사용하여 드래그 하여 생성하면 된다.
- 흩뿌린 심벌즈를 오브젝트 형식으로 만들어주려면 Symbols 패널 하단에 클립 모양을 눌러주면 된다.
- 좌측 스프레이 툴 종류들 중 하나를 적용하고 나서 적용된 효과의 반대 효과를 주고 싶다면 Alt를 누르며 클릭하면 된다.
심벌과 여러가지 툴을 사용하여 눈 그리기
[ 심벌 스프레이로 나무 그리기 ]
- 심벌과 스프레이 툴을 이용하여 나뭇잎을 흩뿌리다보면 배경 밖으로 나가버리는 부분이 생길 수 있다.
이럴 때에는 클립핑 마스크를 활용하여 적용하면 되는데 포토샵에서는 원하는 레이어의 가장 하위에 배치해야 했다면, 일러스트레이터에서는 가장 상위에 배치시켜야 한다.
- 전체 선택 툴을 사용하여 모두 선택한 후 우클릭 하여 Make Clipping Mask를 눌러 적용하면 된다.
수정을 할 때에는 다시 우클릭 후 Release 를 눌러 해제한 후 수정한다.
[ 원근감 격자 툴 ]
- 원근감 격자 툴을 선택하면 관련 그리드가 생성되는데 해당 그리드를 안 보이게 하고 싶다면 상단에 View - Perspective Grid - Hide Grid 를 눌러 없앨 수 있다.
- 원근감 격자 툴은 소실점을 세가지로 지정할 수도 있다.
- 오브젝트를 그릴 때에는 좌측 상단에 도형 아이콘이 어느 면이 선택되어 있는지 확인하고 그려야한다.
[ 불투명도 마스크 ]
- 먼저 불투명도를 적용할 병 오브젝트를 상하 반전으로 복사한 후 그림자로 지정할 병 오브젝트 위에 사각형을 그려 그레이디언트를 적용한다. 여기에서 보여질 부분은 흰색이고 가려질 부분은 검은색으로 적용할 수 있다. (포토샵의 레이어 마스크의 개념)
- 그리고 우측 패널에서 Transparency 를 눌러 불투명도를 적용할 수 있다. Make Mask 를 눌러 적용을 하면 옵션창에 병 오브젝트와 그레이디언트 사각형 오브젝트가 보이는데, 병은 우리가 현재 작업하고 있는 일반 작업창이고 그레이디언트가 마스크 창이다. 구분하는 데에 주의하자
- 그레이디언트가 있는 마스크 창을 선택한 후 좌측 툴바에서 그레이디언트 툴을 선택하나 후 보여지고 싶은 만큼 드래그 하여 적용할 수 있다.
- (주의) 마스크 창을 수정 완료했으면 반드시 다시 병 오브젝트가 있는 일반 작업창을 눌러 적용해주어야 한다. - 최종적으로 클리핑 마스크를 적용하여 저장한다.
[ effect 메뉴 ]
- Effect는 일러트스 Effect 와 포토샵 Effect 가 있는데 일러스트는 오브젝트 자체에 주는 효과이고 포토샵은 이미지에 적용되는 효과이다.
- Effect는 주로 Distort & Transform (자유롭게 모양 왜곡)과 Stylize (그림자 효과)를 자주 사용한다.
- 오브젝트에 최종적으로 효과를 적용을 하고 수정할 때에는 우측 Appearance 패널에서 Fx부분을 눌러 수정해야 한다.
- 최종 작업을 마친 상태에서 Ctrl Y 를 눌러 윤곽선을 확인해보면 효과를 적용한 것과 다르게 보이는데, 이것을 실제 속성으로 사용하고 싶다면 상단 Object - Expand Appearance 를 눌러 적용해야 한다. ( 그 뒤로는 수정할 수 없다 )
[ effect 메뉴로 날씨 캐릭터 그리기 ]
* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.
- Swatches: 자주 쓰는 색깔을 모아놓은 견본들이 있다. 하단 책 모양 아이콘을 눌러 라이브러리 공간에서 불러와서 쓸 수도 있고, 사각형 아이콘을 눌러 직접 등록도 가능하다. 하지만 새로 등록한 색상은 해당 작업창에서만 유효하다.
- Color: 직접 스펙트럼에서 색상을 선택하거나 CMYK 값을 조절하여 원하는 색상을 선택할 수 있다.
- Color Guide: 채색된 오브젝트를 선택을 하면 그와 어울리는 색 배합을 보여준다.
- 채색된 오브젝트 클릭하고 에딧-에딧컬러-리컬러아트 하면 선택된 색의 배합을 조금 더 자세하게 볼 수 있다.
[ 사탕 그리기 ]
오프셋 패스를 적용했을 때의 차이와 적용
- Object - Path - Offset Path 를 눌러 오브젝트를 일정 수치로 줄이거나 늘려서 복사할 수 있는 기능을 사용할 수 있다.
[ 그레이디언트 패널 ]
- 우측 패널에 Gradient 를 눌러 작업창을 확인해보면 Fill과 Stroke에 관련된 설정을 볼 수 있는데, 이때 실제로 제어할 수 있는 부분은 Fill 부분이라는 점을 주의하자.
- 컬러바 하단에 있는 핀을 더블클릭하면 스와치, 컬러 옵션으로 색상을 적용할 수 있다.
- 핀 컬러 복사는 Alt 누른 상태로 마우스로 드래그하여 복사한다.
- Type의 두번째에 있는 원형식의 그레이디언트는 중심을 변경할 때 좌측 툴바에서 그레이디언트 선택하고 원하는 포인트에서부터 드래그한다.
- 세번째에 있는 자유형 그레이디언트는 적용하면 레이어 안쪽에 망이 생기고 자유롭게 색에 대한 분포도를 변경할 수 있다.
[ 립스틱 그리기 ]
- 우측 컬러에서 잘 보면 그레이디언트로 들어와서 색상 적용한다.
[ 패턴 ]
- 같은 모양의 오브젝트를 여러개 복사하여 만들게 되면 수정하기도 어렵고 파일 용량도 커지기 때문에 패턴으로 등록하여 사용하는 것이 효율적이다.
- 우측 패널 Swatches을 눌러 첫번째 아이콘을 클릭한 후 패턴을 선택하여 적용한다.
- 패턴의 크기 조절을 할 때에는 전체선택 툴로 오브젝트를 선택하고 크기 조절 툴을 더블 클릭해서 하단 Oprions 중 오른쪽 옵션만 체크한 채로 적용하고, 회전할 때에도 동일하게 적용한다.
- 단축키를 활용하는 방법도 있다. 먼저 전체선택 툴로 오브젝트를 선택하고 크기 조절 툴 클릭 후 자판에 물결표시(~) 누르고 드래그 하여 크기를 조절 할 수 있다. 회전 툴도 동일하다.
- 패턴의 위치를 변경할 때에는 전체선택 툴로 선택하고 ~를 누른 채로 드래그 하면 되고 방향키로 위치 조절할 수 있다(Shift 키 활용).
- 패턴에 대한 색 적용은 전체 선택 툴로 오브젝트를 선택한 후 스와치 견본에서 적용한 패턴을 더블클릭하면 설정창이 나오고 패턴을 각각 선택해준 뒤 색상을 변경할 수도 있다.
[ 패턴 직접 만들고 등록하기 ]
- 패턴을 직접 만들고 등록하는 방법 중 하나는 오브젝트를 생성한 뒤 원하는 패턴의 모양으로 만들어준 후 반드시 최종적으로 면과 선의 속성을 해제시킨 사각형의 오브젝트로 묶어주어야 한다(여백이 계산되지 않기 때문에). 최종적으로 세개의 오브젝트(원 두개 사각형 하나)를 선택한 후 드래그 하여 스와치 패널에 끌어넣으면 된다.
- 버전이 업그레이드 된 후엔 원하는 모양의 오브젝트를 선택한 후 상단 Object - Patters - Make를 눌러 패턴을 적용할 수 있다. 간격과 배열도 변경이 가능하다. 그리고 상단에 화살표 아이콘 누르면 스와치 패널에 생성되는 것을 볼 수 있다.
- 항상 패턴을 오브젝트에 적용하려면 면 속성이 선택되어 있는지 확인해야 한다.
[ 노트 그리기 ]
* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.
작업창을 기준으로 할지 / 선택된 오브젝트를 기준으로 할지 / 특정 오브젝트를 기준으로 정할지 선택할 수 있다.
[ pathfinder 패널로 합치거나 나누기 ]
- 오브젝트 간에 연산을 적용하면 다양한 모형으로 적용할 수 있고, Pathfinder를 활용하면 더 빠르고 정확하게 도형을 그릴 수 있어 편하다.
- Pathfinder의 속성을 보면 Shape Modes는 무조건 오브젝트가 면일 때만 가능하고, Pathfinder는 적용하고 나면 그룹으로 묶이기 때문에 적용하고 나서 그룹을 해제해주어야 한다.
- 각 효과를 전부 적용해본 화면이다. (패스파인더 효과들 중 세번째 효과는 색상에 따라 합쳐진다)
[ 위의 두개로 바리게이트 그리기 ]
- 명령을 반복(Again)해서 사용할 때에는 단축키 Ctrl D를 눌러 사용한다.
- Ctrl D를 사용하여 직사각형 위에 생성한 직선을 반복 생성해준 후 Align을 사용하여 일정한 간격으로 배치한다.
- 그 후 패스파인더를 통해 각 도형들을 분리해주고 각각 색상을 지정해준다.
[ 회전 툴과 반전 툴 ]
- 회전 툴과 반전 툴은 중심점이 어디냐에 따라 작업하는 결과를 다르게 얻을 수 있다.
- 오브젝트를 선택한 후 회전 아이콘을 더블클릭하게 되면 설정창이 띄워지고 원하는 회전비율을 입력한다. 그리고 OK를 누르면 회전만 되지만 Copy를 누르면 추가 복사가 된다. 이 상태에서 명령 반복 단축키인 Ctrl D를 누르면 계속해서 회전하며 도형을 생성할 수 있다.
기준점에 따라 달라지는 도형
- 중심을 변경하고 싶다면 전체 선택 툴로 오브젝트를 선택한 후 Alt를 누른 채로 원하는 중심점을 선택해준다.
- 회전도 동일하다.
[ 크기 조절 툴과 기울기 툴, 변형 툴 ]
- 크기 조절 툴은 오브젝트의 크기를 조절할 때 적용된 선 두께에 대한 옵션을 설정할 수 있다.
옵션 창의 Scale Strokes & Effects를 체크하면 된다.
- 중심점을 변경하고 싶다면 위의 툴들과 동일한 방식으로 적용한다.
- 기울기 툴은 오브젝트를 전체 선택 툴로 선택한 후 Shift를 누르며 각을 조절하여 기울일 수 있다.
- 변형 툴은 패스를 선택한 후 드래그 하면 된다.
[ 안내선과 그리드 ]
- 안내선은 단축키 Ctrl R을 눌러 생성할 수 있다.
- 일러스트레이터의 안내선은 Path로 인식되므로 안내선을 잠궈놓아야 한다.
View - Guides - Lock Guides ( 단축키 Alt Ctrl ; )
하지만 부분적으로 안내선의 잠금을 해제하고 싶다면 선택 툴로 해당 가이드 선을 선택한 후 Ctrl Shift 더블클릭 Delete 해준다.
- 그리드는 View - Show Grid (단축키 Ctrl " ) 를 눌러 생성할 수 있다.
그리드의 크기와 비율은 환경설정( Ctrl K )에서 변경할 수 있다.
[ 회전 툴로 시계 그리기 ]
- 제자리에 계속해서 복사하고 붙혀넣고 싶다면 Ctrl C 후 단축키 Ctrl F(앞으로 복사) / CtrlB (뒤로 복사) 할 수 있다.
[ 반전 툴로 헤드폰 그리기 ]
* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.
