دليل المستخدم إلغاء

تقسيم صفحات ويب إلى شرائح

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

يمكنك تصدير صورة مقسّمة وتحسينها باستخدام الأمر Save For Web. يقوم Photoshop بحفظ كل شريحة كملف منفصل ويُنشئ شفرة HTML أو CSS المطلوبة لعرض الصورة المقسّمة.

صفحة ويب مقسمة إلى شرائح في Photoshop
صفحة ويب مقسمة إلى شرائح.

عندما تعمل ضمن الشرائح، تذكر دائما الأساسيات التالية:

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

  • بعد إنشاء شريحة، يمكنك تحديدها باستخدام أداة Slice Select ، ثم تحريكها أو تغيير حجمها أو محاذاتها مع الشرائح الأخرى.

  • يمكنك تعيين خيارات لكل شريحة- مثل النوع والاسم وعنوان URL- في شاشة Slice Options.

  • يمكنك تحسين كل شريحة باستخدام إعدادات تحسين مختلفة لكل منها في مربع الحوار Save For Web.

أنواع الشرائح

يتم تصنيف الشرائح حسب نوع محتوياتها (جدول، صورة، بدون صورة) وحسب طريقة إنشائها (مستخدم، مبنية على طبقة، آلية).

تسمى الشرائح المُنشأة باستخدام أداة Slice شرائح المستخدم؛ تسمى الشرائح المُنشأة من طبقة شرائح مبنية على طبقة. عند إنشاء شريحة مستخدم جديدة أو شريحة مبنية على طبقة، يتم إنشاء شرائح آلية لتغطية المساحات المتبقية من الصورة. بكلمات أخرى، تعبئ الشرائح الآلية المساحة في الصورة غير المعرّفة من قبل شرائح المستخدم أو الشرائح المبنية على طبقة. يُعاد إنشاء الشرائح الآلية في كل مرة تقوم فيها بإضافة أو تحرير شرائح المستخدم أو الشرائح المبنية على طبقة. ويمكنك تحويل الشرائح الآلية إلى شرائح المستخدم.

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

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

يتم إنشاء الشرائح باستخدام طرق مختلفة:

  • يتم إنشاء الشرائح الآلية بشكل آلي.

  • يتم إنشاء شرائح المستخدم باستخدام أداة Slice.

  • يتم إنشاء الشرائح المبنية على الطبقات باستخدام لوحة Layers.

تقسيم صفحة ويب إلى شرائح

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

إنشاء شريحة باستخدام أداة Slice

  1. حدد أداة Slice  . (اضغط على المفتاح C للتنقل عبر الأدوات المجمعة مع أداة Crop أيضًا.)

    تظهر أي شرائح موجودة آلياً في نافذة الوثيقة.

  2. اختر إعداد نمط في شريط الخيارات:

    Normal

    يحدد نسب الشرائح أثناء السحب.

    Fixed Aspect Ratio

    يعيّن نسبة العرض إلى الارتفاع. أدخل الأرقام الكاملة أو العشرية لنسبة العرض إلى الارتفاع. على سبيل المثال، لإنشاء شريحة يساوي عرضها ضعف ارتفاعها، أدخل 2 للعرض و1 للارتفاع.

    Fixed Size

    يحدد ارتفاع الشريحة وعرضها. أدخل قيم وحدات البكسل بأرقام كاملة.

  3. اسحب فوق المساحة حيث تريد إنشاء شريحة. اسحب مع الضغط على المفتاح Shift لتقييد الشريحة بمربع. اضغط المفتاح Alt (في Windows) أو المفتاح Option (في Mac OS) أثناء السحب للرسم من الوسط. استخدم View >‏ Snap To لمحاذاة شريحة جديدة مع دليل أو شريحة أخرى في الصورة. راجع نقل شرائح المستخدم وتغيير حجمها وإطباقها.

إنشاء شرائح من الأدلة

  1. إضافة أدلة إلى صورة.
  2. حدد أداة Slice، وانقر فوق Slices From Guides في شريط الخيارات.

    عندما تقوم بإنشاء شرائح من أدلة، فإن أي شرائح موجودة يتم حذفها.

إنشاء شريحة من طبقة

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

إنشاء Photoshop لشريحة من طبقة
يتم تحديث الشريحة المبنية على طبقة عندما يتم تعديل الطبقة المصدر.

تكون الشرائح المستندة إلى طبقة أقل مرونة من شرائح المستخدم؛ ومع ذلك، يمكنك تحويل ("ترقية") شريحة مستندة إلى طبقة إلى شريحة مستخدم. راجع تحويل الشرائح الآلية والشرائح المبنية على طبقات إلى شرائح للمستخدم.

  1. حدد طبقة من لوحة Layers.
  2. اختر Layer >‏ New Layer-based Slice.
ملاحظة:

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

تحويل الشرائح الآلية والشرائح المبنية على طبقات إلى شرائح للمستخدم

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

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

  1. باستخدام أداة Slice Select ، حدد شريحة أو أكثر لتحويلها.
  2. انقر فوق Promote في شريط الخيارات.

عرض الشرائح وخياراتها

يمكنك عرض الشرائح في Photoshop ومربع الحوار Save For Web. بإمكان الخصائص التالية أن تساعدك على تحديد الشرائح والتمييز بينها:

Slice lines

تحديد حدود الشريحة. تشير الخطوط المتصلة إلى أن الشريحة هي شريحة مستخدم أو مبنية على طبقة؛ تشير الخطوط المنقطة إلى أن الشريحة هي آلية.

Slice colors

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

بالإضافة إلى ذلك، يستخدم مربع الحوار Save For Web ضبط الألوان لكي تصبح الشرائح غير المحددة خافتة اللون. عمليات الضبط هذه هي لأغراض العرض فقط ولا تؤثر في لون الصورة النهائي. بشكل افتراضي، يكون ضبط ألوان الشرائح الآلية ضعف المقدار لشرائح المستخدم.

Slice numbers

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

Slice badges

تشير الشارات، أو الأيقونات، التالية إلى حالات معينة.

شريحة المستخدم لها محتوى صورة.

شريحة المستخدم ليس لها محتوى صورة.

الشريحة مبنية على طبقة.

إظهار حدود الشرائح أو إخفاؤها

  1. اختر View‏ > Show‏ > Slices. لإخفاء الشرائح وإظهارها مع عناصر أخرى، استخدم أمر Extras. راجع إظهار الإضافات أو إخفاؤها.

إظهار الشرائح الآلية أو إخفاؤها

  1. قم بأحد الأمور الآتية:
    • حدد أداة Slice Select ، وانقر فوق Show Auto Slices أو Hide Auto Slices في شريط الخيارات.

    • اختر View‏ > Show‏ > Slices. تظهر الشرائح الآلية مع باقي شرائحك.

إظهار أرقام الشرائح أو إخفاؤها

  1. قم بأحد الأمور التالية:
    • في Windows، اختر Edit‏ > Preferences‏ > Guides, Grid, & Slices.

    • في Mac OS، اختر Photoshop > Preferences‏ > Guides, Grid, & Slices.

  2. ضمن Slices، انقر فوق Hide Slice Number.

تغيير لون خطوط الشريحة

  1. في Windows، اختر Edit‏ > Preferences‏ > Guides, Grid, & Slices؛ في Mac OS، اختر Photoshop‏ > Preferences‏ > Guides, Grid, & Slices.
  2. ضمن Slice Lines، اختر لونًا من قائمة Line Color.

    بعد أن يتغيّر اللون، تظهر آليًا خطوط الشريحة المحددة بألوان متباينة.

احصل على مساعدة بشكل أسرع وأسهل

مستخدم جديد؟