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

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



  

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


  



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


  

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


  

  

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


  



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


  

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


  

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


  



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


  

  

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


  

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




  

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


  

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


  

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


  

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


     

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


  

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




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




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



http://honey.co.ly