เอกสารประกอบการสอนหลักสูตร Photoshop Webdesign Baby to Ninja รายละเอียด : http://cloud-tutorial.com/wordpress-theme-baby-to-ninja/

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

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

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

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

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

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

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

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

11. เพิ่มควำมหรูหรำด้วยกำรเพิ่ม
WHITE
SPACE

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

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

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

16. How you choose Picture
for your Design ?
กำรเลือกใช้ภำพในงำนออกแบบ

17. Monochromatic Style
ภาพแบบสีโทนเดียว
มันจะทำให้งำนออกแบบของคุณดูทันสมัยอยู่เสมอ

18. Sensory Immersion
ภาพที่บ่งบอกความรู้สึก
ภำพที่สำมำรถกระตุ้นควำมรู้สึกต่ำงๆของผู้ดูได้

19. Super still-life
ภาพสิ่งของในชีวิตประจาวัน
ทำให้กำรสื่อสำรบ่งบอกตัวตนหรือธุรกิจ
ของเรำอย่ำงมีเอกลักษณ์

20. Point of view
ภาพที่แสดงสิ่งที่ทาอยู่
ภำพที่เห็นผู้คนหรือเห็นตัวเองกำลังทำ
กิจกรรมต่ำงๆอยู่ เช่น กำรทำงำน
ท่องเที่ยว พักผ่อน กินอำหำร

21. All kinds of people
ภาพแสดงความรู้สึก
ภำพแสดงควำมรู้สึกต่ำงๆที่เกิดขึ้นของผู้คน
ภำพแบบนี้เอำไว้สื่อสำรให้เห็นอำรมณ์ต่ำงๆ
ของควำมรู้สึกที่เรำจะใส่ไปในงำนออกแบบ

22. WIREFRAMINGกำรออกแบบโครงร่ำง ก่อนทำงำนจริง

23. Pen and Paper
วาดโครงร่างด้วยปากกา ดินสอ และ กระดาษ
กำรสร้ำงโครงร่ำงหรือไวร์เฟรมไม่จำเป็นต้องใช้อุปกรณ์หรือ
เทคโนโลยีที่สูงมำกนักก็ได้ เพียงแค่มีปำกกำ หรือว่ำดินสอ
และกระดำษก็เพียงพอแล้ว

24. Smart Technology
วาดโดยเครื่องมือที่ทันสมัย
กำรสร้ำงไวร์เฟรมสำมำรถทำได้อีกหลำกหลำยวิธีด้วย
เทคโนโลยีในปัจจุบันแต่ในวิธีกำรที่ผมจะสอนคือ
PSD WIREFRAMING คือกำรสร้ำงโครงร่ำงจำกโปรแกรม
PHOTOSHOP นั่นเองครับ
ดาวน์โหลด

25. End of Theory