หลายคนอาจสงสัยว่า กราฟฟิกเวกเตอร์ มันต่างกับกราฟฟิกธรรมดา (กราฟฟิกแบบ Raster) ยังไง กราฟฟิกแบบ Vector เวลาเราย่อ-ขยายรูปภาพ จะไม่ทำให้ความละเอียดลดลง จึงเหมาะกับรูปที่จำเป็นต้องใช้ในสิ่งพิมพ์หลายขนาด เช่น โลโก้เว็บไซต์ คลิปอาร์ต ไอคอน โดยสิ่งพิมพ์ที่นิยมเอากราฟฟิกเวกเตอร์มาใช้ ก็เช่น งานโฆษณา โปสเตอร์ แบนเนอร์ แฟลชอนิเมชั่น เป็นต้นครับ

ส่วนกราฟฟิกแบบ Raster เรา ๆ ที่ทำเว็บดีไซน์น่าจะคุ้นเคยกันอยู่แล้ว พวกนามสกุล .jpg, .gif, .png, .bmp นี่เอง ซึ่งพวกนี้เป็นกราฟฟิกที่เกิดจากเอาจุดสีมาวางติด ๆ กันทีละ 1 pixel ดังนั้นเวลาย่อ-ขยายรูปภาพจะทำให้เสียรายละเอียดไป (ถ้าย่อ-ขยายใน Photoshop จะเห็นว่ามีการทำให้ภาพเบลอนิดหน่อย ช่วยให้มุมที่ถูกยืดไม่ดูเป็นเหลี่ยมมากนัก)

กราฟฟิกเวกเตอร์ที่แจกในวันนี้มีหลายรูปแบบครับ ทั้ง Background ลาย vintage สวย ๆ, โลโก้แบรนด์ดังเท่ ๆ, ไอคอน Social Networks ความละเอียดสูง, และรูปเงาคนหลากหลายท่า ลองเข้าไปดูกันเลยครับ รับรองว่าดาวน์โหลดกันไม่หวาดไม่ไหวแน่!

>> รวมแหล่งดาวน์โหลด Vector ฟรี !! <<

สวัสดีครับ วันนี้มีของน่าสนใจเอามาแจกกันครับ โดยมันมีชื่อเรียกว่า Facebook GUI PSD Kit ครับ เป็นไฟล์ Photoshop (.psd) อินเตอร์เฟซ (GUI – Graphic User Interface) ของเว็บไซต์ Facebook.com นั่นเอง โดยมีทั้งอินเตอร์เฟซหน้าแรก หน้าเลือกเพื่อน รวมไปถึงกล่องเตือนต่าง ๆ ในเว็บไซต์ Facebook เลยครับ

ลองดูจากรูปด้านล่างได้เลยครับว่าในแพ็กนี้เค้าแจกอะไรบ้าง:

จะเห็นว่ามีให้ทุกอย่างขนาดที่จะสร้างเว็บ Facebook ของตัวเองได้เลยครับ ซึ่งเหมาะมากกับเว็บดีไซเนอร์ที่ชอบออกแบบเว็บไซต์ใน Photoshop ก่อนมาเขียน HTML/CSS จริง เพราะสามารถก็อปแปะส่วนที่ต้องการจากไฟล์โฟโต้ช็อปนี้ได้เลย

ข้อดีอีกอย่างที่ทำให้ไฟล์นี้น่าดาวน์โหลดมาก ๆ คือ UI (User Interface) ของเว็บ Facebook.com เป็นอินเตอร์เฟซที่ถูกใช้โดยคนทั่วทั้งโลกกว่า 500 ล้านคนครับ ทำให้มั่นใจได้ว่าถ้าเราเลียนแบบบางส่วนเอาไปทำคล้าย ๆ กันในเว็บเรา คนที่เข้าเว็บไซต์ของคุณจะไม่งงกับหน้าตาระบบแบบนี้แน่นอน!

ใครเอาไปใช้แล้วเป็นยังไงบ้างเอามาแชร์กันได้นะครับ ^^

>> Download Facebook GUI Kit <<

สวัสดีครับ วันนี้มาแนะนำแหล่งโหลด Stock Photo ฟรี ๆ กันครับ เพราะผมเชื่อว่าเว็บดีไซเนอร์หลาย ๆ คนคงเคยเจอปัญหาขาดภาพประกอบเว็บไซต์ตอนดีไซน์ครับ ไม่ว่าจะเอามาใช้เป็นรูปตัวอย่าง หรือรูปแบนเนอร์ไว้ดึงดูดความสนใจของคนเข้าก็ตาม

สิ่งสำคัญในการหารูปประกอบมาใส่เว็บที่เหมาะ ๆ คือ สวย และ ฟรี ครับ ซึ่งส่วนใหญ่รูปที่เราเจอมันจะมีแค่อย่างใดอย่างหนึ่งครับ สวยแต่ไม่ฟรี หรือไม่ก็ฟรีแต่ไม่ค่อยสวย อย่างผมก็ชอบเข้าเว็บไซต์ DeviantArt ไปดูรูปสวย ๆ ครับ โดยส่วนใหญ่มันจะติดลิขสิทธิ์ Creative Commons ให้เอามาเผยแพร่โดยให้เครดิตได้ แต่เอาไปใช้ในงานค้าขาย (Commercial Works) ไม่ได้ครับ

เว็บไซต์ต่าง ๆ ที่แนะนำในบทความนี้ จะแจกไฟล์ภาพให้ใช้กันฟรี ๆ ทั้งในงานส่วนตัว (Personal Works) และงานค้าขาย (Commercial Works) ครับ อย่างไรก็ตาม เพื่อความปลอดภัย แนะนำให้อ่านรายละเอียดให้เรียบร้อยก่อนนำไปใช้ในงานครับ เพราะบางเว็บไซต์อาจมีรูปที่มีลิขสิทธิ์หลายแบบครับ

>> 12 แหล่งดาวน์โหลดฟรี Stock Photo ฟรี ๆ คุณภาพสูง <<

ก่อนอื่นต้องขอโทษด้วยครับที่อัพเดทช้า ที่สัญญากันไว้ว่าจะอัพให้หลังจาก 1 สัปดาห์ผ่านมา แต่กลับเป็น 1 เดือนไปซะงั้น เนื่องจากผมมีงานเข้าอย่างแรงครับ จึงต้องรีบทำงานให้เสร็จก่อน (และรับเงินไปซื้อ psp มานั่งเล่น…)

คราวนี้เราจะมาพูดถึงกราฟฟิกดีไซน์กับจิตวิทยาของมนุษย์กัน ซึ่งเป็นเรื่องสำคัญต่อนักกราฟฟิกดีไซน์เนอร์โดยตรง หรืออาจเป็นสายอื่นๆเช่น นักคำนวน นักวิทยาศาสตร์ หรือนักร้อง ก็ย่อมทำได้นะครับ (เว่อร์ไปมั้ง…)

บทความนี้มีเนื้อหาค่อนข้างยาว ดังนั้นผมจะแบ่งออกเป็น 7 ตอนใหญ่ๆด้วยกัน ซึ่งตอนนี้ผมจะนำเสนอตอนแรกกันก่อน

ปฐมบทจิตวิทยาของมนุษย์

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

จิตวิทยาเป็นศาสตร์ที่ศึกษาค้นคว้าเพื่อนำข้อมูลความรู้มาเสนอ อธิบาย และเพื่อควบคุมและเปลี่ยนแปลงพฤติกรรมของมนุษย์และสัตว์ จิตวิทยามุ่งศึกษาด้านความสัมพันธ์ระหว่างกระบวนการของร่างกายกับจิตใจ ด้วยวิธีการทางวิทยาศาสตร์ที่เป็นระเบียบแบบแผน เพราะร่างกายและจิตใจมักมีการแสดงออกร่วมกัน อีกทั้งยังแสดงออกในแนวทางที่สามารถทำนายได้^[1]

จิตของมนุษย์

มีอยู่ 3 แบบด้วยกันคือ

1.จิตสำนึก (Conscious) คือจิตที่เราสามารถระลึกได้ คิดได้ ควบคุมได้ เป็นจิตที่เสมือนอยู่บนผิวน้ำ
2.จิตใต้สำนึก (Subconscious) คือจิตที่เราไม่สามารถระลึกได้ ควบคุมไม่ได้ แต่จะทำได้ก็ต่อเมื่อมีสมาธิในระดับหนึ่ง หรือถูกระลึกขึ้นมาโดยสิ่งเร้า เช่น รูปภาพตอนคุณยังเด็กๆ เป็นต้นฯ จิตนี้เสมือนปลาที่ว่ายอยู่ภายในน้ำ อยู่ระหว่างผิวน้ำและก้นบึง
3.จิตไร้สำนึก (Unconscious) คือจิตที่เราไม่สามารถระลึกได้ เป็นจิตที่ไร้การควบคุม ไร้ความคิด ไร้ตัวตน เป็นจิตที่อยู่ลึกที่สุด เสมือนก้นบึงมหาสมุทร

จิตวิทยาที่สัมพันธ์กับกราฟฟิกดีไซน์

แบ่งออกเป็น 4 อย่างด้วยกัน คือ

1.สี (Color)
2.ขนาด (Size)
3.ลักษณะปรากฎ (Texture)
4.รูปแบบการทำงาน (Technical)

สี (Color)

สีเป็นสิ่งสำคัญสำหรับการกำหนดภาพลักษณ์ (Imagination) ของผลงาน เป็นสิ่งที่มีการเชื่อมต่อ (Resonance) ระหว่างผลงานและผู้สัมผัส (Human) โดยผู้สัมผัสจะถูกคล้อยตามไปทางจิตวิทยาด้านสีที่กำหนดในผลงาน เช่น ถ้าสีใช้โทนร้อน (Hot-Tone Color) ผู้สัมผัสจะมีกระบวนการทางความคิดภายในจิตสำนึกหรือจิตใต้สำนึก สร้างอารมณ์และความคิดขึ้นมาต่อชิ้นงาน โดยในที่นี้หมายถึงผลงานคือสิ่งเร้านั่นเอง

ผลงานหรือชิ้นงานของคุณอาจเป็นรูปปั้น รูปวาด รูปถ่าย หรือ รูปแบบเว็บไซท์ที่ได้ออกแบบไว้ก็ได้

บทบาทของสี อย่างที่ได้กล่าวมาข้างต้น สีมีบทบาทด้านการแสดงอารมณ์และความคิดมาเป็นอันดับหนึ่ง รองลงมาเป็นขนาดและลักษณะปรากฎ สีเป็นพื้นฐานเกี่ยวกับการควบคุมระบบในสมอง มีการเชื่อมต่อกับสิ่งเร้าตลอดเวลา เมื่อขณะคุณใช้สายตามอง กระบวนการทางสมองก็จะแปรตามความคิดที่เกิดขึ้น เช่น เด็กอายุ 3-4 เดือนที่นั่งเล่นของเล่นหลากสี เหตุที่ทำแบบนั้นก็เพื่อให้เด็กมีการควบคุมระบบในสมองด้วยตนเองตั้งแต่เกิด

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

http://www.colourlovers.com/ เป็นเว็บไซท์หนึ่งที่มีนักเชี่ยวชาญด้านการออกแบบโทนสี จัดสรรโทนสีให้กับนักดีไำซน์เนอร์ทั้งมือใหม่และผู้ที่คิดโทนสีไม่ออก ซึ่งท่านสามารถเข้าไปดู และสังเกตการออกแบบโทนสีได้เป็นตัวอย่าง

ทฤษฎีสี

มีอยู่หลายทฤษฎี ซึ่งท่านสามารถหารายละเอียดได้ที่ Google แต่ในที่นี้ผมจะยกตัวอย่างทฤษฎีแค่ 2 อย่างที่ผมใช้อยู่เป็นประจำ

1.Percentage Color & Lightening

การกำหนดค่าสีออกมาเป็นสัดส่วนร้อยละ (เปอร์เซ็นท์) และการกำหนดความสว่างของสี เช่น 60/30/10 ที่ใช้กันทั่วไปตามการตกแต่งห้องหรือตกแต่งบ้าน^[2] หรือ 50/30/20 ที่ใช้กันตามเว็บไซท์ชื่อดัง (เช่น Facebook) หรือ 90/4/4/2 ซึ่งเป็นทฤษฎีสีของเว็บไซท์ Google นั่นเอง

การกำหนดค่าออกมาเป็นสัดส่วนร้อยละ มีประโยชน์ด้านการวัดขนาดและลักษณะด้วย อาจทำให้การทำงานง่ายขึ้น และมองภาพลักษณ์ได้ชัดเจนมากขึ้น

การกำหนดค่าความสว่างของสีก็เช่นกัน ในแต่ละสัดส่วนที่เรากำหนด เราจะต้องควบคุมสีให้มีความเข้มหรืออ่อนที่เข้ากับสีอื่นๆที่อยู่ข้างเขียง หรือที่เรียกว่าการทำให้เกิดการคู่ขนานของสี (Parallel Color)

Verdin
by pinkcoma

2.Luvi’s Color Creation Laws

เป็นทฤษฎีที่ผมเขียนขึ้นมาเอง ท่านสามารถนำไปใช้ได้โดยไม่ต้องขออนุญาติจากผม ซึ่งวิธีนี้จะคล้ายๆกับวิธีข้างต้น แต่จะทำให้คุณมองได้ง่ายขึ้น

การทำตามทฤษฎีนี้จะต้องทำเป็นลำดับขั้นตอนอย่างน้อย 4 ขั้นตอนจาก 7 ขั้นตอน ซึ่งจะมีดังนี้

1.กำหนดขอบเขตของโทนสี คิดถึงอารมณ์และความรู้สึกของสี จากนั้นร่างสีออกมาตามจินตนาการที่คุณเห็น
2.วางสีโดยใช้สีที่คุณจินตนาการไว้ จากมากที่สุดไล่ไปจนถึงน้อยที่สุด (จะได้ออกมาเป็นสัดส่วนร้อยละ)
3.ค่อยๆเรียบเรียงสีที่ไม่มีความจำเป็นออกไป หรือมีความจำเป็นน้อยให้ไปอยู่ด้านหลังสุดของลำดับ
4.ลองค้นหาสีที่ใกล้เคียงกับสีหลัก แล้วค่อยๆใส่ลงไป อาจใช้ทฤษฎี Secant, Triangle, Quadable, Gradient ช่วยก็ได้ (โดยเทียบกับวงกลมสี) จากนั้นใส่เข้าไปในชุดสีที่คุณได้เรียงไว้
5.ใส่สีที่อยู่ตรงข้ามกับสีหลักของคุณอย่างน้อย 1 สีเข้าไป (เช่นสีหลังคุณเป็นสีน้ำเงิน คุณต้องใส่สีเหลืองเข้าไปด้วย)
6.ปรับความสว่างและความเข้มให้ไล่เรียงกัน ไม่ควรนำสีหลักของคุณเป็นสีสว่าง (ควรเข้มไว้เพื่อให้สีเด่น)
7.ถ้าเป็นคอมพิวเตอร์กราฟฟิก ให้จดจำ HEX Color Code ไว้ (เป็นเลขฐาน 16 เรียงกัน 6 ตัว) ส่วนถ้าเป็นกราฟฟิกที่ไม่เกี่ยวกับคอมพิวเตอร์ ให้หาชื่อสีที่ค้างเคียงและจดจำ (ซึ่งขั้นตอนนี้เป็นสิ่งสำคัญที่สุด เพราะคุณอาจนำกลับมาใช้ใหม่ได้อีกครั้ง)

บทความหน้า ผมจะมาสอนเกี่ยวกับการควบคุมสีและการเลือกใช้สี โดยใช้ Color Circle และการใช้ตารางสี HEX Color Code โดยใช้ชื่อสามัญในการเทียบ ซึ่งจะเป็นขั้น Advance สำหรับผู้เชี่ยวชาญด้วย (อาจมีการใช้ศัพท์เฉพาะปะปนเข้าไป) ส่วนวันนี้ผมขอตัวไปทำงานต่อละครับ

ป.ล. ก่อนไปจากบทความนี้ ให้สังเกตดีๆครับ เกี่ยวกับหน้าแรกของบทความนี้ จะเห็นว่ามีความผิดปกติไปเกี่ยวกับตัวอักษร “อ่านบทความนี้…” ซึ่งจะใหญ่กว่าทั่วไปที่เคยทำมา นั่นก็เป็นจิตวิทยาครับ แต่อยู่ในหมวดหมู่ของขนาดและลักษณะปรากฎ ซึ่งจะทำให้เนื้อหาดูน่าอ่านมากขึ้นครับ

LuviKunG

อ้างอิง :

[1] 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

[2] http://www.thaihomelist.com/viewarticle.php?lg=th&pid=33

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

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

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

วันนี้จะมาพูดถึง 7 ข้อที่นักกราฟฟิกดีไซน์เนอร์ส่วนใหญ่ทำผิดพลาดกับงานของตน ซึ่งผมได้เรียงย่อมาจาก 50 ข้อที่ได้พบเห็นทั่วไปจนเหลือแค่ 7 ข้อ เพื่อจะได้เข้าใจเกี่ยวกับความผิดพลาดนั้นกว้างขึ้น

1. เรียงลำดับผลงานไม่ถูกต้อง หรือ ไม่จัดลำดับผลงานให้ดี

• เขียน HTML โดยเรียงโค๊ดที่ผิดพลาด ทำให้บางบราวเซอร์เกิดการอ่านแท็คผิดเพี้ยนไป เช่น <font size=”2″><b>ข้อความ</font></b>
• เขียน HTML โดยใช้โค๊ดไม่จำเป็นมากไป ซึ่งมีผลทำให้หน้าเว็บเพจมีขนาดใหญ่ เช่น <font size=”2″><font color=”red”>ข้อความ</font></font>

2. รายละเอียดน้อยเกินไป หรือ รายละเอียดมากไปจนไม่จำเป็น

• เขียน HTML โดยไม่ได้ใช้แท็คที่ถูกต้อง เช่น ใช้ <font size=”5″><strong>ข้อความ</strong></font>  แทน <h5>ข้อความ</h5>
• ออกแบบรูปร่างเว็บไซท์โดยลืมกำหนดโครงร่าง จำพวก Header, Footer, Menu, Content เป็นต้นฯ
• ใส่ตัวหนังสือในเว็บเพจมากเกินไป หรือ แบ่งคอลัมบ์ตารางมากจนเกินความจำเป็น

3. ไม่ตรวจสอบผลงาน

• เขียน PHP โดยใช้คำสั่งมากเิกินไปจนทำให้เกิดการประมวลผลที่ผิดพลาด (Error)
• เขียน HTML ตกหล่นหรือผิดพลาด เช่น <font size=”2′>ข้อความ</font> (ผิดตรงที่ใช้ double quote เปิดค่า แล้วใช้ single quote ปิดค่า) หรือ <dd>ข้อความ (ลืมเขียนแท็คปิดด้วย </dd>)
• วาดรูปกราฟฟิกโดยขาดความคำนึงเรื่องความหนาของเส้นเวกเตอร์

4. ชอบทำงานเมื่อใกล้ถึงเวลากำหนด

5. ทำงานแบบลวกๆ หรือ ทำงานแบบไม่เต็มใจ

6. ขาดความรู้ด้านมาตรฐาน

• ใช้ฟอนต์ไม่ได้มาตรฐาน
• เว็บเพจมีตัวหนังสือรกตาเกินไป
• ใช้สีสันแสบตา
• แบ่งรูปแบบและขนาดเว็บเพจไม่ถูกต้อง

7. ไม่สนใจกฎหมาย

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

บางหัวข้ออาจมีตัวอย่างมากกว่านั้น ซึ่งผมยกตัวอย่างที่เห็นได้ทั่วไปแบบเข้าใจง่ายๆมาให้อ่านกันนะครับ หรือถ้าอยากได้ตัวอย่างเพิ่มเติม ลองแวะไปอ่าน 10 ข้อผิดพลาดที่เห็นบ่อย ๆ ในเว็บดีไซน์ ก็ได้นะครับ

มีข้อสงสัยตรงไหน โพสไว้กล่องคอมเมนต์ข้างล่างเลยนะครับ ถ้าผมสะดวกมาตอบก็จะตอบให้ครับ

LuviKunG

จริงหรือที่กราฟฟิกดีไซน์สำคัญกับทุกอย่างในโลก?

ลองมองรอบๆตัวคุณสิครับว่า มีอะไรบ้างที่เป็นกราฟฟิกดีไซน์บ้าง? เช่น ขวดน้ำที่มีฉลากโลโก้สินค้า, กรอบรูปที่คุณโปรด, หน้าปกหนังสือที่มีสีสัน ฯลฯ ทุกอย่างถูกสร้างขึ้นมาโดยการออกแบบทางศิลปะที่เรียกว่า “กราฟฟิกดีไซน์”

กราฟฟิกดีไซน์ไม่จำเป็นต้องอยู่บนโลกอินเตอร์เน็ทเสมอไปดังที่ผมยกตัวอย่างข้างต้น ส่วนใหญ่มักจะเข้าใจผิดว่ากราฟฟิกดีไซน์มักจะทำในโลกอินเตอร์เน็ทเท่านั้น เช่น การออกแบบหน้าเว็บไซท์ให้สวยงาม ซึ่งเห็นได้ทั่วไปจนชินตา

แล้วกราฟฟิกดีไซน์สำคัญกับโลกเราอย่างไร?

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

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

ดูๆไปเหมือนคำว่า ครีเอเตอร์ จะไม่คุ้นหูคุ้นตาเราในชีวิตประจำวันสักเท่าไหร่ ไม่เหมือนกับ ดีไซน์เนอร์ ที่เมื่อพูดถึงชื่อก็ต้องร้องอ๋อกันทุกคน ปกติ ครีเอเตอร์ ไว้เรียกคนที่มีความสามารถสร้างสรรค์สิ่งต่างๆได้โดยใช้ความคิดด้านตรรกศาสตร์เพียงอย่างเดียว (เช่น วิศวกร, นักสถาปัตย์ เป็นต้นฯ)

องค์ประกอบของกราฟฟิกสำหรับดีไซน์เนอร์มีอะไรบ้าง?

องค์ประกอบจะถูกจัดให้เป็นหมวดใหญ่ๆอยู่ 5 หมวดด้วยกันคือ

1. รูปร่าง
2. สีสัน
3. ขนาด
4. องค์ประกอบ
5. ความหลากหลาย

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

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

ขนาด เป็นความสำคัญอันดับสามที่ต้องควบคุมร่วมกับองค์ประกอบ มีความจำเป็นเรื่องการออกแบบด้านสัดส่วนของสิ่งนั้น ถ้าพูดถึงเว็บไซท์ก็จะเป็นด้านความยาว ความกว้าง การเรียงสัดส่วนรูปภาพ เป็นต้นฯ

องค์ประกอบ เป็นความสำคัญลำดับสุดท้ายแต่ยังไม่ท้ายสุด ถ้าคุณจะทำงานใดงานหนึ่ง คุณต้องจัดลำดับองค์ประกอบให้เข้ากันอย่างลงตัวก่อน นักดีไซน์เนอร์เก่งๆมักจะจัดองค์ประกอบก่อนการเริ่มงานเสมอ เช่น บางคนเปิดโปรแกรม MS – Paint แล้วเริ่มบรรจงวาดรูปลงไปอย่างเละๆ แล้วค่อยเริ่มจัดรูปเละๆนั่นให้เป็นรูปร่างเว็บไซท์ โดยอาศัยหลักการจัดองค์ประกอบอย่างละเอียด จนเริ่มสร้างเว็บไซท์ตามที่วาดรูปลงในโปรแกรมนั้น จนสุดท้ายก็ออกมาอย่างสวยงาม

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

การเป็นนักกราฟฟิกดีไซน์เนอร์ที่ดีควรทำอย่างไร?

คำถามนี้มักจะเกิดขึ้นในหัวของนักดีไซน์มือใหม่เสมอ ซึ่งผมได้หาคำตอบมาให้แล้วครับ

1. อย่ากังวลว่าผลงานตัวเองห่วย เพราะการที่คุณคิดว่าผลงานของคุณห่วย นั่นคือคุณได้ดึงเส้นด้ายจินตนาการของคุณขาดไปแล้ว
2. สร้างความมั่นใจในผลงานของตน คล้ายๆกับข้อที่หนึ่ง ดูเหมือนง่าย แต่ความจริงยากมาก เวลาคุณทำงาน อย่าสร้างความเครียดให้กับตนเอง แต่ให้คิดว่าคุณกำลังสนุกกับการทำงาน ผมเรียกวิธีนี้ว่า “Enjoy your Imaginations”
3. ไม่ควรคิดหักโหมกับจินตนาการ เพราะงานดีไซน์ของคุณจะออกมาไม่ดี ควรไปพักผ่อนให้สมองผ่อนคลายลง เพราะงานดีไซน์ที่ดีไม่ได้มาจากกำลังสมอง แต่มาจากอารมณ์ของคนคิด ดังนั้นพักถ้าคุณคิดว่าไม่ไหว ลองดื่มน้ำเย็นๆสักแก้วแล้วนั่งฟังเพลงหรือดูทีวีก็ได้!
4. จินตนาการอยู่ทุกที่ บางเวลาถ้าคุณได้มีโอกาสไปเที่ยวพักผ่อน ลองหลับตาแล้วฟังเสียงของสายลมดู ลองจินตนาการตามที่คุณได้เห็นภาพเมื่อคุณหลับตา แล้วลองคิดออกแบบตามหลักของนักดีไซน์เนอร์ดู บางทีผลงานขอบคุณออกมาอาจจะดีเกินที่คาดคิดไว้
5. ไม่ควรขี้เกียจ อันนี้สำคัญ เพราะนักดีไซน์เนอร์ส่วนใหญ่มักจะส่งงานให้เจ้านายหรือผู้รับจ้างล่าช้าเสมอ (เรื่องจริงนะ! ผมเคยไปทำแบบสอบถามแล้ว) บ้างก็อ้างว่า คิดงานไม่ออก หรือไม่ก็ งานเยอะ พอไปดูเบื้องหลังกลับเห็นนั่งเล่นเกมส์ หรือไม่ก็ดูภาพยนต์ ลองปรับพฤติกรรมเล็กน้อยในชีวิตประจำวันดูครับ
6. สมุดพก จะสมุดอะไรก็ได้ มีเส้นหรือไม่มีก็ได้ แต่ขอให้พกติดตัว เวลาคุณคิดอะไรได้ขึ้นมา หรือนั่งเหม่อลอยอยู่จู่ๆก็มีความคิดพุ่งขึ้นมาแล้วคุณคิดว่าควรเก็บไว้ จดมันลงในสมุดนั้นเลยครับ บางทีคุณอาจจะได้ใช้มันในอนาคต

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

LuviKunG

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

>> รวมบทความสอนทำกราฟฟิกรัก ๆ รับวาเลนไทน์ <<

สำหรับใครที่มีปัญหาในการทำตาม หรือมีข้อสงสัยเกี่ยวกับเว็บดีไซน์ หรือกราฟฟิกดีไซน์ สามารถไปเยี่ยม เว็บบอร์ด Designil ได้นะครับ ยินดีต้อนรับเสมอครับ

และสำหรับคนที่เล่น Twitter สามารถ follow @designil ครับ รับรองว่า follow กลับทุกคน (ที่ไม่ใช่บอทขายของ) แน่นอนครับ!

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

มาพูดถึงของที่จะแจกในวันนี้กันก่อนครับ เป็นบทความรวมเซ็ตกราฟฟิกแนวเวกเตอร์ (Vector Art) คุณภาพดี ๆ เพียบครับ จริง ๆ แล้วมีบทความแจก Icon Set อยู่ในสต๊อกเหมือนกัน แต่เอา Vector มาแจกก่อนเพราะเห็นว่ายังไม่เคยแจกเลยครับ ข้อดีของ Vector Graphics ก็คือ เป็นรูปภาพที่เกิดจากการเอาสมการเส้นมารวมกันครับ เพราะฉะนั้นสามารถขยายรูปเวกเตอร์ได้โดยที่ภาพไม่แตกครับ

ต่างกับพวก Bitmap Graphics (ไม่ใช่แค่กราฟฟิกนามสกุล BMP อย่างเดียวครับ รวมถึง JPG, PNG, GIF, etc. ที่เราใช้กันใน Photoshop ด้วย) ที่เป็นรูปที่เกิดจากการแต้มสีแต่ละสีลงในช่องสี่เหลี่ยมเล็ก ๆ แต่ละช่อง ทำให้เกิดเป็นรูปขึ้นมา กราฟฟิกแนวนี้ภาพจะแตกถ้าขยายรูปใหญ่เกินไปครับ

เวกเตอร์ต่าง ๆ ที่แจกในวันนี้สามารถเอาไปใช้ได้ฟรีครับ! (ถ้าไม่ฟรีคงไม่แจกเนอะ หุหุ)

>> ดาวน์โหลดกราฟฟิกเวกเตอร์ Ultimate Collection of Vector ได้ที่นี่!! <<

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

สำหรับคนที่เล่น Twitter สามารถ follow ได้ที่ @designil ครับ ถ้าไม่ใช่แอคเค้าท์โฆษณา follow กลับแน่นอนครับ

อย่าลืมแวะไปเยี่ยม เว็บบอร์ด Designil เปิดใหม่กันนะครับ มีคำถามไปทิ้งไว้ที่นั่นได้ครับ~

เพิ่งแจก เซ็ตไอคอนฟรีแห่งปี 2009 ไปเมื่อไม่นานมานี้ ได้รับผลตอบรับดีพอสมควร ก็เลยเอา Icon ฟรี มาแจกกันอีก ไอคอนต่าง ๆ ที่แจกคราวนี้จะเน้นเกี่ยวกับเว็บดีไซน์โดยเฉพาะเลยครับ ใครที่ทำเว็บไซด์บ่อย ๆ แล้วกำลังมองหาไอคอนสวย ๆ ไปใส่ในกราฟฟิกบนเว็บไซด์ของคุณ หรือแม้แต่คนที่อยากพัฒนา App บนมือถืออย่าง iPhone/Android ก็ได้รับประโยชน์จากเอนทรีนี้ไปเต็ม ๆ ครับ

เซ็ตไอคอนที่แจกมีทั้งแบบ PNG สำเร็จรูป และแบบ Vector ให้เราเอาไปใช้ในงานได้หลากหลาย และย่อขยายได้ตามใจชอบครับ เหมาะมากสำหรับคนที่ทำงานหลาย Scale นอกจากนี้ยังมีไอคอนสำหรับ Social Network ต่าง ๆ เช่น Twitter, Flickr, Facebook

สำหรับคนที่ทำเว็บแนวขายของ E-Commerce ก็มีเซ็ตไอคอนรูปเครดิตการ์ดและวิธีการจ่ายเงินบนอินเตอร์เน็ตต่าง ๆ เช่น Paypal, VISA และยังมีไอคอนรูปธงชาติประเทศต่าง ๆ สำหรับคนที่ทำเว็บรองรับหลายภาษาด้วยครับ

>> ดาวน์โหลดฟรีไอคอนสำหรับคนทำเว็บ/Appมือถือ คลิกเลย!! <<

สามารถติดตามอัพเดทเกี่ยวกับเว็บดีไซน์/กราฟฟิกดีไซน์ได้ที่ @designil บน Twitter ครับ!

Brush Photoshop ทั้งหลายที่รวบรวมมาให้ในวันนี้มีหลายแบบหลายสไตล์แล้วแต่จะเลือกใช้เลยครับ ซึ่งถ้าดูจากรูปด้านบนก็จะเห็นบรัชบางส่วนที่จะแจกครับ มีแนว Grunge อยู่ด้วย ถ้าใครไม่เคยทำกราฟฟิกแนว Grunge ลองโหลดไปเล่นดูนะครับ อาจจะพบทางสว่างในงานกราฟฟิกของตัวเอง (ขนาดนั้น = =”)

>> Download! ดาวน์โหลดบรัช Photoshop ฟรี <<