지난 한달간 직접 찾아뵈며 소개 드렸던

어시스터 팀의 '모바일 디자인 가이드 교육 세미나' 자료를 공유합니다.

Mobile Design Guidelines Tips by Assistor PS from witstudio


디자인 가이드 교육 세미나 (index)

  1. 디자인 가이드?
    1. 디자인 가이드에 대한 이해
  2. 개발자와 협의하기
    1. '좌표' or '간격' 확인
    2. 절대, 상대좌표 항상 확인
    3. 이미지 슬라이스 방법 확인
  3. 상황을 이해하기
    1. 수치 단위 이해하기
    2. '절대 수치 VS 상대수치' 확인
    3. 이미지 처리 여부 확인
    4. 개발쪽 지원 기술을 미리 확인 (플랫폼 기술 범위)
    5. 텍스트 처리 방법 확인
    6. 텍스트 영역의 크기는? (Ctrl+T는 거짓)
  4. 자신의 業을 이해하기
    1. 항상 전체를 보는 시야가 중요 (디자인 시안에서 시야가 갇히면 위험)
    2. UI 콘트롤은 항상 모든 상황별로 디자인
    3. UI 콘트롤 디자인은 항상 모듈화
    4. 블렌드 모드는 정확히 이해하고 사용
    5. 항상 공부하는 자세가 중요


주니어 디자이너를 대상으로 작성된 내용이지만,

시니어 디자이너도 다시 한번 상기하고 작업한다면 좋겠습니다.


어시스터 팀은 디자인 작성법에 대해 계속 연구하고 공유해 드리도록 하겠습니다.

아래 ↓ 공유버튼 or 슬라이드 쉐어 내 공유 버튼으로 많은 공유 부탁 드립니다. :)

신고

어시스터 세미나에 관심갖고 성원해주셔서 감사합니다.

세미나를 통해 사용자 여러분을 직접 찾아뵙고 목소리를 들을 수 있어서 저희에게도 뜻깊은 한달이였습니다.

세미나 신청 이후, 문의주신 분들이 많아 짧은 시간 모두 찾아 뵙지 못한데 죄송하다는 인사드립니다. 더 발전된 세미나 준비해서 다시 찾아뵙겠습니다.


그리고

지난 한달간의 '어시스터 세미나' 여정을 인포그래픽으로 정리해 보았습니다.


멋지게 정리해주신 디자인팀에 감사드리며..! ' 0'

한장한장 넘겨 보세요~

"너무 좋은 시간이었습니다. 감사해요! 어시스터 PS 잘 쓰겠습니다 :)"

"좋네요. 디테일합니다. 세미나보고 많은 것 배웠습니다. 작업시 디자이너 편의를 많이 생각한 듯."

"실무에 도움될 수 있도록 설명해 주셔서, 업무진행시 많이 이로울 듯 합니다."

- 세미나 만족도 조사 속 참석자 분들의 뜨거운 반응 中 -


그리고 세미나 신청하고, 참석해 주신 분들께 감사 인사드려요.
다음에 또 만나요!

세미나 자료도 곧 공유 드릴께요~ :)


신고



11월 한 달간 기획된 "어시스터 세미나" 신청이 마감 되었습니다.

그 동안 관심 갖고 신청 및 참석해주신 분들 감사합니다. 


이번 세미나를 바탕으로 더욱 알찬 내용의 발전된 세미나로 다시 찾아 뵙습니다. 


감사합니다.



세미나 관련 포스팅으로 돌아오겠습니다. :)

신고


어시스터PS 메이저 업데이트

"해상도를 지배하라"

 

 


 


안드로이드 개발 환경에 완벽 대응할 수 있는 업데이트가 이루어졌습니다.

사용자는 모든 해상도를 자유롭게 제어할 수 있습니다.



어시스터 PS 다운로드



안녕하세요. 어시스터 팀입니다.

지난 주말을 이용하여 어시스터 PS의 3번째 메이저 업데이트가 이루어 졌습니다. 특히 이번 업데이트는 안드로이드 디자인 작업 환경에 완벽히 대응할 수 있다는 점에서 의미가 있는데요, 그 내용은 다음과 같습니다. :D




다음 3가지 이슈를 굉장히 간편한 흐름으로 변경한 것이 이번 업데이트의 핵심입니다.

px ↔ dip 변환

px ↔ sp 변환

각 해상도(dpi)별 이미지리소스 자르기



-



1. 해상도의 기준을 지정할 수 있습니다.


업데이트가 되면서 Layer Guider의 UI가 약간 변경되었습니다. 사실 변경이라기 보다는 '추가'에 가까운데요, 위 그림처럼 프로그램 상단에 해상도 기준을 변경할 수 있는 콤보박스 콘트롤이 등장하였습니다. (옵션의 해상도 변경 콤보박스와 동일)


이것 바로 자신의 디자인의 해상도 '기준'을 지정할 수 있는 메뉴인데 이 기준에 따라 Layer Guider의 모든 기능에 영향을 미치게 됩니다. 결론적으로 사용자는 더이상 단위 변경, 비율 계산 등을 위해 계산기를 두드리며 시간을 허비하지 않아도 된다는 의미입니다.


다시 한번 정리하자면 사용자는 단 한가지만 기억하면 됩니다.


"나는 지금 어떤 해상도를 기준으로 디자인가이드를 작성하려 하는가?"



-



자 그럼, 당연히 기능 예시를 설명 드려야겠죠.

먼저 Default 값으로는 Pixel이 해상도 기준으로 지정되어 있습니다. 이 상태에서는 좌표, 크기, 간격 등을 추출하면 모두 Pixel값으로 나타냅니다.



기본값은 Pixel




기준값이 Pixel이기 때문에 모든 수치를 Pixel로 표기






하지만 기준 해상도를 다른 값으로 지정하면 지정한 해상도를 기준으로 기능이 동작합니다. 그럼 xxhdpi(480)의 경우를 예로 들어보겠습니다.




기준 해상도를 xxhdpi(480)로 지정하면,









xxhdpi 수치를 완벽히 추출 :

좌표, 크기, 간격 등을 추출하면  xxhdpi 수치로 표기







sp수치도 완벽히 추출 가능 :

옵션에서 텍스트 크기 단위를 sp로 지정하고, 텍스트 정보 추출 기능을 수행하면

xxhdpi 기준에서의 sp 수치를 정확히 계산하여 표기 (소수점 표기 여부 선택 가능)









다른 해상도(dpi) 크기로 이미지 내보내기 가능 :

Layer Snips(레이어자르기) 기능에서 내보내고자 하는 해상도를 선택하면 현재 기준인

xxhdpi 선택한 해상도와의 비율을 계산하여 정확한 크기로 레이어를 잘라내어 저장함








 

-



2. xxxhdpi(640) 해상도가 추가되었습니다.



최신 안드로이드 4.4 업데이트에서는 새로운 해상도 기준인 xxxhdpi(640)가 등장하였습니다. 무려 4k Resolution(3840×2160)이니 디자이너 입장에서는 조금 까다로울 수도 있는 부분이네요.


어시스터 PS도 이번 업데이트에서 발빠르게 xxxhdpi 해상도를 추가하였습니다. 디자인 작업에 많은 도움이 되길 바랍니다.





-



지금까지 3번째 메이저 업데이트 내용을 확인하였습니다.


결론적으로 어시스터 PS를 사용하면 dpi, sp 등 다양한 수치 단위 변경을 위해 일일이 계산할 필요가 없고, 각 해상도(dpi)별로 이미지를 따로 저장하기 위해 비율 계산을 할 필요도 없습니다. 그저 자신이 기준으로 삼는 해상도만 정확히 알고 있으면 그만입니다.



이것만 기억해 주세요.

어시스터 PS는 디자이너를 돕는 것에만 집중하겠습니다.





저작자 표시 비영리 변경 금지
신고


성황리 진행중인 "찾아가는 어시스터 세미나" 신청을 마감합니다.

더욱 발전된 세미나 준비를 위해 "찾아가는 세미나" 신청을 <11월 12일 오후 5시> 조기 종료합니다. 

세미나 안내 2주만에 많은 분들의 신청으로 어시스터 팀의 11월 한달 스케쥴이 풍성할 수 있게
신청해주신 모든 분들 감사합니다.


개인/소규모 단체를 위한 세미나는 아직 열려있습니다.
(개인/소규모 단체) "어시스터 세미나" - http://goo.gl/58ok4V

더 알찬 내용으로 다시 찾아뵙도록 하겠습니다.

감사합니다.

신고