웹디자인을 위한 PSD 레이아웃 디자인 50선

웹사이트를 디자인할 때 보통 포토샵 등의 소프트웨어를 사용하여 미리 전체 레이아웃을 디자인을 하고,

완성된 디자인에서 이미지를 슬라이스하여 HTML 문서에 붙여 가는 작업으로 진행해 나갑니다.

이러한 웹 디자인의 작업에 참고가 될만한 포토샵(PSD) 레이아웃 트레이닝 사이트를 모아 봤습니다.

근데 모두 영문 사이트네요..ㅋㅋㅋ (전 봐도 몰겠다..ㅋ)

 

1. 포토샵으로 그런지(Grunge) 웹 디자인 하기
http://psd.tutsplus.com/interface-tutorials/how-to-create-a-grunge-web-design-in-photoshop/

 

2. 스튜디오 레이아웃 디자인(Wordpress Layout)
http://www.talk-mania.com/web-layouts/43737-design-studio-layout-wordpress-layout.html

 

3. 겔러리 웹사이트  레이아웃 디자인
http://psdvibe.com/2009/02/16/website-gallery-layout-design/

 

4. Create a Sleek, High - End Web Design from Scratch
http://psd.tutsplus.com/interface-tutorials/create-a-sleek-high-end-web-design-from-scratch/

 

5. Carbon Fiber Layout
http://psdlearning.com/2008/08/carbon-fiber-layout/

 

6. Design a Cartoon Grunge Web site Layout
http://psd.tutsplus.com/interface-tutorials/design-a-cartoon-grunge-website-layout/

 

7. Tutorial Site Blog Design
http://psdvibe.com/2009/02/11/tutorial-site-blog-design/

 

8. Create a Magic Night Themed Web Design from Scratch in Photoshop
http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-magic-night-themed-web-design-from-scratch-in-photoshop/

 

9. Full Photoshop Web Design - Journal
http://tutocity.com/index.php/photoshop/full-photoshop-web-design-journal.html

 

10. Photographer layout - Portfolio layout
http://www.talk-mania.com/web-layouts/42842-photographer-layout-portfolio-layout.html

 

11. Design a Unique Grungy Website Layout
http://psdfan.com/designing/design-a-unique-grungy-website/

 

12. Old paper layout - Great portfolio layout
http://www.talk-mania.com/web-layouts/43999-old-paper-layout-great-portfolio-layout.html

 

13. Making your own portfolio web page
http://www.adobetutorialz.com/articles/2967/1/Making-your-own-portfolio-web-page

 

14. Design an Awesome Band Website Template
http://www.photoshopstar.com/web-design/band-website-template/

 

15. Sound System Studio Web Layout
http://www.adobetutorialz.com/articles/2867/1/Sound-System-Studio-Web-Layout

 

16. Vector Layout - grunge vector layout
http://www.talk-mania.com/web-layouts/43769-vector-layout-grunge-vector-layout.html

 

17. Design Lab TV Styled Layout
http://psdvibe.com/2009/03/04/design-lab-tv-styled-layout/

 

18. How a Simple Layout Can Be Mixed 'n'Matched with Patterns, Photos and Backgrounds
http://psd.tutsplus.com/tutorials/interface-tutorials/how-a-simple-layout-can-be-mixed-n-matched-with-patterns-photos-and-backgrounds/

 

19. Photo Portfolio Web Page Layout
http://www.adobetutorialz.com/articles/2939/1/Photo-Portfolio-Web-Page-Layout

 

20. Online Photo Portfolio
http://www.adobetutorialz.com/articles/2896/1/Online-Photo-Portfolio

 

21. Creative Studio Web Page
http://www.adobetutorialz.com/articles/3017/1/Creative-Studio-Web-Page

 

22. Web Layout for Italian Restaurant
http://www.adobetutorialz.com/articles/2510/1/Web-Layout-for-Italian-Restaurant

 

23. Design Agency Layout - Tutorial 151
http://www.talk-mania.com/web-layouts/39171-design-agency-layout-tutorial-151-a.html

 

24. Graphic Design Studio Web Layout
http://www.adobetutorialz.com/articles/2810/1/Graphic-Design-Studio-Web-Layout

 

25. Computer Store Web Layout
http://www.adobetutorialz.com/articles/2556/1/Computer-Store-Web-Layout

 

26. Professional Web Layout for Business Solutions
http://www.adobetutorialz.com/articles/2751/1/Professional-Web-Layout-for-Business-Solutions

 

27. Chocolate Pro WordPress Style Layout
http://psdvibe.com/2009/02/08/chocolate-pro-wordpress-style-layout/

 

28. Hand drawn layouts - hottest design trends
http://www.talk-mania.com/web-layouts/43582-hand-drawn-layouts-hottest-design-trends.html

 

29. Professional WebLayout for Business Company
http://www.adobetutorialz.com/articles/2552/1/Professional-WebLayout-for-Business-Company

 

30. Design Studio Layout
http://psdvibe.com/2009/02/22/design-studio-layout/

 

31. Interior Design Layout
http://www.talk-mania.com/web-layouts/40144-interior-design-layout.html

 

32. Real Estate template
http://bwebi.com/real-estate-template.html

 

33. Design a Clean Business Layout
http://psdfan.com/designing/design-a-clean-business-layout/

 

34. Create a Vibrant Modern Blog Design in Photoshop
http://www.blog.spoongraphics.co.uk/tutorials/create-a-vibrant-modern-blog-design-in-adobe-photoshop

 

35. Arhitecture bureau Layout / Real Estate website
http://www.talk-mania.com/web-layouts/42793-arhitecture-bureau-layout-real-estate-website.html

 

36. Design a Web Template using the "960 Grid System"
http://photoshoptutorials.ws/photoshop-tutorials/layouts/design-a-web-template-using-the-960-grid-system/page-5.html

 

37. Web 2.0 vector layout
http://www.talk-mania.com/web-layouts/42618-web-2-0-vector-layout.html

 

38. Create a Dark Themed Web Design from Scratch
http://psd.tutsplus.com/interface-tutorials/create-a-dark-themed-web-design-from-scratch/

 

39. Designing Personal Web Page Layout
http://www.illustrateddesigns.com/articles/2495/1/Designing-Personal-Web-Page-Layout/Page1.html

 

40. Gaming Layout # 3
http://hv-designs.co.uk/2008/10/30/gaming-layout-3/

 

41. Design Studio Layout Tutorial
http://hv-designs.co.uk/2008/09/01/design-studio-layout-tutorial/

 

42. Business Layout # 2
http://hv-designs.co.uk/2008/09/28/business-layout-2/

 

43. Interior Design Layout
http://hv-designs.co.uk/2008/10/26/interior-design-layout/

 

44. Car Layout # 3
http://hv-designs.co.uk/2008/08/28/car-layout-3/

 

45. Personal Portfolio Layout # 2
http://hv-designs.co.uk/2008/10/03/personal-portfolio-layout-2/

 

46. Video Sharing Layout
http://hv-designs.co.uk/2008/07/01/video-sharing-layout/

 

47. Hosting Layout
http://hv-designs.co.uk/2008/08/18/hosting-layout/

 

48. Wordpress Mockup Layout
http://hv-designs.co.uk/2008/07/29/wordpress-mockup-layout/

 

49. Web Design Layout # 4 Tutorial
http://hv-designs.co.uk/2007/11/18/web-design-layout-4-tutorial/

 

50. Portfolio Layout # 6
http://hv-designs.co.uk/2008/06/18/portfolio-layout-6/

http://cafe.naver.com/codestudy/826