การจัดการรายละเอียดเป็นสิ่งสำคัญมากในการออกแบบเว็บไซต์ โดยส่วนตัวแล้วฉันมักจะสังเกตเว็บไซต์ของ Gringo และพบว่าการออกแบบเว็บไซต์ที่ยอดเยี่ยมนั้นคำนึงถึงการจัดการรายละเอียดเป็นอย่างมาก เคล็ดลับที่ฉันแบ่งปันกับคุณวันนี้นั้นง่ายมาก แต่สามารถปรับปรุงรายละเอียดของเว็บไซต์ทั้งหมดได้อย่างมาก ดังนั้นฉันคิดว่าเคล็ดลับเหล่านี้มีประโยชน์ในการปรับปรุงระดับการออกแบบเว็บไซต์ของคุณด้วย
และคุณจะสังเกตได้ว่าเทคนิคเหล่านี้เกี่ยวข้องกับคำเดียว ซึ่งก็คือ "pixelation" ซึ่งหมายถึงเส้นเล็กๆ บางบรรทัดขนาด 1px และ 2px โอเค เอาล่ะ เอาล่ะ
1. เส้นแบ่งพิกเซล บทนำแรกคือเส้นแบ่ง โปรดดูที่แถบนำทางในรูปด้านล่าง
ให้ความสนใจกับเส้นในวงกลมสีแดงในภาพและเส้นแบ่งระหว่างปุ่มต่างๆ ต่อไปผมจะขยายภาพนี้มาดูหลักการกัน
เราจะเห็นว่าเส้นแบ่งเหล่านี้ประกอบด้วยเส้นตรงขนาด 1px สองเส้นที่อยู่ติดกัน โดยสีหนึ่งเข้มกว่าและอีกสีอ่อนกว่าสีพื้นหลัง ต่อไปให้ดูวิธีการ:
เลือกเครื่องมือดินสอ (อย่าเลือกแปรงโดยไม่ได้ตั้งใจ) และตั้งค่าขนาดเป็น 1px
เลือกสีที่เข้มกว่าสีพื้นหลัง เช่น สีน้ำเงินเข้มในภาพ กด Shift ค้างไว้แล้ววาดเส้นตรง
เลือกสีที่สว่างกว่าแล้ววาดเส้นตรงอีกเส้น ตกลง
PS. ในระหว่างขั้นตอนการวาดเส้น คุณสามารถขยายผืนผ้าใบ (Z) เพื่อการสังเกตได้
แล้วเอฟเฟกต์จะดีกว่าตัวแบ่งสีเดียวมากใช่ไหม? มาดูตัวอย่างเพิ่มเติมของการใช้เทคนิคตัวแบ่งนี้:
2. ขอบพิกเซล
ขั้นแรก เรามาดูภาพต้นฉบับที่ไม่มี "ขอบพิกเซล":
ต่อไปคือสิ่งที่เพิ่มเข้ามา:
