Rock's Ezweb

https://youtu.be/n6_bI-KnjQA

Blog site design part1예제 (DESIGN 05)에서 이어서 학습해주세요.

Blog Site Design part 4
- 클리핑 마스크
- 레이어 마스크
- 보정 레이어 사용하기
- 컬러 오버레이
- 고스트 버튼 만들기
- 정렬하기

https://youtu.be/mY7TfTS9spQ

Blog site design part1예제 (DESIGN 06)에서 이어서 학습해주세요.

Blog Site Design part3
- 패턴으로 가로줄 만들기
- 그룹 생성하기
- 레이어 이름 작성하기

https://youtu.be/WN2hFr-C-fI

Blog site design part1예제 (DESIGN 06)에서 이어서 학습해주세요.

Blog Site Design part 2
- 웹디자인용으로 포토샵 설정하기
- 웹디자인 순서
- canvas 생성하기
- 가이드 작성하기
- 그리드 작성하기
- 폰트사이즈와 행높이의 황금비율

https://youtu.be/RJLBF_7JqZY

Sample Download: http://bitly.kr/GeEA7


Blog Site Design part1
- 웹디자인 준비하기
- 폰트 수집하기

https://youtu.be/eGkJAxKmEDE

기본예제 1/4 예제: https://goo.gl/icduFr
1/4 예제에서 이어서 진행해주세요.

Sample Download: https://goo.gl/icduFr
(please check from Desgin 01[figma 1/4] footage)


- 서브페이지 만들기
- google material design 활용하기
- figma mirror 로 실시간으로 디자인 핸드폰에서 확인하기
- 페이지가 연결되는 프로토 타이핑 하기
- 디자인단계에서 css 코드 확인하기
- image 저장하기

https://youtu.be/63OpBisj6DY

기본예제: https://goo.gl/icduFr
1/4 예제에서 이어서 진행해주세요.

Sample Download: https://goo.gl/icduFr


3/4
- 폰트어썸 아이콘
- 로그인 입력폼, 버튼 
- 첫 메인화면 완성하기
- 히스토리 저장하기

4/4
- 서브페이지 만들기
- google material design 활용하기
- figma mirror 로 실시간으로 디자인 핸드폰에서 확인하기
- 페이지가 연결되는 프로토 타이핑 하기
- 디자인단계에서 css 코드 확인하기
- image 저장하기

https://youtu.be/e9YZPOUnv14

Sample Download: https://goo.gl/icduFr
(please check from Desgin 01[figma 1/4] footage)

- 펜툴 사용하기
- 컴포넌트 사용하기
- 모바일 사이트 디자인하기
- 헤더 완성하기

Code Editor: Notepad++
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb

https://youtu.be/_myVwi0vq5s

Sample Download:  https://goo.gl/icduFr

1/4
- 피그마로 디자인하기
- 피그마로 요소들 그리기
- 그리드 사용하기
- 텍스트 사용하기

2/4
- 펜툴 사용하기
- 컴포넌트 사용하기
- 모바일 사이트 디자인하기
- 헤더 완성하기

3/4
- 폰트어썸 아이콘
- 로그인 입력폼, 버튼 
- 첫 메인화면 완성하기
- 반응형에 맞춰 유연하게 디자인하기
- figma mirror 로 실시간으로 디자인 핸드폰에서 확인하기

4/4
- 서브페이지 만들기
- google material design 활용하기
- figma mirror 로 실시간으로 디자인 핸드폰에서 확인하기
- 페이지가 연결되는 프로토 타이핑 하기
- 디자인단계에서 css 코드 확인하기
- image 저장하기