ขั้นที่2 แก้ไขไฟล์ .psd โดยโปรแกรม Photoshop

การทำงานของ Photoshop จะมีการแบ่งข้อมูลหรือวัตถุ เป็นส่วนๆ หรือแบ่งออกเป็นชั้น หรือที่ photoshop เรียกกว่า Layer? ซึ่งจะมีผลทำให้ข้อมูลหรือวัตถุนั้นๆ สามารถแยกออกจากกันได้เป็นอิสระ ทำให้เราสามารถบริหารจัดการสิ่งนั้นๆ ได้สะดวกง่ายดาย

1. เปิดไฟล์ Template ขึ้นมา ด้วยโปรแกรม Photoshop

ลักษณะการทำงานทั่วๆไป

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

2. จากนั้นไปที่บริเวณ Palette Layers (ด้านล่างขวา ตามภาพ) จะบอกว่าในไฟล์งานนี้มี ภาพหรือวัตถุอะไรบ้าง โดยเรียงจากล่างสุด ขึ้นไปด้านบน สามารถเลือกเปิด-ปิดการแสดง ของแต่ละชั้นได้ (Indicates layer visibility ลักษณะที่เป็นรูปตา)

ให้เปิด-ปิด layer ของภาพ หรือข้อความเดิมที่ไม่ต้องการออก โดยคลิ๊กที่ Indicates layer visibility(ที่เป็นรูปตา) ออก

ทิปเกี่ยวกับ Layer

• Layer ด้านล่างจะถูกบังด้วย Layer ด้านบน
• เราสามารถย้าย Layer ด้านบนมาด้านล่างได้ ด้วยการลาก Layer และวางในตำแหน่งที่ต้องการ
• การปิด Layer (ชั่วคราว) สามารถปิดโดยการคลิกปุ่มรูปดวงตา
• การลบ Layer เป็นการถาวร สามารถคลิกเลือก Layer นั้นๆ และกดปุ่ม delete ได้เลย

3. เมื่อทำในข้อ2 เสร็จจะได้ดังภาพด้านล่าง ไว้สำหรับเป็นภาพพื้น ( bg)

4. คลิ๊กที่เครื่องมือ Slice Tool(วงกลมสีแดง) จากนั้นใช้เมาส์ลากตั้งแต่ขอบของภาพไปยังจุดที่เราต้องการครับ ทำจนครบ(เต็มทั้งภาพที่จะใช้เป็นเทมเพลท)

ข้อแนะนำในการ slice ภาพ Backgound

• แต่ละจุดท่านจะต้องคิดไว้แล้วนะครับว่าส่วนไหนจะใส่อะไรบ้าง เช่นที่ slice ไว้ เลข01(สีน้ำเงินแล้วมีซองจดหมยอยู่ด้านหลัง)  สำหรับใส่ logo web  หรือ top menu   |  เลข02 สำหรับใส่ข้อความ สโลแกน เป็นต้น
• บางจุดอาจ slice ได้เฉพาะหัวข้อ หรือ ส่วนที่จะเป็นที่ใส่ข้อความ
• ไม่ควร slice ให้มีความกว้าง ต่างกันมาก เวลา upload จะทำเป็นเทมเพลทยาก
• สุดท้าย มั่นทำบ่อยๆ ซัก 1 เทมเพลท จะได้จับทิศทางได้ว่าตรงไหนควรทำอย่างไร อย่าไปท้อครับ ครั้งแรกมันก็ไม่ง่ายเสมอไป จะทำให้ท่านได้ประสบการณ์ ใน slice template และออกแบบเทมเพลทได้ต่อไป

5. คราวนี้ก็มาถึงขั้นตอนสุดท้าย ในส่วนของโปรแกรม Photoshop ก็คือการ Save For Web เพื่อนำไปใช้งาน โดยให้เลือกที่เมนู File --> Save for Web&Devices (Ctrl+Shift+Ctrl+S)

6. ให้เรากำหนดรายละเอียดภาพการ Save  ในส่วนของ Preset โดยในส่วนนี้ จะเป็นการกำหนด นามสกุลของภาพ โดยจะมีให้เลือก เป็น Gif, Jpeg, Png-8, Png-24    ขึ้นอยู่กับรายละเอียดภาพ สังเกตุตรงพื้นที่แสดงภาพตัวอย่าง เลือกปรับรายละเอียดได้

ส่วนประกอบในหน้า Save For Web & Devices

• ทางด้านซ้ายมือ ที่เป็นรูปไอคอนเครื่องมือ (แนวตั้ง) ที่ใช้บ่อย คือ 1.รูปมือ ไว้สำหรับ จับภาพตัวอย่างเลื่อนไปมา  | 2. รูป slice (ที่วงกลมแดง) สำหรับเลือกรูปภาพที่ต้องการ
• พื้นที่แสดงตัวอย่างงาน (บริเวณกรอบเหลือง) จะแจ้งรายละเอียดตัวอย่างงาน เช่น ชนิดภาพ, คุณภาพรูปภาพ, ขนาดไฟล์, ระยะเวลาในการโหลดภาพ เป็นต้น สามารถเปรียบเทียบตัวอย่างได้ โดยคลิ๊กที่แท็บด้านบน 4 แท็ป (Original | Optimized | 2-Up | 4-Up)
• แถบตัวเลือก ขนาดการแสดงผล เป็น %  (บริเวณใต้กรอบเหลือง) สำหรับย่อ-ขยายดูรายภาพตัวอย่าง
• ทางด้านขวา (กรอบแดง) เป็นพื้นที่สำหรับ การเซฟภาพสำหรับใช้บนเว็บไซต์นั้น สามารถเลือกประเภทไฟล์ภาพได้หลายประเภท ขึ้นอยู่กับรูปแบบของภาพที่เราใช้ครับ ในการเซฟภาพ สำหรับภาพถ่าย หรือภาพที่มีรายละเอียดสูง ควรเลือกเป็นไฟล์ JPEG และเรายังสามารถที่จะเลือกปรับค่า Quality ตามที่เราต้องการได้ โดยในการปรับลดค่า Quality ลง ต้องดูที่ตัวภาพด้วยว่ารายละเอียดของภาพลดลงมากน้อยเพียงใด เพื่อให้ภาพมีน้ำหนักเบา แต่ยังคงเห็นภาพได้ชัดเจนครับ ลองเลือกดูจะเห็นความแตกต่าง สังเกตุตรงภาพตัวอย่าง ควรขยายซัก 100 - 300 % จะเห็นชัด

ในกรณีรูปมีความโปร่งใส

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

ไฟล์ PNG ไฟล์ภาพประเภทนี้ จะรวมความสามารถของไฟล์ GIF และ JPEG เอาไว้ คือ ภาพที่ได้จะมีความละเอียดสูง มีความชัด ภาพไม่แตก แต่ไฟล์ภาพชนิดนี้มีขนาดที่ใหญ่กว่า JPEG และ GIF มาก หากนำไฟล์ชนิดนี้มาใช้กับเว็บไซต์คงจะไม่ดีนัก เพราะจะทำให้การแสดงผลบนหน้าเว็บไซต์ของเรา ใช้เวลาโหลดนานขึ้นครับ

1. กดเลือกประเภทไฟล์เป็น  gif , png-8 หรือ png24 (จะต่างกันในแง่ของขนาดไฟล์ และรายละเอียดภาพ)
2. หากเราทำการเลือกที่ Transparency จะเป็นการเลือกเพื่อให้พื้นหลังของภาพโปร่งใสครับ
3. หากเราได้ทำการเลือกภาพเป็นแบบ Transparency แล้ว สิ่งต่อไปที่ควรจะปรับคือ Matte เนื่องจากในส่วนนี้จะเกี่ยวข้องกับเรื่องขอบของรูปภาพ ตัวเลือก
   ตัวเลือกที่ใช้บ่อยมี ดังนี้
   None  : ภาพจะไม่มีขอบ หรือขอบไม่คมชัด
   White : ภาพจะมีขอบสีขาว เหมาะสำหรับใช้บนพื้น Background สีขาว
   Black : ภาพจะมีขอบสีดำ เหมาะสำหรับใช้บนพื้น Background สีดำ
   Other : เป็นการเลือกสีขอบภาพให้ตรงกับสีพื้น Background ที่เรามีอยู่

หากรู้พื้นหลังที่ใช้ในเว็บอยู่แล้ว ให้เลือก Matte Color ให้เป็นสีที่ตรงกับพื้นเว็บไซต์ที่ใช้งาน (สำหรับกำหนดสีบริเวณขอบๆที่โปร่งใส จะได้ต่อเนื่องกันสีพื้นเว็บไซต์)

• ถ้าหากเว็บของเรา ฉากหลังเป็นสีขาว เราก็ควรเลือกสีขาว
• ถ้าหากเว็บเรา ฉากหลังเป็นสีดำเราก็ต้องเลือก matte สีดำ

เสร็จแล้ว

7. กำหนด Folder ที่จะใช้บันทึก(Save) และตั้งชื่อไฟล์

File name		ตั้งชื่อไฟล์
Save as type	Html and Images (*.html)	ไฟล์ .html และไฟล์รูปภาพ
	Images Only (*.gif, .jpg, .png)	เฉพาะไฟล์รูปภาพ
	Html Only (*.html)	เฉพาะไฟล์ .html
Sittings	Default Sittings	ค่ามาตราฐาน
Slices	All Slices	ทั้งหมด
	All User Slices	ทั้งหมดที่กำหนด
	Selected Slices	เฉพาะที่เลือกเอง

และ

8. จะได้ดังภาพ