โครงการสื่อการสอนออกแบบโลโก้ด้วยโปรแกรม Adobe Photoshop cc

โครงการวชิ าชีพ ส่ือการสอนออกแบบโลโก้ ดว้ ยโปรแกรม Photoshop cc นางสาว เจนจิรา นุ่ยโหน่ง รหสั นกั ศกึ ษา 6332543514 นางสาว ปารามีตา้ บินหมดั รหสั นกั ศกึ ษา 6332543458 ระดบั ประกาศนียบตั รวชิ าชีพช้นั สูง ปี ที่ 2 การปฏิบตั ิงานโครงการวิชาชีพเป็นส่วนหน่ึงของรายวชิ า โครงการวชิ าชีพ รหสั วชิ า 3201-8501 ประเภทวชิ า บริหารธุรกิจ สาขาวชิ า เทคโนโลยธี ุรกิจดิจิทลั วทิ ยาลยั เทคโนโลยสี งขลา ภาคเรียนที่ 1 ปี การศึกษา 2564

โครงการวชิ าชีพ ส่ือการสอนออกแบบโลโก้ ดว้ ยโปรแกรม Photoshop cc นางสาว เจนจิรา นุ่ยโหน่ง รหสั นกั ศกึ ษา 6332543514 นางสาว ปารามีตา้ บินหมดั รหสั นกั ศกึ ษา 6332543458 ระดบั ประกาศนียบตั รวชิ าชีพช้นั สูง ปี ที่ 2 การปฏิบตั ิงานโครงการวิชาชีพเป็นส่วนหน่ึงของรายวชิ า โครงการวชิ าชีพ รหสั วชิ า 3201-8501 ประเภทวชิ า บริหารธุรกิจ สาขาวชิ า เทคโนโลยธี ุรกิจดิจิทลั วทิ ยาลยั เทคโนโลยสี งขลา ภาคเรียนที่ 1 ปี การศึกษา 2564

คณะกรรมการตรวจสอบและควบคุมการปฏิบตั ิงานวชิ าชีพ ไดพ้ ิจารณาโครงการปฏิบตั ิงานวชิ าชีพ ของนางสาวปารามีตา้ บินหมดั นางสาวเจนจิรา นุ่ยโหน่ง แลว้ เห็นสมควรรับเป็นส่วนหน่ึงของการศึกษา วชิ าโครงการวชิ าชีพ รหสั วชิ า 3201-8501 หลกั สูตรประกาศนียบตั รวชิ าชีพ สาขาวชิ าเทคโนโลยธี ุรกิจดิจิทลั วทิ ยาลยั เทคโนโลยสี งขลา คณะกรรมการตรวจสอบและควบคุมการปฏบิ ตั งิ านวชิ าชีพ …………………………… กรรมการ (…………………………) (อาจารยท์ ่ีปรึกษาโครงการ) …………………………… กรรมการ (…………………………) (หวั หนา้ หมวด..................) …………………………… กรรมการ (............................................) (ผชู้ ่วยผอู้ านวยการฝ่ ายวชิ าการ) คณะกรรมการตรวจสอบและควบคุมการปฏิบตั ิงานวชิ าชีพตามโครงการ อนุมตั ิให้รับรองรายงาน ฉบับน้ี เป็ นส่วนหน่ึงของการศึกษาวิชาโครงการวิชาชีพ รหัสวิชา 3201-8501 ตามหลักสู ตร ประกาศนียบตั รวชิ าชีพ สาขาวชิ าเทคโนโลยธี ุรกิจดิจิทลั วทิ ยาลยั เทคโนโลยสี งขลา วนั ........เดือน......ปี ........

ชื่อโครงการวชิ าชีพ : สื่อการสอนออกแบบโลโก้ ดว้ ยโปรแกรม Photoshop cc ช่ือผู้จัดทา : นางสาว เจนจิรา นุ่ยโหน่ง รหสั นกั ศึกษา 6332543514 นางสาว ปารามีตา้ บินหมดั รหสั นกั ศึกษา 6332543458 อาจารย์ทปี่ รึกษา : นางสาวรัชนี แกว้ เจริญ สาขาวชิ า : เทคโนโลยธี ุรกิจดิจิทลั ปี การศึกษา : 2564 บทคดั ย่อ เน่ืองจาก วิทยาลยั เทคโนโลยีสงขลา น้นั มีการจดั การเรียนการสอนที่มุ่งเนน้ ในการฝึ กปฏิบตั ิงาน จริงเป็นส่วนใหญ่ เพอื่ ใหน้ กั เรียน มีความรู้ ความเขา้ ใจ และเกิดทกั ษะในการทางานจริงสามารถนาไปใชใ้ น ชีวติ ปราจาวนั ได้ เก่ียวกบั การใชง้ านคอมพวิ เตอร์ตา่ งๆ รวมถึงมีความปลอดภยั ในการทางาน มีคุณภาพ อีกท้งั ในปัจจุบนั เรียกวา่ เป็ นยุคแห่งการขบั เคล่ือนดว้ ย \"เทคโนโลยี\" เราจะเห็นเทคโนโลยีต่างๆที่ สร้างมาจาก โปรแกรมคอมพิวเตอร์ หลากหลายโปรแกรม ซ่ึงก็มีโปรแกรม photoshop อีกตวั นึงท่ีหลายๆคน รู้จกั กนั อยา่ งดี แต่ไม่รู้โปรแกรมสามารถใชท้ างานอะไรไดบ้ า้ งและท่ีสาคญั ยงั สร้างและหารายได้ ไดด้ ว้ ยใน ปัจจุบนั ซ่ึงมนั มาอยู่ในรู้แบบต่างๆ เช่น สติ๊กเกอร์บนผลิตภณั ฑ์ขนม นมเนยต่างๆ รวมถึง การสกรีนเส้ือ ออกแบบตา่ งๆมากมาย เป็นตน้ คณะผจู้ ดั ทาโครงการ จึงไดจ้ ดั ทา \"สื่อการออกแบบโลโกใ้ นโปรแกรม Photoshop ข้ึนมาเพ่ือเป็ นส่ือ การเรียนการสอน lสาหรับนกั เรียนท่ีสนใจการออกแบบโลโก้

คานา รายงานฉบบั น้ีเป็ นส่วนหน่ึงของวชิ าโครงการวชิ าชีพ ช้นั ปวส. 2 โดยมีจุดประสงคเ์ พ่ือเป็ นส่ือใน การหาความรู้ซ่ึงรายงานฉบบั น้ีมีเน้ือหาเก่ียวกบั ส่ือการสอนออกแบบโลโก้ ดว้ ยโปรแกรม Photoshop cc แบบพ้นื ฐานสามารถศึกษาเรียนรู้เขา้ ใจง่ายและสามารถนามาประยกุ ตใ์ ชไ้ ดจ้ ริงในชีวติ ประจาวนั ผจู้ ดั ทาไดเ้ ลือกหวั ในการทา รายงานเน่ืองมาจากในปัจจุบนั เรียกไดว้ า่ เป็ นยคุ แห่งการขบั เคลื่อนดว้ ย \"เทคโนโลย\"ี เราจะเห็นเทคโนโลยีต่างๆที่สร้างมาจาก โปรแกรมคอมพิวเตอร์ หลากหลายโปรแกรม ซ่ึงก็มี โปรแกรม photoshop อีกตวั นึงท่ีหลายๆคนรู้จกั กนั อยา่ งดี แต่ไม่รู้โปรแกรมสามารถใชท้ างานอะไรไดบ้ า้ ง และท่ีสาคัญยงั สร้างและหารายได้ ได้ด้วยในปัจจุบนั ซ่ึงมนั มาอยู่ในรู้แบบต่างๆ เช่น สติกเกอร์บน ผลิตภณั ฑข์ นม นมเนยตา่ งๆ รวมถึง การสกรีนเส้ือ ออกแบบต่างๆมากมาย ผูจ้ ดั ทาหวงั เป็ นอยา่ งย่ิงว่ารายงานเล่มน้ีจะมีประโยชน์ต่อผูอ้ ่าน คุณครู นกั เรียน หรือนกั ศึกษาที่ กาลงั หาขอ้ มูลเร่ืองน้ีอยู่ หากมีขอ้ แนะนาหรือมีขอ้ ผดิ พลาดประการใดขออภยั ไว้ ณ ที่น้ีดว้ ย ผจู้ ดั ทา นางสาวเจนจิรา นุ่ยโหน่ง นางสาวปารามีตา้ บินหมดั

สารบัญ หน้า บทท่ี 1 บทนา 1 บทท่ี 2 ทฤษฎีท่ีเกี่ยวขอ้ ง 4 บทท่ี 3 ข้นั ตอนการดาเนินงาน 31 บทท่ี 4 ผลการดาเนินงาน 40 40 - หนา้ แรกของเวบ็ ไซต์ 41 - โปรแกรม Photoshop cc 44 - เคร่ืองมือ 46 - ข้นั ตอนการสร้างโลโก้ 47 - วธิ ีดาวน์โหลด 53 - เกี่ยวกบั เรา 54 บทท่ี 5 สรุปผลการดาเนินงาน 54 - ปัญหาและอุปสรรคท่ีเกิดข้ึน 54 - แนวทางแกไ้ ข 54 - ขอ้ เสนอแนะ 55 อา้ งอิง ภาคผนวก 56 - ภาคผนวก ก ประวตั ิผจู้ ดั ทา

สารบัญรูปภาพ หน้า ภาพที่ 1 เขา้ ถึงเวบ็ ไซต์ 4 ภาพท่ี 2 สร้างเวบ็ ไซต์ 4 ภาพท่ี 3 ข้นั ตอนการต้งั ช่ือเวบ็ ไซต์ 5 ภาพท่ี 4 ข้นั ตอนการเพม่ิ หนา้ เพจเวบ็ ไซต์ 5 ภาพที่ 5 สร้างเมนูหนา้ เพจ 6 ภาพที่ 6 การใชง้ านธีม Theme Google sites 6 ภาพท่ี 7 การออกแบบเอกสาร 7 ภาพท่ี 8 การใส่รูปภาพ 7 ภาพท่ี 9 การสร้างลิงคใ์ นเวบ็ ไซต์ 8 ภาพท่ี 10 การสร้างวดี ิโอ 8 ภาพท่ี 11 ข้นั ตอนการเผยแพร่เวบ็ ไซต์ 9 ภาพท่ี 12 คลิกเมนู File > New จะปรากฏวนิ โดว์ New ข้ึนมา 10 ภาพท่ี 13 จากรูปมีการกาหนดค่าตา่ งๆมากมาย 11 ภาพที่ 14 คลิกเมนู File > Open จะปรากฏวนิ โดว์ Open ข้ึนมา 12 ภาพที่ 15 การเปิ ดไฟลภ์ าพ 12 ภาพที่ 16 การยอ่ หรือขยายมุมของภาพ 13 ภาพที่ 17 ภาพบริเวณที่ตอ้ งการขยายจะถูกซูมทาใหภ้ าพขยายใหญข่ ้ึน 13 ภาพที่ 18 การปรับขนาดของภาพ เลือกคาส่งั Image > Image Size 14 ภาพที่ 19 กาหนดความละเอียดของภาพ 14 ภาพที่ 20 การปรับจานวนพิกเซลของภาพ เลือกคาสง่ั Image > Image Size 15 ภาพที่ 21 เลือกหนา้ ช่อง Resample Image 15 ภาพท่ี 22 การเพิ่มพ้ืนท่ีของภาพ เลือกคาสั่ง Image > Canvas Size 16 ภาพที่ 23 กาหนดขนาด Width และ Height ตามตอ้ งการ 16 ภาพท่ี 24 การบนั ทึกงานที่สร้าง คลิกคาสงั่ File > Save As 17 ภาพท่ี 25 เลือก Drive ที่เราตอ้ งการจดั เกบ็ 17 ภาพท่ี 26 Viva Video: แอปตดั ต่อวดิ ีโอ เพลงฟรี 18 ภาพที 27 ข้นั ตอนการใชง้ านเบ้ืองตน้ 19 ภาพท่ี 28 เมนูแกไ้ ข 20

ภาพท่ี 29 การเลือกตดั ช่วงของวดิ ีโอที่จะนาไปแทรกในการตดั ต่อ 21 ภาพท่ี 30 เมนู ธีม 22 ภาพที่ 31 เมนู เพลง 23 ภาพท่ี 32 เมนูตดั ต่อ 23 ภาพที่ 33 หมายเลข 1 แกไ้ ขคลิป 24 ภาพที่ 34 หมายเลข 2 ขอ้ ความ 24 ภาพที่ 35 การเลือกรูปแบบกล่อง 24 ภาพท่ี 36 การเลือกปรับแต่งรูปแบบฟ้อนของขอ้ ความ 24 ภาพท่ี 37 การปรับแตง่ สีของขอ้ ความ 25 ภาพท่ี 38 การปรับแตง่ เอฟเฟค ของขอ้ ความเพิ่มเติม 25 ภาพที่ 39 หมายเลข 3 ฟิ ลเตอร์ 26 ภาพที่ 40 หมายเลข 4 สติ๊กเกอร์ 26 ภาพที่ 41 หมายเลข 5 เอฟเฟค 27 ภาพท่ี 42 หมายเลข 6 หลายเพลง 27 ภาพท่ี 43 หมายเลข 7 เสียง 28 ภาพที่ 44 หมายเลข 8 การเปลี่ยนภาพ 29 ภาพท่ี 45 หมายเลข 9 เพ่ิมคลิป 29 ภาพท่ี 46 การบนั ทึกแบบร่างคลิปวดิ ีโอ 30 ภาพที่ 47 การส่งออกคลิปวดิ ีโอ 30 ภาพท่ี 48 เปิ ดโปรแกรม Photoshop cc 34 ภาพที่ 49 กด File เลือก New เพือ่ สร้างงานชิ้นใหม่ 34 ภาพท่ี 50 กาหนดความกวา้ งและความยาวของหวั ขอ้ 35 ภาพที่ 51 จะไดห้ นา้ ตาแบบในรูป 35 ภาพที่ 52 กด File เลือก Open เพือ่ นารูปมาใส่ 36 ภาพที่ 53 นารูปมาวางในพ้ืนหลงั โดนกดCtrl c เพ่อื คดั ลอกรูป และกดCtrl v 36 เพ่ือวางรูป เสร็จแลว้ กดCtrl t เพอื่ ยอ่ ขยายรูปภาพตามที่ตอ้ งการ 37 ภาพที่ 54 กดที่ Rectangle Tool รูปส่ีเหล่ียม เพ่ือมาใส่เป็ นสีพ้ืนหลงั 37 โดยวาดเป็นส่ีเหล่ียมแลว้ หมุนเป็นแนวเฉียง 38 ภาพที่ 55 กด File เลือก Open เพอ่ื นารูปมาใส่ ภาพท่ี 56 นารูปมาวางในพ้ืนหลงั โดนกดCtrl c เพอ่ื คดั ลอกรูป 38 และกดCtrl v เพ่อื วางรูป เสร็จแลว้ กดCtrl t เพื่อยอ่ ขยายรูปภาพตามท่ีตอ้ งการ ภาพท่ี 57 คลิก File เลือก Save For Web

ภาพที่ 58 เลือกเป็น JPEG จากน้นั กด Save ใส่โฟลเดอร์ที่เราตอ้ งการ เพื่อนาหวั ขอ้ ไปใช้ 39 ภาพที่ 59 หนา้ แรกของเวบ็ ไซต์ ความหมายของโลโก้ 40 ภาพท่ี 60 ประเภทของโลโก้ 40 ภาพที่ 61 หนา้ แรกของโปรแกรม photoshop cc 41 ภาพที่ 62 ลกั ษณะโปรแกรม 41 42 ภาพที่ 63 สเปคของโปรแกรม 42 ภาพท่ี 64 ความแตกต่างPhotoshop CC กบั Photoshop CS6 43 ภาพท่ี 65 ประโยชนข์ องphotoshop cc 43 ภาพท่ี 66 จุดเด่นของโปรแกรมphotoshop cc 44 ภาพที่ 67 หนา้ แรกของเคร่ืองมือ 44 ภาพท่ี 68 พาเนลเครื่องมือ(toon panel) 45 ภาพที่ 69 บาร์ตวั เลือก(Option Bar) 46 ภาพท่ี 70 พาเนลของ photoshop (photoshop panels) 46 ภาพที่ 71 ตวั เลือกรูปแบบพ้ืนท่ีการทางาน(work pace) 47 ภาพที่ 72 หนา้ แรกของข้นั ตอนการสร้างโลโก้ 47 ภาพที่ 73 ข้นั ตอนการดาวน์โหลด ข้นั ตอนที่1 48 ภาพท่ี 74 ข้นั ตอนที่2 48 ภาพที่ 75 ข้นั ตอนที่3 48 ภาพท่ี 76 ข้นั ตอนที่4 49 ภาพท่ี 77 ข้นั ตอนท่ี5 49 ภาพท่ี 78 ข้นั ตอนท่ี6 49 ภาพที่ 79 ข้นั ตอนที่7 50 ภาพท่ี 80 ข้นั ตอนที่8 50 ภาพที่ 81 ข้นั ตอนท่ี9 50 ภาพที่ 82 ข้นั ตอนท่ี10 51 ภาพท่ี 83 ข้นั ตอนท่ี11 51 ภาพท่ี 84 ข้นั ตอนท่ี12 51 ภาพที่ 85 ข้นั ตอนที่13 52 ภาพท่ี 86 ข้นั ตอนท่ี14 52 ภาพท่ี 87 ข้นั ตอนท่ี15 52 ภาพท่ี 88 ข้นั ตอนท่ี16 53 ภาพที่ 89 ข้นั ตอนท่ี17

ภาพท่ี 90 ข้นั ตอนที่18 53 ภาพที่ 91 วดิ ีโอสอนดาวน์โหลด 53 ภาพท่ี 92 เกี่ยวกบั เรา 54

1 บทที่ 1 บทนา หลกั การและเหตุผล เนื่องจาก วิทยาลยั เทคโนโลยีสงขลา น้นั มีการจดั การเรียนการสอนท่ีมุ่งเน้นในการฝึ กปฏิบตั ิงาน จริงเป็นส่วนใหญ่ เพื่อใหน้ กั เรียน มีความรู้ ความเขา้ ใจ และเกิดทกั ษะในการทางานจริงสามารถนาไปใชใ้ น ชีวติ ประจาวนั ได้ เก่ียวกบั การใชง้ านคอมพวิ เตอร์ตา่ งๆ รวมถึงมีความปลอดภยั ในการทางาน มีคุณภาพ อีกท้งั ในปัจจุบนั เรียกวา่ เป็ นยุคแห่งการขบั เคลื่อนดว้ ย \"เทคโนโลย\"ี เราจะเห็นเทคโนโลยตี ่างๆท่ี สร้างมาจาก โปรแกรมคอมพิวเตอร์ หลากหลายโปรแกรม ซ่ึงก็มีโปรแกรม Photoshop cc เป็ นตวั หน่ึงท่ี หลายๆคนรู้จกั กนั อยา่ งดี แต่ไม่รู้โปรแกรมสามารถใชท้ างานอะไรไดบ้ า้ งและที่สาคญั ยงั สร้างและหารายได้ ไดด้ ว้ ยในปัจจุบนั ซ่ึงมนั มาอยใู่ นรู้แบบต่างๆ เช่น สต๊ิกเกอร์บนผลิตภณั ฑ์ขนม นมเนยต่างๆ รวมถึง การ สกรีนเส้ือ ออกแบบต่างๆมากมาย เป็นตน้ คณะผจู้ ดั ทาโครงการ จึงไดจ้ ดั ทา \"สื่อการสอนออกแบบโลโกใ้ นโปรแกรม Photoshop cc” ข้ึนมา เพอ่ื เป็นสื่อการเรียนการสอน สาหรับนกั เรียนท่ีสนใจการออกแบบโลโก้ วตั ถุประสงค์ 1. เพือ่ ใชใ้ นการศึกษาสาหรับผูท้ ี่ตอ้ งการออกแบบสร้างโลโก้ 2. เพอื่ อธิบายถึงข้นั ตอนการสร้างโลโกอ้ ยา่ งละเอียดและถูกตอ้ ง 3. เพือ่ สร้างเสริมจินตนาการใหผ้ ทู้ ี่ศึกษาไดอ้ อกแบบและสร้างโลโกข้ องตวั เองได้ 4. เพอ่ื แกป้ ัญหาการเสียค่าใชจ้ า่ ยในการจา้ งทาโลโก้ 5. เพอื่ เพิม่ ศกั ยภาพในการทางานของผใู้ ชง้ านใหม้ ากยงิ่ ข้ึน เป้าหมาย เป้าหมายเชิงปริมาณ เวบ็ ไซตส์ ื่อการสอนออกแบบโลโก้ ดว้ ยโปรแกรม Photoshop cc เป้าหมายเชิงคุณภาพ - สามารถใหผ้ ทู้ ี่ศึกษาโครงการไดร้ ู้วธิ ีการ และข้นั ตอนการสร้างโลโก้ - สามารถนามาเป็นสื่อการเรียนการสอนและดูหลกั การใช้ Photoshop cc ในการสร้างโลโก้

2 วธิ ีดาเนินการดาเนินงาน ที่ ข้นั ตอนการปฏิบัติงาน กนั ยายน 64 ตุลาคม 64 พฤศจิกายน 64 123412341234 1. ประชุมคิดหวั ขอ้ โครงการวชิ าชีพและวาง แผนการทางาน 2. หาอาจารยท์ ี่ปรึกษาและปรึกษาการจดั ทา โครงการวชิ าชีพ 3. เขียนขออนุมตั ิโครงการวชิ าชีพ 4. คิดคน้ และหาขอ้ มูลจากแหล่งต่างๆ 5. ออกแบบโครงสร้างเว็บไซต์และออกแบบ หนา้ เวบ็ ไซต์ 6. อัด วิดี โ อ ข้ัน ต อ น ก า ร ส ร้ า ง โ ล โ ก้ใ น โปรแกรม Photoshop cc เพื่อมาใชป้ ระกอบ ในเวบ็ ไซตก์ ารสอน 7. จดั ทาเวบ็ ไซตส์ ่ือการสอนออกแบบโลโกใ้ น โปรแกรม Google site เพื่อนาเสนอวิธีการ สร้างโลโกพ้ ร้อมใส่วดิ ีโอประกอบ ธันวาคม 64 มกราคม 65 กมุ ภาพนั ธ์ 65 123412341234 8. จดั ทารายงานสื่อการสอนออกแบบโลโก้ ดว้ ยโปรแกรม Photoshop cc 9. จัดทาE-bookข้ันตอนการสร้างโลโก้เพ่ือ เป็ นส่ือการเรี ยนการสอน 10. นาเสนอโครงการวชิ าชีพ ระยะเวลาดาเนินงาน วนั ท่ี 11 กนั ยายน 2564 – 1 กมุ ภาพนั ธ์ 2565 สถานทด่ี าเนินงาน 1. บา้ นเลขที่ 54/15 ม.6 ต.คลองแห อ.หาดใหญ่ จ.สงขลา 90110 2. บา้ นเลขที่ 89 ม.2 ต.ตล่ิงชนั อ.จะนะ จ.สงขลา 90130 3. วทิ ยาลยั เทคโนโลยสี งขลา เลขท่ี 175 ม.8 ต.เขารูปชา้ ง อ.เมือง จ.สงขลา 90000

3 4. งบประมาณและทรัพยากร ค่าใชจ้ ่าย กระดาษ A4 2 รีม 218 บาท คา่ เขา้ เล่มรายงาน 150 บาท รวมค่าใช้จ่ายท้งั สิ้น 368 บาท ผลทคี่ าดว่าจะได้รับ 1. สามารถใชใ้ นการศึกษาสาหรับผทู้ ี่ตอ้ งการออกแบบสร้างโลโก้ 2. สามารถใหผ้ ทู้ ี่ศึกษาโครงการไดส้ ร้างโลโกอ้ ยา่ งถูกตอ้ งตามข้นั ตอน 3. สามารถสร้างเสริมจินตนาการใหผ้ ทู้ ่ีศึกษาไดอ้ อกแบบและสร้างโลโกข้ องตวั เองได้ 4. สามารถแกป้ ัญหาการเสียค่าใชจ้ ่ายในการจา้ งทาโลโก้ 5. สามารถเพมิ่ ศกั ยภาพในการทางานของผใู้ ชง้ านใหม้ ากยงิ่ ข้ึน ปัญหาและอุปสรรคทค่ี าดว่าจะเกดิ ขนึ้ 1.เน่ืองจากสถานการณ์Covid-19 ทาใหก้ ารทางานและการสื่อสารกนั ในกลุ่มคอ่ นขา้ งลาบาก 2.คอมพวิ เตอร์เกิดการขดั ขอ้ ง ทาใหท้ างานล่าชา้ 3.ศึกษาขอ้ มูลในการทาโปรแกรมใหม่ท้งั หมด 4.ขอ้ มูลบนเวบ็ ไซตไ์ มม่ ีการอปั เดต ไม่มีความเล่ือนไหวใหมๆ่ 5.การเยยี่ มชมเวบ็ ไซตม์ ีจานวนนอ้ ย ผ้รู ับผดิ ชอบโครงการวชิ าชีพ 1. นางสาว เจนจิรา นุ่ยโหน่ง รหสั 6332543514 ช้นั ปวส.2 (ป) สาขาเทคโนโลยธี ุรกิจดิจิทลั 2. นางสาว ปารามีตา้ บินหมดั รหสั 6332543458 ช้นั ปวส.2 (พ) สาขาเทคโนโลยธี ุรกิจดิจิทลั อาจารย์ทป่ี รึกษาโครงการวชิ าชีพ นางสาวรัชนี แกว้ เจริญ

4 บทที่ 2 ทฤษฎที ่ีเกยี่ วข้อง 1. สร้างเวบ็ ไซต์ด้วย Google Sites Google Sites ใหบ้ ริการคร้ังแรกเม่ือเดือนพฤษภาคม 2551 Google Sites คือโปรกรมของ Google ท่ี ให้บริการสร้างเว็บไซต์ฟรี สามารถสร้างเว็บไซต์ได้ง่าย ปรับแต่งรูปลกั ษณ์ได้ สามารถรวบรวมความ หลากหลายของขอ้ มูลไวใ้ นที่เดียว เช่น รูปภาพ วีดิโอ ปฏิทิน เอกสาร อื่นๆ สามารถนามาแทรกในหนา้ เวบ็ เพจไดใ้ ชง้ านไดง้ ่าย ทาใหช้ ่วยอานวยความสะดวกไดเ้ ป็นอยา่ งมาก 1.วธิ ีการสร้างเวบ็ ไซต์ 1.1 เขา้ ถึงเวบ็ ไซตไ์ ดจ้ าก http://sites.google.com 1.2 สร้างเวบ็ ไซตใ์ หม่ดว้ ยการคลิกไปที่รูป +

5 1.3 ข้นั ตอนการต้งั ช่ือเวบ็ ไซต์ การต้งั ช่ือเวบ็ ไซต์ เราสร้างหนา้ เพจข้ึนมา สาหรับส่วนของตาแหน่ง Google sites จะทาการต้งั ให้ โดยอตั โนมตั ิ 1.3.1 การสร้างหนา้ แรกเพจของเวบ็ ไซต์ -ใส่ช่ือเวบ็ ไซต์ ชื่อเวบ็ ใหส้ ื่อถึงขอ้ มูลเวบ็ ไซต์ -ใส่ช่ือขอ้ มูลหนา้ เพจ 1 2 1.4 ข้นั ตอนการเพม่ิ หนา้ เพจเวบ็ ไซต์ 1.4.1 แถบเมนูและฟังกช์ นั่ ท่ีใชเ้ พ่ิมลูกเล่นให้กบั เวบ็ ไซต์ รวมไปถึง gadget ต่างๆ และเคร่ืองมือ 1.42 เมนูแทรก เป็ นเมนูท่ีควบคุมเก่ียวกบั การใช้มีเดีย เช่น การใส่รูปภาพ ลิงค์ วดี ิโอ แผนที่ ปฏิทิน จึงทาใหเ้ มนูน้ี ถูกใชง้ านบอ่ ยที่สุด

6 1.5 สร้างเมนูหนา้ เพจ 1.5.1 เริ่มตน้ สร้างเมนูหนา้ เพจ หนา้ เวบ็ โดยคลิกที่ป่ ุม ดา้ นบนของหนา้ จอเมนูมุมดา้ นขวา หนา้ เวบ็ 1.5.2 เลือกดา้ นล่างคาวา่ สร้างหนา้ เวบ็ ใหมแ่ ละเมนูหนา้ เพจ เม่ือเปิ ดหนา้ สร้างเพจใหมข่ ้ึนมาแลว้ กรอกช่ือ ต้งั ช่ือหนา้ เวบ็ เพจ เมนู เลือกตาแหน่งเมนูที่ตอ้ งการ 1 3 2 1.5.3 การใชง้ านธีม Theme Google sites ใหเ้ ราเลือกใชต้ ามที่มีใหเ้ ท่าน้นั ไม่สามารถเพิ่ม เองได้

7 1.6 ข้นั ตอนการสร้างเน้ือหาในเวบ็ ไซต์ 1.6.1 การออกแบบเอกสาร จะใส่รูปหรือขอ้ ความเน้ือหา ทาไดต้ ามรูปแบบท่ี Google sites กาหนดมาใหเ้ ราเลือกและวา่ งตามจุดท่ีตอ้ งการใส่เน้ือหาและขอ้ มูลหรือรูปภาพ 1.6.2 การใส่รูปภาพ สามารถเลือกอพั โหลดรูปภาพท่ีตอ้ งการจะใส่ หรือภาพที่ Google sites มีใหแ้ ละปรับขนาดของภาพไดต้ ามท่ีตอ้ งการ

8 1.7 การสร้างลิงคใ์ นเวบ็ ไซต์ เลือกขอ้ ความลากมาวางไวต้ ามตาแหน่งท่ีตอ้ งการใส่ขอ้ มูลเน้ือหาที่ ตอ้ งการลิงค์ แลว้ เลือก URL เวบ็ ที่ตอ้ งการลิงคไ์ ปหา 1.8 การสร้างวดี ิโอ เลือกวีดิโอจากที่อพั โหลดเองหรือเลือก Youtube เอามาแทรกลงในหนา้ เพจได้ เลย

9 1.9 ข้นั ตอนการเผยแพร่เวบ็ ไซต์ คลิกเลือกเมนูป่ ุมเผยแพร่ ใส่ท่ีเราตอ้ งการเผยแพร่ แนะนาใหเ้ ป็น ภาษาองั กฤษ

10 2. โปรแกรม Adobe Photoshop CC ปัจจุบนั การสร้างภาพกราฟิ กนบั วา่ เป็ นสิ่งหน่ึงท่ีสาคญั มาก เพราะภาพกราฟิ กจะถูกใชใ้ น หลาย ๆ งานด้วยกนั เช่น งานออกแบบสิ่งพิมพ์ วารสาร นิตยสาร แผ่นพบั งานโฆษณาบนสื่อ สิ่งพมิ พต์ า่ ง ๆ งานออกแบบบนเวบ็ ไซต์ ตลอดจนการตกแตง่ รูปภาพของผใู้ ชโ้ ดยทวั่ ไป โปรแกรม Adobe Photoshop CC จดั ว่าเป็ นโปรแกรมสร้างสรรค์ภาพ และตกแต่ง ภาพกราฟิ กที่ไดร้ ับความนิยมเป็นอยา่ งมาก เพราะมีเครื่องมือที่พร้อมต่อการทางาน ทาให้นกั กราฟิ ก ส่วนใหญต่ ่างก็ใช้ Photoshop ในการตกแต่งภาพกราฟิ ก ความสามารถพ้นื ฐานของ Adobe Photoshop cc ท่ีควรทราบ • ตกแตง่ หรือแกไ้ ขรูปภาพ • ตดั ต่อภาพบางส่วน หรือที่เรียกวา่ crop ภาพ • เปล่ียนแปลงสีของภาพ จากสีหน่ึงเป็นอีกสีหน่ึงได้ • สามารถลากเส้น แบบฟรีสไตล์ หรือใส่รูปภาพ สี่เหล่ียม วงกลม หรือสร้างภาพไดอ้ ยา่ ง อิสระ • มีการแบ่งช้นั ของภาพเป็น Layer สามารถเคลื่อนยา้ ยภาพไดเ้ ป็นอิสระต่อกนั • การทา cloning ภาพ หรือการทาภาพซ้าในรูปภาพเดียวกนั • เพ่ิมเติมขอ้ ความ ใส่ effect ของขอ้ ความได้ • Brush หรือแปรงทาสี ที่สามารถเลือกรูปแบบสาเร็จรูปในการสร้างภาพไดแ้ ละอื่นๆ อีก มากมาย 2.1 การสร้างงานใหม่ ในกรณีท่ีตอ้ งการสร้างรูปภาพข้ึนใหม่เอง เช่น การใชเ้ คร่ืองมือวาดภาพแบบต่าง ๆ ใน Adobe Photoshop CC จะใหก้ าหนดขนาดของพ้ืนทีในการสร้างงาน ซ่ึงข้ึนอยูก่ บั ความตอ้ งการของผใู้ ช้ เราสามารถสร้างงาน ใหม่และกาหนดขนาด Working Area ไดโ้ ดยใหป้ ฏิบตั ิดงั น้ี 2.1.1 คลิกเมนู File > New จะปรากฏวนิ โดว์ New ข้ึนมา

11 2.1.2 จากรูปมีการกาหนดคา่ ต่างๆมากมาย ดงั รูป • ช่อง Name คือการกาหนดช่ือของชิ้นงาน • ช่อง Preset คือ ชนิดของงานตา่ งๆ ท่ีกาหนดไวใ้ หแ้ ลว้ มีใหเ้ ลือกมากมาย เช่น Web , Photo ,U.S.paper , international paper • ช่อง size จะสมั พนั ธ์กบั ช่อง Preset คือ ขนาดของงานแต่ละชนิด เช่น ค่า Preset เป็น International paper ช่อง Size กจ็ ะมีตวั เลือก คือ A4 , A3 , A2 ,A1 และอ่ืนๆ • ช่อง width คือขนาดความกวา้ งของชิ้นงาน หากตอ้ งการกาหนดเอง มีหน่วยใหเ้ ลือก 7 ชนิด • ช่อง Hight คือขนาดความสูงของชิ้นงาน • ช่อง Resolution คือ ความละเอียดของงาน มีหน่วยเป็น Pixelตอ่ นิ้ว และ Pixel ต่อเซนติเมตร • ช่อง Color mode คือชนิดของพ้ืนท่ีสีในการทางาน มีใหเ้ ลือกหลากหลาย เช่น RGB , CMYK และมี คา่ ความละเอียดใหเ้ ลือกเป็น bit • ช่อง Background Contents คือเลือกชนิดของ พ้ืนหลงั งาน มี 3 แบบ คือ แบบขาว แบบสี และแบบ โปร่งใส เมื่อทาการกาหนดขนาดของงานเสร็จเรียบร้อยแลว้ ใหค้ ลิปป่ ุม OK เพื่อทาการเปิ ดพ้ืนที่การทางานดงั ตวั อยา่ งภาพ เปิ ดพ้นื ท่ีงานขนาด A4 พ้นื หลงั สีขาว ถา้ ตอ้ งการยกเลิกใหค้ ลิกป่ ุม Cancel

12 2.2 การเปิ ดไฟลภ์ าพ 2.2.1 คลิกเมนู File > Open จะปรากฏวนิ โดว์ Open ข้ึนมา 2.2.2 เลือก Drive หรือโฟลเดอร์ที่เกบ็ รูปภาพไว้ 2.2.3 คลิกเลือกไฟลร์ ูปภาพ 2.2.4 คลิกป่ ุม Open เพือ่ เปิ ดไฟลภ์ าพ

13 2.3 การยอ่ หรือขยายมุมของภาพ เราสามารถยอ่ หรือขยายมุมมองของภาพ โดยยอ่ ให้เล็กลงหรือขยายให้ใหญ่ข้ึนไดต้ ามความจาเป็ น ในขณะท่ีทางาน เพอื่ ความสะดวกในการแตง่ รายละเอียด จากน้นั จึงยอ่ มุมมองเพื่อดูภาพรวม ของผลลพั ธ์ 2.3.1 คลิกเลือกเคร่ืองมือ Zoom ในแถบเครื่องมือ 2.3.2 คลิกเมาส์ ไปวางบริเวณท่ีตอ้ งการซูมภาพ 2.3.3 ภาพบริเวณที่ตอ้ งการขยายจะถูกซูมทาใหภ้ าพขยายใหญข่ ้ึน 2.3.4 ถา้ ตอ้ งการยอ่ ภาพลง ใหก้ ดคีย์ Alt ท่ีคียบ์ อร์ดคา้ งไว้ เมาส์จะเปลี่ยนเป็นรูป 2.3.5ภาพบริเวณที่ตอ้ งการจะถูกซูมยอ่ เขา้ ทาใหภ้ าพเลก็ ลง

14 2.4 การปรับขนาดของภาพ รูปภาพที่มีอยู่แล้วและนามาใช้ใน Photoshop ส่ิงแรกที่ต้องจดั กระทาคือ ตอ้ งปรับขนาด ภาพให้ เหมาะสมกบั การทางาน เช่น การลดขนาดภาพเพ่ือไปแสดงบนเวบ็ เพจ การปรับขนาดภาพแบ่งได้เป็ น 2 แบบคือ • การปรับ Document Size และ Resolution โดยจานวนพกิ เซลคงเดิม • การปรับโดยเพิ่มหรือลดจานวนพกิ เซลของภาพ การปรับ Document Size และ Resolution การปรับวิธีน้ีจะมีผลให้ค่า Document Size และ Resolution ภาพเปล่ียนแปลง แต่ จานวนและ คุณสมบตั ิของพกิ เซลท้งั หมดคงเดิม เมื่อดูบนหนา้ จอภาพจึงเหมือนเดิมทุกอยา่ ง แต่เวลาพิมพภ์ าพจะมีขนาด และคุณภาพท่ีเปล่ียนไป 2.4.1 เลือกคาส่งั Image > Image Size 2.4.2 ใหค้ ลิกเลือกเคร่ืองหมายถูก หนา้ Resample Image ออก 2.4.3 กาหนดความละเอียดของภาพในช่อง Resolution ซ่ึงมีค่าเป็ นจานวนพิกเซลต่อนิ้ว ภาพท่ีมี ความ คมชดั มากท่ีสุดจะมีจานวนพิกเซลสูงสุด ซ่ึงจะมีผลทาให้ขนาดของภาพเล็กลงดว้ ย ส่วนภาพที่มีความ คมชดั นอ้ ยท่ีสุด จะมีจานวนพิกเซลต่อนิ้วนอ้ ยท่ีสุดและจานวนภาพจะมีขนาดใหญ่ 2.4.4 คลิกป่ ุม OK

15 2.5 การปรับจานวนพิกเซลของภาพ การปรับวิธีน้ีมีผลใหจ้ านวนพิกเซลของภาพเปลี่ยนแปลง โดยอาจเพ่ิมข้ึนหรือลดลงไดล้ กั ษณะเช่นน้ี เรียกว่า การรีแซมเปิ ล (Resample) การลดขนาด (Downsample) โปรแกรมจะยุบรวมหลายๆ พิกเซลเขา้ ดว้ ยกนั กลายเป็ นพิกเซลใหม่คุณภาพของภาพจะไม่ค่อยเปล่ียนแปลงการเพ่ิมขนาด (Upsample) โปรแกรม จะสร้างพกิ เซลเพิม่ ข้ึนจากเดิมที่มีอยแู่ ลว้ ซ่ึงค่าสีของพิกเซลจะคานวณมาจากพกิ เซลขา้ งเคียง ผลการปรับจะ ไดภ้ าพท่ีมีคุณภาพลดลง เพราะฉะน้นั ท้งั การเพิ่มและลดขนาด โปรแกรมจะคานวณเพื่อสร้างพิกเซลใหม่ จากพกิ เซลเดิมของภาพเรียกวา่ Interpolation 2.5.1 เลือกคาส่ัง Image > Image Size 2.5.2 เลือกหนา้ ช่อง Resample Image 2.5.3 เลือกใหโ้ ปรแกรมคานวณเพ่ือสร้างพิกเซลใหม่ โดยกาหนดให้ค่า Resolution เป็น 72 พกิ เซลตอ่ นิ้ว 2.5.4ใน Pixel Dimensions ใหเ้ ลือกหน่วยเป็นพกิ เซลและกาหนดขนาดความกวา้ งและความสูงของภาพ 2.5.5 คลิกป่ ุม OK

16 2.6 การเพมิ่ พ้ืนท่ีของภาพ กรณีท่ีเราตอ้ งการปรับแตง่ ภาพ เช่น เพมิ่ ขอ้ ความหรือรูปภาพอ่ืนเขา้ ไปในภาพเดิม ซ่ึงพ้ืนที่ของภาพมี ไม่เพียงพอ เราสามารถเพิม่ ขนาดพ้ืนที่ของรูปภาพไดโ้ ดย 2.6.1 เลือกคาสั่ง Image > Canvas Size 2.6.2 กาหนดขนาด Width และ Height ตามตอ้ งการ 2.6.3 กาหนดขนาดใหม่ของภาพ หรือขนาดที่ตอ้ งการเพิ่มหรือลด • ถา้ ไม่เลือก Relative ใหก้ าหนดขนาดภาพใหม่ • ถา้ เลือก Relative ใหก้ าหนดขนาดท่ีตอ้ งการเพม่ิ หรือลดจากเดิม 2.6.4 กาหนดทิศทางการขยายพ้ืนท่ีจากจุดใด ๆ โดยใชช้ ่องสีเทาเป็นหลกั 2.6.5 คลิก OK

17 2.7 การบนั ทึกงานที่สร้าง เม่ือปรับรูปภาพเป็นที่พอใจแลว้ สามารถบนั ทึกงานไวเ้ พอื่ นามาใชใ้ นการแกไ้ ขคร้ังตอ่ ไปไดโ้ ดยการ บนั ทึกไฟลล์ งในเครื่องเพื่อใชง้ านในโอกาสต่อไป 2.7.1 คลิกคาส่งั File > Save As 2.7.2 เลือก Drive ท่ีเราตอ้ งการจดั เก็บ 2.7.3 พิมพช์ ่ือไฟลท์ ี่ตอ้ งการจดั เก็บ 2.7.4 คลิกเลือกชนิดของไฟล์ (เลือก JPG สาหรับบนั ทึกภาพนิ่งทวั่ ไป ใชอ้ พั โหลดข้ึนเวบ็ ได้ , นามสกลุ .psd สาหรับไฟล์ photoshop ท่ีนาไปแกไ้ ขภายหลงั ได)้ 2.7.5 คลิก Save 2.7.6 ระบุคุณภาพความคมชดั ของงาน (คา่ ยง่ิ มากคุณภาพกย็ ง่ิ สูง) 2.7.7 คลิก OK

18 3. Viva Video: แอปตัดต่อวดิ โี อ เพลงฟรี Viva Video: แอปตดั ต่อวดิ ีโอ เพลงฟรี บนโทรศพั ทข์ องคุณไมต่ อ้ งกงั วลกบั การชาร์จไฟมากเกินไป ปลดปล่อยตวั คุณเองจากหน้าจอขนาดเล็กและสนุกกบั การใช้แอปน้ีบนหน้าจอขนาดใหญ่ จากน้ีไปรับ ประสบการณ์เตม็ หนา้ จอของแอพพลิเคชน่ั ของคุณดว้ ยคียบ์ อร์ดและเมาส์ Menu มีคุณสมบตั ิที่น่าแปลกใจที่ คุณคาดหวงั : การติดต้งั ที่รวดเร็วและการต้งั ค่าที่ง่ายควบคุมไดง้ ่ายไม่ จากดั แบตเตอร่ีขอ้ มูลมือถือและการ โทรท่ีรบกวน Menu 7 ใหม่ล่าสุดเป็ นตวั เลือกท่ีดีที่สุดสาหรับการใช้ Viva Video: แอปตดั ต่อวิดีโอ เพลงฟรี บนคอมพิวเตอร์ของคุณ ดว้ ยรหสั การดูดซึมของเราผจู้ ดั การหลายอินสแตนซ์ทาให้สามารถเปิ ดบญั ชี 2 บญั ชี ข้ึนไปในเวลาเดียวกนั ได้ และท่ีสาคญั ท่ีสุดเอ็นจิ้นจาลองพิเศษของเราสามารถปลดปล่อยศกั ยภาพของPC ของคุณและทาใหท้ ุกอยา่ งราบร่ืนและสนุกสนาน Viva Video เป็ น application เพื่อช่วยถ่ายและตดั ต่อวิดีโอขนาดส้ัน พร้อมลูกเล่นในการตกแต่งต่างๆ ที่ สามารถทาเองไดง้ ่ายๆ โดยไม่เสียค่าใชจ้ ่าย โดยผูใ้ ชส้ ามารถแชร์คลิปวดิ ีโอท่ีตดั ต่อและตกแต่งผา่ น Social media เช่น WhatsApp Twitter Instagram Line Facebook Youtube ไดท้ นั ที หรือจะส่งผา่ นอีเมล์และ Google Drive กไ็ ด้

19 2.8 ข้นั ตอนการใช้งานเบือ้ งต้น 3.1.1 เร่ิมตน้ เขา้ ใชง้ านแอปพลิเคชนั่ โดยกดท่ีไอคอน Viva Video เม่ือเขา้ ใชง้ าน จะเจอ หน้าต่างแนะนาข้อมูลการอพั เดทล่าสุดให้กด “ข้าม” ดังรูปล่างซ้าย และหน้าตาเมนู แอปพลิเคชนั่ Viva Video (V 5.0) เป็นดงั รูปดา้ นขวา ส่วนที่ 1 แกไ้ ข เป็นเมนูที่ใชใ้ นการตดั ต่อไฟลV์ DO ส่วนที่ 2 สไลดโ์ ชว์ เป็นเมนูที่ใชใ้ นการทาสไลดโ์ ชวจ์ ากไฟลร์ ูปภาพ ส่วนที่ 3 จบั ภาพ เป็ นเมนูที่ใชใ้ นการอดั ภาพ VDO ซ่ึงจะมีโหมดต่างๆใหเ้ ลือกภายในเมนู แต่ VDO ท่ีอดั ในโหมดน้ีจะมีความคมชดั นอ้ ย ส่วนที่ 4 Selfie เป็ นเมนูทางลดั ของโหมด Selfie ในเมนูจบั ภาพ คู่มือการใช้งาน แอปพลิเคชน่ั Viva Video เบ้ืองตน้ 1 2 3 4 5 6 7 8 9 10 ส่วนที่ 5 อุปกรณ์ เป็ นเมนูที่ใชป้ รับแต่งฟังก์ชน่ั ต่างๆท่ีมีในแอป เช่น ธีม ขอ้ ความ เอฟเฟก เป็ นตน้ ส่วนท่ี 6 ของขวญั เป็นเมนูของรางวลั สาหรับผใู้ ชแ้ อป ส่วนท่ี 7 สตูดิโอ เป็นเมนูเก็บคลงั ภาพและบนั ทึกแบบร่างของผใู้ ชง้ าน ส่วนท่ี 8 เครื่องมือเพิ่มเติม เป็ นเมนูท่ีรวบรวมโหมดอื่นๆเพิ่มเติมของแอป เช่น ภาพตดั ปะ มิวสิกวดิ ีโอ เป็นตน้ *** ในคู่มือน้ีจะเนน้ ในเร่ืองของการตดั ต่อวดิ ีโอเป็ นหลกั (เมนูแกไ้ ข) เพื่อการนาไปใชป้ ระโยชน์มากที่สุด ส่วนการตกแตง่ เพือ่ ความบนั เทิงเพิ่มเติม ผใู้ ชส้ ามารถ ทดลองใชไ้ ดเ้ องตามความตอ้ งการ ***

20 3.2 เมนูแก้ไข ก่อนเขา้ ใชง้ านเมนูแกไ้ ข เราจะตอ้ งมีไฟลว์ ดิ ีโอที่ตอ้ งการตดั ต่อเตรียมไวก้ ่อน เมื่อ เขา้ ใชง้ านเมนูแกไ้ ข จะมีรายการวดิ ีโอใหเ้ ราเลือกเพอื่ จะนามาตดั ต่อ (ภาพล่างซา้ ย) และเม่ือกดเขา้ ไป ที่คลิป วดิ ีโอน้นั ๆ เราสามารถเลือกช่วงของวดิ ีโอท่ีเราตอ้ งการนาไปใชไ้ ด้ (ภาพล่างขวา)

21 ในส่วนของการเลือกตดั ช่วงของวดิ ีโอที่จะนาไปแทรกในการตดั ต่อ มีคาอธิบายดงั น้ี หมายเลข 1 แถบดา้ นขา้ งเป็ นแถบแสดงช่วงที่ เราเลือกในวิดีโอน้นั ๆ โดยเรา สามารถเล่ือนเลือกแบบ รวดเร็วโดยการกดที่แถบดา้ นขา้ งไดเ้ ลย หรือหากตอ้ งการ เลื่อนเลือกช่วงเวลาแบบ ละเอียดใหก้ ดเลือกแถบดา้ นขา้ ง ท่ีตอ้ งการเลือก (เม่ือเลือกแลว้ จะเป็ นสีเหลือง) แลว้ ใหก้ ด เลื่อนท่ีหนา้ จอ วดิ ีโอใหญ่ หมายเลข 2 เป็นส่วนที่ใชพ้ ลิกวดิ ีโอ หมายเลข 3 เป็นส่วนขยายวดิ ีโอแบบเตม็ อตั ราส่วน (ไม่มีแถบสีดา) หมายเลข 4 เป็ นส่วนท่ีใชต้ ดั เลือกช่วงวดิ ีโอที่ ตอ้ งการเลือก เมื่อที่รูปกรรไกรแลว้ ส่วนวดิ ีโอที่เลือกจะ เพ่ิมเขา้ ไปใน หมายเลข 5 เมื่อปรับแต่งและเลือกช่วงวิดีโอที่ ตอ้ งการเรียบร้อยแลว้ ใหก้ ดเพ่ิม ตรงส่วนน้ีเขา้ ไปที่ วดิ ีโอหลกั เมื่อกดเพม่ิ เขา้ มาในวดิ ีโอหลกั เรียบร้อยแลว้ เราจะไดร้ ายการช่วงวิดีโอท่ีเลือก มาในแตล่ ะคลิป อยดู่ า้ นล่าง (ดงั ภาพล่างซา้ ย) และเม่ือไม่ตอ้ งการเปลี่ยนแปลงใดๆแลว้ ให้กดที่ป่ ุมเรียบร้อย เพื่อเขา้ สู่ การตดั ต่อเพิ่มเติม (ภาพล่างชวา) ซ่ึงมีคาอธิบายดงั ตอ่ ไปน้ี

22 3.3 เมนู ธีม เป็ นเมนูท่ีใช้ในการเลือกชุดปรับแต่ง (ธีม) ท่ีนาไปใชก้ บั วิดีโอท้งั หมด โดยจะมี ให้ เลือกหลากหลายรูปแบบ ผูใ้ ชง้ านสามารถดาวน์โหลดเพ่ิมเติมได้ มีท้งั แบบฟรีและเสียเงิน แต่ในที่น้ีเรา จะ ไมใ่ ชใ้ นส่วนตกแตง่ ของธีมมาเพมิ่ เติมในวดิ ีโอ

23 3.4 เมนู เพลง เป็นเมนูท่ีใชใ้ นการเลือกเพลง เพ่อื นาไปใชก้ บั วดิ ีโอท้งั หมด 3.5 เมนูตดั ต่อ เป็นเมนูที่ใชต้ ดั ต่อวดิ ีโอท้งั หมดเป็นหลกั ซ่ึงจะมีคาอธิบายยอ่ ยดงั ต่อไปน้ี

24 3.5.1 หมายเลข 1 แกไ้ ขคลิป เป็ นเมนูสาหรับการแกไ้ ขตดั ต่อรายละเอียดคลิป เพ่ิมเติมซ่ึง จะมีรายละเอียดปลีกยอ่ ยภายในเมนูแกไ้ ขคลิป ดงั ตอ่ ไปน้ี A. ตดั เป็นการตดั ต่อวดิ ีโอแบบเลือกช่วง คลา้ ยๆในส่วนแรก แตจ่ ะเป็นการตดั ตอ่ ในส่วนยอ่ ยลงไปอีก B. แบง่ เป็นการตดั แบง่ วดิ ีโอน้นั ๆ ออกเป็นสองส่วน C. สาเนา เป็นการคดั ลอกวดิ ีโอน้นั ๆ เพือ่ ทาสาเนาเพิ่มอีก D. ความเร็วคลิป เป็นการปรับความเร็วของวดิ ีโอน้นั ๆ ตามความตอ้ งการ E. ปิ ดเสียง เป็นการเลือกปิ ดเสียงในวดิ ีโอน้นั ๆ ท่ีเลือกอยู่ F. ยอ้ น เป็นการปรับแตง่ ใหว้ ดิ ีโอน้นั ๆ ที่เลือกอยเู่ ปล่ียนไปในลกั ษณะยอ้ นกลบั G. เล่ือนและซูม เป็นการเปิ ด-ปิ ดฟังกช์ น่ั เลื่อนและซูม 3.5.2 หมายเลข 2 ขอ้ ความ เป็ นเมนูสาหรับการแทรกขอ้ ความในวิดีโอหลกั โดยสามารถ เลือกช่วงที่ตอ้ งการใหข้ อ้ ความน้นั ๆแสดงไดพ้ ร้อมดว้ ยความสามารถในการปรับแต่งขอ้ ความ ดงั น้ี A. เป็นส่วนของการเลือกรูปแบบกล่อง ขอ้ ความที่ตอ้ งการนาไปใช้ โดยมีหลากหลาย รูปแบบใหเ้ ลือกตามความเหมาะสม B. เป็นส่วนของการเลือกปรับแตง่ รูปแบบฟ้อนของขอ้ ความ โดยผใู้ ชส้ ามารถเลือก ดาวนโ์ หลดเพ่ิมเติมไดต้ ามความตอ้ งการ

25 C. เป็นส่วนของการปรับแตง่ สี ของขอ้ ความ D. เป็นส่วนของการปรับแตง่ เอฟเฟกต์ ของขอ้ ความเพมิ่ เติม เช่น ขอ้ ความเคลื่อนไหว (มีการเฟดขอ้ ความ) เงา การจดั เรียง เป็นตน้ เพ่อื ใหข้ อ้ ความดูเด่นและสวยงาม เมื่อทาการพิมพข์ อ้ ความ เลือกตาแหน่ง และตกแต่งขอ้ ความเสร็จเรียบร้อย ใหก้ ดท่ี เครื่องหมาย √ ดา้ นบนขวา (ดงั รูปล่างซา้ ย) เพ่อื เพม่ิ ขอ้ ความลงในวดิ ีโอหลกั แลว้ โปรแกรมจะใหเ้ ลือกช่วง ของวดิ ีโอท่ีเราตอ้ งการแสดงขอ้ ความน้นั ๆ (แถบสีส้มดงั ภาพล่างขวา) เม่ือเราไดช้ ่วงท่ีเราตอ้ งการแลว้ ใหก้ ด ท่ีเคร่ืองหมาย √ ดา้ นล่างอีกคร้ัง เพ่อื เพิ่มขอ้ ความในช่วงน้นั ๆ เป็นอนั เรียบร้อย

26 3.5.3 หมายเลข 3 ฟิ ลเตอร์ เป็ นเมนูสาหรับการเพิ่มตวั กรองปรับแต่งโทนสีของ คลิปวดิ ีโอ แต่ละคลิปท่ีเลือก (รายการคลิปจะอยู่ดา้ นล่างสุด) จะคลา้ ยกบั การปรับแต่งในโปรแกรมแต่งรูป ทว่ั ไป 3.5.4 หมายเลข 4 สต๊ิกเกอร์ เป็นเมนูสาหรับการเพิ่มสต๊ิกเกอร์(ภาพน่ิง) ลงไปในคลิปวิดีโอ ซ่ึงผใู้ ชส้ ามารถดาวนโ์ หลดเพมิ่ ไดเ้ ช่นกนั

27 3.5.5 หมายเลข 5 เอฟเฟค เป็ นเมนูสาหรับการเพ่ิมเอฟเฟค (ภาพเคล่ือนไหว)ลงไปในคลิป วดิ ีโอ มีลกั ษณะคลา้ ยสติ๊กเกอร์ แต่จะเป็นภาพเคล่ือนไหวพร้อมเสียงประกอบ 3.5.6 หมายเลข 6 หลายเพลง เป็นเมนูสาหรับการเพิ่มเสียงประกอบแบบหลายเสียง โดยเรา สามารถเลือกแทรกเสียงเพลงประกอบไดห้ ลากหลายช่วงตามท่ีตอ้ งการ

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

29 3.5.8 หมายเลข 8 การเปล่ียนภาพ เป็นเมนูสาหรับเพ่มิ เอฟเฟค ระหวา่ งเปล่ียนคลิปวิดีโอ เพ่ือใหช้ ุดวิดีโอน้นั ๆ มีความสวยงามมากย่ิงข้ึน โดยเอฟเฟคระหวา่ งเปล่ียนคลิป น้นั ภายในโปรแกรมมีให้เลือกมากมายลว้ นเป็ นเอฟเฟคพ้ืนฐานทวั่ ไปในการทาคลิปวิดีโอ ผูใ้ ชส้ ามารถ เลือกใชไ้ ดต้ ามความเหมาะสม 3.5.9 หมายเลข 9 เพิ่มคลิป เป็ นเมนูสาหรับเพิ่มคลิปวิดีโออ่ืนๆ ท่ีตอ้ งการเพ่ิมเขา้ มาใน ภายหลงั มีลกั ษณะเหมือนกบั ฟังกช์ นั่ เพ่มิ คลิปวดิ ีโอท่ีกล่าวมาขา้ งตน้

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

31 บทท่ี 3 ข้นั ตอนการดาเนินงาน ในการสร้างเวบ็ ไซตส์ ่ือการสอนการทาโลโกด้ ว้ ยโปรแกรม Photoshop cc ไดจ้ ดั ทาจากโปรแกรม Photoshop cc เป็นหลกั ซ่ึงจะใชใ้ นการสร้างหวั ขอ้ เวบ็ ไซต์ วธิ ีการดาเนินงาน 1. ประชุมคิดหวั ขอ้ โครงการวชิ าวางแผนการทางาน 2. ทาบทามหาอาจารยท์ ่ีปรึกษาการจดั ทาโครงการ 3. เขียนขออนุมตั ิโครงการวชิ าชีพ 4. คิดคน้ หาขอ้ มูลจากแหล่งต่างๆ 5. ออกแบบโครงสร้างเวบ็ ไซตแ์ ละออกแบบหนา้ เวบ็ ไซต์ 6. อดั วดิ ีโอข้นั ตอนการสร้างโลโกใ้ นโปรแกรม Photoshop เพอ่ื มาใชป้ ระกอบในเวบ็ ไซตก์ าร สอน 7. จดั ทาเวบ็ ไซตว์ ธิ ีการสร้างโลโกใ้ นโปรแกรม Google site เพ่อื นาเสนอวธิ ีการสร้างโลโก้ พร้อมใส่วดิ ีโอประกอบ 8. จดั ทารายงานข้นั ตอนการสร้างโลโกเ้ พ่อื เป็นส่ือการเรียนการสอน 9. นาเสนอโครงการวชิ าชีพ

โครงสร้างเวบ็ ไซต์ โครงสร้างเวบ็ ไซต์ เรื่อง สื่อการสอนก หนา้ หลกั โปรแกรม Photoshop เคร่ืองมือ ลกั ษณะโปรแกรม Tool Panel พาเนลเครื่องม Photoshop cc Option bar บาร์ตวั เลือก สเปกของโปรแกรม Photoshop panels พาเนล ของ Photoshop ความแตกตา่ งระหวา่ ง cc กบั CS Work Pace เพจตวั เลือก ประโยชนข์ อง Photoshop cc รูปแบบพ้นื ที่การ จุดเด่นของโปรแกรม

32 การทาโลโกด้ ว้ ยโปรแกรม Photoshop cc ข้นั ตอนการสร้างโลโก้ วธิ ีดาวนโ์ หลด เก่ียวกบั เรา มือ ข้นั ตอนการสร้างโลโก(้ วดิ ีโอ)

โครงสร้างเวบ็ เพจหน้าแรก เวบ็ ไซต์ เร่ือง ส่ือการสอนการทา Photoshop cc หนา้ หลกั โปรแกรม เครื่องมือ ข้นั ตอ Photoshop สร้าง รูปภาพ เน้ือหาใตภ้ าพ : คาแนะ

33 าโลโกด้ ว้ ยโปรแกรม เก่ียวกบั เรา c อนการ งโลโก้ วธิ ีดาวน์โหลด พ ะนา วทิ ยาลยั เทคโนโลยสี งขลา เลขท่ี 175 ม.8 ต.เขารูปชา้ ง อ.เมือง จ.สงขลา 90000

34 ข้นั ตอนการสร้างเวบ็ ไซต์ การสร้างหวั ข้อ เปิ ดโปรแกรม Photoshop cc กด File เลือก New เพ่ือสร้างงานชิ้นใหม่

35 กาหนดความกวา้ งและความยาวของหวั ขอ้ จะไดห้ นา้ ตาแบบน้ี

36 กด File เลือก Open เพื่อนารูปมาใส่ นารูปมาวางในพ้นื หลงั โดนกดCtrl c เพือ่ คดั ลอกรูป และกดCtrl v เพื่อวางรูป เสร็จแลว้ กดCtrl t เพ่อื ยอ่ ขยายรูปภาพตามท่ีตอ้ งการ

37 กดที่ Rectangle Tool รูปส่ีเหล่ียม เพื่อมาใส่เป็นสีพ้นื หลงั โดยวาดเป็นส่ีเหล่ียมแลว้ หมุนเป็นแนว เฉียง กด File เลือก Open เพื่อนารูปมาใส่

38 นารูปมาวางในพ้ืนหลงั โดนกดCtrl c เพื่อคดั ลอกรูป และกดCtrl v เพ่อื วางรูป เสร็จแลว้ กดCtrl t เพือ่ ยอ่ ขยายรูปภาพตามที่ตอ้ งการ คลิก File เลือก Save For Web