태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'assistor'에 해당되는 글 2건

  1. 2013.12.26 Assistor PS 디자인 가이드 툴 리뷰 by hyun27
  2. 2013.07.03 Assistor PS - mini tool for GUI guideline (1) by Limho
2013.12.26 09:13

Assistor PS 디자인 가이드 툴 리뷰

GUI 가이드 문서 만들 때, 오브젝트에 그림자나 아웃 글로우 같은 이펙트가 걸려있을 경우, 경계를 확대해서 꼼꼼히 보지 않으면 안됩니다. 생각보다 시간이 많이 걸리는 작업인데요, 컴퓨터가 알아서 어디까지 이펙트가 걸려있는지 자동으로 크기값을 알려주고 좌표값을 표시해 준다면 얼마나 편할까요?
이 때 필요한 프로그램이 Assistor PS입니다. 이전에 pxd블로그에서 디자인 가이드 툴 Assistor PS에 대해 소개한 적이 있었는데요, 오늘은 제가 Assistor PS를 사용하면서 유용했던 기능을 공유하려 합니다.



1. 가이드박스 생성&크기값 추출

가이드박스 생성
첫번째로 가이드 박스 자동 생성입니다. 작업을 시작하기 전, 좀 더 가이드를 수월하게 하기 위해 오브젝트나 텍스트의 영역을 표시해주는 가이드 박스를 그리는 경우가 많은데요, 이때 세심한 작업이 필요합니다. 오브젝트에 그림자 등의 효과가 적용 되었을 경우 최대한 확대를 하여 효과가 끝나는 지점이 잘리지 않게 영역 표시를 해 주어야 하기 때문이죠.

포토샵에서 원하는 오브젝트의 레이어 선택 후 Assistor PS의 'Guide Box'버튼을 클릭하면 그림자 효과가 적용된 부분까지 인식하여 박스를 생성해 주기 때문에 확대해 자세히 보지 않아도 정확하게 영역을 설정할 수 있습니다. 이것 만으로도 시간이 많이 절약 되었습니다. 

크기값 추출
크기값 추출도 가이드박스 생성과 비슷합니다. 원하는 오브젝트, 텍스트의 레이어를 선택하거나 marquee툴로 영역을 설정 후 크기값 추출 버튼을 클릭하면 적용된 효과를 포함한 크기값을 알 수 있습니다. 아래 그림과 같이 포토샵 내에 @Assistor_guide폴더를 생성해 수치값을 자동으로 표시해 주는 방식입니다. 


2. 좌표값 및 마진값 추출

좌표값 추출
지금까지는 아이콘이나 이미지의 좌표값을 알아내기 위해 포토샵의 marquee툴을 사용했습니다. 도큐먼트의 왼쪽 최상단에서부터 오브젝트의 좌측 상단 좌표점까지 쭉- 드래그를 해서 선택된 공간의 좌우 값이 좌표값인 것이죠.
이때, 전체 디자인이 화면에 꽉 차도록 축소한 상태에서 좌표값을 잴 때가 많은데요, 그럴 경우 오브젝트의 정확한 좌표점을 찍지 못하고 몇 픽셀 어긋나는 경우가 많았습니다. 좌표점이 어긋나면 다시 화면을 확대해서 정확한 좌표점을 찾아 드래그를 하는 반복 작업을 해야합니다.

Assistor PS에서는 좌표값을 추출할 수 있는 기능이 있어 한번의 클릭으로 좌표값을 알아낼 수 있습니다. 좌표값을 알고싶은 오브젝트의 레이어를 선택하고 ‘좌표값 추출’ 버튼을 클릭하면 '짠' 하고 좌표값을 표시해 줍니다.
상대좌표를 구할 때에는, marquee툴로 영역을 설정하고 레이어를 선택한뒤 '좌표값 추출'버튼을 클릭하면 선택된 영역의 좌측 상단을 기준으로 한 상대좌표값을 알 수 있습니다. 사소한 기능일 수도 있지만 지금까지 좌표값 하나를 알기위해 확대하고 축소하고 마우스 드래그도 몇번씩 했던 귀찮음에 비하면 작업 과정이 깔끔해 졌습니다.


마진값 추출
컴포넌트간, 오브젝트간, 또는 텍스트와 아이콘간의 마진값을 가이드에 표기하는 경우도 많은데요, 마진값을 구할때도 역시 포토샵의 marquee툴을 사용하고 있었습니다. 좌표값 추출기능에서도 이야기 했듯이, marquee툴을 사용하면 열심히 확대를 해서 보지 않을 경우 픽셀이 어긋나는 경우가 많습니다. Assitor PS의 마진값 추출 기능을 사용하면 오브젝트 두개의 레이어를 선택한 뒤 마진값 추출 버튼을 클릭하여 쉽고 정확하게 마진값을 구할 수 있습니다.
 
대부분의 기능이 포토샵에서 레이어 선택 or marquee툴로 영역 설정 > Assistor PS의 기능 버튼 클릭 > 포토샵에 자동으로 @Assistor_guide폴더 생성, 수치값 표기의 순서로 사용법이 간단하여 배우기가 편했습니다. 또, 컷팅해야 할 이미지를 저장하기 쉽게 새창으로 내보내는 기능, 안드로이드 해상도 자동 계산 기능 등도 포함되어 있어 가이드 작업 중 귀찮고 불편했던 부분이 많이 편해졌다고 느껴졌습니다.

"작업시간이 눈에 띄게 줄어들어 매일매일 칼퇴를 하게 되었다!" 라든지 "이게 없으면 가이드 작업을 절대 할수 없다" 정도는 아닐 수도 있지만, 한번 익숙해지니 포토샵의 단축키를 사용하는 것 처럼 작업이 한결 수월해 졌습니다. 매우 중요하지만 소모적인 작업인 디자인 가이드를 덜 귀찮게 작업할 수 있도록 도와주는 요긴한 툴이라고 생각됩니다.

제작사인 위트스튜디오의 블로그를 참고하시면 자세한 기능에 대한 설명이나 업데이트 소식을 보실 수 있습니다. :)
참고 : 위트스튜디오 Assistor PS 블로그


[참고##앱소개##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2013.07.03 00:15

Assistor PS - mini tool for GUI guideline

얼마 전, 'Assistor PS' 라는 소프트웨어의 정식 버전이 나왔습니다. pxd는 베타 버전을 신청해 사용하다가, 정식 버전을 구매하였습니다.

windows 7 이상 / CS3 이상
Mac OS X / CS3 이상

'Assistor PS'는 GUI디자인을 할 때 반복적인 작업들을 쉽고 빠르게 처리할 수 있도록 해 주고, 많은 노동력이 필요한 GUI가이드라인 제작도 빠르게 할 수 있도록 도와 주는 포토샵(Adobe photoshop)보조 프로그램입니다. 다양한 해상도와 비율의 단말들을 위한 여러 벌의 GUI가이드라인을 작성해야하는 GUI디자이너에게는 정말 반가운 프로그램이죠.

http://witstudio.net/assistor/
위트스튜디오의 홈페이지에 이 프로그램에 관한 설명이 잘 되어 있네요.

작업중인 화면을 동영상캡쳐하여 전반적인 기능들을 빠르게 보여주는 영상입니다.



기능별로 튜토리얼 영상이 준비되어 있습니다.

레이어 가이더 1/2
- '오브젝트의 좌표값, 크기값, 오브젝트간 거리값, 폰트정보'를 자동으로 레이어생성해 주는 기능에 대해 설명하고 있습니다.

레이어 가이더 2/2
- 가이드박스 만들기와 가이드 디스크립션활용에 대해 설명합니다.

가이드 메이커
- 포토샵의 가이드를 마우스가 아닌 수치로 빠르고 정확하게 만들 수 있습니다.

유닛컨버터
- 단말 DPI에 따른 수치값 자동 계산 기능에 대해 설명합니다.

라운더
- Path Shape 모서리의 라운드값을 수치입력으로 일괄 변경할 수 있습니다.

타일러
- 사용자가 입력한 규칙에 따라 오브젝트를 쉽게 복제하는 기능입니다.

어시스터PS가 제공하는 모든 기능들이 깨알같고 요긴한데요. 특히 포토샵 Guide선은  GUI작업이 아니더라도 웬만한 디자인작업에서 많이 쓰는 것이라, 하나하나 마우스클릭으로 Guide선을 끌어다 놓던 기존 작업방식을 원시적인 것으로 만들어 버릴 만큼 편리합니다. '롱프레스-드래그-릴리스'로 지친 여러분의 검지손가락 수명을 상당히 연장시켜줄 것입니다.
그 뿐만 아니라, 디자인 작업 중 사각형 라운드의 크기에 따른 전체적인 조화를 보기 위해 매번 R값이 다른 사각형을 다른 레이어에 다시 그리고 대조해 보며 디자인작업을 하는 경우가 많은데, 간단히 수치값만 변경하면 바로 적용되는 모습을 보시면 앞으로 세이브 될 시간이 눈앞에 보이실 겁니다. :)

설정에서는 드래그방식으로 기능탭의 수와 순서를 편집할 수 있습니다.

GUI가이드라인 업무의 고됨을 경험하고 이해하여 만든 프로그램이라 느껴집니다.
pxd 디자이너들도 '작업 효율을 실질적으로 많이 올려 준다'는 평가를 하고 있고요.
가이드라인 작업의 비효율에 대해 고민을 하고 있는 디자인(개발)회사라면 꼭 사용해 보시길 추천합니다.

어시스터PS에 관한 다양한 소식들은 Facebook (Assistor App)에서 확인하실 수 있습니다.


참고로 이 프로그램을 개발한 위트스튜디오는 코디네이터(http://witstudio.net/codinator/)라는 GUI작업에 최적화된 그래픽저작툴도 개발 중이라고 합니다.

[참고##앱소개##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 1
Ad Test...