interactive_design/web_2010_spring

웹디자인 기초 투토리얼

jisunlee 2011. 4. 19. 17:51
http://vimeo.com/6520450
Web Design Tutorial Part One

Web Design Tutorial Part One from andrew on Vimeo.


1. 와이어 프레임을 손으로 먼저 자세히 그린다.
2. 포토샵에서 먼저 새로운 도큐먼트에서 Web을 선택하고 거기서 사이즈를 선택
3. proof setup에서 monitor RGB 선택, proof color 를 선택
4. grid system generator를 이용하여 그리드 이미지를 만들고 이것을 가져다가 포토샵에 넣고 사용
5. 포토샵 레이어 폴더를 만들어서 각각의 로고, 메인메뉴 등등의 폴더를 만들어서 따로 따로 디자인해서 이용함 . 이것은 와이어 프레임을 그렸던 것에 기초해서 만든다. 그런다음에 종류별로 다시 정리 (폴더 끼리 묶는)
6. 칼라 팔레트는 코드로 메모장에 넣어놓고 항상 일관성 있게 쓴다.
7. 칼라 팔레트의 색상을 선택하여 포토샵으로 가져와서 메인에 상단에 버켓툴을 이용하여 붇는다.
8. 로고를 가져와서 좌측 라인에 정렬한다.
9. 사진을 넣을 경우 플리커(flickr.com)등에서 라이센스에 문제가 없는 사진을 가져다가 쓴다.
10. 상단 네비게이션을 보색을 사용함으로써 사이트에 생동감을 더한다. http://colorschemedesigner.com/ 에서 보색을 얻을 수 있음
11. 상단네비게이션에 시스템 폰트를 사용하는 경우, 시스템 폰트들을 사용하여 적당한 폰트를 선택하고 같은 간격으로 나열한다.



Web Design Tutorial Part 2 from andrew on Vimeo.






What is web design? By Nico Macdonald
http://books.google.com/books?id=YIzEcmM8cD8C&printsec=frontcover&dq=web+design&cd=6#v=onepage&q=&f=false

http://www.youtube.com/watch?v=GOfhmzNLWzY
HTML Tutorial 1 - Designing A Website In Notepad - Basics and Beginnings