خطوات إبداعية عملية

تكبير فن البكسل دون تمويه: افحص الملف المصدّر

عمل تجريدي لكتل صغيرة تكبر مع بقاء حوافها مربعة
عمل فني تجريدي للمقال؛ يستخدم الشرح لقطات فعلية للمنتج.

قد تبدو أيقونة الطرد في لعبتك حادة بحجمها الأصلي، ثم تصبح ناعمة عند تكبيرها لصفحة المتجر أو تحديث التطوير. إذا كان الرسم معتمداً فلا تحتاج إلى توليده مجدداً. المطلوب ملف أكبر يكرر البكسلات الموجودة بدقة.

جرّبنا ذلك في Ciyo بطرد خيالي بحجم 16×16 رسمناه ببرنامج قصير في مساحة الملفات. إنها صورة اختبار مضبوطة بأربعة ألوان، وليست صورة فوتوغرافية أو ناتج نموذج صور. يمكنك فحص العملية في ملفي 64×64 و128×128 القابلين للتنزيل.

ابدأ بملف PNG الأصلي

احتفظ بنسخة أصلية غير معدلة وتحقق من أبعادها الفعلية. الصورة الكبيرة التي تشبه فن البكسل قد تحتوي أصلاً على حواف ناعمة ومئات الألوان. تكبيرها بأمانة يحفظ هذه المشكلات أيضاً؛ ولا يثبت وجود شبكة بكسلات أصلية سليمة.

يحتوي أصلنا على 4 ألوان معتمة، وقيم ألفا لا تتجاوز 0 و255. حجمه 170 بايت. أنشأه Ciyo بمستطيلات من بكسلات كاملة وأبقاه بجوار المخرجات. في مشروعك استورد PNG المعتمد بدلاً من طلب إعادة رسمه.

واجهة Ciyo كاملة مع الطرد الأصلي الصغير ونتائج فحص الأبعاد والألوان
الأصل الفعلي 16×16 بكسلاً فقط. نكرر الأبعاد والشفافية في النص لأن الصورة صغيرة على اللوحة.

اختر معامل تكبير صحيحاً

عند 4× يصبح كل بكسل كتلة 4×4، وعند 8× يصبح كتلة 8×8. بذلك يحصل كل بكسل على مساحة متساوية. حجم اعتباطي مثل 100×100 لا يقسم شبكة 16×16 إلى كتل صحيحة متساوية.

اطلب تغيير أبعاد الملف بأقرب جار مع حفظ ناتج منفصل. عبارات مثل تحسين التفاصيل أو رفع الدقة قد تدعو إلى رسم جديد. هذه المهمة تغير أبعاد الملف مع الحفاظ على الرسم.

انسخ هذا الطلب لمساحة الملفات
استخدم PNG RGBA الموجود بحجم 16×16. احفظ نواتج منفصلة بأقرب جار عند 4× (64×64) و8× (128×128)، دون إعادة رسم أو توليد صورة. أعد فتح كل ملف وتحقق من تطابق كل كتلة k×k مع بكسل مصدرها بما فيه ألفا. أبلغ عن الأبعاد وعدد الألوان المعتمة والبايتات. أبقِ الأصل دون تغيير واحفظ النواتج على اللوحة.

قارن البكسلات المحفوظة بما فيها الشفافية

جمال معاينة اللوحة لا يكفي. نزّل PNG وفك ترميزه وقارن كل بكسل بالمصدر المقابل. أدخل ألفا في المقارنة: قد يصعب ملاحظة خلفية معتمة أو حافة شفافة مموهة على لوحة فاتحة.

اجتاز الملفان المقارنة المستقلة مع 0 قنوات مختلفة. احتفظا بـ4 ألوان معتمة وشفافية ثنائية. زيادة عدد البايتات تخص هذين المثالين الصغيرين فقط، ولا تتنبأ بحجم أعمالك.

الملفات المنزّلة فعلياً في هذه التجربة
الملفالأبعادألوان معتمةبايتات
الأصل دون تعديل16×164170
أقرب جار 4×64×644261
أقرب جار 8×128×1284376

أضف مرجعاً ناعماً لإظهار الفرق

تعرض لوحة المقارنة الأصل وناتج أقرب جار بالحجم الظاهري نفسه بجانب نسخة مقصودة بالاستيفاء الثنائي الخطي. يحافظ الأولان على انتقالات مربعة. المرجع الناعم يمزج الحواف ويخلق ألواناً وسطية؛ وهو موسوم للمقارنة وليس ملفاً مقبولاً للتسليم.

لوحة Ciyo صورة نقطية بحجم 960×400 تضم ثلاث مناطق معنونة. تبقى الملفات الأصلية منفصلة. إذا نعّمت اللوحة أو المتصفح المعاينة، فافحص الملف المنزّل في عارض مناسب قبل اعتبار التصدير نفسه قد تغير.

لوحة Ciyo كاملة مع الأصل ونسختين مكبرتين ومرجع ثنائي خطي يبدو ناعماً
ناتج Ciyo الفعلي بعد ملاءمة التكبير. يحتفظ الأصل وأقرب جار بالحواف المربعة؛ والمرجع الأيمن يوضح التنعيم عمداً.

افحص إعدادات العرض في الوجهة منفصلة

قد يكون الملف صحيحاً بينما تعيد صفحة الويب أو اللعبة تنعيمه. توثق MDN خاصية image-rendering للتحكم في الصور المكبّرة. اختبر الحجم المعروض والمتصفح؛ فصحة PNG لا تختار CSS للموقع أو مرشح نسيج محرك اللعبة تلقائياً.

استخدم معامل عرض صحيحاً عندما تريد كتل بكسلات متساوية وحادة. تحقق هذه التجربة بكسلات التصدير فقط. لا تثبت التوافق مع محركك أو توقيت التحريك أو سلوك التكبير في جميع المتصفحات.

احتفظ بالأصل وسلّم الحجم المطلوب

ضمّن معامل التكبير والأبعاد في اسم الناتج لتمييز الأصل من ملف التسليم. احتفظ بالمصدر والتصدير المقبول وتعليمات التكبير معاً. ابدأ التغييرات اللاحقة من الأصل بحجمه الفعلي، لا من لقطة شاشة أو معاينة سبق تنعيمها.

استخدم العينات أدناه لتكرار الفحص. إذا كانت الأيقونة ضبابية في حجمها الأصلي فأصلح شبكة الرسم أولاً. أقرب جار يحفظ المعلومات الموجودة ولا يستعيد تفاصيل لم يتضمنها المصدر.

أسئلة عملية

هل يضيف أقرب جار تفاصيل؟

يكرر البكسلات الموجودة. استخدمه لحفظ شبكة معتمدة، لا لاختراع تفاصيل رسم إضافية.

لماذا قد تبدو معاينة اللوحة ناعمة؟

قد ينعّم العارض الصورة أثناء تغيير حجم العرض. افحص التنزيل وإعدادات الوجهة كلّاً على حدة.

هل أختار أي أبعاد للناتج؟

المضاعفات الصحيحة تمنح كل بكسل كتلة متساوية. الحجم الاعتباطي يتطلب كتلاً غير متساوية أو إعادة أخذ عينات أخرى.

كبّر أيقونة معتمدة واحدة

افتح PNG الأصلي في Ciyo، واطلب تصديراً منفصلاً بمعامل صحيح، ثم افحص البكسلات قبل استبدال ملف التسليم.