1. เอกสารประกอบการสอนรายวิชา คอมพิวเตอร์กราฟิค ง 30246
ใบความรู้ที่ 4.5
เรื่อง การสร้าง Icon ทรงกลม
Icon คือภาพขนาดเล็กๆ สาหรับใช้ในเว็บเพจ เพื่อเป็น hyperlink หรือเป็นภาพประกอบในส่วนต่างๆ
ลักษณะของ Icon คือเป็นไฟล์ขนาดเล็กแต่มีความละเอียด มีสีสันสดใส มีเส้นขอบที่ชัดเจน
ซึ่งการทา Icon มีเคล็ดลับในการง่ายคือ เลือกใช้สีที่สดใส และ สร้างไฟล์ขนาดใหญ่กว่าขนาดใช้งานจริง
เมื่อเสร็จแล้วจึงทาการย่อขนาดไฟล์ให้เท่ากับของจริงภายหลัง
ในบทเรียนนี้ผู้เรียนจะได้เห็นตัวอย่างของการใช้สี ลาดับการทาเอฟเฟ็กต์เพื่อให้ได้ผลลัพธ์ ซึ่งถือว่าเป็น
วิธีการที่น่าสนใจ
ผลลัพธ์ที่ต้องการ ภาพผลไม้สีเขียวสดใส
วิธีทา
1. สร้างไฟล์ใหม่ขนาด 640x480px ความละเอียด 300 dpi
2. สร้างรูปวงกลมขนาดตามต้องการด้วย Elliptical Marquee Tool
3. กาหนดระบายสีแบบ gradient สีหน้ารหัส #88cc33 สีหลังรหัส #005522 เลือกวิธีระบายแบบ
Foreground to Background
รวบรวมโดย ครูเทวัญ ภูพานทอง ครู คศ.1 โรงเรียนนามนพิทยาคม สพม.24
http://comkrutae.wordpress.com/

2. เอกสารประกอบการสอนรายวิชา คอมพิวเตอร์กราฟิค ง 30246
4. ทาให้การไล่ระดับสีสวยมากขึ้นโดยการใช้ layer style กาหนดให้ Inner Shadow มีรายละเอียดคือ
Blend Mode เป็น Multiply ค่า Opacity เท่ากับ 75% ค่า Angle เท่ากับ -90 degrees ค่า
Distance เท่ากับ 45 pixels และค่า Size เท่ากับ 80 pixels.
5. ทาผิวแอปเปิล เริ่มจาก Filter > Render > Clouds แล้ว Filter > Distort > Spherize (ทาให้โค้ง
นูน) โดยกาหนดค่า Amount เป็น 100% และ Mode เป็น Normal จากนั้น กาหนด Blending ของ
layer เป็น Soft Light จะได้ผลลัพธ์ดังภาพ
รวบรวมโดย ครูเทวัญ ภูพานทอง ครู คศ.1 โรงเรียนนามนพิทยาคม สพม.24
http://comkrutae.wordpress.com/

3. เอกสารประกอบการสอนรายวิชา คอมพิวเตอร์กราฟิค ง 30246
6. เพิ่มลักษณะผิวโดยแต้มจุดสีเขียวอ่อนรหัสสี #ccdd99 ครั้งแรงตั้งขนาด brush 5px ให้ทั่วพื้นที่ (จุดละ
1 คลิก) ครั้งที่สอง brush ขนาด 3px ให้ทั่วพื้นที่
7. ทาให้แต้มสีกลืนกลับพื้นสีเขียว และนูนตามลูกแอปเปิล เริ่มจาก Filter > Blur > Motion Blur
กาหนดค่า Angle เป็น 90 degrees และค่า Distance เป็น 3 pixels จากนั้น Filter > Distort >
Spherize กาหนดค่า Amount เป็น 100 และค่า Mode เป็น Normal สุดท้าย กาหนด Blending
Mode เป็น Overlay และ Opacity เป็น 50% จะได้ผลตามลาดับภาพที่แสดง
รวบรวมโดย ครูเทวัญ ภูพานทอง ครู คศ.1 โรงเรียนนามนพิทยาคม สพม.24
http://comkrutae.wordpress.com/

4. เอกสารประกอบการสอนรายวิชา คอมพิวเตอร์กราฟิค ง 30246
8. ทาจุกด้านบน โดยการ
1) สร้างพื้นที่วงรีสีขาวขนาดเท่าความกว้างทั้งหมดของจุกด้านบน
2) สร้างวงรีสีดาเพื่อแสดงเงาในหลุมของจุกบน
รวบรวมโดย ครูเทวัญ ภูพานทอง ครู คศ.1 โรงเรียนนามนพิทยาคม สพม.24
http://comkrutae.wordpress.com/

5. เอกสารประกอบการสอนรายวิชา คอมพิวเตอร์กราฟิค ง 30246
3) ควบคุมการกระจายของเงาที่จะเกิดขึ้นต่อไปให้อยู่ในเฉพาะบริเวณสีขาว โดยการทา Clipping Mask
ระหว่าง layer 5 และ 6 (กด Alt ค้างไว้แล้วคลิกที่เส้นแบ่งระหว่าง layer 5 และ 6) จะได้ผลลัพธ์ดัง
ภาพ
9. แต่งสีของหลุม โดยขั้นตอนนี้ต้องใสใจเป็นพิเศษเพราะจะมีบางขั้นตอนที่เราไม่เห็นผลลัพธ์
1) กาหนด Blending ของสีขาว (เลเยอร์ 5) เป็น Multiply
2) ทาเงาดาให้เบลอ โดย Filter >Blur > Gaussian แล้วกาหนดค่า radius เท่ากับ 17 pixels แล้ว
กาหนด Blending ของ layer เป็น 75%
รวบรวมโดย ครูเทวัญ ภูพานทอง ครู คศ.1 โรงเรียนนามนพิทยาคม สพม.24
http://comkrutae.wordpress.com/

6. เอกสารประกอบการสอนรายวิชา คอมพิวเตอร์กราฟิค ง 30246
หากขอบจุกด้านบนยังมีรอยตะเข็บชัดก็ให้ทา Gaussian blue จนกว่าจะไม่เห็นรอยตะเข็บ
10. ทาแสงสะท้อนให้ขอบหลุมด้านหน้า โดยการ
1) ใช้ Ellipse Marquee Tool สร้างวงกลมให้ขอบล่างของวงกลมเลยปากหลุม
2) ใช้ Ellipse Marquee Tool สร้างวงลีเพื่อลบพื้นที่ที่ถูกเลือกไว้ให้เหลือเป็นรูปพระจันทร์เสี้ยว
3) ให้เหลือเฉพาะพื้นที่ด้านล่าง
รวบรวมโดย ครูเทวัญ ภูพานทอง ครู คศ.1 โรงเรียนนามนพิทยาคม สพม.24
http://comkrutae.wordpress.com/

7. เอกสารประกอบการสอนรายวิชา คอมพิวเตอร์กราฟิค ง 30246
4) สร้าง layer ใหม่ แล้วทาการระบายสีขาว
5) ยกเลิกการเลือก แล้วเลือก Filter > Blur > Gaussian Blur กาหนดค่า Radius เป็น 15 pixels
6) ดาเนินการดังข้อ 1) – 5) อีกครั้งเพื่อทาเงาสะท้อนไฟที่ขอบด้านบน เพื่อให้ได้ผลลัพธ์ดังภาพ
11. ทาให้ผลสุกมากกว่าโดยการแต้มสีแสดลงไป ดังนี้
1) ใช้ Elliptical Marquee Tool สร้างพื้นที่วงกลมให้ครอบคลุมพื้นที่แสดงการสุกของผลไม้
2) สร้าง layer ใหม่
รวบรวมโดย ครูเทวัญ ภูพานทอง ครู คศ.1 โรงเรียนนามนพิทยาคม สพม.24
http://comkrutae.wordpress.com/

8. เอกสารประกอบการสอนรายวิชา คอมพิวเตอร์กราฟิค ง 30246
3) เทสีแสด รหัส #ffbe00
4) ยกเลิกการ selection
5) จากัดพื้นที่การ Blur ภายในพื้นที่ของผลไม้ โดยการกด Ctrl แล้ว Click ที่ layer1
6) เลือก Filter > Blur > Gaussian Blur แล้วกาหนดค่า Radius เป็น 50 pixels จะได้ผลดังภาพ
7) หากสียังดูแข็งเกินไปหรือแสดงการสุกได้ไม่ถึงใจ ก็ลองปรับ Blending Mode หรือ ยกเลิกการ Blur
แล้วทาใหม่ หรือทา layer สีที่สดกว่า หรือ อ่อนกว่านี้มาซ้อนทับเพื่อให้พื้นที่การสุกขยายมากกว่านี้
12. ปรับแสงด้านข้างขวาโดยการระบายสีขาวตามแนวขอบด้านขวา แล้ว Blur ให้ดูสวยงาม วิธีการ
1) เลือกพื้นที่ผลไม้
2) ระบายสีขาวทั้งวงกลม
3) ให้แน่ใจว่า Ellipse Marquee Tool ถูกเลือกอยู่ แล้วขยับ selection ไปทางซ้ายสัก 10 px (กด
ลูกศรซ้าย 10 ครั้ง)
รวบรวมโดย ครูเทวัญ ภูพานทอง ครู คศ.1 โรงเรียนนามนพิทยาคม สพม.24
http://comkrutae.wordpress.com/

9. เอกสารประกอบการสอนรายวิชา คอมพิวเตอร์กราฟิค ง 30246
4) กดปุ่ม Del ผลไม้จะถูกแสดงออกมา
5) เลือกพื้นที่ผลไม้อีกครั้งหนึ่ง นั้นทาให้พื้นที่สีขาวเหลือเพียงรูปพระจันทร์เสี้ยวอยู่ด้านขวาของผลไม้
6) เลือก Filter > Blur > Gaussian Blur แล้วกาหนดค่า Radius เป็น 7 pixels จะได้ผลดังภาพ
7) ลบเงาส่วนเกินบริเวณด้านล่างโดยใช้ Eraser Tool ขนาด 270 pixels และค่า Hardness เป็น0%
13. ปรับรูปทรงให้เป็นแอปเปิล โดยการ
1) Merge Layer ทั้งหมด
2) Edit > Transform > Wrap
3) ดัดให้เป็นรูปทรงแอปเปิล
รวบรวมโดย ครูเทวัญ ภูพานทอง ครู คศ.1 โรงเรียนนามนพิทยาคม สพม.24
http://comkrutae.wordpress.com/

10. เอกสารประกอบการสอนรายวิชา คอมพิวเตอร์กราฟิค ง 30246
14. บันทึกเป็นรูปแบบสาหรับเว็บ
1) แปลงเป็น Smart Object โดยคลิกขวาบนรูปแล้วเลือก
2) ทาการ transform ให้ภาพมีขนาดเล็กลง Edit > Free Transform ในระหว่าง transform ให้กด
Shift ค้างไว้เพื่อเป็นการรักษาสัดส่วนให้คงที่
3) ย่อให้มีขนาดเล็กตามต้องการ ในตัวอย่างนี้ย่อให้เหลือ 80x79px
4) Crop ขนาดของภาพให้พอดีกับผลลัพธ์
5) ทา layer background ให้โปรงใส หรือลบ background layer ทิ้ง จะได้ผลลัพธ์ดังนี้
รวบรวมโดย ครูเทวัญ ภูพานทอง ครู คศ.1 โรงเรียนนามนพิทยาคม สพม.24
http://comkrutae.wordpress.com/

11. เอกสารประกอบการสอนรายวิชา คอมพิวเตอร์กราฟิค ง 30246
6) เลือก File >Save for Web and Devices
7) กาหนดประเภทไฟล์เป็น PNG-24
รวบรวมโดย ครูเทวัญ ภูพานทอง ครู คศ.1 โรงเรียนนามนพิทยาคม สพม.24
http://comkrutae.wordpress.com/