تحضير الصور للأجهزة النقالة

لا يعتبر التصوير للجوال دائمًا ما يبدو

أصبح الأمر شائعًا بشكل متزايد بالنسبة إلى محترفي الرسومات ليس فقط إظهار عملهم في الطباعة ولكن أيضًا على الويب والأجهزة مثل أجهزة 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 ، حدد Image> Image Size للتحقق من أبعاد الصورة ودقتها. من الواضح أن الصورة التي يبلغ حجمها 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 - الأنسب للصورة. إذا كان حجم الملف يمثل مصدر قلق ، فيمكنك أيضًا تقليل إعدادات الجودة.
• حجم الصورة: يمكنك تغيير الأبعاد المادية للصورة.
• حجم Canvas: يمكنك تغيير الأبعاد الفعلية لقماش الصورة.
• البيانات الوصفية: يمكنك إضافة حقوق النشر ومعلومات الاتصال الخاصة بك إلى البيانات الوصفية للصورة.

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

03 من 05

كيفية تحضير الصور للأجهزة المحمولة في Sketch 3 من الترميز البوهيمي

اكتسب Sketch 3 ، وهو تطبيق يعمل على نظام Macintosh فقط من Cold Coding ، شهرة بشكل سريع بين مصممي UX و UI نظرًا لتركيزه الشديد على تصميم الويب والتطبيق. في الواقع ، فوتوشوب ، في نواح كثيرة ، هو في موقف غريب من الاضطرار للعب "اللحاق" مع رسم.

لتحضير صورة للجوّال في Sketch ، حدد الصورة على لوح الرسم وانقر فوق الزر جعل التصدير في أسفل لوحة 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. للوهلة الأولى ، قد يبدو هذا أكثر قليلاً من القمة لكن تذكر القاعدة الذهبية لتدريج الصور: من الأفضل أن تتدرج من نطاقك.

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