การสร้างโลโก้ ด้วยตัวเอง

การสร้างโลโก้ ด้วยตัวเอง

เป็นการสร้างโลโก้ได้ด้วยตัวท่านเอง โดยมีขั้นตอนดังนี้ 1. ให้ท่านคลิกเข้าที่เว็บ http://cooltext.com/ และทำตามขั้นตอนดังรูปได้เลยค่ะ ท่านสามารถเลือกรูปแบบโลโก้ได้ตามที่ต้องการ เมื่อเลือกได้แล้วคลิกที่รูปได้เลย 2. หลังจากได้รูปแบบที่ต้องการแล้ว ท่านสามารถทำการแก้ไขข้อมูลได้เลยค่ะ  ตามตัวอย่างในรูปภาพค่ะ 3. เมื่อท่านคลิก Render Logo Design แล้ว จะปรากฎรูปโลโก้ที่ท่านได้ทำการแก้ไข หลังจากนั้นคลิก Download Image แล้วทำการ Save ไว้ที่เครื่อง

เทคนิคการทำพื้นหลังแบบ 3 มิติ

เทคนิคการทำพื้นหลังแบบ 3 มิติ
วันนี้ทางทีมงาน O-Web Design มีเทคนิคการทำภาพพื้นหลัง 3 มิติ อย่างง่ายมาฝากคะ โดยท่านสมาชิกสามารถนำไปประยุกต์ใช้กับเว็บไซต์ของท่านได้ค่ะ

1. สร้างเอกสารใหม่ขึ้นมาขนาดประมาณ 500 x 500 pixels (สามารถปรับขนาดได้ตามต้องการค่ะ)

2. จากนั้นให้เลือกเครื่องมือ  Gradient Tool และตั้งค่าสี gradient ตามรูปตัวอย่าง (ถ้าไม่ชอบสีในตัวอย่าง ก็สามารถปรับได้ตามชอบเลยคะ) เมื่อตั้งค่าสีเรียบร้อยแล้ว ให้ทำการไล่สีจากด้านบนลงด้านล่าง ดังรูปตัวอย่างคะ

3. เมื่อทำการไล่สีเรียบร้อยแล้วให้ไปที่เมนู Filter -->Stylize --> Extrude... และปรับค่าดังนี้

Type = Blocks
Size = 20 Pixels
Depth = 30, Random

ู

เพียงเท่านี้เราก็จะได้พื้นหลัง แบบ 3 มิติ แบบเก๋ ๆ เอาไว้ตกแต่งเว็บไซ์ให้สวยงามแล้วคะ

ผลลัพธ์

เทคนิคการทำฟองอากาศ

เทคนิคการทำฟองอากาศ

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

1. สร้าง เอกสารใหม่ขึ้นมา 1 ชิ้น ขนาด 300x300 pixels โดยไปที่เมนู File ---> New

2. เลือกสี Foreground = #AAAAAA และสี Background = #FFFFFF จากนั้นใช้เครื่องมือ Paint Bucket Tool  หรือกด Alt+Delete เพื่อเทสี Foreground ลงไป

3. จากนั้นไปที่เมนู Filter ---> Render ---> Lens Flare... แล้วเลือก Lens Type = 50-300 mm Zoom

4. ไปที่เมนู Filter ---> Distort ---> Polar Coordinates... แล้วเลือก Polar to Rectangular

5. เมื่อทำตามขั้นตอนที่ 4 เรียบร้อยแล้ว ให้ Double Click ที่เลเยอร์ Background เพื่อให้เราสามารถแก้ไขเลเยอร์นั้นได้

6. จากนั้นให้เราไปที่แถบเมนูด้านบน เลือก Edit ---> Transform ---> Flip Virtical ก็จะได้รูปนี้

7. ไปที่เมนู Filter ---> Distort ---> Polar Coordinates เลือก Rectangular to Polar ก็จะได้ดังรูป

8. เมื่อได้รูปฟองอากาศแล้ว ให้ใช้เครื่องมือ Elliptical Marquee Tool  โดยกด Shift ค้างไว้ด้วยขณะทำวงกลม (ถ้าขนาด selection ไม่พอดี ให้ไปที่เมนู Select --> Transform Selection เพื่อปรับขนาด Selection ของวงกลมอีกครั้ง) จะได้ผลลัพธ์ดังรูป

9. เมื่อได้เส้น Selection ตามต้องการแล้ว ให้ไปที่เมนู Select ---> Inverse แล้วกด Delect ส่วนที่ไม่ต้องการออก เพียงเท่านี้จะได้ฟองอากาศสำหรับนำไปใช้งานแล้วค่ะ

10. เมื่อได้ฟองอากาศแล้ว จากนี้ไปจะเป็นขั้นตอนแนะนำการใช้งานค่ะ ขั้นแรกให้เลือกรูปที่ต้องการจะตกแต่งก่อน โดยไปที่เมนู File ---> Open

11. เมื่อทำการเลือกรูปภาพแล้ว ให้เลือกใช้เครื่องมือ Move Tool  จากนั้นให้คลิกเมาส์ซ้ายค้าง ที่รูปฟองอากาศ แล้วลากมาวางในรูป ที่เราเลือกเอาไว้

12. เมื่อลากรูปฟองอากาศมาวางในรูปที่ต้องการแล้ว ให้ทำการปรับขนาดและจัดวางในตำแหน่งที่ต้องการ การปรับขนาดสามารถทำได้ โดยไปที่เมนู Edit ---> Free Transform หรือ Ctrl + T

13. จากนั้นเราสามารถปรับให้ฟองอากาศของเรานั้น ให้ใสได้โดย ปรับค่า Opacity = 75% (สามารถปรับ ค่าได้ตามต้องการ) และให้ทำการปรับสีได้โดย กด Ctrl + U จากนั้นทำการปรับสีตามต้องการ เมื่อได้สีที่ต้องการแล้วให้กด OK เพียงเท่านี้ก็สามารถทำรูปภาพธรรมดาให้ดูแปลกตาขึ้นได้คะ

ผลลัพธ์

Lecture-บทที่8

บทที่8 เลือกใช้สีสำหรับเว็บไซต์

สีสันเป็นสิ่งสำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากเป็นสิ่งแรกที่ผู้ใช้มองเห็น

       - การใช้สีพื้นใกล้เคียงกับตัวอักษร บางครั้งลำบากในการอ่าน

       - การใช้สีมากเกินอาจสร้างความสับสนให้ผู้อ่านได้

       - การใช้สีที่กลมกลืน ช่วยให้น่าดูมากยิ่งขึ้น

ประโยชน์ของสีในเว็บไซต์

       - ชักนำสายตาทุกบริเวณในหน้าเว็บ

       - เชื่อมโยงบริเวณที่ไดรับการออกแบบเข้าด้วยกัน

       - แบ่งบริเวณต่างๆออกจากกัน

       - ดึงดูดความสนใจของผู้อ่าน

       - สร้างอารมณ์โดยรวมของเว็บ

       - สร้างระเบียบ

       - ส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ

การผสมสี มี 2 แบบ

       - การผสมแบบบวก เป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ

       - การผสมแบบลบ ไม่เกี่ยวข้องกับแสงแต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ

รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)- ชุดสีร้อน
- ชุดสีเเบบเดียว
- ชุดสีที่คล้ายคลึงกัน
- ชุดสีตรงข้ามเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
- ชุดสีเย็น
- ชุดสีเเบบสามเส้า
- ชุดสีตรงข้าม

สีกับอารมณ์ ความรู้สึก เเละความสัมพันธ์กับสิ่งต่างๆ

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

Lecture-บทที่7

บทที่ 7 การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม

ปัจจัยที่เกี่ยวข้องกับการท่องเว็บไซต์

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

     - ระบบปฎิบัติการของคอมพิวเตอร์ มีผลต่อการทำงานของเบราเซอร์มาก แต่ละระบบจะมีความแตกต่างกันในเรื่องของชนิดและเบราเซอร์ที่ใช้ได้

     - ความละเอียดของหน้าจอ มีหลายขนาด ไม่ขึ้นกับขนาดของมอนิเตอร์ แต่ขึ้นกับการ์ดแสดงผล

     - จำนวนสีที่จอของผู้ใช้สามารถแสดงได้ ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth

     - ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้ เบราเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก็ต่อเมื่อคอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง การตรวจสอบฟอนต์ทำได้โดยเข้าไปที่โฟลเดอร์ C:\Windows\Fonts

     - ความเร็วในการเชื่อมต่ออินเตอร์เน็ต ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ ความเร็วของอินเตอร์เน็ตมีหลายระดับ

     - ขนาดหน้าต่างเบราเซอร์ มีโอกาสถูกปรับเปลี่ยนเป็นขนาดเท่าไหร่ก็ได้ตามความประสงค์ของผู้ใช้

     - ความสว่างและค่าความต่างของโทนสี ผู้ใช้สามารถปรับระดับความสว่างและความต่างของโทนสีจากมอนิเตอร์ได้

Lecture-บทที่5

บทที่5 ออกแบบระบบเนวิเกชั่น

ความสำคัญของระบบเนวิเกชั่น

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

เนวิเกชั่นที่ดี จะต้องบรรลุวัตถุประสงค์ต่อไปนี้

1.ผู้ชมกำลังอยู่ในส่วนใดของเว็บ

2.สามารถเข้าถึงข้อมูลได้อย่างไร

3. สามารถกลับไปยังหน้าเดิมได้อย่างไร

4. หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลเเล้ว

รูปแบบของระบบเนวิเกชั่น เเบ่งออกเป็น 4รูปแบบ

1.ระบบเนวิเกชั่นเเบบลำดับขั้น

เป็นเเบบพื้นฐาน คือ มีหน้าโฮมเพจหนึ่งหน่าเเละมีลิงค์ไปยังหน้าอื่นๆ ภายในเว็บถือเป็บลำดับขั้นอย่างหนึง่เเล้ว

2.ระบบเนวิเกชั่นเเบบโกลบอล

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

3. ระบบเนวิเกชั่นเเบบโลคอล

สำหรับเว็บที่มีความซับซ้อนมากอาจต้องใช้ระบบเเบบโลคอลหรือเเบบเฉพาะส่วน

4. ระบบเนวิเกชั่นเฉพาะที่

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

องค์ประกอบของระบบเนวิเกชั่นหลัก

      ระบบเนวิเกชั่นที่สำคัญเเละพบมากที่สุด คือเนวิเกชั่นที่อยู่หน้าเีดียวกับเนื้อหา ไม่ใช่เนวิเกชั่นที่อยู่ภายในเว็บ ซึ่งได้แก่    เนวิเกชั่นบาร์  เนวิเกชั่นระบบเฟรม

  pull down

  pop up menu

  image map

  searchbox

เนวิเกชั่นบาร์

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

วิเกชั่นระบบเฟรม

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

  ข้อเสีย เสียพื้นที่ไปในบางส่วน

                เเสดงผลช้า

               ใช้การออกแบบที่ซับซ้อน

pull downmenu

เป็นส่วนประกอบของฟอร์มที่มีลักษณะเด่น คือ มีรายการให้เลือกมากมาย ใช้พื้นที่น้อย

เหมาะสำหรับข้อมูลที่มีข้อมูลประเภทเดียวกัน

pop up menu

เป็นเมนูอีกรูปแแบหนึ่งที่มีลักษณะคล้าย pull down menu เเต่รายการย่อยของเมนูจะปรากฎ

ขึ้นเองเมื่อผู้ใช้นำเมาส์ไปวาง ข้อดี ช่วยให้หน้าเวบไม่รกจนเกินไป

image Map

การใช้รูปกราฟิกเป็นลิงค์ในเเบบ image map ได้รับความนิยมนำมาใช้กับระบบเนวิเกชั่นมากขึ้น โดยบางบริเวณสามารถลิ้งได้ด้วย ข้อเสีย คือ ไม่ควรใช้มากจนเกินไป เพราะผู้ใช้อาจไม่รู้ว่าภาพเหล่านั้นสามารถลิ้งค์ได้

 search Box

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

การออกแบบระบบเนวิเกชั่น

สร้างระบบเนวิเกชั่นหลัก

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

เนวิเกชั่นเเบบกราฟฟิก VS ตัวอักษร

จะเลือกใช้เเบบใด้ก็ได้ขึ้นอยู่กับผู้ออกแบบ โดยปรกติรูปแบบกราฟิกจะดูสวยกว่าเเบบตัวอักษรอยู่เเล้ว เเต่อาจทำให้การเเสดงผลช้าลง

เนวิเกชั่นเเบบกราฟิกพร้อมคำอธิบาย

เนวิเกชั่นเเบบกราฟิกหรือไอคอนเพื่อเพิ่มความน่าสนใจของลิงค์ ควรใส่คำอธิบายควบคู่

กับกราฟฟิกด้วย

พื้นฐานของระบบเนวิเกชั่น

หลักการออกแบบเนวิเกชั่นคือการอำนวยความสะดวกตามเป้าหมายของผู้ใช้ เพื่อให้รู้ว่า

ตอนนี้กำลังอยู่ที่ไหน มีหลายสิ่งที่ทำให้รู้สถานที่ได้โดยเร็วไม่ว่าจะเป็นเเผนที่ ป้ายบอกทาง เสียง อากาศ

เพิ่มความคล่องตัวในการเคลื่อนที่

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

ระบบเนวิเกชั่นที่มีประสิทธิภาพ ควรมีคุณสมบัติ ดังนี้

1. เข้าใจง่าย

2. มีความสม่ำเสมอ

3. มีการตอบสนองต่อผู้ใช้

4. มีความพร้อมเเละเหมาะสมต่อการใช้งาน

5. นำเสนอหลายทางเลือก

6. มีขั้นตอนสั้นเเละประหยัดเวลา

7. มีรูปแบบที่สื่อความหมาย

8. มีคำอธิบายที่ชัดเจนเเละเข้าใจได้ง่าย

9. เหมาะสมกับวัตถุประสงค์ของเว็บ

10. สนับสนุนเป้าหมายเเละพฤติกรรมของผู้ใช้

"นี่แหละ . . .ความเหงา"

สำหรับบางคน . . . ที่บอกตัวเองไม่ได้ว่า
กำลังสุข หรือ เศร้า กับคำว่า . . . "ความรัก"



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

บางเวลาในชีวิตหนึ่ง . . . โลกกำหนดให้หัวใจรู้จัก "ความเหงา"
ด้วยเหตุผลบางอย่าง . . . นั้นคือให้โลกใบนี้ยังคงมีความรัก
ดำเนินต่อความเหงา . . . ทำให้หัวใจสองดวงเชื่อมถึงกันด้วยความคิดถึง


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

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



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