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

to Ninja

เต์ร์�ยมเคร์��องม�อ

ส�ด้ยอด้โปร์แกร์มส�าหร์�บร์�ทั�ชร์"ปภาพ ทั��ม�คนใช�มากทั��ส�ด้ในโลก และย�งเป(นส�ด้ยอด้เคร์��องม�อทั��ใช�ในการ์ออกแบบเว็ บไซต์�อ�กเช)นก�น

Code Editor ฟร์�ทั��ทัาง Adobe ได้�ร์)ว็มพ�ฒนาโด้ยเหมาะส�าหร์�บงาน Frontend เป(นอย)างย,�ง

เคร์��องม�อส�าหร์�บใช�จำ�าลองเซ,ร์�ฟเว็อร์� และทั�าเซ,ร์�ฟเว็อร์�เสม�อนบน local ได้�

หล�กการ์ออกแบบ

คว็ามสว็ยงามเป(นเพ�ยงส)ว็นหน.�งของการ์ออกแบบ

ทั��ช)ว็ยเสร์,มคว็ามน)าสนใจำของเว็ บไซต์�ค�ณให�ก�บผู้"�ใช�งานเทั)าน�2น

แต์)ม�นจำะไม)ม�คว็ามหมายเลย ถ้�าม�นไม) ต์อบโจำทัย� หร์�อ ม�นไม)ใช) “ ” สิ่��งที่��ผู้�ใช้งานต้องการจร�งๆ

แร์งบ�ลด้าลใจำ และ ไอเด้�ยอย")ร์อบต์�ว็

ที่�กๆช้�วงเวลาของช้�ว�ต้ เป็�นแรงบั�ลดาลใจ ให้คุ�ณได

ไม)ว็)าจำะเป(นป4ญหาต์)างๆทั��อย")ร์อบต์�ว็ค�ณ หร์�ออย")ร์อบต์�ว็คนอ��นๆทั��ค�ณพบเจำอ

หากค�ณต์ร์ะหน�กค,ด้ หร์�อ มองไปร์อบๆ ค�ณจำะเจำอแร์งบ�ลด้าล หร์�อ ไอเด้�ยด้�ๆได้�แน)นอน

ที่�กๆช้�วงเวลาของช้�ว�ต้ เป็�นแรงบั�ลดาลใจ ให้คุ�ณได

ส,�งทั��อย")ร์อบๆต์�ว็ ล"กแมว็ทั��เล�2ยงไว็� ล"กชายทั��ก�าล�งยกม�อข.2นมาจำ�บห" ล"กบอลของเล)นของล"กชาย“ ” “ ” “ ”

แค)น�2เร์าก สามาร์ถ้น�าส,�งทั��อย")ร์อบต์�ว็มาสร์�างเป(นผู้ลงานง)ายๆได้�แล�ว็คร์�บ

แล�ว็ถ้�าหาจำากส,�งร์อบข�างไม)ได้�ละ ?ในบางคร์�2งงานด้�ไซน� อาจำจำะต์�องใช�แร์งบ�ลด้าลใจำ จำากผู้ลงานของผู้"�อ��นด้�ว็ย

เช)นก�น

dribbble.com

แล�ว็ถ้�าหาจำากส,�งร์อบข�างไม)ได้�ละ ?ในบางคร์�2งงานด้�ไซน� อาจำจำะต์�องใช�แร์งบ�ลด้าลใจำ จำากผู้ลงานของผู้"�อ��นด้�ว็ย

เช)นก�น

www.behance.net

แล�ว็ถ้�าหาจำากส,�งร์อบข�างไม)ได้�ละ ?ในบางคร์�2งงานด้�ไซน� อาจำจำะต์�องใช�แร์งบ�ลด้าลใจำ จำากผู้ลงานของผู้"�อ��นด้�ว็ย

เช)นก�น

www.awwwards.com

การ์ฝึ8กทั��ด้�ค�อการ์เล�ยนแบบใช)แล�ว็คร์�บ ถ้�าเก,ด้ว็)าเร์าเป(นม�อใหม)การ์ทั��จำะค,ด้สร์�างสร์ร์ ผู้ลงานออกมาเองแล�ว็ม�นยาก บางทั�อาจำถ้.งข�2นม�ด้ 8 ด้�าน

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

แต์)ม�นเป(นการ์ศาสต์ร์�ๆ น.ง ทั��ช)ว็ยให�เร์าเก,ด้การ์เร์�ยนร์" �ได้�อย)างร์ว็ด้เร์ ว็

ย��งเราเล�ยนแบับัเยอะเที่�าไห้ร� เราย��งเห้'นแนวที่างมากข)*นเที่�าน�*น

อย)ากล�ว็การ์ใช� White Space

W H I T E S PA C E ค�อการ์เล�อกใช�พ�2นทั��ว็)างให�เหมาะสมก�บช,2นงาน

ถ้� าช,2นงานทั��ค�ณมองด้"แล� ว็ร์" �ส.ก “อ)ดอ�ด ลองเพ,�มพ�2 นทั�� ว็) าง เข� า ไป ”

ส�ก 2 เที่�าและถ้าอยากที่,า UI ที่��ด�แลวให้คุวามร�สิ่)กว�าผู้�านการด�ไซน.มาแลว

ต้องม�พื้0*นที่��โล�งเยอะ ๆ Erik D. Kennedy

เพ,�มคว็ามหร์"หร์าด้�ว็ยการ์ใช�งาน

WHITE SPACE

เร์��องของ สิ่�

แบร์นด้� ส� และ คุวามร�สิ่)ก

แต์)ละแบร์นด้�ม�การ์เล�อก สิ่�ที่��สิ่�งผู้ลต้�อคุวามร�สิ่)ก ของผู้"�ชม

Adobe Color CC

เคร์�� องม�อส�าหร์�บการ์สร์�างSwatch ส�าหร์�บน�า ไปใช� ใน Photoshop CC 2014