앱&웹사이트 로고 제작 과정
- 2탄 형태와 컬러 작업, 완성
1탄 - 구상, 리서치, 스케치
2탄 - 형태, 컬러, 완성
안녕하세요. 흐름입니다.
저번 시간에는 회사 로고(CI) 제작 과정 중
구상과 리서치, 스케치까지 진행했습니다.
이번에는 저번에 그렸던 스케치 중에서 작업할 것을 선택합니다.
어떤 것이 좋은 지 알아보기 위해 스케치를 적용할 부분에 올려봅니다.
스케치 디자인을 선택하면 포토샵이나 일러스트레이터로 선을 따고
컬러를 주어 완성을 하게 됩니다.
1. 스케치 예시로 넣어 보기
2. 형태 선 따기
3. 컬러
4. 완성 후 적용하기
1. 스케치를 디자인에 넣어 보며 형태를 선택
로고 스케치를 들어갈 위치에 넣어 봅니다.
로고만 따로 보거나 크게 볼 때와는 달라 보일 수 있습니다.
웹 사이트에 사용되는 로고의 경우 웹 사이트 디자인과도 어울리는 지 고려하여야 합니다.
2. 형태 선 따기
일러스트레이터나 포토샵을 이용하여 스케치의 형태를 땁니다.
저는 포토샵보다는 일러스트레이터를 많이 사용합니다.
일러스트레이터로 스케치의 형태를 땁니다.
기업의 로고는 여러 곳에 다양하게 쓰입니다.
일러스트레이터는 벡터방식의 만들어져 이미지를 늘이거나 키워도 깨지지 않기 때문에 이 툴을 사용하게 됩니다.
3. 컬러
여러 가지 컬러를 바꿔가며 적용해봅니다.
색은 어떤 것을 사용하면 좋을 까요?
키컬러가 정해져 있다면 그 색으로 하면 되지만 정해져 있지 않을 경우 어떤 색을 사용할까 고민이 되실 거예요.
컬러를 선정하는 방법은 여러가지가 있습니다.
| 색상 선정 - 색채 심리
하지만 색상을 선택할 때에 꼭 색채 심리를 따르지는 않습니다.
색채 심리를 너무 따르면 흔하게 느껴질 수 있습니다.
| 색상 참고 - 컬러 파레트 (Color Palette)
같은 파랑이라도 색의 미세한 차이로 느낌이 달라집니다.
어떤 색을 사용할 지 정했다면 디테일하게 원하는 색상을 찾습니다.
저는 구글의 "머티리얼 컬러" 파레트의 색을 가져와서 적용해 보았습니다.
https://material.google.com/style/color.html#color-color-palette
머티리얼 컬러 적용.
색상을 참고하고 싶다면
검색창에 컬러 파레트, Color palette, 컬러차트, Color Chart, 컬러코드,Color codes, Color value, Color Picker, 컬러 트랜드, Trend Color, Pantone, Combination color, 색상 조합, 컬러 조합, BI color, CI color 등으로 검색합니다.
기존의 디자이너들이 만든 색상이기 때문에 잘 어울릴 확률이 높습니다.
다른 참고할 만한 컬러 파레트입니다.
Color palette
플랫 컬러 파레트 (Flat)
컬러 헌트
| 색상 참고 - 기존 브랜드 로고 색상 참고
또 잘 만들어진 로고의 색상 조합을 참고하는 것도 방법입니다.
| 로고 색상의 수
로고의 색상 수는 보통 1~3가지 색상을 가장 많이 씁니다.
기업에 따라 많은 색을 쓰는 곳도 있지만 그런 기업은 많지 않습니다.
색상의 수가 많아지면 로고가 들어가는 웹이나 앱 디자인의 컬러에 영향을 받아 다루기가 더 까다로워집니다.
구글의 경우 로고에 4가지 색이 들어갑니다. 그래서 배경색이 흰색이여야 로고색이 묻히지 않고 돋보입니다.
4. 완성 후 적용하기
완성이 되면 로고를 사용할 위치에 적용시켜 봅니다.
로고가 들어가는 웹의 색상, 디자인과 조화로운지를 봅니다.
9e6500878fd3b4d3f211f3ddf00f7da9
