Easyhome 2010
Ads 468x60
Review Programs Navigation Bar


 
Digital Images Process
Adobe Photoshop
Adobe ImageReady
Ulead PhotoImpact
Compress JPEG

 
 
ADS 250x250
 
ADS 125

แบ่งภาพเป็นส่วนๆ แสดงผลได้เร็วด้วย
ImageReady

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

ImageReady Logo

ค่าย Adobe ก็เช่นเดียวกันได้เสนอโปรแกรมที่ชื่อ ImageReady 1.0 ออกมาให้ทดลอง ใช้กัน ได้รับความสำเร็จด้วยดี เพื่อให้การตกแต่งภาพในเว็บเพจเป็นไปอย่างสะดวกรวดเร็ว Adobe ได้ปรับปรุง Photoshop เป็นเวอร์ชั่น 5.5 ซึ่งได้นำเอา 2 โปรแกรมย่อยคือ ImageReady 1.0 และ ImageStyler 1.0 รวมเข้าไปด้วยกันเป็น ImageReady 2.0 ผนวกแถมมากับ Photoshop 5.5 ทำให้ การปรับแต่งภาพในเว็บเพจง่ายดายยิ่งขึ้น

Adobe ImageReady

นี่คือหน้าตาของโปรแกรม ImageReady 2.0 ที่มาพร้อมกับ Photoshop 5.5 และภาพที่ ต้องการจะตัดส่วนชื่อ king1m.jpg ซึ่งมีวิธีการตัดส่วนง่ายๆ ดังนี้

Click Menu Slice

  1. ที่เมนูบาร์คลิกที่ Slice เลือก Device Slice... จะแสดงกรอบโต้ตอบให้เราใส่รายละเอียด ของการแบ่งส่วนดังภาพ

Device Slice

  1. ให้เราใส่รายละเอียดของการแบ่งซึ่งมีสองส่วนคือ
    • Horizontally การแบ่งภาพตามแนวขวาง ต้องการจะแบ่งเป็นกี่ส่วนก็ระบุลงไป หรือ จะระบุค่าความกว้างในแต่ละส่วนก็ได้
    • Vertically การแบ่งภาพตามแนวตั้ง ระบุจำนวนลงไปเช่นเดียวกับการแบ่งแนวขวาง

Preview Slice

  1. เมื่อคลิก OK จะเห็นเส้นแนวการแบ่งบนภาพเป็นสีเหลือง และชื่อภาพในแต่ละส่วน จะถูก กำหนดโดยอัตโนมัติดังภาพ

Show Rollover

  1. ถ้าเราต้องการจะให้ภาพแต่ละส่วนเป็นจุดเชื่อมโยงสำหรับคลิกไปยังหน้าที่เรากำหนด (Map Link) ก็สามารถทำได้ โดยคลิกเมนูบาร์ที่ Windows เลือก Show Rollover แล้วคลิกเลือกที่ Multiple Slices เพื่อเลือกส่วนของภาพที่ต้องการให้เป็นจุดเชื่อม ดังภาพบน

Slice Properties

  1. แล้วเลือกที่แถบ Slice เพื่อกำหนด URL และ Target ที่จะให้เชื่อมโยงไป ทำกับทุกๆ ส่วน ที่ต้องการจนครบ (ข้อ 4 และ 5)

Save File

  1. เมื่อเสร็จสิ้นการแบ่งส่วนและกำหนดจุดเชื่อมโยงแล้วต่อไปก็เป็นการจัดเก็บไฟล์ คลิกที่เมนู File เลือก Save Optimized As...

Save Optimized

  1. ที่กรอบ Save Optimized ให้เลือกไดรว์/ห้องที่ต้องการจัดเก็บ มีส่วนที่สำคัญอยู่สองส่วน ด้านล่างคือ
    • Save HTML File จะเป็นการสร้างไฟล์ HTML ให้โดยอัตโนมัติจากโปรแกรม ImageReady ซึ่งมีตัวเลือกให้เมื่อคลิกที่ HTML Options...
    • HTML Options

    • Save Images จะเป็นจัดเก็บภาพในแต่ละส่วนที่แบ่งเรียบร้อยแล้ว โดยทำการบีบอัด ให้เสร็จสรรพเลย สามารถปรับแต่งรายละเอียดได้เมื่อคลิกที่ Saving Files Options...
  2. แล้วคลิกที่ปุ่ม Save ได้เลยครับ ไฟล์ HTML จะถูกเก็บในโฟลเดอร์ที่ระบุ ส่วนรูปภาพแต่ละ ส่วนจะถูกเก็บไว้ในห้องชื่อ images ในโฟลเดอร์เดียวกันดังภาพล่าง

Exploring Images

  1. นี่คือไฟล์ HTML ที่โปรแกรมสร้างให้เรียบร้อยแล้ว คุณสามารถจะ Copy ไปวางไว้ในไฟล์ HTML อื่นตามที่ต้องการ ปรับปรุงรายละเอียดการเชื่อมโยงต่างๆ ได้อีก

HTML Files

  1. และคุณก็สามารถจะทดสอบดูผลงานนี้ได้จากบราวเซอร์ทันทีเลย

Preview in Browser

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

 

เชิญไปเยี่ยมฅนอีสาน บ้านหมอลำ IsanGate.comกินตำบักหุ่ง ดีดซุงเกี้ยวสาว ม่วนคัก!
Saon Homepage

 

red line
Home | What's new? | Basic HTML | Reviews Programs | Tip&Tricks | Download | Site Map
red line

 

 

Home Basic HTML Review Software More Tip & Tricks Download Software Site Map