نظرة عامة على الشرائح

عندما تصمم الرسومات لموقع الويب، تحتاج أجزاء مختلفة من الصورة غالبًا إلى العمل بشكل مستقل. قد ترتبط منطقة بعنوان URL، وقد يتم تحميل منطقة أخرى بشكل أسرع، وقد تحتاج منطقة أخرى إلى إعدادات تحسين مختلفة. تقسم الشرائح صورة واحدة إلى شبكة من الأجزاء الأصغر التي تعمل معًا كصفحة ويب، مع الحفاظ على التحكم في كل قسم بشكل مستقل.

يعيد Photoshop تجميع الصور المقسمة إلى شرائح على صفحات الويب باستخدام جداول HTML أو طبقات CSS. عند تصدير صورة مقسمة إلى شرائح باستخدام الأمر ملف > تصدير > حفظ للويب، يحفظ Photoshop كل شريحة كملف منفصل. كما يُنشئ كود HTML أو CSS اللازم لعرض الصورة كتكوين واحد في المتصفح.

كيفية عمل الشرائح

تقسم الشرائح الصورة على طول خطوط شبكة غير مرئية، مما يؤدي إلى إنشاء أقسام مستطيلة تعمل كملفات مستقلة. تحتفظ كل شريحة بموضعها في التخطيط العام بينما تعمل كعنصر منفصل له خصائصه الخاصة وإعدادات التحسين والسلوكيات الخاصة به.

يقدم هذا الأسلوب بعض المزايا العملية:

• تعيين روابط URL مختلفة لإنشاء عناصر تنقل قابلة للنقر
• تطبيق إعدادات ضغط متنوعة لتحقيق التوازن بين الجودة وحجم الملف في مختلف المناطق
• تحديث الأقسام الفردية دون إعادة تصدير التكوين بالكامل

نوع الشريحة حسب طريقة الإنشاء

يصنّف Photoshop الشرائح بناءً على طريقة إنشائها، ويتصرف كل نوع بشكل مختلف عند تعديل صورتك.

• شرائح المستخدم: أقسام تحددها يدويًا باستخدام أداة الشريحة .لديك تحكم كامل في حجمها وموضعها وخصائصها، وتبقى في مكانها حتى تقوم بنقلها أو تعديلها.
• الشرائح المستندة إلى الطبقات: تشمل الشرائح كل البكسل في الطبقة. يتم تحديث حدودها تلقائيًا عند نقل الطبقة أو تعديلها. تعمل بشكل جيد مع المحتوى الذي يتغير كثيرًا، لكنها تمنحك تحكمًا أقل في تحديد الموضع الدقيق مقارنة بشرائح المستخدم.
• الشرائح التلقائية: شرائح تملأ المساحة المتبقية في الصورة التي لا تغطيها شرائح المستخدم أو الشرائح المستندة إلى الطبقات. ينشئ Photoshop هذه الشرائح تلقائيًا، ويعيد إنشاءها عند إضافة شرائح أخرى أو إزالتها أو تعديلها.تشترك كل الشرائح التلقائية في الصورة في نفس إعدادات التحسين.
• الشرائح الفرعية: نوع خاص من الشرائح التلقائية يظهر عند تداخل الشرائح.توضح الشرائح الفرعية كيفية تقسيم Photoshop للمناطق المتداخلة عند حفظ الملف المحسّن.لا يمكنك تحديد الشرائح الفرعية أو تعديلها بشكل مستقل عن الشرائح الأساسية الخاصة بها.

نوع الشريحة حسب المحتوى

تُصنَّف الشرائح أيضًا حسب نوع المحتوى الذي تحتوي عليه.

• شرائح الصور: نوع الشريحة الافتراضي للمحتوى المرئي، ويحتوي على بيانات صورة من مستند Photoshop.
• الشرائح بلا صور: خلايا جدول فارغة لنص HTML أو ألوان ثابتة.لا يصدِّر Photoshop هذه الشرائح كملفات صور، مما يجعلها مفيدة للنص الحي القابل للتحديد.
• شرائح الجدول: شرائح تحدد كيفية إنشاء Photoshop لبنية جدول HTML المستخدم لإعادة تجميع الصورة المقسَّمة إلى شرائح في المتصفح.

الإشارات المرئية للشرائح

يستخدم Photoshop إشارات مرئية لمساعدتك في التمييز بين أنواع الشرائح أثناء العمل.

• خطوط الشرائح: تشير الخطوط المتصلة إلى شرائح المستخدم أو الشرائح المستندة إلى الطبقة، بينما تشير الخطوط المنقطة إلى الشرائح التلقائية.
• ألوان الشرائح: تحدد الرموز الزرقاء شرائح المستخدم والشرائح المستندة إلى الطبقة، بينما تشير الرموز الرمادية إلى الشرائح التلقائية.
• أرقام الشرائح: تمتد الأرقام الموجودة في الزاوية العلوية اليسرى من كل شريحة من اليسار إلى اليمين ومن الأعلى إلى الأسفل، وتُحدَّث تلقائيًا عند إعادة ترتيب الشرائح أو تعديلها.
• شارات الشرائح: رموز صغيرة تحدد محتوى الشريحة ونوعها.على سبيل المثال، يشير رمز الصورة إلى شريحة مستخدم تحتوي على محتوى صورة، ويشير رمز الصورة المشطوب إلى شريحة مستخدم لا تحتوي على محتوى صورة، ويشير رمز الطبقة إلى شريحة مستندة إلى الطبقة.

يساعدك التعرف على هذه الفروق المرئية في تحديد أنواع الشرائح بسرعة والعمل بكفاءة أكبر مع تخطيطات الشرائح المعقدة عند تقسيم صفحات الويب إلى شرائح.