โครงการการออกแบบป้ายสาขาเทคโนโลยีธุรกิจดิจิทัล ด้วยโปรแกรม Adobe Photoshop และ Adobe Illustrator

การออกแบบปา้ ยสาขาวิชาเทคโนโลยธี ุรกิจดจิ ทิ ัล
ดว้ ยโปรแกรม Adobe Photoshop และ Adobe Illustrator
Digital Business Technology Department Signage Design
By Program Adobe Photoshop and Adobe Illustrator

นางสาวณภัทรภัค บญุ คุณ รหสั นักเรียน 6122040009
นางสาวนภสร บุญเกิด รหัสนกั เรียน 6122040017
นางสาวนางสาวสรุ ารักษ์ สคุ นธทรัพย์ รหสั นักเรียน 6122040033

โครงการนเี้ ป็นสว่ นหนึ่งของรายวชิ าโครงการ รหัสวชิ า (2204-8501)
ภาคเรยี นที่ 2 ปกี ารศกึ ษา 2563
สาขาวชิ าเทคโนโลยีธรุ กจิ ดจิ ิทัล
วทิ ยาลยั เทคนิคระยอง

การออกแบบป้ายสาขาวิชาเทคโนโลยธี รุ กจิ ดจิ ิทลั
ด้วยโปรแกรม Adobe Photoshop และ Adobe Illustrator
Digital Business Technology Department Signage Design
By Program Adobe Photoshop and Adobe Illustrator

นางสาวณภทั รภคั บญุ คุณ รหัสนกั เรียน 6122040009

นางสาวนภสร บุญเกิด รหสั นกั เรียน 6122040017

นางสาวนางสาวสรุ ารักษ์ สุคนธทรพั ย์ รหสั นักเรียน 6122040033

โครงการน้เี ป็นสว่ นหน่งึ ของรายวิชาโครงการ รหสั วชิ า (2204-8501)
ภาคเรยี นที่ 2 ปกี ารศึกษา 2563
สาขาวิชาเทคโนโลยีธุรกจิ ดจิ ิทัล
วิทยาลัยเทคนคิ ระยอง

ก

โครงการ การออกแบบปา้ ยสาขาวิชาเทคโนโลยีธุรกจิ ดจิ ทิ ลั ดว้ ยโปรแกรม Adobe
สาขาวิชา Photoshop และ Adobe Illustrator
Digital Business Technology Department Signage Design By
Program Adobe Photoshop and Adobe Illustrator
เทคโนโลยธี ุรกจิ ดจิ ิทลั

ผู้รบั ผิดชอบโครงการ 1. นางสาวณภัทรภัค บญุ คุณ รหสั นักเรยี น 6122040009

2. นางสาวนภสร บุญเกิด รหสั นกั เรียน 6122040017

3. นางสาวสุรารักษ์ สคุ นธทรัพย์ รหัสนกั เรยี น 6122040033

อาจารยท์ ป่ี รึกษา นางสาวอัจฉราภรณ์ เกล้ียงพร้อม

นางปาณสิ รา บำรงุ รตั น์

ปีการศกึ ษา 2563

บทคดั ย่อ

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

ชื่อโครงการ “การออกแบบป้ายสาขาวิชาเทคโนโลยีธุรกิจดิจิทัลด้วยโปรแกรม Adobe Photoshop

แ ล ะ Adobe Illustrator” ด ้ ว ย โ ป ร แ ก ร ม Adobe Photoshop แ ล ะ Adobe Illustrator

ศึกษาความพึงพอใจของนักเรียนระดับประกาศนียบัตรวิชาชีพ สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล

วิทยาลัยเทคนิคระยอง ที่มีต่อ การออกแบบป้ายสาขาวิชาเทคโนโลยีธุรกิจดิจิทัล ด้วยโปรแกรม

Adobe Photoshop และ Adobe Illustrator และเผยแพร่ปา้ ยสาขาวิชาเทคโนโลยีธุรกิจดิจิทัล ดว้ ย

โปรแกรม Adobe Photoshop และ Adobe Illustrator โดยมีกลุ่มตัวอย่างที่ใช้เก็บผล

แบบประเมิน คือ นักเรียนระดับประกาศนียบัตรวิชาชีพ สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล

จำนวน 191 คน โดยใช้เกณฑ์ของ Krejcie & Morgan และเครื่องมือที่ใช้ในการประเมิน คือ

ป้ายสาขาวิชาเทคโนโลยีธุรกิจดิจิทัล วิทยาลัยเทคนิคระยองโปรแกรม Adobe Photoshop และ

Adobe Illustrator และ แบบสอบถามความพึงพอใจของนักเรียนระดับประกาศนียบัตรวิชาชีพ

สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล วิทยาลัยเทคนิคระยอง ที่มีต่อการออกแบบป้าย

สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล ด้วยโปรแกรม Adobe Photoshop และ Adobe Illustrator

ซึ่งสถิติที่ใช้คือ ค่าร้อยละ (Percentage) ค่าเฉลี่ย (x̅) ค่าเบี่ยงเบนมาตรฐาน (S.D Standard

Deviation)

ก

ผลที่ได้รับจากแบบสอบถามความพึงพอใจการออกแบบป้ายสาขาวิชาเทคโนโลยีธุรกิจดิจิทัล
ด้วยโปรแกรม Adobe Photoshop และ Adobe Illustrator ที่มีต่อโครงการ“การออกแบบป้าย
สาขาวิชาเทคโนโลยีธุรกิจดิจิทัลด้วยโปรแกรมAdobe Photoshop และ Adobe Illustrator”
อย่ใู นระดบั มาก (x̅=4.34, S.D=0.62) แบง่ เปน็ ทัง้ หมด 3 ดา้ นดังน้ี ดา้ นองค์ประกอบรวมของชิ้นงาน
อยู่ในระดับมาก (x̅=4.36, S.D=0.64) ด้านป้ายอยู่ในระดับมาก (x̅=4.35, S.D=0.65) และ
ดา้ นขาตัง้ อยใู่ นระดบั มาก (x̅=4.30, S.D=0.65)

คำสำคัญ : แนวคิดเกี่ยวกับการออกแบบ/ แนวคิดเกี่ยวกับเทคโนโลยีธุรกิจดิจิทัล/
แนวคิดเกี่ยวกับป้าย/ แนวคิดเกี่ยวกับโปรแกรม Adobe Illustrator/ แนวคิดเกี่ยวกับโปรแกรม
Adobe Photoshop

ข

กิตติกรรมประกาศ

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

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

คณะผ้จู ดั ทำ

สารบัญ ค

บทคัดย่อ หน้า
กิตติกรรมประกาศ ก
สารบัญ ข
สารบญั (ตอ่ ) ค
สารบัญตาราง ค
สารบัญภาพ ง
สารบัญภาพ (ตอ่ ) จ
สารบัญภาพ (ต่อ) จ
บทท่ี 1 บทนำ จ

1.1 ความเปน็ มาและความสำคัญของโครงการ 1
1.2 วัตถุประสงค์ของโครงการ 2
1.3 ขอบเขตของโครงการ 2
1.4 ผลท่คี าดวา่ จะไดร้ บั 3
1.5 คำจำกัดความ 3
บทที่ 2 เอกสารและทฤษฎที ี่เกยี่ วข้อง
2.1 แนวคิดเก่ียวกบั การออกแบบ 4
2.2 แนวความคิดเกย่ี วกับเทคโนโลยธี ุรกจิ ดจิ ิทลั 9
2.3 แนวคดิ เก่ยี วกบั ป้าย 10
2.4 แนวคดิ เกี่ยวกับโปรแกรม Adobe Illustrator 11
2.5 แนวคิดเกี่ยวกบั โปรแกรม Adobe Photoshop 20
บทที่ 3 วิธกี ารดำเนินงานโครงการ
3.1 การศึกษาข้อมลู เบื้องต้น 34
3.2 ประชากรและกล่มุ ตัวอย่าง 35
3.3 ขัน้ ตอนการดำเนนิ งาน 36
3.4 เครื่องมือท่ใี ชใ้ นการเก็บรวบรวมขอ้ มูล 40
3.5 ขน้ั ตอนการดำเนินการและเก็บรวบรวมข้อมลู 41

สารบัญ (ตอ่ ) ค

บทที่ 3 วธิ ีการดำเนนิ งานโครงการ หน้า
3.6 พิจารณาจากคะแนนตาม 42
3.7 สถิตทิ ี่ใชใ้ นการวิเคราะห์ข้อมูล 43

บทที่ 4 ผลการวิเคราะหข์ อ้ มลู 44
4.1 ผลการดำเนนิ การ
51
บทท่ี 5 สรปุ อภิปรายผลและข้อเสนอแนะ 52
5.1 สรปุ อภปิ รายผล 52
5.2 ข้อเสนอแนะ 53
5.3 ประโยชนท์ ไี่ ดร้ ับ
55
บรรณานุกรม 60
ภาคผนวก 64
65
ก แบบเสนออนมุ ตั ิโครงการ
ข ภาพขั้นตอนการทำโครงการ
ค แบบประเมินความพึงพอใจ
ประวัติผูจ้ ดั ทำ

สารบัญตาราง ง

ตารางที่ หนา้
4.1 แสดงจำนวนของผูต้ อบแบบสอบถามคดิ เปน็ ร้อยละจำแนกตามเพศ 44
4.2 แสดงจำนวนของผูต้ อบแบบสอบถามคิดเปน็ ร้อยละจำแนกตามอายุ 45
4.3 แสดงความพึงพอใจส่วนป้าย 46
4.4 แสดงความพึงพอใจสว่ นขาต้งั 47
4.5 แสดงความพึงพอใจองค์ประกอบรวมของชนิ้ งาน 48
4.6 แสดงสถติ ิระดับความพึงพอใจของนักเรียนระดับประกาศนียบตั รวชิ าชีพ 49
ทปี่ ระเมินโครงการการออกแบบป้ายสาขาวิชาเทคโนโลยีธุรกิจดิจิทลั
ดว้ ยโปรแกรม Adobe Photoshop และ Adobe Illustrator

สารบญั ภาพ จ

ภาพท่ี หน้า
2.1 แสดงการออกแบบ 4
2.2 แสดงจินตนาการความคิดสร้างสรรค์ 5
2.3 แสดงการออกแบบทางสถาปตั ยกรรม (Architecture Design) 6
2.4 แสดงการออกแบบผลคิ ภัณฑ์ (Product Design) 7
2.5 แสดงการออกแบบทางวิศวกรรม (Engineering Design) 7
2.6 แสดงการออกแบบตกแตง่ (Decorative Design) 8
2.7 แสดงการออกแบบสิ่งพิมพ์ (Graphic Design) 8
2.8 แสดงโลโกส้ าขาวชิ าเทคโนโลยีธรุ กิจดจิ ิทลั 9
2.9 แสดงปา้ ยโฆษณา หรือ แผงโฆษณา 10
2.10 แสดงป้ายคำร้อง 10
2.11 แสดงป้ายจราจร 11
2.12 แสดง Icon โปรแกรม Adobe Illustrator 11
2.13 แสดงหนา้ จอโปรแกรม Illustrator 12
2.14 แสดงแถบเมนู (Menu bar) 12
2.15 แสดงแถบ (File) 13
2.16 แสดงแถบ (Edit) 13
2.17 แสดงแถบ (Type) 14
2.18 แสดงแถบ (Select) 14
2.19 แสดงแถบ (Filter) 15
2.20 แสดงแถบ (Effect) 15
2.21 แสดงแถบ (Window) 16
2.22 แสดงแถบ (Help) 16
2.23 แสดงกล่องเคร่ืองมือ (Toolbox) 17
2.24 แสดงคอนโทรลพาเนล (Control Panel) 17
2.25 แสดงพืน้ ท่ีการทำงาน (Artboard) 18
2.26 แสดงพาเนลควบคมุ การทำงาน (Panel) 18
2.27 แสดงการแตกไฟลโ์ ปรแกรมเสรจ็ สิน้ และคลิกไฟล์โปรแกรม 19

สารบญั ภาพ (ตอ่ ) จ

ภาพท่ี หน้า
2.28 แสดงกดคลิกขวาท่ตี ัวโปรแกรมและกด Run as administrator 19
2.29 แสดงรอโปรแกรมเปดิ ใชง้ าน 20
2.30 แสดง Icon แสดงสญั ลกั ษณ์ของโปรแกรม Adobe Photoshop 20
2.31 แสดงหน้าต่างของโปรแกรมและสว่ นประกอบต่างๆ 21
2.32 แสดง (Menu bar) 21
2.33 แสดงแถบ (File) 22
2.34 แสดงแถบ (Edit) 22
2.35 แสดงแถบ (Image) 23
2.36 แสดงแถบ (Layer) 23
2.37 แสดงแถบ (Select) 24
2.38 แสดงแถบ (Filter) 24
2.39 แสดงแถบ (View) 25
2.40 แสดงแถบ (Window) 25
2.41 แสดงแถบ (Help) 26
2.42 แสดงเมนูของพนื้ ท่ที ำงาน (Panel menu) 26
2.43 แสดงพน้ื ที่ในการทำงาน 27
2.44 แสดงเคร่ืองมือทใี่ ชง้ าน (Tools panel) 27
2.45 แสดงกลุ่มคำสง่ั (Serection) 28
2.46 แสดงกลมุ่ คำสัง่ (Edit) 28
2.47 แสดงกลุ่มคำสง่ั ตวั อกั ษร วาดภาพ 29
2.48 แสดงกลุ่มคำสง่ั (View) 29
2.49 แสดงกลมุ่ คำสง่ั เลือกสี 29
2.50 แสดงกล่มุ คำส่ัง (Quick Mash) 29
2.51 แสดงส่งิ ท่ีควบเคร่ืองมือที่ใช้งาน Tools control menu 30
หรอื Option bar
2.52 แสดงดับเบิลคลกิ ท่ี Set-up Adobe PhotoshopCS6 30
2.53 แสดงหนา้ ต่างนี้ให้รอโปรแกรมซักครู่ 30

สารบญั ภาพ (ต่อ) จ

ภาพท่ี หน้า
2.54 แสดงคลิกท่ี Try 31
2.55 แสดงคลิกที่ Accept 31
2.56 แสดงหนา้ ตา่ งนีค้ ือการเลือกติดต้ังเม่ือเลอื กการติดตั้งเสร็จแล้ว 32
คลกิ ที่ Install
2.57 แสดงรอโปรแกรมการตดิ ต้งั เสร็จ 32
2.58 แสดงเสร็จสนิ้ การตดิ ต้ังโปรแกรม 33
3.1 แสดงตารางทฤษฎขี อง Krejcie & Morgan 35
3.2 แสดงการออกแบบแผนผังงาน 36
3.3 แสดงการออกแบบผงั งาน 37
3.4 แสดงการออกแบบผังงาน 38
3.5 แสดงปา้ ยสาขาวิชาเทคโนโลนธี รุ กิจดจิ ิทลั 20% 38
3.6 แสดงปา้ ยสาขาวชิ าเทคโนโลนธี ุรกิจดิจทิ ัล 30% 39
3.7 แสดงป้ายสาขาวชิ าเทคโนโลยธี รุ กิจดิจิทลั 40% 39
3.8 แสดงปา้ ยสาขาวิชาเทคโนโลนีธรุ กิจดจิ ิทลั 100% 39
3.9 แสดงควิ อาร์โคด้ 40
4.1 แสดงแผนภมู ขิ องผู้ตอบแบบสอบถามโครงการจำแนกตามเพศ 44
4.2 แสดงแผนภมู ิของผู้ตอบแบบสอบถามโครงการจำแนกตามอายุ 45
4.3 แสดงแผนภมู ิแสดงความพึงพอใจสว่ นปา้ ย 46
4.4 แสดงแผนภูมิแสดงความพอใจสว่ นขาตัง้ 47
4.5 แสดงแผนภมู ิแสดงความพงึ พอใจองคป์ ระกอบรวมของช้ินงาน 48
4.6 แสดงแผนภมู แิ สดงความพงึ พอใจดา้ นสถิติ 50

บทที่ 1
บทนำ

บทที่ 1
บทนำ

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

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

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

ดังนั้นผู้จัดทำได้ตระหนักถึงปัญหาและความทรุดโทรมของป้ายสาขาวิชาคอมพิวเตอร์ธุรกิจ
โดยนำโปรแกรม Adobe Photoshop และ Adobe Illustrator มาทำการออกแบบป้ายสาขาวิชา
เทคโนโลยีธุรกิจดิจิทัล เนื่องจากสาขาวิชาคอมพิวเตอร์ธุรกิจได้มีการปรับเปลี่ยนหลักสูตรการเรียน
การสอนและปรับเปลี่ยนชื่อสาขาวิชาใหมเ่ ป็นสาขาวิชาเทคโนโลยีธุรกิจดิจิทลั โดยการออกแบบป้าย
สาขาวิชาใหม่ในครั้งนี้ ผู้จัดทำได้คำนึงถึงการแสดงให้เห็นถึงการพัฒนาหลักสูตรการศึกษาการสอน
และการพฒั นาสาขาวชิ าให้มีความทันสมยั มากยิ่งขน้ึ ผา่ นการจดั ทำปา้ ยสาขาเทคโนโลยีธรุ กจิ ดิจิทลั

2

1.2 วัตถุประสงคข์ องโครงการ
1.2.1 เพื่อออกแบบป้ายสาขาวิชาเทคโนโลยีธุรกิจดิจิทัล ด้วยโปรแกรม Adobe Photoshop

และ Adobe Illustrator
1.2.2 เพื่อศึกษาความพึงพอใจของนักเรียนระดับประกาศนียบัตรวิชาชีพ สาขาวิชา

เทคโนโลยีธุรกิจดิจิทัล วิทยาลัยเทคนิคระยอง ที่มีต่อการออกแบบป้ายสาขาวิชา
เทคโนโลยธี ุรกจิ ดจิ ิทัล ด้วยโปรแกรม Adobe Photoshop และ Adobe Illustrator

1.2.3 เพื่อเผยแพร่ป้ายสาขาวิชาเทคโนโลยีธุรกิจดิจิทัล ด้วยโปรแกรม Adobe Photoshop
และ Adobe Illustrator ผ่านโครงการประกวดโครงการวิชาชีพ ชมรมวชิ าชีพเทคโนโลยีธรุ กิจดจิ ทิ ัล

1.3 ขอบเขตของโครงการ
1.3.1 ประชากรและกลุม่ ตัวอยา่ ง
1.3.1.1 ประชากร คือ นักเรียนระดับประกาศนียบัตรวิชาชีพ สาขาวิชาเทคโนโลยีธุรกิจ

ดจิ ทิ ัล วิทยาลัยเทคนคิ ระยอง จำนวน 378 คน
1.3.1.2 กลุ่มตัวอย่าง คือ นักเรียนระดับประกาศนียบัตรวิชาชีพ สาขาเทคโนโลยีธุรกิจ

ดจิ ิทัล วิทยาลัยเทคนิคระยอง จำนวน 191 คน
1.3.2 ขอบเขตชน้ิ งาน
1.3.2.1 ด้านฮาร์ดแวร์
1) โทรศพั ท์มอื ถือ Huawei Y7 Pro2018
2) คอมพวิ เตอร์พกพา Acer nitro 5 Intel core i5
1.3.2.2 ด้านซอฟตแ์ วร์
1) โปรแกรม Adobe Photoshop cc 2020
2) โปรแกรม Adobe Illustrator
3) Microsoft Word
4) Google From
5) ระบบปฏิบตั ิการ Windows 10
1.3.3. เครื่องมือที่ใช้ในการประเมินผล คือ ป้ายสาขาวิชาเทคโนโลยีธุรกิจดิจิทัล

วิทยาลัยเทคนิคระยองโปรแกรมAdobe Photoshop และAdobe Illustratorและแบบสอบถาม
ความพึงพอใจของนักเรียนระดับประกาศนียบัตรวิชาชีพ สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล
วิทยาลัยเทคนิคระยอง ที่มีต่อการออกแบบป้ายสาขาวิชาเทคโนโลยีธุรกิจดิจิทัลด้วยโปรแกรม
Adobe Photoshop และ Adobe Illustrator

3

1.4 ผลทีค่ าดวา่ จะได้รบั
1.4.1 ไดป้ ้ายสาขาวิชาเทคโนโลยธี ุรกจิ ดิจิทัล ด้วยโปรแกรม Adobe Photoshop และ Adobe

Illustrator จำนวน 1 ปา้ ย ขนาด 60*120 เซนตเิ มตร
1.4.2 ได้ความพึงพอใจของนักเรียนระดับประกาศนียบัตรวิชาชีพ สาขาเทคโนโลยีธุรกิจดิจิทลั

วิทยาลัยเทคนิคระยอง ที่มีต่อการออกแบบป้ายสาขาวิชาเทคโนโลยีธุรกิจดิจิทัล ด้วยโปรแกรม
Adobe Photoshop และ Adobe Illustrator มีความพึงพอใจอย่ใู นระดบั มาก

1.4.3 ได้เผยแพร่ป้ายสาขาเทคโนโลยีธุรกิจดิจิทัล ด้วยโปรแกรม Adobe Photoshop
และ Adobe Illustrator ผ่านโครงการประกวดโครงการวิชาชีพ ชมรมวิชาชีพเทคโนโลยีธุรกิจดิจิทลั

1.5 คำจำกัดความ
1.5.1 แนวคิดเกี่ยวกับการออกแบบ หมายถึง ผลงานท่ีมีการออกแบบจากผู้ออกแบบท่ี มี

ความคิดสร้างสรรค์ และมีเอกลักษณ์ของตนการออกแบบนั้นก็จะได้ผลงานที่มีคุณภาพ แต่ถ้า
ผูอ้ อกแบบ ไม่มคี วามคดิ สรา้ งสรรค์ และไมม่ ีเอกลกั ษณ์ของตนผลงานที่ได้ก็จะไม่มีคณุ ถาพ

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

1.5.3 แนวคิดเกี่ยวกับป้าย หมายถึง แผ่นแสดงข้อความ ในการเล่าเรื่องราว รวมถึงการบอก
ความหมาย คำส่งั คำรอ้ ง โฆษณา ไปตลอดจนถึงปา้ ยแสดงความเสยี ใจ และความรับผิด

1.5.4 แนวคิดเกี่ยวกับโปรแกรม Adobe Illustrator หมายถึง เป็นซอฟต์แวร์สำหรับสร้าง
ภาพกราฟกิ ในรูปแบบ Vector

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

บทที่ 2
เอกสารและทฤษฎที เี่ กี่ยวขอ้ ง

บทท่ี 2
เอกสารและทฤษฎีทเี่ กยี่ วข้อง

เพอื่ เป็นแนวทางในการจัดทำโครงการคร้งั น้ี คณะผู้จัดทำได้ศึกษาเอกสารและทฤษฎที ่ี
เกี่ยวข้องตา่ ง ๆ ดังนี้

2.1 แนวคิดเกี่ยวกับการออกแบบ
2.2 แนวคดิ เกย่ี วกบั เทคโนโลยีธุรกจิ ดจิ ิทลั
2.3 แนวคิดเกย่ี วกับปา้ ย
2.4 แนวคิดเกี่ยวกบั โปรแกรม Adobe Illustrator
2.5 แนวคิดเกี่ยวกับโปรแกรม Adobe Photoshop
2.1 แนวคดิ เก่ยี วกบั การออกแบบ
2.1.1 การออกแบบ หมายถึง จะแสดงออกให้เห็นได้ในผลงานท่ีออกแบบหากผู้ออกแบบมี
แนวคิดที่ดีมีความคิดสร้างสรรค์ และมีเอกลักษณ์ของตนการออกแบบนั้นก็จะได้ผลงานที่ดี มีคุณค่า
และมีเอกลักษณ์หากผู้ออกแบบไม่มีแนวคิดที่ดี ไม่มีความคิดสร้างสรรค์ และไม่มีเอกลักษณ์ของตน
หรอื ว่าเพยี งแตเ่ อางานทมี่ ีอยู่เดิมแล้ว มาปรบั เปลีย่ นเลก็ นอ้ ยหรือลอกเลยี นการออกแบบของผู้อื่น มา
ดัดแปลงเพยี งเล็กน้อยผลงานท่ีออกมากจ็ ะไมม่ คี ุณคา่ ไม่มีเอกลักษณ์เปน็ เพียงผลงานการออกแบบท่ี
พื้น ๆ ธรรมดา [www.fdesignbasis.blogspot.com]

ภาพที่ 2.1 แสดงการออกแบบ

5

2.1.2 แนวคดิ ในการออกแบบทด่ี ี
2.1.2.1 แนวคดิ ในการออกแบบท่ดี ีน้นั
ควรจะตอ้ งมกี ารคิดอย่างสรา้ งสรรค์นักออกแบบท่ีดี อยา่ งน้อยควรมคี วามรู้พื้นฐาน

ในการแก้ไขปัญหาเมื่อมีปัญหาก็สามารถร้วู ่าปัญหานั้นเคยไดร้ ับการแก้ไขอย่างไรมาก่อนนักออกแบบ
ทด่ี คี วรใหค้ วามสนใจกบั โครงสร้างทางวศิ วกรรมของงานชน้ิ น้ัน ๆ และมคี วามรู้พน้ื ฐาน ในโครงสร้าง
ลักษณะของการทำงานและลักษณะการใช้งานของสิ่งที่ได้ออกแบบแนวคิดในการออกแบบที่ดี
ผู้ออกแบบจะต้องไม่สนใจแต่ในความงามเพียงอย่างเดียวแนวคิดในการออกแบบที่ดี ต้องใช้งานง่าย
และสร้างประโยชน์แกผ่ ู้ใช้ได้อยา่ งสูงสุดโดยนักออกแบบที่ดีจะต้องมีการบริหารจัดการทรัพยากร ได้
อยา่ งถูกต้องเหมาะสม
[http://fdesignbasis.blogspot.com]

2.1.2.2 จินตนาการความคดิ สร้างสรรค์
จนิ ตนาการความคิดสรา้ งสรรค์นนั้ ไม่ได้ตอ้ งเกย่ี ววา่ จะต้องมสี ติปัญญาท่ดี ีเลิศเลอ

หรือต้องมีการศึกษาสูงส่งแต่อย่างใดกระบวนการความคดิ สรา้ งสรรค์ เป็นการผสมผสาน จินตนาการ
ประสพการณ์ ขอ้ มลู ทม่ี ีอยู่ เพอื่ ใหเ้ กิดแนวคิดใหม่หรือผลงานใหม่ ๆ ทีย่ งั ไมเ่ คยมีมาก่อนกระบวนการ
ความคิดสร้างสรรค์นั้น ขึ้นอยู่กับความสามารถของนักออกแบบแต่ละคนนักออกแบบที่ดีควรจะมี
คุณสมบัติ เช่น จะต้องเป็นคนช่างสังเกตรู้จักตั้งข้อสังเกต และ มีความมุ่งมั่นทางความคิดไม่ล้มเลิก
ความคิดนัน้ โดยง่ายเพราะในการจะเกิดส่งิ ใหม่ ๆ อาจจะมาจากการลองผิดลองถูกหลายครั้งหลายหน
รู้จักการพิจารณา การคิดวิเคราะห์ปัญหา รู้จักใฝ่หาเรียนรู้สิ่งใหม่อยู่เสมอสามารถเชื่อมโยงความรู้
ประสพการณ์ และจินตนาการสร้างสรรค์ได้อย่างลงตัวรู้จักที่จะใช้ความคิดอย่างมีระบบ มี
ความสามารถในการวางแผน จัดการอย่างรอบคอบมีความยืดหยุ่นในภาคปฎิบัติ และมีความสนใจ
ข่าวสาร ของการออกแบบต่าง ๆ
[http://fdesignbasis.blogspot.com]

ภาพท่ี 2.2 แสดงจนิ ตนาการความคิดสร้างสรรค์

6

2.1.3 ประเภทของการออกแบบ
2.1.3.1 การออกแบบทางสถาปัตยกรรม )Architecture Design) เปน็ การออกแบบเพื่อ

การกอ่ สร้าง ส่งิ กอ่ สร้างต่าง ๆนกั ออกแบบสาขานี้ เรยี กว่า สถาปนกิ )Architect) ซ่งึ โดยท่ัวไปจะต้อง
ทำงานรว่ มกบั วศิ วกรและมณั ฑนากร โดยสถาปนิกรบั ผดิ ชอบเกย่ี วกับประโยชน์ใชส้ อยและความงาม
ของสง่ิ ก่อสรา้ ง งานทางสถาปัตยกรรมได้แก่

1) สถาปัตยกรรมทั่วไป เป็นการออกแบบสิ่งก่อสร้างทั่วไป เช่น อาคาร
บ้านเรือน ร้านค้า โบสถ์ วิหาร ฯลฯ

2) สถาปัตยกรรมโครงสรา้ ง เป็นการออกแบบเฉพาะโครงสรา้ งหลักของอาคาร
3) สถาปัตยกรรมภายใน เป็นการออกแบบที่ตอ่ เน่ืองจากงานโครงสรา้ ง ที่เป็น
สว่ นประกอบของอาคาร
4) งานออกแบบภูมิทัศน์ เป็นการออกแบบที่มีบริเวณกว้างขวาง เป็นการจัด
บรเิ วณพนื้ ทตี่ ่าง ๆ เพ่อื ให้เหมาะสมกบั ประโยชนใ์ ช้สอยและความสวยงาม
5) งานออกแบบผังเมือง เป็นการออกแบบที่มีขนาดใหญ่ และมีองค์ประกอบ
ซับซ้อน ซึ่งประกอบไปด้วยกลุ่มอาคารจำนวนมาก ระบบภูมิทัศน์ ระบบสาธารณูปโภค ฯลฯ
[www.fdesignbasis.blogspot.com]

ภาพที่ 2.3 แสดงการออกแบบทางสถาปตั ยกรรม )Architecture Design)

7
2.1.3.2 การออกแบบผลิตภัณฑ์)Product Design) เป็นการออกแบบเพื่อการผลิต
ผลิตภัณฑ์ชนิดต่าง ๆงานออกแบบสาขานี้ มีขอบเขตกว้างขวางมากที่สุด และแบ่งออกได้มากมาย
หลาย ๆ ลักษณะ นกั ออกแบบรบั ผดิ ชอบเก่ียวกบั ประโยชน์ใช้สอยและความสวยงามของผลติ ภัณฑ์
[http://fdesignbasis.blogspot.com]

ภาพท่ี 2.4 แสดงการออกแบบผลิตภัณฑ์)Product Design)
2.1.3.3 การออกแบบทางวิศวกรรม )Engineering Design) เป็นการออกแบบเพื่อการ
ผลติ ผลติ ภัณฑช์ นิดตา่ ง ๆ เช่นเดียวกบั การออกแบบผลิตภัณฑ์ ซงึ่ มคี วามเกีย่ วขอ้ งกนั ตอ้ งใชค้ วามรู้
ความสามารถและเทคโนโลยีในการผลิตสูงผู้ออกแบบคือ วิศวกร ซึ่งจะรับผิดชอบในเรื่องของ
ประโยชน์ใชส้ อย ความปลอดภยั และ กรรมวธิ ใี นการผลิต บางอย่างต้องทำงานร่วมกันกบั นกั ออกแบบ
สาขาตา่ ง ๆ ด้วย [http://fdesignbasis.blogspot.com]

ภาพที่ 2.5 แสดงการออกแบบทางวศิ วกรรม )Engineering Design)

8
2.1.3.4 การออกแบบตกแต่ง )Decorative Design) เปน็ การออกแบบเพื่อการตกแต่งให้
สิ่งต่าง ๆ สวยงามและเหมาะสมกับ ประโยชน์ใช้สอยมากขึ้น นักออกแบบเรียนว่า มัณฑนากร
)Decorator)ซึ่งมักทำงานร่วมกับสถาปนกิ งานออกแบบประเภทนี้ได้แก่

1) งานตกแตง่ ภายใน )Interior Design)
2) งานตกแตง่ ภายนอก )Exterior Design)
[http://fdesignbasis.blogspot.com]

ภาพที่ 2.6 แสดงการออกแบบตกแต่ง )Decorative Design)
2.1.3.5 การออกแบบสิ่งพิมพ์ )Graphic Design ) เป็นการออกแบบเพื่อทางผลิตงาน
สงิ่ พิมพ์ชนดิ ตา่ ง ๆ ได้แก่หนังสือหนงั สอื พมิ พ์ โปสเตอร์ นามบัตร บตั รต่าง ๆ งานพิมพ์ลวดลายผ้า
งานพิมพ์ภาพลงบนสิ่งของเครื่องใช้ต่าง ๆ งานออกแบบรูปสัญลักษณ์ เครื่องหมายการค้า ฯลฯ
[http://fdesignbasis.blogspot.com]

ภาพที่ 2.7 แสดงการออกแบบสิง่ พิมพ์ )Graphic Design)

9

2.2 แนวคดิ เก่ยี วกบั เทคโนโลยธี ุรกจิ ดิจทิ ลั
2.2.1 เทคโนโลยีธุรกิจดิจทิ ลั หมายถึง จดั การเรยี นการสอนการสรา้ งระบบสารสนเทศฐานข้อมูล

สำนักงานอัตโนมตั กิ ารนำฮารดแ์ วร์ ซอฟตแ์ วร์ และเทคโนโลยใี นการสอื่ สารมาใช้กบั ระบบสารสนเทศ
ระบบสารสนเทศประเภทต่าง ๆ ที่ใช้ในการจัดการ การบริหารและการวางแผนในองค์การได้แก่
ระบบสารสนเทศเพื่อการจัดการศึกษาระบบสนับสนุนการตัดสนิ ใจ ระบบสารสนเทศเพ่ือผู้บริหาร คือ
การนำเทคโนโลยีต่าง ๆ เข้ามาพัฒนาธุรกิจที่ทำอยู่เพื่อเพิ่มความสะดวกสบายให้ทั้งผู้ประกอบการ
และผูบ้ รโิ ภคในการเลือกซื้อสนิ ค้าหรอื บริการต่าง ๆ แตจ่ ดุ ประสงค์หลักๆก็คือการหาทางเพิ่มยอดขาย
ให้กับธุรกิจนั่นเอง เช่น การนำ Application มาช่วยในการเข้าถึงผู้บริโภคยุคใหม่ที่ชอบใช้ smart
phone,การสร้างช่องทางขายผ่านสื่อ Social mediaต่าง ๆ และการทำโฆษณารวมไปถึงการสั่งซ้ือ
และจัดส่งสินคา้ ในแบบ online เป็นต้น [https://www.sub-brain.com]

ภาพท่ี 2.8 แสดงโลโก้สาขาวิชาเทคโนโลยีธุรกจิ ดิจทิ ัล

10

2.3 แนวคิดเกยี่ วกบั ปา้ ย
2.3.1 ความหมายของป้าย หรือบางบริบทว่า เครื่องหมาย หมายถึงแผ่นแสดงข้อความ ในการ

เล่าเรื่องราว รวมถึงการบอกความหมาย คำสั่ง คำร้อง โฆษณา ไปตลอดจนถึงป้ายแสดงความเสียใจ
และความรับผิด แผ่นแสดงขอ้ ความนี้ หมายถึง แห่งที่ ๆ เป็นการแสดงข้อความในเพลทใดเพลทหน่ึง
ทางหน้าจอมอนิเตอร์ด้วย และหมายถึงเข็มกลัด หรือผ้าที่เป็นแถบแสดงข้อความด้วย เช่น ป้าย
สายสะพาย ประโยคที่เก่ยี วกับคำว่า เช่น ป้ายว่งิ ตดั ขอ้ ความเป็นคำ ๆ [ https://th.wikipedia.org]

2.3.2 ประเภทของป้าย
2.3.2.1 ป้ายโฆษณา หรือ แผงโฆษณา เป็นสิ่งก่อสร้างกลางแจ้งขนาดใหญ่สำหรับ

โฆษณา โดยทั่วไปจะตั้งอยู่บริเวณทีม่ ีการสัญจรคับคั่ง เช่นถนนที่มีการจราจรแออัด ป้ายโฆษณานี้จะ
แสดงโฆษณาสำหรับผู้คนและผู้ขับรถ โดยปกติแล้วจะแสดงสโลแกนและสามารถมองเห็นได้อย่าง
ชัดเจน ป้ายโฆษณาตงั้ อยู่ในท่ีสูงท่ีสามารถเหน็ ไดโ้ ดยกล่มุ เป้าหมาย [ https://th.wikipedia.org]

ภาพที่ 2.9 แสดงปา้ ยโฆษณา หรอื แผงโฆษณา
2.3.2.2 ป้ายคำร้อง ปา้ ยประพนั ธส์ ำหรับขอความร่วมมือในการทำบางส่ิงบางอย่าง เช่น
โปรดรักษาความสะอาด ,ปดิ ไฟก่อนออกจากห้องทุกครง้ั เป็นตน้ [https://th.wikipedia.org]

ภาพท่ี 2.10 แสดงปา้ ยคำร้อง

11

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

1) ปา้ ยท่บี งั คบั ให้ทำตามรูปแบบลกั ษณะที่กำหนดไว้
2) ปา้ ยทบ่ี ังคับให้ทำตามดว้ ยขอ้ ความ หรอื สัญลักษณ์ หรอื ทง้ั สองอย่างรวมกัน
[ https://th.wikipedia.org]

ภาพที่ 2.11 แสดงป้ายจราจร
2.4 แนวคิดเกย่ี วกับโปรแกรม Adobe Illustrator

2.4.1 Adobe Illustrator เป็นซอฟต์แวร์สำหรับสร้างภาพกราฟิกในรูปแบบ Vector โดยมี
คุณลักษณะที่สำคัญที่สุด นั่นก็คือคุณภาพของผลงานที่สร้างขึ้นนั้น จะไม่มีปัญหาเรื่องความละเอียด
ในการแสดงภาพตามสื่อต่าง ๆ ไม่ว่าจะนำไปขยาย หรือลดแค่ไหนก็ตาม ภาพจะไม่ต้องเสียความ
ละเอียด หรือความคมชัดแม้แต่น้อย เมื่อเปรียบเทียบกับภาพที่แก้ไขโดยใช้เครื่องมืออื่น ๆ เช่น
Adobe Photoshop ที่จะมปี ัญหาเร่ืองความละเอียด และ คณุ ภาพของภาพจะลดลงเมื่อขยายภาพ
[https://www.beartheschool.com]

ภาพท่ี 2.12 แสดง Icon โปรแกรม Adobe Illustrator

12

2.4.2 ประวตั ิและความเป็นมา
2.4.2.1 เปน็ โปรแกรมวาดภาพกราฟิกแบบเวกเตอร์ ซึง่ พัฒนาโดยบรษิ ัทอะโดบีซิสเต็มส์

รุ่นแรก ถูกพัฒนาขึ้นในปี ค .ศ.1986 เพื่อใช้งานกับเครื่องแมคอินทอช และได้พัฒนารุ่นที่ 2 ออกมา
ให้ใช้งานได้กับวินโดวส์ ซึ่งได้รับความพึงพอใจ และ การตอบรับที่ดีจากผู้ใช้เป็นจำนวนมาก จน
ปัจจุบันได้พัฒนาออกมาจนถึงรุ่นที่ 17 และได้รวบรวมเข้าไปเป็น 1 ในโปรแกรมชุด Adobe
Creative Suite [https://th.wikipedia.org]

2.4.3 ส่วนประกอบของโปรแกรม Adobe Illustrator
2.4.3.1 หน้าจอโปรแกรม Illustrator จะประกอบด้วยส่วนต่าง ๆ ซึ่งมีหน้าที่การใช้งาน

แตกต่างกนั ออกไปดังน้ี [www.vdoschool.com]

ภาพท่ี 2.13 แสดงหน้าจอโปรแกรม Illustrator
2.4.4 แถบเมนูคำสั่ง)Menu bar)แถบเมนูคำสั่ง)Menu bar)เป็นเมนูคำสั่งหลักของโปรแกรม
Illustrator แบ่งออกเปน็ หมวดหมู่ตา่ ง ๆ ดังน้ี [http://www.vdoschool.com]

ภาพท่ี 2.14 แสดงแถบเมนู )Menu bar)

13
2.4.4.1 File เป็นหมวดของคำสั่งที่จัดการเกีย่ วกับไฟล์และโปรแกรมทั้งหมด ไม่ว่าจะ
เป็นการ เปิด ปิดไฟล์ การบันทึกไฟล์การนำภาพเข้ามาใช้ )Place) ตลอดจนการออกจากโปรแกรม
)Exit)

ภาพที่ 2.15 แสดงแถบ )File)
2.4.4.2 Edit เปน็ หมวดของคำสง่ั ทจี่ ัดการแก้ไข เชน่ Undo Cut Copy Paste Select
รวมทั้งการกำหนดคุณสมบัติต่าง ๆ ที่มีผลต่อการปรับแต่งภาพด้วย เช่นการสร้างรูปแบบ )Define
Pattern) การกำหนดค่าสี )Color Setting) เป็นต้น

ภาพท่ี 2.16 แสดงแถบ )Edit)

14
2.4.4.3 Type เป็นหมวดของคำสั่งที่ใช้จัดการตัวหนังสือ เช่น Fonts Paragraph
เปน็ ตน้

ภาพที่ 2.17 แสดงแถบ )Type)
2.4.4.4 Select เป็นหมวดของคำสั่งที่ใช้ในการเลือกวัตถุ สามารถเลือกด้วยคุณสมบัติ
ได้ เชน่ เลอื กวัตถุที่มี Fill และ Stroke แบบเดียวกนั วัตถทุ ่อี ยู่บน Layer เดียวกัน เป็นต้น

ภาพท่ี 2.18 แสดงแถบ )Select)

15
2.4.4.5 Filter เป็นหมวดของคำสั่งที่ใช้สร้างเทคนิคพิเศษให้กับภาพ โดยจะมีผลต่อ
รปู รา่ งของ Path

ภาพที่ 2.19 แสดงแถบ )Filter)
2.4.4.6 Effect เป็นหมวดของคำสั่งที่ใช้สร้างเทคนิคพิเศษให้กับภาพคล้าย Filter แต่
จะไม่มีผลกับรูปร่างของ PathView เป็นหมวดของคำสั่งเกี่ยวกับการมองทุกสิ่งในงาน เช่น Zoom
Show/Hide Ruler Bounding Box Outline Mode/Preview Mode เปน็ ตน้

ภาพที่ 2.20 แสดงแถบ )Effect)

16
2.4.4.7 Window เป็นหมวดของคำสั่งเกี่ยวกับการเปิด ปิดหน้าต่างเครื่องมือต่าง ๆ
เช่นPalette Tool Box เป็นตน้

ภาพที่ 2.21 แสดงแถบ )Window)
2.4.4.8 Help เป็นหมวดที่รวบรวมวิธีการใช้งานและคำแนะนำเพื่อช่วยเหลือผู้ใช้
โปรแกรม

ภาพท่ี 2.22 แสดงแถบ )Help)

17
2.4.5 กลอ่ งเครื่องมือ Toolbox เปน็ สว่ นที่เก็บรวบรวมเคร่ืองมือท่ีใช้ในการสรา้ ง การปรับแตง่
และการแก้ไขภาพ [http://www.vdoschool.com]

ภาพท่ี 2.23 แสดงกลอ่ งเคร่ืองมือ (Toolbox)
2.4.6 คอนโทรลพาเนล (Control Panel) เป็นแถบตัวเลือกสำหรับกำหนดค่าต่าง ๆ ของวัตถุ
เพื่ออำนวยความสะดวกแก่ผูใ้ ช้ให้สามารถกำหนดค่าสี ขนาด ตำแหน่งและคุณสมบัตติ ่าง ๆ ของวัตถุ
ที่เลือกไดง้ า่ ยข้นึ [http://www.vdoschool.com]

ภาพที่ 2.24 แสดงคอนโทรลพาเนล )Control Panel)

18
2.4.7 พี้นที่การทำงาน (Artboard) เป็นบริเวณที่เราใช้วางวัตถุเพื่อสร้างชิ้นงาน ส่วนพื้นที่
นอกเหนือจากนน้ั )Scratch area) เป็นบรเิ วณที่เราวางวัตถแุ ต่ไม่ต้องการให้แสดงในชนิ้ งานใช้เพ่ือพัก
วตั ถุ หรือเผื่อไว้ใชใ้ นภายหลงั [http://www.vdoschool.com]

ภาพท่ี 2.25 แสดงพี้นทีก่ ารทำงาน (Artboard)
2.4.8 พาเนลควบคุมการทำงาน )Panel) เป็นหน้าต่างย่อยที่รวบรวมคุณสมบัติการทำงานของ
เครื่องมือต่าง ๆ ให้เราเลือกปรับแต่งการใช้งานได้ง่าย ๆ ไม่ต้องเปิดหาแถบคำสั่งซึ่งพาเนลจะถูก
จดั เกบ็ ไว้ในกรอบจัดเก็บพาเนลด้านขวาของหนา้ จอ [http://www.vdoschool.com]

ภาพท่ี 2.26 แสดงพาเนลควบคมุ การทำงาน )Panel)

19

2.4.9 การตดิ ตั้งโปรแกรม Adobe Illustrator
2.4.9.1 ดาวน์โหลดโปรแกรม Adobe Illustrator
2.4.9.2 การแตกไฟลโ์ ปรแกรมเสร็จสนิ้ และคลิกไฟลโ์ ปรแกรม

ภาพท่ี 2.27 แสดงการแตกไฟล์โปรแกรมเสรจ็ สิ้นและคลิกไฟล์โปรแกรม
2.4.9.3 กดคลกิ ขวาที่ตวั โปรแกรมและกด Run as administrator

ภาพที่ 2.28 แสดงกดคลิกขวาท่ีตัวโปรแกรมและกด Run as administrator

20
2.4.9.4 รอโปรแกรมเปิดใช้งาน [http://u.6027328bitweb.pongsawadi.ac.th]

ภาพที่ 2.29 แสดงรอโปรแกรมเปิดใช้งาน
2.5 แนวคดิ เกีย่ วกับโปรแกรม Adobe Photoshop

2.5.1 ความรเู้ บื้องตน้ เก่ยี วกับโปรแกรม Adobe Photoshop
2.5.1.1 Adobe Photoshop มักเรียกสั้น ๆ ว่า โฟโตชอป เป็นโปรแกรมประยุกต์ที่มี

ความสามารถในการจดั การแกไ้ ขและตกแตง่ รูปภาพ (photo editing and retouching)
แบบแบสเตอร์ ผลติ โดยบรษิ ัทอะโดบีซสิ เตม็ ส์ ซึ่งผลิตโปรแกรมดา้ นการพิมพ์อกี หลายตวั ท่ีได้รับความ
นิยม เช่น Illustrator และ InDesign ปัจจุบันโปรแกรมโฟโตชอปได้พัฒนามาถึงรุ่น CC (Creative
Cloud) [http://krurungkit.com]

ภาพที่ 2.30 แสดง Icon แสดงสัญลกั ษณ์ของโปรแกรม Adobe Photoshop

21
2.5.2 ส่วนประกอบของโปรแกรม Adobe Photoshop เมอ่ื ทำการเปิดโปรแกรมแลว้ จะพบ
หนา้ ตาของโปรแกรมดังรปู [http://krurungkit.com]

ภาพท่ี 2.31 แสดงหนา้ ตา่ งของโปรแกรมและส่วนประกอบต่างๆ
2.5.2.1 เมนูของโปรแกรม Application menu หรือ Menu bar แบง่ ออกเปน็ หมวดหมู่
ตา่ ง ๆ ดังน้ี [http://krurungkit.com]

ภาพที่ 2.32 แสดง)Menu bar)

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

ภาพท่ี 2.33 แสดงแถบ )File)
2) Edit หมายถึง รวมคำสั่งที่ใช้สำหรับแก้ไขภาพ และปรับแต่งการทำงานของ
โปรแกรมเบอื้ งต้น เชน่ ก๊อปปี้, วาง, ยกเลกิ คำสัง่ , แก้ไขเครอื่ งมอื และอื่น ๆ

ภาพท่ี 2.34 แสดงแถบ )Edit)

23
3) Image หมายถึง รวมคำสั่งที่ใช้ปรับแต่งภาพ เช่น สี, แสง, ขนาดของภาพ
(image size), ขนาดของเอกสาร )canvas), โหมดสีของภาพ, หมนุ ภาพ และอ่นื ๆ

ภาพท่ี 2.35 แสดงแถบ )Image)
4) Layer หมายถึง รวมคำสั่งที่ใช้จัดการกับเลเยอร์ ทั้งการสร้างเลเยอร์,
แปลงเลเยอร์ และการจดั การกบั เลเยอรใ์ นด้านต่าง ๆ

ภาพท่ี 2.36 แสดงแถบ )Layer)

24
5) Select หมายถึง รวมคำสั่งเกี่ยวกับการเลือกวัตถุหรือพื้นที่บนรูปภาพ
)Selection) เพื่อนำไปใช้งานร่วมกับคำสั่งอื่น ๆ เช่น เลือกเพื่อเปลี่ยนสี, ลบ หรือใช้เอฟเฟ็กต์ต่าง ๆ
กบั รปู ภาพ

ภาพท่ี 2.37 แสดงแถบ )select)
6) Filter หมายถึง คำส่งั การเล่น Effects ตา่ ง ๆ สำหรับรปู ภาพและวัตถุ

ภาพท่ี 2.38 แสดงแถบ )Filter)

25
7) View หมายถึง คำสั่งเกยี่ วกบั มมุ มองของภาพและวัตถุในลักษณะต่าง ๆ เช่น
การขยายภาพและยอ่ ภาพ

ภาพท่ี 2.39 แสดงแถบ )View)
8) Window หมายถึง สว่ นคำส่ังในการเลอื กใช้อุปกรณ์เสรมิ ต่าง ๆ ทจี่ ำเป็นใน
การใช้สร้าง Effects ตา่ ง ๆ

ภาพที่ 2.40 แสดงแถบ )Window)

26
9) Help หมายถึง คำสั่งเพื่อแนะนำเกี่ยวกับการใช้โปรแกรมฯและจะมีลาย
ละเอยี ดของโปรแกรมอยู่ในน้ัน

ภาพท่ี 2.41 แสดงแถบ )Help)
2.5.2.2 เมนูของพ้ืนทท่ี ำงาน Panel menu

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

ภาพที่ 2.42 แสดงเมนูของพ้ืนทีท่ ำงาน )Panel menu)

27
2.5.2.3 พืน้ ทีท่ ำงาน Stage หรอื Panel

เปน็ พ้นื ทว่ี า่ งสำหรับแสดงงานท่ีกำลังทำอยู่ [http://krurungkit.com]

ภาพที่ 2.43 แสดงพ้ืนที่ในการทำงาน
2.5.2.4 เคร่ืองมือท่ใี ชง้ าน Tools panel หรอื Tools box

Tool Panel ทูลพาเนหรือ กล่องเครื่องมือจะประกอบไปด้วยเครื่องมือ
ต่าง ๆ ที่ใช้ในการวาด ตกแต่ง และแก้ไขภาพ เครื่องมือเหล่านี้มีจำนวนมาก ดังนั้นจึงมีการรวม
เครื่องมือที่ทำหน้าที่คล้าย ๆ กันไว้ในปุ่มเดียวกัน โดยจะมีลักษณะรูปสามเหลี่ยมอยู่บริ เวณมุม
ดา้ นล่างดงั ภาพ 2 เพอ่ื บอกให้รู้ว่าในปมุ่ น้ยี งั มีเคร่อื งมืออ่ืนอยดู่ ว้ ย [http://krurungkit.com]

ภาพท่ี 2.44 แสดงเครื่องมือทีใ่ ช้งาน )Tools panel)

28
1) แถบสแี ดง คอื กลมุ่ คำส่งั Serection เพอื่ เลอื กพื้นทใี่ นส่วนตา่ ง ๆ ของภาพ

ภาพที่ 2.45 แสดงกลุ่มคำสง่ั )Serection)
2) แถบสเี ขยี ว คือ กล่มุ คำสัง่ Edit สำหรับการปรับแต่งระบายสี การลบ

บางส่วน

ภาพท่ี 2.46 แสดงกลุ่มคำสงั่ )Edit)

29
3) แถบสีเหลือง คือ กลุ่มคำส่ังเกีย่ วกับการสรา้ ง ตวั อกั ษร วาดภาพ

ภาพที่ 2.47 แสดงกลุ่มคำสั่ง ตัวอกั ษร วาดภาพ
4) แถบสีสม้ คือ คำส่งั View ใชย้ อ่ ขยาย ดชู น้ิ งาน

ภาพที่ 2.48 แสดงกลุ่มคำสง่ั )View)
5) แถบสีฟา้ คือ คำส่ังเลือกสี Foreground หรอื Background

ภาพที่ 2.49 แสดงกลุ่มคำสงั่ เลือกสี
6) แถบสีม่วง คือ คำสั่ง Quick Mash คำสง่ั เก่ยี วกับหนา้ จอ
[www.grapicphoto.blogspot.com]

ภาพที่ 2.50 แสดงกลุ่มคำส่ัง)Quick Mash)

30
2.5.2.5 สง่ิ ที่ควบคุมเครื่องมือท่ใี ชง้ าน Tools control menu หรอื Option bar

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

ภาพท่ี 2.51แสดงสิ่งที่ควบคุมเครื่องมือทีใ่ ช้งาน Tools control menu หรอื Option bar
2.5.3 การตดิ ตงั้ โปรเเกรม

2.5.3.1 ดบั เบิลคลิกท่ี Set-up Adobe PhotoshopCS6

ภาพท่ี 2.52 แสดงดับเบิลคลิกท่ี Set-up Adobe PhotoshopCS6
2.5.3.2 หน้าต่างนใ้ี หร้ อโปรเเกรมซักครู่

ภาพท่ี 2.53 แสดงหนา้ ต่างนี้ใหร้ อโปรเเกรมซักครู่

31

2.5.3.3 คลิกที่ Try

ภาพท่ี 2.54 แสดงคลิกที่ Try
2.5.3.4 คลิก Accept

ภาพท่ี 2.55 แสดงคลิกท่ี Accept

32
2.5.3.5 หน้าตา่ งนค้ี ือการเลือกการติดตงั้ เม่ือเลือกการติดต้งั เสร็จแลว้ คลิกท่ี Install

ภาพที่ 2.56 แสดงหน้าต่างน้ีคอื การเลือกการติดต้ังเมื่อเลอื กการตดิ ตั้งเสร็จแลว้ คลิกที่ Install
2.5.3.6 รอโปรแกรมการตดิ ตง้ั เสร็จ

ภาพท่ี 2.57 แสดงรอโปรแกรมการติดตง้ั เสรจ็

33
2.5.3.7 เสรจ็ ส้นิ การตดิ ตง้ั โปรแกรม [http://u.6027328bitweb.pongsawadi.ac.th]

ภาพที่ 2.58 แสดงเสรจ็ สน้ิ การติดต้งั โปรแกรม

บทท่ี 3
วธิ ีการดำเนินงานโครงการ

บทท่ี 3
วิธกี ารดำเนินงานโครงการ

การดำเนินโครง“ออกแบบป้ายสาขาวิชาเทคโนโลยีธุรกิจดิจิทัล ชื่อโครงการ การออกแบบป้าย
สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล ด้วยโปรแกรม Adobe Photoshop และ โปรแกรม Adobe
Illustrator ” มรี ายละเอียดในการดำเนินงานโครงการ ดังนี้

3.1 การศกึ ษาขอ้ มลู เบือ้ งต้น
3.2 ประชากรและกลุ่มตวั อย่าง
3.3 ขนั้ ตอนการดำเนนิ งาน
3.4 เคร่อื งมอื ที่ใชใ้ นการเก็บรวบรวมข้อมูล
3.5 ขัน้ ตอนการดำเนินการและเกบ็ รวบรวมขอ้ มลู
3.6 พจิ ารณาจากคะแนนตามเกณฑ์
3.7 สถิตทิ ใี่ ช้ในการวิเคราะห์ข้อมลู

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

Adobe Photoshop และ Adobe Illustrator เพ่ือออกแบบปา้ ยสาขาวิชาเทคโนโลยธี ุรกจิ ดิจทิ ลั
3.1.3 สำรวจกลมุ่ เปา้ หมายและจดั ทำโครงร่างแบบสอบถาม
3.1.4 จดั หาร้านเพอ่ื ออกแบบป้ายสาขาวิชาเทคโนโลยธี ุรกิจดิจทิ ัล
3.1.5 ศกึ ษาค้นควา้ ขอ้ มูลของอะคริลคิ
3.1.6 ศกึ ษาคน้ ควา้ ข้อมลู ของป้าย
3.1.7 ศึกษาคน้ ควา้ ขอ้ มูลของการออกแบบ

35
3.2 ประชากรและกลุม่ ตวั อยา่ ง

3.2.1 ประชากร คือ นักเรียนระดับประกาศนียบัตรวิชาชีพ สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล
วทิ ยาลัยเทคนคิ ระยอง จำนวน 378 คน

3.2.2 กลุ่มตัวอย่าง คือ นักเรียนระดับประกาศนียบัตรวิชาชีพ สาขาเทคโนโลยีธุรกิจดิจิทัล
วิทยาลัยเทคนิคระยอง จำนวน 191 คน [https://sites.google.com]

ภาพท่ี 3.1 แสดงตารางทฤษฎีของ Krejcie & Morgan

36

3.3 ขั้นตอนการดำเนนิ งาน
3.3.1 การออกแบบผังงาน

เรมิ่ ต้น

สืบคน้ ขอ้ มูลของโปรแกรม Adobe Photoshop และโปรแกรม Adobe
Illustrator

สบื ค้นข้อมูลของปา้ ยอะคริลิค

นำเสนอหัวขอ้ ให้กับ ไมผ่ า่ น
อาจารย์ท่ีปรึกษาโครงการ

และครูผสู้ อนโครงการ

ผ่าน
วัดขนาดของป้ายสาขาวชิ าเทคโนโลยีธุรกจิ ดจิ ทิ ัล

ออกแบบป้ายสาขาวิชาเทคโนโลยธี ุรกิจดจิ ทิ ลั

1
ภาพที่ 3.2 แสดงการออกแบบผังงาน