บทที่ 2

บทที่ 2

หลักการออกแบบเว็บไซต์

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

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

รูปที่ 2.1 ตัอย่างการางโครงสร้างเว็บไซต์ 

2.1.2 หลักการออกแบบโครงสร้างเว็บไซต์ มีดังต่อไปนี้
   1.การกำหนดวัตถุประสงค์ (Target) คือ การกำหนดขอบเขตของเว็บไซต์ โยคำนึงถึงกลุ่มเป้าหมาย
   2.การกำหนดวิเคราะห์สภาพปัญหา(Problem) คือ การวิเคราะห์ถึงสภาพปัญหาที่อาจจะเกิดขึ้น
   3.การวางแผนการทำงาน (Plan) คือ การนำวัตถุประสงค์และการวิเคราะห์สภาพปัญหาเพื่อเป็นแนวทางในการออกแบบเว็บไซต์
   4.การดำเนินงาน(Action) คือ การลงมือสร้างและพัฒนาเว็บไซต์ตามแผนการดำเนินงานที่วางไว้
   5.ทดลองใช้งาน (Test) คือ การทดสอบหรือการทดลองการใช้งานเว็บไซต์ก่อนให้ผู้ใช้งานเว็บไซต์ได้ใช้จริงเพื่อหาข้อบกพร่องของเว็บไซต์
   6.แก้ไขปรับปรุง (Correct) คือ การนำข้อที่บกพร่องจากการทดลองใช้งานมาแก้ไขปรังปรุงก่อนให้ผู้ใช้งานเว็บไซต์ได้ใช้งานจริง
2.1.3 รูปแบบโครงสร้างเว็บไซต์
    การออกแบบโครงการสร้างเว็บไซต์ขึ้นอยู่กับลักษณะของข้อมูล ความเหมาะสมและความต้องการของกลุ่มเป้าหมาย โดยมีรูปแบบหลักๆ 4 รูปแบบ ดังต่อไปนี้
    1.โครงสร้างแบบเรียงลำดับ (Sequential Structure ) คือ โครงสร้างพื้นฐานหรือโครงสร้างแบบลำดับขั้นตอนที่นิยมใช้กันทั่วไปเพราะง่ายต่อการจัดระบบข้อมูล

รูปที่ 2.2 โครงสร้างแบบเรียงลำดับ 

   2.โครงสร้างแบบลำดับขั้น ( Hierarchical Structure) คือ การจัดระบบโครงสร้างที่มีความซับซ้อนของ ข้อมูล โดยแบ่งเนื้อหาออกเป็นส่วนต่างๆ และมีรายละเอียดย่อยๆในแต่ละเว็บเพจ

รูปที่ 2.3 โครงสร้างแบบลำดับชั้น 

      3.โครงสร้างแบบตาราง (Grid Structure) คือ การจัดระบบโครงสร้างที่มีความซับซ้อนมากกว่าโครงสร้างแบบลำดับขั้น โดยการออกแบบที่มีความยืดหยุ่น เพิ่มการเชื่อมโยงถึงกันได้

รูปที่ 2.4 โครงสร้างแบบตาราง 

    4.โครงสร้างแบบใยแมงมุม(Web Structure ) คือ โครงสร้างที่มีความยืดหยุ่นมากที่สุด โดยหน้าเว็บเพจทุกหน้าสามารถเชื่อมโยงหากันได้ทั้งหมด รวมทั้งสามารถเชื่อมโยงไปเว็บไซต์หรือลิงค์ภายนอก

รูปที่ 2.5 โครงสร้างแบบใยแมงมุม 

2.2 การกำหนดขนาดและการโหลดหน้าเว็บเพจที่แสดงผล
2.2.1 การกำหนดขนาดของเว็บเพจ
        การกำหนดขนาดหน้าเว็บเพจในแต่ละหน้าควรกำหนดตามมาตรฐานหรือตามหลักความต้องการออกแบบเพราะการออกแบบเว็บเพจที่ได้ตามมาตรฐานสากลเป็นเว็บเพจที่สามารถแสดงผลได้อย่างเหมาะสมไม่มีขนาดเล็กหรือขนาดใหญ่จนเกินไป
       ดังนั้น การกำหนดหน้าเว็บเพจควรออกแบบให้เหมาะสมกับชิ้นงานและคำนึงถึงความต้องการของกลุ่มเป้าหมาย เช่น การออกแบบหน้าเว็บเพจแบบเต็มหน้าจอ สามารถใส่เนื้อหาได้จำนวนมากเป็นต้น
และปัจจุบันนี้การออกแบบหน้าเว็บเพจมีขนาดหลากหลายขึ้นอยู่ตามต้องการของผู้ใช้ โดยการกำหนดขนาดความกว้างของหน้าเว็บเพจนิยมใช้ขนาด 1024 PX และแบบเต็มหน้าจอ และการเลือกขนาดเว็บเพจขึ้นอยู่กับความเหมาะสมเนื้อหาหรือผู้ใช้งานเป็นหลัก
2.2.2 การโหลดหน้าเว็บเพจเพื่อแสดงผล
ปัจจุบันการสร้างหรือพัฒนาเว็บเพจเห็นความสำคัญของการโหลดหน้าเว็บเพจเพื่อแสดงผลบนหน้าจอเพราะผู้ใช้งานที่เข้าเยี่ยมชมเว็บไซต์บนอินเตอร์เน็ตนั้นล้วนมีปัจจัยที่ทำให้การเยี่ยมชมเว็บของผู้ใช้งานล้าช้าไป เนื่องจากปัจจัยดังต่อไปนี้ 

1.สเปคเครื่องคอมพิวเตอร์
2.อินเทอร์เน็ตช้า
3.เว็บไซต์ที่ไม่คำนึงถึงการโหลดหน้าเพจเป็นต้น

 

รูปที่ 2.6 เว็บไซต์ที่ออกแบบโดยคำนึงถึงการโหลดหน้าเว็บเพจ 

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

รูปที่ 2.7 เครื่องมือนำทางของเว็บไซต์ 

     2.เครื่องมือบอกตำแหน่ง คือ เครื่องมือที่บอกตำแหน่งหน้าเว็บเพจที่ใช้งานอยู่เพื่อให้ผู้ใช้งานทราบสถานะการใช้งานปัจจุบัน

รูปที่ 2.8 เครื่องมือบอกตำแหน่ง 

2.3.2 คุณลักษณะที่ดีของระบบนำทางเว็บไซต์
   1.สามารถมองตำแหน่งที่เห็นได้ชัดเข้าถึงได้ง่าย
   2.มีข้อความกำกับชัดเจนเพื่อความรวดเร็วในการใช้งาน
   3.อยู่ในตำแหน่งเดียวกันในทุกเว็บเพจ
   4.บอกตำแหน่งที่กำลังใช้งาน
   5.มีลิงค์ให้คลิกกลับหน้าหลัก Home Page เสมอ
   6.มีการตอบสนองเมื่อนำเมาส์ไปชี้
   7.จำนวนรายการพอเหมาะไม่มากจนเกินไป

2.4 การเตรียมข้อมูล
การเตรียมข้อมูลเพื่อนำไปใส่ในหน้าเว็บเพจเป็นสิ่งที่สำคัญและควรให้ความสำคัญกับเนื้อหารูปภาพ และภาพเคลื่อนไหวต่างๆ เพราะการนำข้อมูลเหล่านี้มาใส่ในหน้าเว็บเพจแล้ว ผู้ใช้สามารถเข้ามาเยี่ยมชมเว็บไซต์ได้.
     2.4.1 ข้อมูลในรูปแบบตัวอักษรข้อมูลในรูปแบบตัวอักษร คือ ข้อมูลที่อยู่ในรูปแบบของตัวอักษร เนื้อหา ข้อความ ซึ่งมีความสำคัญเป็นอย่างมาก เพราะตัวอักษรเป็นลายลักษณ์อักษรที่สามารถสื่อสารได้ด้วยการอ่านได้และเข้าใจกับคำสั่งนั้นๆ
    2.4.2 ข้อมูลในรูปแบบรูปภาพ ข้อมูลในรูปแบบรูปภาพ คือ ข้อมูลที่อยู่ในรูปแบบของไฟล์ภาพ ซึ่งไฟล์รูปภาพที่นิยมนำมาใช้ในการพัฒนาเว็บไซต์ ได้แก่ .JPEG .PNG .GIF เป็นต้น

JPEG คือ ไฟล์ที่ภาพถ่ายหรือไฟล์ภาพที่มีความชัด แต่พื้นหลังของภาพไม่มีความโปร่งใส

รูปที่ 2.9 รูปภาพ .JPEG

PNG คือ ไฟล์ภาพที่มีการตัดต่อดัดแปลง และกำหนดให้พื้นหลังเป็นโปร่งใส

รูปที่ 2.10 รูปภาพ .PNG

GIF คือ ไฟล์ภาพที่สามารถเคลื่อนไหวได้ นิยมทำเป็นป้ายโฆษณาบนเว็บ

รูปที่ 2.11 รูปภาพ .GIF

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

รูปที่ 2.12 การค้นหารูปภาพผ่าน www.google.com

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

รูปที่ 2.13 เว็บเพจที่เลือกใช้สีฟ้าและสีน้ำเงิน

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

รูปที่ 2.14 เว็บเพจที่เลือกใช้สีส้ม

2.6.3 สีเหลือง
สีเหลืองเป็นสีแห่งการแผ่กระจาย อำนาจบารมี ความร่าเริง ความเบิกบานสดชื่น เร้าอารมณ์ และเรียกร้องความสนใจให้ความรู้สึกแจ่มใส ชีวิตใหม่ ความสดใหม่

รูปที่ 2.15 เว็บเพจที่เลือกใช้สีเหลือง

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

รูปที่ 2.16 เว็บเพจที่เลือกใช้สีเขียว

2.6.5 สีขาว
         สีขาวให้ความรู้สึก แสงสว่าง อ่อนโยน บริสุทธิ์ สะอาด สดใส เบาบาง เปิดเผย การเกิดความรัก ความหวัง ความจริง ความเมตตา ความศรัทธา ความดีงาม

รูปที่ 2.17 เว็บเพจที่เลือกใช้สีขาว

2.6.6 สีเทา
        สีเทาให้ความรู้สึก ความสงบ ความเงียบ สุภาพ เศร้า อาลัย ท้อแท้ ความลึกลับ ความหดหู่ ความชรา สุขุม ถ่อมตน แต่สร้างความรู้สึกหม่นหมองได้

รูปที่ 2.18 เว็บเพจที่เลือกใช้สีเทา

2.7 การใช้แบบอักษร
        การเลือกใช้แบบอักษรเป็นองค์ประกอบหนึ่งที่ทำให้เว็บเพจมีความน่าสนใจเพิ่มขึ้น เช่น การทำเว็บเพจเกี่ยวกับวัฒนธรรมไทย ควรใช้แบบอักษรลายไทย และการเลือกใช้แบบอักษรควรเลือกใช้ให้เหมาะสมกับเนื้อหา และสามารถอ่านออกได้ง่ายขึ้นในปัจจุบันการออกแบบและสร้างเว็บเพจได้มีการนำแบบอักษรต่างๆ มาใช้ในการออกแบบเพื่อให้มีความสอดคล้องกับเนื้อหา โดยมีตัวอักษรจากเครื่อง (Font Default) และนิยมเลือกใช้
   

แบบฝึกหัดท้ายบท

      1.หลักการออกแบบโครงสร้างเว็บไซต์มีกี่หัก

ก.      9                                                      ข. 8

ค.    7                                                      ง.  6

2. Problem  คืออะไร

ก.      การวางแผน                                      ข.  กำหนดวัตถุประสงค์

ค.  การดำเนินการ                                     ง. วิเคราะห์สภาพปัญหา

         3. โครงสร้างใดที่สามารถเชื่อมโยงไปยังเว็บไซต์หรือลิงค์ภายนอกได้

             ก. แบบลำดับขั้น                                      ข.แบบใยแมงมุม

            ค.แบบตาราง                                           ง.แบบเรียงลำดับ

        4. รุปแบบโครงสร้างเว็บไซต์มีกี่รูปแบบ

             ก.  4                                                     ข. 3

             ค.  2                                                     ง. 1

         5. ขนาดความกว้างของหน้าเว็บเพจที่นิยมใช้มีขนาดเท่าไหร่

             ก.  1024 px                                           ข. 850px

             ค.1000px                                              ง.680 px

           6. ไฟล์ภาพที่มีการตัดต่อดัดแปลงและกำหนดให้พื้นให้พื้นหลังโ.ปร่งใส คืออะไร

                ก..dox                                             ข.JPEG

                ค.PNG                                            ง.GIF

           7.สีที่ให้ความรู้สึกอบอุ่น คือสีอะไร

                 ก.สีฟ้า                                              ข.สีส้ม

                 ค.สีน้ำเงิน                                         ง.สีชมพู

           8.สีเขียวให้ความรู้สึกอย่างไร

               ก.ร่มเย็น                                          ข.ความรัก

               ค.อบอุ่น                                          ง.สนุก

          9.สีเทาให้ความรู้สึกอย่างไร

              ก.ร่มเย็น                                         ข.เยือกเย็น

              ค.อบอุ่น                                         ง.อาลัย   

  

        10.แบบอักษรใดที่นิยมที่สุด

               ก.Aparajita                                 ข.Angsan New

               ค.Athritis                                     ง.Arial Unicode ms

บทที่3

  หน่วยที่ 3

การออกแบบเว็บเพจด้วย Photoshop CS 6

คุณสมบัติพื้นฐานของโปรแกรม Adobe Photoshop CS 6           โปรแกรม Photo shop เป็นโปรแกรมในตระกูล Adobe ที่ใช้สำหรับตกแต่งภาพถ่ายและภาพกราฟฟิก ได้อย่างมีประสิทธิภาพ ไม่ว่าจะเป็นงานด้านสิ่งพิมพ์ นิตยสาร และงานด้านมัลติมีเดีย อีกทั้งยังสามารถ retouching ตกแต่งภาพและการสร้างภาพ ซึ่งกำลังเป็นที่มนิยมสูงมากในขณะนี้ เราสามารถใช้โปรแกรม Photoshop ในการตกแต่งภาพ การใส่ Effect ต่าง ๆให้กับภาพ และตัวหนังสือ การทำภาพขาวดำ การทำภาพถ่ายเป็นภาพเขียน การนำภาพมารวมกัน การ Retouch ตกแต่งภาพต่าง
        เราสามารถเรียนรู้วิธีการใช้โปรแกรม Adobe Photoshop นี้ได้ด้วยตัวเอง คุณสามารถที่จะทำการแก้ไขภาพ ตกแต่งภาพ ซ้อนภาพในรูปแบบต่างๆ ได้อย่างง่ายดาย และสิ่งที่ขาดไม่ได้ก็คือ การใส่ข้อความประกอบลงในภาพด้วย และเนื่องด้วย Adobe Photoshop มีการพัฒนาโปรแกรมมาอย่างต่อเนื่อง ทำให้เราจำเป็นต้องศึกษาคำสั่งต่างๆ ให้เข้าใจ แต่ที่สำคัญ เมื่อคุณเรียนรู้การใช้คำสั่งในเวอร์ชั่นเก่า คุณก็ยังคงสามารถนำไปประยุกต์ใช้กับเวอร์ชั่นใหม่ๆ

ส่วนประกอบชองโปรแกรม Adobe Photoshop CS 6

1. เมนูของโปรแกรม Application menu หรือ Menu bar ประกอบด้วย

1. File   หมายถึง รวมคำสั่งที่ใช้จัดการกับไฟล์รูปภาพ เช่น สร้างไฟล์ใหม่, เปิด, ปิด, บันทึกไฟล์, นำเข้าไฟล์, ส่งออกไฟล์ และอื่น ๆ ที่เกี่ยวกับไฟล์

2. Edit   หมายถึง รวมคำสั่งที่ใช้สำหรับแก้ไขภาพ และปรับแต่งการทำงานของโปรแกรมเบื้องต้น เช่น ก๊อปปี้, วาง, ยกเลิกคำสั่ง, แก้ไขเครื่องมือ และอื่น ๆ
3. Image   หมายถึง รวมคำสั่งที่ใช้ปรับแต่งภาพ เช่น สี, แสง, ขนาดของภาพ (image size), ขนาดของเอกสาร (canvas), โหมดสีของภาพ, หมุนภาพ และอื่น ๆ
4. Layer หมายถึง รวมคำสั่งที่ใช้จัดการกับเลเยอร์ ทั้งการสร้างเลเยอร์, แปลงเลเยอร์ และการจัดการกับเลเยอร์ในด้านต่าง ๆ
5. select รวม คำสั่งเกี่ยวกับการเลือกวัตถุหรือพื้นที่บนรูปภาพ (Selection) เพื่อนำไปใช้งานร่วมกับคำสั่งอื่น ๆ เช่น เลือกเพื่อเปลี่ยนสี, ลบ หรือใช้เอฟเฟ็กต์ต่าง ๆ กับรูปภาพ
6. Filter เป็นคำสั่งการเล่น Effects ต่างๆสำหรับรูปภาพและวัตถุ
7. View เป็นคำสั่งเกี่ยวกับมุมมองของภาพและวัตถุในลักษณะต่างๆ เช่น การขยายภาพและย่อภาพให้ดูเล็ก
8. Window เป็นส่วนคำสั่งในการเลือกใช้อุปกรณ์เสริมต่างๆที่จำเป็นในการใช้สร้าง Effects ต่างๆ
9. Help เป็นคำสั่งเพื่อแนะนำเกี่ยวกับการใช้โปรแกรมฯและจะมีลายละเอียดของโปรแกรมอยู่ในนั้น



2. เมนูของพื้นที่ทำงาน Panel menu
            Panel (พาเนล) เป็นวินโดว์ย่อย ๆ ที่ใช้เลือกรายละเอียด หรือคำสั่งควบคุมการทำงานต่าง ๆ ของโปรแกรม ใน Photoshop มีพาเนลอยู่เป็นจำนวนมาก เช่น พาเนล Color ใช้สำหรับเลือกสี, พาเนล Layers ใช้สำหรับจัดการกับเลเยอร์ และพาเนล Info ใช้แสดงค่าสีตรงตำแหน่งที่ชี้เมาส์ รวมถึงขนาด/ตำแหน่งของพื้นที่ที่เลือกไว้
3. พื้นที่ทำงาน Stage หรือ Panelเป็นพื้นที่ว่างสำหรับแสดงงานที่กำลังทำอยู่
4. เครื่องมือที่ใช้งาน Tools panel หรือ Tools box

           Tool Panel (ทูลพาเนล) หรือ กล่องเครื่องมือ จะประกอบไปด้วยเครื่องมือต่าง ๆ ที่ใช้ในการวาด ตกแต่ง และแก้ไขภาพ เครื่องมือเหล่านี้มีจำนวนมาก ดังนั้นจึงมีการรวมเครื่องมือที่ทำหน้าที่คล้าย ๆ กันไว้ในปุ่มเดียวกัน โดยจะมีลักษณะรูปสามเหลี่ยมอยู่บริเวณมุมด้านล่างดังภาพ 2 เพื่อบอกให้รู้ว่าในปุ่มนี้ยังมีเครื่องมืออื่นอยู่ด้วย
5. สิ่งที่ควบคุมเครื่องมือที่ใช้งาน Tools control menu หรือ Option bar

2. Option Bar  คือ เป็นส่วนที่ใช้ปรับแต่งค่าการทำงานของเครื่องมือต่าง ๆ โดยรายละเอียดในออปชั่นบาร์จะเปลี่ยนไปตามเครื่องมือที่เราเลือกจากทูลบ็อกซ์ในขณะนั้น เช่น เมื่อเราเลือกเครื่องมือ Brush (พู่กัน) บนออปชั่นบาร์จะปรากฏออปชั่นที่ใช้ในการกำหนดขนาด และลักษณะหัวแปรง, โหมดในการระบายความโปร่งใสของสี และอัตราการไหลของสี เป็นต้น

3.แถบเครื่องมือ (Tools Bar)

เครื่องมือแต่ละชิ้นมีคุณสมบัติ ดังนี้

Move

ใช้สำหรับเลือกพื้นที่บนภาพเป็นรูปสี่เหลี่ยม วงกลม วงรี หรือเลือกเป็นแถวคอลัมน์ ขนาด 1 พิเซล

Marquee

ใช้สำหรับย้ายพื้นที่ที่เลือกไว้ของภาพ หรือย้ายภาพในเลเยอร์หรือย้ายเส้นไกด์

Lasso

ใช้เลือกพื้นที่บนภาพเป็นแนวเขตแบบอิสระ

Magic Wand

ใช้เลือกพื้นที่ด้วยวิธีระบายบนภาพ หรือเลือกจากสีที่ใกล้เคียงกัน

Crop

ใช้ตัดขอบภาพ

Slice

ใช้ตัดแบ่งภาพเพื่อบันทึกไฟล์ภาพย่อย ๆ ที่เรียกว่าสไลซ์ (Slice)

สำหรับนำไปสร้างเว็บเพจ

Eyedropper

ใช้เลือกสีจากสีต่าง ๆ บนภาพ

Healing Brush

ใช้ตกแต่งลบรอยตำหนิในภาพ

Brush

ใช้ระบายลงบนภาพ

Clone Stamp

ใช้ทำสำเนาภาพ โดยก๊อปปี้ภาพจากบริเวณอื่นมาระบาย หรือระบายด้วยลวดลาย

History Brush

ใช้ระบายภาพด้วยภาพของขั้นตอนเดิมที่ผ่านมา หรือภาพของสถานะเดิมที่บันทึกไว้

Eraser

ใช้ลบภาพบางส่วนที่ไม่ต้องการ

Gradient

ใช้เติมสีแบบไล่ระดับโทนสีหรือความทึบ

Blur

ใช้ระบายภาพให้เบลอ

Bern

ใช้ระบายเพื่อให้ภาพมืดลง

Dodge 

ใช้ระบายเพื่อให้ภาพสว่างขึ้น

pen

ใช้วาดเส้นพาธ (Path)

Horizontal Type

ใช้พิมพ์ตัวอักษรหรือข้อความลงบนภาพ

Path Selection

ใช้เลือกและปรับแต่งรูปทรงของเส้นพาธ

Rectangle

ใช้วาดรูปทรงเรขาคณิตหรือรูปทรงสำเร็จรูป

Hand

ใช้เลื่อนดูส่วนต่าง ๆ ของภาพ

Zoom

ใช้ย่อหรือขยายมุมมองภาด

set Foreground Color, Set Background Color

ใช้สำหรับกำหนดสี- Foreground Color และ Background Color

เปิดแสดงหน้ากระดาษ แบบ Full screen

4. Panel คือ
        เป็นวินโดว์ย่อย ๆ ที่ใช้เลือกรายละเอียด หรือคำสั่งควบคุมการทำงานต่าง ๆ ของโปรแกรม ใน Photoshop มีพาเนลอยู่เป็นจำนวนมาก เช่น พาเนล Color ใช้สำหรับเลือกสี, พาเนล Layers ใช้สำหรับจัดการกับเลเยอร์ และพาเนล Info ใช้แสดงค่าสีตรงตำแหน่งที่ชี้เมาส์ รวมถึงขนาด/ตำแหน่งของพื้นที่ที่เลือกไว

5. พื้นที่การำงาน (Stage) คือ พื้นที่สำหรับการทำงาน ที่ใช้สร้าง ตกแต่งวัตถุต่างๆ

6. แถบแสดงสถานะ (Status Bar) คือ แถบแสดงสถานการณ์ทำงานของไฟล์งานนั้นๆ

7. Control Bar คือใช้ในการเก็บการใช้งานโปรแกรม การปิดโปรแกรมเมื่อไม่ต้องการใช้ แล้วยังสามารถจะย่อหน้าต่างโปรแกรมให้เล็กลงตามต้องการได้ ไว้ใช้ในกรณีใช้งานร่วมกับโปรแกรมอื่นๆ

มี 3 ปุ่มด้วยกัน ประกอบด้วย

1.Minimize คือ การพับโปรแกรมมาเก็บไว้ที่ ทาร์สบาร์ด้านล่าง

2.Restorn คือ การย่อหน้าต่างโปรแกรม ให้เล็กลง หรือให้เต็มหน้าจอ

3.Close คือ การใช้ปิดโปรแกรมเมื่อไม่ต้องการใช้งาน

การสร้างส่วนประกอบของเว็บไซต์

1. ส่วนหัวของเว็บเพ็จ (Page Header)
          เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สำคัญที่สุดของหน้า เพราะเป็นส่วนที่ดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์
มักใส่ภาพกราฟฟิกเพื่อสร้างความประทับใจ ส่วนใหญ่ประกอบด้วย

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

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

3. ส่วนท้ายของหน้า (Page Footer)
        เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้ มักวางระบบนำทางที่เป็นลิงค์ข้อความง่าย ๆ และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น เจ้าของเว็บไซต์, ข้อความแสดงลิขสิทธิ์, วิธีการติดต่อกับผู้ดูแลเว็บไซต์, คำแนะนำการใช้เว็บไซต์ เป็นต้นโดยปกติส่วนหัวและส่วนท้ายมักแสดงเหมือนกันในทุกหน้าของเว็บเพจ

ส่วนประกอบย่อยอื่นๆ ที่จำเป็น
1. Text เป็นข้อความปกติ โดยเราสามารถตกแต่งให้สวยงามและมีลูกเล่นต่างๆ ดังเช่นโปรแกรมประมวลคำ
2. Graphic ประกอบด้วยรูปภาพ ลายเส้น ลายพื้น ต่างๆ มากมาย
3. Multimedia ประกอบด้วยรูปภาพ ภาพเคลื่อนไหว และแฟ้มเสียง
4. Counter ใช้นับจำนวนผู้ที่เข้ามาเยี่ยมชมเว็บเพจของเรา
5. Cool Links ใช้เชื่อมโยงไปยังเว็บเพจของตนเองหรือเว็บเพจของคนอื่น
6. Forms เป็นแบบฟอร์มที่ให้ผู้เข้าเยี่ยมชม กรอกรายละเอียด แล้วส่งกลับมายังเว็บเพจ
7. Frames เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนก็จะแสดงข้อมูลที่แตกต่างกันและเป็นอิสระจากกัน
8. Image Maps เป็นรูปภาพขนาดใหญ่ที่กำหนดส่วนต่างๆ บนรูป เพื่อเชื่อมโยงไปยังเว็บเพจอื่นๆ
9.Java Applets เป็นโปรแกรมสำเร็จรูปเล็กๆ ที่ใส่ลงในเว็บเพจ เพื่อให้การใช้งานเว็บเพจมีประสิทธิภาพมากยิ่งขึ้น
      นอกจากส่วนประกอบดังกล่าวแล้ว องค์ประกอบที่นิยมใส่ไว้ในเว็บเพจอีก 2 ส่วน ได้แก่ สมุดเยี่ยม (guestbook) และเว็บบอร์ด (web board)
ที่ช่วยให้เว็บเพจกลายเป็นสื่อที่มีปฏิสัมพันธ์ระหว่างผู้ใช้กับผู้สร้างและระหว่างผู้ใช้ด้วยกันเอง

การสร้างเอกสารและการกำหนดเอกสาร

วิดีโอ

https://youtu.be/w-ukv8O04Ng?t=1

(โหลดลิงค์เอาน่า)

การตัดภาพเป็นชิ้นเล็ก ชิ้นน้อยด้วย Slice Tool

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

วิธีการใช้งาน Slice Tool
คลิกค้างแดรกเมาส์สร้างเป็นกรอบสี่เหลี่ยมค่ะ พอปล่อยก็จะมีเส้น Slice ขึ้นมา Slice ที่เราสร้างจะเรียกว่า User-Slice (เส้นทึบ) ส่วน Slice ที่เกิดขึ้นหลังจากที่เราสร้าง Slice จะเรียกว่า Auto-Slice (เส้นประ)

การสร้าง Layer Based Slice ไปที่เมนูบาร์ Layer เลือก New Layer Based Slice

และ เรายังสามารถสร้าง Slice จาก Guides ก่อนอื่นก็ต้องสร้าง Guides แล้วเลือกเครื่องมือ Slice Tool คลิกที่ Slice From Guides

การลบ Slice เลือกใช้เครื่องมือ Slice Selection Tool คลิกที่ Slice ที่ต้องการลบ เมื่อคลิก Slice

Slice นั้นจะเป็นสีเหลืองแล้วกดปุ่ม Delete

การตั้งค่า Slice

Slice Type : สามารถเลือกได้ว่าจะมีภาพหรือไม่มีภาพ

Name : ชื่อ Slice

URL : ลิงก์ เมื่อคลิกที่ Slice นั้นจะไปยังลิงก์ที่ระบุ

Target : เป้าหมาย กำหนดว่าจะให้ลิงก์เปิดหน้าต่างใหม่ (ระบุ _blank) หรือเปิดในหน้าต่างเดิม (ระบุ _self)

Message Text : ข้อความที่จะให้ปรากฏบริเวณ Status Bar ของ Browser

Alt Tag : ข้อความที่จะให้ปรากฏ เมื่อเมาส์เลื่อนผ่าน

การบันทึก Slice

ไปที่เมนูบาร์ File เลือก Save for Web... หรือใช้คีย์ลัด Alt+Shift+Ctrl+S แล้วคลิกปุ่ม Save ค่ะ

ตรง Format เลือก HTML and Images ถ้าไม่ต้องการตั้งค่าอะไรเพิ่มเติม คลิกปุ่ม OK ค่ะ

การ Save รูปภาพจาก Photoshop Cs 6 เป็นไฟล์นามสุกุลต่าง ๆ

          เมื่อเราตกแต่งภาพในโปรแกรม Photoshop Cs 6 เสร็จแล้ว ต่อไปก็ต้องเป็นวิธีการ Save ไฟล์รูปภาพที่เราได้แต่งขึ้นมา แต่จะ Save เป็นไฟล์นามสกุลต่างๆ เช่น JPEG PNG หรือไฟล์ชนิดใดก็แล้วแต่ มีวิธี Save ยังไง ?เรามีวิธีเบื้องต้นง่ายๆสำหรับมือใหม่เรียกได้ว่าเรียนรู้กันตั้งแต่ทำอะไรไม่เป็นเลย

1. File - Save As..

2. เลือกตำแหน่ง Save ที่ต้องการ แล้ว เลือก Format เป็นชนิดไฟล์ที่ต้องการ (วงกลมสีแดง) แล้วกดปุ่ม Save

เพียงเท่านี้เราก็สามารถ Save นามสกุลไฟล์นามสกุลต่างๆ จาก Photoshop Cs 6 เพื่อใช้งานได้ตามที่เราต้องการได้

แบบฝึกหัด

1) โปรแกรมการออกแบบเว็บเพจที่เป็นที่นิยมมากที่สุดคือโปรแกรมใด?

ก. Adobe Dreamweaver

ข. Web Page Maker

ค. Adobe Muse

ง. WebSite X5 Professional

2) โปรแกรมที่ได้รับความนิยมในการแก้ไขภาพ ตกแต่งภาพ ซ้อนภาพในรูปแบบต่างๆ ?

ก. PhotoScape

ข. Google picasa

ค. The Gimep

ง. Adobe Photoshop

3)


จากภาพ ข้อใดคือ ส่วนประกอบชองโปรแกรม Adobe Photoshop CS6?

ก. Menu bar

ข. Panel menu

ค. Option Bar

ง. Tools Bar

4) คุณสมบัติของ Lasso คืออะไร?

ก. ใช้สำหรับย้ายพื้นที่ที่เลือกไว้ของภาพ หรือย้ายภาพในเลเยอร์หรือย้ายเส้นไกด์

ข. ใช้เลือกพื้นที่บนภาพเป็นแนวเขตแบบอิสระ

ค. ใช้เลือกพื้นที่ด้วยวิธีระบายบนภาพ หรือเลือกจากสีที่ใกล้เคียงกัน

ง. ถูกทุกข้อ

5) ส่วนประกอบของเว็บไซต์มีกี่ส่วน?

ก. 3 ส่วน

ข. 4 ส่วน

ค. 5 ส่วน

ง. 6 ส่วน

6) ส่วนประกอบของเว็บไซต์ส่วนใดที่มีความสำคัญมากที่สุด?

ก. วของเว็บเพ็จ

ข. ส่วนของเนื้อหา

ค. ส่วนท้ายของหน้า

ง. ไม่มีข้อถูก

7) Menu bar ประกอบด้วยกี่ส่วน?

ก. 8 ส่วน

ข. 9 ส่วน

ค. 10 ส่วน

ง. 11 ส่วน

8) Tool Panel คืออะไร?

ก. พื้นที่ว่างสำหรับแสดงงานที่กำลังทำอยู่

ข. กล่องเครื่องมือ

ค. คำสั่งควบคุมการทำงานต่าง ๆ

ง. ถูกทุกข้อ

9) Slice Tool คืออะไร?

ก. การตัดภาพเป็นชิ้นเล็กๆ

ข. การคลิ๊กค้าง แล้วแดรกเป็นแนวทแยงมุม

ค. ใช้สำหรับตัดแบ่งภาพ

ง. ถูกทุกข้อ


10)

จากภาพคือเครื่องมือคุณสมบัติชนิดใด?

ก. Move

ข. Lasso

ค. Crop

ง. Slice