เส้น Gruid

โครงสร้างWEB แนวนอน

โครงสร้างแนวนอน





ขนาดของเว็บ 024 x 768
การจัดวางโลโก้ ด้านบนตรงกลางและแถบเมนูกับรูปภาพอยู่ตรงกลาง
ส่วนหัว www.lucuma.com.ar
ส่วนกลาง แถบเครื่องมือและรูปภาพ
ส่วนท้าย เป็นลิ้งค์ Design ของWebsit
ตำแหน่งข้อมูล อยู่ตรงกลาง
ลักษณะเมนู เป็นภาษาอังกฤษและภาษาอื่นๆ
ตำแหน่งหมวดหมู่ Video Clip

การใช้ตัวอักษรแนวแนว

การใช้ตัวอักษรแนวแนว

การใช้ตัวอักษร
Typo*+ ความหมาย "TYPOGRAPHY"
การใช้ตัวอักษรหรือการจัดวางตัวอักษร

"FONT (TYPEFACES) "
ชุดรูปแบบของตัวอักษร

"FONT FAMILIES"
ตระกูลของชุดแบบตัวอักษร เช่น ตัวธรรมดา ตัวหนา ตัวเอียง ฯลฯ

Typo* + ส่วนประกอบ

Typo* + ขนาด

Typo* ประเภท
+ Sans Serif (ไม่มีเชิง)
+ Serif (มีเชิง)
+ Script (ลายมือ)
+ Monospace (เป็นบล็อค , เป็นช่องๆ)
+ Novelty (แฟชั่น , ตกแต่ง , ประดับ)
+ Dingbat , Ornament (รูปสัญลักษณ์)

Typo* + การจัดตำแหน่ง

Typo* + การผสมอักษร

1. ตัวอักษรไม่มีขาตัวหนาผสมกับตัวอักษรมีขาตัวบาง ตัวอักษรทั้งสองแบบ มีความแตกต่างด้วยน้ำหนักและขนาด ทำให้เกิดความโดดเด่นได้ง่าย
2. ตัวอักษรมีขาตัวหนาผสมกับตัวอักษรไม่มีขาตัวบาง การผสมอักษรแบบนี้ทำให้เกิดจุดเด่นของสัญลักษณ์อักษรได้ง่าย
3. ตัว อักษรไม่มีขาผสมกับตัวอักษรมีขา การผสมอักษรแบบนี้ไม่มีจุดเด่น เนื่องจากตัวอักษรทั้งสองแบบไม่มีความแตกต่างกันด้วยน้ำหนัก // ไม่ควรใช้ !
4. ความแตกต่างอย่างชัดเจนของตัวอักษรแบบนี้ เหมาะสำหรับงานที่มีการพัฒนาแนวความคิด
5. เช่นเดียวกัน การผสมอักษรสามารถสร้างความแตกต่างได้อย่างหลากหลาย

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

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

1.สีของตัวอักษร
เข้ม พื้น อ่อน/กลางกลาง ,พื้น เข้ม/อ่อนอ่อน ,พื้น เข้ม/กลาง

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

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

4.ต่ำแหน่งในการวางภาพ
ควรจะอยู่ด้านซ้าย ขวา หรือกลาง ขึ้นอยู่กับเนื้อหาของเรา

5.ขนาดของภาพ
ควรจะคำนึงถึงการโหลดภาพของภาพ
ขนาดภาพควรไม่เกิน150k
ไฟล์ที่ใช้ JPEG , GIF

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

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

6.2โทนสีโดยรวม
โทนร้อน โทนเย็น แบ่งเป็นเปอร์เซ็น

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

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

7.1การใช้วีดีโอคลิป
อยู่ที่ความเร็วอินเตอร์เน็ตด้วย คิดว่ากลุ่มคนที่ดูเว็ปเราการโหลดเร็วแค่ไหน

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

LOGO AND FONT

LOGO

แบบสีที่ใช้















รูปแบบ Font ทั้ง 4 สี

Baby Doll Font

ภาพสื่อโครงการมัลติมีเดีย

MultiMedia Desing @IT Siam University

ชื่อโครงการ The Sims 3
____________________________________________________________________

ข้อมูลและลักษณะโครงการ

• เป็น เกมส์ที่นำมาจากชีวิตจริงแล้วมาจำลองเป็นเกมส์สร้างครอบครัวในจินตนาการของ เราเอง เกมส์ The Sims 3 นี้ ทำให้ผู้เล่นมีความเพลิดเพลินสนุกสนานพร้อมทั้งให้ประโยชน์ในด้านความคิด สร้างสรรค์อีกด้วย

________________________________________
ปัญหา

• บุคลที่เล่นเกมส์ The Sims 3 มีสื่อออนไลน์ ไม่มากนัก บางคนไปเล่นเกมส์ประเภท Online ใหม่ ๆ ไม่ค่อยมาสนใจในเกมส์ประเภท Offline ทำให้เกมส์ไม่มีการออกแบบใหม่ เล่นแต่ของเดิมๆ ที่เกมส์นำมาให้ ไม่มีการ Dowload สิ่งของใหม่ ๆ มาเพิ่มเติมเลย

________________________________________
จุดมุ่งหมาย

• เพื่อ สร้างชุมชนเครือข่ายออนไลน์ในการแลกเปลี่ยนความคิดสร้างสรรค์ในการออกแบบตัว ละคร หรือสิ่งต่าง ๆ ให้ทันสัมยขึ้น โดยที่ไม่ต้องลอกเลียนแบบใคร

______________________ __ _____________________
กลุ่มเป้าหมาย

• ด้านกายภาพ คือ ทุกเพศ ทุกวัย สถานภาพ ทุกสถานภาพ
• ด้านจิตภาพ คือ พฤติกรรมของบุคคลจะเพลิดเพลินและสนุกสนาน มีความคิดเป็นของตนเอง

________________________________________________
แนวความคิด (Concept)

• สร้างบ้าน สร้างเมือง เพียงแค่ Click เดียว

________________________________________
รูปแบบและการนำเสนอ

• เราจะนำเสนอรูปแบบของเวปไซต์เป็นหน้าเวป

________________________________________________________
จำนวนและปริมาณงาน

• ใช้Web Site 1 Web คือ www.thaithesims3.com
• Web Link 5 Link คือ www.simsworld.info, www.simswonderland.net, www.simslovelygang.com, www.ilovesims.co.cc, www.sims3mix.unbbz.com
  

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

สื่ออารมณ์และความรู้สึกของงาน (Mood and Tone)

คุณคิดว่าสื่อมัลติมีเดียอะไร มีอิทธิพลต่อตัวคุณมากที่สุด

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

เกมส์ เพราะว่าเล่นแทบทุกวัน แล้วทุกครั้งที่เปิดคอมจะออน MSN ไว้ด้วยไว้คุยงาน คุยเรื่อยเปลื่อย และเปิดเพลงฟังไปด้วย
เกมส์ ที่เล่นส่วนมากจะเป็นเกมออฟไลน์ เช่น สร้างเมือง ฟุตบอลป่าเถื่อน เกมที่เล่นตอนนี้ก็มี THESIMS3,Urban Soccer เวลาในการเล่น1ชั่วโมงขึ้นไป แบบบ้าๆก็ทั้งวันแต่ใช่จะอยู่แต่หน้าจอคอมตลอด บางทีก็เปิดบอรด์หาของดาวน์โหลดเพื่อจะที่ใช้เล่นในเกมส์(โหลดเพลงฟัง) แต่ที่ชอบสนทนาก็เปิดHi5,facebookประมาณ1ชั่วโมงอาจจะว่าติดคอมพิวเตอร์ก็ว่าน่าจะใช่ แต่ก็ไม่ถึงขาดและกระสับกระส่ายไม่ได้ลงแดง จริงๆแล้วที่เล่นเกมส์ คุยแชต ก็ใช่ว่าจะไม่มีข้อดี ได้ความสามัคคี ได้พบเพื่อนใหม่ๆ โดยส่วนตัวก็ไม่ค่อยออกไปไหน เพราะไม่รู้จะไปไหนนั่นเอง

ภาพตัวอย่างเกมส์ที่เล่นอยู่

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

โครงสร้างWEBแนวตั้ง

-โครงสร้างแนวตั้ง

2.ขนาดหน้าเว็บ

3.การจัดวางตำแหน่งโลโก้/เนื้อหา

(1)ส่วนหัว

- http://www.thaithesims3.com/

- โปรแกรม Log IN

- หน้าแรก, เว็บบอร์ด,ดาวน์โหลด,เว็บเพื่อนบ้าน,สมาชิก

(2)ส่วนเนื้อหา

-รูปภาพ,วีดีโอ

- ตัวอักษร

(3)ส่วนท้าย

-กฎการใช้บอร์ด

- แจ้งปัญหา

-ห้องโชว์ผลงาน

-ห้องนอกเรื่อง

(4)ตำแหน่งของเมนู

-ส่วนเชื่อมโยงอยู่บนสุดด้านขวา

(5)ลักษณะของเมนู

-ตัวอักษร

-ภาพนิ่ง

-ภาพเคลื่อนไหว

-Roll - Over

(6)การแบ่งหมวดหมู่

-ห้องรวม

-ห้องพูดคุยเรื่องซิมส์

-ห้องเทคนิคการเล่น

-ห้องประกาศข่าว

-ห้องโชว์ผลงาน

-ห้องละครซิมส์

-ห้องกิจกรรม

-ห้องนอกเรื่อง

-แจ้งปัญหา

-กฎการใช้บอร์ด

องค์ประกอบของการออกแบบ

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

ก่อนอื่นเรามารู้จักองค์ประกอบของสีกันก่อน
องค์ประกอบของสีในงานออกแบบนั้น มีคุณสมบัติอยู่ 3 ประการคือ
1. สี,เนี้อสี (Hue)
2. น้ำหนักสี (Value / Brightness)
3. ความสดของสี (Intensity / Saturation)

สี, เนื้อสี

เนื้อสี หรือ Hue คือความแตกต่างของสีบริสุทธิ์แต่ละสี ซึ่งเราจะเรียกเป็นชื่อสี เช่น สีแดง
สีน้ำตาล สีม่วง เป็นต้น โดยแบ่งเนื้อสีออกเป็น 2 ชนิด

ระบบสี RGB

RGB ย่อมาจาก red, green และ blue คือ กระบวนการผสมสีจากแม่สี 3 สี คือสีแดง สีเขียว และสีน้ำเงิน การใช้สัดส่วนของสี 3 สีนี้ต่างกัน จะทำให้เกิดสีต่างๆ ได้อีกมากมาย

ระบบสี RGB เป็นระบบสีที่เกิดจากการรวมกันของแสงสีแดง เขียว และน้ำเงินโดยมีการรวมกันแบบ Additive ซึ่งโดยปกติจะนำไปใช้ในจอภาพแบบ CRT (Cathode ray tube) ในการใช้งานระบบสี RGB ยังมีการสร้างมาตรฐานที่แตกต่างกันออกไปที่นิยมใช้งานได้แต่ RGBCIE และ RGBNTSC

การผสมสี

จริง ๆแล้วสีต่าง ๆ ที่เรามองเห็นเกิดจากการผสมสีใน 2 รูปแบบ คือ

การผสมสีแบบบวก (Additive Color Mixing)

เป็นการผสมสีของ "แสง" ซึ่งอาจเข้าใจยากสักหน่อย เพราะแตกต่าง จากความคุ้นเคยที่เราเคยรู้
กันมา แสงสีขาวที่เห็นทั่วไปนั่นประกอบดวยแสงที่มีความยาวคลื่น ต่าง ๆ กันซ้อนทับรวมตัวกันเกิด
เป็นสีสันต่าง ๆ จึงเรียกว่า "สีแบบบวก" โดยมีแม่สีพื้นฐานคือ สีแดง สีเขียว และสีน้ำเงิน (Red
Green and Blue) เมื่อสามสีนี้ผสมกันจะได้สีขาว (สังเกต ว่าจะต่างจากที่เคยเรียนมาตอนเด็ก ๆ
ที่มีแม่สีคือ สีแดง เหลือง น้ำเงิน ผสมกันได้สีดำ) หลักการนี้นำไปใช้กับการมองเห็นสีที่เกิดจาก
การผสมกันของแสง เช่น จอมอนิเตอร์ จอโทรทัศน์ ที่เรียกว่า RGB Mode

การผสมสีแบบลบ (Subtractive Color Mixing)

เป็นสีที่เกิดจากการดูดกลืนแสงสะท้อนจากวัตถุ คือเมื่อมีลำแสงสีขาวตกกระทบวัตถุสีต่าง ๆคลื่นแสง
บางส่วนจะถูกดูดกลืนไว้ และสะท้อนเพียงบางสีออกมา จึงเป็นที่มาของชื่อ "สีแบบลบ" มีแม่สีคือ
สีฟ้าแกมเขีว (Cyan) สีม่วงแดง (Magenta) และสีเหลือง (Yellow) เมื่อสามสีผสมกันจะเป็นสีดำ
เพราะแสงถูกดูดกลืนไว้หมด ไม่สีแสงสะท้อนมาเข้าตา จึงไม่เกิดสีอะ ตาจึงเห็นเป็นสึดำ หลักการนี้
ได้นำไปใช้กับการผสมสี เพื่อใช้ในการพิมพ์ โดยใช้แม่สี แต่เพิ่มสีดำขึ้นมาอีกสีหนึ่งผสมกันเป็นโทน
ต่าง ๆ ด้วยใช้เม็ดสกรีน ทำให้ได้ภาพสีสันสมจริง ดังนั้น หากต้องทำงานเกี่ยวกับสิ่งพิมพ์ ต้องเตรียม
ภาพด้วยระบบสีนี้ ในโปรแกรมเรียกว่า CMYK Mode

วงจรสี Colour Wheel

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

1. แรกเริ่มเดมที่เรามี 3 สีเป็นต้นกำเนิด คือแม่สี
หรือ สีปฐมภูมิ Primary Colours

2. สีที่ได้จากการผสมแม่สีทั้ง 3 เข้าด้วยกัน เรียกว่า สึขั้นที่ 2
หรือ สีทุติยภูมิ Secondary Colours

3. สีที่ได้จากการผสมแม่สี และสีขั้นที่ 2 ออกมากลายเป็นสีขั้นที่ 3
หรือ สีตติยภูติ Tertiary Colours

ประวัติส่วนตัว

ประวัติส่วนตัว

ชื่อ นางสาว กมลทิพย์ นามสกุล รอดสวัสดิ์

รหัสนักศึกษา 5202100058 คณะ IT 2 ปี ต่อเนื่อง
วัน/เดือน/ปีเกิด 11/06 /2530
เกิดจังหวัด กรุงเทพมหนาคร
สีที่ชอบ ชมพู, ดำ
งานอดิเรก ฟังเพลง, เล่น Computer
คติประจำใจ เรียนเป็นเรียน เล่นเป็นเล่น

รูปแบบการนำเสนองานมัติมีเดีย

รูปแบบด้านความบันเทิงแแบบอิสระ

การออกแบบมัลติมีเดีย

MultiMediaDESIGN Brief*
____________________________________________________

MultiMedia Desing @IT Siam University

ชื่อโครงการ The Sims 3
____________________________________________________________________

ข้อมูลและลักษณะโครงการ

• เป็นเกมส์ที่นำมาจากชีวิตจริงแล้วมาจำลองเป็นเกมส์สร้างครอบครัวในจินตนาการของเราเอง เกมส์ The Sims 3 นี้ ทำให้ผู้เล่นมีความเพลิดเพลินสนุกสนานพร้อมทั้งให้ประโยชน์ในด้านความคิดสร้างสรรค์อีกด้วย

________________________________________
ปัญหา

• บุคลที่เล่นเกมส์ The Sims 3 มีสื่อออนไลน์ ไม่มากนัก บางคนไปเล่นเกมส์ประเภท Online ใหม่ ๆ ไม่ค่อยมาสนใจในเกมส์ประเภท Offline ทำให้เกมส์ไม่มีการออกแบบใหม่ เล่นแต่ของเดิมๆ ที่เกมส์นำมาให้ ไม่มีการ Dowload สิ่งของใหม่ ๆ มาเพิ่มเติมเลย

________________________________________
จุดมุ่งหมาย

• เพื่อสร้างชุมชนเครือข่ายออนไลน์ในการแลกเปลี่ยนความคิดสร้างสรรค์ในการออกแบบตัวละคร หรือสิ่งต่าง ๆ ให้ทันสัมยขึ้น โดยที่ไม่ต้องลอกเลียนแบบใคร

______________________ __ _____________________
กลุ่มเป้าหมาย

• ด้านกายภาพ คือ ระบุเพศหญิง อายุตั้งแต่ 12 - 22 สถานภาพ ทุกสถานภาพ
• ด้านจิตภาพ คือ พฤติกรรมของบุคคลจะเพลิดเพลินและสนุกสนาน มีความคิดเป็นของตนเอง

________________________________________________
แนวความคิด (Concept)

• สร้างบ้าน สร้างเมือง เพียงแค่ Click เดียว

________________________________________
รูปแบบและการนำเสนอ

• เราจะนำเสนอรูปแบบของเวปไซต์เป็นหน้าเวป

________________________________________________________
จำนวนและปริมาณงาน

• ใช้Web Site 1 Web คือ www.thaithesims3.com
• Web Link 5 Link คือ www.simsworld.info, www.simswonderland.net, www.simslovelygang.com, www.ilovesims.co.cc, www.sims3mix.unbbz.com
  

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

สื่ออารมณ์และความรู้สึกของงาน (Mood and Tone)
- สนุก
-สยองขวัญ
-สดชื่น