안녕하세요.^^
지난 시간에 이어서 테이프 효과 버튼 만들기를 하도록 하겠습니다.
1.모션 효과를 주기 전에 버튼에 마우스가 오버되었을 경우 어떤 효과가 나도록 할 것인지
먼저 구상을 합니다.
묜이는 일반 상태에서는 테이프의 끝부분이 보였다가, 마우스를 갖다 대면 테이프가 활성화 되는
효과를 주어야겠다고 생각했습니다. 그림으로 보여드릴께요^^
(투명부분을 보여드리기 위해 검은 배경을 임시로 깔았습니다)
2.자 이해되셨나요?
그렇다면 우리가 저번시간에 그린 테이프에서 추가 작업이 이루어져야겠네요.
3. 1번과 2번영역으로 나뉘어 져야합니다. 마우스가 오버될 경우 1번이 활성화 되어야하니까요.
그런데 지난시간에 작업한 테이프 효과 파일에서는 초록색 부분중 1번영역에 해당하는 부분과
분리가 되지 않은 상태이기 때문에 저 부분을 한번 더 나누어주도록 하겠습니다.
일단 테이프의 색깔 있는 부분을 선택하여 하나 더 복사한 후 Divde 메뉴를 사용하면 세 영역으로 분리됩니다.
그럼 투명한 부분으로 쓰일 두개의 영역은 남겨두고 제일 끝 부분을 삭제한 후, 원본에서 그림자로 쓰이는
진한 부분을 하나 더 복사하여 원본과 같이 밑에 대어줍니다.
보기엔 달라진게 없어 보이겠지만 실제로 이루어지는 구성은 이렇게 바뀌는거에요 ^^;
(아.. 점점 설명이 어려워지는것 같네요 ㅠ_ㅠ)
4. 그리하여 아래와 같은 구조로 파일이 구성하게 되었다면
검은색 배경을 지워주고 오브젝트를 모두 선택합니다.
5. XAML로 내보내는 방법은 슬라이스 영역이나 선택된 오브젝트 등 여러가지 방법으로 내보낼 수 있습니다.
그런데 이번에 알게된 사실은 슬라이스로 영역을 맞추거나 선택한 오브젝트만 내보내더라도
내보낼 부분을 꼭 문서의 0,0 좌표 부분에 맞추어주어야 실버라이트용 XAML로 내보내지더라구요.
그렇게 하지 않으면 내보내질 영역과 실제 오브젝트와 영역이 일치하지 않게되는 현상이 있습니다.
PNG나 GIF와 같은 이미지로 내보낼 경우나 WPF Resource Dictionary로 내보낼 경우에는 괜찮은데 말이죠;
이 문제는 제가 더 알아보도록 하겠습니다.
6. File 메뉴의 Export 를 선택하면 다음과 같은 창이 나옵니다. 주의해야할 부분은 내보낼 형식을 꼭
XAML Silverlight Canvas 로 선택해야 한다는거예요. 실버라이트용 xaml로 내보내야 하기 때문입니다.
7. Exprot All 을 눌러주면 본인 지은 이름으로 xaml 파일이 생성됩니다. 저는 bookmark 라고 지어주었어요.
지정한 파일 경로를 확인하면 다음과 같은 xaml 파일이 생성된 것을 확인할 수 있습니다.
이렇게 디자인에서 작업한 파일을 XAML로 내보내는 과정까지 하였습니다.
블렌드에서는 이 xaml 파일을 불러들여 모션을 주는 작업을 할께요..^^
설명을 최대한 쉽게 하고 싶었는데.. 그게 마음대로 잘 안되는것 같습니다. T^T;;
이해가 안가는 부분이 있다면 댓글을 달아주시기 바래요..^^ 설명해드리겠습니다..
그럼 오늘은 이만 마칠께요~!
'Expression Studio/Design 활용강좌'에 해당되는 글 4건
- 2008/04/27 [Expression Design 활용강좌] 테이프 효과 버튼 2탄(XAML로 내보내기) (2)
- 2008/04/24 [Expression Design 활용강좌] 테이프 효과 버튼 1탄(디자인하기)
- 2008/03/04 [Expression Design 활용강좌] 무지개 그리기
- 2008/02/23 [Expression Design 활용강좌] 아쿠아버튼 만들기
활용한 간단한 버튼만들기 강좌를 써볼께요.
1. Expression Design 을 이용한 버튼 디자인
2. Expression Blend 를 이용한 버튼 이벤트 효과
이렇게 진행을 하도록 하겠습니다.
물론, 블렌드 안에서도 간단한 버튼 디자인은 가능하지만 디자인툴을 사용해서 하도록 할께요
(배운것은 무조건 써먹자!! 후훗~)
자~ 이제 익스프레션 디자인을 켜도록 합시다~!
1. 책 이미지를 삽입하거나 혹은 만들고 싶은 배경을 만들어 줍니다..
저는 간단하게 샘플 배경으로 익스프레션 디자인에서 그렸습니다. 사각형을 하나 그리고 라이브효과의
Drop Shadow 기능으로 그림자를 만들어 책장과 같은 효과를 만들었어요.
그리고 제가 좋아하는 태연의 '만약에'라는 노래가사를 넣었죠.(한번 들어보세요..정말 좋아요 ^^)
이건 테이프 효과를 보기 위해서 그려본 것이고 실제로는 블렌드에서 원하는 이미지를 넣으시면 됩니다.
2. 본격적으로 테이프를 그려볼께요. 사실 너무 간단해요 ㅠ_ㅠㅋㅋ
사각형을 하나 그려주시고 CornerRadius(각의둥글기)의 값에 8px를 넣어줍니다.
색깔은 #70EB07를 입력해주세요.
3. 그린 사각형 옆에 같은 높이의 사각형을 그린 후 살짝 포개줍니다. 저처럼 해주세요~ㅎㅎ
사각형의 색은 아무래도 좋습니다^^ 잘라버릴꺼니까요.
4. 두 개의 사각형을 선택한 후, Object 메뉴의 Path Operation의 하위메뉴인 Divide를 선택합니다.
그러면 패스의 겹치는 부분대로 패스가 분할되는데요. 3개로 분할되면 제일 마지막 부분만 남겨놓고 삭제합니다.
5. 자 그러면 테이프의 칼라풀~한 부분이 남아요.. 그럼 남은 부분을 하나 더 복사하여 색을 #2FB607로
입력하고 사각 모서리부분의 노드를 앞으로 당겨 짧게 만들어 주세요. 노드를 이동할때는 Shift 키를 누르면
동일선상에서 이동이 가능해집니다.
6. 이렇게 가로길이가 조금 더 짧은 사각형을 Arrange 메뉴의 Send to Backward 를 눌러 위의 사각형보다
뒤로 보낸 후에 다음과 같이 놓아줍니다. 그림자 효과 같은거에요..조금 더 예뻐 보이게 하기 위해서..^^
6. 제대로 되었나요? 그럼 이제 테이프의 투명한 부분을 만들어야겠죠. 간단합니다. 사각형과 같은 높이의
직사각형을 만들어주고 흰색으로 채워준 다음에 윗 사각형 옆에 놓아주세요.
7. 이제 마지막 단계입니다. 테이프의 흰색부분과 붙여진 부분은 투명해야겠죠? ㅎㅎ
흰 사각형과 바로옆의 윗 사각형을 같이 선택하고 Opacity의 값을 70%로 줄여줍니다. 그리고 나서
세 오브젝트를 모두 선택하여 그룹화 합니다. Ctrl+G 누르시면 돼요.
8. 다 완성되었어요.. 만들어진 테이프를 이미지의 끝부분에 얹어주면 됩니다.
색깔은 여러가지 색으로 다양하게 해보세요~~
다음 시간에는 오늘 강좌에서 그린 테이프를 가지고 버튼 이벤트로 모션효과를 해보도록 하겠습니다.
좋은밤 되세요..^^
호홋.. 오늘은 눈이 왔어요....-.-그것도 함박눈이 마구마구.. 서울은 비가 올줄 알았는데;
자자~ 그럼 오늘은 아~주 쉬운..무지개를 그려볼께요. 무지개라는 예제 자체는 별것 아닐지 몰라도
그리면서 쓰는 툴들의 사용법을 잘 기억해두세요. 실제로 아주 많이 쓰이는 기능들이니까요..
1. 원 툴을 클릭합니다.
2. 쭉~ 드래그하여 원을 하나 그려주세요.
3. 무지개 색을 순서대로 넣도록 합니다. 우선 제일 바깥의 빨간색 코드를 #DF0000 로 넣어주세요.
4. 그 다음, 그린 원을 복사하여 크기를 줄여줍니다. 주의할것은..크기를 임의로 줄이면 무지개 두께가
굵었다가 얇았다가 제멋대로가 될거에요. 그럼 일정한 비율로 줄이려면 어떻게 해야할까요?
5. 맨 아래 도구모음을 살펴보면 톱니바퀴 모양 아이콘이 있어요. 클릭하면 Scale As Percentage 라고
있는데 체크를 해주세요. 백분율로 크기를 조절할 수 있게 해주는 기능입니다. 이 기능을 체크하면 아래에
오브젝트의 가로세로 길이를 조절하는 단위가 %로 바뀌게 됩니다. 두번째 원은 90% 줄여주세요. (90 입력)
6. 줄인 원을 차곡차곡 포개면서 작업을 반복합니다. 제일 마지막에 그린 원을 복사하고 90%로 줄여주고
색넣고, 복사하고 줄여주고 색 넣고..반복!! 주황색은 #FF9200 노란색은 #FFD800 초록색은 #0DC104을
넣어줍니다. 초록색 까지만요!! 파란색부터는 다음설명으로..^^
7. 제가 왜 파란색부터는 잠깐! 을 외쳤을까요.. 예민하신 분들은 알아채셨을텐데, 원의 크기가 줄어들면서
90%로 일정하게 줄이다 보면 점점 원사이의 간격이 줄어듭니다. 두께가 얇아지는거죠.. 그러므로 파란색
부터는 88% 정도로..보라색과 마지막 하얀색은 86%정도로 줄여주세요. 좀 손이 가죠? -_-;;
파란색은 #054EDD 남색은 #042B79 보라색은 #420998을 넣어줍니다. 그러면 일단 무지개원이 완성돼요!
8. 그러나 제마음대로 원을 포갠지라.. 비뚤하게 얹어진 원을 보고 있노라면 맘이 아프죠^^? 모든 원들을
가로세로 열맞춰~! 시켜보겠습니다. 일단 원 패스들 전체를 선택하고 아래의 도구모음에서 Align 메뉴를
클릭하세요. 그럼 정렬시키는 기준이 여러개가 나오는데, 우리는 가로세로 정렬을 해야하니 제일 위에
Centers 를 선택합니다.
8. 자..정렬은 되었으나~동그란 무지개는 없죠 -_-! 뭐..원래 무지개는 원이라고는 하지만서도;;
그럼 이제 반토막을 쳐보죠! 원 전체를 클릭하고 그룹화 시켜줍니다. Ctrl + G를 하셔도 됩니다.
9. 그리고 무지개를 반정도 가릴만한 사각형을 사각형 툴로 그려줍니다.
10. 패스를 분할하도록 해야겠죠. 기존에 묶여진 무지개묶음과 사각형의 패스를 전체 선택한 후 패스가 겹치는
부분을 나누어주겠습니다. 도구모음에서 Path 메뉴 중 Divide를 선택합니다.
11. 분할된 부분중 아래에 쓰이지 않는 부분만 클릭하여 삭제하도록 합니다.
12. 이렇게~ 남은부분을 또 그룹화 시켜주면..무지개가 완성됩니다. 다만, 한가지 아쉬운 점이 있다면,
Divide로 인하여 원의 겹치는 부분들에 흰 실선과 같은 공백이 생기는 것이죠.. 사실 일러스트레이터에서는
패스를 분할하여도 이런 공백이 생기지 않습니다. 익스프레션 디자인도 차후버전에는 더 디테일하게
발전하리라 기대해봐요 ^^
13. 여기서 끝이 아닙니다.. 이정도로 만족 못하겠다.. 나는 죽어도 흰 실선이 싫어요 -0- 하시는 분들은..
또 하나의 방법이 있습니다. 다시 되돌아가서.. 다 그려진 동그란 무지개에서 Fill과 Stroke영역 모두 채워
지지않은 사각형을 하나 그리고 선택한 후 마우스 오른쪽을 클릭하여 Arrange의 Send to Back를 선택하여
제일 뒤로 배치시킵니다.
14. 그리고 모두 선택한 후 Object 메뉴에서 Clipping Path 메뉴의 하위기능인 Make with Bottom Path를
선택하세요. 제일 뒤에 있는 패스로 클리핑(마스킹) 시켜주겠다는 것입니다.
15. 이렇게 하면 맨 뒤에 배치된 사각형 만큼 마스킹이 되어진 부분의 영역만 보이게 됩니다.
16. 무지개를 클릭할때마다 클리핑 되지않은 영역까지 다 선택이 되지만 작업영역에서는 투명하게 처리되기
때문에 배경을 가린다던가 하는 걱정은 하지 않으셔도 됩니다. ^^
자~~ 이로써.. 무지개가 탄생!! 이렇게 간단한 무지개를 그리려고 해도 많은 기능이 사용되죠?
앞서 말씀드린것처럼 오늘 사용한 정렬, 패스분할, 클리핑 이러한 기능들은 어떤 작업을 하던지 상당히
자주 쓰이는 기능들이니까.. 꼭꼭 기억해두세요..^^
그럼 다음에 또 만나요~~(막이래~뽀뽀뽀도 아니고..;) Bye~
안녕하세요~ 드디어~ 아기다리 고기다리던~ 활용강좌를 시작할 수 있게 되었어요..
제가 기초강좌에서 메뉴와 툴에 대한 사용법을 다 다루었기 때문에,
디자인 툴을 처음 접하는 초보자 분들도 잘 따라 오실거라 생각이 듭니다.^^
오늘은 너무도 흔하디 흔하지만~ 꼭 한번 그려보고 싶은(?) 아쿠아 버튼을 만들도록 하겠습니다.
먼저 완성본을 볼까요?
이렇게 다양한 색으로 만들 수 있습니다. 그럼 시작할께요~
1. 먼저 Expression Design 툴을 켭니다. 그리고 File메뉴 에서 새 문서를 하나 열어주세요.
2. 툴박스에서 Ellipse 툴을 선택합니다.
3. 문서 영역에 드래그로 알맞은 크기의 원을 그려줍니다.
4. 오브젝트를 선택한 후 오른쪽 Properties 패널에서 Fill 영역을 빨간 사각형 부분의 그라데이션으로
채워줍니다.
5. 채워진 그라데이션의 방향을 Gradient Transform 툴을 사용하여 변경시킵니다.
일정한 곳에 포인터를 찍고 아래로 드래그 하면 그라데이션의 방향이 바뀝니다.
6. 겉부분의 검은 스트로크는 필요 없겠죠? Stroke 채우기를 없애줍니다.
7. 이제 동그란 버튼에 원하는 색상을 넣어줄께요. Fill 부분을 선택하면 그라데이션을 조절하는
슬라이더가 있습니다. 첫번째 그라데이션 포인트를 선택하고 원하는 색상을 넣어줍니다.
저는 색상값에 #013992 을 넣었습니다.
8. 두번째 포인트에도 버튼의 하단부분에 들어갈 색상을 넣어줍니다. 저는 #FF18CDBF 를 넣어주었어요.
9. 자 이제..물방울 느낌 효과를 내야겠지요? 1단계에서처럼 작은 원을 하나 더 그려줍니다.
그리고 역시 Stroke 영역은 없애준 채로 Fill 영역은 그라데이션으로 채웁니다. 그러면 아까의 그
그라데이션 패턴이 채워집니다.
10. 효과를 줄 부분의 그라데이션 슬라이더바를 이용하여 첫번째 포인트와 두번째 포인트를 둘 다
흰색으로 채워줍니다.
11. 그리고 첫번째 포인트의 알파값을 60%으로, 두번째 포인트의 알파값을 0%로 해줍니다. 그리고
저는 두번째 포인트를 왼쪽으로 조금 이동하여 알파값이 0% 인 영역을 좀 넓혔어요..
12. 효과를 준 작은 원을 하나 더 복사하여 180도 회전시킨 후 적절한 크기로 줄여줍니다.
13. 자 이로써 버튼 배경이 완성되었습니다~
완성된 배경에 원하는 글자나 아이콘을 넣어주시면 끝이 납니다.
허이구..ㅜ.ㅜ 내일 아침..아니 오늘 일찍 일어나야하는데.....
ㅠ_ㅠ 시간이 벌써..흑흑..좋은꿈 꾸시고 좋은주말 되세요 ^^
