[Expression Blend WPF강좌] 버튼을 만들어보자 - 1

Epxression Blend/WPF / Silverlight 2008/12/28 23:54 |


이제 직접 블랜드에서 활용할 수 있는 버튼 만들기 강좌를 시작하겠습니다
사실 개념정리 및 툴 사용법은 너무 지루해서, 이렇게 활용하면서 배워야 제일 와닿는 것 같아요. (저는)


<- 오늘 만들 버튼의 결과물은 이렇게 되겠습니다.
아주 간단하고 쉬워보이지요? ;)



블랜드에서, WPF파일로 열고 시작하겠습니다.
저는 WPF응용프로그램을 열어서 사용합니다.


1) 사각형을 하나 만듭니다. 그리고 오른쪽 속성창에서 Fill과 Stroke를 조절합니다.



노란색 박스 : Fill - 객체 안의 색 채우기
                   Stroke - 객체의 외곽선 색

빨간색 박스 : 1 - 색 없음
                   2 - 단색 채우기
                   3 - 그라데이션 색 채우기 (2색 이상)
                   4 - 타일 채우기 
                   5 - 브러쉬 리소스 (브러쉬로 저장해 놓은 리소스들 모음)

파란색 박스 : 동그랗게 생긴 포인트를 잡아당기면 각 진 사각형을 외곽을 Smooth 하게 만들어 줌.


2) 사각형 안의 색과 외각선 색, 그리고 Smooth를 주어서 이렇게 만들었습니다. (안에 색은 그라데이션을 주었고, 외각선은 단색으로 주었습니다)
안에 사각형을 하나 더 만들기 위해 Ctrl+C, Ctrl+V를 해서 복사하고 붙여넣기를 합니다. 그리고 똑같은 방법으로 다른색을 줍니다.


 

3) 색을 주고 두개의 사각형을 포갭니다.
나머지 사각형 하나는 Stroke를 주지 않고, 색 채우는 것은 저렇게 파란색 계통으로 주었습니당. :)
그럼 얼추 비슷한 모양이 나오는데, 여기에 이제 버튼에 광택나도록 해보겠습니당.
다시 사각형을 하나 더 만듭니다.


4) 사각형을 만들고 색을 흰색으로 주신다음, 노란박스에 A라고 써 있는 부분의 퍼센트를 줄이도록 합니다.
A - Alpha값 : 객체의 투명도 조절할 때 씁니다. 그리고 반투명해진 사각형을 위쪽에 배치시킵니다.


5) 대략 버튼의 모양새는 나왔습니다 :) 사각형 3개로 만들어진 모양을 이제 버튼으로 만들어야 겠죠?
전부 다 드래그를 해서 사각형 3개를 다 선택한 후에 그룹으로 만들어 줍니다.
그룹을 만들어 주는 단축키는 Ctrl+G (밑의 그림과 같이 Grid 패널로 묶이게 됩니다)




<- 사각형 3개만으로 이렇게 이쁜 버튼 모양이 두둥,









<- 그리드에 한데 묶인 걸 오브젝트 패널에서 보실 수 있습니다.






6) 다 묶은 상태로 위에 Tool > Make Button 을 클릭합니다.
새 창이 뜨면 버튼의 이름을 써 주시고 확인을 누르시면 버튼이 만들어 집니다.

 
7) 오브젝트 패널을 보시면 그리드로 한데 묶여 있던 그룹이 버튼타입으로 바뀌어지며 글씨가 보이게 됩니다.
그럼 버튼 만들기 완성!



완성작과 비교 :)
다음강좌는 이번강좌에서 만들었던 버튼을 가지고, 클릭하기 전과 클릭하고 난 후의 이벤트 강좌를 하겠습니다. :)



Posted by 진희쩜넷
TAG , , , ,
Trackback 1 : Comment 2

Trackback Address :: http://blog.jinhee.net/trackback/9 관련글 쓰기

  1. Subject: 이쁜 글씨, 3D 로고 버튼 프로그램 없이 바로 만들기 - CoolText

    Tracked from 브이에프의 컴퓨터 스마트폰 이야기 2011/03/18 19:48  Delete

    3D로 로고와 버튼을 만들려고 예전에 사용했던 프로그램을 찾으니 하드를 정리하면서 지웠는지 없어서 포기하고 검색을 해봤습니다. 프로그램없이도 바로 만들 수 있는 사이트를 찾아서 알려드립니다. 회원가입도 필요없고 바로 만들 수 있습니다. 로고는 33종류 버튼은 20개를 만들 수 있습니다. 물론 글자색과 배경색은 변경 가능하고 간단하게 여러가지 설정을 변경할 수 있습니다. 광고 수익으로 모든 가치를 대신하네요. 도와주려면 링크만 걸어달라고 하네요. 저는..

댓글을 달아 주세요

  1. 궁금해 2009/04/14 12:10 Address Modify/Delete Reply

    새로 버튼을 만들지않고 기존에 툴에서 제공하는 버튼으로 스타일을 만들수는 없나요?

    이렇게 새로 버튼을 만드는 것보다 기존 버튼에 스타일을 입히는것이 더 효율적이라 생각하는데요??...

  2. 궁금해 2009/04/17 11:37 Address Modify/Delete Reply

    ㅜ 관심이 아니라 잘못된 지식 전달을 바로 잡으려 한것 뿐입니다.