Intro Webdesign

ทำไมเราถึงต้องมี บท Intro ขึ้นมาก่อนนะเหรอครับ ก็เพราะว่าเป็นการปูพื้นฐานและทำความเข้าใจในหลักการเบื้องต้นของการออกแบบเว็บไซน์กันก่อน (ความจริงแล้วก็ยังนึกไม่ออกว่าจะเอาอะไรมาเขียน Blog ก่อนดี 555+) ซึ่งไม่ใช่เรื่องยากเย็นอะไร เพียงแต่ใครที่ยังไม่รู้ ก็ออกแบบเว็บให้สวยได้ยากอยู่เหมือนกันนะครับ

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

2. ไฟล์รูปภาพชนิด Vector จะเป็นภาพที่ใช้สูตรทางคณิตศาสตร์ในการคำนวณทำให้เกิดรูปภาพ รูปภาพชนิดนี้เมื่อทำการขยายแล้วจะไม่แตกครับ

ต่อมาเรามาดูนามสกุลของรูปภาพกันบ้างดีกว่านะครับ ว่ามีความต่างกันอย่างไงบ้าง
.ai เป็นไฟล์เฉพาะของโปรแกรม Adobe Illustator แต่สามารถที่จะเปิดในโปรแกรม Adobe Photoshop เพื่อใช้ในการทำงานร่วมกันได้

.gifเป็นไฟล์รูปภาพที่เป็นมาตราฐานใน Internet ซึ่งมีคุณสมบัติพิเศษที่สามารถทำเป็นภาพ Animation และรูปภาพที่พื้นหลังโปรงใสได้ ส่วนสีที่สามารถแสดงได้จะอยู่ที่ 256 สี

.jpg . jpeg เป็นไฟล์รูปภาพที่เป็นมาตราฐานใน Internet อีกประเภทหนึ่ง ซึ่งจะใช้ในงานรูปภาพประเภทรูปถ่าย หรือรูปที่ใช้จำนวนสีเยอะๆ เพราะด้วยคุณสมบัติพิเศษที่สามารถแสดงสีได้ประมาณ 16.7 ล้านสี

.tiff เป็นไฟล์รูปภาพที่เกิดมากับโปรแกรม PageMaker เหมาะสำหรับงานพิมพ์

.pdf เป็นไฟล์ของโปรแกรม Adobe Acrobat ซึ่งใช้เป็นสื่อพิมพ์อิเล็กทรอนิกส์ สนับสนุนทั้งแบบ Vactor และ Bitmap

.png เป็นไฟล์รูปภาพที่ออกแบบมาเพื่อเป็นอีกทางเลือกหนึ่งของ .gif

.eps สนับสนุนทั้งแบบ Vactor และ Bitmap
ทีนี้ก็พอจะรู้ข้อแตกต่างระหว่างไฟล์รูปภาพแต่ละฟอร์แมตแล้วนะครับ แต่ไฟล์ที่เรานิยมใช้กันบน website กันก็คือ ไฟล์ .gif , .jpg , .jpeg ต่อไปเรามาดูว่าจะเลือกsaveรูปเป็น .gif หรือว่า .jpg ดีเมื่อเราทำการดีไซน์เสร็จแล้ว หลักการง่ายๆในการเลือกก็คือให้เราสังเกตว่ารูปในส่วนที่เราจะทำการ Save นั้นดูแล้วจำนวนสีมากหรือไม่ ถ้าจำนวนสีมีมากหรือมีความต่างสีมาก ก็ให้เราทำการ Save รูปเป็น .jpg นี่คือข้อที่ 1 ส่วนข้อที่ 2 ก็คือดูว่าเรา Save เป็นฟอร์แมตไหนไฟล์จะมีขนาดเล็กที่สุดโดยที่มีความละเอียดอยู่ในระดับที่เราดูแล้วเรียบเนียบ หรือคล้ายคลึงกับต้นแบบมากที่สุด โดยโปรแกรมที่เราใช้ในการออกแบบส่วนใหญ่จะมีในส่วนนี้ให้เราดูได้อยู่แล้วเมื่อเราจะทำการ Save

องค์ประกอบพื้นฐานของภาพ

องค์ประกอบพื้นฐานจะประกอบไปด้วย จุด -> เส้น -> ระนาบ
ต่อมาเรามาดูคุณสมบัติของแต่ละองค์ประกอบหันดีกว่านะครับว่ามีคุณสมบัติอะไรมั่ง

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

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

ระนาบ - วงกลม ให้ความรู้สึกเป็นจุดศูนย์กลาง เป็นที่รวมความสนใจ
- สี่เหลี่ยม ให้ความรู้สึกมั่นคง เป็นระเบียบ
- สามเหลี่ยม หยุดนิ่งมั่นคง ส่วนปลายจะให้ความรู้สึกถึงทิศทาง
- หกเหลี่ยม ให้ความรู้สึกเชี่อมโยงกันไม่มีที่สิ้นสุด
- รูปร่างธรรมชาติ ให้ความรู้สึกถึงอิสระ เลื่อนไหล ไม่มีกฏเกณฑ์แน่นอนตายตัว

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

สี

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

สีเหลือง - เป็นสีที่ให้ความรู้สึกถึงความสดใส ปลอดโปร่ง และดึงดูดสายตา

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

สีส้ม - ให้ความรู้สึกดึงดูด ทันสมัย สดใส กระฉับกระเฉง และมีพลัง

สีเขียว - จะให้ความรู้สึกนึกถึงต้นไม้ ความสดชื่น เย็นสบาย ชุ่มชื่น และสบายตา

สีม่วง - ให้ความรู้สึกถึงความหนักแน่น มีเสน่ห์ เป็นความลับและปกปิด

สีชมพู - ให้ความรู้สึกถึงความอ่านหวาน นุ่มนวล เป็นสีที่บ่งบอกถึงความรัก วัยรุ่น และความเป็นผู้หญิง

สีน้ำตาล - ให้ความรู้สึกถึงความสงบ เรียบ ความเป็นผู้ใหญ่ ความเก่าแก่ โบราณ และไม้

สีฟ้า - ให้ความรู้สึกถึงความโปร่ง โล่งสบาย สบายตา นุ่มนวล และสุขสบาย

สีเงิน - ดูมีราคาทันสมัย และหมายถึงสิ่งใหม่ๆ เป็นสีที่ให้สีตั้งแต่ ขาว - ดำ

สีทอง - ดูมีคุณค่า ราคาแพง หรูหรา
สีขาว - ให้ความรู้สึกถึงความบริสุทธิ์ สะอาด เรียบง่าย โล่ง และว่างเปล่า

สีเทา - เป็นสีที่เป็นกลางที่สุด เป็นสีที่สามารถเข้าได้กับทุกสี เป็นสีที่ให้อารมณ์เศร้า หม่นหมอง ไร้ชีวิตชีวา

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