أعتقد أن العنوان الأكثر ملاءمة قد يكون "هل لا يزال Photoshop أداة مناسبة لتصميم الطباعة على الويب؟" ولكن هذا يفتقر إلى الجاذبية المثيرة لما سبق.
مثل الكثير منكم ، لقد استخدمت دائمًا Photoshop لإنشاء تركيبات نموذجية لتصميماتي. لطالما أتذكر أنه كان معيار الصناعة والبرامج المفضلة لمعظم المصممين الذين عملت معهم. لقد قضيت أسابيع في تصميم تخطيطات مثالية بالبكسل ، وتجميع العناصر في مجلدات هرمية ووضع علامات على جميع طبقاتي لجعل الانتقال من الصور الرمزية إلى الشفرة أكثر سلاسة قدر الإمكان.
سأكون مليئة بالحماس والطاقة والإثارة التي تشرح تصميمي للمطور ، وتبديل حالات الطبقة داخل وخارج لمحاولة توضيح رؤيتي من خلال برنامج فوتوشوب ولكن سيكون دائمًا خيبة أمل كبيرة حيث تم تحويل تصميم لامعة لامع إلى ما سأراه في المتصفح. بالتأكيد ، سيبدو مثل تصميمي ... وأنا أدرك نوع الخطوط ، لكنه افتقد تلك الحدة التي تذكرتها من مؤلفاتي. لم يكن ذلك أن المطورين لم يرموا ذلك بشكل جيد ، أكثر من أن الطباعة التي قمت بإنشائها في Photoshop لم تترجم إلى شفرة.
عند الاختيار الخطوط هناك أشياء قليلة أكثر أهمية مما إذا كان الخط مقروءًا أم لا. في Photoshop ، هذا ليس مشكلة كبيرة نظرًا لأن كل شيء يبدو رائعًا. لا يهم ما الخط الذي تستخدمه ، في أي حجم أو وزن (في حدود المعقول) لأنه سيعرض بشكل مثالي على الشاشة.
للأسف ، هذا لا يمتد إلى المتصفح. في كثير من الأحيان عند عرض تصميمي في المتصفح ، كانت العلاقات بين العناصر والنوع كلها خاطئة. لا تبدو أحجام الخطوط وارتفاعات الأسطر التي كنت قد نسبتها إلى الأنماط في تركيبة الفوتوشوب كما هي في المتصفح. إذا قمت بتعيين هامش 20 بكسل فوق العنوان في تصميماتي ، فقد تكون هذه المسافة قد تغيرت حيث أن ارتفاع خط الرأس سيكون له تأثير على حجم الهامش ، وهو أمر لن يحدث في Photoshop. عندئذ يجب أن أبدأ عملية طويلة ومملة من "تصميم القرص" اللعين.
ثق بي ليس فقط المطور الذي ينكمش في فكرة مصمم يجلس إلى جواره يطلب منهم "زيادة ارتفاع خط نسخ الجسم بمقدار نقطتين" ثم جعل المطور يقوم بتغيير CSS والالتزام ... أدخل. "في الواقع ، 1 بكسل أصغر" ... أدخل. "ربما كان أفضل كيف كان". إن هذا النوع من التغيير والتبديل في CSS بت بت ، للاطلاع على النتائج في الوقت الفعلي عبر المتصفح ، يستغرق وقتًا طويلاً ولا يفضي إلى الإبداع. سرعان ما سئم المطورون من قضاء يومهم بشكل متكرر في تغيير ما يعتبرونه أصغر التفاصيل التي لن تحدث أي فرق ، ولا يستطيع المصممون التجريب بسرعة وبسهولة لتغيير الخطوط والأساليب لتلك التي ستظهر بشكل أفضل في المتصفح.
للمصممين الذين لديهم فهم CSS ، يمكنك استخدام أدوات مثل الحرائق لإجراء تعديلات التصميم الخاصة بك بشكل فعال في المستعرض ، مع ملاحظة جميع تغييرات CSS في مستند واحد يمكنك تمريرها إلى مطور لتطبيقه. هذا هو نفس الشيء مثل الجلوس مع مطور وعمل تغييرات CSS ولكنه أقل مللًا للمطور وسيسمح أيضًا للمصمم بإجراء مزيد من التجريب مع الأحجام والأنماط قبل اتخاذ القرار. على الرغم من أن هذه أداة جيدة لفحص أجزاء HTML و CSS وتغييرها ، فستفقد أي تغييرات تقوم بها بمجرد تحديث المتصفح ، مما قد يكون مزعجًا للغاية إذا قمت بتغيير الكثير من العناصر ولم يتم تسجيل كل ما لديك التعديلات.
يمكنك استخدام ال Firediff المكونات في لحفظ سجل بجميع التغييرات التي تجريها داخل Firebug ، وهو أمر رائع لأنه يوفر عليك ملاحظة كل تغيير في جدول بيانات منفصل لاحقًا. أكبر مشكلة في هذه الطريقة هي عندما تبدأ في إدخال خطوط الويب في المعادلة حيث يجب تثبيت أي الخطوط المختارة على مجموعة النوع الخاص بك أو أنها لن تظهر في المتصفح. هذا يجعل الأمور أكثر صعوبة وأقل حرية للتجريب بسهولة مع الخطوط المختلفة حيث لا يمكنك تجريب الخطوط بسرعة.
خدمات مثل أعطى القوس باريها اجعل من الأسهل على المصممين العمل مع خطوط الويب وأقوم بكل ما عندي من الطباعة على الإنترنت باستخدامه. يسمح لك بإنشاء عمليات طباعة مطبعية (مثلما تفعل في Photoshop) باستخدام الواجهة المرئية الخاصة به لتعيين الخطوط والأنماط والأوزان والألوان وارتفاع الخط والهامش والحشو والمزيد في الطباعة. أفضل شيء عن استخدام Typecast هو أنه يعمل كل شيء داخل المستعرض بحيث تقوم باتخاذ قرارات حول النوع بالضبط كما سيتم تقديمه للمستخدم. هل لا يبدو خط معين ساخنًا جدًا عند 19 بكسل؟ ارتطامها حتى 20 بنقرة زر واحدة ، ثم العودة إلى 19 قبل أن تستقر في النهاية عند 18 بكسل ، كل ذلك يتم في ثوانٍ بدلاً من ساعات الجلوس مع مطور.
يمكنك استخدام أي خطوط ويب من مجموعاتها البالغ عددها 23000 خطًا ، بما في ذلك خطوط Google و Typekit وأكثر في التراكيب الخاصة بك ، مما يجعل التجريب سريعًا وسهلاً (تم شراؤها مؤخرًا بواسطة Monotype الذين يملكون Fonts.com و Myfonts لذا نتوقع العديد من الخطوط على الطريق قريبا). إن Typecast في رأيي يقدم فكرة عن المرح إلى الطباعة حيث أنه يشجعك على تجربة تنوعات الخط ، والتي ربما لم تكن قد اكتشفتها إذا لم تكن متاحة بسهولة وسهلة للتبادل كما هي.
ميزة أخرى مفيدة للغاية في typecast هي القدرة على عرض وتحرير CSS من النوع الخاص بك. يمكنك إضافة ألوان الخلفية والصور ، أو حالات التحويم ، أو حتى التحولات ببساطة عن طريق تحرير لوحة CSS. عندما تصبح سعيدًا بإنشائك ، يمكنك بسهولة تصدير شفرة CSS وحفظها ، والتي يمكن بعد ذلك تحميلها إلى موقعك أو إرسالها إلى مطور ، ولأن كل شيء قد تم تصميمه في المتصفح ، فإنه سيظهر تمامًا كما تريده.
فوتوشوب ليس معيار الصناعة من أجل لا شيء ، وسوف يكون هناك بعض منكم هناك فرط في التفكير في إسقاط ذلك لتصميم في المتصفح ، بعد كل شيء نحن التصميمات لا المبرمجين. حسنا ، ضع الحقيبة الورقية حيث لا يزال هناك طريقة يمكنك من خلالها إنشاء الطباعة الجميلة باستخدام خطوط الويب في Photoshop. Extensis أنشأت برنامجًا إضافيًا يمكن تثبيته على إصدارات Photoshop CS5 والإصدارات الأحدث التي ستمنحك الوصول إلى جميع WebINK و Google Web Fonts لاستخدامها مجانًا ، مباشرةً داخل Photoshop.
هذا يعني أنه يمكنك استخدام أي من WebINK أو خطوط الويب الخاصة بشركة Google في تركيبات التصميم الخاصة بك كما تفعل مع أي خطوط مثبتة على النظام الخاص بك وسوف يتم عرضها تقريبًا كما يجب أن تظهر في المستعرض. سيعطيك المكون الإضافي حق الوصول إلى WebINK وخطوط الويب من Google في الوقت الحالي ، ولكن على الجانب الإيجابي ، سيقوم تلقائيًا بتحديث الخطوط الجديدة عند إضافتها إلى WebINK ومكتبة Google للخطوط.
مكون إضافي آخر مفيد يساعد في تسهيل الانتقال بين تركيبات Photoshop والمتوافق مع CSS ، وهو المكون الإضافي المجاني المستند إلى السحاب css3ps.com . أحد الأسباب الرئيسية التي يعمل بها العديد من المصممين مع Photoshop هو التحكم الذي لديك على الطبقات وعناصر الشكل. إن القدرة على التجريب بسهولة وبسرعة مع الظل ، والتوهج ، واللون ، والملمس ، والأركان المستديرة وأكثر هي طبيعة ثانية تقريبًا لمعظم الأشياء التي يصعب على المصممين حتى أن يناضلوا من أجل تكرارها تمامًا في المتصفح. بالنسبة لهؤلاء ، هذا البرنامج المساعد مثالي لأنه يتيح لك إنشاء التراكيب الخاصة بك بالطريقة التي تعرفها أفضل ولكن بعد ذلك يمكنك بسهولة تحويل أنماط الشكل إلى CSS3 متوافق مع المتصفح. هذه الطريقة مثالية لتصميم الأزرار أو التنقل أو أي شيء آخر قد يكون لديك شكل لشكله.
ربما لا يزال هناك دور للفوتوشوب كأداة لتصميم تخطيطات الويب ولكن فيما يتعلق بتصميم الطباعة للويب ، فقد تجاوزت التطبيقات مثل Firebug و Typecast ذلك. الوقت المستغرق لتحديث التراكيب الساكنة لا يمكن مقارنته بالسرعة وسهولة إجراء التغييرات في المستعرض. بالنسبة لأولئك منكم الذين لا يستطيعون حتى التفكير في فكرة التصميم في المتصفح ، فإن المكونات الإضافية المذكورة أعلاه يجب أن تعطي فوتوشوب دفعة يحتاجها للبقاء على صلة وتساعد على تسهيل عملية الانتقال.
هل تستخدم فوتوشوب لتصميم مواقع الويب؟ هل فوتوشوب على طريق فلاش؟ اسمحوا لنا أن نعرف في التعليقات.
صورة مميزة / صورة مصغرة ، الاستخدامات صورة ميتة عبر Shutterstock.