UXUI2 UI GUI 디자인 04 / 초간단 그리드시스템 만들기(포토샵, 피그마, XD) 1. 포토샵으로 그리드시스템 만들기 ※CC버전 이상이여야 가능합니다! 1. 'Create new'를 클릭하고 새파일을 열어줍니다. 저는 우선 해상도를 1920px로 잡고 세로는 임의로 1080px로 지정해줬습니다. 아트보드를 체크하면 여러가지 대지를 만들 수 있습니다! (체크안해도 그리드시스템 만들 수 있어요) 2. 상단 'View'탭 클릭 → 'New Guide Layout' 클릭 3. Number = 총 컬럼의 갯수 Width = 컬럼의 넓이 Gutter = 컬럼과 컬럼 사이의 넓이 기본적으로는 왼쪽으로 되어있는데 밑에 있는 Center Columns를 체크하면 가운데로 설정됩니다! 저는 Full Width 1200px을 만들거기 때문에 각각 12개, 80px, 20px로 지정해줬습니다. 4. 그렇게.. 2021. 9. 30. UI GUI 디자인 03 / 그리드시스템 제작하기 1. 그리드시스템 왜 사용하는걸까? 그리드는 쉽게 말해 격자인데 디자인을 구성하는 박스의 간격이나 배치를 쉽게 하기 위해서 그리드 시스템을 사용한다. 허나 모든 디자인요소에 그리드를 맞추는 것이 아니다. 디자인을 구성하는 커다란 박스만 그리드에 맞게 배치를 하고 그 안에 들어가는 작은 요소들. 메뉴라든지, 버튼 같은 것은 자유롭게 배치하면 된다. 2. 그리드시스템 구성 요소 Column / Gutter / Number of Columns / Full Width / Margin width 쉽게 말해서 컬럼(Column) = 기둥 거터(Gutter) = 기둥사이의 여백 넘버더컬럼스(Number of Columns) = 몇개의 컬럼을 사용하냐 풀 위드(Full Width) = 최대 해상도 마진 위드(Margi.. 2021. 9. 20. 이전 1 다음
