ที่นี่ พี่เขายกตัวอย่างการออกแบบหยุมหยิมจิ้มนิดจิ้มหน่อย แต่จิ้มแล้วโดน แตะแล้วสวย จากหลากหลายตัวอย่างเว็บที่พิถีพิถันในการลงรายละเอียด (อาทิ มีความเชี้ยะอย่างที่คุณ iMenn ว่าไว้)

ตามไปดูที่ wefunction.com จ้ะ

ตอนแรกว่าจะอัพยาวๆ แต่ว่าพลังงานไม่พอ เลยมาอัพสั้นๆ บอกข่าวกันก่อนละกันครับ

ล่าสุดไมโครซอฟท์ได้ออกมาเปิดตัวโปรแกรมเล็กๆ ที่ชื่อว่า Expression Web Superpreview ในงาน MIX 09 โดยโปรแกรมตัวนี้ถูกดีไซน์มาเพื่อช่วยให้นักออกแบบเว็บทำงานง่ายขึ้น

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

โปรแกรมตัวนี้จะช่วยให้เราดูง่ายขึ้นว่าเว็บที่พัฒนาขึ้นมานั้นมีหน้าตาท่าทางอย่างไรในเบราเซอร์ชนิดต่างๆ ที่แจ๋วคือ มีโหมด overlay โชว์เว็บในแต่ละเบราเซอร์ซ้อนกันให้ดูด้วย เผื่อใครต้องการจะเทียบในระดับ pixel

ตอนนี้โหลดเบต้ามาลองได้แล้ว (ขนาด 200 เมก) ใครที่สนใจก็ลองโหลดมา แล้วถ้าจะรีวิวให้ก็จะเป็นพระคุณมากครับ

อ่านบทความต้นเรื่องได้ที่ iStartedSomething

ได้รับการทาบทามจากคุณแชมป์และคุณ mk มาร่วมพรรคกระยาจก จะอุทานว่า "ว้าว" ก็ย่อมธรรมดาไป ในฐานะเด็กคอมฯ ผู้รักงานออกแบบงูๆ ปลาๆ ขออุทานว่า "เชี้ยะ" ละกัน (ไม่ใช่คำหยาบเด้อ)

คำว่า "เชี้ยะ" นั้น สำนวนในแวดวงการออกแบบ (แบบบ้านๆ) หมายถึงความเจ๋ง ความละเอียดละออ การใส่ใจเก็บรายละเอียด (ซึ่งกริยาคือ เก็บกิ๊ก) ฯลฯ ถ้าจะให้ได้อารมณ์ให้ลากเสียงยาวๆ สูงท้ายคำ บิดปากแบบคนดำเปล่งเสียงแล้วริมฝีปากหนาๆ เผยอและสั่นน้อยๆ พองาม

อ้าว เย่อเย้อจนไม่ถูกหลัก Usability มามากแล้ว เข้าประเด็นดีกว่า

สำหรับคนทำงานกราฟฟิคสิ่งพิมพ์มาก่อนทำเว็บ จะคุ้นเคยกับการซูมเข้าซูมออก เพื่อดูรายละเอียดงาน เพราะงานพิมพ์นั้นให้คุณภาพสูง รายละเอียดเยอะ แต่พอมาทำเว็บ กลับเจอข้อจำกัดที่เรียกว่า Pixel หรือ จุด เพราะหน่วยนับในการออกแบบเว็บ ไม่ใช่ความยาวแบบ 1 cm, 1 m. แต่เป็น 100 pixel, 1024 pixel

เลยทำให้ ขอบของรูปที่คิดว่าจะคม มันกลับไม่คม คือ ไม่ลงจุด

มาดูการใช้ Vector สร้างรูปสี่เหลี่ยมขอบมนสุดฮิตกันดีกว่า

สี่เหลี่ยมขอบมน สุดฮิต

หากใช้ Photoshop เราจะใช้เครื่องมือ Rounded Rectangle Tool สร้างสี่เหลี่ยนขอบมนแบบเป็น Vector ขึ้นมา ทีนี้ก่อนจะวางเมาส์วาดลงไป ก็ให้เปิดกริด (Grid) ขึ้นมา เพื่อจะได้แน่ใจว่า มัน Snap ลงตรงกริดที่เราตั้งไว้ (ผมแนะนำให้ตั้งกริดไว้ห่าง 5px  หรือ 10px จะทำให้วาดกรอบต่างๆ ได้สะดวก ในรูป ตั้งไว้ 100 แบ่ง 20 และสร้างสี่เหลี่ยมขอบมนรัศมี  10px)

(more...)