يمكنك إنشاء أصول صور JPEG أو PNG أو GIF من محتويات طبقة أو مجموعة طبقات في ملف PSD. ويتم إنشاء الطبقات تلقائيًا عندما تلحق ملحق تنسيق صورة معتمدًا باسم طبقة أو اسم مجموعة طبقات. بشكل اختياري، يمكنك أيضًا تعيين معلمات الجودة والنوع لأصول الصور المُنشأة.

يُعد إنشاء أصول الصور من ملف PSD مفيدًا على وجه التحديد لتصميم ويب متعدد الأجهزة.

فيديو: إنشاء أصول ويب في Photoshop

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

للتعرّف على كيفية إنشاء رسومات الويب باستخدام Adobe Generator، راجع استخراج أصول للويب.

إنشاء أصول صور من طبقات أو مجموعات طبقات

لكي تتمكّن من فهم منشئ أصول الصور بشكل أفضل، يجب أن تأخذ في الاعتبار ملف PSD بسيط (تنزيل من هذا الارتباط) مع التسلسل الهيكلي التالي للطبقات:

Photoshop - إنشاء أصول صور
ملف PSD نموذجي والتسلسل الهيكلي لطبقاته

يتضمّن التسلسل الهيكلي للطبقات في هذا الملف مجموعتي طبقات—Rounded_rectangles وEllipses. وتحتوي كل مجموعة من مجموعات الطبقات هذه على خمس طبقات.

اتبع الخطوات التالية لإنشاء أصول صور من ملف PSD هذا:

  1. مع فتح ملف PSD، حدد File >‏ Generate >‏ Image Assets.
  2. قم بإلحاق ملحقات تنسيقات الملف المناسبة (‎.jpg أو png. أو .gif) بأسماء الطبقات أو مجموعات الطبقات التي تريد إنشاء أصول الصور منها. على سبيل المثال، غيّر أسماء مجموعات الطبقات، Rounded_rectangles‬‏‫ وEllipses إلى Rounded_rectangles.jpg وEllipses.png؛ والطبقة Ellipse_4 إلى Ellipse_4.gif.

ملاحظة:

الأحرف الخاصة : و* غير معتمدة في أسماء الطبقات.

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

Photoshop - أسماء أصول الصور
يتم إنشاء أسماء أصول الصور من أسماء طبقات/أسماء مجموعات طبقات

ملاحظة:

يكون إنشاء أصول الصور ممكّنًا للوثيقة الحالية. ستبقى هذه الميزة متوفرة بعد تمكينها، عند فتح الوثيقة في المرة التالية. لتعطيل إنشاء أصول الصور للوثيقة الحالية، يجب إلغاء تحديد File >‏ Generate >‏ Image Assets.

إنشاء أصول متعددة من طبقة أو مجموعة طبقات

لإنشاء أصول متعددة من طبقة/مجموعة طبقات، افصل ما بين أسماء الأصول باستخدام الفاصلة. على سبيل المثال، يُنشئ اسم الطبقة التالية ثلاثة أصول:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

حفظ الأصول إلى مجلد فرعي

يمكنك أن تختار حفظ أصول الصور المُنشأة من طبقات/مجموعات طبقات معينة في مجلد يقع مباشرةً أسفل مجلد أصول الوثيقة. ضمّن اسم المجلد الفرعي في اسم الطبقة/مجموعة الطبقات؛ على سبيل المثال:

[المجلد الفرعي]/Ellipse_4.jpg 

حالة استخدام تصميم ويب

يُعد إنشاء أصول الصور من ملف PSD مفيدًا على وجه التحديد لتصميم ويب متعدد الأجهزة. خذ في الاعتبار تصميم ويب التالي وبنية طبقته:

تصميم ويب والتسلسل الهيكلي لطبقاته
تصميم ويب والتسلسل الهيكلي لطبقاته

فلنقم باستخراج الأيقونة في الأعلى والصف العلوي لشبكة الصور Global Hotspots كأصول صور:

  • قم بإلحاق ملحقات تنسيق الصور بأسماء الطبقات الملائمة.
Photoshop - إعادة تسمية الطبقات/مجموعات الطبقات الملائمة
Photoshop - إعادة تسمية الطبقات/مجموعات الطبقات الملائمة

إعادة تسمية الطبقات/مجموعات الطبقات الملائمة

ملاحظة:

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

يُنشئ Photoshop الأصول ويحفظها في الموقع نفسه حيث ملف PSD المصدر.

Photoshop - أصول الصور المُنشأة
أصول صور مُنشأة

تحديد معلمات الجودة والحجم

يتم إنشاء أصول JPEG وفق جودة بنسبة 90% بشكل افتراضي. ويتم إنشاء أصول PNG كصور 32 بت بشكل افتراضي. أما أصول GIF فيتم إنشاؤها بواسطة شفافية ألفا الأساسية.

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

معلمات خاصة بأصول JPEG

  • أضف جودة الإخراج المطلوبة كلاحقة لاسم الأصل: jpg.(1-10) أو jpg.(1-100%). على سبيل المثال:
    • Ellipse_4.jpg5
    • Ellipse_4.jpg50%
  • أضف حجم صورة الإخراج المطلوبة (نسبي أو بالتنسيقات المعتمدة: بكسل وبوصة وسنتيمتر ومليمتر) كبادئة لاسم الأصل. يقوم Photoshop بتغيير مقياس الصورة وفقًا لذلك. على سبيل المثال:
    • 200% Ellipse_4.jpg
    • 300 x 200 Rounded_rectangle_3.jpg
    • 10in x 200mm Rounded_rectangle_3.jpg

ملاحظة: تذكّر أنه عليك إضافة حرف مسافة بين البادئة واسم الأصل. إذا كنت تريد تحديد الحجم بالبكسل، فيمكنك حذف الوحدة. على سبيل المثال، 300 x ‏200.

ملاحظة:

كما تم توضيحه، يمكنك الجمع ما بين وحدات وبكسلات مختلفة مع تحديد حجم صورة الإخراج المطلوبة. على سبيل المثال، يُعد 4in x 100 Rounded_rectangle_3.jpg اسم طبقة صالحًا لإنشاء الأصول.

معلمات خاصة بأصول PNG

  • أضف جودة الإخراج المطلوبة كلاحقة لاسم الأصل: 8 أو 24 أو 32. على سبيل المثال:
    • Ellipse_4.png24
  • أضف حجم صورة الإخراج المطلوبة (نسبي أو بالتنسيقات المعتمدة: بكسل وبوصة وسنتيمتر ومليمتر) كبادئة لاسم الأصل. يقوم Photoshop بتغيير مقياس الصورة وفقًا لذلك. على سبيل المثال:
    • 42% Ellipse_4.png
    • 300mm x 20cm Rounded_rectangle_3.png
    • 10in x 50cm Rounded_rectangle_3.png

ملاحظة: تذكّر أنه عليك إضافة حرف مسافة بين البادئة واسم الأصل. إذا كنت تريد تحديد الحجم بالبكسل، فيمكنك حذف الوحدة. على سبيل المثال، 300 x ‏200.

ملاحظة:

كما تم توضيحه، يمكنك الجمع ما بين وحدات وبكسلات مختلفة مع تحديد حجم صورة الإخراج المطلوبة. على سبيل المثال، يُعد 4in x‏ 100 Rounded_rectangle_3.png اسم طبقة صالحًا لإنشاء الأصول.

معلمات خاصة بأصول GIF

  • أضف حجم صورة الإخراج المطلوبة (نسبي أو بالتنسيقات المعتمدة: بكسل وبوصة وسنتيمتر ومليمتر) كبادئة لاسم الأصل. على سبيل المثال:
    • 42% Ellipse_4.gif
    • 300mm x 20cm Rounded_rectangle_3.gif
    • 20in x 50cm Rounded_rectangle_3.gif

ملاحظة: تذكّر أنه عليك إضافة حرف مسافة بين البادئة واسم الأصل. إذا كنت تريد تحديد الحجم بالبكسل، فيمكنك حذف الوحدة. على سبيل المثال، 300 x ‏200.

ملاحظة:

كما تم توضيحه، يمكنك الجمع ما بين وحدات وبكسلات مختلفة مع تحديد حجم صورة الإخراج المطلوبة. على سبيل المثال، يُعد 4in x 100 Rounded_rectangle_3.gif اسم طبقة صالحًا لإنشاء الأصول.

لا تتوفر معلمات الجودة لأصول GIF.

إنشاء أسماء طبقات معقّدة

يمكنك تعيين أسماء أصول متعددة مع معلمات أثناء تسمية طبقة لإنشاء الأصول. على سبيل المثال:

120% Delicious.jpg، 42% Delicious.png24، 100x100 Delicious_2.jpg90%, 250% Delicious.gif

يُنشئ Photoshop الأصول التالية من هذه الطبقة:

  • Delicious.jpg (صورة JPG ذات جودة 8 تم تغيير مقياسها إلى 120%)
  • Delicious.png (صورة PNG من 24 بت تم تغيير مقياسها إلى 42%)
  • Delicious_2.jpg (صورة JPG ذات جودة 90% وحجم مطلق من 100x‏100 px)
  • Delicious.gif (صورة GIF تم تغيير مقياسها إلى 250%)

تعيين الإعدادات الافتراضية للأصول

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

  1. أنشئ طبقة فارغة في الوثيقة.
  2. ابدأ اسم الطبقة بالكلمة الأساسية الافتراضية. أدخل الآن الإعدادات التي تريد تطبيقها على كل أصول الصور المُنشأة من الوثيقة. على سبيل المثال:

default hi-res/‎

يُنشئ كل أصول الصور في مجلد فرعي مسمى hi-res. على سبيل المثال، [asset_folder]‎/hi-res/Delicious.jpg.

default hi-res/@2x

يُنشئ كل أصول الصور في مجلد فرعي مسمى hi-res. علاوةً على ذلك، فإنه يضيف اللاحقة @2x إلى أسماء الأصول. على سبيل المثال، [asset_folder]‎/hi-res/Delicious@2x.jpg.

default 50% lo-res/

يحفظ أصول الصور التي تم تغيير مقياسها بإنقاصه بنسبة 50% في المجلد الفرعي lo-res تحت مجلد أصول الوثيقة 

default hi-res/@2x + 50% lo-res/

يُنشئ أصلين للصور من طبقة:

  • في المجلد الفرعي hi-res، أصل صورة تمت إضافة اللاحقة @2x إلى اسمه
  • في المجلد الفرعي lo-res، أصل صورة تم تغيير مقياسه بإنقاصه بنسبة 50%

ملاحظة:

يتم تجاوز عوامل تغيير المقياس الافتراضية بواسطة عوامل تغيير المقياس المحددة لطبقات فردية.

تعطيل إنشاء أصول الصور لكل الوثائق

يمكنك تعطيل إنشاء أصول الصور بشكل عام لكل وثائق Photoshop من خلال تعديل Preferences‎.

  1. حدد Edit >‏ Preferences >‏ Plug-Ins.
  2. قم بإلغاء تحديد Enable Generator.
  3. انقر فوق OK.

ملاحظة:

لا يتوفر أمر القائمة File >‏ Generate عند تعطيل إنشاء الصور من Preferences. يمكنك إعادة تمكين الميزة مرة أخرى في مربع الحوار Preferences .

الأسئلة المتداولة

هل أحتاج إلى تعيين أسماء أصول فريدة؟

يجب أن تكون أسماء الأصول فريدة على مستوى الوثيقة.

ما هو مستوى الجودة الافتراضي الذي يتم إنشاء أصول الصور وفقاً له؟

يتم إنشاء أصول JPG وفق جودة بنسبة 90% بشكل افتراضي. ويتم إنشاء أصول PNG كصور 32 بت بشكل افتراضي. أما أصول GIF فيتم إنشاؤها بواسطة شفافية ألفا الأساسية.

هل يُنشئ Photoshop أصول الصور من طبقات ذات شفافية وتأثيرات أخرى؟

نعم. تنعكس الشفافية والتأثيرات الأخرى في الأصول الناشئة من تلك الطبقة. ومع ذلك، ستتم تسوية مثل هذه التأثيرات في الأصول المُنشأة.

كيف يتم إنشاء أصول صور من محتويات طبقات ترشح من قماش الرسم؟

يتم إرفاق الأصول بحدود المستند. إذا كان ثمة صورة لا تقع ضمن حدود المستند، فلا يقوم Generator بإنشاء أصول الصورة المقترنة بها.

هل الفاصلة هي الحرف الفاصل الوحيد المسموح به بين أسماء أصول الصور؟

بالإضافة إلى الفاصلة (,)، يمكنك استخدام رمز علامة الجمع (+) كحرف فاصل بين أسماء أصول الصور. على سبيل المثال:

42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%

هو نفسه:

42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%

فيديو: إنشاء مشروع Edge Reflow من Photoshop Generator

فيديو: إنشاء مشروع Edge Reflow من Photoshop Generator
يوضح هذا الفيديو كيفية إنشاء تخطيط ويب يستجيب لأحجام شاشة تتراوح من 320 بكسل إلى أكثر من 1,000 بكسل عرضًا.
Chris Converse

تم ترخيص هذا العمل بموجب الترخيص العام غير المعدل الخاص بالإسناد وعدم التجارة والمشاركة الإصدار 3.0 ‏من ‏‏Creative Commons‏‏  إن بنود Creative Commons لا تشمل منشورات Twitter™‎ وFacebook.

إشعارات قانونية   |   سياسة الخصوصية على الإنترنت