네이버 블로그를 홈페이지처럼 꾸미고 싶은 분들을 위해 준비한 기초 강좌, 두 번째 시간입니다. 지난 1편에서는 스킨을 만드는 작업을 다뤘다면, 이번 포스트에서는 홈페이지형 블로그에 꼭 필요한 ‘메뉴 버튼 만들기’를 포토샵으로 진행해볼게요. 유튜브 강의와 함께 따라 하기 쉬운 순서로 정리했으니, 사진과 함께 차근차근 따라와 주세요.
목차
- 유튜브 강의 영상
- 새로운 캔버스 만들기
- 캔버스에 텍스트 입력하기
- 버튼 PNG로 저장하기
- 저장된 파일 확인
- 버튼 텍스트 수정 및 복제
- 버튼 텍스트 색상 변경
- 같은 파일명으로 저장 시 주의
- 최종 버튼 저장
- 저장 후 이미지 확인
1. 유튜브 강의 영상
‘글보다 영상이 더 익숙하다’는 분들을 위해 유튜브 강의도 함께 제공합니다.
유튜브 검색창에 "여행하는 디자이너 트래블러"를 입력하면 쉽게 찾아볼 수 있어요.
강의 링크:
(기초1편 바로가기)
(기초2편 바로가기)
(기초3편 바로가기)
유튜브 검색창에 "여행하는 디자이너 트래블러"를 입력하면 쉽게 찾아볼 수 있어요.
강의 링크:
(기초1편 바로가기)
(기초2편 바로가기)
(기초3편 바로가기)
2. 새로운 캔버스 만들기
메뉴 버튼 디자인의 첫 단계는 캔버스를 새로 만드는 것입니다.
[추천 사이즈]
- 가로(Width): 170px
- 세로(Height): 260px
[방법]
- 포토샵 상단 메뉴에서 File > New 선택
- 캔버스 사이즈 입력 후 확인
3. 텍스트 입력하기
이제 만든 캔버스에 텍스트를 입력해볼 차례예요.
[예시 카테고리]
패션 블로그라면: TOP / BOTTOM / OUTER / DRESS 등
[방법]
- 포토샵 툴박스에서 문자 도구(T) 선택
- 캔버스를 클릭해 텍스트 입력
- 우측 레이어 패널에서 Background 선택되어 있어야 함
4. 버튼 PNG로 저장하기
배경 없이(투명 배경으로) 버튼 이미지를 저장합니다.
[방법]
- 레이어 패널에서 눈 아이콘 클릭 → 배경 숨김
- File > Save As → 확장자 PNG 선택 후 저장
5. 저장된 파일 확인
정상적으로 투명 배경으로 저장됐는지 확인해볼까요?
[방법]
- 저장된 이미지 > 마우스 우클릭 > 속성 확인
- 파일 형식이 PNG인지 체크
6. 버튼 복사 및 텍스트 수정
버튼 1을 복사해서 2~5번 버튼을 쉽게 만들 수 있어요.
[방법]
- 레이어 선택 후 Ctrl + J 또는 하단 종이 아이콘으로 복사
- 문자 도구(T)로 텍스트 수정 (텍스트 색 변경 가능)
- 불필요한 레이어는 눈 아이콘 꺼서 숨기기
- 활성화된 레이어에서만 작업
7. 같은 파일명으로 저장 시 주의사항
같은 이름으로 저장하려고 하면 기존 파일을 덮어쓰기할지 묻습니다.
→ "예(OK)"를 눌러 저장 진행하세요.
8. 버튼 저장 마무리
완성된 각 버튼을 순서대로 저장합니다.
[방법]
- File > Save As → PNG 확장자로 저장
- 레이어의 눈 아이콘을 활용해 하나씩 켜고 끄면서 저장 반복
9. 저장된 이미지 확인하기
[방법]
이미지 파일 우클릭 > 속성 확인 → PNG 형식 여부 확인
이제 스킨과 버튼 작업이 끝났으니, 다음 포스트에서는 이 버튼을 블로그에 어떻게 적용하는지 알아보겠습니다. 위젯과 간단한 HTML만 활용해도 홈페이지형 블로그를 쉽게 완성할 수 있어요!
댓글 쓰기