أصبح الأمر شائعًا بشكل متزايد بالنسبة إلى محترفي الرسومات ليس فقط إظهار عملهم في الطباعة ولكن أيضًا على الويب والأجهزة مثل أجهزة iPhone و iPad وأجهزة Android وأجهزة Android اللوحية. على السطح ، يمكن اعتبار ذلك "شيئًا جيدًا" نظرًا لأن الوسائط التي يظهر بها عملنا تتوسع إلى شاشات رقمية. الجانب السلبي هو العدد الهائل للشاشات والعدد المربك لدقة الشاشة. ليس من غير المألوف أن نسمع المحترفين المخضرمين يتساءلون عما حدث للأيام التي كانت فيها صورة TIFF بدقة 300 نقطة في البوصة في تنسيق CMYK هي القاعدة. يا للأيام الخوالي!
تلك الايام قد انتهت. علينا الآن أن نؤكد حقيقة أن صورة 200 200 قد تظهر بشكل جيد على جهاز واحد ومع ذلك تظهر ربع الحجم على حجم آخر وثلاثة أرباع على آخر. كل ذلك يأتي حقيقةً إلى "سباق سباق التسلح" الذي تخوضه الشركات المصنعة للأجهزة أثناء محاولتها تحويل المزيد من البيكسل إلى شاشة أكثر من منافسيها.
هذا يقودنا إلى ما نسميه "صعود اللواحق". اللاحقات هي تلك الأشياء - @ 2x ، @ 3x - مسجلة على اسم صورة. فهي في الأساس ، على سبيل المثال ، تضع الصورة الصحيحة في المكان المناسب على الجهاز الصحيح. ثم يصبح أفضل.
يتضمن الكثير من عملنا العمل مع الأيقونات ، ومع ظهور حركة التصميم المسطح ، يتم إنشاء هذه الأشياء في تطبيقات الرسم المتجه مثل Illustrator و Sketch. المشكلة هي أن الأجهزة لا يمكنها ببساطة عرض ملفات .ai أو .eps. يجب تحويلها إلى Scalable Vector Graphics ، وبناءً على التطبيق المستخدم لإنشاء الرموز ، قد لا يكون هناك خيار SVG.
ثم يصبح أفضل.
هناك فئة جديدة من البرامج - تطبيقات النماذج الأولية - التي أصبحت نقطة التجميع قبل طرح الصور والرموز الخاصة بك إلى الأجهزة ولديها خصائصها الخاصة كذلك.
ينتقل هذا البرنامج التعليمي بين Photoshop و Sketch للرسومات ويستخدم Adobe Experience Design لإظهار بعض نقاط الألم بين فكرتك ونشرها في نهاية المطاف. هيا بنا نبدأ.
01 من 05كيفية تحضير الصور للأجهزة النقالة في أدوبي فوتوشوب
الخطوة الأولى في هذه العملية هي معرفة جهازك أو أجهزتك المستهدفة. في هذه الحالة ، ستستهدف iPhone 6 الذي تبلغ مساحته 375 بكسل وعرضه 667 بكسل. يتطلب التصميم أن تكون الصورة بعرض الشاشة.
تم تصوير الصورة التي سيتم استخدامها داخل كاتدرائية برن مينستر في بيرن ، سويسرا. بمجرد فتح الصورة في Photoshop ، اختر الصورة> حجم الصورة للتحقق من أبعاد الصورة ودقتها. من الواضح أن الصورة التي تبلغ 3156 × 2592 بدرجة وضوح مقدارها 300 نقطة في البوصة وحجم الملف البالغ 23.4 ميغابايت لن تعمل ببساطة.
داخل مربع الحوار Image Size ، تقليل الدقة إلى 100 نقطة في البوصة. قم بهذا أولاً لأن أبعاد الصورة ستتغير أيضًا. مع ضبط الدقة ، قم بتغيير العرض إلى 375 بكسل. إذا قمت بالتحقق من بيانات حجم الصورة ستلاحظ أن الصورة تقلصت من 23.4 ميجا بايت إلى 338 كيلو بايت أكثر ملائمة للجوّال. انقر فوق موافق لقبول التغيير وإغلاق مربع الحوار Image Size.
مواصلة القراءة أدناه
02 من 05كيفية استخدام مربع حوار "تصدير باسم …" في Adobe Photoshop
بمجرد أن تصبح الصورة جاهزة للتصدير ، اختر "تصدير> تصدير باسم …" لفتح مربع الحوار تصدير باسم.
يعد مربع الحوار هذا إضافة حديثة إلى Photoshop ويستبدل مربع الحوار "حفظ للويب" الذي استخدمته لسنوات. إذا كنت لا تزال بحاجة إليها ، فيمكنك العثور عليها في القائمة المنسدلة تصدير. هو ، لأسباب واضحة ، المعروفة الآن باسم "تصدير للويب (تراث)". إذا كانت هذه هي زيارتك الأولى إلى مربع الحوار هذا ، فإليك جولة مختصرة:
- بحجم: يقوم هذا العمود بتعيين حجم إخراج الصورة. الجانب المثير للاهتمام في هذه المنطقة هو أنها ستعمل على تكبير الصورة ، ولكن الصورة لن تظهر على أنها "ضبابية" على الجهاز بسبب العدد الهائل من وحدات البكسل على شاشة الجهاز.
- 1X: انقر فوق الانتظار هذا وسيتم تقديم عدد من الأحجام. ترتبط فئات 1x و 2 x و 3 x تقليديا بأجهزة Hi Dpi من Apple ، وستقوم هذه الأجهزة بالإضافة إلى عدد قليل آخر بإعداد الصور لأجهزة Android.
- لاحقة: سيظهر هذا الاختيار حجمك ولكن سيتم عرضه كـ 2x أو يتم اختيار الحجم. هذه اللاحقة ستضاف إلى اسم الصورة.
- علامة +: انقر فوق هذا لإضافة أحجام مختلفة للإخراج. في هذه الحالة ، انقر فوقه مرتين واختر 2x و 3 x من القائمة المنسدلة. سيغطي هذا عمليا أي جهاز iOS.
- سلة المهملات: انقر فوق هذا وتتم إزالة الخيار من المجموعة.
- إعدادات الملف: اختر التنسيق - jpg أو png أو gif أو svg - الأنسب للصورة. إذا كان حجم الملف يمثل مصدر قلق ، فيمكنك أيضًا تقليل إعدادات الجودة.
- حجم الصورة: يمكنك تغيير الأبعاد المادية للصورة.
- حجم قماش: يمكنك تغيير الأبعاد المادية لقماش الصورة.
- البيانات الوصفية: يمكنك إضافة حقوق الطبع والنشر ومعلومات الاتصال الخاصة بك إلى البيانات الوصفية للصورة.
عند الانتهاء ، انقر فوق الزر تصدير الكل. سيتم سؤالك أين تريد وضع الصور. عادة جيدة للتطوير هو النقر على زر مجلد جديد وإنشاء مجلد للاحتفاظ بالصور المصدرة. عند النقر فوق تصدير ، سيتم عرض الصور في المجلد.
مواصلة القراءة أدناه
03 من 05كيفية تحضير الصور للأجهزة المحمولة في Sketch 3 من الترميز البوهيمي
اكتسب Sketch 3 ، وهو تطبيق يعمل على نظام Macintosh فقط من Cold Coding ، شهرة بشكل سريع بين مصممي UX و UI نظرًا لتركيزه الشديد على تصميم الويب والتطبيق.في الواقع ، فوتوشوب ، في نواح كثيرة ، هو في موقف غريب من الاضطرار للعب "اللحاق" مع رسم.
لتحضير صورة للجوّال في Sketch ، حدد الصورة على لوح الرسم و انقر فوق الزر Make Exportable الموجود في أسفل لوحة Properties. سيؤدي هذا إلى فتح مربع الحوار Export. انقر على علامة + لإضافة الإصدارين 2x و 3 x وأضف اللواحق أيضًا. التنسيقات المتوفرة هي PNG و JPG و TIF و PDF و EPS و SVG. في هذه الحالة ، اختر JPG. انقر فوق الزر تصدير واستهداف أو إنشاء مجلد للاحتفاظ بالصور المختلفة التي تم تصديرها.
04 من 05لماذا تحتاج إلى إنشاء ثلاثة (أو أكثر) إصدارات من الصورة
في كثير من النواحي ، فإن سوق الهاتف المحمول هو "الغرب المتوحش" من القرارات وحجم واحد بالتأكيد لا يناسب الجميع. في المثال الموضح أعلاه من Adobe Experience Design ، يتم وضع الصورة على لوحين من اللوحات الفنية على iPhone 6 ولوحة فنية على جهاز Android. لاحظ كيف يبدو أن الإصدار 1x على اليسار نصف الحجم. هذا هو بالضبط كيف ستظهر الصورة على iPhone 6 مع شاشة شبكية العين. النسخة 2x تتناسب تمامًا مع تشغيل إصدار Android من الشاشة. اختيارك هو إما قياس الصورة أو تصدير الصورة من Photoshop بحجم مختلف.
مواصلة القراءة أدناه
05 من 05اختبار في وقت مبكر ، اختبار في كثير من الأحيان ، والثقة لا شيء ، والثقة لا أحد ، وخاصة نفسك
ما تحتاج إلى فهمه هو مجرد بداية العملية. عرض عملك على العديد من الأجهزة التي يمكن اعتبارها جزءًا حيويًا من سير العمل. يجب أيضًا أن تكون مدركًا أن هذه ليست سوى الخطوة الأولى في عملية إنشاء أصول الرسومات لتطبيق أو لمشاريع ويب الجوال.
يعد استخدام تطبيقات النماذج طريقة رائعة للكشف عن نقاط الألم ولكن هذه الأصول نفسها تحتاج إلى الإخراج للاستخدام من قبل المطور. في العديد من الحالات ، ستكون الأبعاد المادية للأصول ، بما في ذلك الرموز ، ضخمة ماديًا وليست بتنسيق svg لكن png. للوهلة الأولى ، قد يبدو هذا أكثر قليلاً من القمة لكن تذكر القاعدة الذهبية لتدريج الصور: من الأفضل أن تتدرج من نطاقك.
يتمثل الهدف الأساسي في العمل عن كثب مع مطور البرامج واستخدام برامج النماذج الأولية كطريقة لإظهار نية التصميم الخاصة بك. ومع ذلك ، في نهاية المطاف ، يجب أن تكون هذه الأصول نفسها جاهزة للمنتج النهائي وأن لمطوّر البرامج لديك قدرة أفضل على التعامل مع احتياجاتك أو احتياجاتك.
