เอกสารอบรม Adobe Photoshop CS3 by Tanasat Sudjing

กาารออกกแบบ ง และตตกแต่งภาพ สํสาหรับจั บ ดทํําเว็บ

ด้วยโปรรแกรม

Ph ho oto osh hop CS o S3

นายธนนศาสตร์ สุดจริง งานพัฒนารระบบสารสนเเทศ สํานักคอมพิวเตอรร์ มหาวิทยาาลัยมหาสารคคาม

Photoshop CS3

เอกสารประกอบการอบรม การออกแบบและตกแต่งภาพสําหรับจัดทําเว็บด้วย Adobe Photoshop CS3

เอกสารประกกอบการอบรม การออกแบบแลละตกแต่งภาพสสําหรับจัดทําเว็บด้วย Adobe Photoshop CS3

คํานํา เอกสารประกกอบการอบรมม การออกแบบและตกแต่งภาพสํ ง าหรับจัดทําเว็บด้วย Adobe Phootoshop CS33 ฉบับนี้ ได้รวบรวมพื ว ้นฐานนที่จําเป็นในกการ ใช้เครื่องมืมือต่าง ๆ ใน PPhotoshop เพื่อช่วย ในกาารสร้างงานกรราฟิคที่จะนําไปใช้ ไ ประกอบบการจัดทําเว็บไซต์ บ ได้อย่างเหมาะสม ผูจ้จัดั ทําหวังเป็นอย่างยิ่ง ว่าคูมืม่ อฉบับนี้จะสสามารถให้ประะโยชน์กับผู้อานได้ า่

Photoshop CS3

นายธนศาสตตร์ สุดจริง พนักงานวิทยาศาสตร์และเทคโนนโลยี สํานักคอมมพิวเตอร์ มหาวิทยาลัยมหาสารคาม

Photoshop CS3

สารบัญ

Adobe Photoshop CS3 คืออะไร คุณสมบัติของคอมพิวเตอร์ที่แนะนํา ภาพในเครื่องคอมพิวเตอร์ ความละเอียดของภาพกราฟิก ส่วนประกอบต่าง ๆ ของโปรแกรม แถบเครื่องมือ (Toolsbox) แผนผังแถบเครือ่ งมือ การเปิดไฟล์ภาพ (Open) การปิดไฟล์ภาพ (Close) การสร้างไฟล์ใหม่ (New) การบันทึกข้อมูลลงบนไฟล์ (Save) การใช้งาน Palettes Navigator Palette Color Palette Swatches Palette History Palette Layer Palette รู้จักกับ Layer การกําหนดพื้นที่ เพื่อแก้ไขและตกแต่งภาพ (Selection) วิธีการใช้งาน Marquee Tool Marquee Tool การสร้าง Fixed Size Selection Lasso Tools Magic Wand Tool Crop Tool คําสั่งพื้นฐานของ Selection การใช้ Transform เพื่อปรับเปลี่ยนพื้นที่ Selection การใช้งาน Foreground และ Background Color การใช้งาน Type Tool คุณสมบัติต่าง ๆ ของ Type Tool การใช้งาน Layer การ Lock Layer การ Merge Layer

หน้า 1 1 2 2 3 4 6 7 7 8 9 10 10 11 11 12 12 14 15 15 16 17 17 19 19 20 20 21 21 23 24 25 25

Photoshop CS3

เรื่อง

สารบัญ เรื่อง

Photoshop CS3

การเปลี่ยนชือ่ Layer การจัดกลุ่ม Layer การทําภาพโดยใช้ Filter ตัวอย่าง Filter ที่น่าสนใจ การใช้งาน Layer Style การเปลี่ยนรูปร่างของรูป (Transform) การปรับค่าความสว่าง/ความคมชัด (Brightness/Contrast) การปรับขนาดของชิ้นงาน การตัดกรอบของรูป (Crop) งานกราฟิคสําหรับจัดทําเว็บ ชนิดของไฟล์ทนี่ ิยมใช้ในเว็บ การลดขนาดและแปลงไฟล์เพื่อใช้งาน การสร้างภาพขอบมน การซ้อนภาพหลายภาพเข้าด้วยกัน การสร้างภาพปุม่ กดสําหรับใช้งานบนเว็บ

หน้า 26 26 27 28 29 30 30 31 32 33 34 34 36 38 41

เอกสารประกกอบการอบรม การออกแบบแลละตกแต่งภาพสสําหรับจัดทําเว็บด้ บ วย Adobe Photoshop CS3 C

การออกแแบบ และะตกแต่งภาพสําหรับจัดทําเว็บ ด้วยโปปรแกรม Adobe Photoshop CSS3 นายธนศาสตร์ สุสดจริง พนักงานวิทยาศาสตร์และเทคโนโลยี สํานักคอมพิวเตอร์ มหาวิทยาลัยมหาสารคาม

Adobe Photoshoop CS3 คืออะไร Adobe Photoshop P C เป็นโปรแกกรมคอมพิวเตอร์ทรี่ วบรวมเคครื่องมือสําหรับบตกแต่งภาพ CS3 ประสิสิทธิภาพสูง เพืพื่อการทํางานรระดับมาตรฐานน สําหรับนักอออกแบบมืออาชีชีพที่ต้องการสร้างสรรค์งานกกราฟิกที่ โดดเเด่น ทั้งงานที่ใช้ชบนเว็บและงาานสิ่งพิมพ์

คุณสมบัตั ิของคอมพิพิวเตอร์ที่แนะนํา Intel® Pentium® P 4 or o AMD Athloon® 64 proceessor • Microso oft® Windowss® XP with Seervice Pack 3; 3 Windows Viista® Home PPremium, Bussiness, Ultimate, or Enterprisee with Servicee Pack 1 (Servvice Pack 2 reecommendedd); or Window ws 7 • 1GB of RAM • 1GB of available harrd-disk space for installatio on; additionall free space rrequired durinng installatioon (cannot insstall on remoovable flash-bbased storagee devices) • 1024x76 68 display (12280x800 recoommended) with w qualifiedd hardware-acccelerated OppenGL graphics card, c 16-bit coolor, and 2566MB of VRAM • Some GPU-accelerat G ted features require r graphhics support foor Shader Moodel 3.0 and OpenGL 2.0 2

Photoshop CS3

•

เออกสารประกอบบการอบรม การรออกแบบและตตกแต่งภาพสําหรับจัดทําเว็บด้วย Adobe Phootoshop CS3

ภาพในเครือ่ งคอมพิวเตตอร์ ภาพในเครื่องคคอมพิวเตอร์ หรื ห องานกราฟิกที ก พ่ บเห็นกันในสื ใ อ่ ต่าง ๆ ปัจจุ จ บนั นี้มีความมสวยงาม หลากหลาายมาแต่โดยทััว่ ไปแล้วงานคออมพิวเตอร์กราาฟิกมีพื้นฐานกการสร้าง 2 รูปแบบ ป คือ

1. กราฟิกแบบบ Vector เป็ป็นการสร้างภาาพทีม่ ีรูปทรงเรรขาคณิตโดยใช้ช้เส้นแบบต่าง ๆ มารวมกัน โดย โ สามารถปประกอบกันเป็นรู น ปภาพซึ่งมีข้ขอ้ ดีคือ สามารรถขยายได้โดยไไม่เสียความสมมดุลของรูปภาพพ ขอบของรูปภาพ จะไม่แตกกเมื่อมีการขยาาย โปรแกรมที่สามารถสสร้ ส างภาพเวกเตอร์ ง ์ได้ คือ CorelDDRAW, Illustoor 2. กราฟิกแบบบ Bitmap เปป็นการสร้างรูปภาพจากภาพ ป พถ่ายซึ่งรูปภาพพจะเกิดจากจุดดสีที่มีลกั ษณะเป็น จุดสี่เหลียม ย่ มาเรียงกันอยู อ จ่ ํานวนมากเรียกว่า จุดพิเซล เ พอมารวมมกันจะก่อให้เกิดภาพ แหล่งที่มาของภาพจจะ ได้มาจากกการถ่ายภาพ ซึซ่งสามารถนําภาพไปตกแต่ ภ งและแก้ไขได้ในโปรแกรม น Phhotoshop

ความละเอียดของภาพกกราฟิก

Photoshop CS3

ภาพที่ปรากฏบบนหน้าจอคอมมพิวเตอร์นั้น เกิ เ ดจากจุดสี่เหลี ห ่ยมเล็กๆ ของสีที่เราเรียกว่า พิกเซล (Pixel) ภ าง ๆ (พิกเซลเป็ป็นองค์ประกอบทีเ่ ล็กที่สุดขอองภาพ) มาประกอบกันเป็นภาพขนาดต่ ความละเอียดของภาพจะมีหน่ ห วยวัดป็น พิกเซล/ตารางนินิว้ pixel/inch คือจํานวนจุดสี pixels ในพืพืน้ ที่ ต างกัน ดังนี้ 1 ตารางนินิ้ว และงานกรราฟิกในแต่ละแแบบก็จะใช้ควาามละเอียดที่แตกต่ • ภาพที่แสดงบนหน้าจอคอมพิวเตอร์ เช่น หน้าเว็บ หรืองานพรีเซนเตตชั่น ใช้ความลละเอียด 72 พิกเซล/ตารางนิว้ • ภาพถ่ายทัว่ ๆไป ใช้ความละเอียด 150 พิกเซลล/ตารางนิ้ว • ภาพในงานพิมพ์ ใช้ความละเอียด 300 พิกเซล/ตารางนิ้ว

เอกสารประกกอบการอบรม การออกแบบแลละตกแต่งภาพสสําหรับจัดทําเว็บด้วย Adobe Photoshop CS3 C

1. ส่วนพื ว ้นที่การทํางาน า (Work Area) A หรือพื้นทีท่การทํางานขอองโปรแกรม Adobe Photooshop จะประะกอบด้วย เครื่องมื อ อสําหรับกาารตกแต่งไฟล์ภาพต่ ภ าง ๆ 2. Menu M bar คือส่สวนที่แสดงชื่อเมนู อ ต่างๆ ของงโปรแกรม ก็จะประกอบด้วย File , Edit , Image , Layyer , Seleect , Filter , View V , Windoow , Help 2.1 File หมายถึง คําสัง่ เกี่ยวกับการจัจัดเก็บ และเรียกใช้ไฟล์รปู ภาาพต่างๆ 2.2 Edit หมายถึง คําสั่ังเกี่ยวกับการแแก้ไขลักษณะขของรูปภาพและะ Image ต่างๆๆ 2.3 Imagge หมายถึง คําสั่งการจัดการรรูปภาพและ Image ต่างเช่น การเปลี่ยนสีสีและการ เปลีย่ นขนาด 2.4 Layeer หมายถึง ชั้นหรือลําดับของรูปภาพและวัวัตถุที่เราต้องกการจะทํา Effeccts 2.5 Seleect เป็นคําสั่งการเลือกพื้นทีห่ รือส่วนต่างขอองรูปภาพและวัตถุในการที่จะเล่น Effects ต่างๆ 2.6 Filteer เป็นคําสั่งการเล่น Effects ต่างๆสําหรับรูปภาพและวัตถุ 2.7 View w เป็นคําสั่งเกี่ยวกับมุมมองของภาพและวัตถุในลักษณะตต่างๆ เช่น การขขยายภาพ และย่อภาพ ให้ดูเล็ เก 2.8 Winddow เป็นส่วนคําสั่งในการเลืลือกใช้อุปกรณ์เสริมต่างๆที่จําเป็นในการใช้สร้าง Effects ต่างๆ 2.9 Helpp เป็นคําสั่งเพื่อแนะนําเกี่ยวกกับการใช้โปรแแกรมฯและจะมีมีลายละเอียดขของโปรแกรม อยู่ในนั้น ณ์ต่าง ๆ ที่ใช้ในการสร้างชิ้นงาานหรือตกแต่งภาพ 3. Tooolbox คือส่วนของอุปกรณ์ 4. Toool options bar คือส่วนที่กําหนดคุณสมมบัติของอุปกรณ ณท์ ี่เลือกจาก Toolbox 5. Paalettes คือส่วนที่ใช้ตรวจสออบและกําหนดดคุณสมบัติต่าง ๆ ให้กับรูปภาาพ 6. Sttatus bar คือส่วนที่แสดงราายละเอียดต่าง ๆ ของชิ้นงานน เช่น ขนาดขอองมุมมองรูปภาาพ ขนาดของไไฟล์ คําแนนะนําการใช้งานของอุ า ปกรณ์ ณ์ที่เลือกจาก Tooolbox

Photoshop CS3

ส่วนประะกอบต่าง ๆ ของโปรแกกรม

Photoshop CS3

แถบเครื่องมืมือ (Toolsbbox)

Marqueee Tool เป็นการเลืลือกแบบสี่เหลีย่ มผืนผ้า, วงกลมม, แถวขนาด 1 พิกเซลส์ หรือคอลัมน์ 1 พิกเซซลส์ Move Toool ใช้เพื่อเลื่อนส่วนที่เลือก หหรือไว้เลื่อน Laayer และ Guidde ต่างๆ Lasso Toool จะใช้เพื่อสร้ ส าง Selection แบบอิสระ, แบบ Polygonaal (ตามจุดที่คลิิก) และ Magneetic (ดึงเข้าหา ขอบรูปภาาพ) W Tool Magic Wand ใช้เลือกพื้นที่บริเวณที่มีสีเดียวกัน Crop Toool ใช้ในการเเลือกบางส่วนขอองรูปภาพ Slice Toool ใช้ในการสสร้าง Slice Slice Sellection Tool ใช้เลือก Slice ที่คุณสร้างขึ้นมา Healing Brush Tool ใช้ในการรระบายสี เพื่อซ่อมแซมรูปภาพใให้สมบูรณ์แบบ Patch Toool ใช้เฉพาะใในบริเวณที่เลือกไว้ ก เท่านั้น เพืออให้ ่ เกิดความสมมบูรณ์ของรูปภาาพ โดยใช้ลวดลลาย หรือใช้ส่วนที่ เลือกในภาพเป็นต้นฉบับ Brush Toool ใช้ในการววาดเส้น Brush ต่างๆ Pencil Toool ใช้ในการววาดเส้นที่มีขอบบชัดเจน Clone Sttamp Tool ใช้ก็อปปี้รูรูปโดยอาศัยรูปภาพต้นฉบับ

Pattern Stamp Tool ใช้เพื่อวาดรูปโดยใช้บางส่วนของรูปภาพที่มีอยู่เป็นต้นฉบับ History Brush Tool ใช้กลับคืนรูปภาพเดิมจาก State หรือ Snapshot ของรูปเดียวกัน Art History Brush Tool ใช้ในการวาดรูป จาก State หรือ Snapshot ของรูปนี้โดยอาศัยรูปแบบของ Stoke ที่มีสไตล์ หลากหลาย ช่วยให้สไตล์ ของภาพดูต่างออกไป Eraser Tool ใช้ลบรูปภาพหรือลบบางส่วนของพิกเซลส์และทําการเก็บส่วนต่างๆ เป็น State ต่างๆ ใน History Palette Magic Eraser Tool ใช้ลบรูปภาพบริเวณที่มีสีเดียวกันให้กลายเป็นพื้นที่โปร่งใส (Transparent) โดยการคลิกเพียงครั้งเดียว Background Eraser Tool ใช้ลบรูปภาพบางส่วนให้กลายเป็นพื้นที่โปร่งใสโดยการลากเมาส์ Gradient Tools ใช้เพื่อไล่สีระหว่างสีหลายๆ สี ในแบบต่างๆ Straight-line, Radial, Angle, Reflected และ Diamond Paint Bucket Tool ใช้ในการเติมสี Fill ในบริเวณที่เป็นสีเดียวกันด้วยสีของ Foreground Burn Tool ใช้ลดความสว่างทําให้รูปภาพดูมืดลง Sponge Tool ใช้เปลี่ยนสีในส่วนต่างๆ ของรูปภาพ โดยการปรับค่าความเข้มสี Path Selection Tool ใช้เพื่อเลือก Shape หรือ Path เพื่อแสดง Anchor Paint, Direction Line และ Direction Paint Type Tool ใช้ในการสร้างตัวหนังสือลงบนรูปภาพ Type Mask Tool ใช้สร้าง Selection เป็นรูปร่างตัวหนังสือ Pen Tools ใช้ในการลากเส้น Path ซึ่งสามารถดัดโค้งตามรูปภาพได้ Custom Shape Tool ใช้เลือกรูปภาพเลือกรูปภาพที่มีรูปร่างเฉพาะจาก Custom Shape List Note Tool ใช้เขียนโน๊ต หรือแนบเสียงไปกับรูปภาพได้ Eyedropper Tool ใช้ในการดูดสีจากรูปภาพเพื่อใช้เป็นต้นแบบของสีกับงานชิ้นอื่นๆ Measure Tool ใช้วัดระยะห่าง, ตําแหน่งและมุมองศาระหว่างภาพ Hand Tool ใช้เลื่อนภาพที่อยู่ในหน้าต่างเดียวกัน Zoom Tool ใช้ในการขยายและย่อส่วนการแสดงภาพบนหน้าจอ

Photoshop CS3

แผนผังแถบเครื่องมือ

การเปิดไฟล์ภาพ (O Open) 1. คลลิกที่เมนูคําสั่ง File ที่แถบ M Menu bar จากกนั้น เลือกคํ ก าสั่ง Open

2. จะะปรากฏ Dialoog แสดงรายชืชื่อไฟล์ต่าง ๆ ดังภาาพ เพื่อเลือกไฟฟล์ทตี่ ้องการเปิปิดมาใช้งาน

3. จาากนั้น ที่ชอ่ ง Look L in ให้คลิกที่ เพื่อเลือกโฟลเดอร์์ภาพ จากนัน้ เลือก All Form mats 4. คลลิกเลือกไฟล์ที่ต้องการเปิดใช้ช้งาน จากนนั้นคลิกปุ่ม Oppen

การปิดไฟฟล์ภาพ (Close) เราสามารถปิดไฟล์ภาพพที่ได้เปิดขึ้นมาแล้ ม วในโปรแแกรม โดยคลิกที ก ่เมนู File > Close หรือ

Photoshop CS3

กดปุม่

เออกสารประกอบบการอบรม การรออกแบบและตตกแต่งภาพสําหรั ห บจัดทําเว็บด้วย Adobe Phootoshop CS3

การสร้างไฟลล์ใหม่ (Neww) 1. คลิกที่เมนูคําสั่ง Filee ที่แถบ Menuu bar จากนั้นเลือกคําสั่ง Neew

Photoshop CS3

2. จะปราากฏ Dialog สํําหรับกําหนดคคุณสมบัตติ ่าง ๆ ของไฟล์ภาพพดังนี้

- Name คือ ชื่อของชิ้นงานน สามารถกําหนนดใหม่เองได้ ชื่อนี้จะไประบุที่ชื่อไฟล์ต่อไปป - Preset คือ ขนาดงานที่โปรแกรมกํ ป าหนดดมาให้ ซึ่งมีหลากหลายขนาดดให้เลือก หรือสามารถกําหนนด เองจากช่อง อ Width และ Height ได้ - Width คือ ขนาดความกว้ว้างของงาน (จาากซ้ายไปขวา)) โดยกําหนดหหน่วยและขนาดดได้เอง จากรูป คือ 1024 Pixxels - Height คือ ขนาดความกวว้างของงาน (จจากบนลงล่าง) โดยกําหนดหนน่วยและขนาดดได้เอง จากรูป คือ 768 Pixeels - Resolutionn คือ ความละะเอียดของภาพพ โดยใส่ตัวเลขค่าความละเอียดของภาพ ย เชช่น งานเว็บหรือรูป ที่แสดงบนนคอมพิวเตอร์ร์เท่ากับ 72 pixxels/inch งานนสิ่งพิมพ์เท่ากัับ 150-200 pixels/inch p - Color Modde คือ โหมดสีสีของภาพ ซึ่งประกอบไปด้วย โหมดสี Bitm map, Grayscale, RGB Collor, CMYK Coolor, Lab Collor - Backgrounnd Contentss คือ สีพื้นหลังของภาพ เมื่อเริ่มชิ้นงานใหมม่ มีดงั นี้ • White กําหนดให้ห้สีพื้นหลังเป็นสีขาว • Bacckground Coolor กําหนดใหห้สีพื้นหลังเป็นสีเดียวกับ Bacckground • Transparent ไมม่มีพื้นหลัง 3. หลังจาากกําหนดคุณสมบัติต่าง ๆ ใหห้คลิกปุ่ม OK เพื่อเริ่มชิ้นงานนใหม่

การบันทึกข้อมูลลงบบนไฟล์ (Saave) หลังจากตตกแต่งไฟล์ภาพพเรียบร้อย จะะต้องเก็บบันทึกข้ ก อมูลลง บนไฟฟล์ (Save) สําหรั า บการเรียกใใช้งานในครัง้ ต่ตอไป โปรแกรมมมีการ บันทึกข้อมูลลงบนไไฟล์ (Save) อยู อ ่ 3 ลักษณะ คือ - Save บันทึกไฟล์ในรูรูปแบบ (Form mat) ปกติ ซึ่งจะอยู จ ใ่ น รูปแบบบ (Format) ของ ข PSD ซึ่งเรราสามารถเก็บการทํางาน แบบเลเยอร์ไว้ได้ ข้อดี อ คือทําให้เราาสามารถนําผลลงานที่เก็บไว้ มาปรัับปรุงแก้ไขใหมม่ได้ - Save As บันทึกไฟล์ล์ในรูปแบบ (Foormat) อื่น ๆ ได้ เช่น JPEG, BMP, GIF เป็ป็นต้น - Save for Web & Devices… D บันทึทกไฟล์ในรูปแบบ (Form mat) สําหรับกาารใช้งานบนเว็ว็บ เช่น ไฟล์ Html H และ ไฟล์รูปภาพ ป JPEG, GIF, PGN เป็นต้ นน

- ชื่อไฟล์ (FFile Name) - รูปแบบขอองไฟล์ (Formaat) ที่ต้องการ - กําหนดคุณสมบั ณ ติของกาารบันทึกไฟล์ (Save Options) • As a Copy บันทึกไไฟล์เป็นชือ่ อืน่ รูปแบบ (Format) อื่น ขณะที่ไฟล์เดิมกําลังเปิดใช้ ใ งาน • Layeers จะเก็บคุณสมบัติของ Layyer ต่าง ๆ • Use Proof setup เก็บค่าโหมดสีสีที่จะใช้ แสดงสีของภภาพก่อนจะพิมมพ์ • Thum mbnail กําหนนดให้ไฟล์ที่บันทึก (Save) สามมารถแสดงภาพพตัวอย่างใน Dialog ของการเปิดไฟล์ ด • Use Lower Case Extension กําหนดให้ นามสกุลไฟล์เป็นอักษรตัววเล็ก 3. หลั ห งจากกาํ หนดคุณสมบัตติ ่าง า ๆ ให้คลิกปุปม่ Save เพือบั อ่ นทึกข้อมูลลงบนไฟล์

Photoshop CS3

วิธีการบันทึกหรือ Save งาน ทําดังนี้ 1. คลลิกที่เมนูคําสั่ง File จากนั้นเลือกคําสั่ง Savve As 2. จะะปรากฏ Dialoog สําหรับกําหนดคุณสมบัตติ ่าง ๆ ของไฟล์ภาพดังนี้

เออกสารประกอบบการอบรม การรออกแบบและตตกแต่งภาพสําหรั ห บจัดทําเว็บด้วย ว Adobe Phootoshop CS3

การใช้งาน Palettes Palettes คือ Dialog ที่ใช้ตรวจสอบและกํกําหนดคุณสมบบัติต่าง ๆ ของรรูปภาพ เช่น Palette ของ Navigatoor และ Info, Palette P ของ Color, C Swatcches เป็นต้น Palette ต่าง ๆ จะถูกจัดเป็นกลุ่ม ๆ สํสาหรับการซ่อนหรือแสดง Palettes P นั้นใหห้คลิกทีเ่ มนูคําสสั่ง Window จากนั้นเลืลือก Palette ที่ต้องการซ่อนหรือแสดง Palette ใดถูกเปิดใช้งานอยู่จะมีเครื่องหมายถถูก หน้า Paleette Navigatoor Palette Navigator Paalette เป็น Paalette ที่ใช้สําหรับเปลี่ยนขนนาดมุมมอง ทีจ่ อภาพตามคววามเหมาะสม ประกอบดด้วยส่วนต่าง ๆ ดังนี้

Proxy Prevview

เปอร์เซ็นต์ขนาดภาพพ Zoom Out O Zoom In Z Zoom Slider

Photoshop CS3

1. Proxy Preview Area คือส่ อ วนที่แสดงถึถึงขนาดของภาาพในชิ้นงาน กรอบสี ก หมายถึงงขนาดของชิ้นงาน หากกรอบบของ Proxy Preview P อยู่ริมสุ ม ดของภาพแแสดงว่าภาพนันมี น้ ขนาดพอดีกกัับชิ้นงาน 2. ตัวเลขเปอรร์เซ็นต์ของภาพพ คือส่วนที่ใช้กํกาหนดขนาดมุมุมมองของภาพพ ซึ่งอยู่ในรูปแบบของเปอร์เซ็นต์ โดยค่าขอองขนาดภาพจริริงจะเท่ากับ 100 เปอร์เซ็นต์ 3. Zoom Ouut & Zoom Inn คือส่วนที่ใช้กําหนดขนาดมุมมองของภาพพ ประกอบด้วยส่วนทีใ่ ช้กําหนนด 3 ส่วน คือ 3.1 Zoom Out คือส่วนที่อยู่ดา้ นซ้ายสุด ใช้สาํ หรับย่อขนาดมุมมองของภาพให้ห้เล็กลง 3.2 Zoom In คือส่วนทีที่อยู่ด้านซ้ายสุสุด ใช้สําหรับขยายขนาดมุมมองของภาพให้ห้ใหญ่ขึ้น 3.3 Zoom Slider คือส่สวนที่เป็นแถบบเลื่อน หากเลือนทางด้ ่อ านซ้ายจะย่ ย อขนาดมุมุมมองของภาพพให้ ล แต่หากเลื่อนมาทางขวาจะขยายขนาดมุมุมมองของภาพพให้ใหญ่ขึ้น เล็กลง

Color Palette Color Palette คือ Palette ที่ทําหน้าทีเ่ ป็นจานสี ซึ่ง Mode สีที่ปรากฏในภาพจะเป็นลักษณะการ ผสมใน Mode RGB มีส่วนประกอบต่าง ๆ ดังนี้ 1. Set foreground color คือส่วนแสดงสีของ foreground 2. Set background color คือส่วนแสดงสีของ background 3. RGB slider คือส่วนที่ใช้กําหนดค่าของการผสมสีใน Mode RGB ซึ่งสามารถเลื่อนเพื่อปรับ ค่าสีได้จากแถบ slide หรือระบุเป็นตัวเลข (0-255) เช่น สีดํา คือ R=0,G=0, B=0 4. Sample color คือส่วนสําหรับกําหนดค่าสีในลักษณะจุ่มเลือกสี

Swatches Palette Swatches Palette คือ Palette ที่ทําหน้าที่สาํ หรับเก็บสีหลักๆ ที่นิยมใช้ สามารถเลือกนํามาใช้ได้ ทันทีและถ้าหากว่าคุณมีสีที่ตอ้ งการใช้เป็นประจํา สามารถบันทึกสีนั้นไว้ใน Palette นี้ได้

Photoshop CS3

การบันทึกสีทตี่ อ้ งการไว้ที่ Swatches Palette สามารถทําได้โดยเลือกสีทตี่ ้องการ จากนั้นคลิกเมาส์ที่ ปุ่มบันทึกสีใหม่ที่ Swatches Palette จะสามารถบันทึกสีทตี่ อ้ งการได้

History Palette เป็น Palette ที่แสดงขั้นตอนนวิธีการต่าง ๆ ที่ใช้ทํางานกับไฟล์ บ ภาพตามมลําดับโดยสามมารถย้อนกลับไปยัง การทํางานต่าง ๆ ในลําดับชั้นและยกเลิกได้ ประกออบด้วยส่วนต่าง ๆ ดังนี้

X Y Z [ \ ] 1. ส่วนที่ใช้กําหนดข้อมูลของการใช้ Histoory Brush Toool 2. เป็นภาพที่แสดงรายละเอีอียดของงานที่ทําตามลําดับ 3. History Sttate เป็นลําดับขั บ น้ ตอนวิธกี ารต่าง ๆ ที่ได้กระทําลงไป 4. New Docuument คือส่วนที่ใช้สร้างกระะดาษทําการใหหม่ โดยคัดลอกกภาพจากลําดัับที่ชอี้ ยู่ 5. New Snappshot คือส่วนที น ่ใช้สร้าง Snaapshot ใหม่ 6. Trash Buttton คือส่วนทีใช้ ใ่ ลบขั้นตอนกการทํางานกับไฟล์ ไ ภาพในลําดัดบทีเ่ ลือกอยูอ่ออก หมายเหตุ การยยกเลิกการทํางาานใด ๆ ที่ไม่ต้องการ ปกติเราจจะใช้คําสั่ง Ctrl--z แต่ ในโปรแกกรม Photoshoop ใช้ คําสั่ง Ctrl-z สําหรั ห บยกเลิกขั้นตอนล่ ต าสุดเท่านั้น หากต้องการยยกเลิการทํางานนหลาย ๆ ขั้นตออนเราจะใช้ Hisstory Palette แทน เนืนื่องจาก

Photoshop CS3

Layer Palette Layer Palettte เป็น Palettte ที่เก็บชิ้นงานนหรือภาพทั้งหมด ห เรียกว่า Layer L ซึ่งจะเรีรยงลําดับก่อนหหลัง ด บชิช้นงานหรือภาาพอื่น ๆ โดยจะะแก้ไขเฉพาะ ทําให้เกิดความสะดวกในการจัดการแก้ไขโดยไม่เกิดผลกระทบกั า ้น ส่วนประกกอบของ Layeer Palette มีดัดงั นี้ ชิ้นงานหรืรือภาพใน Layyer ที่เลือกเท่านั

11 12

a Y X

Z[ \] ^_

1. Indicates Layer Visibility คือส่วนที่กําหนดการแสดงผลของ Layer หากมีสัญลักษณ์รปู ตาแสดงว่า ภาพที่อยูใ่ น Layer ดังกล่าวถูกแสดงบน Work Area หากไม่มแี สดงว่า Layer นั้นถูกซ่อนหรือไม่ แสดงผล 2. Indicates if Layer is Linked คือส่วนที่แสดงว่า Layer ใดกําลังถูกทํางาน Layer นั้น จะมี สัญลักษณ์รูปพูก่ ัน นอกจากนี้ยงั สามารถกําหนดให้ Layer อื่นเลื่อนตําแหน่งตาม Layer ที่กําลัง ทํางานอยู่ได้โดยการคลิกให้ Layer อื่นเปลี่ยนเป็นสัญลักษณ์รูปโซ่ 3. Add a Layer Style คือส่วนที่ใช้ใส่ Effect เช่น แสง เงา ต่าง ๆ ให้กับภาพใน Layer 4. Add a mask คือส่วนที่ใช้เพิ่ม Mask หรือเพิ่ม 1 Layer ซ้อนทับ Layer ที่กําลังทํางานอยู่ โดยทัง้ 2 จะถือเป็น Layer เดียวกัน 5. Create a new set คือส่วนที่ใช้สร้าง Folder สําหรับเก็บ Layer ต่าง ๆ เข้าด้วยกัน 6. Create new fill or adjustment layer คือส่วนที่ใช้ปรับค่าสี ความคมชัด แสงและความสว่างใน แบบต่าง ๆ ของภาพใน Layer 7. Create a new layer คือส่วนที่ใช้สร้าง Layer ใหม่ 8. Delete layer คือส่วนที่ใช้ลบ Layer 9. Layer Thumbnail คือส่วนที่แสดงว่า Layer นั้นมีภาพใดอยู่ 10. Lock คือส่วนที่ใช้ Lock ในรูปแบบต่างๆ 11. Opacity คือส่วนที่ใช้ทําให้ Layer นั้นโปร่งใส (ทั้ง Fill และ Effect) 12. Fill คือส่วนที่ใช้ทําให้ เฉพาะ Fill ใน Layer นั้นโปร่งใส ซึ่งไม่รวม Effect ที่ Layer นั้นมีอยู่

หมายเหตุ แถบสีน้ําเงินแสดงว่ากําลังทํางานกับ Layer ที่ชื่อว่า "เหนือ & ว่าน" การจัดลําดับ Layer สามารถทําได้โดยนําเมาส์คลิกค้างไว้ที่ Layer แล้วลากไปยังตําแหน่งที่ต้องการ หรือใช้เมนูคําสั่ง Layer -> Arrange • Bring to Front คือ ส่ง Layer ไปยังตําแหน่งบนสุดของทุก Layer • Bring Forward คือ ส่ง Layer ขึ้นไปตําแหน่งบน 1 ขั้น • Send Backward คือ ส่ง Layer ลงไปตําแหน่งล่าง 1 ขั้น • Send to Back คือ ส่ง Layer ลงไปตําแหน่งล่างสุดของทุก Layer แต่ยกเว้น Background Layer

Photoshop CS3

หมายเหตุ เราสามารถเปิด Layer palette ได้อย่างรวดเร็ว โดยการกดปุ่ม F7

รู้จักกับ Layyer โโปรแกรม Phootoshop มีการทํ า างานกับภาาพต่าง ๆ แบบบเลเยอร์ (Layeer) ซึ่งถือเป็นส่วนสําคัญที่ทําให้ สามารถจัจัดการกับรูปภาาพต่าง ๆ ได้โดยง่ ด าย และยังมีประโยชน์อย่างมากในการกกลับมาแก้ไขส่ววนต่าง ๆ ของภาพ ที่ได้แยกกักันไว้ในแต่ละเลเยอร์ โดยไม่มีมผลกับเลเยอรร์อื่น การทํางานของเลเยอร์ เหมือนกั อ นกับ การนนําแผ่นใสที่มีรปภาพมาวางซ้ ู ซ้อนทับกันเป็นนชั้น ๆ แล้วมองงจาก ด้านบนลงมา สอดคล้องกั ง บในโปรแกรรม Photoshoop ที่มีการจัดเรีรียงเลเยอร์ต่าง ๆ ไว้ตามลําดดับจากบนลงล่ล่าง

Photoshop CS3

เมื่อมองภาพจจากด้านบนลงมมาจะเห็นภาพดดังนี้

การกําหนนดพื้นที่ เพืพื่อแก้ไขและะตกแต่งภาพพ (Selectioon) Marqueee Tool เป็นเคครื่องมือสําหรับการกํ บ าหนด Selection S โดยยคลิกเลือก Marquee Tooll จาก Tool box จะมี ให้ห้เลือกใช้งาน 4 รูปแบบตามคความเหมาะสมม Rectangular Marquee Tool สําหรับการสร้ บ าง Sellectionเป็นสี่เหลี่ยมผืนผ้า และ สี่เหลียมจั ย่ ตุรัส Elliptical Marqueee Tool สําหรับการสร้าง Sellection เป็นวงงกลมและวงรี Singlee Marquee Toool สําหรับการสร้ บ าง Sellection เป็นพืน้ ที่รูปเส้นตรงงใน แนวนออน ความกว้าง 1 pixel Singlee Column Maarquee Tool สําหรับการสร้ บ าง Sellection เป็นพืน้ ที่รูปเส้นตรงงใน แนวตั้ง ความกว้าง 1 pixel

วิธีการใช้ช้งาน Marqquee Tooll 1. ให้คลิกทีท่ Marquee Tool T บน Toool Box หรือหาากต้องการเลือกรูปแบบอืน่ ขออง Marquee Tool ให้ คลิกเมาส์ค้างไว้ แลล้วคลิกเลือกรูปแบบที ป ่ต้องกาารสร้าง Selecction 2. วางตําแหน่ ของ Curssor รูป เพื่อกําหนดดจุดเริ่มสําหรับการสร้าง Selection 3. ให้คลิกเมาส์ เ ค้างไว้และลากเพื่อกําหนดขนาดของพืพื้นทีท่ ี่ต้องการ แล้วปล่อยเมาาส์ จะปรากฏเเส้นประ ง ของ Selection ดังภาพ

Photoshop CS3

M Marquee T Tool เมื่อคลิกเลือกใใช้งาน Marquuee Tools ที่ Tool options bar เราจะสสามารถกําหนดดคุณสมบัติต่าง ๆ ของ Marrquee tool ไดด้ดังนี้

Photoshop CS3

เ อก 4 รูปแบบบคือการกําหนดเลื ห อก Selection ใหม่ การเพิม่ ตัดแลละลด 1. กาารแก้ไข Seleection จะมีให้เลื Selection และการสร้าง า Selection ด้วยวิธกี ารต่างๆ า ดังนี้ เมือ่ คลิกเมาส์ส์จะเป็ นการสร้ร้าง Selectionn ขึน้ ใหม่ สร้าง Selection เพิม่ ขึน้ โดดยพืน้ ที่ Seleection ก่อนหนน้าจะไม่หายไปป แต่จะถูกรววมเข้าด้วยกัน ลบพืน้ ทีข่ อง Selection อออกจาก Selecttion ก่อนหน้า เป็ นการสร้าง Selection ใหหม่ในพืน้ ที่ Seelection เดิม ด้วยวิธี Intersect จากพืน้ ท่ี Selection ท่ี กําหนด ใหม่ ใ และ Seleection ก่อนหนน้า ทีม่ พี น้ื ทีเ่ ดียวกัน 2. Feather กําหนนดความฟุ้งเบลอของขอบ SSelection ภาพพ มีคา่ ตัง้ แต่ 1 – 250 หากกกําหนดค่ามาาก ้ ง เบลออจะมากตาม ค ความฟุ 3. Style S ของ Marrquee Optionns มี 3 รูปแบบคือ • Norm mal เลือกขนาาดอิสระ ขนาดดของ Selectioon จะเปลีย่ นไไปตามการเคลือ่ นตําแหน่งเมาส์ • Consstrained Aspect Ratio กําหนดขนาดขออง Selection โโดยยืดหยุน่ ตามอัตราส่วนขของ ความ กว้าง (Width) และความมสูง (Height) • Fixedd Size กําหนนดขนาดของ Selection S ตามอัตราส่วนขอองความกว้าง (Width) และะ ความสูง (Height)) ทีแ่ น่นอน 4. Width W การกําหนดความกว้างของ Selecttion 5. Height H การกําหนดความสูงของ Selectioon

การสร้าง Fixed Sizze Selection ถ้าต้องกาารสร้าง Selection ขนาดกว้้าง 600 ยาว 80 8 Pixels ให้เปลี่ยนช่อง Styyle เป็นแบบ Fixed Size และกําหนดคความกว้างและความยาวตามที่ต้องการ

1. เลือก Stylee เป็ นแบบ Fixed Side 2. Width การรกําหนดความมกว้างของ Seelection 3. Height กาารกําหนดความสูงของ Seleection

Lasso Tool T เป็นเครื่องมือทีส่ ามารถสร้าง Selection ได้อย่างอิสระ ส มีความยืดหยุ่นสูง เมือ่ คลิก Lasso Toool ที่ Tool bar จะมีให้เลื เ อกทัง้ หมด 3 รูปแบบดังน

1.. Feather กําหนดความฟุ้งเบลอของขอบบพืน้ ที่ Selecttion 2.. Anti-aliasedd กําหนดให้ขอบของพืน้ ทีทีท่ เ่ี ลือกมีความเรียบยิง่ ขึน้ ไม่ขรุขระ

Photoshop CS3

1. Laasso Tool เป็นการสสร้าง Selectioon อย่างอิสระ วิธีการใช้งานเเมื่อคลิกเมาส์ค้คา้ งแล้วลากไปตามขอบของพืพื้นที่ Seleection ที่ตอ้ งกการ จนมาบรรจบที่จุดเริ่มต้นแล้ น วจึงปล่อยเเมาส์จะปรากฏฏเส้นประของ Selection สาามารถ กําหนนดคุณสมบัติของ ข Lasso Toool ต่าง ๆ ได้ดัดงั นี้

เออกสารประกอบบการอบรม การรออกแบบและตตกแต่งภาพสําหรั ห บจัดทําเว็บด้ววย Adobe Phootoshop CS3

2. Polyggonal Lasso Tool เป็นการสร้างพืพืน้ ที่ของ Seleection ในลักษณะของรู ษ ปหลลายเหลี่ยม คลิกเมาส์ ก บนภาพพเพื่อกําหนด จุดเริ่มต้นในครั น ง้ แรกแล้ล้ว ลากเมาส์จะปรากฏเส้ ะ นต่อจากจุ อ ดเริม่ ต้นกั น บปลายเมาสส์ วิธีการใช้งานนเมื่อคลิกเมาส์ส์ Selectioon ที่เป็นเส้นตรรงเชื่อมจากจุดต้ ด นมายังจุดปลลายเมาส์ทคี่ ลิก ให้ทําแบบนีน้เ้ รื่อย ๆ เพื่อสร้างเส้นขอบขออง Selectioon จนสุดท้ายให้คลิกเมาส์บรรจบที ร ่จดุ เริ่มต้นครั้งแรก จะเกิด Selection ขึ้น สําหรับกการกําหนด คุณสมบัติตจิ ะเหมือนกับ Lasso Tool

Photoshop CS3

3. Magnnetic Lasso Tool T เป็นการสร้างพืพืน้ ที่ของ Seleection อย่างอิสระและรวดเร็ร็วในลักษณะขของแม่เหล็กทีด่ดูดู เข้าหาสี โดยย ง ที่เลือกกับสีของ Background เป็นตัวกําาหนดขอบเขตต Magnetic Lasso Tool จะใช้ความแตกต่างระหว่างสี พื้นที่ Sellection วิธีการรใช้งานเมื่อคลิลิกเมาส์เพื่อกําหนดจุ ห ดเริม่ ต้นแล้ น ว ให้ปล่อยเมาส์แล้วลากเมาส์ตาม ขอบบเขต พื้นที่ทตี่ ้องการเลื อ อก Magnetic Lasso Tool จะเลือกขอบเขตพื อ นที ้น ่ Selection เองโดยอัตโนมมัติ จน สุดท้ายให้ ย คลิกเมาส์ส์บรรจบที่จุดเริริ่มต้นครัง้ แรก จะเกิด Selection ขึ้น คุณสมบั ส ติของ Maggnetic Lasso Tool มีเพิ่มจาก Lasso Toool ได้ดังนี้

1. Width มีค่าตั า ้งแต่ 1-40 pixels p เป็นการกําหนดให้โปรแกรมทําการตรวจสอบหาขขอบเขตของพืน้ ทีท่ ี่ เลือก นับตัง้ แต่จุดที่เมาส์ส์ชี้อยู่ไป X pixxels เพือ่ กําหนนดขอบเขต 2. Edge Contrast มีค่าตั้งแต่ แ 0-100% หากมีค่ามากจะะทําให้เส้นขอบบของพืน้ ที่ที่เลือกอยูร่ ะหว่างสีสีที่ Contrast กันมาก 3. Frequenccy มีค่าตั้งแต่ 0-100 0 pixels หากค่าความถีถีม่ ากจะทําให้มีมกี ารกําหนดจุดดในแต่ละช่วงขของ การ เลือกมมาก ทําให้โปรรแกรมสามารถถเลือกพืน้ ที่อย่างมี า ความถูกต้องมากขึ อ ้น

เอกสารประกกอบการอบรม การออกแบบแลละตกแต่งภาพสสําหรับจัดทําเว็บด้วย Adobe Photoshop CCS3

Magic Wand W Tool ่า ใกล้เคียงกัน วิธีการใช้งานคือคลิกที่ปุ่ม บน กําหนดพื้นที่ของ Selecction โดยเลือกบริเวณที่มีคาสี บ Tool box แล้วคลิกเลือกพื ก ้นทีท่ ี่ต้องกาารสร้าง Selection นอกจากกนี้แล้วยังสามาารถกําหนดคุณ ณสมบัติของ Maagic Wannd Tool ได้ดังนี ง ้

1. Tolerannce มีค่าให้กําหนดตั้งแต่ 0 – 255 pixels เป็นค่าของจํานวนสีทใี่ กล้เคียงกับสีที่ถกู เลืลือก 2. Anti-aliaased กําหนดใให้ขอบของพื้นทีท่ ี่เลือกมีควาามเรียบยิ่งขึ้น ไไม่ขรุขระ 3. Contiguuous สามารถททําการเลือกบริริเวณสีที่ใกล้เคียงกันได้เฉพาะในกลุ่ม pixeels ที่ได้คลิกเลือกเท่านั้น ถ้า ไม่ได้ด Check ไว้จะเลื ะ อกบริเวณทีที่มีสใี กล้เคียงกักันในภาพทัง้ หมมด 4. Use All Layers เลือกสี ก โดยมองทุก Layer เป็นเหมมือน Layer เดีดียว หากไม่ถกู Check ไว้ หมายถึงใช้ Magic Wand W Tool เฉพาะ เ Layer นั้นเท่านัน้

Crop Toool กําหนดพื้นที่ของ Selecction โดยตัดส่สวนที่เหลือที่ไม่มได้อยูใ่ นพื้นทีของ ่ Selectioon ในภาพทิง้ ไปป วิธีการใช้ า งานคือคลิลิกที่ปุ่ม บน Tool boxx แล้วคลิกเมาส์ค้างไว้จากนั้นลากเมาส์ น เพื่ออกําหนดพื้นทีของ ่ข Seleection แล้วจึงปล่อยเมาส์ เมืมื่อพร้อมที่จะตัดั ส่วนที่เหลือออก อ ให้คลิก

เพืพื่อยกเลิก นอกกจากนี้เรายังสาามารถกําหนดคุณสมบัติต่าง ๆ ของการตัด ดังนี้

1. Croppedd Area เลือกผผลลัพธ์ของภาพพทีต่ ดั • Deleete ตัดภาพ โดดยลบส่วนที่เหลืลือออก • Hidee ตัดภาพ โดดยซ่อนส่วนที่เหลือเอาไว้ 2. Shield cropped areaa แสดงสีบนพืน้ ที่ส่วนที่เหลือที่จะถูกตัดออก 3. Color สีทีท่จี ะแสดงบนพืพืน้ ทีส่ ่วนที่เหลือ 4. Opacity ค่าความโปร่งแสงของสีบนพืพืน้ ที่สว่ นที่เหลือ 5. Perspecttive ปรับพื้นที่การตัดให้ได้ภาพทีม่ ีมิติ

Photoshop CS3

หรือ ปุ่ม

ปุ่ม บน TTool optionss bar

คําสั่งพื้นฐานนของ Selection • Alll กําหนดพืน้ ที่ Selection โดดยใช้พื้นที่ของงรูปภาพทัง้ หมด • Deeselect ยกเลิกการกําหนดพืพื้นที่ Selectioon • Reeselect ย้อนกกลับไปกําหนดพื้นที่ Selectioon หลัลังจากได้ยกเลิกไป • Invverse เป็นการรเปลี่ยนพื้นที่ของ Selectionn จากกทีก่ ําหนดไว้ให้เป็น พื้นทีต่ รงข้าม

Photoshop CS3

การใช้ Trannsform เพื่อปรับเปลี่ยนพื้นที่ Sellection คลิกที่เมนูคําสั่ง Eddit ที่แถบ Menu bar จากนันัน้ เลือกคําสั่ง Trransform - Aggain กลับสู่รูปแบบเดิมก่อนหหน้านี้ 1 ขั้น - Sccale ปรับเปลียนแบบ ย่ Scalee ตามแนวตั้ง แนวนอนและแแนว ทแแยง - Rootate หมุนพืน้ ที่ทเี่ ลือก - Skkew ปิดเกลียวพื้นทีเ่ ลือก - Disstort การบิดเบือนพื้นที่เลือก - Peerspective ปรับขนาดของพืพื้นที่เลือกให้มลีลักษณะการมออง แบบบ Perspectiive (แบบมีมิติ ความกว้าง คความยาว ความมลึก) - Rootate 180 CW W หมุน 180 องศา - Rootate 90 CW W หมุน 90 องศศาตามเข็มนาฬิฬิกา - Rootate 90 CCW W หมุน 90 องงศาทวนเข็มนาาฬิกา - Fliip Horizontaal กลับจากซ้ายเป็นขวา - Fliip Vertical กลับจากบนลงลล่าง

การใช้งาน Foregroound และ Background Color การใช้งานนในส่วนของ Foreground และ Backgrouund Color สาามารถทําได้ที่ส่วนของ Toollbox

ค่าปกติ (Deffault) สีพื้นหน้า (Fooreground Color) C

สลับสี (Switch Coolor) สีพื้นหลัลัง (Backgrouund Color)

สามารถเปปลี่ยนสีได้โดยดับเบิลคลิก ทีก่ รอบ Foregrround หรือ Background จจะปรากฏ Color Picker ให้เปลี ป ่ยนสี ถ้าต้องการสี ง สําหรับการทํ ก าเว็บโดยเเฉพาะก็สามารรถคลิกที่ช่อง Only O Web Coolors แล้วสีทปรากฎจะ ี่ป เป็นสีที่สามารถแสดงผลบนเว็บไดด้ถูกต้อง

การใช้งาน า Type Tool T

ข้อความในแนวนอน ข้อความในแนวตั้ง ข้อควาาม Selection ในแนวนอน ใ ข้อควาาม Selection ในแนวตั้ง

Photoshop CS3

เราสามารรถสร้างข้อควาามได้ทงั้ ในแนววนอนและแนวตั้ง การสร้างข้้อความแต่ละคครั้งโปรแกรม Adobe A Photoshop จะสร้ร้าง Layer ใหมม่อัตโนมัติ ลักษณะของข้อคววามจะมี 2 รูปแบบคือ

1. แบบ Poinnt Type จะมีรูรปแบบเป็นคําหรื า ออักษรสั้น ๆ 1 บรรทัด โดยกํ โ าหนดจุดเริ่มต้นของ ข้อความบน บ ชิ้นงาน โปปรแกรมจะสร้้าง Type Layer ขึ้นมา และสามารถพิมพ์ข้ขอความลงไปไได้ เมื่อพิมพ์ข้อความเรียบร้ร้อย ให้คลิกที่ปุ่ม

เพื่อตกลง หรือคลิกปุม่

เพืพื่อยกเลิก

2. แบบ Paraagraph Typee จะมีรูปแบบเเป็นข้อความทีมี่มหลายบรรทัด โดยจะอยู่ภายในขอบเขตทีที่ กําหนด เดียวกัน (Bounding ( box) โดยกําหนนดจุดขอบเขตขของข้อความทีใส่ ่ใ โปรแกรมจะสร้าง Type Layer ขึ้นมา และ สามารถพิพิมพ์ขอ้ ความแและจัดเป็น Parragraph ได้จาก า Paragraphh Palette เมื่อพิมพ์ขอ้ ความเรียบร้อย ให้คลิกที่ ปุ่ม

เพื่อตกลง หรืรือคลิกปุ่ม

เพื่อยกเลิก

หากต้องการแแก้ไขข้อความทีที่พมิ พ์ให้คลิกที่ปุ่ม แล้ลวลากเมาส์บนข้ น อความทีต่ ้อองการแก้ไขให้เกิ เด แถบสี แลลว้ จึงปรับแก้ไขข้อความ หรือเปลี อ ่ยนแปลงคุณสมบัติต่าง ๆ ของข้อควาามบน Tool options bar เมืมื่อ แก้ไขเรียบร้ บ อยแล้วจึง คลิ ค กปุ่ม

เพื่อตกลง

หากต้องการตัตัวอักษรที่มีลวดดลายของภาพ Backgroundd เช่น

Photoshop CS3

สามารถทําได้โดยใช้ โ สร้าง Seelection ของตัวอักษร ซึ่งมีวิวธิ ีให้ คลิกที่ปุ่ม เพื่อเลือก Hoorizontal Typpe Mask Tool หรือ Verticaal Type Maask Tool แล้วพิ ว มพ์ขอ้ ความมที่ชิ้นงาน เมื่อพิพมพ์เสร็จ จะเเกิด Selectioon ที่เป็นตัวอักษร จากนั้น สาามารถทีจ่ ะคัดลอกลวดลายภภาพที่ ต้องการตตาม Selectionn ของข้อความมนั้นได้

คุณสมบัตั ิตา่ ง ๆ ขออง Type Tool

Photoshop CS3

Warp Text เมือ่ คลิลิกปุ่ม จะปรากกฏ Dialog สําหรับกําหนดค่าเพื่อปรับแต่งรูปทรงของข้อความ

การใช้งาน Layer ลักษณะการทํํางานของ Layyer เป็นเหมือนแผ่ น นใสวางซ้อนกั อ นเป็นลําดับของรู บ ปภาพ ชช่วยแยกการทํํางาน ให้ ชัดเจนน โดยการทํางานแต่ละครั้งจะมีผลกับ Layyer ที่เลือกอยู่เท่านั้น การมองจะอยูใ่ นลักษษณะมองจาก ด้านบนลงมา ด้านล่าง วิธีการเรียกใช้้งาน Layer คลิลิกที่เมนูคาํ สั่ง Window ที่แถบ Menu baar เลือกคําสั่ง Show Laayer ถ้าหากพบว่า Hide Layers แสดงว่า Palette Layeer ถูกแสดงแล้ล้ว

Acttive Layer

Linnk Layer

Indicates Layer Visible

Active Layerr คือ Layer ทีกํ่ าลังถูกทํางานนอยู่ สามารถเเลือก Layer ไดด้จากการคลิกที่แถบ Layer ที่ ต้องการ การเปลี่ยนลําดับของ Layerr สามารถทําไดด้โดยคลิกเมาส์ส์ที่ Layer ค้างไไว้แล้วลากไปยยังลําดับของ Layer L ที่ ต้องกาารแล้วปล่อยเมมาส์ หากต้องการเคคลื่อนย้าย Layyer โดยให้ Layyer อื่นเคลื่อนย้ น ายตาม ให้คลิกเลือก Layeer แรก แล้วกดดปุ่ม ง จากนั้นให้คลิกเลือก Layyer ที่ต้องการใให้เชื่อมโยงกัน จะเป็นการเลืลือกหลาย Layyer พร้อมกัน แล้ แว Shift ค้างไว้ ให้คลิกที่ สัญลักษณ์รูปโซ่ โ เพื่อเชืชื่อม Layer เหหล่านั้นเข้าด้วยกั ยน ที่ช่อง Indicattes Layer Vissibility หากปรรากฏสัญลักษณ ณร์ ูปตา หมายความว่า Layeer นั้นถูกแสดง

Photoshop CS3

การสร้าง Layer ขึ้นใหมม่ ให้คลิกที่ปุ่ม หากต้องกการคัดลอก Laayer ให้คลิก Layer ที่ต้องการรแล้วลากมาปลล่อย ลงที่ปุ่มนี้ เช่นเดียวกกัน

แต่ถ้าต้องการลบ Layer หลัลังจากคลิกเลือก Layer ที่ตอ้ งการแล้วให้คลิกที่ปมุ่

การ Locck Layer เป็นการกํกําหนดคุณสมบับัติต่าง ๆ เพื่อบงั คับไม่ให้ Laayer ถูกเปลี่ยนแปลงหรือได้รรัับผลกระทบใด ๆ มี ทั้งหมด 4 รูปแบบดังนี้

XY Z[ 1. Lock transparentt pixels ห้ามไม่ให้เติมสีหรือปรับแก้สีลงไปปใน pixels ที่โปร่งแสงบน Layer ได้ 2. Lock image pixells ห้ามไม่ให้มีการแก้ไขหรือตกแต่งภาพบนน Layer 3. Lock position ห้ามไม่ให้มกี ารเคคลื่อนย้ายตําแหหน่งของ Layeer 4. Lock all ห้ามโดยใชช้การกําหนดคุณสมบัตขิ องทัทัง้ 3 ข้อทีก่ ล่าวมา

การ Merge Layer เป็นการรรวมชั้นของ Layyer ตั้งแต่ 2 ชัน้ ขึ้นไปมาไว้รวมกั ร น โดยคลิกที่ เมนู Layer แล้วจะะปรากฏเมนูยอย อ่ สําหรับเลือกแบบต่ อ าง ๆ ของการ ข Mergge Layeer ดังนี้

Photoshop CS3

- Merge Down หรือ Merge Linkeed เป็นการรววม Layer ที่ใช้ง้ าน อยู่กับ Layer ที่อยู่ลาดั าํ บถัดลง โดยยถ้า Layer ทีอยู ่อ ่ลําดับถัดไปมีมี สัญลักษณ์ ษ รูปโซ่ จะมีมีข้อความว่า Merge M Linkedd แต่หากไม่มีรูรูปโซ่ จะมีข้อความว่ อ า Merge Down - Merge Visible เป็นการรวม Layeer ที่ถูกแสดงหหรือมองเห็นได้ ทั้งหมดด - Flattenn Image เป็นการรวม น Layeer ทุกลําดับชันเป็ ้น น Layer เดียว โดยมีชอว่ ื่ า Background และจะลบ Layer ที่ถกซ่ ูก อน ทิ้งไป

การเปลี่ยนชืชื่อ Layer หากต้องการเเปลีย่ นชือ่ ของง Layer ให้คลิกขวาที่ Layeer ทีต่ อ้ งการ แล้วคลิกเลือก Layer Propertiees จะปรากฏ Dialog ของ Layer ซึง่ สามารถเปลีย่ นชืชือ่ ของ Layerr ได้ และแถบสีได

การจัดกลุ่ม Layer

Photoshop CS3

เป็นการรวบรววม Layer ต่าง ๆ มาไว้เป็นกลุ ก ่ม Layer Group สามารถใใช้คําสัง่ ต่าง ๆ เหมือน Layeer ทั่ว ไป เช่น การดู ก คัดลอก เคลื เ ่อนย้าย แลละการเปลี่ยนลลําดับ ยกเว้นคํําสั่งบางคําสั่ง เช่น Layer Efffect ดังนั้นใช้ช้ งาน คําสั่งใด ๆ ของ Layer Group จะเกิดขึ ด ้นกับ Layerr ภายในทุก Laayer การสร้าง Layyer Group คลิลิกทีป่ ุ่ม เ ่อสร้าง Group หลังจากนั้นัให้คลิกเลือก Layer ที่ต้องกการ เพื จัดเก็บค้างไว้ า แล้วลากทีที่ Layer Grouup จากนัน้ ให้ปล่ ป อยเมาส์ หากดับเบิ้ลคลิลิกที่ Layer Grroup จะปรากกฏ Dialog ของง Layer Grouup Propertiess ซึ่งสามารถ เปลี่ยนชือของ อ่ Layer Group G และแถถบสีได

การทําภาพโดยใช้ Filter ฟิลเตอร์ (Filter) คือการตกแต่งภาพด้ด้วยเทคนิคพิเศษ ศ ที่สามารถ ปรับเปลี่ยนรูปแบบบของภาพตามความต้องการขของงาน เราสาามารถใช้งาน Filteer ได้โดยเลือก Menu > Filtter > เลือกใช้ Filter ที่ต้องกการ

จจะได้ภาพทีม่ ีการตกแต่ า งด้วย Filter: Radial Blur ออกมาา ทั้งนี้ ถ้าใช้ Filter อื่นรูปงานนทีป่ รากฏ จะต่างกัน ออกไไป

Photoshop CS3

เมื่อเลือกเสร็จแล้วจะปรรากฏหน้าจอกการปรับเปลี่ยนลั น กษณะของ Filteer สามารถที่จะกํ ะ าหนดได้ตามมต้องการ (ใน Filter แต่ละตัตัวนั้น หน้าจอการปรับเปลี่ยนลักษณะขของ Filter จะไไม่เหมือนกัน) เสร็จแล้วกด ปุ่ม OK O เพื่อจบขั้นตอนการทํางานของ Filter

Photoshop CS3

ตัวอย่าง Filtter ที่น่าสนนใจ

การใช้งาน Layer Style คลิกที่เมนนู Layer > Laayer Style > Blending Options จะปรากฏหน้าต่างดังภาพข้างล่าง

Photoshop CS3

(1) คือ Style ที่ต้องการใช้กับ Layerr ที่เราเลือกไว้ จะมีให้เลือก 10 แบบจากบนนลงล่าง (2) คือ การกําหนดค่าต่างๆ ของแต่ละ Style ซึ่งจะะแตกต่างกันไปปในแต่ละ Stylle

การเปลี่ยนรูรปร่างของรูป (Transfoorm) เราสามารถเปลีย่ นแปลง Layer ในรูปแบบบต่างๆได้เช่น การย่ ก อ/ขยาย การหมุนภาพ การบิดภาพ ด้วย คําสั่ง Traansform โดยคคลิกเลือก Edit > Transform > (เลือก Transform Function F ที่ตต้้องการ)

ลักษณะะของ Transform

การปรับค่าความสว่าง//ความคมชัด (Brightneess/Contrast)

Photoshop CS3

การปรับความมสว่าง-ความมืดของภาพ ด และะการตัดกันขอองสีทชี่ ัดเจนขึนนั น้ ้น สามารถททําได้โดยใช้คําสั่ง A > Brigghtness/Conntrast Brightneess/Contrast โดยเลือกคลิกที่ Image > Adjust

การปรับขนาดของชิชิ้นงาน Image Size Image Size คือการ ลดด/ ขยายรูปภาาพ โดยสสามารถใช้คําสัง่ นี้ได้จากเมนู Image > Im mage Sizee… จะปรากฏหหน้าต่างที่ให้เรากํ ร าหนดขนาดด ของภภาพขึ้นมาดังรูป

Z (1) Width(กกว้าง) และ Height(สูง) ของรูรูปภาพ สามารรถกําหนดได้ตามต้องการ โดยมีหน่วย ให้เลือกสองงแบบคือ Pixeel และ % (2) Constrain Proportions Sign เมื่อสัญลักษณ์นี้ปราากฏดังรูป แสดดงว่าเมื่อเราได้ด้กําหนด ขนาดภาพไไว้ด้านใดด้านหหนึง่ แล้ว โปรแกกรมจะกําหนดดสัดส่วนของด้านที า ่เหลือให้เออง(อัตราส่วนทีเท่ ่ ากัน) ผลที่ได้ก็คือ ไม่ว่าจะย่อหรืรือขยาย รูปภาาพทีอ่ อกมาก็จะมี จ อตั ราส่วนขของ กว้าง x สูงเท่าเดิม (3) Constrain Proportions Check Boox จาก (2) เมื่อเราไม่ อ ตอ้ งการร ย่อ/ขยาย รูปภาพให้ ป เหมือนอัตราส่ ร วนเดิมให้คลิกที่ Check Box B ออก เครืองหมาย อ่ จะะหายไปหลังจากนั้นการกําหนดขนาด ห กว้างและสูงสามารถกํ ง าหนนดได้ตามต้องกการ

1. Current Sizee ขนาดปัจจุบันของงาน 2 New Size ขนนาดที่เพิ่มขึ้นจาาก 2. 3 Relative เป็นคุ 3. น ณสมบัติบอกกค่าขนาดของ New N Size เครื่องหมาย ค่าในช่อง Wiidth และ Heigght จะเป็ปน 0 สามารถเพิพิ่มพื้นที่งานโดยยไม่ต้องรวมค่า Current Size ขนาดดของงาน 4. Anchor ที่ทางที่ต้องการเพิ่มขนาดให้ไปใน ทิศทางที่ต้องการ

X Y Z [

Photoshop CS3

Cannvas Size การ Canvas Size คือการลด/ ก ขยายพพื้นที่ รูป โดยเพิ โ ่มพื้น Baackground แลละสามารถขยาายรูป โดยกกําหนดทิศทางงได้ ดังรูป

การตัดกรอบบของรูป (Crop) การ Crop คือ การตัดกรอบบภาพเอาเฉพาะะทีต่ อ้ งการ นออกจากรูปภาพจะมีขนาดเล็กกเกินไปแล้ว บางครั้งรูปภาพก็มีขนาดดใหญ่เกินไปไดด้เช่นกัน เราสาามารถตัดกรอบบภาพ (Croppping) ให้เหลือเเฉพาะที่ต้องกาารได้ โดยใช้เครืรือ่ งมือสองชนิดนี ด ้ ดังนี วิธีที่ 1 การตัดกรอบภาาพโดยเครื่องมืมือ Rectanguular Marqueee Tool 1. เลือกเครือ่ งมือ บนนแถบเครื่องมือและกําหนด Feather ให้เท่ากับ 0 ก่อน 2 สร้าง Selecction ที่ภาพในนส่วนที่ต้องกาารตัดกรอบ 2. 3. เลือกเมนู Im mage -> Crop จะได้รูปจากกการ Croppinng วิธีที่ 2 การตัดกรอบภาาพโดยเครื่องมืมือ Crop 1. เลือกเครือ่ งมือ บนแถบเครื่องมือ 2 สร้างพื้นที่ทีทต่ี ้องการตัดกรรอบภาพ สังเกกตว่าจะเกิดแถบสีเทาขึ้นบริเวณรอบนอกขอ 2. ว อบกรอบที่สร้าง ขึ้นมา บริเวณสีเทาคือ บริเวณของรูปภาพที ภ ถ่ กู ตัดทิ้งนั่นเอง 3. ปรับแต่งพื้นที่ที่เลือก 4 คลิกปุ่ม 4.

Photoshop CS3

ตัวอย่างกการ Croppinng

เพือ่ ยืนยันการตัดกรอบรูรูปตามต้องการร (กรณี ยกเลิก

ให้คลิกปุม่ แทน)

งานกราฟิฟิคสําหรับจัดทําเว็บ ในการใช้ภาพกราฟิ ภ คสําหรั า บจัดทําเว็บ เป็นศิลปอย่างหนึ า ง่ ทีจ่ ะต้องออกแบบให้ ง เหหมาะสม ไม่มากหรื า อ น้อยจนเกินไป ขนาาดไฟล์จะต้องมีมีขนาดเล็ก เพืพือ่ ให้เว็บเพจสาามารถแสดงผลลได้อย่างรวดเร็ร็ว เพราะผู้เข้าชมเวบ า จะต้องโหลดไฟล์ อ ทั้งหมดที่ประกออบเป็นหน้าเว็บผ่ บ านเครือข่ายอิ ย นเทอร์เน็ตไปปที่เครื่องของผผู้ใช้เพื่อแสดงผผลที่เครื่อง ของผผูใ้ ช้ โดยปกติแล้ แ วระยะเวลาใในการโหลดหนน้าเว็บจะขึ้นอยูยู่กับหลายปัจจัยด้วยกัน เช่น ระดับความเร็ร็วของการ เชื่อมต่ ม ออินเทอร์เน็ต ความบ่อยใในการเข้าชมเว็ว็บ รวมถึงการใใช้ภาพประกออบเว็บจํานวนมมากด้วย โดยเฉฉพาะการ แสดงงผลภาพขนาดดใหญ่ก็จะทําใหห้การแสดงผลใใช้เวลานานตามไปด้วย ดังนั้นเราจึงจําเป็นต้องเเลือกไฟล์ภาพทที่มีขนาดเล็ก เพื เ ่อให้โฮมเพ็จของเราสามารรถแสดงผลได้รวดเร็ว ยิ่งขึ้น โดยเฉพาะขนาดของไฟล์ภาพที ภ ่เหมาะสมม ในการนํามาใใช้ในอินเทอร์เน็ เ ตควรมีขนาดดประมาณ 20 - 40K และคค่า ความละเอีอียด Resolutioon = 72 ppi เป็นต้น = 1 KB = 1 MB = 1 GB

ภาพ Jpeg กําหนนด quality=100% % ขนาดไฟล์ 31.77 KB

ภาพ Jpeg กํําหนด quality=550% ขนาดไฟล์ 9.96 KB

ภาพ Gif กําหนด Colors=8 ขนาดไฟล์ 5.17 KBB

ภาพ Png-8 กําหนด Colors=1128 ขนาดไฟล์ 133.7 KB

Photoshop CS3

ขนาดดของไฟล์ 1024 byytes 1024 KBB (K) 1024 MBB (M)

ชนิดของไฟลล์ที่นิยมใช้ในเว็บ เนื่องจากไฟล์ภาพที ภ ่ใช้ในโฮมมเพจนั้นจะต้องเป็นไฟล์ที่มีขนาดเล็ก ดังนันเราจึ น้ งควรเลืออกใช้ไฟล์ที่มี ความสามมารถในการบีบอั บ ดข้อมูลหรือลดขนดของข้อมู อ ลได้มาก ๆ เช่น GIF, JPEGG, PNG ซึ่งไฟลล์แต่ละชนิดมีความ เหมาะสมมกับภาพที่มีลักษณะแตกต่ ก างกันดังนี้ GIF (Graphics Interchhange Formaat) เรามักจะใช้ในการบั น นทึกภาพพทีม่ ีความละเอียดน้อยหรือมีลักษณะเป็นลายเส้ ล น เช่นภาพการ์ตนู หรือ ง แสดงผลสีได้เพียง 256 สีเท่านัน้น นอกจากนีน้ย้ ังสามารถแสดงภาพแบบโปปร่งใส ภาพโลโก้ก้ เป็นต้น เนื่องจากสามารถแ และภาพเเคลื่อนไหวได้ JPG , JPEEG (Joint Phootographic Expert E Groupp) เรามักใช้ไฟล์ JPEG J เมื่อต้องการแสดงภาพ ง พทีม่ ีความละเอีอียดพอสมควร เช่น ภาพถ่ายยที่มจี ํานวนมากก ๆ หรือภาพธธรรมชาติ เนื่องจากไฟล์ อ JPEEG นั้นสามารถถแสดงผลสีได้ 16.7 ล้านสี เรราสามารถลดขขนาดของไฟล์ JPEG J ได้โดยการลดคุณภาพของภาพลง PNG (Poortable Netw work Graphicss) ไฟล์แบบ PNGG สามารถบีบอัดภาพได้มากกกว่า ไฟล์แบบ GIF ประมาณ ณ 30% โดยภาพพใหม่ทถี่ ูกบีบอัอด แล้วยังคงงมีคุณภาพไม่แตกต่ แ างกัน และยังสามารถแสสดงผลได้เร็วกว่ ก าไฟล์แบบ GIF G นอกจากนีหหากต้ ้ องการไฟฟล์ ขนาดเล็กลง ก ก็สามารถลลดคุณภาพของภาพลงได้อกี

การลดขนาดดและแปลงไไฟล์เพื่อใช้งาน

Photoshop CS3

เราสามารถลดดขนาดและแปลงไฟล์ได้โดยใใช้คําสั่ง Save for Web & Device มีขั้นตออนดังนี้ 1. เปิดไฟฟล์ที่ตอ้ งการปรัรับแต่ง ด้วยคําสั่ง File > Oppen

2. ใช้ช้ Crop Tool ตัดเอาเฉพาะภภาพส่วนที่ต้องการ

ให้คลิกเลืลือกที่ 4-Up โปปรแกรมแสดงภภาพ ต้นฉบับอยู่ที่ ภาพมมุมบนด้านซ้าย ส่วนภาพอื่นๆ เป็น ภาพที่โปรแกรมได้ เลือกปรับแต่งให้ ง เป็นตัวอย่าง า ถ้า หากดดูแล้วเหมาะสมม ก็สามารถเลืลือกเอาภาพที่ โปรแแกรมปรับแต่งไว้ ไ ให้แล้วก็ได้ หรื ห อจะปรับแตต่ง เพิ่มเติ เ มด้วยตัวเองก็ได้ ทัง้ นี้ ก็ขนอยู นึ้ ่กับคุณภาพพที่เรา ต้องกการ จากนั้นคลิลิกที่ปมุ่ Save เพื่อบันทึกภาาพ โดยกกําหนดชือ่ ใหม่ ที่ช่อง File name

Photoshop CS3

3. เลืลือกคําสั่ง File > Save for W Web & Devicce… จะมี diallog แสดงขึ้นมาดังรูป

การสร้างภาพพขอบมน 1. เปิดไฟล์ภาพที่ต้องการ แล้ แ วปรับขนาดภาพให้เหมาะสม เช่นภาพตััวอย่างเป็น ภาาพถ่ายทีม่ ีขนาด ค่อนข้างใใหญ่เราสามารถปรับขนาดให้ห้เล็กลงด้วย Im mage > Imagge size…

Photoshop CS3

ใในตัวอย่างได้ปรั ป บค่าความกวว้างให้เป็น 500 pixel ส่วนคความความสูง โปรแกรมมจะกําหนดให้เองโดยให้ เ ภาพยังคงไม่ผดิ เพียน ย้ 2. คลิกเลือกคํคําสั่ง Select > All หรือกด Ctrl-A เพื่อเลือกพื้นทีท่ ั้งหมด 3. จากนั้นเลือกคําสั่ง Select > Modify > Sm mooth…

4. ที่ช่อง Sample Raddius ให้ใส่ค่าประมาณ 30 pixels p แล้วคลิกปุ ก ่ม OK จะสังั เกตุเห็นขอบขของ Seleection เป็นขอองมนแล้ว แต่ถ้ถา้ ต้องการกรอบขอบมนทีเ่ ล็กกว่ ก านี้ก็สามารรถ ใช้คําสั่ง Seleect > Tranforrm Selectionn เพื่อปรับแต่งขนาดของ Selection ได้ดังรูป

น้ Layer Style ปรับแต่งภาพทีเ่ ราคัดลอกมาเเพิ่มเติมได้ โดยยการใส่เงา ใส่ส่สีเส้น 6. จากนันสามารถใช้ ขอบ จะได้ผลดังภาาพ

Photoshop CS3

5. จากนันเราสามารถ น้ คัคดลอกรูปภาพพตามทีเ่ ห็นตามมรอบ Selectiion โดยการเลืลือกเมนู Edit > Copy หรือกด Ctrl - c แล้ แ ววางภาพที่ copy มา ได้โดยการเลื โ อกเมมนู Edit > Passte หรือกด Ctrl-v

การซ้อนภาพพหลายภาพพเข้าด้วยกัน เทคนิคการซ้อนภาพหลายๆ อ ภาพเข้าด้วยททําให้เกิดภาพใใหม่ ทีน่ ่าสนใจจ เป็นเทคนิคที่ีนิยมใช้กนั มากก รวมถึงกาารซ้อนภาพตัวอัอกษรเข้าไปในนภาพ เรามักพบเห็ พ นภาพลักษณะนี้มากมายในเว็บ การซ้ซ้อนภาพสามารรถทํา ได้ดังนี้ 1. คลิกที่ File > New เพื่อกําหนดขนนาดงานใหม่ โดยกําหนดค่า ดังนี้ Width = 9000 pixels Height = 1000 pixels Resolution = 72 pixels/inch Color Mode เป็น RGB Coolor Background Contents เป็ปน Transpareent

Photoshop CS3

2. จากนัน้ เปิดภาพที่ต้องการนํามาซ้อนกันภาพแรก โดยเลือกคําสัง่ File > Opeen 3. ใช้เครื่องมือ คลิกที่ภาพที่ตอ้ งการแล้วลากก (drag) มาวาางบนภาพที่เราาเตรียมไว้

4. ถ้าภาพท า ี่นํามาววางมีขนาดไม่เหมาะสมเราสสามารถใช้เครืรือ่ งมือ Edit > Transform m > Scale มาช่วยใน การปปรับแต่งขนาดภาพให้เหมาะสมก่อนได้ 5. จากนั้นเปิดภาพที ด ่ต้องกาารนํามาซ้อนกันอี น กภาพ ภาพ แล้วใช้เครื ค องมือ คลิกแแล้วลากเข้ามาาในพืน้ ที่ งานที่เราเตรียมไว้ ย ดังรูป

layer mask m

Photoshop CS3

6. เลืลือก Layer 3 (อยู่ด้านบนสุด) ด แล้วคลิกที่ปุ่ม Add layer mask เพื่อสรร้าง layer maask เป็นเลเยอร์ที่จะมา เป็นหน้ ห ากาก ให้ภาพใน า Layer 3 ทําให้เรามองงไม่เห็นภาพในน Layer 3 ที่ตรงกั ร นกับตําแหหน่งของสีดําใน Layer massk จุดประสงค์ของเราคื ข อ ต้องการให้เห็นส่วนขอบของภา ว พใน Layer 3 แบบค่อย ๆ จจางลง

7. คลิกเลืลือกที่ Layer mask m แล้วเลือกเครื อ ่องมือ Brush B เลือกขนนาดหัวแปรง เป็ป็นแบบขอบฟุ้ง ขนาด 30 - 100 pixel โดยยประมาณ จากนั้นใช้ Brushh ระบายที่ขอบบของภาพบน Layer L 3 เพื่อให้ขอบภาพค่อย ๆ จางหายไปป

8. เราสามมารถนําภาพใหหม่เข้ามาแล้วใช้ วิธีการเดิมตามข้อ 2 - 7 ได้ตามต้องการร

Photoshop CS3

9. จะได้ภาพสํ ภ าเร็จดังงรูรูป จากนั้นเราสามารถบันทึกไฟล์เป็น PDFF เพื่อทีเ่ ราจะสสามารถกลับมาาแก้ไขเพิ่มเติมได้ใน ภายหลัง

10. เมื เ ่อเราต้องการรนําไปใช้งานจจริงในเว็บ เลือกเมนู File > Save S for Web & Device…… เนื่องจากภาาพเป็น ภาพที่มีรายละเอียดสูง ควรเลือกใช้ ก เป็นไฟล์ภาพแบบ JPEG จะเหมาะสมที จ ่สุด

การสร้างภาพปุ่มกดดสําหรับใช้งานบนเว็บ

Photoshop CS3

การออกแแบบโฮมเพจนั้นส่ น วนสําคัญส่วนหนึ ว ่งคือ ปุ่มเมนู เราสามารรถใช้ Photoshop สร้างภาพพเมนูที่ สวยงงานได้ จากตัวอย่างนํามาเป็น เมนูที่เป็น teext menu ซึงเราต้ ่ง องการ ออกแบบ อ graphics menu มาใช้ ม แทน ดังรูป

1. เราจะสสร้างปุม่ เมนูขนาด น กว้าง 1880 pixels สูง 30 pixels ความละเอี ค ยด 72 ppi ให้สร้างไฟล์งานใหมม่โดยเลือก Fille > New แล้วกํ ว าหนดค่า ดังรู งป

2. สร้างเลลเยอร์สีพื้นโดยยเลือกสีพื้นหลัลัง เป็นสีที่ต้องกการ แล้วเลือก พื้นที่ทงั้ หมดด้ ห วยคําสั่ง Select > All แล้วเลือก Edit > Fill เลือก Backgrouund Color

3. จากนันให้ น้ ใช้เครื่องมือ สร้างกกรอบเมนู โดยเลือกสี Foregground ใหม่มีสีรูปภาพตามสี ป Fooreground

Photoshop CS3

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

เพื่อพิมพ์ขอ้ ความบนเมนู

5. เมื่อปรัรับแต่งแล้ว บันทึกไฟล์เป็น PSD ไว้สําหรับ การแก้ไข แล้วบันทึกด้วย Save for W Web เพื่อ การนําไปปใช้งานจริง

ก่อนเพือ่ ให้ร้ ูปที่สร้างขึน้ มา