إضافة صور لعرض الأجزاء القابلة للتخصيص
الهدف هو بناء معاينة تجمع بين صورة المنتج الحقيقية والأجزاء التي يتحكم فيها العميل. إذا كان العميل سيغير لون الكوب أو تسريحة الشعر أو إضافة ملابس، فكل جزء يحتاج صورة مستقلة قابلة للتحكم.
أين تضيف الصور؟
المسار: افتح الاستوديو ← شريط أقسام المحرر ← الطبقات ← إضافة عنصر ← صورة (أو صورة أساسية كخلفية).
النتيجة المتوقعة
- تظهر صورة المنتج كأساس ثابت.
- تظهر الأجزاء القابلة للتغيير فوقها في المواضع الصحيحة.
- يمكن تغيير أي جزء دون كسر بقية المعاينة.
- تظل المعاينة واضحة على الحاسب والجوال.
قبل أن تبدأ
جهّز ثلاث أنواع من الملفات:
- صورة المنتج الأساسية: الكوب أو التيشيرت أو المنتج بخلفية نظيفة.
- طبقات الأجزاء المتغيرة: صور شفافة PNG لكل جزء.
- صور الخيارات: تسريحة، ملابس، إضافة، شكل، أو تصميم.
الخطوات
- افتح المنتج في الاستوديو.
- انتقل إلى قسم الطبقات.
- ارفع صورة المنتج الأساسية كخلفية أو طبقة خلفية.
- اضبط مقاس المعاينة على نسبة صورة المنتج.
- اضغط إضافة عنصر أو إضافة صورة.
- ارفع أول جزء قابل للتخصيص بصيغة PNG شفافة.
- اسحب الصورة إلى موضعها الصحيح.
- استخدم مقابض التحديد لتغيير الحجم دون تشويه النسبة.
- كرر العملية لكل جزء قابل للتغيير.
- رتّب الطبقات من الخلف إلى الأمام.
- افتح معاينة العميل وتأكد أن كل صورة في مكانها.
- احفظ المسودة.
جدول قرار الصور
| الجزء | هل يصبح طبقة مستقلة؟ | السبب |
|---|---|---|
| جسم المنتج | أحيانًا لا | يمكن استخدامه كخلفية ثابتة |
| لون المنتج | نعم | يتغير باختيار العميل |
| رسم ثابت | لا | يبقى في الخلفية أو طبقة مقفلة |
| تسريحة أو ملابس | نعم | كل خيار له صورة مختلفة |
| شعار مرفوع | نعم | يظهر فقط عند رفع العميل للملف |
ضبط الموضع والحجم
- استخدم السحب للتموضع العام.
- استخدم مقابض الزوايا للتحجيم.
- راقب النسبة والأبعاد لتجنب التمدد.
- استخدم المحاذاة عند الحاجة لتوسيط العنصر.
- قفل الطبقة بعد ضبطها إذا لم تعد تحتاج تعديلها.
الفحص قبل الحفظ
- هل كل الصور بنفس اتجاه المنتج؟
- هل الحواف الشفافة نظيفة؟
- هل تظهر الصور في المنظر المطلوب فقط؟
- هل تختفي أو تظهر بشكل صحيح عند تغيير الخيارات؟
- هل المعاينة سريعة وغير ثقيلة؟
مشاكل شائعة
| المشكلة | الحل |
|---|---|
| حواف بيضاء حول الصورة | نظّف القص أو أعد تصدير PNG شفاف |
| الصورة تغطي تفاصيل أخرى | أعد ترتيب الطبقات |
| الصورة مشوهة | حافظ على نسبة الأبعاد |
| لا تظهر الصورة | تأكد أنها مضافة كطبقة وظاهرة في العرض الحالي |
راجع تجهيز الطبقات الشفافة ثم إعادة ترتيب الطبقات.
مثال عملي من متجر كراسة
بُني كوب الشخصيات من: صورة كوب واحدة كخلفية أساسية + مجموعة صور وسائط المنتج: overlay التي تحوي 368 صورة شفافة PNG (بشرات، تسريحات، ملابس، إكسسوارات). كل صورة رُفعت مرة واحدة في المكتبة وتُستدعى كطبقة فوق الكوب — فتتغير الشخصية كاملة أمام العميل دون لمس صورة الكوب الأساسية أبدًا.
هل أجاب هذا المقال على سؤالك؟