สอนเทคนิคน่ารู้ ซีรีย์ Photoshop ชุด GoPro ทิปที่ 7 – วิธีการใส่ Font Awesome Font Awesome เป็น Open-Source ฟอนต์ประเภทไอคอน (แสดงผลเป็นรูปไอคอน ไมใช่ตัวอักษร) ที่มีการใช้งานแพร่หลายในหลายเว็บไซต์ เพราะนอกจากสามารถนำไปใช้ในเชิงพาณิชย์ได้ (Commercial Use) ยังมีไอคอนให้เราเลือกสรรเลือกใช้เป็นร้อยๆ แต่ถ้าหากเราอยากจะนำไอคอนเหล่านี้มาใส่ในไฟล์งาน photoshop (.psd) จะมีวิธีการอยู่ 2 แบบ คือ การใช้งานผ่านไฟล์ฟอนต์: ใช้ได้กับ Photoshop ทุกเวอร์ชั้น รวมทั้ง ... By uiblogazinerDecember 7, 20150
สอนเทคนิคน่ารู้ อย่า APP ถ้าไม่อยากแบ๊ว จากกระแสการบูมของอุปกรณ์พกพา (mobile device) ทำให้สตาร์ทอัพหรือหลายๆ หน่วยงานพยายามนำเสนอแนวคิดการนำเอาแอปลิเคชันบนมือถือ (Mobile Application) เข้ามาเป็นสื่อกลางในการตอบสนองความต้องการของผู้ใช้เพื่อแก้ปัญหาต่างๆ แต่ก็มีหลาย app ที่ทำออกมาแล้วเสียของ เพราะไม่เข้าใจจุดประสงค์และบริบทของการใช้งาน mobile app ที่แท้จริง และในบางครั้งการพัฒนา app บนเว็บ (Web Application) กลับดูดีเสียกว่าอีก การตัดสินใจว่าจะพัฒนา app บนมือถือหรือบนเว็บดี ... By uiblogazinerOctober 31, 20150
สอนเทคนิคน่ารู้ สร้าง UI popup ให้กับเว็บด้วย Twitter โดย Nectar Ninjar ช่วงนี้ใครแวะเยี่ยมเยียนเว็บ uiblogazine จะสังเกตเห็น popup เล็กๆ ขึ้นอยู่ที่มุมขวาล่างของหน้าแรก เจ้า popup นี้ ผมไม่ได้ใช้ jQuery หรือ plugin ใดๆ ของ wordpress เพื่อสร้างมันขึ้นมานะครับ แต่ผมใช้แค่ script สั้นๆ ของ Nectar Ninja ... By uiblogazinerSeptember 23, 20150
UI Pattern 10 วิธีออกแบบเว็บเพื่อความร่ำรวยแบบรุกฆาต หนึ่งในตัววัดผลว่าเว็บของเรามีประสิทธิภาพ ไม่ใช่ดูที่เว็บสวยงามหรือไม่ แต่ขึ้นอยู่กับว่าเว็บของเราตอบโจทย์ยูสเซอร์และองค์กรได้มากน้อยแค่ไหน บริษัทจึงต้องดูค่าแปรเปลี่ยนเป็นกำไร (Conversion Rate) ในแต่ละการเปลี่ยนแปลงที่เกิดขึ้นบนหน้าเว็บ เพราะเป็นวิธีการเฝ้าติดตามผลลัพธ์ของงานออกแบบอันจะส่งผลต่อพฤติกรรมของลูกค้าและกำไรของบริษัท ซึ่งผมได้รวบรวมวิธีการออกแบบ UI หน้าเว็บที่จะช่วยเพิ่มตัวเลข Conversion rate ที่ใครๆ ก็สามารถทำได้ มาเริ่มหมากทั้ง 10 วิธีกันครับ 1. ใช้นางแบบ, นายแบบในหน้าแรก เปรียบเทียบเว็บแบบเดิมกับแบบที่ปรับมาใช้รูปคนเป็นพื้นหลัง เว็บ 37 ... By uiblogazinerAugust 27, 20150
สอนเทคนิคน่ารู้ ซีรีย์ Photoshop ชุด GoPro ทิปที่ 6 – สร้าง Stroke 5 ชั้น ด้วย 1 เลเยอร์ การใช้งาน Photoshop โดยทั่วไป ผมมักจะสร้าง stroke (เส้นขอบรอบวัตถุ) รอบวัตถุที่เป็น vector shape แค่ 1 ชั้นเท่านั้น แต่บางทีหากต้องการสร้างเส้น stroke มากกว่านี้ ผมจะ copy วัตถุนั้น (กลายเป็น 2 เลเยอร์แล้ว) แล้วขยายวัตถุให้ใหญ่จนกลายเป็นอีกเส้นขอบหนึ่ง แต่พอใช้งานจนเข้าขั้น ... By uiblogazinerJune 18, 20150
สอนเทคนิคน่ารู้ ซีรีย์ Photoshop ชุด GoPro ทิปที่ 5 – ซูม 100% ครั้งนี้เป็นทิปง่ายๆ แต่ผมคิดว่าน่าจะนำมาลงใน Go Pro ด้วย เพราะการทำงานใน Photoshop เราจำเป็นต้องมีการซูมผลงานเข้าออกอยู่เสมอ ท้ายที่สุดแล้ว เราก็อยากดูผลงานในซูมที่ระดับ 100% เพื่อตรวจสอบความถูกต้องและความคมชัดของผลงาน ผมสรุปวิธีการซูมผลงานเพื่อกลับมาที่มุมมอง 100% มา 5 วิธีด้วยกันครับ 1. ใช้ Shortkey วิธีแรกเป็นเบสิคการซูมเข้าออกผลงานด้วยการใช้ shortkey คือ ... By uiblogazinerMay 31, 20150
สอนเทคนิคน่ารู้ ซีรีย์ Photoshop ชุด GoPro ทิปที่ 4 – ก๊อปปี้ Effects ให้ว่อง สมัยยังเป็นผู้ใช้งาน Photoshop ระดับเบๆ ผมต้องสูญเสียเวลาซะส่วนใหญ่กับการต้องมาก๊อปปี้ layer effects ที่ใส่ให้กับเลเยอร์หนึ่ง ไปใช้กับอีกเลเยอร์หนึ่ง มาดูตัวอย่างปัญหากันครับ สถานการณ์ตัวอย่างในการใช้งาน layer effects สมมติผมสร้างเลเยอร์มา 2 เลเยอร์ดังภาพ หากผมต้องการใส่ layer effects ให้กับสี่เหลี่ยมสีเหลือง ผมจะ double click ที่พื้นที่ว่างๆ ... By uiblogazinerMay 5, 20150
สอนเทคนิคน่ารู้ ซีรีย์ Photoshop ชุด GoPro ทิปที่ 3 – จัดระเบียบ Layer การใช้งานเลเยอร์บน Photoshop เป็นอะไรที่เข้าใจได้ไม่ยากนัก คือแนวความคิดที่เหมือนกับแผ่นกระดาษทับซ้อนๆ กันไปเรื่อยๆ และเมื่อมีกระดาษกองเป็นชั้นๆ มากขึ้นจนทำให้เราสับสนตอนค้นหา ก็ถึงเวลาที่เราควรจัดระเบียบเลเยอร์บ้างแล้ว ขั้นที่ 1 จัดกลุ่ม ปุ่มที่ใช้สร้างกลุ่มเลเยอร์บน panel เลเยอร์ พื้นฐานที่ง่ายทีสุดในการจัดระเบียบเลเยอร์ ก็คือการสร้างกลุ่ม (Group) ของวัตถุที่อยู่กลุ่มประเภทเดียวกัน ตัวอย่างการจัดกลุ่มเลเยอร์สำหรับงานออกแบบเว็บไซต์ ถ้าหากผม design เว็บ ผมชอบที่จะสร้างกลุ่มเตรียมไว้ดังรูปด้านบน ... By uiblogazinerApril 13, 20150
สอนเทคนิคน่ารู้ ซีรีย์ Photoshop ชุด GoPro ทิปที่ 2 – รู้จักใช้ Solid Color layer ผมคนหนึ่งที่ไม่ค่อยเห็นประโยชน์ของ Solid Color Layer เท่าไรนัก จนมาทำงานออกแบบ UI สำหรับมือถือ (หรืออีกหลายๆ งาน) ที่เราไม่รู้ว่าข้อมูลจะมีความยาวสุดขนาดไหน ทำให้ต้องคอยเพิ่ม/ลด ความสูงของหน้าอยู่บ่อยครั้ง ปัญหาที่เจอก็คือ สีพื้นหลังที่ต้องคอยมาเทให้เต็มหน้าทุกครั้งที่เพิ่มขนาดความสูงของหน้า อาจยังไม่เห็นภาพปัญหา งั้นเรามาดูกรณีตัวอย่างกันครับ พื้นงานที่มีการเติมสีพื้นหลังด้วยเลเยอร์ธรรมดา สมมุติผมต้องการสร้างงานขนาด 500×500 px และต้องการพื้นหลังเป็นสีอ่อนๆ ผมจึงสร้างเลเยอร์เพิ่มและเทสีให้เต็มพื้นที่ ... By uiblogazinerApril 4, 20150
สอนเทคนิคน่ารู้ ซีรีย์ Photoshop ชุด GoPro ทิปที่ 1 – เลือกเลเยอร์แบบจิ้มปุ๊ปใช่ปั๊ป ตอนแรกกับซีรีย์สอนเทคนิคการใช้งาน Photoshop ระดับโปรเพื่องาน UI ที่ผมคัดกลั่นจากประสบการณ์การทำงานและการอยู่กินกับ Photoshop มานานกว่า 10 ปี เลยอยากจะแบ่งปันและอยากให้มาดูมาเผือกกันเยอะๆ (สอดรู้สอดเห็นในสิ่งที่ควรเป็นสิ่งที่ดีนะ) หลังจบตอนแรกนี้และตอนต่อๆ ไป ผมคิดว่าคงจะทำให้เราปฏิวัติการใช้งาน Photoshop ให้มีประสิทธิภาพมากยิ่งขึ้น ซึ่งก็คือช่วยประหยัดเวลาในการสร้างสรรค์ผลงาน และเอาเวลานี้ไปคิดให้มากๆ ดีกว่า ว่าม่ะ ถ้างั้น จัดทิปแรกเลยน้า ทิปที่ ... By uiblogazinerApril 4, 20150
ทฤษฎี UI 6 หลักการเพื่อออกแบบทุกสิ่งบนโลกนี้ ตอนที่ 1: Affordance (ล่อให้กระทำ) June 22, 201714489 views