Expression Blend 썸네일형 리스트형 [Blend Study] 4/13일 Blend Team Layout Homework 입니다. Team Name : OB 상단에는 날짜를 선택, 하단에는 장소를 선택하여 어떤 신발을 신어야 할지 보여주는 어플리케이션입니다. OB팀의 레이아웃 적용 후 발표를 한 사진입니다. 다들 보자마자 헉 하는 소리와 함께 높은 퀄리티에 놀랐었는데요. 스케치플로우에서 디테일하게 잡혀져 있지 않아서 어떻게 화면을 구성할까 약간의 우려가 있었습니다만, 모두를 놀래키는 반전의 서스펜스를 보여주셨습니다 -_-)/ 그리고 애니메이션까지 코드로 직접 작성하셔서 움직이는 동작까지 보여주셔서 한주동안 얼마나 노력을 해주셨는지 엿보였습니다. Team Name : 젊은 피 북마크 어플리케이션을 WPF와 Silverlight를 동시에 진행하는 팀인데요, 이번주는 Silverlight 팀만 발표를 하셨습니다. 젊은 피 팀의 WPF버전.. 더보기 [Study] Dev&Design Expression Blend Study 모집 안녕하세요. 이번에 미루고 미뤄왔던 스터디 2차를 모집합니다. 자세한 사항은 밑의 그림을 참고 하시면 될 듯합니다. 모집인원중에 신청인원이 많으면 조절이 가능할 수 있습니다. 신청하실 때 이름 / 성별 / 자주 쓰시는 이메일주소 / (개발자 or 디자이너) 로 부탁드립니다. 이번 스터디는 두그룹으로 나누어 협업을 하도록 유도하여 스터디를 할 예정입니다. :-D 인원이 모집대는 대로 스터디 모집을 마감하겠습니다 더보기 [Expression Blend 3] Resource Dictionary 사용하는 방법에 대하여 알아보자. -1 안녕하세요, 정진희입니다. 이번 강좌는 리소스 사전 (Resource Dictionary) 를 사용하는 방법에 대하여 알아보도록 하겠습니다. Expression Blend에서 만들 수 있는 WPF와 실버라이트 프로젝트 둘 다 해당되는 내용입니다 지난 버전에는 실버라이트가 리소스 사전이 없었는데 이번에 생겼네요. 들어가기 전에 리소스 사전이란 무엇일까요? 디자이너는 Blend 프로그램을 가지고 컨트롤, 모양, 색상 등을 성심성의껏 만듭니다. 그런데 이렇게 어렵게 만든 컨트롤들을 다른 곳에서도, 혹은 저장을 따로 해놔서 일러스트 파일이나 포토샵 파일처럼 저장해서 갖다 쓰고 싶은 경우가 있을텐데요. 이럴때 쓰는 것이 바로 리소스 사전입니다. 1) 이번 강좌는 WPF이든 Silverlight이든 둘 다 상관은 .. 더보기 [Silverlight 3] Projection 값을 이용하여 원근감있는 메뉴를 만들어보자 - 2 이어서 진행하도록 하겠습니다. 저번 강좌까지 했던 작업은 메뉴버튼 클릭 시 접혀있던 서브메뉴가 나오도록 하기 위한 형태를 만들었고요. 이번시간에는 State 설정에 Projection 애니메이션을 추가하여 메뉴가 움직이도록 진행해 보겠습니다. 1) 저번시간까지 준비한 작업을 가지고 옵니다. ① 상태에서 그룹 State를 클릭하여 그룹을 만들고 ② 다시 폴더 모양을 클릭하여 그룹안에 State를 두개를 추가합니다 ③ 두가지의 상태를 만들어줍니다. 하나는 Menu로 돌아오기 위한 애니메이션과 SubMenu로 가기 위한 애니메이션입니다. 그룹이름은 자신이 임의로 지정해주어도 됩니다. 저는 MenuGroup으로 했습니다. 2) ① SubMenu State을 클릭하고 ② 움직일 대상 Stack Panel을 선택한.. 더보기 [Silverlight 3] Projection 값을 이용하여 원근감있는 메뉴를 만들어보자 - 1 안녕하세요, 정진희입니다. 요새는 계속 실버라이트에 대한 강좌를 쓰고있는데요. 같은 익스프레션 블랜드로 작성하지만 WPF랑 실버라이트가 보이는 메뉴얼이 좀 다르다보니 왔다갔다 하니 헷갈리기도 하네요, ㅎㅎ 오늘은 실버라이트에서만 작업할 수 있는 3D 원근감처럼 보이기 위한 속성, Projection 속성을 가지고 원근감 있는 실버라이트 메뉴를 만들어보도록 하겠습니다. at First, What's mean perspective 3D? 중학교 시절 미술시간에 이런 것 많이 그려봤을 텐데요. 원근감 있는 사각형, 혹은 물체를 그리기 위해 1점 투시, 2점투시, 3점 투시로 하여 밑의 그림처럼 그립니다. 전 이런 거 디자인 제도 할 때 했었는데요, 제품을 입체적으로 보이기 위해서 이렇게 그리곤 했었습니다. (.. 더보기 [Expression Blend 3] 스케치 플로우(SketchFlow), 어떻게 사용할까? - 3 안녕하세요. 정진희입니다. 저번 시간에는 스케치 플로우에서 Map Panel을 이용하여 프로토 타입의 플로우 페이지를 만들어 보았고, 각각의 페이지를 SketchFlow가 제공하는 Control을 이용하여 화면을 구성해 보았습니다. 이번 시간에는 각각의 페이지를 잇는 작업을 해보도록 하겠습니다. 플로우 링크의 방식은 다음과 같습니다. 로그인 - 메인 - 서브 - 서브4에서 로그인으로 돌아가는 방식으로 연결해 주도록 하겠습니다. 저번시간에 작업한 프로젝트를 가져와서 사용하겠습니다. 1) Map Panel에 Login Map을 더블클릭하면 더블클릭이 나타납니다. 여기서 OK를 클릭하면 Main이 나타나도록 링크시키겠습니다. 2) OK 버튼 우클릭 - 탐색 (영어로는 Navigate to) - 링크 걸어야 할.. 더보기 8월4일 6주 [디자이너가 만드는 WPF 프로젝트 스터디] 자료 및 후기 6주차를 마지막으로 스터디가 끝났습니다. 휴가중이신데도 불구하고 직접 나오셔서 스터디를 참여하시러 오셔서 정말 너무 감동이였습니다. 늦게 스터디를 시작해서 늦게 끝났기 때문에 뒷풀이도 제대로 못하고 끝나버렸네요 아쉬운 마음이 굴뚝같습니다. 이번 스터디는 5주동안 공부한 내용으로 스터디를 진행하였고요. 미리 준비한 시안으로 작업을 했습니다. 준비하는 사람의 취향이 고대로 반영된 디자인 시안이고요 -_-;;;;;; 그래서 윈도우 디자인부터 - 버튼 - 애니메이션 - 템플릿 수정을 진행하였습니다. 중간에 직접 디자이너분께서 버튼을 만드는 시연도 하셨습니다. exe파일은 Cafe.naver.com/goodria 에 올려 드리도록 하겠습니다. 개발자님의 코드는 전혀 들어가 있지 않은 상태로 올려드리도록 하겠습니다.. 더보기 [Expression Blend 강좌] Blend 3에서 Psd파일을 Import 해 보자. 안녕하세요, 정진희 입니다. 오늘은 최근 런칭한 Blend 3에서 가장 발전된 부분, 포토샵 Psd파일을 불러오는 것에 대해서 포토샵에서 작업한 부분을 어디까지 적용시킬 수 있는지, 혹시 문제점은 없는지에 대해 살펴보도록 하겠습니다. 먼저 블랜드 3를 여시고 저는 WPF강좌를 많이 하기 때문에 WPF에서 열었습니다. File에서 Import Adobe Photoshop Fill... 이라고 친절하게 프로그램 이름까지 써놨네요. 한번 작업한 파일을 불러 오도록 합니다. 클릭하시고 불러올 파일을 선택합니다. 불러들여올 psd를 선택하면 이렇게 다음과 같이 새 창이 뜨면서 나타납니다. 왼쪽에는 디자인한 psd파일이 보여지고 오른쪽에는 psd에서 만든 레이어들이 쭉 보이게 됩니다. 플래쉬에서 처럼 마찬가지로 불.. 더보기 7월21일 4주 [디자이너가 만드는 WPF 프로젝트 스터디] 자료 및 후기 어제 4주차 스터디를 진행하였습니다. 디자이너 스터디는 템플릿에 대한 설명 때문에 저 혼자 갑자기 안드로메다로 가버리는 상황이 발생하여; 더 혼란스럽게 만들어 드린 것 같아; 집에서 자책하면서 OTL하고 있었습니다; 스터디를 정리하는 중, 작업할 때에는 스타일과 템플릿에 대한 문제를 못 느끼다가 이걸 남에게 전달하려고 하다보니 그런 깊숙한 개념까지 가버렸네요, 그냥 한 귀로 흘리셔도 작업하는데는 전혀 지장없으십니다 * 간단정리 1. 스타일? = 컨트롤의 스타일시트 css같은 것 / 템플릿? 컨트롤이 구성하고 있는 요소를 직접 Editing 하는 것 ex) 케잌을 다 만들고 위에 올라가는 데코레이션들 = 스타일 케잌을 만들 때 빵 자체의 모양을 직접 만드는 것 = 템플릿 2. 스타일과 템플릿의 편집 방법?.. 더보기 [Expression Blend 강좌] 디자이너 관점에서 Xaml 파일 바라보기 안녕하세요. 오늘은 디자이너가 블랜드에서 Xaml 파일을 어떻게 봐야하는지에 대해 잠깐 설명하도록 하겠습니다. Expression Blend는 코드와 디자인을 동시에 볼 수 있습니다. 마치 플래쉬처럼 모션도 가능하면서도 드림위버처럼 코드로도 할 수 있다고나 할까요, 작업하다 보면 어떻게든 코드를 보고 수정하는 기회가 있기 마련입니다. 그렇기 때문에 오늘은 디자이너가 Xaml 파일을 쉽게 파악하는 방법을 이번 글에서 하도록 하겠습니다. 1) 처음 블랜드를 열때 Xaml 파일은 이렇게 보입니다. 1 - Xaml 파일에 필요한 참조값 및 클래스 * 디자이너는 잘 안 건드려서 패스, 2 - x:Name : 이 Xaml 파일의 이름 Title : html의 Title과 같은 부분, 윈도우 창의 타이틀 이름 Wid.. 더보기 이전 1 2 3 4 5 다음
