메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

pho_3_8_44.gif

{완성작}완성된 버튼입니다.

오늘 배울 예제에서는 레이어 스타일을 이용해서 투명한 느낌의 버튼을 만들어보도록 하겠습니다.
그동안 아쿠아 스타일을 쉽게 따라할수 있게 만들어놓은 많은 강좌들이 있었기 때문에,
조금 다른 기법으로 만들어보도록 할께요.
전에 올라왔던 강좌들만큼 쉬워보이진 않을지 몰라도, 차근차근히 설명대로만 따라하시면 누구나 하실 수 있을겁니다.

pho_3_8_01.gif

pho_3_8_02.gif   pho_3_8_03.gif

1. 가로 세로 200px 의 새작업창을 열어주신 다음,
작업창 정중앙을 표시하기 위해서 가이드라인을 그어주세요.
눈금자에서 드래그하면 가이드라인 나옵니다.
눈금자가 안보이신 분들은 Ctrl + R 해보세요.
그 다음, 레이어 팔레트에서 새 레이어를 추가해주세요.
강좌의 이해를 돕기 위해서 레이어의 이름을 임의로 circle 이라고 고쳐봤습니다.
그 상태에서 둥근 마퀴툴을 선택하셔서 위에 보이는 옵션바에서 style 에 Fixed Size 를 선택해주시고,
Width 에 120, height 에 120 을 설정해주신 다음,
가이드라인이 교차하는 작업창 정중앙을 Alt + Click 해서 선택 영역을 흰색으로 채워주세요.
여기까지 작업이 끝나면 작업의 편리성을 위해서 Ctrl + H 하셔서 가이드라인을 안보이게 숨겨주세요.


pho_3_8_04.gif   pho_3_8_05.gif

pho_3_8_06.gif

2. 그림자를 만들기 위해서 레이어 팔레트에서 circle 레이어를 하나 복사해 주세요.
복사된 레이어의 이름을 임의로 shadow 라고 고쳤습니다.
shadow 레이어에서 Ctrl + I 해서 컬러를 검은색으로 반전시켜주고,
Filter - Blur - Gaussian Blur 를 선택해서 10 의 수치를 넣어 적용시켜주세요.


pho_3_8_07.gif   pho_3_8_08.gif

3. 레이어 팔레트에서 shadow 레이어를 circle 레이어 아래로 드래그해서 위치를 바꿔주신 다음,
Ctrl 키를 누른채로 키보드의 화살표키를 이용해서 아래로 6 px 만큼 이동시켜 주세요.
그리고 Ctrl + T 를 눌러서 위의 그림처럼 하단의 포인터를 작업창 맨아래까지 드래그해 주시고,
엔터키로 적용시켜주세요.


pho_3_8_09.gif   pho_3_8_10.gif

pho_3_8_11.gif   pho_3_8_12.gif

4. 그림자를 좀더 자연스럽게 표현하기 위해서 shadow 레이어에  Add Layer Mask 한 후,
검은색에서 흰색으로 가는 그라데이션을 작업창 위에서부터 아래까지 드래그해서 적용시켜줍니다.
이 때 전체적으로 그림자를 좀 약하게 해주기 위해서 Opacity 를 45 % 정도로 조절해줍니다.


pho_3_8_13.gif   pho_3_8_14.gif

pho_3_8_15.gif

5. 레이어 파레트에서 새레이어를 하나 추가해주세요.
레이어의 이름을 임의로 small circle 이라고 고쳤습니다.
또 둥근 마퀴툴을 선택하셔서 가로 세로 106 px 의 원을 정중앙에 그려서 검은색으로 채워줍니다.
이때 아까 숨겨놓은 가이드라인을 다시 Ctrl + H 해서 꺼내놓고 아까처럼 Alt + Click 하시면 됩니다.
작업이 끝나면 다시 Ctrl + H 해서 가이드라인을 숨겨주세요.


pho_3_8_16.gif   pho_3_8_17.gif

6. 입체감이 나는 버튼을 만들기 위해서 small circle 레이어를 위쪽으로 4 px 만큼 이동시켜줍니다.
그리고, 레이어 팔레트에서 Fill 의 수치를 0 % 로 낮춰주세요.
또는, small circle 레이어를 더블클릭해서 블렌딩 옵션창을 열고, Fill Opacity 를 0 % 로 낮춰주셔도 됩니다.


pho_3_8_18.gif   pho_3_8_19.gif

7. 좀전에 투명하게 만든 부분에 그라데이션을 적용시키기 위해
레이어 팔레트에서 small circle 레이어를 더블클릭해서 Gradient Overlay 를 선택해주시고,
Opacity 에 75 %, Angle 에 -90 으로 각각 설정해주세요.


pho_3_8_20.gif   pho_3_8_21.gif

pho_3_8_22.gif

8. 이번엔 레이어 팔레트에서 버튼에 하이라이트 부분을 만들 새 레이어를 추가해주세요.
알기 쉽게 임의로 레이어의 이름을 highlight 라고 고쳤습니다.
다시 둥근 마퀴툴을 선택해서 가로 세로 84 px 의 정중앙에 선택해주세요.
아까처럼 Ctrl + H 해서 숨겨놓은 가이드라인을 다시 꺼내시고, Alt + Click 하시면 됩니다.
그런 다음, 선택영역을 윗쪽으로 13 px 만큼 이동시켜주시고, 검정색으로 채워주세요.
여기까지 작업이 끝나면 이제 가이드라인을 없애셔도 좋습니다.
View - Clear Guides 하시면 됩니다.


pho_3_8_23.gif   pho_3_8_24.gif

pho_3_8_25.gif   pho_3_8_26.gif

9. 하이라이트 레이어의 Fill 을 0 % 로 조정해주세요.
레이어를 더블클릭해서 블렌딩 옵션창을 여셔서, Gradient overlay 를 선택해주신 후,
위의 그림처럼 그래디언트 바를 만들어서 Opacity 에 90 %, Angle 에 -90 을 설정해주세요.


pho_3_8_27.gif   pho_3_8_28.gif

10. 하이라이트 부분의 경계를 좀더 부드럽게 표현하기 위해서
Filter - Blur - Gaussian Blur 하셔서 1 px 을 적용시켜주세요.
미세한 차이지만 경계부분이 조금 더 부드러워진걸 확인하실 수 있습니다.


pho_3_8_29.gif

pho_3_8_30.gif   pho_3_8_31.gif

11. 버튼의 형태는 어느정도 완성이 되었고, 이제부터는 좀 더 완성도를 높이는 작업을 하겠습니다.
circle 레이어를 더블클릭해서 블렌딩 옵션창을 열어주시고, Gradient Overlay 를 선택해주세요.
위에 보이는 그림처럼 그래디언트바를 만들어주시고, Opacity 에 22 % 로 조정해주세요.
버튼 테두리 부분이 좀더 입체적으로 변했습니다.


pho_3_8_32.gif   pho_3_8_33.gif

12. 이번엔 레이어 팔레트에서 circle 레이어를 선택해서 그 외곽에 Glow 효과를 넣어봅시다.
circle 레이어를 더블클릭해서 블렌딩 옵션창을 열어주고,
stroke 를 선택해서 size 에 1, position 에 Inside, Color 에 흰색을 설정해주세요.
버튼 테두리 부분에 흰색이 들어가서 좀더 입체적인 느낌으로 변했습니다.


pho_3_8_34.gif   pho_3_8_35.gif

13. 레이어 팔레트에서 small circle 레이어를 선택해서 역시 Glow 효과를 줘봅시다.
small circle 레이어를 더블클릭해서 블렌딩 옵션창이 열리면 Drop Shadow 를 선택해주세요.
Blend Mode 는 Screen 으로 바꿔주고, Color 에 흰색, Opacity 는 100 %, angle 은 90, Distance 는 13,
Size 는 10 으로 설정해줍니다.
small circle 레이어에 흰색의 그림자가 들어가서 테두리 부분이 환해진걸 확인하실 수 있습니다.


pho_3_8_36.gif   pho_3_8_37.gif

14. small circle 레이어의 경계선을 좀더 뚜렷하게 만들어주기 위해
역시 블렌딩 옵션창에서 Stroke 를 선택해줍니다.
Size 는 1 px, Position 은 Inside, Fill Type 은 Gradient, Angle 은 -90 으로 설정해줍니다.
언뜻 보면 별차이 없어 보이는데 자세히 보면 small circle 주변에 검은색에서 흰색으로 가는 테두리가 넣어져서
좀더 경계가 뚜렷해졌습니다.


pho_3_8_38.gif   pho_3_8_39.gif   pho_3_8_40.gif

15. 이제 작업도 거의 막바지네요. 조금만 더 힘내세요 ^^
레이어 팔레트에서 새레이어를 하나 더 추가해줍니다. 그 레이어엔 빛이 반사되는 부분을 넣어줄겁니다.
레이어의 이름은 임의로 highlight2 라고 고쳤습니다.
브러쉬 툴을 선택해서 브러쉬 사이즈를 70 px 로 설정해줍니다. 이 때 전경색은 흰색입니다.
버튼 테두리 부분을 제외한 small circle 레이어 부분에만 하이라이트 효과를 주기 위해서
highlight2 레이어가 선택되어진 상태에서 Ctrl 키를 누름과 동시에 small circle 레이어를 클릭해서
small circle 부분만 선택영역으로 Load 해줍니다.
브러쉬로 위에 부분을 살짝 리터칭해서 빛에 반사되는듯한 느낌을 줍니다.


pho_3_8_41.gif   pho_3_8_42.gif

16. 마지막으로 그 안에 원하는 글씨를 써넣고, 그 레이어를 더블클릭해서
블렌딩 옵션창이 열리면 위 그림과 같이 옵션을 설정해줍니다.
여기서는 글쎄에 흰색으로 그림자를 넣어서 입체감을 표현해봤습니다.


pho_3_8_43.gif

17. 무채색으로 버튼이 완성됐지만, 컬러를 입히고 싶은 경우엔
레이어 팔레트에서 small circle 레이어를 더블클릭해서 Color Overlay 를 선택해준 다음,
Blend Mode 를 Overlay 로 바꿔주고, 원하는 컬러를 설정해주면 됩니다.


pho_3_8_44.gif

18. 완성된 모습입니다.
응용만 하면 둥근 버튼 말고도 다른 여러가지 모양으로 버튼 제작이 가능합니다 ^^
그나저나 도움이 됐는지 잘 모르겠네요,
긴 강좌였긴 하지만 나름대로 열심히 만들었으니까 뭔가 하나쯤은 남는게 있을거라 생각하고 올려봅니다 ^^



http://honey.co.ly
번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48027
848 [bosskooi]고대 종이질감 [25] file 박형준 2003.10.21 26306
847 햇빛이 비추는 효과내기 [9] file SeasonSonata 2003.10.21 15508
846 [케이] Spike (까시-.-) 를 만들어봅시다; [19] Kei 2003.10.20 10022
845 Layer 설명![너무 간단한가...;] [3] EyE 2003.10.19 5681
844 진짜 초짜를 위한 레이어 복사&추가하기 (영문버젼6.0) [8] file 아싸 종진스 2003.10.19 7974
843 3D Transform 을 이용한 기포(물방울) 만들기. [19] 눔곰 2003.10.18 11801
842 [케이] 오브(orb)를 만들어봅시다! [20] Kei 2003.10.17 8666
841 초승달 그리기 [16] 체리향기∮ 2003.10.12 10014
840 [케이]Dark Layer [호일도됨-.-] [31] Kei 2003.10.11 13037
» 귀여운 아쿠아 버튼 만들기 (새로운 버젼) [39] file 이오르 2003.10.10 46699
838 [케이] 제목은 심플하게 Feather effects [37] Kei 2003.10.09 15627
837 네모난 사진 동그랗게 만들기 강의입니다. [6] file 이형진 2003.10.09 987
836 [케이]LCD 인터페이스? [36] Kei 2003.10.08 13477
835 필터를 사용하여 간단하게 추상화를 그려봅시다 [7] file 버찌소년 2003.10.08 8878
834 사진의 윤곽만 사용하기 [6] file 여어자 2003.10.06 18555
833 흔들리는 네온사인 만들기 (보통 네온사인과 다른기법) [11] file 이오르 2003.10.06 13361
832 [케이] 링만들기 - 중복찾기 해봤으나 없었음; [16] Kei 2003.10.04 9571
831 MP3리모컨 버튼만들기... [18] file (-_ㅡ*) 2003.10.03 19993
830 Border 만들기 - 보통 홈피 오른쪽에 산입하는경우가 많군요 [25] Kei 2003.10.02 16399
829 [ Game I의 이상한 강좌 ] 오디오 스피커 효과내기 [9] file Game_I 2003.10.01 7095