본문 바로가기

키다리디자이너/소소한 강좌

웹용 팝업 디자인 어떻게 해야 할까? 두번째

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

 

오늘은 이전 포스트에 이어 웹용 팝업 디자인하기 두번째 포스트를 써보도록 하겠습니다.

앞으로도 다양한 디자인 스타일을 넣은 디자인 포스트를 써보도록 노력 하겠습니다 ㅎㅎ

 

 

자 오늘도 우리에게 이따위 성의 없는 기획서가 도착했습니다.

 

이것만 딱 보고 어떻게 만들지 바로 감이 오시나요?

그렇다면 당신은 디자인의 달인의 경지에 오르셨으니 이 글을 읽지 말고 살포시 뒤로가기를 눌러 주시기 바랍니다...

 

농담이구요..

내용을 읽어보니 '스타벅스 커피'라는 아주 좋은 소재를 제시하고 있습니다. 그렇다면 여기서 디자인의 반은 끝난 겁니다.(진짜로..)

왜냐면 스타벅스 커피를 디자인 소재로 사용하면 되니까요.

 

키다리디자이너는 이렇게 디자인 소재를 명확히 제시해 주는 기획서가 참 좋습니다.

 

 

 

 

 

자 이제 전에 했던 것처럼 정해진 사이즈에 대충 텍스트를 배치해 보겠습니다.

 

 

 

 

다행히 이번에도 팝업 사이즈에 비해 글이 많거나 부담스럽지는 않습니다.

바로 다음 단계로 텍스트 크기를 좀 조절해 보죠

 

 

 

 

키다리디자이너는 대충 이렇게 늘리고 줄여줬습니다.

이게 별 거 아닌거 같아도 디자인의 완성도를 높여주는 정말 중요한 작업입니다.

가끔 내용을 아예 읽지도 않고 디자인부터 입히는 분이 있는데 그러면 작업시간도 정말 오래걸리고 나중에 수정하느라 다 뒤엎는 사태까지 발생할 수도 있습니다.

 

이제 좀 이쁘게 꾸며 보도록 할게요

고마운(?) 소재인 커피를 올려 보아요

 

 

 

 

폰트도 조금 바꿔 보고 위치도 살짝 바꿔 봤습니다.

대충 팝업이 완성된 후에 느낌이 그려지고 있습니다.

 

자 그럼 '커피'라는 느낌을 더 가미하기 위해 좀 더 꾸며 봅니다.

키다리디자이너는 디자인에 대한 힌트가 필요할 때 구글 이미지 검색을 많이 사용해요. 구글에서 'coffee'를 검색하다 이런 이미지를 찾았어요.

 

 

 

이것은.. I seoul U..?

 

 

아뭏든 대충 이런 소재들을 이용하면 될 거 같은 생각이 듭니다. 커피를 담는 푸댓자루(?) 같은 배경 재질에 커피콩이 필요할 거 같네요.

 

 

 

 

배경으로 쓸 이런 이미지 텍스쳐를 만들었습니다.

 

 

 

 

그리고 배경으로 깔고 커피이미지를 올려 봅니다.

누끼를 대충 따긴 했어도 커피가 실사 이미지라 약간의 언밸런스함이 느껴지네요. 좀 더 감성적인 이미지로 교체해 보겠습니다.

 

키다리디자이너는 이미지소스 사이트인 이미지투XX에서 커피 디자인 소스를 하나 다운받았어요

사실.. 디자인은 디자인 소스가 반입니다.. 인정할 건 하고 넘어갑니다 ㅋㅋ

 

다시 배치해 보겠습니다.

 

 

 

 

커피 이미지에 스타벅스 로고도 합성하고 적당히 배경과 어울리도록 슬슬 손봐주었습니다.

이제 그럭저럭 볼만하죠?

 

마지막으로 전체적으로 손보는 작업을 거치겠습니다.

 

 

 

 

폰트도 좀 다듬었고 중요하지만 중요하지 않은것 같은(?) 이벤트 기간도 강조를 해주었습니다.

근데 약간 뭔가 어색한 느낌은 지울 수가 없네요

 

배경을 스타벅스의 컬러인 녹색으로 바꾸는 게 좋을 거 같은 생각이 들었습니다.

 

 

 

 

최종 완성입니다.

 

여유가 되시는 분들은 폰트나 배경 그래픽에 조금 더 신경을 써주시면 더욱 보기 좋은 디자인이 나올 거 같네요

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

 

추운 겨울 감기 조심하세요~