UXUI 디자인 입문 디자인툴 4-1

[수업 목표]

• 디자인 툴이 무엇이고 어떤 것들이 있는지 배웁니다.
• 인터페이스 디자인 툴에 대해 더 자세히 알아봅니다.
• 상황에 맞는 프로토타이핑 툴을 선택할 수 있습니다.

[목차]

01. 디자인 툴

02. 피그마, 스케치, XD

03. 프로토타이핑 툴

04. 피그마 프로토타이핑, 프로토파이, 프레이머 HW.

피그마로 간단한 프로토타입 만들어보기

 

디자인툴

 

디자인툴이란?

 

디자이너가 가질수있는 가장 큰 무기

 

디지털로 이미지를 만들거나 컴퓨터로 편집할수 있는 프로그램.

 

디자인툴에는 어떤것들이 있는지? 크게 4가지

 

UXUI디자이너는 인터페이스 디자인툴을 주로 사용

나머지는 협업시 사용할 수 있음.

 

인터페이스 디자인 툴

디지털 제품의 화면 인터페이스를 그리기 위해 사용하는 툴

주로 벡터방식

다양한 디바이스화면디자인할때 많은데, 한 화면을 여러크기로 늘이고 줄여도

문제가 없도록 하기 위함.

• 피그마
• 스케치
• XD

*비트맵과 벡터의 이해(툴 설명 끝나고 다시)

 

그래픽 디자인 툴

주로 비주얼 그래픽 이미지 편집시 사용

사진 편집 /일러스트 그려서 이미지 만듬.

• 포토샵(사진) 비트맵기반
• 일러스트레이터(일러스트,그래픽) 벡터기반

3D그래픽 디자인 툴

3차원의 그래픽을 만들 때 사용

• 시네마 4D(유료)
• 블렌더(무료)

모션 그래픽 디자인 툴

영상을 만들거나 촬영한 영상 편집(모션, 무비, 움직이는 영상)

• 프리미어
• 애프터이펙트

*비트맵과 벡터의 이해

 

두가지를 확실히 이해하고 있어야 결과물을 만들때 실수 하지 않는다.

 

비트맵을 말하기 위해서는 픽셀을 이해해야함.

 

픽셀은

격자형으로 되어있음 한칸한칸이 픽셀

디지털 이미지를 구성하는 최소 단위의 점.

비트 정보를 가진 픽셀이 모여 만들어진 이미지를 비트맵 이미지

카메라로 찍은 사진이나 컴퓨터상에서 주고받는 이미지의 대부분이 비트맵 이 미지예요.

 

픽셀 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교하게 이미지를 표현.

픽셀 수가 많을수록 품질이 좋아지지만, 용량 또한 커짐

이미지의 크기를 편집하면 원본 이미지의 픽셀 수가 변해 손상.

 

벡터

그래픽을 수학적인 함수 공식으로 표현.

점과점, 선과선, 면

선의 좌푯값

확장자 .svg, .eps, .ai

비트맵과 비교해서는 용량이 적다.

복잡한이미지를 벡터로 만들면... 파일용량커진다.

그래서 소수점 나오지않도록 정수로 표현하도록함

 

 팁! 엔지니어에게 이 확장자를 써도되는지 논의하고 쓰는게 좋다.