บรรยายต่อหน้าผู้บริหารระดับสูง เฉลี่ย C8-C10 แต่ก็พบว่าหลายท่านที่มาในงานนี้ทันสมัยมากๆ คุณพรพรหมพยายามช่วยกระผมขายของโดยการโฆษณาบริษัทและพาไปรู้จักผู้หลักผู้ใหญ่ กระผมพยายามบอกอ้อมๆ ว่าผมเน้นทำงานฟรี กับดูเทคนิค ไม่คุยกับลูกค้า ถ้าจะติดต่อธุรกิจให้คุยกับคุณพัชดีกว่า

ถ้าเป็นไปได้ ผมจะเลือกไม่ทำงานกับราชการ เพราะผมคิดว่าพลังชีวิตของผมน่าจะทำประโยชน์ได้มากกว่านั้น

แต่ถ้าคุณพัชขอร้อง ก็อีกเรื่องหนึ่ง

เรื่องที่เกี่ยวข้อง

• บรรยายโปรแกรมโอเพนซอร์สสำหรับงานออกแบบ
• ออกรายการ My Design ณ FukDuk TV
• บรรยาย WordPress ที่ BU
• ธีมข้าพเจ้าอ้วน (Wide Blog Happens)
• ประชันเหล่า CMS ณ บาร์แคมป์

ตอนแรกว่าจะเดโมการใช้โปรแกรมแต่ละตัว แต่คุยไปคุยมา พบว่ามีเวลาไม่มากนัก เลยสรุปย่อว่า หากเราต้องการทำงานออกแบบกราฟฟิคและอนิเมชัน ควรใช้โปรแกรมที่แจกฟรีตัวไหนบ้าง มันน่าสนใจอย่างไร และดาวน์โหลดคู่มือภาษาไทยได้ที่ไหนบ้าง (ฝากไฟล์คู่มือต่างๆ ไว้ที่ itvalley.org ก่อนละกัน)

โอเพนซอร์สนับเป็นเรื่องใหม่สำหรับคนไทย เพราะเราเป็นสังคมที่ผู้คนขโมยงานของคนอื่นมาใช้กันเป็นปกติจนไม่เห็นคุณค่าของการสร้างสรรค์และลิขสิทธิ์ (ถ้ายังไม่เข้าใจคุณค่าของลิขสิทธิ์ ย่อมยังไม่เข้าใจคุณค่าของโอเพนซอร์ส) คุณจ๋งถึงกับกล่าวว่า ตัวชี้วัดหนึ่งของความเจริญของสังคมสมัยใหม่ อาจเป็นคุณภาพของสังคมโอเพนซอร์สในสังคมนั้นได้เหมือนกัน คุณพัชเขียนบล็อกไว้น่าสนใจว่า โอเพนซอร์สไม่ได้โตมาเพราะโชคช่วย และผมก็ไป แซวไว้พอสังเขป

กระผมอยู่ลิบๆ ถ่ายโดยพี่หลาม @shark_beartai แบไต๋ไฮเทค

งานนี้ดีใจมากที่ได้พบความคืบหน้าครั้งใหญ่ของทีมงาน The Monk Studio นั่นคือ การได้รับรางวัลชนะเลิศในการแข่งขันอนิเมชั่นโลก Fjorg ในงาน SIGGRAPH 2009 – การแข่งทำอนิเมชันมาราธอน 32 ชั่วโมงจาก 10 ทีมทั่วโลก  ฟังสัมภาษณ์และดูวีดีโอของงานแล้ว ได้รับแรงบันดาลใจที่เต็มเปี่ยมยิ่งนัก

พี่จั๊กพูดทิ้งท้ายไว้น่าฟังมากว่า ไม่ใช่แค่พี่หรอกที่เป็นแรงบันดาลใจให้น้อง น้องๆ เองก็เป็นแรงบันดาลใจให้พี่ๆ เช่นกัน ซึ่งผมเห็นด้วยว่า การได้พบกับคนวัยหนุ่มสาวที่มีความุ่งมั่นในความฝันนั้น ทำให้เรารู้สึกมีพลัง และอยากจะเป็นส่วนหนึ่งในความก้าวหน้าของเค้าไปด้วย

การแข่งขันเพิ่งเริ่มต้นขึ้น แต่ความฝันนั้นยังอีกยาวไกล

เพิ่มเติม 31 ส.ค. 2552 รูปจาก Facebook ประชาสัมพันธ์งาน

เพิ่มเติม 3 ก.ย. 2552 วีดีโอจาก Youtube

เรื่องที่เกี่ยวข้อง

• บรรยายเรื่อง เว็บรัฐบาลควรทำอย่างไรดี?
• ร่วมคุยในงาน CCSalon ครั้งแรก ที่ TCDC
• ออกรายการ My Design ณ FukDuk TV
• บรรยาย WordPress ที่ BU
• ธีมข้าพเจ้าอ้วน (Wide Blog Happens)

ตอนนี้ทีมงานได้ตัดต่อเรียบร้อยแล้ว ผมดูแล้วยังอึ้งว่าตัดต่อจนเล่าออกมาเป็นเรื่องเป็นราวมาก นี่แหละหนาที่เค้าเรียกว่า วงการมายา สามารถทำคนเสียงเหียกร้องเพลงเพราะได้ และสามารถทำให้กระผมพูดจาเท่ๆ ได้ (แต่ทำให้กระผมดูอ้วนกว่าตัวจริงไปมากเทียว จ๊ากกก )

ขอบคุณทาง รายการ My Design แห่ง FukDuk.TV มากๆ คร้าบ มีทั้งวีดีโอให้ดู ให้โหลด หลายรูปแบบมั่กๆ

เรื่องที่เกี่ยวข้อง

• วิถีแห่งเจ้าสำนัก
• บรรยายเรื่อง เว็บรัฐบาลควรทำอย่างไรดี?
• ธีมข้าพเจ้าอ้วน (Wide Blog Happens)
• ตามหาสวนทูนอินของข้าพเจ้า
• ประชันเหล่า CMS ณ บาร์แคมป์

ใช้ไปใช้มา พบว่า ความกว้างของรูปที่เคยตั้งไว้ 480 จุด (Pixel) ซึ่งเคยคิดว่าเหมาะทั้งรูปและวีดีโอนั้น เริ่มไม่พอเสียแล้ว

ลองไปทำให้กว้างซัก 640 แบบที่ทำให้ บล็อกคุณจ๋ง ก็พบว่า ไม่ค่อยเหมาะกับรูปแบบ 2 คอลัมน์นี้เท่าไหร่ (คือมี Sidebar และมี Content) เลยมาลงตัวที่ตั้งความกว้างรูปไว้ที่ 600 Pixel เหมาะสุด ไม่กว้างเกินจนอ่านแล้วต้องกวาดสายตาเยอะ และก็ไม่แคบเกินจนใส่รูปใหญ่ๆ ไม่ได้ แล้วก็เลยปรับขนาด Font ให้ใหญ่ซัก 13 px ระยะระหว่างบรรทัดซัก 1.5 em กำลังดี อ่านสบายตา ส่วนบาร์ด้านข้าง กว้าง 270px มีพื้นที่ใส่ตัวอักษรได้ถึง 240px นี่ นับว่าเพียงพอแล้ว (การทำ sidebar ของ blog นั้น ต้องกว้างกว่าออกแบบเมนูของหน้าทั่วไป เพราะมันมักจะมีเนื้อหา/ชื่อเรื่อง/คอมเม้นท์ ยาวๆ มาปะปน) ทำไปทำมาพบว่า บล็อกนี้กว้าง 960px พอดีเป๊ะ เลขสวยจริงเชียว

Wide Blog Happens - Free WordPress Theme

Wide Blog Happens: ธีมบล็อกอ้วน

เนื่องจากของเดิมมันผอมและตัวอักษรเล็กกว่านี้ เพื่อไม่ให้ซ้ำซ้อน ธีมนี้เลยเพิ่มคำอีกนิด จะได้ไม่ซ้ำกัน และก็แนะนำ Plugins มาให้พอประมาณ ถ้าชอบก็โหลดไปติดตั้งแล้ว Activate ได้เลยครับ ไม่ต้องแต่งธีมเพิ่มเรย

วิธีติดตั้ง

1. ดาวน์โหลดไฟล์ธีมจาก Wide Blog Happens Theme (334)
2. แตกไฟล์ แล้วนำไปไว้ที่ Folder สำหรับเก็บธีมของบล็อกตนเอง เช่น /wp-content/themes/widebloghappens
3. ไปที่หน้า Admin เลือก Appearance -> Themes แล้ว Activate Theme ที่ติดตั้งไว้
4. ควรตั้งให้รูปย่อ (Thumbnail) มีขนาด 80×80 px โดยไปที่ Setting -> Media -> Thumbnail 80×80 Crop
5. ควรตั้งให้รูปขนาดกลาง (Medium) มีขนาดกว้าง 600 สูงเท่าไหร่ก็ได้ (เช่น 1200) โดยไปหน้าตามข้อ 4.
6. หน้าแรกของธีม จะไปเอาส่วนเกริ่นนำ/ตัดทอน หรือกล่อง Excerpt มาใส่ ถ้าเราไม่ใส่ มันจะเอาเนื้อหาใน Blog มาใส่ ซึ่งอาจจะทำให้เยอะเกิน ไม่สวย

วิธีปรับแต่งส่วนกราฟฟิค

1. ดาวน์โหลด PSD จาก Wide Blog Happens PSD (255)
2. แก้ขนาด icon ของเราที่แสดงหน้า/โลโก้ ให้มีขนาดกว้าง 80px สูงเท่าไหร่ก็ได้
3. หากต้องการเปลี่ยนสีหรือกรอบ ลองปรับแต่งดู แล้ว Save PNG ออกมา (8 bit ก็พอ) จะมี 3 ไฟล์คือ head.png, body.png และ foot.png
4. สามารถลองเปิด test-home.html เพื่อดูภาพรวม แล้วลองแก้ CSS ดูได้ครับ
5. ผมใช้ GPL คร่าวๆ คืออยากแก้อะไรก็ได้เต็มที่ครับ ไม่ต้องคง link ใน footer ก็ได้ครับ แต่เก็บไว้ซักที่ในโค้ด เผื่อคนอื่นจะได้หาเจอครับ

ปลั๊กอินที่ใช้

1. Get The Image แสดงรูปประจำบันทึก (ต้องมี)
2. Search Excerpt แสดงไฮไลท์ข้อความที่ค้นหา
3. Subscribe To Comments ให้ผู้ทักทาย รับเมล์อัพเดทการคอมเม้นท์ได้
4. WordPress Related Posts แสดงบันทึกที่คล้ายกัน
5. WP-PostRatings ระบบเรตติ้งของบันทึก
6. WP Page Numbers แสดงเลขหน้าด้านล่าง

ลองดูนะคร้าบ มีอะไรสอบถามมาได้ครับ

เรื่องที่เกี่ยวข้อง

• ประชันเหล่า CMS ณ บาร์แคมป์
• บรรยายเรื่อง เว็บรัฐบาลควรทำอย่างไรดี?
• ออกรายการ My Design ณ FukDuk TV
• ไทยทีม – ธีมเวิร์ดเพรส
• ธีมเว็บ: Site Happens

เริ่มจากการแซวกันไปมา จบลงที่เอากันจริงๆ เลยละกัน (เฮ้ย อย่าคิดลึก) นั่นคือ งานบาร์แคมป์คราวนี้ จะมีการจัดประชัน CMS กันด้วย รายละเอียดที่ CMS Showdown ใน BarCamp Bangkok 3

และกระผมก็นำทีม WordPress สุดที่รักสู้ศึก

ตอนนี้มีแนวร่วมกล้าตายดังนี้

1. @iMenn
2. @ripmilla
3. @thangman22
4. @kajeaw
5. @warong
6. @aumpradya
7. @MP3WizarD

บอกว่าจะทำธีมให้ดูคร่าวๆ วันนี้ ตอนนี้ยังไม่ได้เริ่มเลย อ๊าค ไปปั่นงานต่อก่อนก่า…

ออกแบบมีติดกรอบและกริดเต็มที่ ใครที่ขี้เกียจคงเดาได้ทันทีว่าใช้ 960.gs แน่นอน :p

Thai Team Theme

เรื่องที่เกี่ยวข้อง

• ไทยทีม – ธีมเวิร์ดเพรส
• ธีมข้าพเจ้าอ้วน (Wide Blog Happens)
• บรรยายเรื่อง เว็บรัฐบาลควรทำอย่างไรดี?
• ออกรายการ My Design ณ FukDuk TV
• ธีมเว็บ: Site Happens

Download Site Happens Wordpress Theme (Version 0.5)

เป็นธีมของเวิร์ดเพรสที่ออกแบบมาให้คนสามารถนำไปแก้ และทำเป็นเว็บไซต์ทั่วไปได้ง่ายๆ นะครับ มีระบบ Banner แบบบ้านๆ ได้ เริ่มต้นจากทำเว็บให้ท่านปลา ชื่อว่า Plajazz.com แล้วก็เอาไปทำต่อให้ MHS IT VALLEY (แม่ฮ่องสอน ไอที วัลเลย์) หลายเดือนผ่านไป จึงมีโอกาสเอามาแจกซักที

หน้าตาธีม Site Happens

เอาข้อมูลที่เขียนเป็นภาษาอังกฤษไปก่อนละกัน

INSTALLATION

1. Download Site Happens Theme
2. Unpack the zip file. You will find 3 Folders
   design: the Photoshop file
   plugins: the plugin needed, the-attached-image
   themes: sitehappens folder
3. Upload by using FTP program to your Wordpress site.
   plugins/the-attached-image: to /wp-content/plugins/the-attached-image
   themes/sitehappens: to /wp-content/themes/sitehappens
4. Activate the theme through the ‘Appearance’ menu in WordPress
5. Activate the plugin through the ‘Plugins’ menu in WordPress …
6. Done, enjoy!

TERMS OF USE:

* Please leave the link in the footer, or donate if you would like to remove it.
* You are free to share, to copy, distribute and transmit this theme. You are not allowed to sell this theme.

เครดิตงาน

ภาพถ่าย: โดยคุณพัช จาก iSchool นะครับ ถ่ายจากร้าน June’s House ของพี่สาวกระผม ปลั๊กอินแสดงไอคอน: the-attached-image ซึ่งเปลียนจาก get-the-image ที่เคยใช้ เพราะมันออกเวอร์ชันใหม่ แล้วกระผมใช้งานไม่ได้ซักที เลยเปลี่ยนปลั๊กอินซะเลย

ข้อควรรู้เวลานำไปใช้

1. ควรเปิดไฟล์งาน Photoshop มาแก้นะครับ แล้ว Save for web มาไว้ที่ folder ชื่อ images
   • Logo (logo.jpg) สูง 70px กว้างเท่าไหร่ก็ได้
   • Banner (banner.jpg) ขนาด กว้าง 820px สูง 220px
2. ถ้าอยากเปลี่ยนสีได้ ต้องลองดิ้นรนนิดนึงครับ เปลี่ยนจากรูปใน Photoshop ก่อน แล้วไปเปลี่ยนใน CSS อีกต่อ
3. ถ้าอยากมี Banner หลายๆ แบบ เหมือนของ Plajazz ก็ save banner ไว้ แล้วใส่เพิ่ม Custom Field ของ Post/Page นั้นๆ ชื่อ “Banner URI” ใส่ค่า URI ไป เช่น http://www.imenn.com/files/banner.jpg
4. Sidebar ผมเขียนเงื่อนไขใน sidebar.php ไว้ว่า ถ้าหาก Page ไหน มี Custom Field ชื่อ “Sidebar Content” ให้ไปเอาข้อมูลใน Field นี้มาโชว์ แล้วไม่ต้องโชว์ข้อมูลอื่นๆ ของ Sidebar อีก ถ้าไม่ชอบก็ไปแกะ sidebar.php เอาละกันนะครับ
5. ใน Wordpress -> Setting -> Media ควรตั้ง Thumbnail เป็น 80 x 80 Crop และ Medium Size มี Max Width ที่ 480px

เรื่องที่เกี่ยวข้อง

• บรรยายเรื่อง เว็บรัฐบาลควรทำอย่างไรดี?
• ออกรายการ My Design ณ FukDuk TV
• ธีมข้าพเจ้าอ้วน (Wide Blog Happens)
• ประชันเหล่า CMS ณ บาร์แคมป์
• บรรยายโปรแกรมโอเพนซอร์สสำหรับงานออกแบบ

ตอนที่สอนใน iSchool ผมก็อธิบายให้นักเรียนฟังไม่ยากนักว่า การออกแบบที่ดีนั้นต้อง Minimal และ Less is more ซึ่งคนที่รู้จัก Apple และ iSchool ก็มักจะนึกกันออกไม่ยากอยู่แล้ว แต่ที่ต่างจังหวัดนั้นไม่ง่าย กระนั้น ผมก็นึกได้ว่าศิลปะแต่ละแขนงต่างเหมือนกัน นั่นก็คือ

การออกแบบนั้น เหมือนกับการปรุงอาหาร

ถ้าทุกอย่างเด่นหมด สุดท้ายจะไม่มีอะไรเด่น

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

ความสำคัญของรสจืดและที่ว่าง

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

อย่าทำทุกเทคนิค

เราไม่สามารถใช้เทคนิคการทำอาหารทุกรูปแบบ กับอาหารหนึ่งจานได้ ปิ้ง+ทอด+อบ+ตุ๋น =?
เวลาเริ่มทำงานออกแบบ เราจะอยากใช้เทคนิคทั้งหมดที่มี เอารูปใส่ทั้ง Drop Shadow, ใส่ Stroke, ใส่ขอบมน, ใส่ Gradient, ใส่เอฟเฟ็ค Blur, ปรับ Opacity บางๆ, ใส่ขอบฟุ้ง, ใส่ inner shadow และอื่นๆ อื่นๆ ผลสุดท้ายมีแต่เทคนิค แต่ไม่เหลือความเป็นรูป

คัดเลือกวัตถุดิบที่ดี แล้วค่อยเริ่มปรุงอาหาร (ที่รู้ว่าจะเป็นอะไร)

ตอนก่อนทำอาหาร เราต้องเตรียมวัตถุดิบสารพัด ล้างผัก หั่นหมู แล้วก็มีจุดหมายว่าจะทำหมูผัดผัก
แต่การทำงานออกแบบ หลายๆ คนกลับไม่รู้ว่าจะทำอะไร? จบงานแล้วจะออกมาแบบไหน? นอกจากนั้น ยังไม่เตรียม “วัตถุดิบ” อีกด้วย
รูป: ปรับ Level ก่อน เตรียมรูปที่ความละเอียดเหมาะสมกับงานที่จะทำก่อน, สี: เลือกชุดสีก่อนว่าเข้ากันหรือเปล่า จะเอาสีไหนปูพื้น เอาสีไหนลงข้อความ, ฟ้อนท์: เลือกฟ้อนท์ก่อน ว่าจะเอาอารมณ์ไหน ใช้ฟ้อนท์ไหนเป็นฟ้อนท์หลัก อันไหนฟ้อนท์รอง, เลย์เอาท์: คิดคร่าวๆ ก่อน ว่าควรจะวางอย่างไร ตรงไหนจุดเด่น ตรงไหนข้อความ

ต่อให้ลอกสูตร ทำเสร็จก็อาจจะไม่เหมือน

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

ฯลฯ

ขณะที่สนุกไปกับการเปรียบเทียบ ผมก็พลันนึกถึงข้อจำกัด หรือลักษณะทางวัฒนธรรมอันหนึ่ง คือ

อาหารไทยรสจัด อาหารนอกรสละมุน อาหารญี่ปุ่นเหลือแค่ “ปลาดิบ”

นั่นสิ ยังไงคนไทย ก็คงต้องออกแบบ “รกๆ” กันส่วนใหญ่แหละ เพราะมันเป็นวัฒนธรรมของเรา
ชาติเราคงรับไม่ได้ถ้าจะมีของชิ้นเดียวบนพื้นที่ว่างๆ หรือทำอาหารเรียบๆ ขนาดปลาดิบวางบนจานกระเบื้อง (สีเดียว คุมโทน) แต่เราชอบส้มต้ำ ชอบที่จะใส่อะไรเยอะๆ มากๆ เข้าไป ชอบรสชาติจัดจ้าน สีหลากสี จุดเด่นเปรอะเต็มหน้า และเทคนิคแพรวพราวที่จะทำให้เจ้าของงานเกิดอาการงงงวย – เอ่อ มันสื่อได้ทุกอย่างแล้วนี่นา แล้วก็ใช้พื้นที่เต็มเหยียดแล้ว ไม่รู้จะแก้อะไรแล้ว

ละมั้ง? – ขืนทำปลาดิบชิ้นเดียวไปวาง คนสั่งงานคงต้องบอกว่า “เฮ้ย โล่งไปหน่อยหรือเปล่า เอาน้ำพริกกับเครื่องเคียงไปวางหน่อยดิ๊”

เป็นความรู้สึกปลง ปนขำ ๆ แต่ก็เข้าใจจุดเด่นของชาติเรามากขึ้นนะ

เอาน่า อาหารไทยใส่อะไรไปเยอะๆ ยังอร่อยได้เลย งานออกแบบก็คงเหมือนๆ กันแหละน่า ถึงจะรกบ้าง ก็ยังมีสวยแหละเนาะ

เรื่องที่เกี่ยวข้อง

• ออกรายการ My Design ณ FukDuk TV
• บรรยายเรื่อง เว็บรัฐบาลควรทำอย่างไรดี?
• บรรยายโปรแกรมโอเพนซอร์สสำหรับงานออกแบบ
• ธีมข้าพเจ้าอ้วน (Wide Blog Happens)
• ตามหาสวนทูนอินของข้าพเจ้า