지난해말과 올해초에 걸쳐 디자인 정글 아카데미에서 툴테크닉 워크샵을 8강과정과 3일 과정- 해서 총 4번 진행했었는데요~
실습부분자료요청도 있고 해서-
실습내용 몇가지를  강좌로 공유할께요.

먼저
1탄 : 눈물의 에드워드와 벨라!
나의 롸버트와 그의 여자의 사진을 향한 저의 마음을 표현해보는 실습을 통하여-
Blend와 친숙해지는 실습을 해보도록 하겠어요 ㅠㅠ


사용한 이미지를 첨부합니다.
롸버트와 그녀의 다정한 폴라로이드 사진위에 눈물이 떨어지고 사진이 번지는 ...
(어쩌다가 이런 예제를 생각해 냈는지?)
예제를 만들어 볼께요.

학습목표
1. Effect
2. Transform
3. Storyboard
4. Behavior
사용해보기.


1. Silverlight 3 Application + Website 프로젝트를 하나 만들어 줍니다.



2. Add Existing Item... 을 선택해 프로젝트에 사용할 이미지를 추가해 보겠습니다. 
(상단에 압축파일로 추가 해 두었어요!)



3. 압축파일안의 sample01~03.png를 아트보드위에 드래그 앤 드롭해서 꺼내 줍니다.
sample.png파일은 grid의 배경으로 쓸것이므로 잠시 내버려 두고!



4. 세 이미지의 이름을 적당히 정해 준다음에 세 이미지를 Group into > Grid로 잡아 넣어줍니다.
이제 이부분이 사진 부분이 될 거에요.




5. 4번에서 묶은 Grid의 제목을 Photo로 정해 주었습니다.
Photo grid의 프로 퍼티를 설정해보겠어요.
1) Background를 선택하고 4번째 탭 Image Brush를 선택합니다.
2) Strech 속성은 Grid의 크기와 상관없이 이미지 원본 크기 그대로 뿌려지는 None 선택
3) Image Source는 배경으로 쓸 Sample.png선택
4) Layout에서 이미지 원본 사이즈로 Width와 Height를 잡아주고
5) Alignment를 중앙 정렬로 잡아 줍니다.



6. FaceBel과 FaceEd는 눈물이 Blur Effect를 줄 부분입니다.
두 이미지를 위 그림과 같이 정확한 위치로 잡아 줍니다.



7. 그리고 두이미지가 같이 번지고 보이고- 할 수 있게  Grid로 묶어 줍시다.
(묶으면서 위치가 좀 틀어질 수도있으니 잘 살펴 봅시다~)



8. 7에서 묶은 Grid의 제목을 BlurPhoto로 정해 주었습니다. 요 BlurPhoto를 선택하고,
1)  Appearanc > Effect > New 버튼을 선택해줍니다.
2) Effect선택창이 뜨면  Blur를 선택하고 OK를 눌르면 Effect 속성에 옵션이 생깁니다. 적당한 수치로 조절해줍시다.
3) 그리고 평소에는 보이지 않아야 하므로 Opacity를 0%로 바꿔서 숨겨둡시다.



9. 이제 추가한 물방울 모양 이미지!(나의 눈물!!!)를 좀 자연스러운 모양으로 만들기 위해 opacity mask 를 적용해 보겠어요.
Drop의 뾰족한 부분이 0% - 둥근아래부분이 100%이 되게 설정 해줍니다.

Tip) OpacityMask는 컬러와 상관없이 Opacity만큼 대상을 보이게 해줍니다.
100%이면 다보이고 0%면 안보이는 식.
때문에 Gradient Brush 로 대상을 점점 안보이거나 점점 보이게 만들때 사용하기 적합합니다.



10. 그리고 Drop의 위치를 UserControl밖으로 빼버려서 평소에는 안보이게 해둡니다.



11. 이제 폴라로이드 모양의 포토의 프레임부분을 만들어 볼께요.
Photo Grid를 Group into > Border 로 묶어 줍니다.



12. 11에서 묶은 Border의 제목을 Polaroid로 정해주고 Photo의 Width와 Height를 다시 확인해주세요.
Border로 묶으면서 마음대로 변했지도 모릅니다!



13. 이제 Polaroid의 속성을 정해줍니다.
1) 먼저 Background를 Gradient Brush로 색을 그럴싸하게 정해주고-


2) BorderBrush의 색을 지정해주고
3) BorderThickness로 테두리 굵기를 지정합니다.
4) CornerRadius로 테두리의 둥글기를 지정합니다.
5) Effect의 New버튼을 클릭해서 Effect선택창에서 DropShadow를 선택해줍니다.



Effect - DropShadowEffect 관련 상세 속성들이 등장합니다.
순서대로
블러의 크기 - 색 - 위치 - 투명도 - 거리



6) Layout 에서 Width와 Height를 Auto로 만들어주고
7) 폴라로이드 프레임부분처럼 보이게 Padding을 상좌우 25, 하 50정도 지정해줍니다.



8) 폴라로이드가 약간 기울어져 보이게 만들어 줄겁니다.
Transform > Scale > y Scale을 조금 줄여주고,
Projection 에서 X Scale을 조금 돌려서 기울어져있는 듯한 폴라로이드로 만들어 줍니다.
아트보드를 보면서 그럴싸한 값으로 만들어 주면 되겠죠~

이제 눈물이 떨어지고 사진이 번지는 애니메이션을 만들어 보겠어요.


14. Objects and Timeline 패널에서 New... 버튼을 클릭해 새 스토리보드를 추가 합니다.



SbDrop이라고 간단하게 제목을 지어 줬어요!



15. Objects 에서 Drop을 선택하고 Keyframe 추가하여 Drop의 Animation을 만들어 줍니다.
0초에 keyframe을 하나 추가하고, 0.3초로 노란 시크바를 옮겨 keyframe을 추가 합니다.



0.0 ~ 0.3초 동안 일어날 animation을 추가 하는것이죠.
노란바가 0.3초에 있고 Drop이 선택되어있는지 확인을 한 뒤 바뀔 속성들을 설정해봅시다.



16. Drop이 거의 떨어졌을 때, opacity 를 30% 설정해주고, Y좌표를 옮겨 사진위로 적당히 떨어지게 설정합니다.



17. 0.4초 지점에 keyframe을 하나 더 추가하고 이제 Drop이 완전히 없어지게 만들겁니다.


Opacity는 0%
그리고 Scale은 바닥에 떨어지면 물방울이 번지는 효과가 조금 그럴싸하게- x  scale은 약간 키워주고,  Y scale은 약간 줄여줍니다.


Tip) keyframe조절
Animation을 실행해보기 위해 타임라인의 플레이 버튼을 눌러봅시다.
현재 Drop의 Animation이 매우 빠르게 움직입니다.
이렇게 전체 비율에 맞게 Animation을 만들었으나 - 더 천천히 진행되게 하기위해서는


위 그림과 같이 keyframe전체중의 끝부분 파란 핸들을 잡고 Drag해주면
현재 만들어 둔 Animation의 타임 비율이 유지된채 전체 시간이 늘어나게 됩니다.

한 keyframe의 시간만 조절하기위해선 한 keyframe을 선택해서 옮겨주고,
다중 keyframe을 선택해서 조절할 때는 Ctrl + keyframe 각각 선택으로 다중선택이 가능합니다.
Ctrl 누른채로 Drag 하여 다중 선택을 할 수도 있습니다.



19. 이제 Drop이 바닥으로 떨어졌으니, 사진이 번질 차례입니다.
위 그림과 같이 BlurPhoto를 선택하고 0.0, 0.9, 1.3초 부분에 Keyframe을 추가해줍니다.
그림의 A구간(0.9~1.3) 동안 BlurPhoto의 Animation이 동작하게 할거에요. 
BlurPhoto의 1.3초 구간이 선택되어 있는지 확인을 하고,



Opcity를 100%로 변경해 줍니다.



20. StoryBoard가 다 만들어 졌으면, Objects and Timeline 패널의 SbDrop 스토리보드 제목옆의 X (Close StroryBoard) 버튼을 클릭하여, StoryBoard Recording을 끝냅니다.


StoryBoard를 생성했으니,
이제 StoryBoard를 실행할 이벤트를 설정해줍니다.



21. Asset Library를 열어 Behavior > ControlStoryboard Action 을 Drag 하여 이벤트가 일어날 대상에게 Drop해 줍니다.



Polaroid를 클릭하면 스토리보드를 실행하게 할 것이므로 Polaroid에 붙여줍시다.



22. Objects 패널에서 ControlStoryboardAction  이 선택한뒤 속성을 설정해줍니다.
SourcName은 Polaloid에 붙였기 때문에 자동적으로 Polaroid가 선택되어있고,
EventName도 기본으로 MousLeftButtonDown이 선택되어 있습니다.

Common Properties의
ControlStoryboardOption 도 기본으로 Play가 선택되어져 있고
Storyboard 속성에서 어떤 Storyboard를 실행할지만 정해주면 끝!
SbDrop을 선택해 줍시다.




자- 이제 Run Project를 눌러 실행 해 볼까요?

말로하는 것보다 글로 쓰니까 훨씬 어렵네요- 휴으으-
만든 파일 첨부합니다!

다음은 Behavior 설명하면서 만들었던 예제 올려드리겠습니다.


posted by K8

TFS support in Blend 3

Blend3/WPF 2009. 5. 11. 15:06

Team Foundation Server(TFS) support in Blend 3

 

Blend3에서 TFS 설정을 해보아요-

 

Visual Studio Team Explorer 가 잘- 돌아가고 있는 상태여야 하고,

Blend3도 제대로 설치 되어 있어야 합니다.

(사실 여기까지가 제일 어렵죠 ㅎㅎ)

 

그리고 추가로

 

Enables Team Foundation Server 2008 to work with Expression Studio 3.

http://code.msdn.microsoft.com/KB967483/Release/ProjectReleases.aspx?ReleaseId=2367

 

TFS를 사용하기 위한 (‘’ 이 것을 설치 해주면 끝!

 

Blend3에서는 Team Explorer의 솔루션 오픈이 가능하고, TFS에 체크인 체크아웃 등이 가능하네요.

TFS설정이라던지 는 물론 될 리가 없습니다. Blend 3 Team System 도 아니고!

 

먼저 TFS의 솔루션을 하나 열어 봤습니다.

 

 

VSTS에 비해 좀 허술해 보이긴 하지만, 자물쇠도 달렸고-

체크아웃도 허술해 보이는 빨간 체크를 해주는 군요.

 

기능은 대략

 

왼쪽 Blend3 과 오른쪽 VSTS 2008의 메뉴 입니다.

 

저는 VSTS 2008을 사용중인데, 문제 없군요.

다른 버전에선 어떤지 잘 모르겠네요.

 

XAML 파일을 수정하면 비쥬얼스튜디오에서는 체크아웃을 바로바로 해주는데,

Blend3에서는 체크아웃 해주진 않네요.

.cs파일에 영향을 미치는 작업을 하면 바로 체크아웃을 해줍니다.

 

TFS관련 설정 옵션은 아직 아무것도 되진 않습니다.

TFS를 쓰기 위한 Blend 유저들에겐 딱 적당할 정도의 기능?

 

 

'Blend3 > WPF' 카테고리의 다른 글

WPF Trigger  (0) 2009.05.14
WPF Toolkit - March 2009 Release  (2) 2009.04.08
이미지 체크박스 만들기  (0) 2009.03.17
posted by K8

Blend3 preview - 2. Photoshop import

Blend3 2009. 4. 9. 14:58

 
Expression Blend3 preview - 1.인터페이스 에 이어서 Photoshop import - 테스트를 해봤습니다.

이슈는 Photoshop ans Illustrator import였는데,
illustrator랑은 친하지도 않고 라이센스도 없으며 있어도 거의 사용하지 않기 때문에~
(쓸 일 있으면, 요즘은 왠지 간단한 Expression Design으로 해결!)

저와 친한 Photoshop만 ~ (사이좋게 지내자 - ㅠ_ㅠ)



Photoshop은 *.psd, Illustrator는 *.ai 파일이 import가능하군요.

1. PSD파일을 하나 import 해봤습니다.
먼저, 어디에서든 import해도 문제가 많이 생길것만 같은 레이어 많은 psd를 선택해 보겠습니다.



원본은 이런모습의 ! (CodeSafe 홈페이지 시안입니다! _ 어어;; 이거 맘대로 썼다고 혼나면....? ;;)
layer가 100개이상 들어있고 group도 10개 이상, Mask, Layer style, path까지 들어있는 10MB가 넘는 덩치 큰 시안 입니다.
얼마나 어떻게 Import될지 두근두근합니다-



File 메뉴에서 Import Adobe Photoshop File 을 클릭하고 import할 파일을 선택하면,



오우- 노!!!!
이제, import를 어떤 경우에 쓸 수 있을지... 잘 살펴보겠습니다.



CodeSafe 시안이 엉망이 되어버렸군요!!
먼저 , 예상했듯..

1. 메인네비게이션 - clipping mask 가 사라졌군요.
2. 블랜딩이미지의 - 화살표는 opacity와 fill로 투명도를 조절해뒀는데 opacity는 잘 따라오는데, fill의 값은 import 못 했군요.
3. Hosting, ALM, TFS 색들이 짠- 나타난 것을 보니 Layer blanding 옵션도 안되는 군요.

4. 위의 세개는 예상했지만, Text들의 글자간격, 줄간격 값이 변했고,
5. 전체 포지션들도 어긋나는것을 볼 수 있습니다!

object패널을 보면-



group들도 적용이 되고 - 마스크등등으로 얽혀있던 레이어들을 깔!끔 - 하게 모조리 이미지로-
그리고 text들은 살려서 text block으로-
(이런 모습은 훌륭하군요!!)



그리고 생성된 이미지들은 (전부다 png ! - 다른 포맷으로 설정하는것은 안보이네요.)
import한 'psd파일이름_Images' 에 자동 저장되네요.

생성된 이미지 폴더의 속성을 보면 156개의 이미지가 생성되었고, 총 용량은 2.56MB 정도 되네요 - .

이번엔, 좀 간단한 psd파일을 import해보겠습니다.



얼마전 이미지 탭메뉴에서 사용했던 고양이들의 psd 입니다.
깔끔하게 불러왔습니다.
레이어도 그룹별로 나누어져 있습니다.
이런 기능이 전에도 있었으면 고양이들을 하나하나 따로 잘라내는 작업은 줄일 수 있었겠군요.

+ TIP :

Import 창에서 Compatibility Layer에 체크를 하시면 ~
레이어와 상관없이 -
PSD원본 그대로 View의 PNG 하나만 생성됩니다. 말그대로 합체!
(포토샵에서 디자인의 사본 이미지를 png로 저장해서 blend에 불러온것과 같은 느낌!)

결론 >>
프로젝트에 사용해야할 이미지들이 한가득이고, 라이브러리를 포토샵으로 이미지 작업 했을 경우 - 한번에 레이어 별로 프로젝트에 추가할 때는 유용하게 쓸 수 있겠군요.

image set를 psd로 만들어서 정리만 한 뒤, 프로젝트에 import한다던지...

아무튼 좋은 수단이 되어 주었으면 좋겠습니다. (뭐든 유용하게 쓰면 좋은 수단!)

'Blend3' 카테고리의 다른 글

Tip. Behavior 추가하기  (1) 2009.11.30
Microsoft Expression Blend 3 + SketchFlow Trial 설치-  (0) 2009.08.04
Expression Blend3 preview - 1.인터페이스  (4) 2009.03.19
posted by K8

Expression Blend3 preview - 1.인터페이스

Blend3 2009. 3. 19. 20:40
라스베가스에서는 MIX09가 한창이고- ..아니지 지금쯤 끝나가는건가?
부러워하면지는거다부러워하면지는거다

Expression Blend3 preview 가 공개가 되었군요!
궁금한 마음에 후딱 설치를 해보고 살짝 무엇이 변하였나 인터페이스만 둘러 보았습니다.

Expression Blend3 preview 다운로드 - http://www.microsoft.com/expression/try-it/blendpreview.aspx



당연히, Blend2 와는 별도로 실행 할 수 있습니다.



New project를 클릭해서 새 프로젝트를 하나 생성해 보았습니다.



프로젝트 생성창이 바뀌었군요!!
silverlight 3 개발툴을 깔아 봐도 알 수 있겠지만, Visual Studio에서도 Silverlight Project에
Silverlight Navigation Application(누구냐 넌!)이라는게 추가 되었더군요.


위 이미지는 - 비쥬얼스튜디어 새프로젝트 생성- 창입니다.

뭔가, 새로운 것들을 또 해볼 수 있게 되겠군요.
더불어 공부할것도 많아지고? (나안해나안해)

새프로젝트로 Silverlight 3 Application + Website 를 생성해보았습니다.



미묘하게- 인터페이스가 깔끔해진 모습입니다.
사실, 이전 버전까지는 왠지 professional해 보이지 않는 느낌의 인터페이스라고 생각했었는데 ( 저만 그런거?)
미묘한 차이이긴 하지만, 저는 마음드는 군요!
역시, 개발자분은 인터페이스는 전이랑 똑같네!! 라고 말해 주었습니다. || 분명히 틀려!

인터페이스는 프로젝트패널이 왼쪽으로 가서 붙었습니다.
위치만 옮긴게 아니라 TFS (Team Foudation Server) 도 사용 할 수 있다니, Blend로 수정하고 Visual Studio를 열어 체크인하는 귀찮은 짓을 하지 않아도 되겠군요.
Visual Studio를 열지않고 TFS 기능을 사용할 수 있는 방법이 있다고 하나,

난... 몰랐을 뿐이고! XAML 한줄 고치고, 또 Visual Studio 열고 있고!
벌써 프로그램 종료했는데 또, 수정 할게 보이고!!
그래서, Blend에서 TFS사용하는것과 함께 다음기회에 ~

툴바를 살펴보니,
여기도 왠지 미묘하게 바뀌었습니다.

   


이 상단에 땡땡땡이 들은 움직일 수 있다는 거군요!!!
다짜고짜 패널을 더블클릭 해보니 분리되어 툭떨어져 나오고, 다시 더블클릭하면 원래 자리로 돌아갑니다.



다른 자리에도 찰싹찰싹 잘 갖다 붙네요.
사소하지만, 나름 유용한 업데이트 같습니다.

제가 제일 관심있었던 부분은 컨트롤입니다.
그래서 Asset Library를 살펴보았습니다.



Blend2의 Silverlight 의 asset library에서는 볼 수 없었던, 아이들을 표시 해 보았습니다.
반가운 컨트롤들이 보이는군요! WPF 프로젝트에서만 보이던 컨트롤들도 있고-
주만간 주물주물 해줘야 할 것들 -
아무쪼록 친하게 지내보자꾸나! ㅠ_ㅠ

하지만, 그 중 제일 반가운것은!!!



바로 이것, Intellisense!!
Blend 2 에서도 Add in을 설치하여 쓰는 방법도 있지만 ,
이 것은 친절하게 설명도 나옵니다!
자자- Intellisense가 얼마나 작업에 효율적이며, 얼마나 우리를 바보로 만들 수 있는지 직접적으로 쉽게 체험해 볼 시간이 왔네요. (ㅎㅎ) 코드 따위! 시작하는 알파벳만 외워주는겁니다!!! ( ㅠ_ㅠ )

인터페이스 구경은 이걸로 대충 끝-

조금 아쉬워 - File 메뉴를 살짝 열어보니


이런 것들이...
Import Adobe Photosop File?
아니 이게 도대체 뭐란 말인가!!
PSD파일을 이미지, 텍스트 채로 불러오는 굉장한(!;;) 기능 같아 보입니다.
블렌드랑 포토샵이랑 친하게 지내게 만들기?
이 것도 다음기회에...
궁금하면 설치하여 한번 해보는겁니다!!
물론, 좋은 팁있다면 제게도 주시는게....

자세한것과 Silverlight 3.. 등등은 내일 또 해봐야겠습니다. @_@

'Blend3' 카테고리의 다른 글

Tip. Behavior 추가하기  (1) 2009.11.30
Microsoft Expression Blend 3 + SketchFlow Trial 설치-  (0) 2009.08.04
Blend3 preview - 2. Photoshop import  (0) 2009.04.09
posted by K8