느낌 있는 온라인 배너 디자인하기

안녕하세요 키다리디자이너입니다.

 

나른한 일요일 오후네요.

아무 것도 하기 싫고 자꾸 침대에 눕고만 싶어지는 계절입니다.

 

이런 날에 키다리디자이너는 커피 한잔에 케익한조각과 함께 케익처럼 달달한 음악을 들으며 잠시 된장남이 되어 봅니다. 이런 좋은 가을날 모니터와 스마트폰에게 시간을 뺏기는 것은 너무 불행한 것 같아요~

여러분들도 잠시 여유를 가져 보세요^^

 

 

 

 

 

 

 

오늘은 지난시간 웹용 팝업만들기에 이어 배너를 만들어 보는 시간을 가져볼게요

 

사실 웹용 배너같은 작업은 웹디자이너로서 가장 기본적이고 쉬운 일이기도 하죠.

그 말은 곧 작업자의 가감없는 진짜 디자인실력을 가늠하는 계기가 되기도 합니다.

그래서 키다리디자이너는 새로운 웹디자이너와 일하 때에는 반드시 배너 작업부터 시켜보곤 합니다.

경력이나 실력에 따라 당연히 퀄리티의 차이는 있겠지만 그것보다 최소한 이 사람이 디자인을 위한 고민을 얼마나 하고 있는지, 디자인 스타일은  어떤 느낌인지 파악이 되기 때문이죠.

 

놀랍게도(?) 디자인 하기 전에 제대로 텍스트를 읽어 보거나 심도 있는 고민을 하는 사람은 정말 보기 힘들었던 것 같습니다.

초심자들에게 배너 작업을 시키면 대체로 무작정 아무렇게나 디자인을 한다거나, 혹시 비슷한 거 없는지 열심히 웹서칭을 한다거나, 쓸만한 디자인 소스를 찾는다거나.. 거의 이 세 부류로 나뉘어 집니다.

가끔 이전에 했던 작업을 꺼내 이것저것 좀 바꿔서 주는 분들도 있긴 합니다...

 

뭐 그렇게 해도 잘하는 분들은 잘 합니다만 키다리디자이너는 블로그에 글쓸때마다 일관되게 강조하는 '고민 좀 하고 만들자'라는 말을 또 해봅니다.

 

자, 여러분에게 이렇게 기획서가 도착했습니다.

 

 

일단 시작은 팝업때와 같습니다.

 

배너는 반드시 요청한 300*200px 크기로 만들어야 하기 때문에 일단은 포토샵으로 위 크기와 맞는 빈 문서를 하나 만들어 봅니다.

 

그리고 주어진 텍스트를 배치해 봅니다.

 

 

 

 

다행히 배너 사이즈에 비해 글자가 많은 편은 아닙니다.

 

그럼 이제 텍스트를 좀 더 이벤트 배너답게 바꿔볼까요?

여기서 가장 중요한 듯 보이는 9,900원이라는 가격을 가장 키워 보겠습니다.

 

 

 

저는 일단 이렇게 배치했습니다.

디자인엔 항상 정답이 없습니다. 디자이너 본인이 원하는 답을 스스로 만들어 가면 되는 것입니다.

 

그럼 이제 이걸 꾸며볼 차례입니다.

 

어떻게 디자인 해야 가장 느낌을 잘 살릴 수 있을까요?

 

기획자가 어떤 이미지를 사용해 달라는 언급이 없었으므로 알아서 적당히 디자인 해야만 합니다.

 

저는 일단 '무기'와 '가격 파괴'라는 단어에 촛점을 맞춰 보겠습니다.

언제나 디자인할 때 어떻게 만들어야 할 지 감이 안잡히시면 단어에 먼저 집중한 후 그에 따른 이미지를 연상하시면 쉽게 풀리기도 합니다.

 

먼저 배경으로 파괴된 느낌의 벽면에 밀리터리 스러운 느낌을  넣어 보겠습니다.

  

사용할 배경 이미지

 

배너에 배경을 넣어 합성하고 밀리터리 스러운 색감으로 바꿔 보겠습니다.

전쟁의 안개처럼 흐릿함에 덮힌 그을린 벽면의 느낌을 주었습니다.

 

 

 

 

텍스트가 좀 심심하죠?

텍스트에 색 좀 넣고 디자인적인 요소를 살려 폰트도 바꿔 보았습니다.

그리고 역동적인 느낌을 추가하기 위해 좀 대각선으로 비틀어 보았습니다.

 

 

 

이것 만으로는 아직 '무기', '파괴'라는 단어에 대한 느낌을 살리기는 좀 부족한 것 같네요.

이제 마지막으로 텍스트에 '무기'라는 느낌을 살려 조금 화려하게 꾸며 보겠습니다.

그럼 이 글자에 총탄이 날아가는 듯한 효과를 조금 넣어볼까요

 

순수하게 그려서 꾸밀 수도 있지만 가능하다면 이미 만들어진 소스를 조금 따다가 쓰는 것도 시간절약과 업무 효율성에 있어 많은 도움이 됩니다.

별 거 아닌거에 너무 많은 시간 쏟지 말자구요~

 

제가 디자인 소스를 얻기 위해 자주 방문하는 사이트를 하나 알려 드리겠습니다.

 

 

 

http://www.freepik.com

 

 

이 곳에 가면 저작권에 위반되지 않은 디자인 소스들을 많이 구하실 수 있습니다. 때로는 저작권에 대한 언급이 명시된 작업물도 있으니 다운로드 받을 때 주의가 필요합니다.

 

lights로 검색해서 적당한 소스를 하나 다운로드 받겠습니다.

 

 

이제 다운받은 소스와 함께 배너를 알아서 감각껏(?) 꾸며 줍니다.

저의 최종 결과물입니다.

 

 

 

 

어떠신가요? 좀 느낌이 살아나는 것 같나요? ㅎㅎ

 

오늘은 여기까지 마치겠습니다.

배너 제작은 다음 시간에 다른 디자인 컨셉으로 한 번 더 포스팅 하도록 하겠습니다.

그럼 모두 즐거운 웹디자인 하세요~ ^^