استخراج فوتوشوب: إنتاج الرسومات المتنقلة يذهب على Afterburner

01 من 08

ما هو استخراج الأصول

إنشاء شركات في برنامج فوتوشوب.

تضيف ميزة Extract Assets الجديدة في Photoshop CC 2014 أداة احترازية بعد ذلك على سير العمل الممهد بخلاف ذلك لإنشاء صورة لتصميم الويب سريع الاستجابة (RWD). دعونا نلقي نظرة على كيفية قيام أمر Extract Assets بتخفيض مجموعة صفحات الويب بسرعة إلى أصول جاهزة للتجميع في بضع دقائق.

لنبدأ بسؤال واضح: ما هو أصل الأصول؟

بعبارة بسيطة ، تعتبر Extract Assets ميزة جديدة في Photoshop توفر ميزة Photoshop's Generator بواجهة تساعد على أتمتة عملية إنشاء أصول التصوير لتصميم الويب والشاشة من ملفات Photoshop. يسمح لك الأمر Extract Assets بتعريف الطبقة أو الطبقات التي تريد إنشاء أصول لها وحجمها الفعلي وتنسيق الملف والموقع المحفوظ على القرص. هذه الميزة غير مخصصة للنص ما لم تكن النية تحويل النص إلى صورة نقطية ، وهي في الحقيقة ليست فكرة جيدة.

هيا بنا نبدأ.

02 من 08

افتح ملف Photoshop .psd

نبدأ مع شركات صفحات الويب أعدت في برنامج فوتوشوب.

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

03 من 08

طريقتان لاستخراج الأصول

يمكن العثور على أصول الاستخراج في قائمة ملف أو بالنقر بزر الماوس الأيمن فوق طبقة.

بخلاف الإنشاء ، الذي يقوم أيضًا باستخراج الكائنات من خلال إضافة امتداد رسومي إلى اسم الطبقة ، يستخدم Extract Assets واجهة يمكن الوصول إليها بالنقر بزر الماوس الأيمن فوق طبقة أو تحديد طبقة واختيار File> Extract Assets .

04 من 08

واجهة الأصول استخراج

مربع الحوار استخراج الأصول.

مربع الحوار Extract Assets بديهية إلى حد ما. تظهر لك الطبقة أو التحديد المراد استخراجها. فوقها يظهر لك حجم الملفات و تحتها هو التحكم الذي يسمح لك بالتكبير والتصغير على الكائن. الجانب الأيمن من مربع الحوار هو مكان حدوث السحر. تسمح لك الأزرار الأربعة الموجودة في الجزء العلوي بتحديد دقة / حجم الكائن. يعرض لك الشريط التالي الطبقة المحددة ويسمح النقر فوق علامة + بإخراج الطبقة المحددة بتنسيق آخر أيضًا. يزيل Trash Ca n الطبقة من قائمة الانتظار. في الشريط التالي لأسفل ، يمكنك اختيار نوع الملف ويمكنك ضبط العرض والارتفاع لصورة الإخراج.

05 من 08

استخراج صورة SVG

استخراج صورة svg.

لا يتعامل Photoshop مع صور svg بشكل جيد ، ولا تستطيع المستعرضات والأجهزة عرض صورة Illustrator. وقد أدى ذلك إلى ارتفاع ملفات svg المستخدمة في الأعمال الفنية المتجهة مثل شعار Illustrator الموضح هنا. كونها متجهة ، فإن حلها هو جهاز مستقل بمعنى أنه يمكن تحجيمها دون فقدان التفاصيل أو الصورة. لتحويل كائن Illustrator الذكي إلى svg ، حدد svg من القائمة المنسدلة وانقر فوق Extract .

06 من 08

عملية استخراج الأصول

يتم وضع الصور في مجلد في نفس موضع الصورة .psd.

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

07 من 08

زر الإعدادات هو أفضل صديق جديد

استيعاب دقة الجهاز.

يؤدي النقر فوق الزر " إعدادات" إلى فتح مربع حوار "إعدادات" مفيد بشكل جدي. الإعدادات على اليسار هي عوامل التحجيم. ما يفعلونه هو إنشاء نسخ مختلفة من الصورة التي سيستخدمها مطوّر البرامج في استعلامات الوسائط لاستهداف دقة شاشة جهاز معين. على سبيل المثال ، سيتم استهداف الإصدار 3x بشاشة iPhone أو iPad Retina بينما سيتم توجيه عامل 1.25 على جهاز Android. تضاف اللاحقة إلى نهاية اسم الملف للسماح للمطوِّر بتعريف الصورة التي سيتم استخدامها في استعلام الوسائط بسهولة. بمجرد الانتهاء ، انقر فوق الزر " موافق" وسوف تضيء اختياراتك في منطقة استخراج الأصول في مربع الحوار. يمكنك أيضًا الوصول إلى الإعداد من خلال النقر على رمز الترس في منطقة Extract Assets على الجانب الأيسر من الواجهة

08 من 08

الانتهاء حتى

يتم استخراج صور متعددة مع تنسيقات مختلفة ودقة.

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