WebsitE II *~

วันพฤหัสบดีที่ 30 กันยายน พ.ศ. 2553

หน้าเว็บ http://grizz-grakk.com/

หลักการใช้สีสำหรับการออกแบบเว็บไซต์

3. หลักการใช้สีสำหรับการออกแบบเว็บไซต์
3.1 จำนวนของสีหลัก = เลือกตาม Concept+Tone
3.2 การใช้สีพื้นหลัง = ภาพ,ลวดลาย,สี ต้องเชื่อมโยงกับตัวอักษร ถ้าตัวอักษรเข้มพื้นหลังจะอ่อน
3.3 โทนสีโดยรวม = จะมีโทนร้อน และ โทนเย็น
3.4 สีกับหมวดหมู่
4.การใช้ตัวอักษรและภาพกราฟฟิก
4.1 สีของตัวอักษร = อักษร พื้นเข้ม อ่อน/กลาง กลาง เข้ม/อ่อน อ่อน เข้ม/กลาง
4.2 ลักษณะของตัวอักษร = AgaraDull , Snap ITC / ขนาด 20 - 75 หนา
4.3 จำนวนของกราฟริก = 1 ภาพ 1 เสียง
4.4 ตำแหน่งในการวางภาพ = ซ้าย กลาง ขวา
4.5 ขนาดภาพ = Jpeg/bitmap , Gif/vector 5.การใช้สื่อประสม สำหรับออกแบบเว็บไซต์
5.1 การใช้ภาพเคลื่อนไหว = Logo animated,interactive,web (Flash)
5.2 การใช้วิดีโอคลิป = Flash , window Media,plug - in
5.3 การใช้เสียง = on - off

WebsitE*~

วันพฤหัสบดีที่ 23 กันยายน พ.ศ. 2553
โครงสร้างwebแนวนอน-แนวตั้ง-พอดีจอลักษณะเป็นแบบ แนวตั้งขนาดของหน้าเว็บ 800x600 px
การจัดวางตำแหน่ง

ส่วนหัว : LOGO , ชื่อเว็บ , แถบเมนู , ค้นหา , ข้อมูลผู้ใช้

ส่วนกลาง : ตัวอักษร , ภาพ , ข้อความ

ส่วนท้าย : ข้อตกลงการใช้บริการ , ติดต่อเว็บไซต์ , แจ้งปัญหาการใช้งาน , ติดต่อโฆษณา

ตำแหน่งของเมนู : ส่วนเชื่อมโยง บนสุด , ล่างสุด

ลักษณะของเมนู : รูปแบบ ตัวอักษร

การแบ่งหมวดหมู่ : Hot Topic , Album Vote , Video , PicPost , เช็ครอบหนัง ภาพยนตร์ , เรื่องย่อละครดัง , ข่าวบันเทิง , Woman , Men , บอกเล่าเก้าสิบ , หาเพื่อน

ลักษณะเป็นแบบแนวนอนขนาดของหน้าเว็บ ยาวมาก การจัดวางตำแหน่ง

ส่วนหัว : แถบเมนู , แบคกราวภาพ

ส่วนกลาง : ตัวอักษร , ภาพ , ข้อความ

ส่วนท้าย : Myspace , Youtube , Forum

ตำแหน่งของเมนู : ส่วนเชื่อมโยง ด้านซ้าย , ล่าง

ลักษณะของเมนู : รูปแบบ ตัวอักษร

การแบ่งหมวดหมู่ : News , Biography , Discography , Music , Video , Photos , Link , Forum , Contract

!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*

ลักษณะเป็นแบบพอดีจอขนาดของหน้าเว็บ 1024x768 px
การจัดวางตำแหน่ง

ส่วนหัว : LOGO , ชื่อเว็บ , แถบเมนู

ส่วนกลาง : ภาพ

ส่วนท้าย : Quick Links

ตำแหน่งของเมนู : ส่วนเชื่อมโยง บน , ขวา

ลักษณะของเมนู : รูปแบบ ตัวอักษร

การแบ่งหมวดหมู่ : News , Biography , Discography , Music , Video , Photos , Link , Forum , Contract

!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*

!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*!~*

"LoGO"

"การใช้ตัวอักษร 2"

โทนสีที่จะใช้ทำตัวอักษร มาจากเวบ http://www.colorblender.com/

(1 สี)

(2 สี)

(3 สี)

(4 สี)

"TyPoGraPhY"

 วันพฤหัสบดี ที่ 2 กันยายน 2553

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

+ความหมาย
"Typography" การใช้ตัวอักษรหรือการจัดวางตัวอักษร
"Font(Typefaces)"ชุดรูปแบบของตัวอักษร
"Font Families" ตระกูลของรูปแบบตัวอักษร เช่น ตัวหนา ตัวเอียง
+ส่วนประกอบ
-เชิง
+ขนาด แบบอักษรที่แตกต่างกันมีขนาดpointเท่ากัน ไม่จำเป็นต้องสูงเท่ากัน
+ประเภท
-sans serif ไม่มีเชิง
-serif มีเชิง
-script,hand-letter ลายมือเขียน
-monospace เป็นช่องๆเท่าๆกัน
-novelty แนวตกแต่ง
-dingbat,ornament สัญลักษณ์
+การจัดตำแหน่ง ชิดซ้าย ชิดขวา กลาง กระจายตัว
+การผสมตัวอักษร
-ตัวอักษรไม่มีขาตัวหนาผสมกับตัวอักษรมีขาตัวบาง ทั้งสองแบบแตกต่างกันด้วยน้ำหนักและขนาด ทำให้เกิดความโดดเด่นได้ง่าย
-ตัวอักษรมีขาตัวหนาผสมกับตัวอักษรไม่มีขาตัวบาง ผสมอักษรแบบนี้ทำให้เกิดจุดเด่นของสัญลักษณ์อักษรได้
-ตัวอักษรไม่มีขาผสมกับตัวอักษรมีขา การผสมอักษรแบบนี้ไม่มีจุดเด่นเนื่องจากตัวอักษรทั้งสองแบบ ไม่มีความแตกต่างกันด้วยน้ำหนัก
+การปรับระยะห่าง

typo*

"EleMeNt Of DeSiGn"

วันพฤหัสบดีที่ 9 กันยายน พ.ศ. 2553

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

ภาพแสดงวงจรของสีที่เกิดจากการนำแม่สีมาผสมกันการเกิดสีดังภาพ เกิดจากการนำเอาแม่สีมาผสมกัน ในอัตราส่วนต่างๆกันซึ่งพอสรุปได้ดังนี้

สีขั้นที่1 (สีขั้นต้นหือแม่สี)(Primary Color) ประกอบด้วย สี แดง สีเหลือง และสีน้ำเงิน 

 

 

 

ขั้นที่ 2 (Binary Color) เกิดจากการนำเอาสีขั้นที่ 1 (แม่สี ) มาผสมในอัตราส่วนเท่าๆกันประกอบด้วยสี เขียว สีส้ม และสีม่วง•สีเขียว เกิดจากการนำเอา สีเหลือง กับ สีน้ำเงิน มาผสมกันในอัตราส่วนเท่าๆกัน •สีส้ม เกิดจากการนำเอา สีเหลือง กับ สีแดง มาผสมกันในอัตราส่วนที่เท่าๆกัน •สีม่วง เกิดจากการนำเอา สีน้ำเงิน กับ สีแดง มาผสมกันในอัตราส่วนที่เท่าๆกัน
  ขั้นที่ 2 (Binary Color) เกิดจากการนำเอาสีขั้นที่ 1 (แม่สี ) มาผสมในอัตราส่วนเท่าๆกันประกอบด้วยสี เขียว สีส้ม และสีม่วง•สีเขียว เกิดจากการนำเอา สีเหลือง กับ สีน้ำเงิน มาผสมกันในอัตราส่วนเท่าๆกัน •สีส้ม เกิดจากการนำเอา สีเหลือง กับ สีแดง มาผสมกันในอัตราส่วนที่เท่าๆกัน •สีม่วง เกิดจากการนำเอา สีน้ำเงิน กับ สีแดง มาผสมกันในอัตราส่วนที่เท่าๆกัน
 ขั้นที่ 3 (Intermediate Color) เกิดจากการนำเอาสีขั้นที่ 2 ผสมกับสีขั้นต้นที่อยู่ใกล้เคียงกันได้สีแตกต่างออกไปได้แก่ สีเหลืองแกมเขียว สีน้ำเงินแกมม่วง สีแดงแกมม่วง สีแดงแกมส้ม สีเหลืองแกมส้ม และสีน้ำเงินแกมเขียว• สีเหลืองแกมเขียว เกิดจาก การผสมกันระหว่างสีเหลืองกับสีเขียวอย่างละเท่าๆกัน • สีน้ำเงินแกมม่วง เกิดจากการผสมกันระหว่างสีน้ำเงินกับสีม่วงอย่างละเท่าๆกัน • สีแดงแกมม่วง เกิดจากการผสมกันระหว่างสีแดงกับสีม่วงอย่างละเท่าๆกัน • สีแดงแกมส้ม เกิดจากการผสมกันระหว่างสีแดงกับสีส้มอย่างละเท่าๆกัน • สีเหลืองแกมส้ม เกิดจากการผสมกันระหว่างสีเหลืองกับสีส้มอย่างละเท่าๆกัน • สีน้ำเงินแกมเขียวเกิดจากการผสมกันระหว่างสีน้ำเงินกับสีเขียวอย่างละเท่าๆกัน จากการที่เรามองเห็นสีของสารต่าง ๆ นี่เองจึงค้นพบว่ามีสีอยู่ 3 สี ที่เป็นต้นกำเนิดของสีือื่น ๆ ที่ไม่สามารถสร้างหรือผสมให้เกิดจากสีอื่นได้ หรือที่เรียกกันว่า " แม่สี " ได้แก่ แดง,เหลือง,น้ำเงิน

"Saturation"

เป็นเรื่องของความเข้มข้นและความจางของสี Saturation คือสัดส่วนของสี Hue ที่มีอยู่ในสีเทา วัดค่าเป็น % ดังนี้ คือจาก 0% (สีเทา) จนถึง 100% (full saturation สีที่มีความอิ่มตัวเต็มที่)

"Value" น้ำหนักสี หมายถึง น้ำหนักอ่อนแก่เฉพาะตัวของสี อาจจะ ใกล้เคียงกัน เหมือนกัน หรือ ต่างกัน น้ำหนักอ่อนแก่เฉพาะตัวนี้เรียกว่า น้ำหนักปกติ (normal) โดยเปรียบเทียบกับน้ำหนัก ขาว–ดำ

RGB & CMYK

RGB และ CMYK ก็คือระบบการแทนค่าสีที่ใช้ในงานกราฟิก แบ่งเป็น 2 โหมด คือ RGB และ CMYK ซึ่งเหมาะกับงานคนละประเภทกัน RGB มีแนวคิดมาจากการผสมแสงสีหลัก 3 สีเข้าด้วยกัน คือ แดง (RED) เขียว (GREEN) และน้ำเงิน (BLUE) ซึ่งเมื่อผสมกันจะทำให้เกิดสีจำนวนมากและเมื่อนำมารวมกันที่ความเข้มสูงสุด จะได้สีขาว ส่วนใหญ่การใช้สีลักษณะนี้จะใช้ในอุปกรณ์ที่เกี่ยวกับแสง เช่นจอภาพ กล้องดิจิตอล เป็นต้น

CMYK มีแนวคิดมาจากระบบการพิมพ์ โดยภาพจะถูกแยกออกเป็นแม่พิมพ์ของสีหลักเพียง 4 สี คือ ฟ้า (CYAN) ม่วงแดง (MAGENTA) เหลือง
(YELLOW) ดำ (BLACK) ซึ่งเมื่อนำมารวมกันแล้วจะได้สีดำ

การแต่งตัวหลักการเลือกสี (Color Combination)

1. Monochromaticคือการใช้สีเดียว เพื่อสร้างความแตกต่าง ด้วยระดับความมืด-สว่างของสี

2. Triadsคือการใช้สี 3 สีที่อยู่ตรงข้ามกัน ควรทดลองใช้หลายรูปแบบ เพื่อสร้างความแตกต่าง

3. Analogousคือการใช้สีที่อยู๋ติดกันใกล้เคียงกัน โดยเลือกจากสีที่อยู๋ถัดไป 2-3 สีสามารถสร้างความกลมกลืนได้ดี

4. Complementaryคือการใช้สีตรงข้ามกัน สามารถช่วยเน้นความโดดเด่นได้ดี การใช้สีดำหรือเทา เพื่อลดความรุนแรงของสี นอกจากนั้นการใช้สี 2 สีที่แตกต่างกันมาก จะทำให้มีความสำคัญเท่ากันดังนั้นจึงควรลดความเข้มของสีหนึ่งลง

5. Split-Complementsคือการใช้สีผสม เป็นการผสมผสานระหว่างสีโทนร้อนและเย็น โดยเริ่มจากการเลือกสีใดสีหนึ่งและจับคู่กับอีก 2 สี ในโทนสีตรงข้ามกั

Video Clip*~

....