네이버 홈페이지형 블로그 스킨 디자인 작업법 | 포토샵 활용 가이드

네이버 블로그를 홈페이지처럼 만들고 싶다면 스킨 디자인 작업이 필수입니다. 이번 글에서는 네이버 블로그 홈페이지형 만들기 - 응용편 2탄으로, 스킨 디자인 작업 과정을 하나하나 차근차근 알려드립니다.

✅ 본 강의는 블로그 글과 함께 유튜브 강의 영상도 제공됩니다.

✅ 이미지 화질은 강의 캡처 기반이라 약간 낮을 수 있습니다. 양해 부탁드립니다.

내 블로그 화면 캡처하기
새로운 캔버스 창 만들기
캡처한 화면 이동시키기
비율 조절하기
작업 중인 PSD 파일 저장하기
눈금자로 투명 위젯 영역 표시하기
투명 위젯 영역 안에 메뉴 버튼 디자인하기

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

먼저, 투명 위젯 영역을 선택한 후 화면을 캡처해야 합니다. 방법은 세 가지입니다.

키보드 `프린트 스크린(Print Screen)`을 눌러 전체 화면을 캡처한 후, 포토샵에 `Ctrl+N`으로 새 캔버스를 만들고 `Ctrl+V`로 붙여넣기 합니다.
듀얼 모니터를 사용하는 경우 `Crop Tool(자르기 툴)`을 이용해 필요한 부분만 잘라냅니다.
캡처한 후 불필요한 부분은 `Crop Tool`로 정리해줍니다.

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

가로 2000px × 세로 720px 크기로 새로운 캔버스를 하나 만들어줍니다.

(`Ctrl+N` 또는 메뉴 → File → New)

이제 포토샵에 두 개의 창(캡처화면 + 새 캔버스)이 열려 있어야 합니다.

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

좌측 툴박스에서 `Move Tool(이동 툴)`을 선택한 다음, Shift 키를 누른 상태에서 마우스로 캡처한 화면을 새 캔버스로 옮깁니다. Shift를 누르면 원본 위치가 유지되면서 이동되기 때문에 정렬이 편리합니다. 캡처한 원본 파일은 이동이 완료되면 저장하지 않고 닫아도 됩니다.

4. 비율 조절하기

캡처한 이미지를 옮겼더니 좌우 여백은 잘 맞지만, 상단과 하단 여백이 맞지 않을 수 있습니다. 이때는 Move Tool로 조정하거나, 방향키(↑↓) 를 이용해 위, 아래로만 미세하게 조정합니다.

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

디자인 작업을 시작하기 전에 반드시 저장하세요!

처음 저장: `Ctrl+S` 또는 메뉴 → File → Save
작업 중 중간 저장: 수시로 `Ctrl+S` 사용하기

초기 저장을 잊으면, 작업 중 포토샵이 꺼졌을 때 모든 수고가 물거품이 될 수 있어요.

6. 눈금자로 투명 위젯 영역 표시하기

투명 위젯 공간을 정확히 표시해보겠습니다.

`Ctrl+R`를 눌러 눈금자(Ruler) 를 활성화합니다.
눈금자 단위를 픽셀(Pixel) 로 설정합니다.
돋보기 툴(또는 `Ctrl` + `+`)로 화면을 확대해,

투명 위젯의 경계선에 맞춰 눈금자에서 가이드라인을 드래그하여 설정합니다.

7. 투명 위젯 영역 안에 메뉴 버튼 디자인하기

마지막 단계는 메뉴 버튼이나 링크 아이콘을 디자인하는 것입니다.

투명 위젯 바깥으로 벗어나면 링크를 걸 수 없기 때문에, 반드시 가이드라인 안쪽에 배치해야 합니다.

위젯 영역 전체 사이즈: 약 가로 914px × 세로 600px
네모 박스를 가이드라인에 맞춰 만든 후, 안에 메뉴 버튼이나 SNS 아이콘 등을 배치해봅니다.

디자인 전, 이 영역 안에 어떤 메뉴가 들어갈지 레이아웃을 구상해두면 편리합니다.

네이버 홈페이지형 블로그 스킨 디자인 작업법 | 포토샵 활용 가이드