네이버 홈페이지형 블로그 만들기 기초편 01.스킨 만들기 및 스킨 사이즈
이제는 흔히 볼 수 있게 된 네이버 블로그 홈페이지형을 한 번쯤 만들어 보고 싶었던 초보 블로그라면 앞으로 업로드될 쉽게 배우기 네이버 블로그 홈페이지형 블로그 만들기 1~7편을 참고해주세요. 기초 1편 LESSON.01 홈페이지형 블로그 스킨 만들기와 스킨 사이즈에 대해서 알아보도록 하겠습니다.
홈페이지형 네이버 블로그를 만들기 위해서는 스킨 디자인과 디자인한 메뉴 버튼이 필요합니다. 그럼 우선 블로그 스킨을 디자인하기 위한 사이즈부터 알아보고 만드는 방법도 같이 해보도록 하겠습니다.
(*기존 티스토리 블로그 콘텐츠를 옮겨오고 있습니다. 메뉴를 포함한 가격은 최신 정보로 업로드되고 있습니다. 참고 부탁드립니다.)
홈페이지형블로그 기초1편 목차
1. 유튜브 강의
2. 벤치마킹(bench―marking)
3. 내 블로그에 맞는 이미지 선택
4. 블로그 스킨 사이즈
5. 캔버스로 사진 이동
6. 스킨 이미지 저장 .psd
7. 스킨 이미지 저장 .jpg
네이버 블로그 홈페이지형 블로그 만들기는 영상으로도 제작되어 유튜브에서 시청할 수 있게 올려두었습니다. 영상을 보면서 부족한 부분은 앞으로 작성해서 업로드되는 포스트를 참고 부탁드립니다. 유튜브 영상 같이 첨부합니다. 구글 또는 유튜브에서 "여행하는 디자이너 트래블러"를 검색하시면 쉽게 찾을 수 있습니다.
유튜브 강의홈페이지형 네이버 블로그 만들기01 / 02 / 03편
글로 보면서 작업하는 게 편하신 분들을 위해서 글로 따로 작성하게 되었습니다. 작업 화면은 캡처를 이용했기 때문에 다소 화질이 좋지 못한 점 양해 부탁드립니다. 그럼 네이버 블로그 스킨 디자인하는 방법을 알아보도록 하겠습니다.
벤치마킹(bench―marking)은 좋은 방법
이미 잘 만들어져 있는 홈페이지형 네이버 블로그를 벤치마킹하여 블로그에 필요한 스킨의 사이즈와 디자인을 선택합니다. 저의 경우 가장 기본으로 많이 사용되는 구성으로 만들어진 체코 관광청 블로그를 벤치마킹했습니다. 이와 비슷한 홈페이지형 블로그 스킨을 디자인해보겠습니다.
1. 내 블로그에 맞는 이미지 선택하기 (고퀄리티 이미지 사이트)
포토샵을 열어 상단 포토샵 메뉴에서 File-Open을 클릭합니다. 스킨으로 사용할 사진을 선택하여 포토샵으로 불러옵니다.
블로그의 사용목적에 따라 주제도 다르고, 그에 따른 이미지도 다를 것 같습니다. 저의 경우 여행을 주로 다루고 있는 블로그였기 때문에 여행에 관련된 이미지를 선택하게 되었습니다. 스킨에 들어가게 될 이미지는 이미지 교체가 간편하도록 이미지가 들어갈 공간을 정해두게 됩니다. 이 공간의 사이즈에 맞게 적절한 이미지를 선택한 후 사이즈 조절하는 방법입니다.
*고퀄리티의 사진을 찾으려면 본인이 가지고 있는 사진도 좋습니다. 하지만 사진의 크기가 작다면 언플래쉬 사이트에서 무료로 사진을 다운로드하여서 사용하면 좋습니다. 언플래쉬(unsplash)의 가장 큰 장점은 상업적으로도 이용이 가능하며 사진의 사이즈가 2000px을 훌쩍 넘어가는 크기라 늘리거나, 줄였을 때 이미지 깨짐이 없습니다. 다만, 불법적인 사이트에 사진을 사용할 수 없다는 점을 주의해주세요.
2. 홈페이지형 네이버 블로그 스킨 사이즈 정하기
사용할 사진을 불러왔다면 아래 방법대로 진행해주세요.
방법 1) 포토샵 상단 메뉴에서 File-New를 클릭하여 새로운 캔버스를 만들어줍니다.
방법 2) 캔버스 사이즈는 Width(가로):2000px, Height(세로) 700px로 지정합니다.
*캔버스의 사이즈는 width(가로) 1600px~2000px까지 자유롭게 해 주시면 되는데 저는 되도록 이면 1900px이 넘도록 하는 것을 권장합니다. 이번 스킨의 가로 사이즈는 2000px로 작업하였습니다. 참고 부탁드립니다. Height(세로) 값도 디자인에 따라 다를 수 있습니다. 저의 경우 이번에 작업하는 스킨은 세로 사이즈를 700px으로 작업하였습니다.
3. 캔버스로 사진 이동하기
처음에 불러왔던 스킨 사진을 사이즈 조절한 캔버스로 옮겨보겠습니다.
방법 1)
포토샵 왼쪽 툴박스에서 Move Tool(이동 툴)을 선택합니다.
방법 2)
스킨 사진을 왼쪽 마우스를 누른 상태로 캔버스로 끌어다 놓습니다. 이때 캔버스 위로 마우스의 커서가 +로 바뀌는 걸 알 수 있습니다.
4. 캔버스 크기에 맞게
이미지 줄이고, 배치하기
캔버스에 가져온 사진을 줄이고 배치하는 방법을 알아보도록 하겠습니다. 개인적으로 사진 자체를 줄이는 방법보다 캔버스 크기를 지정하고 사진을 가져와서 쓰는 것을 선호합니다. 이유는 사진의 원하는 부분만을 배치할 수 있기 때문입니다.
방법 1) 포토샵 상단 메뉴에서 Edit(편집)-Free Transform(자유 변형) 또는 Edit-Transform-Scale를 선택합니다. 단축키로는 Ctrl+T입니다.
*Transform을 사용 시 우측 레이어에는 불러온 사진이 선택되어 있어야 합니다.
방법 2) Free Transform을 누른 후 왼쪽 모서리에는 점을 마우스로 클릭한 상태에서 키보드 Alt+Shift를 누르고 사진을 줄이거나 늘리면 깨짐 없이 정사이즈로 이미지를 줄이고 늘릴 수 있습니다.
5. 스킨 이미지 저장하기 psd
저의 경우 스킨 이미지 사이즈 조절 후 저장을 했지만, 되도록이면 처음 캔버스를 만들 때 저장을 하고 작업을 시작하는 게 좋습니다. 항상 원본 psd를 저장합니다.
방법 1)
File-Save As를 누른 후 파일의 이름을 지정후 psd 저장하기
6. 스킨 이미지 저장하기
방법 1)
File-Save As를 누른 후 확장자 jpg로 저장하기
위 방법과 같이 저장을 완료하면 이제 홈페이지형 블로그 상단 스킨은 완성입니다. 이 스킨은 네이버 블로그에 설정에서 스킨 배경으로 직접 등록할 예정입니다. 다음 포스트에서는 메뉴 버튼을 만들어보고 위젯을 사용해서 만들어 놓은 메뉴 버튼에 링크 거는 방법을 알아보도록 하겠습니다.
댓글