เวลาเราออกแบบเว็บ สิ่งที่ช่วยอำนวยความสะดวกให้กับการทำงานของเรามากๆคือ พวก Tools ต่างๆ ทั้งที่เป็น Extension ของบราวเซอร์ (ปกติเราใช้ Chrome เป็นบราวเซอร์หลักค่ะ ถ้าเป็น Firefox ก็ต้องเรียกว่า Add-ons), Plug-in ของ Photoshop, และ Web Application  ต่างๆที่ช่วยเสริมการทำงานของเราให้เร็วขึ้น สะดวกขึ้นไปอีก วันนี้จะมาลิสให้ดูค่ะว่า ปกติปุ้มใช้อะไรบ้างเวลาทำงาน

Tools ที่เราใช้ส่วนใหญ่จะเป็น Extension ใน Google Chrome ค่ะ เพราะเราทำงานกับบราวเซอร์ซะเยอะ เลยสะดวกกว่าการเปิดโปรแกรมขึ้นมาใช้แยกไปอีกอันหนึ่ง เรามาดูกันดีกว่าว่า Extension อะไรที่เจ๋งๆ แล้วดี น่าใช้อย่างไร

Google Chrome Extension

  Measure It :  ใช้สำหรับวัดขนาดต่างๆบน บราวเซอร์ค่ะ มีประโยชน์มากเวลาเราทำเว็บแล้วอยากรู้ขนาดส่วนต่างๆบนหน้าเว็บ

  Lorem Ipsum Generator : ใช้สำหรับ Generator ข้อความแบบ Lorem Ipsum เอาไว้แปะแทนเนื้อหาบนหน้าเว็บ เวลาออกแบบค่ะ อันนี้สะดวกมาก เราสามารถกำหนดจำนวนคำ จำนวนย่อหน้าได้เลย

  Eye Dropper : ตัวนี้เหมาะสำหรับใช้ดูดสีบนหน้าเว็บค่ะ มันเก็บค่าสีเอาไว้ให้เราดูด้วย คือปิดบราวเซอร์ไปแล้วก็ไม่หายไป ใช้บ่อยเวลาเห็นสีสวยๆบนเว็บคนอื่นแล้วก็ดูดเก็บไว้

   Window Resizer : ใช้สำหรับย่อ หรือขยายหน้าต่างบราวเซอร์ของเรา เพื่อดูผลการแสดงหน้าเว็บที่ขนาดหน้าจอต่างๆ ตัวนี้ดีตรงที่เค้าเขียนไว้ชัดเจนว่าจอขนาดนี้เป็นของ Device อะไรด้วย นอกจากนี้ยังมีการโชว์ขนาดหน้าจอปัจจุบันของเราให้ดูกันที่มุมล่างขวาของจอด้วย

  Screen Capture : เอาไว้สำหรับปริ้นสกรีนหน้าเว็บ ตัวนี้พัฒนาโดย Google เอง ซึ่งค่อนข้างจะใช้งานได้ดีกว่าตัวอื่นๆที่เหมือนกัน ข้อเสียอย่างเดียวคือ ไม่สามารถ capture ส่วนที่เป็น Fixed Position ได้

  Awesome Screenshot : ตัวนี้ก็เอาไว้ปริ้นสกรีนหน้าเว็บเหมือนกัน ดีกว่าของ Google ตรงที่สามารถ capture ส่วนที่เป็น Fixed Position ได้ แต่ว่ามันมีบัก ปริ้นหน้ายาวๆ แล้วมันจะมีเส้นขาวพาดกลางหน้า ไม่เข้าใจเหมือนกันว่าทำไม

ข้างบนเป็น Extension ของ Google Chrome แต่ถ้าใช้ firefox ก็จะมีเพิ่มเติมอีก ที่ขาดไม่ได้แน่ๆ ก็คือ FireBug ซึ่งจริงๆใน Google Chrome ก็มีให้ลง แต่มันทำได้ไม่ดีเท่าของใน Firefox แล้วก็ตัวที่ติดมากับ Chrome ก็ใช้ได้สะดวกอยู่แล้ว เลยไม่จำเป็นต้องลง Firebug ใน Chrome อีก

นอกจาก Extension เจ๋งๆ ยังมีเว็บแอปพลิเคชั่นดีๆ กับ Plug-in ของ Photoshop ที่น่าใช้อีก 2-3 ตัวมาแนะนำให้ใช้กัน เพราะทำให้ชีวิตสะดวกขึ้นมากมาย

Web & Web Application

Kuler.adobe.com : เป็นเว็บสร้าง Scheme สี ของ Adobe เลย เราใช้เว็บนี้มานานแล้ว สะดวกดี สามารถดูสีที่คนอื่นแชร์ไว้ได้ แล้วก็เอามาดัดแปลง หรือสร้างสีเองก็ได้ สามารถดาวโหลดมาใช้ร่วมกับโปรแกรมต่างๆของ Adobe ได้เลยด้วย ตัว Kuler นี้มีติดมากับ Photoshop เวอร์ชั่นใหม่ๆด้วยค่ะ สามารถดูธีมสีได้ในโปรแกรมเลย ไม่ต้องเปิดหน้าเว็บอีก

  ColourLovers : เป็นเว็บที่รวมธีมสีต่างๆไว้ คล้ายๆกับ kuler ค่ะ แต่อันนี้เป็นคอมมูนิตี้ที่ใหญ่กว่า ปกติถ้าเราจะมาดูสีในเว็บนี้ แล้วไปสร้างของตัวเองใน kuler ค่ะ เว็บนี้ดีมาก แนะนำเลยค่ะ

  TypeTester : เอาไว้เทสขนาด รูปแบบ ทุกๆอย่างที่เกี่ยวกับฟ้อนค่ะ ดีมาก

  HTML IPSUM : เป็นเว็บที่เอา Lorem Ipsum มาแปะเป็นโค้ดรูปแบบต่างๆ ทั้งแบบเป็นย่อหน้าธรรมดา เป็น Header เป็น List มากมาย เอาไว้เลือกใช้ได้สะดวกไม่ต้องมาทำเองค่ะ

Photoshop Plug-in

GuideGuide 1.0 : อันนี้จะช่วยเราสร้าง Guide ใน Photoshop ให้ค่ะ เช่น เราต้องการเส้นแบ่งครึ่ง ทั้งแนวนอนแนวตั้ง เค้าก็มีปุ่มที่คลิ้กเดียวก็ได้เลย หรือเราต้องการแบ่ง Guide เป็นตามคอลัมป์ก็ทำได้ สะดวกมากค่ะ แนะนำให้มีติดเครื่องไว้เลยค่ะมา

มาลิสๆดูก็ไม่น้อยเหมือนกันนะคะเนี่ย 55 จริงๆแล้ว Photoshop เองก็มีฟังก์ชั่นตัวนึง ที่ช่วยให้เราไม่ต้องทำงานซ้ำๆซากๆเอง ซึ่งก็คือ Action ค่ะ ส่วนหน้าจะ Advance หน่อยก็ต้องเป็น Photoshop Script ซึ่งต้องใช้ความรู้ด้านการเขียนโปรแกรมเข้ามาช่วย ซึ่งก็จะทำให้สั่งอะไรๆได้ ดีกว่าตัว Action ค่ะ ซึ่งปุ้มเองก็ยังเขียนไม่ค่อยได้เลยค่ะ เหอๆ

ส่วนใครที่มี Tools ตัวไหนเจ๋งๆดีๆ แนะนำกันมาได้นะคะ

• Tools
• Web design