เวปไซด์โครงการ

เวปโครงการ Kill iT




โทนสีที่เกี่ยวข้อง

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

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

4.2ลักาณะของตัวอักษร
Ms san serif, Arial,Geneva,Helvetica,Verdana/ ขนาด 14-20 ตัวหน้า เอียง กระพริบ

4.3จำนวนของกราฟฟิก
1 ภาพ 1 เสียง

4.4 ตำแหน่งในการวางภาพ

ซ้าย กลาง ขวา

4.5ขนาดของภาพ
JPEG/BITMAP/GIF/VECTOR

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

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

4.2ลักาณะของตัวอักษร
Ms san serif, Arial,Geneva,Helvetica,Verdana/ ขนาด 14-20 ตัวหน้า เอียง กระพริบ

4.3จำนวนของกราฟฟิก
1 ภาพ 1 เสียง

4.4 ตำแหน่งในการวางภาพ

ซ้าย กลาง ขวา

4.5ขนาดของภาพ
JPEG/BITMAP/GIF/VECTOR

หลักการใช้สีและการออกแบบเวปไซด์

3.1 จำนวนของสีหลัก
เลือกตาราง concept+mood tone= theme
3.2 การใช้สีพื้นหลัง
ภาพ,ลวดลาย,สี
3.3 โทนสีโดยรวม
โทนร้อน,โทนเย็น
3.4 สีกับหมวดหมู่

หน้าเวปไซด์

เวปไซด์แบบแนวตั้ง



ขนาดหน้าจอ 800x600

การจัดวางตำแหน่ง
1 ส่วนหัว : LOGO จะอยู่มุมซ้ายบนของเว็บไซต์
ชื่อเว็บไซต์จะอยู่ข้างใต้ของ LOGO เว็บ
มีระบบนำทาง(Navigator Bar)อยู่ด้านซ้ายของเว็บไซต์ เป็นลิ้งค์ไปหน้าต่างๆของเว็บไซต์

2 ส่วนเนื้อหา : แสดงเนื้อหาเกี่ยวกับเพลงที่มาใหม่ และ มิวสิควีดีโอ
ภาพประกอบจะเป็นหน้าปกอัลบั้มของศิลปิน

3.ส่วนท้าย : มีข่าวสารต่างๆของเว็บไซต์


เวปไซด์แบบแนวนอน



ขนาด 1024 * 768


การจัดวางตำแหน่ง


- ส่วนหัว
มีโลโก้ อยู่ด้านซ้ายบน
ด้านซ้ายล่างโลโก้มีเมนูเป็นตัวอักษร (Hyperlink)
ซ้ายบนเป็นชื่อเว็บไซต์ มีชื่อเว็บไซต์


- ส่วนกลาง
เป็นเนื้อหาของหน้าเว็บไซต์

จะเลื่อนไปทางซ้ายได้เพื่อดูเนื้อหาอื่นๆ



เวปไซด์แบบพอดีหน้าจอ



ขนาด 1024 * 768


การจัดวางตำแหน่ง

-ส่วนหัว
มีโลโก้อยู่ตรงกลางของเว็บไซต์

-ส่วนกลาง
เป็นภาพประกอบเว็บไซต์
-ส่วนล่าง
มีป้ายโฆษณา (Web Banner) อยู่กึ่งกลาง

Clip ภัยเงียบ

ภัยเงียบจากโลก Cyber

Color

องค์ประกอบของการออกแบบ เรื่องสี (Color Wile)
Hue หมายถึง เนื้อสีตัวสี น้ำหนังของสี
Saturation หมายถึง ดำปึ๊ด ขาววอก แดงแจ๋
Value หมายถึง น้ำหนักของสี-ค่าน้ำหนักของสี
Brightness ค่า มืดไปถึงสว่าง




สีต่างๆ จะเกิดขึ้นมาอีกมากมาย ด้วยการผสมของแม่สีซึ่งมีอยู่ด้วยกัน 3 สีคือ
1.น้ำเงิน ( PRUSSIAN BLUE )
2.แดง ( CRIMSON LEKE )
3.เหลือง ( GAMBOGE TINT )




Monochromatic ใช้สีเดียวสร้างความต่างระดับ




Triad ใช้สีทั้ง 3 สีที่ตรงกันข้าม สร้างสีสันให้มีชีวิตชีวา




Analoggous นำสีที่แมทกันมารวมกันช่วยสร้างความกลมกลืน




Complementary การใส้สีตรงกันข้าม ต้องมีความลดหลั่นของสี เช่น น้ำเงิน กับส้ม
อาจทำให้สีส้มดูจืดลงเพื่อให้สีน้ำเงินเด่นขึ้นมา อาจใช้สีขาวหรือดำเป็นตัว กั้นระหว่างสี




ตัวอย่างภาพ complementary




split-complement เป็นการผสมสีโทน ร้อนและโทนเย็นผสมกันและเลือก หนึ่งสีให้ดูเด่นขึ้น




ภาพตัวอย่างของ split complements

การใช้ตัอักษร

ออกแบบตัวอักษร Font Logo


การใช้ตัวอักษรและส่วนประกอบของตัวอักษร

ลักษณะการแบ่งออกเป็นช่องย่อยๆจำนวน 72 ช่องแต่ระยะ 1 นิ้ว

ระยะต่างๆในการออกแบบตัวอักษร


serif เป็น font ที่มีลักษณะทางการพัฒนามาจากรูปแบบตัวอักษรที่เขียนด้วยมือลักาณะเด่นอยู่ที่หาง (serif)


san serif พัฒนาจาก serif ให้มีการลดทอนตัดส่วน serif ออกจนดูทันสมัยเรียบง่าย

scritp ตัวอักษรลักษณะเหมือนเขียนด้วยมือ


display เป็นลักษณะที่ออกแบบมาเฉพาะให้ดูแปลกตา


ลักษณะของ font (type face)


รูปแบบอักษร


ตัวอย่างการออกแบบอักษร

กลุ่มเป้าหมาย

ภาพที่สื่อถึงแนวความคิด ผจญภัย ต่อสู้ รุนแรงนิด







ภาพที่สื่อถึงอารมณ์และความรู้สึก สนุก เพลิดเพลิน และ เข้มแข็ง

การออกแบบสื่อประสม

ชื่อโครงการ KILL iT(RPG)
กลุ่มเป้าหมาย กลุ่มเด็กวัยรุ่นตั้งแต่อายุ 17-20 เพศหญิงและชาย รักการผจญภัย และชอบจินตนาการ
แนวความคิด ผจญภัยมันส์…หยดติ๋ง
อารมณ์และความรู้สึก มีนิสัยล้นๆอยู่ตลอดเวลา ตื่นเต้น รุนแรงนิดๆ

การออกแบบสื่อประสม

แนะนำตัว

ชื่อ นายนิติเนตร พิมพ์ทอง ชื่อเล่นเนตร
ปัจจุบันอยู่ที่ สาธุประดิษฐ์ งานอดิเรกชอบเลี้ยงสัตว์