<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>DesigNIL: Web Design HTML5 CSS3 Tutorial รวมความรู้เว็บดีไซน์ สอนออกแบบเว็บไซต์ &#187; Uncategorized</title>
	<atom:link href="http://www.designil.com/category/uncategorized/feed" rel="self" type="application/rss+xml" />
	<link>http://www.designil.com</link>
	<description>สอนเว็บดีไซน์ ออกแบบเว็บไซต์ HTML CSS Layout สวยๆ</description>
	<lastBuildDate>Sat, 04 Feb 2012 10:00:50 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>[Graphic Design] กราฟฟิกดีไซน์กับจิตวิทยามนุษย์ (part I)</title>
		<link>http://www.designil.com/graphic-design-and-psychology-1.html</link>
		<comments>http://www.designil.com/graphic-design-and-psychology-1.html#comments</comments>
		<pubDate>Tue, 29 Jun 2010 14:43:34 +0000</pubDate>
		<dc:creator>LuviKunG</dc:creator>
				<category><![CDATA[Advance]]></category>
		<category><![CDATA[ETC]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[color]]></category>
		<category><![CDATA[colour]]></category>
		<category><![CDATA[designil]]></category>
		<category><![CDATA[logo design]]></category>
		<category><![CDATA[psycho]]></category>
		<category><![CDATA[psychology]]></category>
		<category><![CDATA[tips & techniques]]></category>
		<category><![CDATA[กราฟฟิก]]></category>
		<category><![CDATA[การออกแบบ]]></category>
		<category><![CDATA[จิตวิทยา]]></category>
		<category><![CDATA[สี]]></category>
		<category><![CDATA[ออกแบบเว็บไซด์]]></category>
		<category><![CDATA[เว็บดีไซน์]]></category>

		<guid isPermaLink="false">http://www.designil.com/?p=413</guid>
		<description><![CDATA[ก่อนอื่นต้องขอโทษด้วยครับที่อัพเดทช้า ที่สัญญากันไว้ว่าจะอัพให้หลังจาก 1 สัปดาห์ผ่านมา แต่กลับเป็น 1 เดือนไปซะงั้น เนื่องจากผมมีงานเข้าอย่างแรงครับ จึงต้องรีบทำงานให้เสร็จก่อน (และรับเงินไปซื้อ psp มานั่งเล่น&#8230;) คราวนี้เราจะมาพูดถึงกราฟฟิกดีไซน์กับจิตวิทยาของมนุษย์กัน ซึ่งเป็นเรื่องสำคัญต่อนักกราฟฟิกดีไซน์เนอร์โดยตรง หรืออาจเป็นสายอื่นๆเช่น นักคำนวน นักวิทยาศาสตร์ หรือนักร้อง ก็ย่อมทำได้นะครับ (เว่อร์ไปมั้ง&#8230;) บทความนี้มีเนื้อหาค่อนข้างยาว ดังนั้นผมจะแบ่งออกเป็น 7 ตอนใหญ่ๆด้วยกัน ซึ่งตอนนี้ผมจะนำเสนอตอนแรกกันก่อน ปฐมบทจิตวิทยาของมนุษย์ จิตวิทยา คือศาสตร์ที่ว่าด้วยการศึกษาเกี่ยวกับจิตใจ (กระบวนการของจิต) , กระบวนความคิด, และพฤติกรรม ของมนุษย์ด้วยกระบวนการทางวิทยาศาสตร์ เนื้อหาที่นักจิตวิทยาศึกษาเช่น การรับรู้ (กระบวนการรับข้อมูลของมนุษย์) , อารมณ์, บุคลิกภาพ, พฤติกรรม, และรูปแบบความสัมพันธ์ระหว่างบุคคล จิตวิทยายังมีความหมายรวมไปถึงการประยุกต์ใช้ความรู้กับกิจกรรมในด้านต่าง ๆ ของมนุษย์ที่เกิดขึ้นในชีวิตประจำวัน (เช่นกิจกรรมที่เกิดขึ้นในครอบครัว, ระบบการศึกษา, การจ้างงานเป็นต้น) และยังรวมถึงการใช้ความรู้ทางจิตวิทยาสำหรับการรักษาปัญหาสุขภาพจิต นักจิตวิทยามีความพยายามที่จะศึกษาทำความเข้าใจถึงหน้าที่หรือจุดประสงค์ ต่าง ๆ ของพฤติกรรมที่เกิดขึ้นจากตัวบุคคลและพฤติกรรมที่เกิดขึ้นในสังคม ขณะเดียวกันก็ทำการศึกษาขั้นตอนของระบบประสาทซึ่งมีผลต่อการควบคุมและ แสดงออกของพฤติกรรม[1] จิตวิทยาเป็นศาสตร์ที่ศึกษาค้นคว้าเพื่อนำข้อมูลความรู้มาเสนอ [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="aligncenter" title="กราฟฟิกดีไซน์กับจิตวิทยามนุษย์" src="http://i601.photobucket.com/albums/tt91/luvikung/designil04.jpg" alt="กราฟฟิกดีไซน์กับจิตวิทยามนุษย์" width="500" height="160" /></p>
<p style="text-align: center; font-size: 25px; font-weight: bold;"><span id="more-413"></span></p>
<p><em><a href="http://www.designil.com/graphic-design-is-everything.html" target="_blank">ก่อนอื่นต้องขอโทษด้วยครับที่อัพเดทช้า ที่สัญญากันไว้ว่าจะอัพให้หลังจาก 1 สัปดาห์ผ่านมา แต่กลับเป็น 1 เดือนไปซะงั้น เนื่องจากผมมีงานเข้าอย่างแรงครับ จึงต้องรีบทำงานให้เสร็จก่อน</a> (และรับเงินไปซื้อ psp มานั่งเล่น&#8230;)</em></p>
<p>คราวนี้เราจะมาพูดถึงกราฟฟิกดีไซน์กับจิตวิทยาของมนุษย์กัน ซึ่งเป็นเรื่องสำคัญต่อนักกราฟฟิกดีไซน์เนอร์โดยตรง หรืออาจเป็นสายอื่นๆเช่น นักคำนวน นักวิทยาศาสตร์ หรือนักร้อง ก็ย่อมทำได้นะครับ <em>(เว่อร์ไปมั้ง&#8230;)</em></p>
<p>บทความนี้มีเนื้อหาค่อนข้างยาว ดังนั้นผมจะแบ่งออกเป็น 7 ตอนใหญ่ๆด้วยกัน ซึ่งตอนนี้ผมจะนำเสนอตอนแรกกันก่อน</p>
<h3><span style="text-decoration: underline;"><strong>ปฐมบทจิตวิทยาของมนุษย์</strong></span></h3>
<p><strong>จิตวิทยา</strong> คือศาสตร์ที่ว่าด้วยการศึกษาเกี่ยวกับจิตใจ (กระบวนการของจิต) , กระบวนความคิด, และพฤติกรรม ของมนุษย์ด้วยกระบวนการทางวิทยาศาสตร์ เนื้อหาที่นักจิตวิทยาศึกษาเช่น การรับรู้ (กระบวนการรับข้อมูลของมนุษย์) , อารมณ์, บุคลิกภาพ, พฤติกรรม, และรูปแบบความสัมพันธ์ระหว่างบุคคล จิตวิทยายังมีความหมายรวมไปถึงการประยุกต์ใช้ความรู้กับกิจกรรมในด้านต่าง ๆ ของมนุษย์ที่เกิดขึ้นในชีวิตประจำวัน (เช่นกิจกรรมที่เกิดขึ้นในครอบครัว, ระบบการศึกษา, การจ้างงานเป็นต้น) และยังรวมถึงการใช้ความรู้ทางจิตวิทยาสำหรับการรักษาปัญหาสุขภาพจิต นักจิตวิทยามีความพยายามที่จะศึกษาทำความเข้าใจถึงหน้าที่หรือจุดประสงค์ ต่าง ๆ ของพฤติกรรมที่เกิดขึ้นจากตัวบุคคลและพฤติกรรมที่เกิดขึ้นในสังคม ขณะเดียวกันก็ทำการศึกษาขั้นตอนของระบบประสาทซึ่งมีผลต่อการควบคุมและ แสดงออกของพฤติกรรม<sup><a href="#refmark1" target="_parent">[1]</a></sup></p>
<p>จิตวิทยาเป็นศาสตร์ที่ศึกษาค้นคว้าเพื่อนำข้อมูลความรู้มาเสนอ อธิบาย และเพื่อควบคุมและเปลี่ยนแปลงพฤติกรรมของมนุษย์และสัตว์ จิตวิทยามุ่งศึกษาด้านความสัมพันธ์ระหว่างกระบวนการของร่างกายกับจิตใจ ด้วยวิธีการทางวิทยาศาสตร์ที่เป็นระเบียบแบบแผน เพราะร่างกายและจิตใจมักมีการแสดงออกร่วมกัน อีกทั้งยังแสดงออกในแนวทางที่สามารถทำนายได้<sup><a href="#refmark1" target="_parent">[1]</a></sup></p>
<h3><span style="text-decoration: underline;"><strong>จิตของมนุษย์</strong></span></h3>
<p>มีอยู่ 3 แบบด้วยกันคือ</p>
<p>1.จิตสำนึก (Conscious) คือจิตที่เราสามารถระลึกได้ คิดได้ ควบคุมได้ เป็นจิตที่เสมือนอยู่บนผิวน้ำ<br />
2.จิตใต้สำนึก (Subconscious) คือจิตที่เราไม่สามารถระลึกได้ ควบคุมไม่ได้ แต่จะทำได้ก็ต่อเมื่อมีสมาธิในระดับหนึ่ง หรือถูกระลึกขึ้นมาโดยสิ่งเร้า เช่น รูปภาพตอนคุณยังเด็กๆ เป็นต้นฯ จิตนี้เสมือนปลาที่ว่ายอยู่ภายในน้ำ อยู่ระหว่างผิวน้ำและก้นบึง<br />
3.จิตไร้สำนึก (Unconscious) คือจิตที่เราไม่สามารถระลึกได้ เป็นจิตที่ไร้การควบคุม ไร้ความคิด ไร้ตัวตน เป็นจิตที่อยู่ลึกที่สุด เสมือนก้นบึงมหาสมุทร</p>
<h3><span style="text-decoration: underline;"><strong>จิตวิทยาที่สัมพันธ์กับกราฟฟิกดีไซน์</strong></span></h3>
<p>แบ่งออกเป็น 4 อย่างด้วยกัน คือ</p>
<p>1.สี (Color)<br />
2.ขนาด (Size)<br />
3.ลักษณะปรากฎ (Texture)<br />
4.รูปแบบการทำงาน (Technical)</p>
<h3><span style="text-decoration: underline;"><strong>สี (Color)</strong></span></h3>
<p>สีเป็นสิ่งสำคัญสำหรับการกำหนดภาพลักษณ์ (Imagination) ของผลงาน เป็นสิ่งที่มีการเชื่อมต่อ (Resonance) ระหว่างผลงานและผู้สัมผัส (Human) โดยผู้สัมผัสจะถูกคล้อยตามไปทางจิตวิทยาด้านสีที่กำหนดในผลงาน เช่น ถ้าสีใช้โทนร้อน (Hot-Tone Color) ผู้สัมผัสจะมีกระบวนการทางความคิดภายในจิตสำนึกหรือจิตใต้สำนึก สร้างอารมณ์และความคิดขึ้นมาต่อชิ้นงาน โดยในที่นี้หมายถึงผลงานคือสิ่งเร้านั่นเอง</p>
<p>ผลงานหรือชิ้นงานของคุณอาจเป็นรูปปั้น รูปวาด รูปถ่าย หรือ รูปแบบเว็บไซท์ที่ได้ออกแบบไว้ก็ได้</p>
<p><strong>บทบาทของสี</strong> อย่างที่ได้กล่าวมาข้างต้น สีมีบทบาทด้านการแสดงอารมณ์และความคิดมาเป็นอันดับหนึ่ง รองลงมาเป็นขนาดและลักษณะปรากฎ สีเป็นพื้นฐานเกี่ยวกับการควบคุมระบบในสมอง มีการเชื่อมต่อกับสิ่งเร้าตลอดเวลา เมื่อขณะคุณใช้สายตามอง กระบวนการทางสมองก็จะแปรตามความคิดที่เกิดขึ้น เช่น เด็กอายุ 3-4 เดือนที่นั่งเล่นของเล่นหลากสี เหตุที่ทำแบบนั้นก็เพื่อให้เด็กมีการควบคุมระบบในสมองด้วยตนเองตั้งแต่เกิด</p>
<p><strong>เราต้องรู้จักการควบคุมสี</strong> ซึ่งเป็นปัจจัยสำคัญต่อการออกแบบหรือดีไซน์ชิ้นงานหรือผลงาน การหัดมองสีและเรียกชื่อจึงเป็นสิ่งสำคัญ คุณต้องรู้การควบคุมโทนสี การกะโทนสี การวางโทนสี การเรียงโทนสี เป็นต้นฯ</p>
<p>http://www.colourlovers.com/ เป็นเว็บไซท์หนึ่งที่มีนักเชี่ยวชาญด้านการออกแบบโทนสี จัดสรรโทนสีให้กับนักดีไำซน์เนอร์ทั้งมือใหม่และผู้ที่คิดโทนสีไม่ออก ซึ่งท่านสามารถเข้าไปดู และสังเกตการออกแบบโทนสีได้เป็นตัวอย่าง</p>
<p><strong>ทฤษฎีสี</strong></p>
<p>มีอยู่หลายทฤษฎี ซึ่งท่านสามารถหารายละเอียดได้ที่ Google แต่ในที่นี้ผมจะยกตัวอย่างทฤษฎีแค่ 2 อย่างที่ผมใช้อยู่เป็นประจำ</p>
<p><em><strong><span style="text-decoration: underline;">1.Percentage Color &amp; Lightening</span></strong></em></p>
<p>การกำหนดค่าสีออกมาเป็นสัดส่วนร้อยละ (เปอร์เซ็นท์) และการกำหนดความสว่างของสี เช่น 60/30/10 ที่ใช้กันทั่วไปตามการตกแต่งห้องหรือตกแต่งบ้าน<sup><a href="#refmark2" target="_parent">[2]</a></sup> หรือ 50/30/20 ที่ใช้กันตามเว็บไซท์ชื่อดัง (เช่น Facebook) หรือ 90/4/4/2 ซึ่งเป็นทฤษฎีสีของเว็บไซท์ Google นั่นเอง</p>
<p>การกำหนดค่าออกมาเป็นสัดส่วนร้อยละ มีประโยชน์ด้านการวัดขนาดและลักษณะด้วย อาจทำให้การทำงานง่ายขึ้น และมองภาพลักษณ์ได้ชัดเจนมากขึ้น</p>
<p>การกำหนดค่าความสว่างของสีก็เช่นกัน ในแต่ละสัดส่วนที่เรากำหนด เราจะต้องควบคุมสีให้มีความเข้มหรืออ่อนที่เข้ากับสีอื่นๆที่อยู่ข้างเขียง หรือที่เรียกว่าการทำให้เกิดการคู่ขนานของสี (Parallel Color)</p>
<p>Verdin<br />
by pinkcoma</p>
<p><img src="http://i601.photobucket.com/albums/tt91/luvikung/designil04_temp1.gif" border="0" alt="" /></p>
<p><strong><em><span style="text-decoration: underline;">2.Luvi&#8217;s Color Creation Laws</span></em></strong></p>
<p>เป็นทฤษฎีที่ผมเขียนขึ้นมาเอง ท่านสามารถนำไปใช้ได้โดยไม่ต้องขออนุญาติจากผม ซึ่งวิธีนี้จะคล้ายๆกับวิธีข้างต้น แต่จะทำให้คุณมองได้ง่ายขึ้น</p>
<p>การทำตามทฤษฎีนี้จะต้องทำเป็นลำดับขั้นตอนอย่างน้อย 4 ขั้นตอนจาก 7 ขั้นตอน ซึ่งจะมีดังนี้</p>
<p>1.กำหนดขอบเขตของโทนสี คิดถึงอารมณ์และความรู้สึกของสี จากนั้นร่างสีออกมาตามจินตนาการที่คุณเห็น<br />
2.วางสีโดยใช้สีที่คุณจินตนาการไว้ จากมากที่สุดไล่ไปจนถึงน้อยที่สุด (จะได้ออกมาเป็นสัดส่วนร้อยละ)<br />
3.ค่อยๆเรียบเรียงสีที่ไม่มีความจำเป็นออกไป หรือมีความจำเป็นน้อยให้ไปอยู่ด้านหลังสุดของลำดับ<br />
4.ลองค้นหาสีที่ใกล้เคียงกับสีหลัก แล้วค่อยๆใส่ลงไป อาจใช้ทฤษฎี Secant, Triangle, Quadable, Gradient ช่วยก็ได้ (โดยเทียบกับวงกลมสี) จากนั้นใส่เข้าไปในชุดสีที่คุณได้เรียงไว้<br />
5.ใส่สีที่อยู่ตรงข้ามกับสีหลักของคุณอย่างน้อย 1 สีเข้าไป (เช่นสีหลังคุณเป็นสีน้ำเงิน คุณต้องใส่สีเหลืองเข้าไปด้วย)<br />
6.ปรับความสว่างและความเข้มให้ไล่เรียงกัน ไม่ควรนำสีหลักของคุณเป็นสีสว่าง (ควรเข้มไว้เพื่อให้สีเด่น)<br />
7.ถ้าเป็นคอมพิวเตอร์กราฟฟิก ให้จดจำ HEX Color Code ไว้ (เป็นเลขฐาน 16  เรียงกัน 6 ตัว) ส่วนถ้าเป็นกราฟฟิกที่ไม่เกี่ยวกับคอมพิวเตอร์  ให้หาชื่อสีที่ค้างเคียงและจดจำ (ซึ่งขั้นตอนนี้เป็นสิ่งสำคัญที่สุด  เพราะคุณอาจนำกลับมาใช้ใหม่ได้อีกครั้ง)</p>
<p><em>บทความหน้า ผมจะมาสอนเกี่ยวกับการควบคุมสีและการเลือกใช้สี โดยใช้ Color Circle และการใช้ตารางสี HEX Color Code โดยใช้ชื่อสามัญในการเทียบ ซึ่งจะเป็นขั้น Advance สำหรับผู้เชี่ยวชาญด้วย (อาจมีการใช้ศัพท์เฉพาะปะปนเข้าไป) ส่วนวันนี้ผมขอตัวไปทำงานต่อละครับ</em></p>
<p><em>ป.ล. ก่อนไปจากบทความนี้ ให้สังเกตดีๆครับ เกี่ยวกับหน้าแรกของบทความนี้ จะเห็นว่ามีความผิดปกติไปเกี่ยวกับตัวอักษร &#8220;อ่านบทความนี้&#8230;&#8221; ซึ่งจะใหญ่กว่าทั่วไปที่เคยทำมา นั่นก็เป็นจิตวิทยาครับ แต่อยู่ในหมวดหมู่ของขนาดและลักษณะปรากฎ ซึ่งจะทำให้เนื้อหาดูน่าอ่านมากขึ้นครับ<br />
</em></p>
<p>LuviKunG</p>
<p>อ้างอิง :</p>
<p><a name="refmark1">[1]</a> <a href="http://th.wikipedia.org/wiki/%E0%B8%88%E0%B8%B4%E0%B8%95%E0%B8%A7%E0%B8%B4%E0%B8%97%E0%B8%A2%E0%B8%B2" target="_blank">http://th.wikipedia.org/wiki/%E0%B8%88%E0%B8%B4%E0%B8%95%E0%B8%A7%E0%B8%B4%E0%B8%97%E0%B8%A2%E0%B8%B2</a></p>
<p><a name="refmark2">[2]</a> <a href="http://www.thaihomelist.com/viewarticle.php?lg=th&amp;pid=33" target="_blank">http://www.thaihomelist.com/viewarticle.php?lg=th&amp;pid=33</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.designil.com/graphic-design-and-psychology-1.html/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>

