웹디자인 강의
Photoshop (왕초보도 따라하는) 심플한 버튼 만들기
2004.02.27 18:20
너무 심플하고 예쁘드라구요. 쉽게 만들어지는 버튼이라
초보분들도 다(?) 따라할 수 있도록 하다보니 양이 많아졌습니다.
이 강좌는 네이버카페(포토샵완전정복)에도 있는 강좌이며, 이곳에도 올려져 있음을
밝혀(?)드립니다.
1. [File]-[New]를 하여 새창을 하나 열어주세요. width: 200pixel Height: 100pixel
그리고 레이어 팔레트에서 새레이어를 하나 추가해주세요.
![10_1.jpg](/files/attach/images/19360728/586/420/019/10_1.jpg)
2. 툴박스에서 사각선택툴을 선택하신 후, 사각박스를 하나 그려주세요.
![10_2.jpg](/files/attach/images/19360728/586/420/019/10_2.jpg)
3. [Select]-[Modify]-[Smooth]로 들어가서 Sample Radius의 수치를 4pixel정도 넣어주세요.
그럼 직사각형의 사각형의 끝부분이 둥그스름해 집니다.
![10_3.jpg](/files/attach/images/19360728/586/420/019/10_3.jpg)
4. 전경색을 #91D1D8로 선택하신 후, Alt+Delete키를 눌러 선택한 색상으로 채워줍니다.
![10_4.jpg](/files/attach/images/19360728/586/420/019/10_4.jpg)
5. 선택영역이 살아있는 상태에서 레이어를 하나 더 추가해주세요.
![10_5.jpg](/files/attach/images/19360728/586/420/019/10_5.jpg)
6. [Select]-[Modify]-[Expand]로 들어가서 2pixel정도로 선택한 후, OK를 해주세요.
![10_6.jpg](/files/attach/images/19360728/586/420/019/10_6.jpg)
7. 그럼 아래 그림처럼 선택영역이 좀 더 커진답니다.
![10_7.jpg](/files/attach/images/19360728/586/420/019/10_7.jpg)
8. [Edit]-[Stroke]로 들어가서 Width는 1px, 컬러는 연한 회색을 선택해주시고, OK해주세요.
![10_8.jpg](/files/attach/images/19360728/586/420/019/10_8.jpg)
9. Ctrl+D를 눌러 선택영역을 해제하여 주면, 아래 그림과 같이 나옵니다.
![10_9.jpg](/files/attach/images/19360728/586/420/019/10_9.jpg)
10. Ctrl키를 누른채 Layer 1 레이어를 클릭해주시면 색상이 들어간 부분만 선택영역으로
깜빡깜빡 거립니다.
![10_10.jpg](/files/attach/images/19360728/586/420/019/10_10.jpg)
11. Layer 1레이어 바로 위쪽에 새로운 레이어를 하나 추가해주세요. 그럼 Layer 3번 레이어가
생긴답니다.
![10_11.jpg](/files/attach/images/19360728/586/420/019/10_11.jpg)
12. [Select]-[Modify]-[Contract]로 들어가서, Contract by의 수치를 2pixel정도 주세요.
![10_12.jpg](/files/attach/images/19360728/586/420/019/10_12.jpg)
13. 배경색이 흰색으로 선택된 상태에서 Ctrl+Delete키를 누르면 흰색으로 채워집니다.
![10_13.jpg](/files/attach/images/19360728/586/420/019/10_13.jpg)
14. 흰색을 채운 레이어가 선택된 상태에서 레이어팔레트 하단에 레이어마스크 버튼을
클릭해주세요.
![10_14.jpg](/files/attach/images/19360728/586/420/019/10_14.jpg)
15. 레이어 마스크를 클릭해주면, 자동으로 툴박스의 색상모드가 아래와 같이 바뀝니다.
그라데이션툴을 선택하시고, 옵션바도 아래 그림처럼 선택하신 후, 작업창으로 가세요.
화살표를 해 놓았듯이, 아래쪽에서 위쪽으로 마우스를 끌어올려주세요.
그럼 아래쪽의 흰부분이 자연스럽게 연해집니다.
![10_15.jpg](/files/attach/images/19360728/586/420/019/10_15.jpg)
16. 15번과 같은 작업(마우스를 아래에서 위로 드래그해주는 작업)을 여러번 해주세요.(4~5번)
그럼 아래와 같이 더 자연스러워 집니다.
![10_16.jpg](/files/attach/images/19360728/586/420/019/10_16.jpg)
17. 새 레이어를 하나 더 추가해주세요.
![10_17.jpg](/files/attach/images/19360728/586/420/019/10_17.jpg)
18. 툴박스에서 Custom Shape Tool을 선택하신 후, 원하는 모양의 아이콘을 선택해주세요.
저는 편지지모양을 선택했습니다.
![10_18.jpg](/files/attach/images/19360728/586/420/019/10_18.jpg)
19. 전경색이 흰색으로 선택된 상태에서 작업창에 알맞은 위치에 편지지 모양을 넣어주세요.
![10_19.jpg](/files/attach/images/19360728/586/420/019/10_19.jpg)
20. 그럼 아래와 같이 나오지요?
![10_20.jpg](/files/attach/images/19360728/586/420/019/10_20.jpg)
21. 타입툴을 선택하고, 원하는 글씨를 넣어주세요.
![10_21.jpg](/files/attach/images/19360728/586/420/019/10_21.jpg)
22. 완성본입니다.
![10_23.jpg](/files/attach/images/19360728/586/420/019/10_23.jpg)
23. 맘에드는 색상으로 여러개의 아이콘을 만들어보세요.
![10_22.jpg](/files/attach/images/19360728/586/420/019/10_22.jpg)
댓글 53
-
Mr.CHOI
2006.02.24 12:22
오..너무 좋습니다. 추천! -
Root
2004.02.27 18:45
오~ 깔끔한데요? ^^ -
☺okoru
2004.02.27 19:11
와.. 멋집니다. -
노력하자
2004.02.27 19:35
와~ 멋있네요 +_+ -
오아요군
2004.02.27 20:04
우앗!! 까, 깔끔합니다!
추천누르고..'ㅡ')a 리뉴얼 할려고 했는데.. -
유니짱
2004.02.27 21:40
정말 심플하네요~ 홈피 리뉴얼에 써야겠네요^^;; -
ㅡ.ㅡ;
2004.02.29 19:02
이야............강추추추추 -
힘쓰
2004.02.29 15:43
목마른 자들이 찾아 헤메이는 것들이 바로 이런거 아닐까요?
추천 꾸~욱 -
체리향기∮
2004.02.29 12:01
방법이 어렵지도 않은데 결과물이 너무 이쁘네요. ^^ -
비와당신
2004.02.28 02:56
우씨~~~ 로긴했잖아요... 추천하려공.... ^^;;
멋집니다~!! ^^ -
아키히로
2004.02.28 03:07
추천+_+! 예뻐요! 멋져요!
색감도 완전 예쁘고>_<d -
Forkheadbing
2004.02.28 04:57
오~~오~~~죽여 주네요 ,,cap -
테이
2004.02.28 09:24
우와 짱-_-ㅋ 저도 이번 리뉴얼때 버튼으로 써야겟음.으흐흐.ㅋㅋ 좋은강좌 땡큐^^ -
HanMa
2004.02.28 12:29
오 쉬우면서도 아주 유용한거같네요 위에처음볼때는 별루일거란생각이들었는데 화면을내리면서 완성되어가는것이 아주 좋게나와요 -
핑구☺
2004.02.28 20:38
와 정말 이쁜데요 ^ㅡ^ -
니키
2004.02.28 20:54
오옷 +ㅅ+ 좀 더 선명한 색으로 하면 깔끔하면서도 ~ 괜찮을 듯~ 감사합니다;; 추천한방 꾸욱~! -
박모양
2004.02.28 14:52
와 정말 멋지고 예쁘네요.^~^ 강좌 잘 봤습니다.^^ -
그냥이렇게。
2004.02.29 21:22
이쁘네요...
저는 로고에 쓸 계획이에요... -
(-_ㅡ*)
2004.03.01 00:51
심플! a+ -
(-_ㅡ*)
2004.03.01 00:51
아...누르고 싶은 충동이 생겨요 ^-^ ㅇㅣ쁨이쁨 -
그냥이렇게。
2004.03.01 12:10
이거 너무 예쁘네요...
사람들이 막 누르고 싶어서 계속 누르다가 트래픽이 다하면... 좀 곤란하겠죠? 하하...
아무튼 정말 예뻐요... -
SaRa's
2004.03.01 12:26
그냥이렇게//엔지오 계정으로 올려서 트래픽 안걸려요. ㅎㅎ
간단한건데, 반응이 좋으니 기분도 덩달아 룰루랄라~ 흐흐 -
[수아]작은아씨
2004.03.02 19:54
조회수가 1천이 넘어도 트래픽초과가 안되고 있는 호스팅인데
설마 이걸로 트래픽초과가 일어날까요 ^^;; -
ROLLER
2004.03.02 20:50
흐음.ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ 저도 이거 리뉴얼때 좀 써야겠음? ㅎㅎㅎㅎㅎㅎ -
윤춘기
2004.03.05 21:21
아..이걸보고 정말 로그인 안하는데 로그인했어요...
추천 당연이 했구요 ..정말 강의 잘해 놓으셧네요 멋져요 .. ^^
나 같은 초보가 보고 하기 진짜 초초강추라고...저 진짜 포토샵의 100분의 1정도 아는데
이거보고 그냥 따라했거든요!!
근데 근야 쉽게 만들어졌어요 진짜 강추 - - 글구 넘이쁘고.....
이걸루 제 홈페이지 만들고있는데 쓰고있어요 ㅋ!!
다음에더 이처럼 좋은 강좌 파아아아팍 올려주세요!!
수고하세용^^ -
박지형
2004.03.07 14:01
마지막 응용작품에 쓰인 폰트 이름이 몬가요????? -
박지형
2004.03.07 14:02
아 참고로 추천 한방 했습니다^^ -
낭만폐인™
2004.03.11 19:48
버튼 정말멋지네요~~~ 추천합니다.~~
근데 이미지를 만들고 그주위에 흰부분을 제거하고 저장할려면
어떻게 하나요?? -
RinY
2004.03.14 20:10
낭만폐인™//crop tool을 이용하시면 됩니다. 단축키 C ^^ -
송광훈
2004.03.20 13:42
오~ 깜쌈하네요~~ 상당히 유용한 팁 같습니다... -
한조
2004.03.26 20:52
헉 이쁩니다!! 정말 대단해요! 홈페이지 리뉴얼 하는대 써봐야 겠내요^^ 좋은팁 보고 갑니다~ -
RGM
2004.03.28 12:42
따라해봤는데 정말 이쁘네요^-^ 감사합니다. 추천 쾅! -
이재훈
2004.03.28 16:03
상당히 이쁘네요~
그런대 저는 커스텀 툴박스에 보니 그림이 몇개없는건가요..참고로 버전은 7.0 입니다.
그리고 15.16 작업을 계속해도 전부 초록색으로 변하지않고 밑에 약간의 흰색이 남아있는 이유는 무엇인가요? -
김정호
2004.03.28 20:10
저도 15번에서 막히는데.. 드래그 하면 아무일도 안생기는... -
하늘지기
2004.03.29 01:38
저도 15번에서 아무 일도 일어나지 않습니다 ㅡㅡ -
김영찬
2004.03.30 16:11
거참 이상하군여...저두 15번에서 아무런 변화가 없어여...이건 어케해하냐요???답변 부탁드립니다... -
김승선
2004.03.30 21:26
마지막에 보니까 커스텀 많이도 하셨는데 저는 저런게 왜 없지?
메일 모양만 있네여..
추가하는 방법 아시는분 답변 부탁드립니다 -
간영우
2004.04.01 10:38
최곱니다...
리녈 해야되서
목마른 사슴이 샘물을 찾듯이
엔죠왔는데 역시나 ㅎㅎㅎ -
이재호
2004.04.03 21:52
커스텀 툴박스에 그림이 몇개 없다는 분은 커스텀툴박스 누르시면 오른쪽에 화살표 하나 있습니다. 거기서 ALL을 선택하면 된다는 ;;
글구 15번에 흰색 남아있는것은 그라디언트툴 사용법을 익히시면 될듯 하네요. 그라디언의 시작과 끝을 다르게 해서 적용해보세욤 ;; 저는 작업창의 크기를 키워서 회색바탕 나오면 거기서부터 그라를 시작했다는;;
글씨체는 몰겠네욤;; wst체가 제일 비슷한듯 ;;
-이 버튼 강좌를 너무나 조아하눈 왕초보였슴돠 ;; - -
발바리
2004.04.09 12:10
정말 심플, 깔끔 그 자체군여....넘 좋습니다..좋은 강좌 감솨합니다....^^ -
이창현
2004.04.17 13:38
좋은데@!
10자 압박//. -
stonefree
2004.04.22 23:24
15번에서 그라디언트적용을 아무리 많이 해도 색이 너무 연하게 나오네요. 뭘 신경써줘야할지 가르쳐주세요.^^ -
네비™
2004.04.24 01:15
저도 한번 바꿔봐야겠네요.. 좋은강좌 감사드립니다. -
新李治러브
2004.05.06 23:32
추천합니다. ^^ 너무 이쁜아이콘 -
이동현
2004.05.10 17:34
강좌 넘맘에들고 이뻐요.^^원츄~~~~~~ -
프리블레이즈
2004.05.19 00:25
구웃~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -
NeverDream
2004.05.20 16:47
그레이트!!! 감사합니다 -
『ToTi ™』
2004.07.20 20:57
감동.. ㅠㅠ;; 정말 쉬우면서도... 으..
이런걸 원했습니다 -
쭈양
2005.01.12 17:30
오~ 넘 멋져요..
강좌도 따라하기 쉽고 늘 원하던 강좌였어요..
Custom Shape Tool 이용을 몰라서 늘 궁금해 했네요^^
근데 아직도 궁금한것이..
혹 제질문을 보시는 분은 쪽지 남겨주세요..^^
우편모양과 지구본 모양은 Custom Shape Tool에 있는데..
영화랑 디스켓 모양은 없네요.
혹시 추가할수 있는지요? -
김지원
2005.04.05 20:34
제가원햇던강좌..;