현주훈 2014.07.21 20:16 전체공개

효과적인 아이콘 디자인을 위한 7가지 원리

아이콘
디자인을
접하기
전에, 공부할
가치가
있는

가지
가이드라인들과
원칙들이
있습니다. 만약
여러분이
효과적인
아이콘
디자인을
만들려면, 대중, 사이즈, 단순화, 빛, 시점, 그리고
스타일
등의
이러한
전체적인
접근을
해야
합니다. 이
글은
여러분의
작업에
어울리고
여러분의
디자인
속에서
완벽하게
맞는
아이콘을
만들기
위한
좋은
출발점을
제공합니다.
1. 아이콘
디자인
전체적으로
접근하기
아이콘은
그래픽
시스템
내에

맞아야
합니다. 데스크톱
응용
프로그램이나

사이트를
위해
디자인되었다
할지라도, 아이콘은
작업과
조화롭게
작동해야

여러
그래픽
요소

하나입니다. 물론
아이콘을
통해
해당
로직을
설정하는
것도
포함합니다. 아이콘은
개별적으로

자신의
미적인
솔루션으로
평가될

있지만, 그들은
혼자
작동하지
않습니다. 여러분의
아이콘
디자인이
들어가서
사용될
그래픽
시스템과의
연관성을
평가해
보십시오. 전체적으로
함께
작동하면서, 아이콘
주변으로
부터

아이콘과의
확실한
차이를
만들어야
합니다.
Turbo Milk 저자 Yegor Gilyov가 Designing an iconic language의
글에서
언급하길,
"당신이
여러
개의
아이콘을
그릴
필요가
있으면
바로
그림
그리는
작업을
진행하기
전에
아이콘의
전체
세트에
대한
이미지들을
먼저
생각해야
합니다."
이것이
아이콘
디자인에
있어서

가지
중요한
요점

하나입니다. 그는
아이콘의
전체
세트를
처음부터
전체적으로
작업하는
것에
대한
계획을
실패하면, 재설계가
불가피하고, 거대한
시간
낭비를
초래하기
때문에
이를
위해
계속
설명하고
있습니다.
 2. 여러분의
대상을
고려하기
여러분이
만약
소규모
회사를
위한
인트라넷을
위한
디자인을
하는

보다
국제적으로
팔리는
제품을
위한
디자인을
하고
있는
경우에는

다른
고려사항을
가지게
됩니다.
아이콘을
만들
때는
문화적
고려가
중요합니다. 여러분의
디자인에
일반적인
요소로
사용될
기호들의
의미가
달라질
수도
있습니다.
Turbo Milk에 '아이콘
디자인의 10가지
실수' 라고
일컷는

다른
훌륭한
글에서는, 몇
가지
명확한
사례를
들어
많은
아이콘
디자인이
잘못
진행되고
있는
곳을
지적해내고
있습니다. 그들은 7가지
글의
요점을
통해
국가별

사회적
특성을
논의합니다.
" 항상
여러분의
아이콘이
사용되어야


상황을
계산할
필요가
있습니다. 여기서
중요한
부분은
나라별
특성입니다. 문화
전통, 환경과
제스처는
나라마다
크게
다를

있습니다. "
그들은
어떻게
사서함(Mail Boxes)이
국가
간에
크게
다른지
예제를
제공하면서
설명합니다. 애플(Apple)은
그들의
휴먼
인터페이스
가이드라인
속에서도
똑같은
예제를
사용합니다.
따라서

국가
지역의
사서함
디자인을
바탕으로
국제적인
아이콘을
디자인하는
것은
해서는
안될
나쁜
아이디어의
구체적인
예입니다. 그들은
애플의
메일
아이콘이
스탬프로써
문화적
보편성을
가지고
얼마나


인식되는지를
지적합니다.
3. 특정한
곳에
사용될
아이콘의
사이즈
디자인
하기
만약
여러분이
일러스트레이터로
여러분의
아이콘을
벡터로
만들
경우, 어떤
크기라도
디자인을
확대
축소해서
사용하려고
하는
내재하는
유혹이
존재하게
됩니다. 아이콘은
이렇게
작업하면
않됩니다. 512px에서
좋아
보이던
것이 16px에서는
흐린
얼룩
같이
보여집니다. 아이콘은
시작
점으로
사용되는
기본
디자인을
가지고
해야
하지만, 각각의
출력
크기에
맞는
자체적으로
최적화된
디자인을
가지고
있어야
합니다.
아이콘
디자인은
확장
가능한
솔루션
매체와
동일하지
않습니다. 이것은
포토샵이
다른
프로그램과
마찬가지로
좋은
솔루션이라는
이유

하나입니다. 일러스트레이터에서
아이콘을
만드는
디자이너
경우, 그들은
여전히
포토샵에서
아이콘을
다듬거나, 일러스트레이터에서
직접
출력할
경우
자신의
아이콘이
작은
크기에도
좋아
보이게끔
부단한
노력을
기울이게
됩니다. 그래서, 아이콘
디자인이
순전히
벡터
기반의
매체라는
믿음속에
빠지지
마십시요. 우리는
결국
픽셀로
출력하고
있습니다.
포토샵에는
또한
프로그램
사이에
똑같이
확대
축소


있는
작업
영역의
이점을
가져다


있는
벡터
도구와
마스크도
있습니다. 만약
여러분이
똑같이
일러스트레이터와
포토샵에
조예가
있다면

프로그램
사이에

어울리는
워크플로우를
찾을

있습니다. 스마트
오브젝트를
사용하여
고려하십시오. 당신은
또한 Icon Builder라
불리는
포토샵
애드온을
고려할
수도
있습니다.
작은
아이콘

대형
아이콘
디자인에
접근
방식은
대단히
다릅니다. Firewheel 표지에
확대
축소에
관한
제목으로
불린 Icon Design: Bitmap vs Vector라는
좋은
글이
있습니다. 또한, Mezzoblue(IT블로그:캐나다)에는 Icon Design Sizing에
대한
글을
리뷰하고
있습니다. 그것은
작은
크기의
아이콘을
디자인하는
것과

가지
내재하는
문제에
대해
설명합니다.
4. 단순하고
상징적인
아이콘
유지하기
현재
운영
시스템은

사이즈(아이콘의
가장

사이즈는 512px by 512px)로
확대
가능한
아이콘들을
가지고
있고, 여러분의
아이콘
디자인을
그릴때는

어떤
유혹이
자라나게
됩니다. 바로
리얼리즘의
수준으로
아이콘
디자인에
흥미로운
요소를
추가


있다는
것입니다. 허나, 그것이
간단하고
효과적으로
작동해야하는
아이콘의
기능적
능력을
바꿔
버려서는
안됩니다.
Smashing Magazine은 Icon Design에
있어 Apple Human Interface guidelines의
대단한
요약을
했습니다. 아쿠아
리얼리즘의
섹션에
아이콘
디자인
안에서의
리얼리즘의
한계에
대한
몇가지
좋은
점들을
만들고, 상징성이
필요할
때를
지적해
냈습니다. 이
섹션은
아이콘
디자인에서
리얼리즘과
단순화
사이에
충돌에
대해
토론했습니다.
아이콘
디자인을
너무
복잡하게
만들려고
하지
마십시요. 아이콘
디자인에
너무
많은
아이템을
배치하거나
지나치게
아이콘을
그려대는
것에
주의하십시요. 저는
누구나 RSS 아이콘에
대한
일반적인
심볼을

알고
있을
거라
확신합니다. Smashing Magazine으로
부터
받은
아래의
예를
보겠습니다. 이들
아이콘
여전히
아이콘의
강력한
상징적인
품질을
유지하면서도
그림에
가깝습니다. 과도하게
그리는것과
아이콘을
꾸며대는
것은
특히
작은
크기에서
인식률의
낮은
결과를
초래합니다. 그러므로, 한
아이콘
디자인
속에
너무
많이
넣지
않도록
주의하십시오.
아이콘의
미학적
관심으로
인해
아이콘의
부분적인
상징적
임펙트를
잃는
가치가
있을지도
모릅니다. 그것은
항상
그때
그때
판단하고, 각
디자인마다
요건
사항이
달라질

있습니다. 여기
아래의
간단한 RSS 아이콘
디자인
처럼
하나의
아이콘
세트를
비교하십시요 . 여러분의

사이트
디자인
스타일
속에
아이콘을
가져와
넣고
균형에
맞는
행동를
취하십시요. 당신은
디자인에흥미와
칭찬거리를
추가하길
원하지만, 아이콘의
상징적인
임펙트을
잃어버려도
않됩니다.
아래의
아이콘은
아주
멋집니다. 그것은
심볼
주변에
첨가된
디자인이
심볼로서
빠르게
인식될

있는
몇몇의
가치를
잃어버리게
하는지
아닌지
판단이
요구됩니다. 그들이
그림과
비슷한
기능로써

사이즈의
작업은
괜찮습니다만, 작은
사이즈에서라면, 적게
꾸미는것이
바람직한
솔루션이


있습니다.
5. 일관된
조명, 반사와
그림자
이것은
여러분의
디자인에
시종일관
모든
기능을
추가하는데에
리얼리즘은
중요합니다. 만약
여러분이
한방향으로
오는
라이팅
소스를
사용한다면, 그것을
지속하십시요. 아니라면
여러분의
아이콘의
통합된
디자인을
잃어버릴
우려가
있습니다. 또한, 여러분의
아이콘이
위치하게

디자인의
라이팅
소스에
대해
고려해야
합니다. 만약
아이콘의
라이팅
소스가
여러분이
넣어
사용할

사이트
또는
어플리케이션
디자인과
충돌된다면, 그
디자인은
아마추어
처럼
보일수
있습니다.
Windows Vista User Experience Guide 안에서
아이콘
라이팅과
그림자에
관한
섹션이
있습니다. 그
가이드북은
윈도우
아이콘
세트에
대한
정말
구체적인
규칙들을
제공합니다. 이는
아이콘
디자이너들과
통일된
아이콘
시스템을
보장하는
좀더
실행적인
표준화를
제공합니다. 다음
예제에서


있듯이
구체적인
규칙입니다.
" 그림자를
사용하면
시각적으로
배경에서
오브젝트를
들어올리고, 오히려
공간에서
어색하게
떠있는것
보다
현실에
기반을
두어
만들어진 3D 객체로
표현됩니다. "

가이드에는

많은
규칙이
있습니다.
6. 제한된
시점을
활용
여러분의
아이콘
디자인
세트
안의
시점의
범위는
작업과
함께
정해야만
합니다. 만약
여러분이
아이콘을
시선에서
똑바로
바라봤다고
한다면
그걸
계속
유지하십시요. 여러분이
특정
각도로
하나씩
배치한다면
모든
아이콘이
그런식으로
만들어야합니다. 동일한
시점에서
특정
유리한
위치에
놓여진
모든
오브젝트를
보고
있는
카메라를
상상해
보십시오. 이렇게
하면
아이콘
디자인의
일관성을
유지하는

도움이
됩니다.
하지만
대규모
설계
시스템, 소프트웨어
운영
체제와
같은
것에서는, 그
이상의
유연성을
필요로
해야

수도
있습니다. 애플은
자사의
휴먼
인터페이스
가이드라인에서
아이콘
시점에
대해
기술했습니다. 그들은
시점에
대한
사용에
좀더
유연합니다.
"다양한
시점은
아이콘을
캡처하고
있는
가상의
카메라의
위치를
변경하여
달성됩니다."
아래의
이미지가
어플리케이션
아이콘(위)과
툴바
아이콘(아래) 간의
시점의
차이를
보여줍니다.
7. 일관된
아이콘
세트
스타일
만들기
라이팅과
시점은
분명히
아이콘의
스타일에
기여하지만, 많은
다른
요소도

스타일에
똑같이
기여하고
있습니다. 만약
여러분이
그런지
스타일

사이트
디자인
안에
여러분
아이콘을

맞추려고
한다면, 여러분은
아이콘
디자인
스타일에
텍스처를
추가하는것이
좋을
것입니다.
아이콘
세트는
그들의
독자적인
독특한
형상을
가지고
있습니다. Echo Icon Guidelines에서

세트는
다음과
같이
표현되었습니다.
" Fedora에
포함되기
위한
아이콘의
새로운
세트를
제안합니다. Echo 아이콘들은
좀더
사실적인
표현을
위한
목적으로
여전히
아주
높은
콘트라스트와
선명한
색상의
점들을
활용하여, 깔끔하고
단순한
디자인을
유지하면서, 다이나믹한
시점을
가지고
디자인
되었습니다."

세트가
독자적으로
정한
새로운
방법은
외곽선의
일관된
사용입니다. 예를
들어
아래
이미지를
참조하십시오.
아이콘
디자인
시작하기

사이트를
위한
아이콘
디자인하기는
아이콘
디자인을
시작하는데
좋은
방법입니다. 종종
사이트
디자인에
필요한
아이콘이
단지
몇개만
있기도
합니다. 여러분이
아이콘을
단지
손쉽게
또는

이하로
디자인
하는데
노력할

있는
작은
웹사이트
디자인
프로젝트로
간단하게
시작하십시요.
리서치를
통해
아이콘
디자인
과정을
시작하십시요. 당신이
만들려고
하는
아이콘을
설명하는

사용되는
일반적인
상징적인
메타포를
고려하십시오. 스케치는
컨셉이
모아질
만큼
필요합니다. 여러분이
사용할

사이트
디자인과
함께
아이콘
디자인의
스타일을
칭찬하십시요. 색상, 시점, 그리고
사이트의
그래픽
모습을
고려하십시오.
Hicks design은 아이콘
디자인에
있어
빠른 SlideShare 프리젠테이션을
가지고
있습니다. 프리젠
테이션의
섹션

하나는
자신의
디자인
과정을
다룹니다. 그것은
멋진
시각적
예제를
제공합니다. 아래는
스케치
단계의
예입니다.
Icon Design from hicksdesign
영감을
주는
전문적인
아이콘
세트
일단

사이트를
위한
아이콘
일회용
또는
작은
아이콘
세트를
만든
후에는, 응용
프로그램
아이콘을
만들어

수도
있다. 당신이


해봤다면. 전문적인
커다란
아이콘
세트를
만들고
싶어
근질거릴

있습니다. 아이콘을
판매하는
것은
디자이너에
대한
수익성있는
시도가


있습니다만. 당신이
독특하고
전문적인
세트를
만들어야만, 그때
그것을
판매할

있습니다. 다음은
디자이너들에게
영감의
훌륭한
소스
역할을
두가지
전문
아이콘
디자인
세트입니다.
The Classic Pack Icon Set From Icon Drawer

아이콘
세트는
전문가
정신, 기호의
훌륭한
선택, 만화적인
리얼리즘, 그리고
재미있는
디자인의
조합입니다. 31three의
제시베넷 – 쳄벌린이 Expression Engine의
리디자인을
위한
이러한
아이콘을
사용했을때, 저는
기뻐서
날아갈

같았습니다. 이것은
멋진
사이트
디자인이고, 아이콘은

스타일에
정말

맞았습니다.
The Chalkwork Family from Mezzoblue
" Chalkwork은
신중하게
디자인된
로열티없는
시각적으로
통합된
아이콘의
세트입니다. 웹

소프트웨어
디자이너들의
가장
일반적인
아이콘에
대한
요구

일부를
커버하기
위해
만들었고, 모든 Chalkwork 패밀리는
수백개의
컴퓨터에
제공했고, 인터넷
관련
메타포들로써 3가지
사이즈의
시각적으로
일관된
스타일을 6가지의
파일
포맷으로
제공합니다. "
이것은 Dave Shea의

디자인된
아이콘
세트입니다.
PSDTUTS+ 아이콘
튜토리얼
아이콘
디자인
속으로
뛰어드십시요. 여러분은
여러분의
발을
담기기
위해 PSDTUST+에
있는
몇개의
프로젝트를
시작


있습니다. 막
이번주에, 우리는 Constantin으로
부터 Create a High Gloss Graduation Hat Icon Design이라
부르는
아이콘
디자인
튜토리얼을
출간했습니다. 우리는
아이콘
디자인
선구자인 Fabio로
부터 New Plus Tutorial—Create a "Time Machine" like Icon. 이라는 PLUS 섹션
튜토리얼을
출간했습니다. Fabio 또한
얼마
전에 Handy Web 2.0 Icons In Photoshop.라는
튜토리얼도
출간했습니다.
Vaclav는 Illustrate a Traffic Cone Icon in Photoshop과 Creating a Cool Yellow Helmet Icon과
같은
아이콘
디자인
상의
몇개의
뛰어난
튜토리얼들을
출간해
왔습니다. 만약
우리가
되돌려서, 여러분은 Making a Photoshop Shield.라는 Collis의
튜토리얼을
확인


있습니다. 이들은
모두
아이콘
디자인을
시작하기
위한
훌륭한
출발점입니다.
결론
다음부터
아이콘
만들기를
위한
클라이언트의
프로젝트
또는
여기
튜토리얼을
통해
아이콘
만들기
연습이
흥미
진진해
질겁니다. 여러분은
한번에
이러한
기술들을
마스터
했고, 작은
아이콘
세트를
만드는
노력했습니다. 혹은
크게
가거나 Resale을
위한
세트
전체를
만들었을
수도
있습니다. 아래
의견으로
우리에게
추가적인
아이콘
리소스를
알려주십시요.
원본
출처 : PSDTUTS+

0

0

댓글0

    댓글 더보기

    삭제 하시겠습니까? 취소 삭제

    로그인 하시겠습니까? 확인 취소

    댓글을 삭제 하시겠습니까? 확인 취소