إذا كان هناك جانب واحد من العمل مع Illustrator فأنا لا أستمتع به فعلاً فهو تحويل الخط إلى صور svg للجوال أو الويب. باستخدام القائمة Export> Export As ، ولكي نكون صادقين بوحشية ، فإن ميزة Save For Web - Export> Save For Web - لم تكن سهلة الاستخدام.
تحويل الرسم إلى تنسيق .svg فتح مربع حوار مرعب إلى حد ما ، بالنسبة للأشخاص الجدد إلى سير العمل هذا ، عرض مجموعة مربكة من الخيارات ناهيك عن حقيقة وجود عدد من تنسيقات .svg وكان واحد منهم فقط شكل. بمجرد أن تعتاد على سير العمل هذا لم تكن صفقة كبيرة ، ولكن منحنى التعلم كان حادًا.
لقد تغير كل ذلك مع ميزة Export For Screens الجديدة - Export> Export for Screens - ولوحة Asset Export التي تم تقديمها إلى Illustrator CC 2015 في يونيو 2016. في هذه "كيف" ، سأوضح لك كيفية استخدام كل من الميزات. هيا بنا نبدأ.
01 من 04
كيفية الوصول للتصدير للشاشات في Adobe Illustrator CC 2015
بعد أن كنت مستخدمًا في Illustrator منذ Illustrator 88 ، أظن أنك تستطيع أن تفهم عزوفي عن اعتبار Illustrator أداة تصميم جادة لواجهات ومشاريع الويب والمحمول.
عندما تم عرض اللوحات الفنية في إصدار CS4 لعام 2008 ، كنت أعتقد أنه إضافة مثيرة للاهتمام للتطبيق. عندما شاهدت لأول مرة ميزة Save For Web التي تم إيقافها الآن في Illustrator ، مرة أخرى ، وجدت أنها مثيرة للاهتمام ولكنني وجدت نفس الميزة في Adobe Fireworks كانت أكثر توافقاً مع رسومات الويب مقارنةً بـ Illustrator.
مع ظهور نهج المحمول الأول للتصميم والاعتماد المتزايد على صور SVG لمشاريع المحمول ، كان Illustrator أداة "اذهب إلى" لـ SVG وأصبح نقطة توقف مهمة في سير عمل تصميم واجهة المستخدم.
ومع ذلك ، إذا كنت بحاجة إلى تصدير أصول للجوّال ، فإن Sketch 3 و Photoshop CC 2015 هما أداتي المفضلة. أدخل Illustrator القائمة في حزيران 2016 باستخدام قائمة Export for Screens الأنيقة.
في المثال أعلاه ، لديّ شاشتين مخصصتين لجهاز iPhone وهما على لوحات فنية منفصلة باسم "الصفحة الرئيسية" و "الأماكن". لإخراجها ، قمت باختيار File> Export> Export for Screens. يفتح مربع الحوار Export for Screens.
02 من 04
كيفية استخدام التصدير للحوار شاشات مربع
عندما يظهر مربع الحوار ، انقر فوق كل لوح رسم ليتم تحديده. وسوف تقوم بعد ذلك بوضع علامة اختيار. يمكنك أيضًا النقر نقرًا مزدوجًا فوق اسم لوح الرسم لتحديده وتغييره. هذا أمر جيد لمعرفة ما إذا كانت اللوحات الفنية الخاصة بك تحمل اسم "Artboard 1" و "Artboard 2" والتي ، بصراحة ، لا تخبرك بأي شيء.
لديك ثلاثة اختيارات في منطقة Select:
- الكل: يصدر هذا الخيار كل لوح رسم في المستند كملف منفصل.
- نطاق: أدخل نطاقًا من ألواح الرسم التي سيتم تصديرها. هذا مفيد بشكل خاص للمشاريع مع بضع عشرات اللوحات الفنية.
- المستند الكامل: حدد هذا وسيتم ملء كل ألواح الرسم في مستند واحد.
تتيح لك منطقة Export To اختيار المجلد الوجهة للإخراج. سيكون المجلد الافتراضي هو الموقع الحالي لمستند Illustrator.
التنسيقات هي المكان الذي يحدث فيه السحر. ستلاحظ وجود ثلاثة رموز - iOS. Android و Gear. الأولى والثانية لا تحتاج إلى شرح. يفتح رمز الترس إعدادات التنسيق التي تتيح لك التحكم في كيفية تحسين كل من تنسيقات الملفات في القائمة. هذه الإعدادات هي "تنسيق معين" وبمجرد الانتهاء من إجراء التغييرات ، انقر فوق الزر حفظ الإعدادات وسيتم تطبيق تلك التغييرات على التنسيقات التي سيتم إخراجها.
بمجرد اختيار iOS أو Android ، ستتغير القائمة لتشمل جميع القرارات المتاحة على هذا النظام الأساسي. ستعرض قائمة iOS عوامل التحجيم لشاشة Retina وستتضمن مجموعة Android مقاييس تتراوح من .75x إلى 4x والتي تستوعب جميع أجهزة Android.
إذا كان هناك تنسيق يوضح أنك تريد إزالته ، فانقر فوق "x". إذا كان هناك واحد تريد إضافته ، فانقر على الزر + إضافة مقياس.
عند الانتهاء ، انقر فوق الزر Export Artboard وسيظهر لك شريط التقدم عند الانتهاء من العملية.
03 من 04
استخدام ملفات Export for Screens من Adobe Illustrator CC 2015.
عند التحقق من نتائج Export for Screens ، ستكتشف أن Illustrator قد قام بإصدار نسخة مسطحة لكل شاشة. على السطح ، قد يبدو هذا ضعيفًا بعض الشيء ، خاصةً إذا كنت تتوقع قيام Illustrator بتصدير كل الأجزاء والقطع كصور.
إذا تراجعت و فكرت في الأمر للحظة ، فهذا هو بالضبط ما تحتاج إليه لأنك تستطيع استخدام هذا الإخراج في تطبيق النماذج مثل Adobe Experience Design أو Principleformac أو Atomic.io أو UXPin أو أي تطبيق آخر للنماذج
في هذا المثال ، أستخدم Adobe Experience Design (XD) لإنشاء نقرة بسيطة. كانت الخطوة الأولى في العملية هي اختيار حجم iPhone 6 الذي يطابق أبعاد واجهة Illustrator
عند فتح الواجهة ، حددت أداة Artboard ونقرت مرة واحدة على لوح اللصق لإضافة لوح رسم آخر. قمت بعد ذلك بتسمية "Home" و "Places" ، وحدد كل لوح رسم واستوردت صورة png من Illustrator إلى لوح الرسم.
لإنشاء "hotspots" للنقر إلى الأعلى ، رسمت مستطيلاً على زر Explore في الشاشة الرئيسية وقمت بتعيين قيم التعبئة والحد الخاصة بها إلى لا شيء بإلغاء تحديد هذه الخصائص في لوحة Properties. لقد فعلت الشيء نفسه مع زر "العودة" في صفحة الأماكن.
لإضافة Interactivity ، اخترت نمط Prototype ثم قمت بالنقر على "hotspot". بعد ذلك قمت بسحب السهم - المسمى بسلك - إلى صفحة الأماكن وقمت بتعيين هدف النقل في الأماكن ، والحركة إلى دفع اليسار ، والتخفيف للتخفيف ، ومدة الانتقال إلى 0.6 ثانية.
كررت هذه الخطوة مع نقطة الاتصال في صفحة الأماكن. كان الاختلاف الوحيد هو تعيين الانتقال إلى دفع اليمين. عندما قمت بالنقر فوق الزر "تشغيل" ، قمت باختبار النموذج الأولي الخاص بي.
04 من 04
كيفية استخدام لوحة أصل التصدير في Adobe Illustrator CC 2015
بالإضافة إلى قائمة Save for Screens ، قامت Adobe أيضًا بإضافة لوحة جديدة - Asset Export - التي قامت بإزالة نقطة ألم كبيرة في سير عمل تصميم واجهة المستخدم (UI Design).
كانت نقطة الألم الرموز. Illustrator هو تطبيق رسم متجه كبير ولكن للإخراج ، دعنا نقول 10 أيقونات ، على صفحة تحتوي على 40 أو 50 منها مطلوب حفظ كل واحدة كصورة SVG. هذا يتطلب حتمًا وقتًا أكثر من المعتاد بفضل الرحلات المتتالية إلى لوحة SVG. نقطة الألم هذه الآن شيء من الماضي.
يمكن العثور على هذه اللوحة الجديدة في Window> Asset Export. عند فتح اللوحة ، حدد مادة العرض التي تريد تحويلها إلى SVG أو تنسيق آخر واسحب إلى اللوحة. عندما تحرر الماوس ، تتم إضافة صورة مصغرة للأصل إلى اللوحة. اسم الأصول. استمر في سحب الكائنات إلى اللوحة حتى تنتهي.
حدد كل عنصر في منطقة إعدادات التصدير ، أو حددها كلها بالضغط على مفتاح Shift والنقر على كل منها. حدد التنسيق - في هذا المثال ، اخترت SVG- وانقر على زر تصدير. سيتم إخراج العناصر المحددة كملفات SVG إلى نفس الموقع مثل ملف Illustrator.
وحيث تصبح هذه العملية بأكملها أكثر إتقانا ، لن تضطر إلى استخدام لوحة Asset Export. إذا قمت بالنقر فوق الزر "حفظ عن شاشات" في الجزء السفلي من اللوحة ، يتم فتح مربع الحوار.
وبالعكس ، يمكنك النقر على علامة التبويب الأصول في لوحة Save for Screens للدخول إلى لوحة Asset Export. على سبيل المثال ، إذا كان لديك رمز مخصص على لوح رسم ، فيمكنك فتح لوحة Asset Export في مربع الحوار Save for Screen وسحب هذا العنصر إلى لوحة Asset Export.