ใบความรู้ที่ 2.1
เรื่องการใช้เครื่องมือขั้นพื้นฐาน Photoshop

โปรแกรม Photoshop คืออะไร
           โปรแกรม Photoshop เป็นโปรแกรมสำหรับสร้างภาพ และตกแต่งภาพ ซึ่งเป็นลิขสิทธิของบริษัท Adobe ซึงบริษัท Adobe มีผลิตภัณฑ์ซอฟแวร์เกียวกับด้านกราฟิก มากมายเช่น Adobe illustrator สำหรับทำ ภาพเวกเตอร์ Adobe Pemiretor สำหรับตัดต่อภาพยนต์ ฯลฯ โปรแกรม Photoshop เป็นโปรแกรมตกแต่งภาพทีได้รับความนิยมมาก เนื่องจากเป็นโปรแกรมทีใช้ง่าย และรองรับ Application (Plug In) เสริมได้มากมาย
ลักษณะเด่นของ Photoshop
         1.   Photoshop ทำงานเป็น Layer
ลักษณะการทำงานของ Photoshop จะเหมือนการวางแผ่นใสซ้อนๆ กัน โดยแต่ละแผ่นจะมีการทำงานต่างกัน แต่เมือรวมกันแล้วจะเป็นแค่ภาพภาพเดียว แต่ละแผ่นใส (Layer) สามารถสลับไปมาได้

          ภาพที่ 2.1 Photoshop ทำงานเป็น Layer
          ที่มา : ศตวรรษ สุขโชติ (2556)   
          2.   รูปแบบคำสั่งเป็นแบบ Interface Enhancement ไอคอนและปุ่มคำสั่งต่างๆ จะอยู่ในรูปแบบของ Toolbox , Toolbar และ Dialog Box ซึ่งจัดไว้เป็นหมวดหมู่ โดยคลิกเพื่อใช้งาน และจะมีการตอบโต้ การใช้งานเป็นแบบ 3 มิติ คือ เมื่อคลิกปุ่มจะยุบลงไป



          ภาพที่ 2.2 รูปแบบคำสั่งเป็นแบบ Interface Enhancement
          ที่มา : ศตวรรษ สุขโชติ (2556) 

        3.   สนับสนุนการทำการบนเว็บไซต์
เนื่องจากไฟล์ภาพที่ใช้บนเว็บไซต์มีหลายประเภท และโปรแกรม Photoshop สามารถ สร้างภาพที่ใช้งานบนเว็บไซต์ได้หลากหลาย
        เริ่มต้นใช้งาน Photoshop CS2
        1.   วิธีการเข้าสู่โปรแกรม Photoshop Cs2 คลิกที่ไอคอนโปรแกรมดังรูป



               ภาพที่ 2.3 วิธีการเข้าสู่โปรแกรม Photoshop Cs2

(ดับเบิ้ลคลิก ทีไอคอนดังรูปเพื่อเข้าโปรแกรม Photoshop Cs2)
           2.   หน้าตาของโปรแกรม Photoshop CS2

 

                                                              ภาพที่ 2.4 หน้าตาของโปรแกรม Photoshop CS2
 
        3.         ชนิดไฟล์ในโปรแกรม Photoshop
          .psd (Photoshop File) : เป็นไฟล์พื้นฐานของโปรแกรม Photoshop สามารถเก็บบันทึกข้อมูลคุณลักษณะต่างๆ ที่ใช้ใน Photoshop ไม่ว่าจะเป็น Layer , สี หรือ Effect ต่างๆ
          .bmp (Bitmap file) : เป็นไฟล์พื้นฐานของ Windows
          .gif (Graphic Interchange) : เป็นไฟล์ที่ใช้กันมากบนอินเตอร์เน็ต เพราะง่ายต่อการบีบอัดข้อมูล เพราะ มีขนาดเล็ก
          .jpg (Joint Photographic experts Group) : เป็นไฟล์นิยมใช้บนอินเตอร์เน็ตเช่นกันจะแตกต่างกันที่ไฟล์นี้ จะมีความละเอียดของภาพค่อนข้างชัดเจน
        4.         การเปิดไฟล์
การเรียกไฟล์ภาพหรือไฟล์ psd นำขึ้นมาใช้สามารถทำได้โดย ไปที่เมนู File > Open หรือคีย์ลัด Ctrl+O


 

              ภาพที่ 2.5 การเรียกไฟล์ภาพหรือไฟล์ psd

        5.   การสร้างภาพใหม่
นอกจากการนำภาพมาใช้งานแล้วเราสามารถสร้างภาพขึ้น มาให้ด้วยพื้นที่การทำงานที่เราสร้างได้เองด้วย โดยการไปที่เมนู File>Newหรือคีย์ลัด Ctrl+N

              ภาพที่ 2.6 การสร้างภาพใหม่

        6.   รายละเอียดการกำหนดขนาดพื้นที่ใหม่


             

        ภาพที่ 2.7 รายละเอียดการกำหนดขนาดพื้นที่ใหม่

        7.   การบันทึกไฟล์
การบันทึกไฟล์ของ Photoshop มีสองแบบคือ บันทึกเพื่อนำมาแก้ไขได้ภายหลัง และบันทึกนำไปใช้งานบเว็บไซต์
การบันทึกงานเพื่อนำมาแก้ไขภายหลัง สามารถทำได้โดย ไปที่เมนู File>save as…



        ภาพที่ 2.8 การบันทึกไฟล์ของ Photoshop

        วิธีการเซฟนำไปใช้บนเว็บไซต์ สามารถทำได้โดย การไปที่เมนู File > Save for Web\ จะปรากฏแถบข้อมูลการ Save for Web
 


          ภาพที่ 2.9 วิธีการเซฟนำไปใช้บนเว็บไซต์

            การใช้เครื่องมือ Selection (Marquee Tool) ใช้ในการเลือกส่วนของรูปภาพเพื่อการคัดลอก หรือใส่ effect ต่างๆ ให้กับส่วนที่เลือก และมักใช้กับ คำสั่ง Copy , Cut ,Delและ คำสั่ง paste



             ภาพที่ 2.10 วิธีการเซฟนำไปใช้บนเว็บไซต์  

              ภาพที่ 2.11 การใช้เครื่องมือ Selection (Marquee Tool)

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

        การใช้เครื่องมือ Magic wand tool


            ภาพที่ 2.12 การใช้เครื่องมือ Magic wand tool

เป็นการ Selection โดยอาศัยค่าสีที่ใกล้เคียงกัน โดยโปรแกรมจะเลือกสีที่มีความคล้ายกับสีที่เลือกการใช้เครื่องมือในการระบายสีหรือแก้ไขภาพ Healing Brush Toolใช้เกลี่ยรอยต่างๆ โดยจะทำการรักษาโทนสี ความสว่างให้ใกล้เคียงกับของเดิมอัตโนมัติ เวลาใช้ต้องกด ปุ่มAlt ร่วมด้วย
      การเลือกสี Foreground และ Backgroud เป็นเครื่องมือที่ใช้สำหรับการเลือกสีที่ต้องการ

        การออกแบบโลโก้โรงเรียนโดยใช้โปรแกรม Adobe Photoshop
        1.   เข้าสู่โปรแกรม Adobe Photoshop
        2.   ไปที่รายการ File เลือก New กำหนดขนาดความกว้าง (Width) และความสูง (Height) ให้เท่ากัน เช่น 300 pixels กำหนด Resolution เป็น72 และเลือก Background เป็น Transparent

       ภาพที่ 2.13 รายการ File เลือก New

        3.   เลือกเครื่องมือ Ellipse Tool นำมาวาดวงกลม โดยกดปุ่ม shift ค้างไว้

 

      ภาพที่ 2.14 เครื่องมือ Ellipse Tool

        4.   เลือก Layer ไปที่ Layer Style เลือก Stroke เพื่อกำหนดสีเส้นของวงกลม

 

      ภาพที่ 2.15 Layer Style

        5.   กำหนดสีเส้นและขนาดของเส้น

 

         ภาพที่ 2.16 Layer Style

        6.   ไปที่ Layer palette คลิกขวาเพื่อคัดลอก Layer ใหม่ (Duplicate Layer)

          ภาพที่ 2.17 Layer palette

        7.   ไปที่รายการ Edit เลือก Transform Path เลือก Scale

 

        ภาพที่ 2.18 Edit เลือก Transform Path เลือก Scale
        8.   ปรับขนาด Layer 2 และ Layer 3 ให้เล็กลง จัดให้อยู่ตรงกลาง

 

        ภาพที่ 2.19 ปรับขนาด Layer 2 และ Layer 3 ให้เล็กลง จัดให้อยู่ตรงกลาง

        9.   กำหนดสีเส้นและขนาดของเส้นเหมือนขั้นที่ 4-5
 

       ภาพที่ 2.20 กำหนดสีเส้นและขนาดของเส้นเหมือนขั้นที่ 4-5
      10. ไปที่  พิมพ์ชื่อโรงเรียน ไปที่ เพื่อเปลี่ยนรูปร่างตัวอักษร เลือก
 

         ภาพที่ 2.21 ไปที่  พิมพ์ชื่อโรงเรียน ไปที่ เพื่อเปลี่ยนรูปร่างตัวอักษร

        11. ปรับรูปร่างของตัวอักษรให้โค้งขึ้นโดยเลือกค่า Bend เป็น +
 

        ภาพที่ 2.22 ปรับรูปร่างของตัวอักษรให้โค้งขึ้นโดยเลือกค่า Bend เป็น +
        12.    ไปที่ พิมพ์ชื่อสำนักงานเขตพื้นที่การศึกษา ไปที่ เพื่อเปลี่ยนรูปร่างตัวอักษร เลือก  ปรับตัวอักษรให้โค้งลงโดยเลือกค่า Bend เป็น –
 

          ภาพที่ 2.23 ไปที่ พิมพ์ชื่อสำนักงานเขตพื้นที่การศึกษามัธยมศึกษาเขต 9 ไปที่

         13.    เลือก เพื่อปรับระยะห่างระหว่างตัวอักษร

 

        ภาพที่ 2.24 เลือก เพื่อปรับระยะห่างระหว่างตัวอักษร

        14. ไปที่ Edit เลือก Free Transform เพื่อปรับความโค้งและตำแหน่งของตัวอักษร

 

          ภาพที่ 2.25 เลือก เพื่อปรับระยะห่างระหว่างตัวอักษร

           15. ปรับความโค้งและตำแหน่งอย่างเหมาะสม
 

        ภาพที่ 2.26 ปรับความโค้งและตำแหน่งอย่างเหมาะสม

        16. ใส่โลโก้และสัญลักษณ์ตรงตำแหน่งที่ต้องการ
 

         ภาพที่ 2.27 ใส่โลโก้และสัญลักษณ์ตรงตำแหน่งที่ต้องการ
         17. บันทึกแฟ้มในรูปแบบที่ต้องการ

 

             ภาพที่ 2.28 บันทึกแฟ้มในรูปแบบที่ต้องการ
              save as เลือกรูปแบบ Jpeg พื้นหลังจะเป็นสีขาว
              save for Web จะมีรูปแบบเป็น gif พื้นหลังจะโปร่งใส


       ภาพที่ 2.29 ภาพตัวอย่าง

  เข้าสู่บทเรียนต่อไปคลิก