[Expression Design] Creating Assets with Expression Design

 

이번 시간에 다뤄볼 내용은 지난 포스트에서 언급했던 블랜드와 달리 전문적인 그래픽 처리 툴인 디자인에 관해서 언급해보고자 합니다.

단순하게 블랜드를 이용하면 기존의 Visual Studio보다는 화려하게 꾸밀 수 있지만 블랜드만 가지고는 당연히 앱을 만들 수 없습니다. 분명 그것을 구성할 개체가 필요한 것이고 사람들은 이 개체를 만들기 위해서 포토샵이나 일러스트레이트를 사용하는 거죠. 어떻게보면 Expression Design도 이런 툴 중 하나로 보시면 됩니다. 그래서 이번 포스트에선 블랜드에서 쓸 개체를 만드는 것이 주 목적이 될 것입니다. 

물론 내용이 간단합니다. 그리고 형식이 포토샵과 유사하기 때문에 헷갈릴것 같지 않네요. 아무튼 자세한 건 동영상을 참고하시면 되고 지금 동영상은 Expression Design 2를 기반으로 설명이 되어 있지만 저는 Design 4를 바탕으로 설명드리겠습니다. 우선 첨부 파일을 받으세요. 나중에 쓸겁니다.

 

SL02SP1EN010_Applying_Color_and_Effects.zip

 

 우선 디자인을 열게 되면 다음과 같은 화면이 열립니다.

 

 

와이드 화면이라서 조금 넓어보이지요. 지금의 회색화면은 일반적인 워크스페이스입니다. 여기서 정말로 디자인을 할거면 모든 디자인툴의 개념이겠지만 새로운 문서를 생성해야 합니다.

 

 

보시면 Preset이라는 항목이 있는 기존에 틀을 만들어놨던 MainWindow의 크기를 여기다 입력해주시면 됩니다. 그러면 그 크기에 맞춰서 해상도가 자동으로 조절됩니다. 일단은 그냥 기본 설정으로 가보겠습니다.

 

 

그러면 화면이 이렇게 하얗게 변합니다. 이제 우리는 여기다가 그림을 그리면 되는거죠. 일단 원을 삽입해보겠습니다. 블랜드와 마찬가지로 좌측에 있는 툴박스를 사용하면 간단하게 원을 그릴 수 있지요. shift를 누른 상태에서 원을 그리면 정형 원이 생성되게 됩니다.

 

 

지금 원이 빨간색으로 보이는데 실제 원의 색깔은 검정색입니다. 지금과 같은건 선택되었다는 것을 보여주기 위한 안내선이지요. 그러면 이 색을 어떻게 바꿀 수 있을까요? 이 설정은 우측에 있는 Properties에서 할 수 있습니다.

 

 

원을 선택한 상태에서 보면 Appearance 아래에 두개의 아이콘이 있습니다. 지금 마우스로 보이는게 Fill 항목, 즉 그 개체의 배경입니다. 그리고 옆에 있는 Stroke, 그 개체의 테두리 색깔을 선택할 수 있는 겁니다. 이 값들을 적절하게 조절하면 원의 색상을 자신이 원하는대로 바꿀 수 있습니다.

 이번에는 펜툴중 Polyline을 이용해서 도형을 만들어보겠습니다. Polyline은 하나의 자유선입니다. 마치 어렸을 때 펜으로 도형만들기 게임을 했던 것처럼 시작점과 끝점이 만나면 하나의 도형이 되는 선이 바로 Polyline입니다. 이 건 펜툴의 하위 개념으로 들어가 있습니다.

 

 

이걸 선택한 후 자유형 도형을 그릴 수 있습니다. 역시 Shift를 누르면 직선을 그릴 수 있고 곡률도 표현할 수 있습니다. 한번 이 도형을 그려보지요.

 

 

단순하게 마우스로만 그린 도형입니다. 이렇게 만든 도형은 하나의 개체로 인식하기 때문에 자유롭게 마우스로 드래그 할 수 있습니다.

 

 

이 상태에서 Alt 키를 누른 상태로 드래그를 하면 사물은 복제가 됩니다. 역시 블랜드와 똑같습니다.

 

높이가 못미더우신 분이라면 해당 개체를 선택하면 하단에 개체의 위치가 나옵니다. 이를 통해서 수정하시면 됩니다.

 

 

이를 통해서 각도를 180도 돌려보면 아래와 같은 결과를 얻게 됩니다.

 

 

그런데 뒤에 있는 원의 모형이 조금 그렇네요. 조금 깍아보겠습니다. 일단은 앞에 Polyline으로 만든 도형은 잠시 숨기는게 좋겠지요. 단축키는 ctrl+3 입니다. 다시 나타나게 하려면 ctrl+alt+3를 누르면 나타납니다. 일단 숨기고 다음과 같이 도형을 배치해봅니다.

 

 

역시 앞에서 소개했던 것처럼 alt키와 Shift 키를 누른 상태에서 도형을 드래그하면 바르게 이동합니다. 이걸 깍기 위해서는 이른바 펀칭이라는 작업이 필요한데 조금 복잡합니다. 일단 새로 생성한 개체를 같이 선택한 상태에서 다음 메뉴를 선택해줍니다.

 

 

 

이렇게 해야 위처럼 새로 생성한 개체들이 하나의 선으로 연결됩니다. 물론 시각적으로는 아무것도 변화가 없습니다. 그 후에 맨처음 있던 원과 같이 선택한후 그 아래에 있는 Path Operation의 다음 항목을 선택해줍니다.

 

 

이게 이른바 파워포인트에도 있는 셰이핑 기술입니다. 물론 합치는 것도 할 수 있습니다. 위에 있는 unite를 선택하면 도형이 전부 합쳐지지요. 기억해야 할 것은 반드시 Compound Path를 통해서 만드는 것이 우선되어야 한다는 것입니다.

 

 

결과는 위와 같이 짤린 형태가 됩니다. 그럼 아까 숨긴 개체들을 다시 불러와서 재정렬하면 멋있는 아이콘이 형성됩니다.

 

 

여기다가 버튼 형태를 삽입해보겠습니다. 역시 Rectangle 개체를 삽입하면 되겠지요. 그리고 Properties에 있는 corner Radius를 4정도 주면 네모에 곡률이 생깁니다.

 

 

위와 같이 선의 모양도 선택할 수 있고 선의 Width도 결정할 수 있습니다. 수정하는 건 여러분 마음이겠지요.

자 그리고 이런 버튼을 여러개 생성합니다. 참고로 팁을 알려드리자면 alt로 복제한 개체는 ctrl+d를 통해서 개체를 또 만들 수 있습니다. 중요한 건 이때 이렇게 생성되는 개체는 이전 개체와의 거리를 기억하고 그 거리만큼 떨어져서 생성된다는 것이죠,

 

 

규칙적인 도형 생성이 가능해집니다. 그런데 배열이 잘 못되어 있는 경우도 있을 수 있습니다. 이때는 배열하고자 하는 개체를 전부 선택한 후에 밑을 보시면 Align과 Distribute 항목이 있습니다. 이걸로 다시 배열하시면 됩니다. 생각해보니까 이런 기능들이 파워포인트에 다 있는 내용들이네요. 아마 파워포인트 2010부터 이런 기능이 생긴거니까 다른데 있던 기능을 파워포인트가 가져온거겠지요?

 

 

이제는 아까 받아둔 이미지 파일을 이용할 차례입니다. Import 기능을 쓰면 되는데 그 메뉴는 file에 있습니다.

 

 

보시면 알겠지만, 포토샵이나 일러로 만든 이미지도 불러올 수 있습니다. 또다른 벡터이미지 포멧인 wmf 파일도 불러올 수 있지요.아까 첨부한 파일 중 Aquarium이란 파일이 있는데 그 이미지를 불러봅니다.

 

 

그런데 지금 이미지의 테두리는 각져있는데 비해서 나머지는 둥글둥글합니다. 이것도 수정해보겠습니다. 일단 아까와 같은 Rectangle을 하나 생성합니다. 그러면 corner radius가 적용된 상태로 그려집니다. 일단은 이미지 위에 덮어보면

 

 

위와 같이 나오는데 우리가 원하는 건 이 네모만큼 자르는 겁니다. 이를 위해서는 이 두개의 개체를 선택하는 건데 물론 마우스로 전체를 선택하는 방법도 있지만 Layer라는 개념을 통해서 선택할 수 있습니다. 우측 하단에 있는 Layer를 펼쳐보면 지금까지 만든 개체의 목록이 나열됩니다. 이중 이미지와 방금만든 네모를 선택해줍니다.

 

 

감이 오시는 분도 계시겠지만 지금 넣은 순서대로 위에 쌓이게 됩니다. 순서를 바꿀거면 그냥 마우스로 원하는 개체를 선택해서 원하는 순서에 삽입하면 됩니다. 이렇게 선택된 다음에는 아까 잠깐 보였던 clipping path를 사용해야 합니다.

 

 

이렇게 지정해주면 원하는 결과물이 나오지요.

 

 

 대략적인 아이콘은 만들었고 로고를 삽입해보겠습니다. 첨부파일에 보면 fabrikam_logo라는 파일이 있습니다. 그걸 아까와 같은 Import로 여는게 아니라 그냥 Open으로 엽니다.

 

 

MS가 보면 대단한게 참 이런 예제도 퀄리티있게 만듭니다. 지금 나온게 다 하나의 개체입니다. 전부 마우스로 선택해주고 복사합니다. 그리고 아까 만든 아이콘 위에 붙여넣기를 해주면 됩니다.

 

 

적절히 수정해주면 이런 로고가 땋 만들어집니다. 마지막으로 밑에 있는 네모들은 버튼으로 쓸거니까 하나의 group으로 처리하는게 좋겠지요. 전체 선택한다음 group을 눌러주면 됩니다. 그리고 Layer에서 이름을 button이라고 수정해주면 이번 예제는 끝나게 됩니다.

 

 

 

하나의 개체로 묶이는게 보이실 겁니다. 블랜드와 마찬가지로 디자인.. 이것도 대단한 툴인거 같습니다.

 

참고로 제가 한건 요기

tool.design