상세페이지

- 상세페이지

디자인은 가로가 기준이 된다. (기본 960 정도)

보통 카드 디자인이나 크기가 작은 디자인들은 3등분법을 사용하지만 상세페이지는 세로가 길기 때문에 칼럼 그리드를 (12,16등) 사용한다.

그리드를 만들어 주는 사이트도 있다. 입력값(나누고자 하는 그리드 수, 컨텐츠 크기, 사이 여백)을 넣게 되면 계산을 해주는데 이때 컨텐츠 width와 full width 가 나오는데 여백을 잡지 않는 것과 잡은 값을 알려준다.

'이벤트 페이지 제작'에서 나왔던 칼럼 그리드 설정 방법을 사용해 기본적인 베이스 그리드를 만들어 준다.

- 화살표 만드는 방법

도형툴로 사각형을 그려준 후 path 수정툴을 눌러 원하는 꼭짓점을 누르고 우클릭 하여 Delect Anchor Point를 누르면 삼각형으로 만들어진다.

원하는 만큼 크기를 늘려준 후 도형 수정툴을 선택하여 원하는 모양으로 바꿔준다.

(여기서는 Arc - -50도 하여 만들었다.)

업그레이드가 되었다는 느낌을 주기 위해 그라디언트를 넣어주는데 이때 지정하였던 주조색과 다르다면 색툴을 이동 시켜 명도와 채도는 같지만 색이 다른 느낌을 넣어서 자연스럽게 이어지도록 만들어준다.

아이콘을 만들때 path 툴을 다양하게 설정하여서 만들 수 있다.

이때 combin을 설정하지 말고 원하는 모양을 그린 후 Ctrl 키를 눌러 path를 끝내고 새로운 레이어를 생성해 작업한다.

* 작업 후 path들을 smart object로 묶기 때문에 색 변경시 레이어 스타일에 들어가서 color overlay를 설정해준다.

<크기가 큰 상세페이지 저장하는 방법>

edit -copy moge - new - ctrl + v - save (이때 자른 부분은 가이드라인 해준다.) - 나머지 부분 selection - copy moge

- new - enter - ctrl + v - (이미지를 쪼개준다.) - export as - jpg (100%) - export (다른 이미지도 반복)

디자인 스케치

작업 결과물

갈무리