본문 바로가기

기획/Adobe XD

[Adobe XD] 기초. UI Kit 둘러보기 최근 일이 너무 많아서 업로드를 해야지.. 해놓고 업로드 할 거리들을 제목창에 정리만 하고 있었다. 우선 'Adobe XD 관련해서 어떤 주제로 어떻게 포스팅을 진행할까' 라는 고민을 하다가, 처음 사용하는 분들에게 하나씩 하나씩 같이 진행하는 방향, 조금 사용해보신 분들께는 일종의 팁같은걸 공유해보는 방향으로 하려고, 기초, 응용으로 주제에 달아서 진행을 해보려고 한다. 그렇게 어렵게 느껴지지는 않아도 알면 알수록 늘어나고, (이젠 업데이트 속도를 못따라가겠다..) 쓰면 쓸수록 유용한 Adobe XD 조금 더 공유를 해보면서 학습해보려고 한다. 힘내자, 나도, 방문해서 이걸 보고 계신 님도. 이번에 공유하고자 하는 내용, ui kit 처음 뭔가를 그리려고 할 때 정신없이 그리면 빠르고, 편할 수 있는데.. 더보기
Adobe XD 활용. 패스 만들기 간단한 도형그리기에 이어서 이번엔 조금 어려운걸 보여드리려고 합니다. 정말 생소한 경우에는 접근하는 것보다 편집이 조금 어려운 벡터기반 요소 만들어서 편집하기. 우선, xd로 작업한 도형들 R(사각형), E(동그라미), Y(다각형; 왼쪽에 각 개수를 정할 수 있습니다.) 를 비롯해서 입력하는 폰트도 적용이 가능합니다. 도형인경우에는 벡터로 변환이 상당히 쉬운 편입니다. 도형 누르고 엔터 각 꼭지점에 (원인경우에는 위, 아래, 좌, 우) 선택할 수 있는 점이 나타나고, 그걸 누르시면 원하시는대로 편집이 가능해집니다. 사실 전환하는데 제일 효과를 많이 보는건 폰트같은데, 글자를 입력하고, control + 8 을 누르시면 변환됩니다. (패스로 변환) 전환 이후에는 다른 도형처럼 사용도 가능하고, 문자를 다른.. 더보기
Adobe XD 활용. 포토샵 연동하기 Creative Cloud 에 포함되어 있는 프로그램이다보니, Adobe XD의 포토샵 연동은 굉장히 쉬운 편입니다. 만약 구독중이라면, 바로 연동이되어있거든요. 사진파일을 xd 에서 편집하다가 오른쪽 마우스로 클릭하면 이런 메뉴가 나타나고, 포토샵으로 편집하기를 누르시면 바로 연결됩니다. 아무래도 포토샵 자체가 구동되는 시간이 조금 걸리다보니, 저는 귀찮아서 열어두고 파일만 닫아놓은채 사용하곤하는데, (이래가나 저래가나.) 불러온 이미지 파일은 수정전에 백업해두고 진행하시면 좋고, 누끼따기 뿐 아니라, 당연히 포토샵 기능은 다 가능합니다. 더보기
[Adobe XD 기초] 원하는 크기로 많은 이미지 한꺼번에 넣어보기 'Repeat Grid' 스크린샷 이미지나 다른 이미지 파일을 xd에 불러오는 여러가지 방법이 있다. 이미지가 있는 폴더를 열어서 drag, drop 을 하면 불러올 수 있다. 아니면, 복붙 'ctrl+c, ctrl+v' 애플에서 제공하고 있는 디자인 가이드를 가지고 실행해보자. 구글의 material IO, 애플 guide는 각 사이트에서 무료로 받을 수 있다는 장점도 있지만, 안지키면 여러모로 귀찮아진다. 1. 이미지 삽입 하기 첫번째 'ctrl+c', 'print screenshot', 다음 'ctrl+v' 또는 이미지파일 drag and drop (주의 png, svg, jpg등 왠만해서는 다 된다. ai는 안된다. 굳이 가서 변경해주는 수고는 좀 필요하다) 2. 원하는 크기에 맞춰서 이미지 여러개 불러오기 그럼 이제 여.. 더보기
Adobe XD 설치, 초기화면 둘러보기 이제 xd에서 작업한걸 바로 올릴 수 있다니.. 좋다.. https://creativecloud.adobe.com/apps/ux-web Adobe Creative Cloud creativecloud.adobe.com AdobeXD는 Adobe의 많은 앱 중에서 UI, UX 범주에 속하는 서비스. 처음 설치하고 사용하는데에는 무료였고, 공유하는데 어느정도 제한이 있었지만, 지금은 어떨지 모르겠다. (이미 구독을 해버리고 말았고, 그게 아까워서 다른것들도 배우고 있다는거. ) 처음 들어왔을때 인터페이스는 아래와 같다. 1920으로 선택했으니까, 1920 너비의 화면 하나크기의 '아트보드'라는 게 있고, 왼쪽 끝에는 몇가지 아이콘들이 있다. 제일위의 hamburger를 누르면 다른 메뉴들이 나타나고, 주로 파.. 더보기
[Adobe XD 기초] Adobe XD 시작하기 Adobe XD를 사용하게 된 이유는 Powerpoint 보다 있어보이고, Mac에서만 지원되는 sketch보다 windows에서 된다고 하고, 아무래도 adobe 의 다른 서비스들과 연동도 잘되고, 처음 만드는 프로젝트가 무료라서. 사용하면서 사용층이 늘어나는걸 보아왔고, 왠만한 guideline은 다 잡혀있어서 만약 powerpoint를 가지고 작업하는데에서 그냥 있어보이고 싶다라면 xd를 추천한다. 물론 처음엔 '그게 뭔데.' 라든가, 공유를 해줘도 굳이 그 링크를 클릭해서 보기보다 powerpoint를 열어서 보는게 곧 죽어도 좋다는 사람들의 반대도 있기는 하지만, 제플린까지 연동해서 뽑아냈을 때 각 개발자들의 문의에 제플린의 스크린을 보여주면 일단락되는 업무의 초 편안함이 있달까. 포토샵이나 일.. 더보기
Adobe XD Flowchart template 조금전 공유올린 pptx 파일과 같이, 어쩌다보니 XD라는 프로그램과 너무 오래 지낸 것 같다. 1920 x 1080 화면 아트보드 별도로 진지하게 줄맞추지는 않았고, 그냥 얼추 pptx 의 안내화면과 비슷하게 맞춘뒤 설명을 붙여두었다. 사용할때에는 복사 붙여넣기, alt를 이용한 drag and drop 도 유용하지만, control+shift+y를 누르면 각 구성요소의 이름이 적혀있으니, 그걸 끌어다 쓰는편이 손쉬울 것. 배경을 지우지 않은 이유는, 선만 있으면 여기저기 끌어다 놓기 불편하니까... 구독하고 있는 프로그램이라, 최대한 유용하게 써먹어야지.. 하다가 결국 몇해째 이녀석 노예가 된 것 같다. 그걸 좀 뽑아야 할 건데... 더보기

티스토리툴바