네이버 홈페이지형 블로그 응용편 02.스킨 디자인 작업하는 방법

네이버 블로그 홈페이지형 만들기 응용 2편에서는 홈페이지형 스킨 디자인 작업하는 방법 알아보도록 하겠습니다. 유튜브 영상강의는 응용 1~4편으로 제작되었고 블로그의 발행되는 글의 경우 1~10편으로 마무리할 예정입니다.

*영상의 캡처 화면을 사용하여 글이 작성되었기 때문에 이미지의 화질이 다소 좋지 못한 점 양해 부탁드립니다. 유튜브 영상을 먼저 촬영하고 글을 작성하게 되었습니다.

홈페이지형블로그 응용2편 목차

1. 내 블로그 화면 캡처
2. 새로운 캔버스 창 만들기
3. 캡처한 화면 이동
4. 비율 조절하기
5. 작업 중인 PSD 파일 저장
6. 눈금자로 투명 위젯 영역 표시
7. 투명 위젯 영역 설명

저번 포스트에서는 스킨을 내 블로그 씌어보고 투명 위젯을 만들어 영역을 확인했습니다. 이제 위젯 영역을 드래드 한 화면을 캡처하여 투명 위젯 공간을 보면서 메뉴 버튼 위치를 그 투명 위젯 영역에 맞게 디자인을 해보도록 하겠습니다. 위젯 영역을 캡처한 화면을 이용해야 합니다. 아래와 같이 작업을 해주시면 됩니다.

*영상의 캡처 화면을 사용하여 글이 작성되었기 때문에 이미지의 화질이 다소 좋지 못한 점 양해 부탁드립니다. 유튜브 영상을 먼저 촬영하고 글을 작성하게 되었습니다.

유튜브 강의

홈페이지형 네이버 블로그 만들기

01 / 02편

1. 내 블로그 화면 캡처하기

저번 글의 마지막 부분을 보시면 마우스 왼쪽 버튼을 누른 상태로 내 블로그의 상단 스킨을 드래그하여 위젯의 영역을 선택했습니다. 

방법1) 프린트 스크린을 눌러서 화면을 캡처합니다. 그리고 포토샵으로 돌아와 단축키 Ctrl+N 또는 포토샵 상단에 있는 File-New를 눌러주면 아래 화면과 같이 가로 값과 세로 값이 모니터에 해상도에 따라 자동으로 들어가게 됩니다. 이 상태에서 우측에 있는 OK 버튼을 눌러줍니다.

방법2) Ctrl+V로 붙여 넣기 해줍니다. 저의 경우 듀얼 모니터를 사용하고 있기 때문에 한쪽 화면만 사용하기 위해 Crop Tool로 오른쪽은 잘라내고 사용하도록 하겠습니다.

방법3) 포토샵 좌측 툴박스에서 Crop Tool(자르기 툴)을 선택합니다. 원하는 화면만 남겨놓고 잘라줍니다.

2. 새로운 캔버스 창 만들기

새로운 캔버스 창을 하나 만들어주세요. 단축키 Ctrl+N 또는 포토샵 상단에 있는 메뉴바에서 File-New를 눌러서 만들어주시면 됩니다. 사이즈는 가로 2000px*세로 720px입니다. 포토샵 창에는 아래 작업창과 같이 캡처한 화면과 새로 만든 캔버스 총 2개가 보이게 됩니다. 이제 캡처한 화면을 새로 만든 캔버스 창으로 옮겨보도록 하겠습니다.

3. 캡처한 화면 이동시키기

포토샵 좌측에 있는 툴박스에서 Move Tool(이동 툴)을 클릭하고 캡처한 화면을 새로 만든 캔버스 창으로 옮겨보도록 합니다. 이동시킬 때는 마우스 왼쪽 버튼을 누른고 키보드 Shift 키를 누른 상태로 드래그하여 이미지를 이동시켜 줍니다. 

(Shift 키를 누른 상태로 이동을 시키면 캡처한 화면 그대로 같은 위치에 붙여 넣기가 됩니다.)

새로 만들었던 캔버스 창에 붙여 넣기가 잘되었다면 기존에 캡처했던 이미지는 저장하지 않고 닫아주셔도 됩니다. 캡처한 화면을 이동시킨 가로 2000px*세로 720px로 만들었던 새로운 캔버스 창 1개만 포토샵 작업창에 있으면 됩니다.

4. 비율 조절하기

Shift 키를 누른 상태로 이동 툴을 이용하여 이미지를 옮겼기 때문에 왼쪽과 오른쪽의 여백이 같은 가로사이즈로 옮겨진 걸 알 수 있습니다. 가로 2000px사이즈 안에 비율이 잘 맞게 이미지가 옮겨졌습니다. 하지만 문제는 상단과 하단의 여백이 맞지 않습니다.

이 부분만 조절해주시면 됩니다. 다시 Move Tool(이동 툴)로 위, 아래로 비율이 맞게 이동시켜도 되지만, 마우스로 이동시키다 보면 좌우 비율이 같이 움직여질 수 있기 때문에 이럴 때는 키보드에 있는 화살표 방향키로 위(↑) 아래만(↓) 움직여서 캔버스 창에 맞게 맞춰주는 게 좋습니다.

5. 작업 중인 PSD 파일 저장하기

저는 유튜브 영상을 촬영하느라 저장하는 것을 깜빡했는데 무조건 작업 중인 PSD 원본 파일은 저장부터 하고 디자인 작업을 해야 합니다. 또한 항상 중간 저장을 계속 눌러서 저장을 해주시는 게 좋습니다. 중간 저장은 단축키 Ctrl+S를 눌러주시면 됩니다. 또는 포토샵 상단 메뉴바에 있는 File-Save를 눌러주셔도 됩니다.

6. 눈금자로 투명 위젯 영역을 선으로 표시

단축키 Ctrl+R 또는 포토샵 메뉴바에 있는 View(보기)→Rulers(눈금자) 메뉴를 체크하여 눈금자가 보이도록 설정합니다. 눈금자가 활성화되면  눈금자 부분을 우클릭하여 단위를 픽셀로 바꿔주시면 됩니다. 이미 픽셀로 설정이 되어 있다면 따로 설정을 안 해도 됩니다. 

방법1) 이미지를 아래 화면과 같이 확대하여 투명 위젯 영역(파란색) 부분의 외곽부터 눈금자를 이용하여 선을 그어줍니다. 

방법2) 이미지를 확대하는 방법은 좌측 툴박스에 있는 돋보기 툴을 이용합니다.(단축키는 Ctrl를 누른 상태에서 (+) 키를 눌러주면 됩니다. 반대로 축소는 Ctrl를 누른 상태로 (-) 키를 눌러주면 됩니다.) 눈금자의 경우 마우스로 눈금자 부분을 마우스로 클릭하여 드래그하여 선을 그어주면 됩니다. 

이렇게 투명 위젯의 영역의 바깥 부분에 눈금자를 클릭하여 드래그해서 가이드라인을 만들어줍니다.

7. 투명 위젯 영역 안으로
메뉴 버튼 디자인을 해야 하는 이유

저는 크기를 투명 위젯의 전체 크기를 안내하기 위해 네모 박스를 가이드라인에 맞게 얹혀봤습니다. 이렇게 바깥쪽 부분에 크게 영역을 잡아보는 이유는 뒤에 들어가는 가로 2000px의 배경은 다양하게 원하는 디자인을 해도 상관없지만 네모 박스 안에 들어가는 투명 위젯 영역 안에는 디자인들은 메뉴 버튼이나 링크를 걸었을 때 어디론가 이동해야 하는 아이콘 (예를 들어 sns 아이콘 등)으로 디자인 작업을 해야 합니다.

투명 위젯 바깥 부분으로 디자인을 작업을 하게 되면 링크가 걸리지 않기 때문입니다. 링크를 걸어야 하는 부분들은 이 영역 안에다가 만들어져야 하기 때문에 디자인을 하기 전에 큰 틀을 위와 같은 방법으로 먼저 확인하고 디자인 작업을 시작하는 게 좋습니다. 포토샵 우측 INFO 팔레트에 있는 영역의 크기를 확인 해보면 위젯 영역의 전체 사이즈는 가로가 914px정도이고 세로는 600px인 걸 확인할 수 있습니다.

이 위젯 안에 전체적인 사이즈를 확인해보고 가이드라인을 만들어 놓고 디자인 작업을 시작합니다. 또한 디자인을 하기 전에 이 영역 안에 레이아웃을 구상해봅니다. 아이콘을 넣어보고 메뉴 버튼을 넣어보면서 영역 안에서 벗어나지 않게 디자인 구상을 해볼 수 있습니다.