이전 글에서는 어떤 홈페이지형 블로그를 만들지 먼저 기획하는 작업을 했습니다. 이번에는 그 기획을 가지고 본격적으로 디자인 작업을 할 차례입니다.
보통 많은 사람들이 '디자인'이라는 말만 들으면 막연한 두려움을 갖습니다.
디자인 하려면 포토샵 같은 거 알아야 하는 거 아닌가요? 난 그런거 못하는데....
뭐 디자인 감각도 없고, 어떻게 하는지 감도 안오고...
그래서 이 글에선 포토샵을 이용하지 않습니다.
아마 포토샵 정도를 다루실 수 있는 분이면 디자인쪽으로 상당히 내공이 있고, 디자인에 대한 부담도 적으실거라 생각합니다. 이런 분들은 그냥 <01.번 만들어야 할 것들>만 확인하시고, 규격에 맞추어 이미지를 만들면 됩니다.
01. 만들어야 할 것들
홈페이지형 블로그를 만들기 위해선 소스를 대략 6개 정도 만들어야 합니다. 네이버 블로그 레이아웃을 이용해 구체적으로 어떤 것들을 만들어야 하는지 알아 봅시다.
제가 만든 블로그 상단부분입니다.
여기서 보면 상단배경 1개 , 그리고 클릭할 수 있는 버튼 5개를 만들어야 합니다. 이때 필요한 이미지 소스들의 크기입니다.
| 가로 | 세로 | |
| 상단배경(이미지) | 3000px (2000px까지는 줄여도 무방) | 길게-1000px 짧게-1000px이하 |
| 버튼(아이콘) | 170px | 170px |
(버튼은 배경을 포함해서 가로세로 170px이지 배경을 투명으로 하면 도형 크기를 조금 더 줄여도 무방합니다.)
*픽셀은 빨간색, 파랑색, 초록색(RGB컬러)을 섞어 이미지를 표현할 수 있는 최소 단위입니다. 우리나라 말로는 '화소'라고도 하죠. 어려우신 분들은 그냥 쉽게 'cm, m같은 측정 단위'라고 생각하시면 됩니다. 표기시 'px'라고 작성하면 됩니다.
물론 이 외에도 다른 버튼들을 추가할 수는 있지만 일단은 가장 기본적인 크기만 가지고 작업해 보겠습니다. 만약 더 많은 종류의 버튼 기능을 추가하고 싶으신 분들은 [홈페이지형 블로그 만들기 #003편]까지 확인하신 후 적용하길 추천드립니다. 네이버 블로그는 레이아웃을 자유롭게 변경하는 것이 쉽지 않기 때문에 기술적인 문제가 생길 수 있습니다.
02. 배경사진 만들기
이제부터 본격적으로 디자인 작업을 들어가 봅시다.
위에서 말했듯이 오직 마이크로소프트사의 파워포인트만을 이용해서 작업을 진행합니다. 그리고 작업시에는 PC를 이용했습니다. 홈페이지형 네이버 블로그는 오직 pc버전에서만 적용되기 때문에 모바일로는 작업이 불가능합니다.
일단 바탕화면에서 파워포인트를 실행합니다.
기존의 파워포인트는 화면의 사이즈가 저희가 원하는 사이즈(3000*1000)와 다릅니다. 따라서 일단 파워포인트의 레이아웃을 수정해 주어야 합니다. 변경은 '디자인' -> '슬라이드 크기' -> '사용자 지정 슬라이드 크기'에 들어가서 변경 가능합니다. 변경 시 단위가 cm로 되어 있는데, 이를 무시하고 가로: '3000px' / 세로: '1000px'라고 적은 후(그러면 자동으로 cm로 변환됩니다.) 확인을 누르시면 됩니다.
이렇게 레이아웃 설정을 완료 하셨으면 이미지를 넣고(이미 준비 되셨죠? 아니라면 이 글을 참고하세요) 글만 작성하면 됩니다.
이러헤 만들어진 레이아웃에 이미지를 넣고, 글을 써 넣으면 아래 그림처럼 디자인이 완료됩니다.
저같은 경우는 검정고딕(black han sans)을 이용했고, 타이틀은 그림자와 그라데이션을 이용했습니다.
(어떻게 하는지 모른다면 일단 우클릭 후, 도형 설정으로 들어가서 설명만 잘 읽어 보면 누구나 어느정도는 할 수 있는 것이 파워포인트입니다.)
그다음에 이 파일을 이미지 파일로 내보내기 하면 됩니다.
이런 식으로 하면 배경사진은 완성입니다. 이렇게 ppt를 사용한 방법은 쉽긴 하지만, 화질이 안좋아진다는 문제가 있습니다. 그래서 만약 포토샵이나 일러스트레이터를 사용하실 줄 안다면 그 방법대로 하시면 됩니다.
번외로 제가 좋아하는 무료 폰트를 알려 드리겠습니다.
바로 위의 이미지에서도 사용된 '검은고딕(black han sans)'과 '에스코어 드림' 그리고 '서울시 서체'입니다.
이 세 가지 폰트 모두 상업적으로 이용이 가능한 폰트입니다. 다만 검은고딕체는 한글만 지원하기 때문에 영어가 많이 들어간다면 '에스코어드림체'와 섞어 사용하시면 좋습니다. (과거 이런 식으로 해 봤는데 제가 디자이너가 아니여서 그런지 크게 거슬리는 것은 없었습니다.)
검은고딕 다운로드 사이트(구글 폰트) 바로가기
에스코어드림 다운로드 사이트 바로가기
서울시 서체(남산체, 한강체) 사이트 바로가기
03. 버튼 만들기
배경 이미지를 만들었다면 이젠 버튼만 만들면 됩니다.
버튼은 파워포인트 말고, 미리켄버스라는 무료 디자인 사이트를 이용했습니다.
아니 그럼 배경도 미리캔버스에서 만들면 되는 것 아닌가요?
네 그렇습니다. 그런데 업로드 과정에서 사진을 압축하던지 해서 사진이 조금 이상해 지더라고요. 그래서 ppt로 따로 작업한 것입니다. (반대로 버튼도 파워포인트로 만들 수 있습니다. 흠.... 나 뭐 한거지?)
다시 본론으로 넘어가서, 미리캔버스(편의상 이하 '미리'라고 하겠습니다)에서도 가장 먼저 레이아웃 조정부터 해 주어야 합니다.
이렇게 조정을 한 후, 원하는 도형, 아이콘, 문구를 넣으면 됩니다. (아이콘은 플랫아이콘에서 받으시면 됩니다. 자세한건 이 글을 참고하세요)
그렇게 해서 저도 버튼 디자인을 완료했습니다.
저는 모두 원형으로 디자인했는데, 사각형으로 하든, 다른 도형으로 하든 큰 상관 없습니다.
만약 나중에 확인해 봤을 때 크기가 너무 크거나 작다면 미리에 다시 들어가서 크기를 조정해 주시면 됩니다.
이렇게 버튼이 디자인 되었으면, 이제 다운로드 하면 됩니다. 이때 주의해야 할 점이 배경을 '투명하게'해서 다운로드 해야 한다는 점입니다. (만약 이렇게 안하면 지저분해집니다.)
이렇게만 만들어 주면 디자인은 완료입니다.
다음 글에선 만든 디자인을 가지고 네이버 블로그에 같이 적용해 보겠습니다.
혹시 궁금하신 내용이나 모르는 내용이 있으면 아래 댓글에 남겨 주세요~
(피드백도 적극 환영입니다.)
'비즈니스& 마케팅' 카테고리의 다른 글
| 초보도 따라하는 홈페이지형 네이버 블로그 만들기 #003편, 제작하기 (6) | 2020.11.29 |
|---|---|
| 초보도 따라하는 홈페이지형 네이버 블로그 만들기 #001편, 블로그 기획 (1) | 2020.11.21 |
댓글