안녕하세요, 정진희 입니다.
오랫만에 글을 올립니다. 오늘은 유명한 웹 사이트의 버튼 스타일을 따라해 보는 시간을 가져보도록 하겠습니다.
웹사이트 : http://www.hlfragrance.com 에서 보시면 버튼의 롤오버와 롤아웃의 움직임을 보실 수 있습니다.
그럼 새로 런칭한 Expression Blend3 > 실버라이트 3에서 만들어 보도록 하겠습니다.
1) New Project를 열어 실버라이트 파일을 하나 생성합니다.
저는 프로젝트 명을 다음과 같이 지정하였습니다. 그리고 OK를 눌러줍니다.
2) 새 파일에서 Rectangle을 하나 그려줍니다. 그리고 그라데이션으로 설정해 줍니다.
3) 버튼 꼭지점을 둥글려주기 위해서 RadiusX와 Y값을 각각 20으로 설정해 주겠습니다.
4) 색상을 줄무늬처럼 하기 위해서 색상에서 그라데이션의 꼭지점 값 위치를 바꿔주어야 하는데요.
원하는 색상을 지정 후에 다음과 같이 꼭지점 위치를 가운데로 두도록 합니다.
두개의 꼭지점 위치가 가까우면 가까울 수록 더욱 선명하게 색상이 나뉘어집니다.
5) 색이 두가지로 나뉘어졌습니다. 자, 그럼 이 색상을 반복해야 할텐데요. 브러쉬 속성에서 화살표를 눌러보시면
다음과 같이 디테일한 속성이 펼쳐지는데요. 여기서 Spread Method 속성이 기본적으로 Pad 로 되어있습니다.
이것을 Repeat 으로 바꾸어 색상 펼쳐지는 방식을 반복으로 설정해줍니다.
6) 설정을 했는데 별반 달라보이지 않는데요. 그라데이션 툴을 선택하고 그라데이션 위치를 rotate시켜보겠습니다.
그라데이션 툴을 클릭하고 화살표 모양을 기울여주면 fill의 색상이 변경되시는 것을 보실 수 있습니다.
맛있는 막대사탕 색이 줄줄이 나오는 것 같네요 :-)
7) 조금 더 스타일링을 주기 위해서 흰색 rectangle를 추가합니다.
8) 그리고 위에 글씨를 작성해 줍니다. 글씨 작성 하는 방법은 왼쪽 툴 바에 T를 클릭하시고 작성하세요.
그리고 폰트에 대한 모양을 Text속성에서 변경해주세요. 저는 이 폰트로 설정했습니다.
9) 그리고 폰트를 path로 변경해줍니다. 변경해 주는 이유는 다른 컴퓨터에서 폰트가 깔려있지 않을 시에 글씨가 다른 폰트로 변경되어서 보이기 때문입니다.
10) path로 변경한 글씨를 하나 더 복사하여 레이어를 만드신 다음에 흰색으로 색을 변경해주고 위치를 조금 엇갈리게 정렬합니다. 그림자 효과처럼 보이도록 하기 위함입니다.
11) 이제 마지막 단계, 버튼 컨트롤로 만들어봅니다.
여태까지 만든 레이어들을 전체 선택하시고 Ctrl+G키를 눌러 하나의 레이어그룹으로 만들어줍니다.
그리고 Tools > Make Into Control을 클릭하면 다음과 같은 팝업창이 나옵니다. 여기서 버튼 컨트롤을 선택하시고 확인을 눌러주세요.
12) 버튼 컨트롤을 생성하면 나오는 content Presenter는 삭제해주세요. 그럼완료!
좀 더 디테일하게 작업하시면 오늘 벤치마킹한 사이트에서 사용한 버튼 스타일링과 아주 흡사할 것입니다. :-)
오늘은 쉬운 작업이였습니다 - 그럼 다음 강좌 때 뵙겠습니다 -
