آداب الفوتوشوب لتصميم الويب سريع الاستجابة

لقد مرت خمس سنوات تقريبًا منذ إطلاق Photoshop Etiquette ، مما يجعله رسميًا أثرًا على الويب. يمكن أن يحدث الكثير على الويب في غضون بضع سنوات ، وقد أوضحت السنوات الخمس الماضية ذلك بشكل أفضل من معظم.

في عام 2011 ، كان الجميع يبلل أقدامهم بتصميم ويب سريع الاستجابة. بدأ نقد سير عمل comp-to-HTML التقليدي ، ومنذ ذلك الحين ، رأينا عددًا لا يحصى من البدائل. كانت Style Tiles ، و Style Prototypes ، و Visual Inventories ، و Element Collages ، وأدلة النمط ، وحتى التصميم في المتصفح كلها طرقًا مناسبة لتصميم أجهزة متعددة. مع التحول من التصميم المستند إلى الصفحة إلى بناء نظام التصميم ، إنه حقًا وقت مثير.

مزيد من القراءة على SmashingMag:

• تصميم لشبكية العين في برنامج فوتوشوب
• الرسوم المتحركة المتقدمة في برنامج فوتوشوب
• سير عمل أصول Photoshop Retina
• مولد نقاط توقف الصورة المستجيبة

كان هناك أيضًا انفجار في الأدوات التي تحاول جعل سير العمل سريع الاستجابة أكثر كفاءة. جعلت تطبيقات مثل Webflow و Macaw تصور نقطة التوقف قابلاً للفهم من أجل تجنب الكود. انتقل العديد من المصممين من Photoshop باعتباره العمود الفقري إلى Sketch أو Affinity Designer أو ما شابه. اعتمد آخرون تطبيقات مثل Keynote للنماذج الأولية.

هل "الإتيكيت" لا يزال ذا صلة؟

مع بدائل Photoshopping الثقيلة التي قد نكون على دراية بها ، من العدل أن نتساءل عما إذا كنا لا نزال بحاجة إلى آداب التعامل. من أجل هذه المقالة ، سنعرف آداب السلوك على أنها نقل الملفات بطريقة منظمة وواضحة ويمكن تمييزها. يأتي التصميم سريع الاستجابة عادةً مع الكثير من القطع المتحركة ، من صور @ 2x وملفات CSS المتسلسلة والمزيد. مع ما يبدو أنه يجب القيام به أكثر من أجل نشر موقع ويب ، فإن الكفاءة هي بلا شك أولوية عالية ، إذا أردنا أن نكون مربحين.

غالبًا ما يكون التنظيم السيئ والاتصال المقنَّعين على أنه الكفاءة هو نتاج الاندفاع لشحن المشروع. مع قيام Photoshop بأدوار مختلفة في سير العمل لدينا ، تعد الطبقات والملفات المصدرة أهدافًا سهلة لقطع الزوايا. تبقى الحقيقة: أي شيء يستحق القيام به يستحق القيام به بشكل جيد.

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

ما الجديد في آداب الفوتوشوب؟

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

الدليل مقسم إلى الأقسام التالية:

• تنظيم الملف
• هيكل الطبقة
• تصدير الأصول
• اكتب التنفيذ
• تطبيق التأثير
• فحص الجودة

سيشاهد الأشخاص المطلعون على الموقع الكثير من الإرشادات المألوفة ، مثل النصائح المثالية مثل "تسمية طبقاتك" و "ملفات الأسماء بدقة" ، كل محاولة لتخليص الأرض من ممارسات مثل "نسخة الطبقة 5" و "العميل- final-v3.psd '، على التوالي. إذا تعمقت قليلاً ، ستجد وفرة من الموارد سريعة الاستجابة مرتبطة بإرشادات مختلفة ، وبعض النصائح لتصميم أجهزة متعددة.

1. توحيد PSDs الخاص بك

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

2. العمل بشكل تعاوني

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

3. لا تصمم للجهاز

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

4. تكون غير مدمرة

مع تزايد التنفيذ والدعم لـ SVG ، من المهم للمصممين الحفاظ على أصول المتجهات في Photoshop وعدم تسويتها. يتيح لك Photoshop الآن حفظ صور SVG ، مما يمنحنا سببًا إضافيًا لعدم إتلاف وحدات البكسل الخاصة بنا.

5. كن على دراية بدقة الشاشة

عند الحديث عن SVG ، فقد أصبح حقًا طريقة رائعة لخدمة أحد الأصول التي يمكن أن تتكيف مع أي حجم ولا تفقد الدقة. أصبح وجود سير عمل أصول Retina ، سواء أكان SVG أو @ 2x / @ 3x ، جزءًا من سير عمل ممارس سريع الاستجابة.

6. ضغط

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

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

يغذيها المجتمع

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

في أعقاب عدم دقة الترجمة من Google ، هناك أيضًا دعوة مفتوحة للترجمة من قبل متطوعين من المجتمع.

إنه لمن المثير أن نرى كيف كان لبرنامج Photoshop Etiquette صدى لدى العديد من المنظمات والأفراد. كيف يمكن أن تساعدك أنت وفريقك؟