ใบความรู้ เรื่อง...
Transcript of ใบความรู้ เรื่อง...
![Page 1: ใบความรู้ เรื่อง การออกแบบหน้าเว็บเพจ ด้วยโปรแกรม Photoshop 1. · Adobe Photoshop - [Untitled-I](https://reader035.fdocument.pub/reader035/viewer/2022071017/5fd151507d96aa46c115676e/html5/thumbnails/1.jpg)
ใบความรู้ เรื่อง การออกแบบหน้าเว็บเพจ ด้วยโปรแกรม Photoshop
1. การตั้งค่าหน้ากระดาษ ดังภาพ
![Page 2: ใบความรู้ เรื่อง การออกแบบหน้าเว็บเพจ ด้วยโปรแกรม Photoshop 1. · Adobe Photoshop - [Untitled-I](https://reader035.fdocument.pub/reader035/viewer/2022071017/5fd151507d96aa46c115676e/html5/thumbnails/2.jpg)
2. การตั้งค่าเส้น Grid ดังภาพ View – Rulers ก าหนดไม้บรรทัด View – show – Grid ก าหนดเส้นตาราง
![Page 3: ใบความรู้ เรื่อง การออกแบบหน้าเว็บเพจ ด้วยโปรแกรม Photoshop 1. · Adobe Photoshop - [Untitled-I](https://reader035.fdocument.pub/reader035/viewer/2022071017/5fd151507d96aa46c115676e/html5/thumbnails/3.jpg)
3. ลากเส้นสีฟ้า ส าหรับการแบ่งส่วนหัวเว็บ เมนู และส่วนท้ายเว็บ คลิกสีเหลี่ยม เลือกต าแหน่งท่ีต้องการลงสี
4. การลงสีพื้นเว็บไซต์ คลิกถังสี ดังภาพ
![Page 4: ใบความรู้ เรื่อง การออกแบบหน้าเว็บเพจ ด้วยโปรแกรม Photoshop 1. · Adobe Photoshop - [Untitled-I](https://reader035.fdocument.pub/reader035/viewer/2022071017/5fd151507d96aa46c115676e/html5/thumbnails/4.jpg)
5. คลิกรูปดินสอเพื่อ เปลี่ยนสี หากต้องการเพิ่มถังสีคลิกขวา หากต้องการลบถังสี คลิกที่ถังสีแล้วกด delete
6. การแต่งรูปภาพ ดังภาพ เลือก File – open เลือกภาพที่ต้องการ
![Page 5: ใบความรู้ เรื่อง การออกแบบหน้าเว็บเพจ ด้วยโปรแกรม Photoshop 1. · Adobe Photoshop - [Untitled-I](https://reader035.fdocument.pub/reader035/viewer/2022071017/5fd151507d96aa46c115676e/html5/thumbnails/5.jpg)
คลิกขวาที่ยางลบ เพื่อเลือกเฉพาะส่วนที่ต้องการ ดังภาพ
ย่อหน้าจอ เปลี่ยนเครื่องมือ ลากรูปภาพใส่หน้าเว็บ กด ctrl+T เพื่อย่อขนาดรูปภาพ ปรับแต่งตามต้องการ
![Page 6: ใบความรู้ เรื่อง การออกแบบหน้าเว็บเพจ ด้วยโปรแกรม Photoshop 1. · Adobe Photoshop - [Untitled-I](https://reader035.fdocument.pub/reader035/viewer/2022071017/5fd151507d96aa46c115676e/html5/thumbnails/6.jpg)
7. เขียนข้อความ เลือก รูป T คลิกที่กระดาษ เขียนหัวเว็บ เปลี่ยนรูปแบบ Font เลือกรูปแบบตามต้องการ เปลี่ยนขนาดอักษร เลือกขนาดอักษรตามต้องการ เปลีย่นสีอักษร คลุมด าที่ข้อความ เลือกสีตามต้องการ ดังภาพ
ปรับแต่งข้อความต้องการการ เลือก f-> Stroke เพื่อปรับแต่งข้อความ ดังภาพ
![Page 7: ใบความรู้ เรื่อง การออกแบบหน้าเว็บเพจ ด้วยโปรแกรม Photoshop 1. · Adobe Photoshop - [Untitled-I](https://reader035.fdocument.pub/reader035/viewer/2022071017/5fd151507d96aa46c115676e/html5/thumbnails/7.jpg)
8. ขั้นตอนการตัดภาพ ส าหรับน าไปตกแต่งเว็บเพจ
ตัดภาพตามต าแหน่ง โดยตัดตามช่องเส้น Grid ให้ครบทุกส่วนเท่า ๆ กัน
![Page 8: ใบความรู้ เรื่อง การออกแบบหน้าเว็บเพจ ด้วยโปรแกรม Photoshop 1. · Adobe Photoshop - [Untitled-I](https://reader035.fdocument.pub/reader035/viewer/2022071017/5fd151507d96aa46c115676e/html5/thumbnails/8.jpg)
9. ขั้นตอนการบันทึกภาพ เลือก File -> save for web ก าหนดชนิดรูปภาพเป็นประเภท JPEG กด save ดังภาพ