Symbol로 그리드 시스템 만들기
교차점과 기울기의 활용
앞서 워드마크 로고로 그리드 시스템을 만들고 이미지를 배치해 보는 과정을 살펴보았습니다. 제 글은 사용성보다는 브랜드의 형태를 기반으로 하여 그리드 시스템을 만드는 다양한 방법에 초점을 두고 있습니다.
Symbol로 그리드 시스템 만들기 1회 차입니다.
1. 워드마크형 로고로 그리드 시스템 만들기(3 Chapter)
2. Symbol로 그리드 시스템 만들기(2 Chapter)
3. 곡선이 포함된 그리드 시스템 만들기(2 Chapter)
심벌 로고는 워드마크 외에 상징하는 심벌이 있는 형태의 로고를 말합니다. 우리가 아는 유명한 케이스로는 애플과 맥도널드 등을 예로 들 수 있습니다.
애플과 맥도널드의 심벌 로고이 로고들은 그냥 만들어진 것이 아닌 작도법을 활용한 단단한 구조가 있습니다. 바로 아래와 같은 형태입니다.
애플 심벌의 구조
맥도널드 심벌의 구조이 원리를 설명드리는 이유는 이 제작 방법과 오늘 설명드릴 그리드 시스템 제작 방법이 같은 흐름으로 이어지기 때문입니다. 즉 심벌의 구조를 활용하여 그리드 시스템을 제작하는 것이 원리입니다.
이번에 제작할 그리드 시스템은 아디다스의 심벌을 응용해 보도록 하겠습니다. 먼저 아디다스의 심벌은 크게 두 종류가 있는데 클래식 심벌(꽃 모양)이 아닌 흔히 우리가 쉽게 표현하는 삼선마크입니다.
아디다스의 3-Line Symbol이 심볼의 작도법은 아래와 같습니다.
아디다스의 3-Line Symbol의 구조여기서 주목해야 할 포인트는 2가지입니다.
1. 교차점
2. 경사
먼저 교차점을 주목합니다.
Step 1.
교차 지점을 표기합니다.(동그라미 부분)
Step 2.
교차 지점을 축으로 하여 세로 선을 연장하여 그려줍니다.
Step 3.
위의 이미지를 바탕으로 8의 배수에 맞춘 최종 그리드 시스템입니다.
최종 그리스 시스템 수치(1920px 기준)둘째로 경사를 주목합니다.
Step 4.
위의 그리드를 바탕으로 이미지를 배치합니다.
그리드를 활용한 이미지 배치Step 5.
이제 -30도의 경사를 잊지 말고 특정 요소에 적용해 줍니다. 저는 2장의 이미지에 적용해 보겠습니다. 여기에서 이미지 자체를 -30도로 돌리지 말고 이미지의 틀을 유지한 상태에서 안에 요소만을 돌려줍니다.
반시계 방향으로 30도 회전한 이미지Step 6.
글을 적용한 최종 결과물입니다.
참 힘들게 디자인합니다. 눈에 보이지도 않고, 장점도 모르겠는데 말이죠.
디자인이라는 것이 원래 그렇습니다. 결국 이런 방법을 사용하는 이유는 차별화 때문입니다. 이러한 그리드와 기울어진 이미지 등은 한 페이지를 볼 경우 알 수 없지만 계속 쌓이다 보면 어느샌가 점점 차별화되는 아이덴티티로 스며들기 마련입니다. 모든 디자인이 비슷비슷해져 가는 시대입니다. 누가 알아주지 않더라도 꾸준히 자신만의 아이덴티티를 통해 성장하는 과정을 스스로에게 부여하시길 바랍니다.
읽어주셔서 감사합니다.
