본문 바로가기

분류 전체보기

그리드 그리드를 사용하는 이유 1. 정돈된 디자인 2. Responsive 디자인 3. 개발자와의 원활한 커뮤니케이션 그리드 핵심 용어 Max Width, Container, Gutter,Column Width, Column Count, Offset 그리드 만들기 눈 모양 버튼을 누르거나 ctrl+ G 누르면 그리드 없이 UI만 볼 수 있다. 그리드를 활용해서 오브젝트 배치해보기 주 컨텐츠와 부 컨텐츠를 나누며 그룹으로 나눈 예시 그리드를 활용한 반응형 UI 디자인 만들어 보기 모바일 버전으로 다시 바꿀떄 Crop으로 되어 있으면 이미지 사이즈를 조절하면 찌그러지기 때문에 Fill로 바꾼 뒤 사이즈를 조정 해야한다. 더보기
아이콘 만들기 좋은 아이콘 만드는 원칙 프로토 타입을 만들시 의미 전달이 잘되도록 만들어야 한다. Boolean 기능 활용하기 두개의 오브젝트를 선택하면 상단의 네비게이션에 나타난다. 펜 툴로 라인 그리기 도형 오브젝트를 선택후 enter를 누르면 편집 모드로 바뀌며 그 후 pen 툴로 각 지점을 찝어서 편집을 할 수 있다. Keyline 이해하기 각 도형과 선에 lock 을 걸어 작업시 방해가 되지 않도록 한다. 해상도를 고려한 아이콘 파일로 Export 하기 만든 아이콘을 선택 후 Fill 값을 제거 PNG는 그려진 부분 이외는 투명함. 더보기
실전 예제 2. 와이어 프레임 만들기 기초 작업하기: 사이트맵과 로우파이 스케치 1. 홈 화면 / 카테고리 화면 쿠팡이나 배달의 민족의 경우 이미 대부분의 사용자들이 이 어플이 무슨 기능을 하는지 알고 있지만 현재 제작하는 어플리케이션은 사용자들이 어떤 기능을 하는지 모르기 때문에 앱 소개 컴포넌트를 넣었다. 2. 상세 화면 / 구매확정 화면 3. 피그마로 워크플로우 만들기 Arrow Auto 라는 플러그인 사용 더보기
텍스트,피커,그라데이션,이미지와 마스크, 이펙트(그림자) 텍스트 만들기 문단의 가로, 세로 길이에 맞혀서 텍스트 오브젝트의 길이를 자동으로 맞혀 준다. 글꼴 및 사이즈 및 글자사이의 간격(행단) 조절 가능 피커, 그라데이션 단축키 i 를 누르면 해당 오브젝트 픽셀의 색상번호를 알수 있다. 이미지와 마스크 기능 또는 폴더의 드래그 앤 드롭으로 이미지 가져올 수 있다. 추가적인 팁으로 이미지를 가져 왔을 떄는 비율을 고정할체 사이즈를 조정해야한다. 포토샵 만큼은 아니지만 기본 적인 포토샵을 할 수 있다. crop 기능으로 사진을 필요한 부부만 짜를수도 있다. 마스크 : 어떤 도형에 이미지를 입힌다. 이미지 레이어가 도형 레이어 보다 앞에 있어야 한다. 이펙트 이해하기 그림자에 대한 설정 blur : 농도를 낮추면서 그림자 크기를 키운다. spread : 농도를 .. 더보기
정렬,분배,Tidy up, 그리고 Smart Selection 정렬 및 분배 아래 설정을 통개 각각의 도형을 일정한 간격으로 분배할 수도 있다. Smart Selection 순서를 바꾸고 싶은 도형들을 그대로 드래그 앤 드롭으로 변경할 수 있다. Tidy up 행렬 느낌으로 가로와 세로 정렬을 한번에 가능 더보기
트랜스폼 및 오브젝트 이동 관련 기능들 더보기
도형 만들기 및 우측 패널들 기능 익히기 비율 맞춘 상태로 도형 크기 를 변화 하려면 오른쪽 constrain proportion 클릭 라운드 값 부분 적으로 주기 가능 설정 레이어에 대한 설정(숨기기 포함)을 줄수도 있지만 그다지 많이 사용하지 않고 따로 투명도를 주는 방법을 주로 사용한다. 레이어의 색상과 투명도도 설정할 수 있고 여러가지 색상을 설정하고 선택하여 비교해 볼 수도 있다. 또한 + 버튼 왼쪽을 누르면 자주 사용하는 색상을 등록 할 수 있다 외곽의 색상도 설정가능 드롭 쉐도우 그림자 기능을 설정 가능 더보기
피그마 작업환경 이해하기 + 플러그인/템플릿 무료 버전으로도 계정 주인 외 1명 더 협업이 가능하다. 작업 공간의 계층 단축키 설정가능 플러그인/템플릿 필요한 플러그인을 검색해서 바로 사용 가능 구글에서 여러 템플릿을 검색 해서 사용 가능(매우 유용) 더보기

티스토리툴바