ยินดีต้อนรับ

Welcome to the land of knowledge about multimedia. By Mr.Suwit ChaiPhet Faculty of Information Technology @ Siam University

วันพุธที่ 6 ตุลาคม พ.ศ. 2553

Website ที่ออกแบบ

1.>>>WebPage ที่ออกแบบเอง



ชุดสีหลักที่ใช้ในการออกแบบ



2.>>>WebPage ตัวอย่าง

วันเสาร์ที่ 2 ตุลาคม พ.ศ. 2553

การใช้สื่อประสมสำหรับออกแบบเว็บไซต์

- การใช้ภาพเคลื่อนไหว >>>
ใช้เพื่อสร้างสีสันในส่วนของโลโก้ (LOGO Animated)
Interactive คลิกแร้วใหญ่ขึ้น อยู่ที่ปุ่มต่างๆ แถบเมนูนำทาง
วิเคราะห์ว่าเว็บมีภาพเคลื่อนไหวมั้ย มีลักษณะอย่างไร
- การใช้วีดีโอคลิป >>>
- การใช้เสียง >>>
เว็บที่เกี่ยวกับข่าว หรือไม่เกี่ยวกับบันเทิงก็ไม่ควรมี
แบ่งตามลักษณะหมวดหมู่ด้วย

การใช้ตัวอักษรและภาพกราฟฟิก



- สีของตัวอักษร >>>
เข้ม พื้น อ่อน/กลาง
กลาง พื้น เข้ม/อ่อน
อ่อน พื้น เข้ม/กลาง
- ลักษณะตัวอักษร>>>
html (css) การกำหนดสีด้วยภาษาคอมพิวเตอร์ โดยการเขียนโปรแกรม
ฟอนต์มาตรฐานที่ใช้กับหน้าเว็บ Ms san serif , Arial , Geneva , Helvetija 14-20 pt
ซึ่งอ่านง่าย
ถ้าเป็นหัวข้ออาจกำหนดความเด่นชัด เช่น หนา เอียง ขีดเส้นใต้ ตัวกระพิบ
- จำนวนของภาพกราฟฟิก>>>
ภาพที่ใช้ประกอบในเว็บไซต์
ขึ้นอยู่กับความเหมาะสมของเนื้อหา
อาจเป็นการใช้กับภาพหนึ่งภาพ เช่น หนึ่งภาพหนึ่งเรื่อง
- ตำแหน่งในการวางภาพ >>>
ควรจะอยู่ด้านซ้าย ขวา หรือกลาง ขึ้นอยู่กับเนื้อหาของเรา
มองจากซ้ายไปขวา
- ขนาดของภาพ >>>
JPEG , GIF,bitmap,vector

หลักการใช้สี

หลักการใช้สีสำหรับการออกแบบเว็บไซต์
1. จำนวนจองสีหลัก >>> สีหลัก ให้เลือกตาม Concept + Mood Tone หรือ Theme เพื่อแสดงให้ถึงภาพลักษณ์
2. การใช้สีพื้นหลัง >>> ภาพ ลวดลาย สี
3. โทนสีโดยรวม >>> โทนร้อน โทนเย็น
4. สีกับหมวดหมู่>>> หมวดข่าว บันเทิง อยู่ลักษณะเนื้อหาของหมวดหมู่


การใช้สีในงานออกแบบกราฟิก มีวัตถุประสงค์ที่จะทำให้งานนั้นน่าดู สวยงาม และตื่นตา หรือส่งเสริมให้เนื้อหาสาระที่นำเสนอมีความสมบูรณ์ยิ่งขึ้น คนแต่ละวัยมีความสนใจกลุ่มสีแตกต่างกัน เด็กเล็กๆจะสนใจสีสด เข้ม สะดุดตา ไม่ชอบสีอ่อน และจะสังเกตได้ว่าเมื่อมีอายุมากขึ้นก็ยิ่งไม่ชอบสีสดใสมากๆ กลับนิยมสีอ่อนหวาน นุ่มนวล การวางโครงสีในงานออกแบบกราฟิกในเชิงพาณิชย์ จึงต้องเน้นเรื่องวัยของกลุ่มเป้าหมายเป็นสำคัญ
เด็กเล็กๆ ควรใช้สีประเภทปฐมภูมิ หรือสีทุติยภูมิ ส่วนผู้ใหญ่อาจต้องใช้สีแท้ ผสมกลุ่มสีขาวหรือสีนวลหรือสีดำ การใช้สีขาวหรือสีดำมาผสมกับสีแท้ ก็จะช่วยลดความสดใสของสีเดิมลงตามขนาดสัดส่วนมากน้อยตามต้องการ ดังนั้น ก่อนจะวางโครงสีในการทำงาน จึงควรพิจารณาเกี่ยวกับการใช้สีในทางจิตวิทยาด้วย
1.ใช้สีสดสำหรับกระตุ้นให้เห็นเด่นชัด เพื่อการมองในระยะเวลาสั้นๆ เหมาะอย่างยิ่งสำหรับการทำสื่อเพื่อโฆษณาประชาสัมพันธ์
2.พึงระลึกไว้เสมอว่าการใช้สีมีวัตถุประสงค์เพื่อต้องการเน้นให้เห็นเด่นชัด มุ่งส่งเสริมเนื้อหาสาระมีความชัดเจนขึ้น ถูกต้องขึ้น บางครั้งการใช้สีของนักออกแบบ จะสามารถใช้สีได้อย่างอิสระเพื่อความสวยงาม บางครั้งก็ต้องจำเป็นนึกถึงหลักความจริง และความถูกต้องอย่างเหมาะสมด้วย
3.การออกแบบพาณิชย์ศิลป์ งานกราฟิกต่างๆ อาจจะไม่จำเป็นต้องใช้สีเสมอไป ผู้ออกแบบจึงควรพิจารณาถึงความเหมาะสมด้วยว่าควรใช้อย่างไร เพียงใด การกำหนดว่าจะใช้สีเพิ่มขึ้นมา 1 สีนั้น หมายความว่าจะต้องเพิ่มงบประมาณตามมาอีกจำนวนหนึ่งเสมอ
4.ควรใช้สีให้เหมาะสมกับวัยผู้บริโภค
5.การใช้สีมากเกินไปไม่เกิดผลดีกับงานออกแบบอย่างแท้จริง เพราะสีในหลายๆสีอาจทำให้ลดความเด่นชัดของงานและเนื้อหาที่ต้องการนำเสนอ
6.เมื่อใช้สีสด เข้มจัด คู่กับสีอ่อนมากๆ จะทำให้ดูเด่นชัดและมีชีวิตชีวาน่าสนใจ
7.การใช้สีพื้นในงานออกแบบสิ่งพิมพ์ที่มีพื้นที่ว่างมากๆ ไม่ทำให้เกิดผลในการเร้าใจเท่าที่ควรจึงควรหลีกเลี่ยง
8.ข้อพิจารณาสำหรับการใช้สีบนตัวอักษร ข้อความ คือ จะต้องให้ชัดเจน อ่านง่าย ควรงดเว้นการใช้สีตรงข้ามในปริมาณที่เท่าๆกัน บนพื้นที่เดียวกันหรือใกล้เคียง เพราะจะทำให้ผู้ดูต้องแพ่งมองอย่างมาก ทำให้เกิดภาพซ้อนพร่ามัว โดยเฉพาะอย่างยิ่งส่วนที่เป็นเนื้อหาสาระ เช่น ตัวอักษรสีแดงบนพื้นสีเขียว ความเด่นชัดของข้อความที่ต้องการเน้นด้วยความแตกต่างกันของสี ก็จะลดความเด่นชัดลงอีกด้วย

วันศุกร์ที่ 1 ตุลาคม พ.ศ. 2553

วิเคราะห์หน้า WebPage

1.ลักษณะโครงสร้างหน้าเว็บ >>> เป็น WebPage แบบแนวตั้ง

2.ขนาดของหน้าจอเว็บ >>> ขนาด 1024x768 Pixels

3.การจัดวางตำแหน่งมี 3 ส่วนคือ >>> Logo / เนื้อหา / ภาพ
3.1 ส่วนบน (ส่วนหัว) > มีโลโก้ คือ tEENEE >> ชื่อเว็บ
www.teenee.com >>> มีเมนูต่าง ๆ เช่น
บอร์ดข่าว,เรื่องความรัก,คอมพิวเตอร์,ดารา ฯลฯ
3.2 ส่วนกลาง (ส่วนเนื้อหา) > มีข่าวที่กำลังเป็นประเด็นฮอตตอนนี้เรื่องฟิล์มกับแอนนี่,พาดหัวข่าวว่า"เปิด
ใจแอนนี่" และจะมีโฆษณาอยู่แถบข้าง ๆ ขวาของเว็บ
3.3 ส่วนล่าง (ส่วนท้าย)>>>มีหัวข้อข่าวอื่น ๆ , ลิงค์ต่าง ๆ , และดูดวงรวมถึงการบอกขนาดของเว็บด้วย


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

5. การแบ่งหมวดหมู่ >>> แบ่งหมวดหมู่เป็น ดารา, การเมือง,กีฬา,และสุขภาพ โดยจะแบ่งหมวดหมู่ด้วยการจัดโซนด้านเนื้อหาเป็นล็อก ๆ เช่น โซนแรกเป็นเรื่องข่าวร้อน >>โซนที่สองเป็นดารา >>> โซนที่สามเป็นข่าวการเมือง>>>> โซนที่สี่เป็นกีฬา >>>>> โซนที่ห้าเป็นเรื่องสุขภาพและติดต่อ

รูปแบบและโครงสร้างของหน้าเว็บไซต์


WebPage แบบเต็มหน้าจอขนาด 1024x768 Pixels

รูปแบบและโครงสร้างของหน้าเว็บไซต์

WebPage แบบแนวนอนขนาด 1024x768 Pixels



วันอาทิตย์ที่ 12 กันยายน พ.ศ. 2553

สี (color)



สี= ที่เกี่ยวข้องกับมัลติมิเดีย คือสีที่อยู่บนหน้าจอคอมพิวเตอร์, บนมือถือ
The colo Wheel = วงจรสี
ขั้นที่ 1 แม่สีคือ PRIMARY เช่นสีแดง, สีเหลือง, สีน้ำเงิน
ขั้นที่ 2 สีรอง คือ SECONDARY เช่น สีส้ม , สีม่วง , สีเขียว
ขั้นที่ 3 TETIARY เช่น สีส้มแดง , สีส้มเหลือง , สีม่วงแดง, สีคราม ,สีเขียวอ่อน ,สีน้ำเงิน+สีเขียว ได้สีเขียวน้ำเงิน

ศัพท์ที่เกี่ยวกับสี
1. Hue แปลว่า ตัวสีหรือเนื้อสี
2. Saturation แปลว่า ความจัดจ้านของสีหรือความเจิดจ้าของสี
3. Value แปลว่า ค่าน้ำหนักของสี (ผสมขาวกับดำ ทึบก็ใส่ดำ ขาวให้สว่าง)

สี (color)
1. CMYK ใช้สำหรับกับสิ่งพิมพ์ มี 4 สี เช่น หนังสือพิมพ์ 4 สี
CYAN สีน้ำเงิน , MAGENTA สีชมพูบานเย็น, YELLOW สีเหลือง , BLACK สีดำ
สีนอกเหนือจากที่พิมพ์ออกมาในการพิมพ์ 4 สี คือการทับกันของสีสองสี
2. RGB (แดง, เขียว, ฟ้า) ลงเว็บไซต์หรือบนหน้าจอ
กำหนดเช่น 141R, 145G, 32B ได้สีเขียวขี้ม้า

แบบต่าง ๆ ของสีชนิด RGB
แบบที่ 1 MONOCHROMATIC
สีเดียว สร้างความแตกต่างด้วยระดับความมืด- สว่างของสี
แบบที่ 2 TRIADS
การเลือก 3 สี ที่อยู่ตรงกันข้ามวงจรสี เช่น เว็บไซต์เกี่ยวกับเด็ก อารมณ์มีสีสัน
แบบที่ 3 ANALOGOUS
การใช้สีใกล้เคียงกัน โดยเลือกจากสิ่งที่อยู่ถัดไป อีก 2-3 สี อาจสร้างความกลมกลืนได้ดี
แบบที่ 4 COMPLEMENTARY
การใช้สีตรงข้ามกัน สามารถช่วยเน้นความโดดเด่นได้ดี ควรใช้สีดำหรือเทา เพื่อลดความรุนแรวของสี นอกจากนั้นการใช้สี ที่แตกต่างกันมาก จะทำให้มีความสำคัญเท่ากัน ดังนั้นจึงควรลดความเข้มของสีหนึ่งลง (ต้องลดหลั่นความเข้มของสี)
แบบที่ 5 SPLIT-COMPLEMENTS
การใช้สีแบบผสม เป็นการผสมผสานระหว่างสีโทนร้อนและเย็นโดยเริ่มจากการเลือกสีใดสีหนึ่งและจับคู่กับอีก 2 สี ในโทนสีที่ตรงข้ามกัน

การใช้ตัวอักษร (TYPOGRAPHY)

การใช้ตัวอักษร (TYPOGRAPHY)
นึกว่าตัวอักษร คือ รูปร่าง
TYPEFACES GIVE VOICE TO WORDS
: ตัวอักษรที่จะให้สำเนียงกับคำต่าง ๆ ได้
FONT (TYPEFACES)
: ชุดรูปแบบของตัวอักษร
FONT FAMILIES
: ตระกูลของชุดรูปแบบตัวอักษร

ส่วนประกอบ หรือ ลักษณะ
องค์ประกอบภาษาอังกฤษมี 2 รูปแบบ
1. Serif เป็นตัวอักษรที่มีเชิงหรือฐาน
2. Sans serif เป็นตัวอักษรที่ไม่มีเชิงหรือฐาน

+ ขนาด หน่วย=POINTS (72 points = 1 นิ้ว) ต้องดูรูปแบบของขนาดเป็นหลัก
แบบอักษรที่แตกต่างกัน มีขนาด points เท่ากันไม่จำเป็นต้องมีความสูงเท่ากัน

+ ประเภท
+ Sans serif ไม่มีเชิง เหมาะกับงานแบบกลาง ๆ ไม่ได้ระบุอะไรมาก เช่น font tahoma
+ Serif มีเชิง เหมาะสำหรับพวกที่มีความรู้สึกอลังการ หรูหรา
+ Script Hand - lettered (ลายมือเขียน) เช่น font ที่มีลักษณะที่คลาสสิก โบราณ
+ Dingbat font ที่มีรูปแบบ (ICON)
+ Novelty font ที่เกี่ยวกับ Fiarshion design (ฟอนต์ตกแต่งประดับประดา) font ที่มีรูปลักษณะเฉพาะตัว เช่น พาดหัวเว็บไซต์, ปกหนังสือ, Headline หนังสือ

+ Font การจัดวางตำแหน่ง
+ การผสมอักษร
วิธีที่ 1 ใช้font แบบมีเชิงเป็นหลัก ไม่มีขาเป็นรอง มีเชิง/ไม่มีเชิง โดยเน้นตัวอักษรให้ชัด ๆ เน้นหนา ให้แตกต่างกัน font ต้องเป็นไปได้
วิธีที่ 2 ใช้ฟอนต์แบบไม่มีขาเป็นหลัก มีขาเป็นรอง เน้นชัด ๆ อย่าให้เท่ากัน ไม่มีการเน้น จะทำให้ดูเด่นขึ้น
วิธีที่ 3 ไม่ชัดเจน / ไม่แนะนำ ฟอนต์ของโลโก้ต้องชัดเจน
วิธีที่ 4 ใช้ฟอนต์หลักและรองให้แตกต่างกันชัดเจน เช่น คละคนละ font
วิธีที่ 5 ลองใช้ตัวอักษรหลักและรองไม่ต้องแตกต่างกันมากนัก ต้องดูอารมณ์ด้วย

เว็บไซต์ FONT ที่น่าสนใจ
www.colorblender.com จะมีชุดสีมาใช้ จะมีการเลือกสีให้เหมาะสมกัน
www.Ont.com โหลด font ภาษาไทย
www.T26.com โหลด font ภาษาอังกฤษ

หลักการออกแบบรูปร่างและรูปทรง


โลโก้ หรือสัญลักษณ์ ส่วนใหญ่เกิดจากการสร้างขึ้นโดยใช้รูปร่างทรงพื้นฐานใช้การกำหนดสี ลักษณะผิว รวมทั้งการใช้องค์ประกอบต่าง ๆ เพื่อสื่อสารความหมายให้ตรงตามความต้องการ

1.โครงสร้าง
1.1 รวมกัน
1.1.1 กำหนดรูปร่างขึ้นมาก่อน
1.1.2 เอามาจัดเรียงกันซ้อนกัน
1.1.3 กลายเป็นโลโก้
1.2 ลบออก
1.2.1 กำหนดรูปร่าง
1.2.2 วางทับกัน
1.2.3 ลบออก
1.3 คัดเลือก
1.3.1 เลือกรูปร่างมา
1.3.2 คัดเลือกบางจุดตัดบางจุด
1.3.3 ได้ฟอร์มบางจุด
1.4 การซ้ำ
1.4.1 ใช้รูปเดิม
1.4.2 เปลี่ยนขนาด หมุน เปลี่ยนรูปร่าง


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

3.องค์ประกอบ
เครื่องหมายสัญลักษณ์ ประกอบด้วยรูปร่างที่ซ้ำกัน จัดวางล้อมรอบศูนย์กลาง
3.1 จัดวางอยู่ในศูนย์กลางของโครงสร้างที่อยู่ในรัศมีวงกลม
3.2 การจัดวางองค์ประกอบสามารถจัดวางรูปร่างภายในรูปร่าง
3.3 เล่นกับพื้นที่แล้วจัดวางไอคอนเข้าไป ในตำแหน่งอสมมาตรบนสี่เหลี่ยม
3.4 รูปร่างไอคอนหลากหลายใช้โครงสร้างตารางเข้ามาช่วยรวบรวมกัน
3.5 การใช้รูปร่าง 2 รูปร่างขึ้นไปเพื่อเสริมความหมายกัน เช่น ลูกศรอยู่นอกเครื่องบิน
3.6 การจัดวางที่ไม่จำเป็นต้องใช้รูปร่างเว่อ ๆ แต่ใช้รูปร่างที่เป็นรูปเลขาคณิตก็พอ เช่น วงกลม, สามเหลี่ยม, สี่เหลี่ยม ฯลฯ

วันศุกร์ที่ 10 กันยายน พ.ศ. 2553

Font ต่าง ๆ



1. Typefaces give voice to words
: ตัวอักษรที่จะให้สำเนียงกับคำต่าง ๆได้
2. Font (Type facaces)
: ชุดรูปแบบของตัวอักษร
3. Font Families
: ตระกูลของชุดรูปแบบตัวอักษร





องค์ประกอบของฟอนต์ภาษาอังกฤษมี 2 รูปแบบดังนี้
1. Serif เป็นตัวอักษรที่มีเชิง
2. Sans Serif เป็นตัวอักษรที่ไม่มีเชิง/ฐาน

3. แบบความคิดสร้างสรรค์


ตัวหนังสือสมัยพ่อขุนรามคำแหง


ตัวหนังสือสมัยพ่อขุนรามคำแหง
ที่ค้นพบบนแผ่นศิราจารึกหลักที่ 1 ถูกค้นพบในสมัยรัชกาลที่ 3 โดยเจ้าฟ้ามงกุฎฯ(ต่อมาคือ พระบาทสมเด็จพระจอมเกล้าเจ้าอยู่หัว)เมื่อพ.ศ.2376

วันอังคารที่ 7 กันยายน พ.ศ. 2553

Logo




ร้าน SUWIT SWATCH SHOP


โลโก้ หรือสัญลักษณ์ ส่วนใหญ่เกิดจากการสร้างขึ้นโดยใช้รูปร่างรูปทรงพื้นฐานใช้การกำหนดสี ลักษณะผิว รวมทั้งการใช้องค์ประกอบต่าง ๆ เพื่อสื่อสารความหมายให้ตรงตามความต้องการ