Dasha Hill

8-1. 에셋 내보내기작업한 파일을 디자이너와 개발자에게 공유할 수 있어야 한다.이때 잘 정리가 되어 있어야 하는 게 중요​ ​ common 사이트에서 복제해서 가져온 테마인데왼쪽 패널을 보면 카테고리 나누어서 이렇게 정리가 되어 있다.​공유를 할 때는 이런식으로 정리가 된 상태여야 한다는 것!​대부분 개발자들에게 위의 이미지처럼 디자인 요소들을 정리해서 보낼 수도 있지만직접적으로 이 페이지를 코딩하겠다는 의미로 작업을 해놓은 프레임을 내보내는 경우도 있다.​그럴 때는 프레임에서 내보낼 부분 선택해서 우측 패널 하단에 [Export]​(파일의 종류는 개발자와 상의하는 게 좋다.)​이렇게 내보내면 개별 파일이 내보내기 되어진다.​+ 버튼을 눌러서 다른 배수들도 동시에 export 할 수 있음​​공유시 파일..

7-6. UI 디자인 제작과 인터랙션 종합 실습[좌우 스크롤과 오버플로우 스크롤 차이]좌우스크롤은 완전히 넘겨야 이미지가 넘어가지만 오버플로우 스크롤은 당기고 아무데나 멈추면 그 자리 그대로 멈춰있음​[실습할 것]마우스 오버했을 때 어두워지는 기능화면 아래로 스크롤 했을 때 위로 올려주는 버튼맵 메뉴에 들어가서 지도를 자유롭게 마우스 이동할 수 있는 기능​플러그인 - Material Symbols 다운 ​ ​상단에 순서대로 list 아이콘 / 텍스트 / share 아이콘 / more 아이콘을 삽입​ ​7-5. 내비게이션 드로워 인터랙션에서 만들어 놓은 것을 수정해서 [Assets]에서 삽입하고아래에 텍스트 넣고 리포터 이미지와 이름이 들어갈 도형과 텍스트를 만든다.텍스트 색상은 777777, 도형과 텍스..

7-3. 캐러셀 인터랙션홈페이지 열었을 때 메인에 보이는 컨셉 이미지들이 좌우로 움직이는 영역을 캐러셀이라고 한다.​이렇게 도형을 넣고 회색 도형에 이미지를 넣어준다.프레임 4, 5는 프레임 3안에 들어갈 수 있도록 하위 프레임으로 넣어준다.양 사이드가 잘린다면 그건 우측 [Frame] 패널의 'Clip content'가 체크되어 있기 때문이미지들을 그룹화 해주고 프레임3을 2개 더 복제한다.​​한 이미지씩 담당하도록 만들어주는데 순서는 중앙, 왼쪽, 오른쪽 이미지 순, 양 옆 간격은 40으로 해주었다.그리고 안에 이미지 그룹을 옮기면서 또 이미지가 프레임에서 탈출하는데 그것도 다시 하위 목록으로 잡아줘야 한다.각 프레임의 이름도 바꿔주었다.​​페이지네이션(밑에 점 세 개)도 만들어줬고, 한 프레임에서 ..

Chapter 7. 프로토타입7-1. 인터렉티브 컴포넌트 스위치 인터랙션프레임에서 프레임으로, 오브젝트에서 오브젝트로 프로토타입을 줄 수 있음프로토타입 적용할 대상 선택 후 우측 상단에 있는 [Prototype]만 눌러도 적용이 됨이렇게 점이 생기면서 끌어당기면 화살표가 생기면서 다른 대상이랑 이어짐그러면 [Interaction details] 옵션 창이 자동으로 뜸[Navigate to]는 화면을 이동시키지 않고 프레임을 찾을 수 있도록 하는 기능[Animation] 방식도 다양한 옵션을 가지고 있음​트리거 옵션들​프레임을 누르면 생기는 우측에 있는 미리보기 기능초기에 프레임으로 설정했던 같은 기종으로 보는 게 좋음옵션들 설정하고 상단의 [Play] 버튼 누르면 됨​​​​  이렇게 인터렉션 해놓은 상태..

5-5. 레이아웃 그리드​두꺼운 선 안에 있는 칸의 개수는 8개 = 8dp​8dp 그리드 만들기 이렇게 1px의 그리드 하나와 8px 그리드를 겹쳐주면​이렇게 보인다!​시스템 아이콘은 이 위에다 작업하는 게 좋다고 함​​레이아웃 그리드의 옵션​마진: 화면의 좌우에 생기는 여백거터: 컬럼과 컬럼 사이에 생기는 여백의 공간모바일 환경 - 컬럼: 4 마진: 16, 거터: 16 (원하는 대로) 데스크탑 환경 - 컬럼: 12, 마진: 200(넓은 화면일수록 많이 줘야 함), 거터: 28 (마진 넓을수록 거터값도 많아져야 함)​우측의 그리드 위에 도형을 놓으면 색을 명확히 알 수가 없음그래서 거터의 값을 없앤 좌측의 그리드 스타일도 새롭게 생성해서 작업​ Grid Calculator by Nicolaj Kirkga..

4-2. 도형과 이펙트[Effect] 종류Inner shadow: 내부 그림자Drop shadow: 외부 그림자Layer blur: 레이어 가장자리 부드럽게Background blur: 레이어 뒤의 배경만 부드럽게​옵션 수정은 effect 별 아이콘 누르면 옵션 창이 뜸효과의 위치나 범위, 정도, 색상, 불투명도 수정할 수 있음우측 + 버튼을 통해 겹쳐서 효과 적용할 수 있음효과도 스타일 저장 가능​[스타일 및 텍스트 속성 복제하기]: 복제하고자 하는 스타일 또는 텍스트 낱개로 ctrl + alt + C, ctrl + alt + V​4-4. 이미지와 플러그인이미지 불러오기: [Shape 툴] - Place Image = ctrl + shift + K드래그해서 가져올 시 shift 눌러야 원본 비율 그대로..

Chapter 1. Figma 소개와 설치피그마는 UX, UI 디자인, 웹 사이트 디자인, 프로토타이핑 등 다양한 디자인 작업 지원UX 리서치, 유저 플로우 제작, 아이디어 수립, 브레인스토밍을 목적으로 하는 기획 단계에서도 활용 가능한 피그젬 파일이 있음하나의 파일에 여러 명이 함께 수정 가능아래 링크에서 다운로드 가능!​ www.figma.comwww.figma.comChapter 2. Figma 인터페이스커뮤니티에서 소스 가져와서 사용할 수도 있음​인터페이스Quick Actions 자주 사용하는 기능 - 검색할 수 있음​[툴 바]순서대로 문자 툴, 리소스 툴, 핸드 툴, 코멘트 툴​[레이어 패널]레이어 패널 - [assets]에서 컴포넌트 볼 수 있음우측 상단 책 모양 -> '팀 라이브러리'​[캔버..

06 일러스트레이터에서 문자를 입력하고 다양하게 표현하기 (1) 문자를 입력하고 수정하기 좌측 툴바- 문자 툴 작업창 활성화T자 아이콘 작업창에 클릭- ctrl 누르면서 작업창 누르면 커서 해지작업창 두번째 아이콘은 면이 지정되어있어야 사용 가능 (지정된 영역 안에 문자 입력하겠다는 뜻)세번째 아이콘은 패스를 따라서 문자 입력되는 툴 (패스 위 클릭 후 입력) 문자는 점과 선의 속성이 아니라 채색할 수 없음타입- create outline (윤곽선 만들기) 통해서 문자를 점과 패스의 속성으로 변환해줘야 함!변환 후 직접 선택툴로 한 글자만 선택 후 글자 모양/기울기 수정 가능 작업창 맨 마지막 아이콘 (문자 손질 툴)로 위에 처럼 편하게 수정 가능 ctrl k 에서 타입 - 필 뉴타입 체크 해지  입력된..

05 일러스트레이터에서 채색하는 다양한 방법 익히기 (1) 채색하는 다양한 패널과 메뉴들 새 창 열기- 채색한 사각형 오브젝트 만들기- fill 부분 더블 클릭해서 컬러피커 오픈-색상 변경 (명도/채도 조절)윈도우- 스와치 패널 (우측 패널에도 있음)- 우측 상단 미디엄으로 변경해서 좀 더 크게 보기스와치 패널- 사각형 안 플러스 아이콘 클릭- 색상 저장해서 쓸 수 있음 (새로운 작업창에서는 사용할 수 없음)컬러 패널 (윈도우나 우측 패널) - 우측 상단 아이콘-쇼 옵션가끔 일러스트에서 색상 적용 안 되고 흑백으로 보이는 경우- 컬러패널- 우측 상단 옵션에서 rgb나 cmyk로 변경컬러 가이드- 채색된 오브젝트 선택하면 어울리는 색 보여줌 채색된 오브젝트 색상 수정채색된 오브젝트 클릭-edit- edit..

04 일러스트레이터에서 효율적인 작업을 위한 다양한 기능 살펴보기 (1) align 패널로 여러 개의 오브젝트를 정렬하기윈도우에서 얼라인 눌러도 되고 인터페이스 설정에서 우측 패널에 설정해 놓았기 때문에 거기서 찾아도 됨얼라인은 임의의 선을 통해 간격을 정렬하는 것.전체선택툴로 도형 다중선택해서 얼라인 패널에서 좌/우측 정렬 등 여러가지 정렬 가능얼라인 패널에서 두번 째 줄은 어느 선(위의 도형인지)을 기준으로 정렬하느냐얼라인 패널에서 align to 정렬 기준을 흰색 작업 창 기준으로 하면 작업창에 맞춰 짐(보통은 2번째거 씀)오브젝트 다중선택 한 후 얼라인 투에서 마지막 거 클릭하면 마지막 것 중심으로 맞춰짐 (2) pathfinder 패널로 오브젝트를 합치거나 나누기윈도우-패스파인더 또는 우측 패널..