웹디자인 강의

Photoshop 입체감 있는 메뉴버튼 만들기 (완성된 버튼 다운로드 가능)

2003.09.26 20:31

이오르

1. 새레이어를 먼저 추가해주세요. 나중에 레이어스타일을 적용하기 위해서입니다.
네모 마퀴툴을 선택해서 원하는 버튼 사이즈만한 선택영역을 만들어주세요.

2. select - Modify - Smooth 하셔서 수치에 4 정도 입력해주세요.
선택영역 모서리를 둥글게 해주는 기능을 합니다.

그라데이션툴을 선택하시고, 위에 보이는 옵션바에서 Radial Gradient 를 선택합니다.
색은 회색에서 흰색으로 가게 만들고, 선택영역에서 드래그 해줍니다.

4. Edit - Stroke 하셔서 짙은 회색의 1px 짜리 테두리를 둘러줍니다.
나중에 색을 바꾸시려면 검은색이 아니라 짙은 회색으로 하시는 것이 좋습니다.

5. 이렇게 테두리가 둘러졌습니다.

6. 이번엔 아까말한 레이어 스타일을 적용해 봅시다.
작업한 레이어를 더블클릭해서 Drop Shadow 를 선택해주시거나, (포토샵 7.0 버젼만 가능)
메뉴에서 Layer - Layer Style - Drop Shadow 해서
위에 화면처럼 맞춰주시고, OK 해주세요.

7. 다시 레이어를 더블클릭해서 Inner Shadow 를 선택해주시거나,
메뉴에서 Layer - Layer Style - Inner Shadow 해서
위에 화면처럼 맞춰주시고, OK 해주세요.
이 두가지를 레이어스타일 창이 열렸을 때 한꺼번에 하고 Ok 하는것은
해보시면 아시겠지만, 적용한 후에 다르게 나오니 꼭 따로따로 하세요.

8. 여기까지 완성된 모습입니다.
이제 입체감이 생겼죠 ^^

9. 약간 두께감이 있는 폰트를 선택하셔서 OK 라고 쓰시고,
그 글씨 레이어를 Ctrl 키를 누르면서 동시에 클릭해주세요.
그러면 글씨 레이어가 선택영역으로 잡힙니다.
이때, 글씨 색도 나중에 색을 바꿔주시려면 짙은 회색으로 써주세요.

10. 선택영역으로 잡힌 것을 Ctrl + C (복사) 하신 다음, Crl + V (붙여넣기) 하세요.
그러면 새로운 레이어가 생기면서 거기에 붙여넣기한 OK 란 글씨가 보입니다.
이번엔 방금 새로 생긴 레이어를 Ctrl 키를 누르면서 동시에 클릭해서 선택하시고,
페인트툴을 선택해서 그 안을 흰색으로 채워줍니다.
제가 쉬운걸 설명을 너무 어렵게 하고 있나요? ^^;

11. 마지막으로 붙여넣기해서 새로생긴 흰색 Ok 레이어를
처음에 쓴 짙은 회색 Ok 글씨 레이어 아래로 드래그해셔 순서를 바꿔줍니다.
그리고 이동툴을 선택하셔서 방향키로 오른쪽으로 두번, 아래로 두번, 이동해주세요.
(때에 따라서 한번씩 이동할수도 있습니다)

12. 완성된 모습입니다.

이 게시물을

수정 삭제

번호	제목	글쓴이	날짜	조회 수
공지	공지 강좌를 올리기전 공지사항을 읽어주세요 [12]	Eccen	2004.12.15	48031
2415	저작도구 템플릿- 5백종류 네비게이션버튼 포함	윤선미320	2011.06.07	11203
2414	3D 에니메이션 영화제작 프로그램[ iclone 다운받기] [2]	윤선미320	2009.06.08	10232
2413	저작도구로 플래시 캐릭터 만들기	윤선미320	2009.05.12	5580
2412	돌잔치 동영상 - 크레이지토크로 만들기 [3]	parkys	2009.02.18	4628
2411	Windows Vista 창 만들기 [8]	유성매직	2009.01.13	2824
2410	타이틀이미지 쉽게 제작해보기 [11]	서기	2009.01.08	9312
2409	저작도구 렉토라 - 엑셀,파워포인트 exe.html,cd로만들기 [1]	윤선미320	2009.01.01	8535
2408	크레이지토크 사용법강좌[한글버젼] 1강	parkys	2008.11.02	6623
2407	립씽크 ucc 에니메이션 만들기 [2]	parkys	2008.10.04	9320
2406	초간단 염색방법 [7]	wwolf	2008.09.21	11395
2405	크리스탈 문자 [1]	wwolf	2008.09.21	2161
2404	Path툴 사용법 (마법효과 보충강의)	wwolf	2008.09.21	7006
2403	성형강좌	wwolf	2008.09.21	5536
2402	지문대조하는 효과	wwolf	2008.09.21	4982
2401	바느질한 느낌의 로고디자인	wwolf	2008.09.21	1780
2400	컵속의 수족관 만들기	wwolf	2008.09.21	5644
2399	작열하는 태양	wwolf	2008.09.21	4382
2398	마우스 오버 효과	wwolf	2008.09.21	5271
2397	불타는 문자	wwolf	2008.09.21	3883
2396	만화느낌 문자 디자인	wwolf	2008.09.21	4342

태그 쓰기

XE : Xpress Engine

웹디자인 강의

Photoshop 입체감 있는 메뉴버튼 만들기 (완성된 버튼 다운로드 가능)

댓글 10