10 กุมภาพันธ์ 2555, 05:30:34
ยินดีต้อนรับผู้เยี่ยมชม
  • noavata
  • ยินดีต้อนรับคุณ, ผู้เยี่ยมชม กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน
    เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
Page Rank

ทำเว็บไซต์ | แต่งบอร์ด | ออกแบบ | SMF | Joomla | Drupal | WordPress | JQuery | CMS | ECommerce | Tel. 08-08577477

ส่งหัวข้อนี้พิมพ์ หน้า: 1 
icon message ผู้เขียน หัวข้อ: Save for web เรื่องสำคัญที่ต้องรู้  (อ่าน 961 ครั้ง)
0 สมาชิก และ 1 ผู้เยี่ยมชม กำลังดูหัวข้อนี้
*
*


!Personal

Germany   ชาย ผู้เริ่มต้นกระทู้นี้ ออฟไลน์544566157 DexMore DexMore DexMore
เว็บไซต์
icon message
general เมื่อ: 30 มีนาคม 2553, 17:38:17
บทความโดย: FFM
ใน การสร้างงานกราฟฟิคเพื่อใช้ในการทำเว็บนั้น เราจะใช้โปรแกรม Adobe Photoshop เป็นโปรแกรมหลักในการทำงาน โดยในปัจจุบันนั้นโปรแกรมนี้ได้พัฒนามาถึงเวอร์ชั่นที่ 7 แล้วซึ่งในเวอร์ชั่นนี้จะมีคำสั่งการ save งานที่ใช้เพื่อการสร้างเว็บโดยเฉพาะ โดยคำสั่งจะอยู่ที่เมนู File > Save for web (ดูรูปที่1 ประกอบ) ซึ่งจุดเด่นของการใช้คำสั่งนี้ก็คือ ผู้ใช้งานจะสามารถเห็นความละเอียดของภาพที่จะถูก save ไปใช้ในเว็บได้ทันทีพร้อมทั้งสามารถเปรียบเทียบภาพที่จะถูก save กับภาพที่เป็นภาพต้นฉบับได้ และยังแสดงข้อมูลระยะเวลาที่ใช้ในการ load รูปภาพนั้นๆ เมื่อนำไปแสดงผลจริงบนเว็บ ณ ความเร็วโมเด็มในระดับต่างๆ ได้อีกด้วย (ดูรูปที่2,3 ประกอบ)

รูปที่1 เมนู Save for web


รูปที่2 หน้าจอ save for web


รูปที่3 แสดงข้อมูลระยะเวลาที่ใช้ในการ load


โดยเทคนิคการ save ไฟล์ทั้งสองชนิดมีดังนี้
1. การ save ไฟล์นามสกุล .jpg มีขั้นตอนดังนี้
1.1 เลือกภาพที่ต้องการ save โดยทำการ crop ด้วยอุปกรณ์ crop tool แล้วใช้คำสั่ง File > Save for web จะได้ผลลัพธ์ดังรูปที่ 4

รูปที่ 4 แสดงรายละเอียดการsave แบบ .jpg


1.2 ทำการตั้งค่าการ save จากคำสั่งบริเวณด้านขวาของหน้าจอ โดยกำหนดค่าต่างๆ ดังนี้ (ดูรูปที่ 5 ประกอบ)
(1) ตั้งค่า Optimized file format (ช่องที่ 1) ให้เป็น JPEG
(2) ตั้งค่า Quality (ช่องที่ 2) ให้มีค่าอยู่ในช่วง 30-50 ขึ้นอยู่กับ ความต้องการความคมชัดของภาพ โดยถ้าตั้งค่ามากภาพจะ คมชัดมาก แต่ขนาดไฟล์ก็จะใหญ่ตามไปด้วยทำให้ ภาพ ใช้เวลาในการ load นานขึ้น ถ้าตั้งค่าน้อยก็จะได้ผลลัพธ์ ในทางตรงกันข้าม
(3) ตรวจสอบการใช้งาน Progressive (ช่องที่ 3) ซึ่งการเลือกใช้งานคำสั่งนี้โดยปกติจะทำให้ไฟล์มีขนาดเล็กลง(แต่ บางครั้งถ้าทำให้ไฟล์มีขนาดใหญ่ขึ้นให้ยกเลิกคำสั่งนี้)
(4) เมื่อตั้งค่าได้เรียบร้อยแล้วให้กดปุ่ม Save

รูปที่ 5 แสดงรายละเอียดการตั้งค่าการ save ไฟล์แบบ .jpg


2. การ save ไฟล์นามสกุล .gif มีขั้นตอนดังนี้
2.1 เลือกภาพที่ต้องการ save โดยทำการ crop ด้วยอุปกรณ์ crop tool แล้วใช้คำสั่ง File > Save for web จะได้ผลลัพธ์เช่นเดียวกับรูปที่ 6
2.2 ทำการตั้งค่าการ save จากคำสั่งบริเวณด้านขวาของหน้าจอ โดยกำหนดค่าต่างๆ ดังนี้ (ดูรูปที่ 4 ประกอบ)
(1) ตั้งค่า Optimized file format (ช่องที่ 1) ให้เป็น GIF
(2) ตั้งค่า Colors (ช่องที่ 2) โดยสามารถกำหนดสีได้สูงสุดถึง 256 สี ถ้ามีการกำหนดจำนวนสีน้อยภาพจะมีความ ละเอียดต่ำแต่ไฟล์จะเล็กและภาพจะ load ได้เร็ว ถ้ามีการ กำหนดจำนวนสีมากผลลัพธ์ที่ได้จะเป็นตรงกันข้าม
(3) ตรวจสอบการใช้งาน Interlaced (ช่องที่ 3) ซึ่งการเลือกใช้ งานคำสั่งนี้โดยปกติจะทำให้ไฟล์มีขนาดเล็กลงเหมือน กับการใช้คำสั่ง Progressive ของไฟล์แบบ .jpg (แต่ บางครั้งถ้าทำให้ไฟล์มีขนาดใหญ่ขึ้นให้ยกเลิกคำสั่งนี้)
(4) เมื่อตั้งค่าได้เรียบร้อยแล้วให้กดปุ่ม save

รูปที่ 6 แสดงรายละเอียดการตั้งค่าการ save ไฟล์แบบ .gif



จาก ที่ได้แสดงให้เห็นถึงวิธีการในการ save งานกราฟฟิคทั้ง 2 ชนิดนี้แล้ว ถ้าได้มีการนำวีธีการนี้ไปใช้ในการสร้างเว็บ ไม่ว่าจะเป็นเว็บทั่วๆ ไปหรือเว็บทางด้าน E-Commerce ก็จะสามารถทำให้เว็บที่ใช้กราฟฟิคจากวิธีการ save แบบนี้ ใช้เวลาในการ load ข้อมูลน้อยลง นั่นคือเว็บจะแสดงผลได้เร็วขึ้นนั่นเอง


ลิงค์หัวข้อ: http://dexmore.com/topic/1245
Windows XP    Firefox 3.6.2   see ip บันทึกการเข้า
ดูรายการสิ่งของสำหรับบอกรักใครสักคน ก็ส่งไปให้เขาเลย!  สำหรับติดหมุดกระทู้ของคุณ!  เพิ่มเวลาที่อยู่ในระบบอีก 12 ชั่วโมง  น้องหมี..เอาไว้กอดนอนแทนกิ๊ก  สำหรับบอกรักใครสักคน ก็ส่งไปให้เขาเลย!  
*



Thailand   ชาย ออฟไลน์ เว็บไซต์
icon message
general ความคิดเห็นที่ 1 เมื่อ: 11 มิถุนายน 2554, 19:46:28
ทำไมรูปไม่ขึ้นครับเนี่ย

ลิงค์หัวข้อ: http://dexmore.com/topic/1245
Windows XP    Microsoft Internet Explorer 8.0   see ip บันทึกการเข้า
โฮสต์ดีๆ บริการด้วยใจ
*
*


!Personal

Germany   ชาย ผู้เริ่มต้นกระทู้นี้ ออฟไลน์544566157 DexMore DexMore DexMore
เว็บไซต์
icon message
general ความคิดเห็นที่ 2 เมื่อ: 11 มิถุนายน 2554, 20:02:48
ผมว่าเบราเซอร์คุณมีปัญหานะครับ ผมเห็นหมดทุกรูปเลย

ลิงค์หัวข้อ: http://dexmore.com/topic/1245
Windows XP    Firefox 4.0.1   see ip บันทึกการเข้า
ดูรายการสิ่งของสำหรับบอกรักใครสักคน ก็ส่งไปให้เขาเลย!  สำหรับติดหมุดกระทู้ของคุณ!  เพิ่มเวลาที่อยู่ในระบบอีก 12 ชั่วโมง  น้องหมี..เอาไว้กอดนอนแทนกิ๊ก  สำหรับบอกรักใครสักคน ก็ส่งไปให้เขาเลย!  
ส่งหัวข้อนี้พิมพ์ หน้า: 1 
กระโดดไป:  

Creative Commons License

SMF Thai Translation Powered by SMF © 2006–2012, Simple Machines LLC

WordPress Google เข้าเยี่ยมชมหน้านี้ล่าสุดเมื่อ : 9 ชั่วโมงที่ผ่านมา

jQuery Plugin Copyright © 2551-2555 Themes Design & Hosting by DexMoreGroup

Sitemap | Thai Simple Machines Forum support SMF Thai

Web Begining | SMF Modifications | SMF Thai Translation Web Begining

Drupal | WordPress | CMS Joomla | jQuery Plugin | Web Graphics CMS Joomla