<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>เว็บดีไซน์ สอนออกแบบเว็บไซต์ Web Design</title>
	
	<link>http://www.designil.com</link>
	<description>สอนเว็บดีไซน์ ออกแบบเว็บไซต์ Web Design XHTML/CSS</description>
	<lastBuildDate>Thu, 26 Aug 2010 17:57:32 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/designil" /><feedburner:info uri="designil" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>
		<title>[ค่ายฟรี ห้ามพลาด!] IYWC 8 นิสิต-นักศึกษาคนไหนอยากทำเว็บเป็น ต้องเข้าค่ายนี้!!!</title>
		<link>http://feedproxy.google.com/~r/designil/~3/n-T9uIE3fxY/%e0%b8%84%e0%b9%88%e0%b8%b2%e0%b8%a2%e0%b8%9f%e0%b8%a3%e0%b8%b5-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-iywc8-young-webmaster-camp-8.html</link>
		<comments>http://www.designil.com/%e0%b8%84%e0%b9%88%e0%b8%b2%e0%b8%a2%e0%b8%9f%e0%b8%a3%e0%b8%b5-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-iywc8-young-webmaster-camp-8.html#comments</comments>
		<pubDate>Thu, 26 Aug 2010 17:56:23 +0000</pubDate>
		<dc:creator>DesignIL</dc:creator>
				<category><![CDATA[ETC]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[young webmaster camp]]></category>
		<category><![CDATA[สอนเว็บดีไซน์]]></category>
		<category><![CDATA[ออกแบบเว็บไซด์]]></category>
		<category><![CDATA[เว็บดีไซน์]]></category>

		<guid isPermaLink="false">http://www.designil.com/?p=476</guid>
		<description><![CDATA[


สวัสดีครับ คราวนี้มาแนะนำค่ายดี ๆ สอนทำเว็บไซต์ฟรี ๆ กันครับ  หลายคนอาจเป็นแบนเนอร์ค่ายนี้จาก Sidebar เว็บไซต์ของเราสักพักแล้ว  และหลายคนอาจเผลอตัวเข้าไปสมัครค่ายนี้แล้วก็ได้  สำหรับคนที่ยังไม่ได้เข้าไป มาลองดูกันครับว่าค่ายนี้คืออะไร และดียังไง  ทำไมถึงต้องเอามานำเสนอกันขนาดนี้!!
Young Webmaster Camp 8 คืออะไร?
ค่ายนี้เรียกย่อ ๆ ว่า IYWC8 หรือ INET Young Webmaster Camp 8 นั่นเองครับ เป็นค่ายสอนทำเว็บฟรี ๆ สำหรับนิสิต-นักศึกษาระดับปริญญาตรี (หรือเทียบเท่า) ครับ  ไม่จำกัดว่าเรียนมหาวิทยาลัยไหน คณะอะไร  ขอแค่มีความสามารถในการทำเว็บก็พอครับ
ค่ายนี้แบ่งผู้เข้าสมัครเป็น 4 สาขาตามความสามารถที่ถนัด ตามนี้เลย:

Web Marketing
การตลาดของเว็บไซต์ ทำยังไงให้เว็บดัง คนเข้าเยอะแยะ โดยไม่ได้สนใจเฉพาะ  SEO นะครับ แต่เน้นเรื่องการคิดแผนการตลาดจริง ๆ ที่กลุ่มเป้าหมายเป็นคน [...]]]></description>
		<wfw:commentRss>http://www.designil.com/%e0%b8%84%e0%b9%88%e0%b8%b2%e0%b8%a2%e0%b8%9f%e0%b8%a3%e0%b8%b5-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-iywc8-young-webmaster-camp-8.html/feed</wfw:commentRss>
		<slash:comments>21</slash:comments>
		<feedburner:origLink>http://www.designil.com/%e0%b8%84%e0%b9%88%e0%b8%b2%e0%b8%a2%e0%b8%9f%e0%b8%a3%e0%b8%b5-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-iywc8-young-webmaster-camp-8.html</feedburner:origLink></item>
		<item>
		<title>[BUY NOW] Envato Birthday Bundle รวมกราฟฟิก ธีม แฟลช จาว่าสคริปต์ รีบซื้อ..ไม่ต้องคิด!!</title>
		<link>http://feedproxy.google.com/~r/designil/~3/IA6lRH9kfEM/%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-%e0%b8%81%e0%b8%a3%e0%b8%b2%e0%b8%9f%e0%b8%9f%e0%b8%b4%e0%b8%81-envato-birthday-bundle.html</link>
		<comments>http://www.designil.com/%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-%e0%b8%81%e0%b8%a3%e0%b8%b2%e0%b8%9f%e0%b8%9f%e0%b8%b4%e0%b8%81-envato-birthday-bundle.html#comments</comments>
		<pubDate>Thu, 19 Aug 2010 18:10:05 +0000</pubDate>
		<dc:creator>DesignIL</dc:creator>
				<category><![CDATA[Paid Product]]></category>
		<category><![CDATA[bundle]]></category>
		<category><![CDATA[envato]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[ออกแบบเว็บไซด์]]></category>
		<category><![CDATA[เว็บดีไซน์]]></category>

		<guid isPermaLink="false">http://www.designil.com/?p=472</guid>
		<description><![CDATA[

จริง ๆ แล้วช่วงนี้งานยุ่งมากจนไม่มีเวลามาอัพครับ ต้องขออภัยผู้อ่าน กราฟฟิกดีไซเนอร์ เว็บดีไซเนอร์ทุกคนด้วยครับ หลังจากเคลียร์งานก็จะกลับมาอัพเดทตามปกติครับผม เหลืออีกประมาณ 2-3 งานเท่านั้นเอง
แต่พอดี Envato Birthday Bundle 2010 วางขายครับ เลยต้องรีบมาอัพเดทกัน เพราะเค้าวางขายแค่ 5 วันเท่านั้น!!
หลายคนอาจสงสัยว่ามันคืออะไรกันแน่? Envato เป็นบริษัทที่เป็นเจ้าของเว็บขายกราฟฟิก ธีมเวิร์ดเพรส ธีม XHTML/CSS แฟลช เสียง Texture 3D Model ฯลฯ สำหรับเอาไว้ทำเว็บไซต์ล้วน ๆ เลยครับ
ผมก็ชอบไปเดินตลาดของเค้าบ่อย ๆ โดยเฉพาะที่ GraphicRiver ซึ่งขายกราฟฟิกสำหรับเว็บไซต์ราคาไม่แพง และ ThemeForest ซึ่งขายธีม XHTML/CSS รวมถึงธีม Wordpress ในราคาพอรับได้ครับ
ทีนี้เนื่องจากครบรอบ 4 ปีของ Envato เค้าเลยเอาไฟล์ต่าง ๆ ที่เค้าขายแยกบนตลาด เอามาแพ็กขายในราคาพิเศษสุด ๆ ครับ แค่ $20 [...]]]></description>
		<wfw:commentRss>http://www.designil.com/%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-%e0%b8%81%e0%b8%a3%e0%b8%b2%e0%b8%9f%e0%b8%9f%e0%b8%b4%e0%b8%81-envato-birthday-bundle.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		<feedburner:origLink>http://www.designil.com/%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-%e0%b8%81%e0%b8%a3%e0%b8%b2%e0%b8%9f%e0%b8%9f%e0%b8%b4%e0%b8%81-envato-birthday-bundle.html</feedburner:origLink></item>
		<item>
		<title>[Free Vector] รวม 50 แหล่งดาวน์โหลด กราฟฟิกเวกเตอร์ ฟรี ๆ !!</title>
		<link>http://feedproxy.google.com/~r/designil/~3/1mJdr9RY8yo/50-websites-download-free-vector-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c.html</link>
		<comments>http://www.designil.com/50-websites-download-free-vector-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c.html#comments</comments>
		<pubDate>Mon, 02 Aug 2010 17:11:38 +0000</pubDate>
		<dc:creator>DesignIL</dc:creator>
				<category><![CDATA[Download]]></category>
		<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Vectors]]></category>
		<category><![CDATA[free]]></category>
		<category><![CDATA[vector]]></category>
		<category><![CDATA[กราฟฟิก]]></category>
		<category><![CDATA[เวกเตอร์]]></category>
		<category><![CDATA[โฟโต้ช็อป]]></category>

		<guid isPermaLink="false">http://www.designil.com/?p=465</guid>
		<description><![CDATA[


หลายคนอาจสงสัยว่า กราฟฟิกเวกเตอร์ มันต่างกับกราฟฟิกธรรมดา (กราฟฟิกแบบ Raster) ยังไง กราฟฟิกแบบ Vector เวลาเราย่อ-ขยายรูปภาพ จะไม่ทำให้ความละเอียดลดลง จึงเหมาะกับรูปที่จำเป็นต้องใช้ในสิ่งพิมพ์หลายขนาด เช่น โลโก้เว็บไซต์ คลิปอาร์ต ไอคอน โดยสิ่งพิมพ์ที่นิยมเอากราฟฟิกเวกเตอร์มาใช้ ก็เช่น งานโฆษณา โปสเตอร์ แบนเนอร์ แฟลชอนิเมชั่น เป็นต้นครับ
ส่วนกราฟฟิกแบบ Raster เรา ๆ ที่ทำเว็บดีไซน์น่าจะคุ้นเคยกันอยู่แล้ว พวกนามสกุล .jpg, .gif, .png, .bmp นี่เอง ซึ่งพวกนี้เป็นกราฟฟิกที่เกิดจากเอาจุดสีมาวางติด ๆ กันทีละ 1 pixel ดังนั้นเวลาย่อ-ขยายรูปภาพจะทำให้เสียรายละเอียดไป (ถ้าย่อ-ขยายใน Photoshop จะเห็นว่ามีการทำให้ภาพเบลอนิดหน่อย ช่วยให้มุมที่ถูกยืดไม่ดูเป็นเหลี่ยมมากนัก)
กราฟฟิกเวกเตอร์ที่แจกในวันนี้มีหลายรูปแบบครับ ทั้ง Background ลาย vintage สวย ๆ, โลโก้แบรนด์ดังเท่ ๆ, ไอคอน Social Networks ความละเอียดสูง, และรูปเงาคนหลากหลายท่า [...]]]></description>
		<wfw:commentRss>http://www.designil.com/50-websites-download-free-vector-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c.html/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		<feedburner:origLink>http://www.designil.com/50-websites-download-free-vector-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c.html</feedburner:origLink></item>
		<item>
		<title>[Free PSD] แจกอินเตอร์เฟซเว็บ FACEBOOK เอาไปให้แกะเล่นกันฟรี ๆ !!</title>
		<link>http://feedproxy.google.com/~r/designil/~3/6pWsqhtMinA/free-photoshop-file-facebook-gui-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c.html</link>
		<comments>http://www.designil.com/free-photoshop-file-facebook-gui-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c.html#comments</comments>
		<pubDate>Sun, 25 Jul 2010 16:58:23 +0000</pubDate>
		<dc:creator>DesignIL</dc:creator>
				<category><![CDATA[Download]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[free]]></category>
		<category><![CDATA[psd]]></category>
		<category><![CDATA[vector]]></category>
		<category><![CDATA[กราฟฟิก]]></category>
		<category><![CDATA[ออกแบบเว็บไซด์]]></category>
		<category><![CDATA[โฟโต้ช็อป]]></category>

		<guid isPermaLink="false">http://www.designil.com/?p=459</guid>
		<description><![CDATA[

สวัสดีครับ วันนี้มีของน่าสนใจเอามาแจกกันครับ โดยมันมีชื่อเรียกว่า Facebook GUI PSD Kit ครับ เป็นไฟล์ Photoshop (.psd) อินเตอร์เฟซ (GUI &#8211; Graphic User Interface) ของเว็บไซต์ Facebook.com นั่นเอง โดยมีทั้งอินเตอร์เฟซหน้าแรก หน้าเลือกเพื่อน รวมไปถึงกล่องเตือนต่าง ๆ ในเว็บไซต์ Facebook เลยครับ
ลองดูจากรูปด้านล่างได้เลยครับว่าในแพ็กนี้เค้าแจกอะไรบ้าง:
จะเห็นว่ามีให้ทุกอย่างขนาดที่จะสร้างเว็บ Facebook ของตัวเองได้เลยครับ ซึ่งเหมาะมากกับเว็บดีไซเนอร์ที่ชอบออกแบบเว็บไซต์ใน Photoshop ก่อนมาเขียน HTML/CSS จริง เพราะสามารถก็อปแปะส่วนที่ต้องการจากไฟล์โฟโต้ช็อปนี้ได้เลย
ข้อดีอีกอย่างที่ทำให้ไฟล์นี้น่าดาวน์โหลดมาก ๆ คือ UI (User Interface) ของเว็บ Facebook.com เป็นอินเตอร์เฟซที่ถูกใช้โดยคนทั่วทั้งโลกกว่า 500 ล้านคนครับ ทำให้มั่นใจได้ว่าถ้าเราเลียนแบบบางส่วนเอาไปทำคล้าย ๆ กันในเว็บเรา คนที่เข้าเว็บไซต์ของคุณจะไม่งงกับหน้าตาระบบแบบนี้แน่นอน!
ใครเอาไปใช้แล้วเป็นยังไงบ้างเอามาแชร์กันได้นะครับ ^^
&#62;&#62; Download Facebook GUI Kit &#60;&#60;

บทความเว็บดีไซน์อื่น [...]]]></description>
		<wfw:commentRss>http://www.designil.com/free-photoshop-file-facebook-gui-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c.html/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		<feedburner:origLink>http://www.designil.com/free-photoshop-file-facebook-gui-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c.html</feedburner:origLink></item>
		<item>
		<title>[Free Stock Photo] รวมแหล่งดาวน์โหลด Stock Photo ฟรี ๆ คุณภาพสูง !!</title>
		<link>http://feedproxy.google.com/~r/designil/~3/4wBSjzXbPkI/free-stock-photo-download-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c.html</link>
		<comments>http://www.designil.com/free-stock-photo-download-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c.html#comments</comments>
		<pubDate>Sat, 17 Jul 2010 17:32:02 +0000</pubDate>
		<dc:creator>DesignIL</dc:creator>
				<category><![CDATA[Download]]></category>
		<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[free]]></category>
		<category><![CDATA[กราฟฟิก]]></category>
		<category><![CDATA[สอนเว็บดีไซน์]]></category>
		<category><![CDATA[เว็บดีไซน์]]></category>
		<category><![CDATA[โฟโต้ช็อป]]></category>

		<guid isPermaLink="false">http://www.designil.com/?p=448</guid>
		<description><![CDATA[


สวัสดีครับ วันนี้มาแนะนำแหล่งโหลด Stock Photo ฟรี ๆ กันครับ เพราะผมเชื่อว่าเว็บดีไซเนอร์หลาย ๆ คนคงเคยเจอปัญหาขาดภาพประกอบเว็บไซต์ตอนดีไซน์ครับ ไม่ว่าจะเอามาใช้เป็นรูปตัวอย่าง หรือรูปแบนเนอร์ไว้ดึงดูดความสนใจของคนเข้าก็ตาม
สิ่งสำคัญในการหารูปประกอบมาใส่เว็บที่เหมาะ ๆ คือ สวย และ ฟรี ครับ ซึ่งส่วนใหญ่รูปที่เราเจอมันจะมีแค่อย่างใดอย่างหนึ่งครับ สวยแต่ไม่ฟรี หรือไม่ก็ฟรีแต่ไม่ค่อยสวย อย่างผมก็ชอบเข้าเว็บไซต์ DeviantArt ไปดูรูปสวย ๆ ครับ โดยส่วนใหญ่มันจะติดลิขสิทธิ์ Creative Commons ให้เอามาเผยแพร่โดยให้เครดิตได้ แต่เอาไปใช้ในงานค้าขาย (Commercial Works) ไม่ได้ครับ
เว็บไซต์ต่าง ๆ ที่แนะนำในบทความนี้ จะแจกไฟล์ภาพให้ใช้กันฟรี ๆ ทั้งในงานส่วนตัว (Personal Works) และงานค้าขาย (Commercial Works) ครับ อย่างไรก็ตาม เพื่อความปลอดภัย แนะนำให้อ่านรายละเอียดให้เรียบร้อยก่อนนำไปใช้ในงานครับ เพราะบางเว็บไซต์อาจมีรูปที่มีลิขสิทธิ์หลายแบบครับ
&#62;&#62; 12 แหล่งดาวน์โหลดฟรี Stock Photo ฟรี ๆ [...]]]></description>
		<wfw:commentRss>http://www.designil.com/free-stock-photo-download-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c.html/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		<feedburner:origLink>http://www.designil.com/free-stock-photo-download-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c.html</feedburner:origLink></item>
		<item>
		<title>[Tutorial ภาษาไทย] สอนดีไซน์เว็บไซต์ขายโฮสติ้งแบบ Step by Step!!</title>
		<link>http://feedproxy.google.com/~r/designil/~3/_j9slnDI69A/photoshop-tutorial-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-hosting-step-by-step.html</link>
		<comments>http://www.designil.com/photoshop-tutorial-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-hosting-step-by-step.html#comments</comments>
		<pubDate>Mon, 12 Jul 2010 16:54:23 +0000</pubDate>
		<dc:creator>DesignIL</dc:creator>
				<category><![CDATA[Basic]]></category>
		<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Recommended]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[สอนเว็บดีไซน์]]></category>
		<category><![CDATA[ออกแบบเว็บไซด์]]></category>
		<category><![CDATA[เว็บดีไซน์]]></category>
		<category><![CDATA[โฟโต้ช็อป]]></category>

		<guid isPermaLink="false">http://www.designil.com/?p=436</guid>
		<description><![CDATA[


สวัสดีครับ บทความสอนดีไซน์เว็บไซต์เป็นภาษาไทยนั้นต้องยอมรับว่าหายากมาก ถึงแม้พวกบทความ Tutorial ภาษาอังกฤษจะอ่านไม่ยากนัก แต่บางครั้งก็มีการใช้ศัพท์เทคนิคซึ่งอาจทำให้คนที่ไม่รู้งงได้ครับ
วันนี้ผมไปเจอบทความสอนดีไซน์เว็บไซต์ด้วย Photoshop ในบลอคของเพื่อน Kotzhul ครับ ซึ่งเขียนเป็นภาษาไทยล้วน ๆ ผมเลยไม่รอช้าที่จะเอามาแบ่งปันกันครับ บทความนี้จะสอนดีไซน์เว็บไซต์สำหรับขายโฮสติ้งหน้าตา Modern แต่ก็สามารถนำไปเปลี่ยนเป็นเว็บไซต์อย่างอื่นได้ครับ เช่น ขายบริการบนอินเตอร์เน็ตต่าง ๆ ที่มีแบ่งเป็นแพ็กเกจ
ไม่ต้องกลัวว่าใช้ Photoshop ไม่ค่อยเป็นแล้วจะงงกันนะครับ เค้าสอนแบบละเอียดมาก ๆ ครับ
สำหรับงานดีไซน์ตอนเสร็จแล้วจะเป็นแบบนี้ครับ:

&#62;&#62; อ่านบทความสอนเว็บดีไซน์ใน Photoshop โดย Kotzhul ได้ที่นี่ครับ &#60;&#60;

บทความเว็บดีไซน์อื่น ๆ ที่น่าสนใจ[Photoshop Tutorials] 44 บทความสอนเว็บดีไซน์ใน Photoshop ที่ห้ามพลาด !![Photoshop Tutorials] 60 บทความสอนทำเว็บไซด์สวย ๆ ใน Photoshop~!![Free Photoshop Brushes] แจกบรัชโฟโต้ช์็อปแห่งปี 2009[CSS Tips] อยากใช้ CSS3 ใน IE6 ทำไง [...]]]></description>
		<wfw:commentRss>http://www.designil.com/photoshop-tutorial-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-hosting-step-by-step.html/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		<feedburner:origLink>http://www.designil.com/photoshop-tutorial-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-hosting-step-by-step.html</feedburner:origLink></item>
		<item>
		<title>[Quality Check] เทคนิคเด็ด!! เช็คคุณภาพเว็บดีไซน์ใน 30 วินาที!!</title>
		<link>http://feedproxy.google.com/~r/designil/~3/8s5633FxCZw/quality-check-webdesign-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99.html</link>
		<comments>http://www.designil.com/quality-check-webdesign-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99.html#comments</comments>
		<pubDate>Sat, 03 Jul 2010 05:06:13 +0000</pubDate>
		<dc:creator>DesignIL</dc:creator>
				<category><![CDATA[ETC]]></category>
		<category><![CDATA[Recommended]]></category>
		<category><![CDATA[quality check]]></category>
		<category><![CDATA[tips & techniques]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[ทิป & เทคนิค]]></category>
		<category><![CDATA[สอนเว็บดีไซน์]]></category>
		<category><![CDATA[ออกแบบเว็บไซด์]]></category>
		<category><![CDATA[เว็บดีไซน์]]></category>

		<guid isPermaLink="false">http://www.designil.com/?p=433</guid>
		<description><![CDATA[

เว็บดีไซน์เนอร์แต่ละคนก็มีสไตล์การดีไซน์เว็บไซด์แตกต่างกันไปครับ  แต่สุดท้ายแล้วเว็บไซด์ที่ออกมาก็มีเป้าหมายเดียวกัน นั่นคือ  แสดงข้อมูลที่เราต้องการด้วยวิธีใดวิธีหนึ่ง (รูปภาพ ตัวหนังสือ การจัดวาง  ฯลฯ)
วันนี้ได้ไปเจอบทความของ ZURB ครับ ซึ่งบทความนี้แนะนำวิธีเด็ด ๆ  ต่าง ๆ ที่เอาไว้เช็คคุณภาพเว็บดีไซน์ของเรา  ว่าเว็บไซด์ของเรานำเสนอข้อมูลออกมาได้ตรงจุดมั้ย และสร้าง First  Impression แค่ไหน ซึ่งผมได้เลือกวิธีทั้งจากในบทความ  และจากคอมเม้นท์ต่าง ๆ ที่น่าสนใจมาเสนอครับ
1. ดูว่าตามองที่ไหนเป็นที่แรก?
พิมพ์ URL แล้วปิดตาทันทีที่เว็บโหลดเสร็จ (ควรจะเน็ตเร็วหน่อยนึง  ถ้าเน็ตช้ามากจะมีเวลาดูมากเกินไป)  ให้ดูว่าจุดไหนในเว็บที่เรามองเห็นเป็นที่แรกทันทีที่เว็บโหลดเสร็จ  ซึ่งจุดนั้นควรจะเป็นจุดที่สำคัญของเว็บ  และให้ดูด้วยว่าแค่เราเห็นจุดนั้นแป๊ปเดียวเราได้ข้อมูลอะไรไหม  หรือต้องดูสิ่งรอบข้างประกอบถึงจะรู้ความหมาย
2. อ่านเว็บไซด์จากซ้ายบน -&#62; ขวาล่าง
คนส่วนใหญ่เวลาดูเว็บไซด์มักจะมองจากมุมซ้ายบน ไปจนถึงมุมขวาล่าง  (ซึ่งบางประเทศอาจจะตรงข้ามกัน)  เนื่องจากสมองของมนุษย์เตรียมรับข้อมูลจากมุมบนซ้ายถึงมุมขวาล่างอยู่แล้ว  การเรียงข้อมูลบนเว็บไซด์ก็ควรจะเป็นไปตามลำดับที่ถ้าอ่านในทิศทางนั้นแล้ว [...]]]></description>
		<wfw:commentRss>http://www.designil.com/quality-check-webdesign-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99.html/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		<feedburner:origLink>http://www.designil.com/quality-check-webdesign-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99.html</feedburner:origLink></item>
		<item>
		<title>[Graphic Design] กราฟฟิกดีไซน์กับจิตวิทยามนุษย์ (part I)</title>
		<link>http://feedproxy.google.com/~r/designil/~3/I2v1qSe8hqk/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[Tutorials]]></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>
		<wfw:commentRss>http://www.designil.com/graphic-design-and-psychology-1.html/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		<feedburner:origLink>http://www.designil.com/graphic-design-and-psychology-1.html</feedburner:origLink></item>
		<item>
		<title>[CSS Tips] อยากใช้ CSS3 ใน IE6 ทำไง + Validate CSS ตระกูล -moz- ยังไงให้ผ่าน?</title>
		<link>http://feedproxy.google.com/~r/designil/~3/kql2ruAYYHM/%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-javascript-css3-ecsstender.html</link>
		<comments>http://www.designil.com/%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-javascript-css3-ecsstender.html#comments</comments>
		<pubDate>Wed, 23 Jun 2010 05:13:44 +0000</pubDate>
		<dc:creator>DesignIL</dc:creator>
				<category><![CDATA[Basic]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Coding]]></category>
		<category><![CDATA[Download]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[XHTML/CSS]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[สอนเว็บดีไซน์]]></category>
		<category><![CDATA[ออกแบบเว็บไซด์]]></category>
		<category><![CDATA[เว็บดีไซน์]]></category>

		<guid isPermaLink="false">http://www.designil.com/?p=396</guid>
		<description><![CDATA[


สวัสดีครับ คราวนี้ไปเจอบทความในเว็บไซต์ A List Apart ที่น่าสนใจมา แต่พอเข้าไปอ่านแล้วรู้สึกว่าบทความอ่านเข้าใจยากเหมือนกัน (ถ้าเลื่อนลงมาแบบเร็ว ๆ จะค่อนข้างเมาตัวอักษร ลองดูครับ) เห็นว่าน่าจะเป็นประโยชน์ต่อเว็บดีไซเนอร์มาก ๆ ครับ ก็เลยตัดสินใจเอามาเรียบเรียงใหม่ให้ได้อ่านกัน
ปัญหา CSS3 ใน IE6
ช่วงนี้มีเทคนิคเจ๋ง ๆ โดยใช้ CSS3 ออกมาให้เห็นกันมากมายเลย (ใครสนใจเรียนรู้ CSS3 สามารถไปอ่านบทความสอน CSS ของเราได้เลยครับ) ซึ่งหลายคนคงทราบกันดีว่า CSS3 จะไม่ยอมแสดงผลในเว็บบราวเซอร์ชื่อดังอย่าง Internet Explorer 6-7 ครับ ก็เลยเกิดปัญหาเว็บดีไซเนอร์กล้า ๆ กลัว ๆ ไม่อยากใช้ CSS3 เพราะมันแสดงผลได้ไม่ครบทุกบราวเซอร์ โดยเฉพาะในประเทศไทยที่อัตราส่วนคนใช้ Internet Explorer เยอะจนน่าตกใจครับ
ถ้าเป็นคนที่ยังไม่รู้ว่า CSS3 ทำอะไรได้บ้าง อาจคิดว่าไม่ใช้ CSS3 ก็ไม่เห็นเป็นไร ลองแวะไปดูลิสต์ความสามารถ CSS3 พร้อมตัวอย่างและโค้ดก่อนได้ครับ จะเห็นว่าความสามารถอันหลากหลายของมันทำให้เว็บดีไซเนอร์ยิ่งอยากใช้ให้ได้
สำหรับวิธีแก้ปัญหาด้านบน เดี๋ยวไปอ่านทีเดียวครับ [...]]]></description>
		<wfw:commentRss>http://www.designil.com/%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-javascript-css3-ecsstender.html/feed</wfw:commentRss>
		<slash:comments>28</slash:comments>
		<feedburner:origLink>http://www.designil.com/%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-javascript-css3-ecsstender.html</feedburner:origLink></item>
		<item>
		<title>[Inspiration] รวมเว็บดีไซน์สวย ๆ ฉลอง FIFA World Cup 2010</title>
		<link>http://feedproxy.google.com/~r/designil/~3/JZh8lwBLicg/fifa-world-cup-web-design-inspiration.html</link>
		<comments>http://www.designil.com/fifa-world-cup-web-design-inspiration.html#comments</comments>
		<pubDate>Mon, 21 Jun 2010 11:27:01 +0000</pubDate>
		<dc:creator>DesignIL</dc:creator>
				<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Website]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[สอนเว็บดีไซน์]]></category>
		<category><![CDATA[ออกแบบเว็บไซด์]]></category>
		<category><![CDATA[เว็บดีไซน์]]></category>

		<guid isPermaLink="false">http://www.designil.com/?p=392</guid>
		<description><![CDATA[

วันนี้เว็บไซต์ของเราก็มาเกาะกระแสบอลโลกกันบ้างครับ เห็นว่าหลายเว็บไซต์ได้ดีไซน์หน้าตาออกมาต้อนรับ Fifa World Cup 2010 มากมาย แม้แต่เว็บไซต์ดัง ๆ อย่าง Twitter, EA, หรือ Sony ก็ทำออกมาเช่นกันครับ โดยมีทั้งเว็บไซต์ที่ทำด้วยเทคนิค jQuery และ Flash เลยครับ
และสำหรับใครที่ทำสคริปต์เกี่ยวกับฟุตบอลโลกขายอยู่ ก็ลองเอาไปเป็นแนวทางดูได้ครับ~! ลองเข้าไปดูกันนะครับ
รวมเว็บดีไซน์สวย ๆ ฉลอง FIFA World Cup 2010

บทความเว็บดีไซน์อื่น ๆ ที่น่าสนใจ[Blog Design] 60 บลอคเวิร์ดเพรสดีไซน์แปลก ๆ[ค่ายฟรี ห้ามพลาด!] IYWC 8 นิสิต-นักศึกษาคนไหนอยากทำเว็บเป็น ต้องเข้าค่ายนี้!!![Tutorial ภาษาไทย] สอนดีไซน์เว็บไซต์ขายโฮสติ้งแบบ Step by Step!![Quality Check] เทคนิคเด็ด!! เช็คคุณภาพเว็บดีไซน์ใน 30 วินาที!![CSS Tips] อยากใช้ CSS3 ใน IE6 ทำไง [...]]]></description>
		<wfw:commentRss>http://www.designil.com/fifa-world-cup-web-design-inspiration.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://www.designil.com/fifa-world-cup-web-design-inspiration.html</feedburner:origLink></item>
	</channel>
</rss>
