네이버 홈페이지형 블로그만들기 기초편 02.위젯 메뉴 버튼 만들기

저번 포스트에 이어 네이버블로그 꾸미기 홈페이지형 블로그 만들기 2편을 시작하겠습니다. 이번에는 네이버 위젯으로 활용할 메뉴 버튼을 만들어보겠습니다. 홈페이지형 블로그 만들기 기초 편으로 1~7편 포스트를 발행 예정이며 하단 유튜브 강의 영상도 같이 첨부하겠습니다.

유튜브에 네이버블로그 홈페이지형 만들기 제작 후 영상에서 부족한 부분을 블로그에 정리하고 있습니다. 유튜브에서 여행하는 디자이너 트래블러를 검색하면 쉽게 찾을 수 있습니다. 참고 부탁드립니다.

홈페이지형블로그 기초2편 목차

1. 유튜브 강의
2. 새로운 캔버스 만들기
3. 캔버스에 텍스트 입력
4. 버튼 PNG 저장
5. 저장된 파일 확인
6. 버튼 수정하기
7. 버튼 텍스트 색상 바꾸기
8. 같은 파일명 버튼을 저장
9. 버튼 완료하기
10. 저장후 확인하기

영상보다 글로 보는 게 편한 분들은 앞으로 계속 발행되는 네이버 홈페이지형 블로그 만들기를 참고해주시면 좋겠습니다. 영상의 캡처 화면을 사용하여 다소 화질이 좋지 못한 점 양해 부탁드립니다. 그럼 오늘은 저번에 이어 홈페이지형 블로그 만들기를 위한 재료 준비를 계속해보겠습니다.

유튜브 강의

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

01 / 02 / 03편

1. 새로운 캔버스 만들기

메뉴 버튼을 만들기 위해서 새로운 캔버스를 만들어줍니다.

방법 1) 포토샵 상단 메뉴에서 File-new를 눌러줍니다.

방법 2) 캔버스에 사이즈는  Width(가로):170px, Height(세로):260px으로 지정해주었습니다.

2. 캔버스에 텍스트 입력하기

블로그 주제에 따라 메뉴 버튼도 다 다를 수 있습니다. 저는 임의로 버튼 1,2,3,4,5로 만들겠습니다. 주제가 정해지고 카테고리의 이름도 정해졌다면 메뉴 버튼의 텍스트 입력 시 그 이름으로 입력해주시면 됩니다.(예시: 패션이 주제라고 한다면 TOP/BOTTOM/OUTER/DRESS...)

방법 1) 포토샵 작업창 우측 팔레트 레이어에서 Background(배경) 레이어가 선택이 되어 있어야 합니다.

방법 2)  포토샵 작업창 좌측 툴박스에서 문자 도구 T를 선택 후, 마우스를 캔버스 창에 클릭 후 텍스트 입력을 합니다.

3. 버튼 PNG 저장하는 방법

메뉴 버튼을 뒷배경 없이(배경을 투명하게) 저장하는 방법을 알아보겠습니다.

방법 1) 포토샵 우측 팔레트 레이어에서 Background(배경) 레이어의 왼쪽 있는 눈 아이콘을 클릭하여 비활성화(눈 끄기)해주면 됩니다.

방법 2)  비활성화한 후 포토샵 상단 메뉴에 File-Save As를 클릭하여 확장자 PNG로 선택 후 저장합니다.

4. 저장된 파일 확인하기

저장된 파일이 뒷배경 없이 투명하게 저장이 잘 되었는지 확인해봅니다. 저장된 이미지 클릭 마우스 우측 버튼을 눌러 파일의 속성을 보면 PNG 파일로 저장이 되었다는 것을 확인할 수 있습니다.

방법 1)  저장된 이미지 클릭 후 - 마우스 우측 버튼 클릭 - 속성- 확인

5. 문자 툴(T)로 수정해서  버튼 만들기

이제 남은 버튼 2, 3, 4, 5도 문자 툴(T)을 이용해서 수정 후 저장하는 방법을 알아보겠습니다. 

방법 1) 버튼 1을 만들어 놓았으니 레이어를 복사하겠습니다. 복사할 레이어를 선택하고 단축키 Ctrl+J를 눌러서 복사합니다. 또는 복사할 레이어를 선택 후 레이어 팔레트 하단에 있는 종이 접힌 아이콘 위로 드래그를 해도 복사가 됩니다.

*버튼 또한 작업 시작 전에 캔버스 창을 만들고 바로 원본 psd를 저장을 해주세요. 그리고 작업 중간에 단축키 Ctrl+S를 눌러서 중간 저장을 계속해주시면 좋습니다. 

방법 2)  포토샵 좌측 툴박스에서 문자 툴(T)을 선택

방법 3)  포토샵 우측 레이어에서 버튼 2를 제외하고 나머지 레이어의 눈 (눈 모양 아이콘)을 꺼주세요.(비활성화)

방법 4)  레이어에서 눈이 켜져 있는(활성화) 버튼의 레이어만 선택합니다. 위의 화면은 버튼 2에 해당하는 레이어의 눈이 켜져 있습니다.

방법 5)  좌측 툴박스에서 문자 툴(T)을 선택 후, 작업 영역을 클릭 후 텍스트를 수정합니다.

위와 같은 방법으로 남은 버튼도 수정을 합니다.

6. 버튼 텍스트 색상 바꾸기

스킨 이미지 사진이 흑백이라 저는 컬러를 화이트로 변경하도록 하겠습니다.

방법 1) 문자 툴(T)을 선택 후 포토샵 작업창 상단에 옵션 바에서 Color Picker(text color)를 클릭합니다. 

방법 1) 대화 상자가 나오면 색상값(#fffff)을 지정합니다.

7. 같은 파일명 버튼을 저장하는 방법

버튼 1의 경우 저장 시 텍스트 색상이 블랙이었기 때문에, 화이트로 색상을 바꾸고 다시 저장을 했습니다. 아래와 같이 이름이 같은 경우 지금 파일로 대체하겠냐고 안내 창이 나옵니다. 그러면 ok버튼을 눌러주고 저장하면 됩니다.

8. 버튼 완료하기

위와 같은 방법으로 남은 버튼의 색상을 모두 바꿔주고 저장을 합니다.

방법 1)  포토샵 상단 메뉴바에서 File-Save As를 눌러서 확장자 png를 선택한 후 작업이 완료된 레이어의 눈을 차례대로 활성화/비활성화를(눈을 끄고, 켜고) 하면서 버튼 2, 3, 4, 5를 모두 저장합니다.

9. 저장 후 확인하기

방법 1) 저장한 이미지를 클릭한후 마우스 오른쪽 버튼을 눌러서 속성을 확인합니다. png파일로 저장된 걸 확인할 수 있습니다.

그럼 이제 이전 글에서 스킨을 만들어 놓았고, 이번 글에서 버튼까지 만들어 놓았으니 블로그에 적용하는 방법을 다음 포스트에 이어서 해보겠습니다. 네이버 블로그 홈페이지형 블로그 만들기에서 스킨과 버튼 디자인 작업을 마쳤다면 50%는 완성된 것이나 다름없습니다. 나머지는 위젯+간단한 html으로 적용하면 가장 기본적인 홈페이지 형태의 블로그를 만들 수 있습니다.