يعد التعامل مع التفاصيل أمرًا مهمًا للغاية في تصميم الويب، وأنا شخصيًا ألاحظ غالبًا مواقع Gringo الإلكترونية وأجد أن تصميمات مواقع الويب الممتازة مدروسة جدًا في التعامل مع التفاصيل. النصائح التي أشاركها معكم اليوم بسيطة للغاية، لكنها يمكن أن تعزز بشكل كبير تفاصيل الموقع بأكمله. لذلك أعتقد أن هذه النصائح مفيدة أيضًا لتحسين مستوى تصميم موقع الويب الخاص بك.
وستلاحظ أن هذه التقنيات كلها تدور حول كلمة واحدة وهي "pixelation" والتي تعني ببساطة بعض الخطوط الصغيرة بحجم 1px و2px. حسنًا، ها نحن ذا.
1. خط تقسيم البكسل المقدمة الأولى هي الخط الفاصل، يرجى إلقاء نظرة على شريط التنقل في الشكل أدناه.
انتبه إلى الخطوط الموجودة في الدائرة الحمراء في الصورة والخطوط الفاصلة بين الأزرار، حيث تبدو هذه الخطوط غائرة، مما يشكل شعورًا جيدًا بالخط الفاصل. بعد ذلك، سأقوم بتكبير هذه الصورة ودعنا نلقي نظرة على المبدأ.
يمكننا أن نرى أن هذه الخطوط الفاصلة تتكون من خطين مستقيمين متجاورين بحجم 1 بكسل، أحدهما أغمق والآخر أفتح من لون الخلفية. بعد ذلك، انظر إلى الطريقة:
حدد أداة القلم الرصاص (لا تختر الفرشاة عن طريق الخطأ) واضبط الحجم على 1 بكسل
حدد لونًا أغمق من لون الخلفية، مثل اللون الأزرق الداكن في الصورة، واضغط باستمرار على مفتاح Shift وارسم خطًا مستقيمًا
اختر لونًا أفتح وارسم خطًا مستقيمًا آخر. نعم
ملحوظة: أثناء عملية رسم الخط، يمكنك تكبير اللوحة القماشية (Z) للمراقبة.
ماذا عن ذلك التأثير أفضل بكثير من مقسم لون واحد، أليس كذلك؟ دعونا نلقي نظرة على بعض الأمثلة الإضافية لاستخدام تقنية المقسم هذه:
2. حافة البكسل
أولاً، دعونا نلقي نظرة على الصورة الأصلية بدون "حواف البكسل":
التالي هو ما يضاف:
