네이버 홈페이지형 블로그 응용편 04.스킨 디자인 잘라내기

홈페이지형 네이버 블로그 만들기 응용 4편을 시작하겠습니다. 오늘은 완료된 스킨 디자인을 잘라내는 방법을 알아보도록 하겠습니다. 홈페이지형 블로그는 블로그 꾸미기 기능 중 스킨 배경 설정을 잘 활용한 디자인이라고 말할 수 있습니다.

네이버 블로그는 정해진 레이아웃에 따라 적용하게 되면 자유도가 낮아 개성이 있는 디자인이 나오기 힘들 수 있지만, 스킨 배경으로 만들어 배경으로 먼저 설정하고 배경 내부의 클릭이 되는 배너를 링크 위젯 버튼으로 등록하고 링크 위젯 버튼이 외에 공간들을 투명 위젯으로 만들어주어서 홈페이지형 블로그로 완성할 수 있습니다. 응용 1, 2, 3편에 이어서 완성된 디자인을 잘라내고 위젯으로 등록시키는 방법을 알아보도록 하겠습니다.

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

1. 분할 영역 도구를 선택
2. 크기에 맞게 영역 만들기
3. 분할 영역 치수와 위치 수정
4. 분할 영역 저장
5. 분할 영역 저장 확인
6. 스킨 배경(백그라운드)만 저장
Appendix 포토샵에서 지원하는 파일 포맷들

아직 기초 편을 못 보신 분들은 응용 편으로 홈페이지형 블로그를 제작하기 전에 기초 편을 먼저 보고 오시는 것을 추천합니다.

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

유튜브 강의

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

01 / 02편

이전 시간에는 위젯 영역에 맞게 디자인 레이아웃을 해봤습니다. 오늘은 완료된 스킨 디자인을 분할 영역 툴을 사용해서 잘라내는 방법을 알아보도록 하겠습니다. 우선 우측에 있는 레이어 팔레트에서 맨 상단에 있는 캡처 해서 가져왔던 레이어는 눈을 꺼주세요.(없는 분들은 상관없습니다. 가이드라인이 있기 때문에 없어도 상관은 없습니다.)

1. 분할 영역 도구를 선택

좌측에 있는 툴박스에서 Crop Tool을 클릭하고 마우스 오른쪽 버튼을 눌러서 메뉴 중에 Slice Tool(분할 영역 도구)을 선택합니다.

2. 크기에 맞게 영역 만들기

이미지를 확대하여 잘라내야 하는 부분을 좀 더 세밀하게 잘라주는 것이 좋습니다. 그럼 이제 크기에 맞게 드래그하여 잘라내야 하는 부분의 영역을 만들어 보겠습니다.

방법1) 이미지를 확대한 후에 가이드라인 안내선의 첫 번째 이미지에 해당하는 로고 영역의 왼쪽 모서리 부분부터 마우스의 버튼을 누른 상태로 드래그하여 크기에 맞게 영역을 만들어줍니다. 선의 색은 갈색으로 영역이 만들어진 것을 확인할 수 있습니다.

방법2) 같은 방법으로 잘라야 하는 부분을 가이드라인 위로  모두 영역을 만들어주면 됩니다.

방법3) 지정한 분할 영역이 가이드라인과 겹쳐져 있기 때문에 잘 보이지 않지만 아래 화면과 같이 눈금자를 비활성화하면 분할 영역이 잘 만들어졌다는 것을 확인할 수 있습니다. (가이드라인 비활성화하는 방법은 단축키 Ctrl+;를 눌러주거나 포토샵 메뉴바에 있는 View-show-Guides를 체크하여 비활성화 또는 활성화해주면 됩니다.

3. 분할 영역 치수와 위치 수정하기

분할 영역의 위치가 잘 맞지 않았을 경우 다시 위치 조정도 가능합니다. 이미지를 최대한 확대해서 미세하게 안 맞는 부분은 마우스를 영역 위에다가 놓고 클릭하면 위치를 조절할 수 있는 점이 보입니다. 이 부분을 드래그하여 위치를 수정할 수도 있습니다.

4. 분할 영역 저장하기

이제 분할 영역 도구로 잘라야 하는 영역들을 모두 지정을 했다면 분할 영역들을 이미지로 내보내기 합니다.

방법1) 포토샵 상단 메뉴바에 있는 File(파일)-Save for Web(웹용으로 저장) 창을 열어줍니다.

방법2) 영역이 선명하게 보이는 부분과 선명하지 않게 보이는 부분이 보입니다. 선택이 되지 않은 분할 영역들은 선명하지 않게 보이는 것입니다.  저장할 모든 영역을 선택해주면 됩니다.

방법3) 복수 선택을 하려면  왼쪽에 있는 두 번째 분할 영역 도구를 선택을 한 다음 shift키를 누른 상태에서 나머지 위젯 분할 영역도 모두 선택합니다.

방법4) 우측 저장 옵션에서 JPEG, 최대값(Maximum)으로 지정한 뒤 모든 영역을 선택했다면 하단에 있는 save...(Save for Web 웹용으로 저장)버튼을 클릭합니다.

방법5) 저장 경로가 이전에 작업했던 저장의 위치와 동일하게 지정이 됩니다. 이때 하단에 있는 선택 분할 영역에서는 모두 저장(All Slice)가 아닌, (Select Slice)로 선택한 영역만 저장을 합니다.

5. 분할 영역 저장 확인하기

분할 영역이 저장이 잘되었는지 확인을 합니다. 분할 영역을 저장한 폴더를 열면 images폴더가 새로 생성된 것을 알 수 있습니다.  images 폴더를 클릭하여 저장된 이미지를 아래와 같이 확인합니다. 선택했던 영역만 저장이 잘되어있는 것을 확인할 수 있습니다. 만약에 디자인 작업 시 배경과 겹치면 안 되는 이미지의 텍스트라면 뒷배경 없이 PNG 파일로 저장을 해주시면 됩니다. 

이 부분은 기초 편에서 다뤘던 내용 있습니다. PNG 파일로 저장하고 블로그에 적용했기 때문에  참고해주시면 좋을 것 같습니다.

이제 포토샵으로 하는 작업은 거의 마무리가 되어갑니다. 마지막으로 해야 하는 부분은 디자인 좌측에 있는 텍스트로 구성된 메뉴들은 헤이어의 눈을 다 끈 상태에서 배경이 되는 백그라운드 스킨 이미지만 저장을 하면 됩니다.

6. 스킨 배경(백그라운드)만 저장하기

우측 레이어 팔레트에서 텍스트가 되는 메뉴 레이어들은 눈 모양의 아이콘을 모두 꺼주시면 됩니다. (클릭하여 비활성화) 그러면 스킨의 배경이 되는 백그라운드 이미지만 남게 됩니다.

저장 경로는 분할 영역을 저장했던 images 폴더에 같이 저장하도록 합니다. 스킨 배경 이미지를 jpg로 저장을 해주면 됩니다. images 폴더 안에는 총 스킨 배경 1개, 분할 이미지 4개(로고 이미지 1+메뉴가 되는 이미지 2개+SNS 이미지 1개) 총 이렇게 5개의 이미지가 있습니다. 이제 홈페이지형 블로그를 만들기 위한 모든 재료 준비가 끝났습니다. 이제 만들어 놓은 이미지들로 위젯에 등록하여 블로그에 적용시켜보는 작업을 진행해보겠습니다.

Appendix 포토샵에서 지원하는 파일 포맷들

-PSD: 포토샵에서 작업한 이미지가 저장되는 파일 포맷으로 포토샵 기본 포맷입니다.

-JPG/JPEG: 이미지 압축률이 가장 높으며 많이 사용하는 이미지 파일의 저장 형식입니다.

-GIF: 일러스트와 같은 단순한 색상을 가진 파일에 적합하며 인터넷에서 투명한 부분을 표현할 수 있습니다.

-PNG: JPEG보다는 압출률이 작지만 무손실 압축을 사용하기 때문에 고품질 이미지로 저장할 수 있습니다.

-WebP: 이미지가 로딩되는 시간을 단축시키며, 손실/비손실 압축 이미지 파일을 포맷입니다.

-PDF: 어도비 아크로벳(Acrobat)에서 사용하는 포맷으로 운영체제와 서체의 제약을 받지 않고 문서를 읽을 수 있는 파일 포맷입니다.

-BMP: 윈도우 계열의 프로그램을 만들거나 사용할 경우에 필요한 이미지 포맷입니다.

-EPS: Quark Xpress나 Page Maker와 같은 편집 프로그램에서 사용하는 파일 포맷입니다.

-Photoshop DCS: 파일에 컬러 정보를 저장하여 출력되는 속도를 빠르게 해 줍니다.

-RAW: 픽셀의 컬러 정보만 담고 있고 그 외의 어떤 정보도 포함하지 않는 포맷입니다.