안녕하세여~^^ 짱묜입니다. 툴 소개하는 강좌만 하면 지루할것 같아서 디자인과 블렌드를
활용한 간단한 버튼만들기 강좌를 써볼께요.
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. 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. 다 완성되었어요.. 만들어진 테이프를 이미지의 끝부분에 얹어주면 됩니다.
색깔은 여러가지 색으로 다양하게 해보세요~~
다음 시간에는 오늘 강좌에서 그린 테이프를 가지고 버튼 이벤트로 모션효과를 해보도록 하겠습니다.
좋은밤 되세요..^^
