내가 배우는 이야기

UI UX 실습- 탭 메뉴 만들기 + 레이어정리 팁 본문

로봇화/UI. UX 디자인

UI UX 실습- 탭 메뉴 만들기 + 레이어정리 팁

깨끗한눈빛 2018. 5. 8. 20:00

탭 메뉴 실습


1. 새파일 열기

700*500


2. 가이드라인 그리기

- 상단 60px, 좌우하단 40px


3. 상단 메뉴 세 개 그리기



4. 온오프 버전 만들기

 - Ctrl + J를 눌러 레이어 복사 -> 폴더링(보통 Off 탭이 아래에 위치)

 - On 탭 눈에 오른쪽 마우스를 눌러 색을 넣어준다


5. 이미지 넣기

그냥 넣으면 안됨!

원하는 사이즈의 도형을 넣고> 이미지를 위에 얹어서> Ctrl + G로 레이어마스크를 씌워야함


6. 배경도형 넣기

배경. 도형을 일반레이어로 바꿔줘야한다!


[오늘 배운 일러스트 단축키]

1. Ctrl + N

Background color가 있어야 정렬이 쉽다

2. Ctrl + J 레이어 복사



[기타 팁]

1. 폴더/레이어 정리하기

+++Header
 >Util menu
  >>123
 >1menu
 >2menu

+++Navigation

+++Visual

+++Contents

+++Footer

( +++ 또는 ***: 맨 상위 폴더를 의미)


2. 웹페이지 구성

Header/Top: 상단
Navigation: GNB(Global Navigation Bar), Lnb(Left Navigation Bar(서브페이지))
Visual: 제품이미지, 브랜드 아이텐티티)
Contents
Footer 

ex.


** GNB와 Footer는 바뀌지 않고 전체 사이트에 동일하게 적용


Comments