โพสต์

กำลังแสดงโพสต์จาก พฤษภาคม, 2011

วิธีแก้ปัญหา Photoshop สั่ง Save for web แล้วทำให้สีเพี้ยน

รูปภาพ
ปัญหาของสีเพี้ยนตอนที่ save รูปจาก Photoshop ไปเป็น Png หรือ Jpeg เป็นเพราะว่า เราตั้ง Profile ของสีที่จะใช้กับสีที่แสดงบนหน้าจอเป็นคนละ Profile กัน ทำให้ได้ผลดังรูป


ภาพแสดงความแตกต่างของ original กับ save for web
ภาพล่างคือภาพที่ได้จากการ save for web ส่วนภาพบนเป็นต้นฉบับ จะสังเกตุว่าภาพล่างสีซีดกว่าภาพบน ทางแก้คือต้องปรับ Color Profile โดยเข้าไปที่ Edit > Color Settings จากนั้นเลือก Monitor Color ตามรูป

ภาพแสดงการตั้งค่า Color profile
จากนั้นตอนแสดงผลให้เราปรับ Proof Setup ให้เป็น Monitor RGB  โดยเลือกที่เมนูตามภาพ

ภาพแสดงการเลือก Monitor RGB
จากนั้นตอนที่เราสั่ง save for web ให้เราระวัง อย่าไปสั่ง convert to sRGB เพื่อให้แน่ใจว่าภาพที่ออกมาจะเหมือนกับที่เราออกแบบไว้

ภาพแสดงว่าไม่ต้องเลือก Convert to sRGB
ที่ค่าเริ่มต้นของ Photoshop ไม่ได้เป็น RGB แต่เป็น CMYK คาดว่าเป็นเพราะบน Mac ผู้ใช้มักจะทำงานสิ่งพิมพ์มากกว่างานที่ออกหน้าจอทำให้เราต้องมาปรับค่า view กันทุกเครื่องไป

ดูรายละเอียดเพิ่มเติมได้ที่ embedded JPEG profiles

ออกแบบ Action Bar ให้ Android Honeycomb

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

วันนี้ดูวีดีโอ "Designing and Implementing Android UIs for Phones and Tablets" ของงาน Google IO แล้วไปเจอ Pattern เท่ๆ ของ Honeycomb เข้า ในวีดีโอเล่าว่าเราควรใช้ Action bar ในการตอบคำถามพื้นฐานให้กับผู้ใช้ โดยเรียงเป็นลำดับว่า

ฉันอยู่ที่ไหน?ฉันเห็นอะไรได้บ้าง?ฉันทำอะไรได้บ้าง?
ลองมาดูหน้าตาของ Action bar ที่ Google วาง Pattern ไว้ เพื่อตอบโจทย์ข้างต้น

หน้าจอ wireframe ของ Action Bar
จะเห็นว่าทั้ง Mobile และ Tablet ต่างก็มี Action Bar ทั้งคู่ ถ้าเป็น Mobile ตัว Action bar จะถูกวางเอาไว้ทั้งด้านบน และด้านล่าง ส่วนของ Tablet จะวางไว้ด้านบนสุดวาดยาวจากซ้ายไปขวา แบบออกได้เป็นสามส่วนเพื่อตอบโจทย์ตามลำดับ

1. ฉันอยู่ที่ไหน หรือ ฉันอยู่ในโปรแกรมไหน

หน้าจอแสดงตัวอย่างตำแหน่ง Logo ของโปรแกรม
Google เลือกตอบคำถามโดยวาง Logo ของโปรแกรมไว้ที่ด้านซ้ายสุดของ Action bar โดย…