ตัวอย่างเอกสารประกอบการสอน

1. Photoshop Web design
คอร์สสอนการออกแบบเว็บไซต์ด้วย Photoshop CC 2014 for Novice to Ninja

3. เตรียมเครื่องมือ
สุดยอดโปรแกรมสาหรับรีทัชรูปภาพ ที่มีคนใช้มากที่สุดในโลก และยังเป็นสุดยอดเครื่องมือที่ใช้ในการออกแบบเว็บไซต์อีกเช่นกัน
Code Editor ฟรีที่ทาง Adobe ได้ร่วมพัฒนาโดยเหมาะสาหรับงาน Frontend เป็นอย่างยิ่ง
เครื่องมือสาหรับใช้จาลองเซิร์ฟเวอร์ และทาเซิร์ฟเวอร์เสมือนบน local ได้

4. หลักการออกแบบ
ความสวยงามเป็นเพียงส่วนหนึ่งของการออกแบบ
ที่ช่วยเสริมความน่าสนใจของเว็บไซต์คุณให้กับผู้ใช้งานเท่านั้น
แต่มันจะไม่มีความหมายเลย ถ้ามันไม่ “ตอบโจทย์” หรือ มันไม่ใช่ สิ่งที่ผู้ใช้งานต้องการจริงๆ

5. แรงบัลดาลใจ และ ไอเดียอยู่รอบตัว
ทุกๆช่วงเวลาของชีวิต เป็นแรงบัลดาลใจ ให้คุณได้
ไม่ว่าจะเป็นปัญหาต่างๆที่อยู่รอบตัวคุณ หรืออยู่รอบตัวคนอื่นๆที่คุณพบเจอ
หากคุณตระหนักคิด หรือ มองไปรอบๆ คุณจะเจอแรงบัลดาล หรือ ไอเดียดีๆได้แน่นอน

6. ทุกๆช่วงเวลาของชีวิต เป็นแรงบัลดาลใจ ให้คุณได้
สิ่งที่อยู่รอบๆตัว “ลูกแมวที่เลี้ยงไว้” “ลูกชายที่กาลังยกมือขึ้นมาจับหู” “ลูกบอลของเล่นของลูกชาย”
แค่นี้เราก็สามารถนาสิ่งที่อยู่รอบตัวมาสร้างเป็นผลงานง่ายๆได้แล้วครับ

7. แล้วถ้าหาจากสิ่งรอบข้างไม่ได้ละ ?
ในบางครั้งงานดีไซน์ อาจจะต้องใช้แรงบัลดาลใจ จากผลงานของผู้อื่นด้วยเช่นกัน
dribbble.com

8. แล้วถ้าหาจากสิ่งรอบข้างไม่ได้ละ ?
ในบางครั้งงานดีไซน์ อาจจะต้องใช้แรงบัลดาลใจ จากผลงานของผู้อื่นด้วยเช่นกัน
www.behance.net

9. แล้วถ้าหาจากสิ่งรอบข้างไม่ได้ละ ?
ในบางครั้งงานดีไซน์ อาจจะต้องใช้แรงบัลดาลใจ จากผลงานของผู้อื่นด้วยเช่นกัน
www.awwwards.com

10. การฝึกที่ดีคือการเลียนแบบ
ใช่แล้วครับ ถ้าเกิดว่าเราเป็นมือใหม่การที่จะคิดสร้างสรร ผลงานออกมาเองแล้วมันยาก บางทีอาจถึงขั้นมืด 8 ด้าน
แล้วเราจะแก้ปัญหานี้ยังไง ? ตามที่ผมขึ้นหัวไว้นั่นแหละครับ ฝึกฝีมือด้วยการ เลียนแบบ
เราสามารถฝึกการดีไซน์ของเราด้วยการเลียนแบบผลงานคนอื่นได้ครับ การเลียนแบบไม่ใช่การ copy and paste
แต่มันเป็นการศาสตร์ๆนึง ที่ช่วยให้เราเกิดการเรียนรู้ได้อย่างรวดเร็ว
ยิ่งเราเลียนแบบเยอะเท่าไหร่ เรายิ่งเห็นแนวทางมากขึ้นเท่านั้น

11. อย่ากลัวการใช้ White Space
W H I T E S P A C E คือการเลือกใช้พื้นที่ว่างให้เหมาะสมกับชิ้นงาน
ถ้าชิ้นงานที่คุณมองดูแล้วรู้สึก “อึดอัด” ลองเพิ่มพื้นที่ว่างเข้าไป สัก 2 เท่า
และถ้าอยากทา UI ที่ดูแล้วให้ความรู้สึกว่าผ่านการดีไซน์มาแล้ว ต้องมีพื้นที่โล่งเยอะ ๆ
Erik D. Kennedy

12. เพิ่มความหรูหราด้วยการใช้งาน
WHITE SPACE

13. เรื่องของ สี

15. แบรนด์ สี และ ความรู้สึก
แต่ละแบรนด์มีการเลือก สีที่ส่งผลต่อความรู้สึก ของผู้ชม

16. Adobe Color CC
เครื่องมือสาหรับการสร้างSwatch สาหรับนาไปใช้ใน Photoshop CC 2014