Part 3.피보나치수열 / 피보나치수열을 응용한 Icon 디자인 작업

Part 3.피보나치수열 / 피보나치수열을 응용한 Icon 디자인 작업

Part 3.피보나치수열 / 피보나치수열을 응용한 Icon 디자인 작업
Category
Share Story

드디어 마지막 시간이 되었네요.
2탄 내용을 정리하면서 함께 작업해서 그런지 빠른 업로드를 할 수 있게되었습니다.^^

이 번에는 지금까지 정립한 개념을 바탕으로 피보나치 수열을 응용한 Icon 작업을 해 보았습니다.
요즘 장마철이라 그런지 왠지 날씨 아이콘이 그리고 싶어져 하기와 같이 피보나치 수열이 응용된 5개의 아이콘을 제작 해 보았답니다.

fibonacci03_01

이 아이콘은 그 동안 스터디를 진행하면서 제 나름의 응용 방법 과 룰 설정방법, 작업 순서..등을 확립하게 되어서 그런지 제작에 그리 오랜 시간이 들지는 않았습니다.

 

이제부터 제가 확립한 순서를 토대로 어떻게 제작하였는지 공유하겠습니다. (앞으로 얘기될 방법은 저만의 해석 방식이지 정답은 아니랍니다.^^)

작업 순서는 크게 4단계로 잡아보았습니다.

 

1. 전체 디자인 컨셉에 맞도록 아이디어 스케치를 진행한다.(아이콘)

fibonacci03_02

[1단계] 스케치 단계입니다.

우선은 피보나치 수열을 염두 해 두지 않은 상태에서 디자인 컨셉에 맞도록 아이콘의 형태와 디자인을 스케치합니다.

 

 

2. 확정된 아이콘의 전체 사이즈(고정값)를 정한다.

fibonacci03_03

[2단계] 컴퓨터 작업 전 아이콘 사이즈 확정 단계입니다.
제작하고자 하는 아이콘의 전체(외곽) 사이즈를 정하는 단계로 아이콘의 제작 갯수와는 관계없이 모두 동일하게 적용되는 고정값입니다.
저는 이번 날씨 아이콘에 105×105 로 정하였습니다.

 

 

3. 사이즈를 기준(최대값)으로 피보나치수열에 맞도록 숫자를 나열한다.

fibonacci03_04

[3단계] 피보나치 수열의 값을 구하는 단계입니다.

① 최대값을 기준으로 1:0.618 비율을 먼저 구합니다.
예시) 105 최대값을 자동계산 시 105 : 65 가 됩니다.
② 65 을 정사각형으로 나누며 계속 분할 시켜줍니다.
③ 이후 나오는 값을 기준으로 계속해서 정사각형으로 분할 해주면 마지막 최소값을 확인 할 수 있습니다.

* 소수점 반올림 및 버림으로 최대값 과 최소값의 비율이 맞지 않는 경우가 있습니다.
이럴 때는 최소값이 정수로 떨어질 수 있도록 최대값을 다시 맞춰줍니다.

 

 

4. 추출된 피보나치 수열 값으로 아이콘에 배치한다. (*제작 초기 단계에 룰을 정하면 좋습니다.)

(아이콘_비)

fibonacci03_05

(아이콘_눈)

fibonacci03_06

[Rule] 1. 선의 두께는 5px 로 진행한다.
2. 상,좌,우 여백은 5px 로 하며 경우에 따라 꽉 차게 작업한다.
3. 구름이 들어 갈 경우 좌표값은 그대로 유지하며, 경우에 따라 위치, 사이즈가 변경되어야 할 경우 구름 형태는 유지한 채 작업한다.
4. 아이콘 특성 상 5px 이하의 사이즈가 필요 할 경우 3px 로 적용한다.

위와 같은 방법으로 만들어 보았습니다.
이 제작 방법과 룰은 작업자가 설정하기 나름이라는 것을 알아주세요.^^

 

감사합니다.

 

– 가치디자인그룹 KM Kim

[catlist name=”Open Project” numberposts=5 excerpt=”yes” pagination=”yes” excerpt_size=”0″ title_only=”yes“]