يستمر الجدل الدائر حول سكتش وفوتوشوب منذ الأزل. وليس هناك من ينكر أنه حتى يومنا هذا، لا يزال الفوتوشوب الأداة الأكثر استخدامًا لصنع النماذج المحاكية (Mockups) لتصاميم الجوال والويب.

رغم أنّه كان يُقصد بأدوبي فوتوشوب في المقام الأول أن يكون أداة للمصوّرين لتحرير الصور التي يلتقطونها، فإن ميزاته الجذّابة تمكِّن مصممي الويب من بناء مواقع ويب رائعة ومفيدة أيضًا.

الفوتوشوب: معول المصمم

لفترة طويلة، كان الفوتوشوب أداة أساسية بالنسبة للمصممين. في الواقع، لا يزال العديد من المصممين يعتبرون هذه الأداة معولهم الخاص. يدرك العديد من عملاء مصممي الويب ما هي ملفات PSD. تتكوّن هذه الملفّات المصنوعة في فوتوشوب من طبقات يمكن فكّها ومعالجتها.

يطلب العملاء عادةً من مطوّري الواجهة الأمامية (front-end developers) استخدام هذه الملفّات كمراجع، بينما يعرف مصممّو الويب كيفية تطبيقها.

من السهل جدََّا تحديث هذه الملفّات ومشاركتها مع الأعضاء الآخرين في فريق التصميم. ومع ذلك، منذ وصول نسخة فوتوشوب CC 2014، أثبت فوتوشوب أنّه أكثر من مجرّد أداة لتحرير الصور لأنه يمكن أن يكون أداةََ سهلة وصديقة لمصمّمي الويب وللذين يعملون على التصميمات الرقميّة أيضًا.

سنعرض فيما يلي بعض ميزات برنامج أدوبي فوتوشوب ممّا يجعله أداةََ مفيدة لتصميم الويب:

• المكتبات Libraries: تتمّ مزامنة الأصول مع حساب Creative Cloud الذي يمكّبن استخدامه مرة أخرى في برامج أدوبي الأخرى وفي مختلف الملفات والمشاريع المستقبلية.

كائنات ذكية (Smart Objects): تمامًا مثل المكتبات، يمكن إعادة استخدام الكائنات الذكية في العديد من المواقف، سواء في ملف واحد أو مع ملفات أخرى.

استخراج الأصول (Extract assets): في هذه الأيّام، أتاح فوتوشوب لمصمّمي الويب استخراج الكائنات، العناصر والصور لعناصر الويب والجوال بعد دمج ميزات أكثر شمولية. وبمساعدة إضافات مثل Cut & Slice و DevRocket، فإن تصدير هذه الأصول يغدو أمرََا سهلََا للغاية.

Layer comps: تُمكّن Layer comps المصمّم من صنع أشكال مختلفة من التصميم وذلك عن طريق تعديل سمات، وتموضع وقابليّة رؤية العناصر دون مشاحنات إنشاء ملفات متعدّدة.

دعنا نواجه هذه الحقيقة: لا يزال فوتوشوب أداة التصميم الأولى التي يجب على المصمّم إتقانها. فأنا أعتبر برنامج فوتوشوب أمًا لكل برامج أدوبي وتصميم الويب. كل ما تحتاجه (أو بالأحرى جلّ ما تحتاجه) موجود في البرنامج، عليك فقط أن تطلق العنان لإبداعك قليلاََ. لكن نظرًا لكونه غير كامل أيضًا، فإنّ فوتوشوب له حدوده في بعض الأحيان. فمن الممكن أحيانا، ألّا يعمل الفوتوشوب بالطريقة التي نريده أن يعمل بها.

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

أنت كمصمّم، لديك خيارين: إمّا أن تتخلّص من فوتوشوب وتبحث عن برنامج أكثر تنوّعًا (أعتقد أنه سيكون من الصعب جدًا، إن لم يكن مستحيلًا)، أو البحث عن حلول من شأنها تحسين الفوتوشوب وتطويره. ألا وهي الإضافات.

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

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

نهضة سكتش

"أنا أحبّ سكتش (Sketch). قمت بالانتقال إليه مؤخّرََا ولم أعقّب. لقد كنت مدافعةََ عن برنامج فوتوشوب طوال حياتي العملية إلى أن أتت شركة سكتش، وخلال أسبوع، كنت قد انتقلت إلى استخدامه بالكامل، ولم أندم على الإطلاق. أعرف الكثير من المصممين الذين قاموا بالتبديل، ولكن في الواقع لا يزال هناك الكثير من المصممين الذين أتحدث معهم في المؤتمرات، والذين لا زالوا يستخدمون كلا البرنامجين (50% فوتوشوب و 50% سكتش)، سوف يتغيّرون، وسوف يرون الضوء قريبًا!".

سارة بارمنتير Sarah Parmenter

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

لديك كلّ ما تحتاج

مقارنةً بالفوتوشوب، فإنّ تنظيم جميع المستندات التي لديك وإجراء المراجعات على سكتش أسهل بكثير، ذلك بفضل واجهة سكتش النظيفة والبسيطة. ومع ذلك، لا يأتي هذا التطبيق إلا مع أدوات يمكن تعديلها باستخدام CSS3 و HTML.

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

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

لوحات الرسم (Artboards)

يعدّ صنع ألواح الرسم باستعمال تطبيق سكتش من أسهل ما يمكن. فبمجرد الضغط على حرف A من لوحة المفاتيح تكون قد أنشأت لوح رسم، سيعرض سكتش بعد ذلك قائمة تحوي 28 حجم مختلف من أيقونات الشاشة الأكثر استخدامََا والتي يمكنك الاختيار من بينها. وهذا مفيد تمامًا عند إنشاء تصميم متجاوب لأن الحصول على الأبعاد الصحيحة عند إنشاء نموذج محاكي سيغدو أمرََا سهلََا.

لوحات المزاج (Moodboards)

يسهّل عليك تطبيق سكتش إنشاء لوحات المزاج وموارد المشاريع. أولاً، لاحظ أن جميع ملفاتك يمكن أن تعيش داخل مستند واحد.

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

صندوق أدوات سكتش (Sketch Toolbox)

قبل استخدام سكتش، يوصى بشدة بتنزيل صندوق أدوات سكتش Sketch Toolbox أولاً. فهذا هو مدير الإضافات الذي يتيح لك تصفّح وتثبيت الاضافات التي تريدها بشكلِِ مباشر.

صندوق الأدوات هذا سيساعدك أيضََا في مراقبة الإضافات الأخرى التي تستخدمها بشكلِِ جيّد.

مبنيّ على المتّجهات

نحن الآن في عصر التصميم المتجاوب، ومفتاح النجاح في تصميم مواقع متجاوبة هو استخدام المتجهات (Vector) أثناء التصميم. لذلك يحتاج المصممون إلى الأخذ بالحسبان الشاشات عالية الوضوح مقابل الشاشات العادية والشاشات الضيّقة مقابل الشاشات العريضة وأشياء أخرى كثيرة عند تفكيرهم في الخروج بتصميم معيّن.

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

إضافة (Sketch Mirror)

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

مع الإضافة (Sketch Mirror)، يمكنك بسهولة فتح مستنداتك ومعرفة كيف سيبدو التصميم الخاص بك على جهاز iPad أو iPhone. تسمح لك هذه الإضافة أيضًا بمعاينة التغييرات التي أجريتها على الفور، مما يساعدك في إجراء تعديلات نهائية بناءً على ما يريده عميلك، خاصةً إذا كنت مع العميل وجهََا لوجه.

إضافة AEFlowchart

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

أنماط النص في تطبيق سكتش

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

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

سهولة التعامل مع الألوان

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

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

شبكة التطبيق المدمجة

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

إذا كنت ترغب في تعديل شبكة التخطيط، فأنت تحتاج ببساطة إلى الانتقال إلى "عرض View"، ثم انتقل إلى "إعدادات التخطيط Layout Settings". وإذا كنت ترغب في إيقاف تشغيل الشبكة، فما عليك سوى الكبس على Control + L.

إمكانيّات CSS غير محدودة

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

دان إدواردس Dan Edwards

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

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

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

سكتش "رمزي"

من السهل كثيرََا اللعب بحجم الصور والنصوص والألوان وإجراء التجارب عليها باستخدام الرموز في نفس الوقت، فالرموز تجعل الحياة أسهل بكثير. حتى بين القوالب، تعمل الرموز (symbols) بالشكل المرغوب فيه وأفضل.

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

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

أزرار سكتش الديناميكية

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

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

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

إضافة Day Player

سيكون من السهل عليك ملء العناصر النائبة من خدمات الصور المختلفة إذا كنت تستخدم إضافة Day Player. وسيكون القيام بذلك أسهل بكثير إذا كنت تستخدم Lorem Pixel للحصول على الصور التي تريدها.

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

إضافة Content Generator

إضافة Content Generator هي ما تحتاج إليه إذا كنت ترغب في إضافة المزيد من محتوى الحشو. باستخدام هذا البرنامج المساعد، كل ما عليك فعله هو تحديد صناديق العناصر النائبة للصورة لكل عضو في الفريق وتحديد صورة شخصية لذكرِِ كانت أو أنثى في خيارات الإضافة.

الجيل المدمج من القوائم النقطية

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

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

دعم لوحات فنية متعددة على لوحة قماشية واحدة

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

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

تصدير الأصول

"التصدير مهمّة شائعة، ولكن سكتش 3 يحسّن سير هذه المهمّة من خلال السماح لك بتحديد مستويات دقة مختلفة للمكوّنات المقطوعة. هذا يعني أنه يمكنك حفظ الشريحة نفسها في العديد من الملفات التي تدعم دقة شاشات مختلفة وذلك في آن واحد. "

جيوف غراهام Geoff Graham

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

إضافة Sketch Style Inventory

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

سكتش مقابل فوتوشوب: من هو الأفضل بالنسبة إليك؟

إذََا ما الذي يجب عليك اختياره: أدوبي فوتوشوب المشهور أو سكتش الذي لا يمكن إيقافه؟ فيما يلي قائمة بالفرق الأساسي بين هذين البرنامجين:

• التصيير (rendering): من حيث التصيير، فإنّ طريقة عرض سكتش قريب من الويب. ولكن لسوء الحظ، لا يمكن قول الشيء نفسه عن فوتوشوب.
• الاختصارات: يفوز فوتوشوب بهذه الجولة لأنه يحتوي على الكثير من الاختصارات. يفتقر سكتش بوضوح للاختصارات التي يمكن أن تسهم في تسهيل العمل أكثر.
• المستندات: يحتوي سكتش على مستندات صغيرة بينما مستندات فوتوشوب كبيرة. فحجم ملف المستند الصغير هو ميزة مضمونة في التطبيق المتّجهية. نظرًا لأن معظم الملفات التي تم إنشاؤها باستخدام سكتش أقل من 4 ميجابايت، فإن هذه الملفات سهلة على محرك الأقراص الثابتة وتحميلها أو العمل عليها سريع أيضََا.
• المكتبات: يحتوي فوتوشوب على مكتبة واحدة، بينما لا يحتوي سكتش على أية واحدة.
• الشبكات: يحتوي سكتش على شبكات مدمجة، بينما يجب عليك إنشاء شبكات خاصة بك في فوتوشوب.
• التعامل مع الألوان: لدى أدوبي فوتوشوب إدارة ألوان ممتازة، بينما نجد نقيض ذلك بتطبيق سكتش.
• التطبيق: تربح سكتش هذه الجولة مرة أخرى لأنها تتيح تطبيقًا أسرع مقارنةً بفوتوشوب.
• الرموز والكائنات: تُنسب الرموز لسكتش والكائنات لفوتوشوب. رغم أنه يبدو تعادلََا هذه المرة إلّا أنّ رموز سكتش تأتي بنفس الحجم بينما تأتي كائنات فوتوشوب بأحجام مختلفة.
• ألواح الرسم: يتميّز سكتش بميزة واضحة لأنه يأتي مع ألواح رسم متعددة. هذا على عكس اللوحة الفنية الفردية في فوتوشوب.
• القياس: من الواضح أن سكتش يفوز بهذه الميزة. فباستخدام أداة التحديد، تقوم بفتح لوحة المعلومات، ورسم المسافة بين كائنين، ويمكنك بالفعل التحقق من النتائج. هذا، في الواقع، مقياس متقدم لا يمكن إلا لسكتش أن يقدّمه. إنّه لمن الواضح أن منهج سكتش ليس فقط أكثر مباشرة ولكنه أسهل أيضًا. ولكن إذا كنت تستخدم فوتوشوب، فهذا غير ممكن لأنّ المسطرة التي يقدّمها مرهِقة.
• تكبير شاشة العرض: يفوز فوتوشوب بهذه الجولة تذهب لأنه يحتوي على مستويات متعددة من التكبير. أمّا سكتش فلديه مستوى واحد فقط.
• التغيير والتبديل: بفضل التغيير المحافظ وغير المدمّر، تتربع سكتش القمّة مرة أخرى، فكل ما عليك القيام به هو إدخال قياس الشعاع، والكل سيكون على ما يرام. أمّا في حالة فوتوشوب، فأنت تحتاج إلى إدخال الشعاع وإعادة رسم الشكل الخاص بك، وتحتاج أيضا إلى التأكد من نسخ الأبعاد بدقّة.
• الحجم: إنّ سكتش خفيف الحجم موازنة بفوتوشوب ثقيل الحجم.
• قدرات تحرير الصور: حسنًا، هذه الجولة تذهب إلى برنامج فوتوشوب لأنه أُنشئ في المقام الأول لهذا الغرض. ومع ذلك ورغم خسارتها، فإن سكتش تعوّض عن ذلك بتوفيرها لميزات من شأنها تقديم تصميمات رقمية جيدّة.
• سهولة الاستخدام: سكتش هو تطبيق حصري فقط لنظام التشغيل ماك. ومع ذلك، يمكن استخدام فوتوشوب لكل من مستخدمي الماك والويندوز.

سكتش: تهديد حقيقي للفوتوشوب

"أنا مقتنع بأن سكتش، في الوقت الحالي، هو أفضل أداة لتصميم المواقع وواجهات المستخدم والتطبيقات."

براين هوف Brian Hoff

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

حسنًا، سيكون هذا سؤالًا صعبًا للغاية. صحيح أن العديد من المصمّمين يقومون بالفعل بالانتقال إلى سكتش لأنه، من ناحية، لا يكلّف سوى 99 دولارًا. ومن ناحية أخرى، يمكن أن يجعلك Creative Cloud تنفق 49.99 دولارًا للاشتراك الشهريّ.

سكتش تطبيق رائع، ولكن ما زال العديد مخلصين للفوتوشوب

"أستطيع أن أرى المشاكل التي تحدث أثناء تبادل الملفات بين المصممين إذا لم ينتقل أحدهم إلى سكتش. ومع ذلك فإن جمال عالم الويب هو أنه يمكنك إنشاء الأصول التي تريدها، لذلك ومن هذا المنظور، باستطاعة سكتش أن يقوم بإخراج ملفات PNG أو أي نوع من الملفات مثلما يفعل فوتوشوب. "

خوي فان Khoi Vin

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

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

يمكننا القول أنه لا يزال من الآمن متابعة استخدام فوتوشوب. بمجرد أن تتقن استخدام فوتوشوب، يمكنك البدء بعد ذلك في تعلم سكتش. بعد كل شيء، ستقع على عاتقك مسؤولية تعلم أدوات جديدة باستمرار والتكيف مع استخدامها كلما كان ذلك ضروريًا.

نأمل حقًا أن تكون لديك فكرة أفضل عن كلتا الأداتين الرائعتين، والآن نريد مشاركة بعض أوراق الغش الرائعة.

خلاصة

ما رأيك إذََا في فوتوشوب وسكتش، أيّهما تستخدم وما هي تجربتك معهم؟ هل جرّبت أيّ من تطبيقات الويب؟ شارك معنا رأيك أو تجربتك في قسم التعليقات.

ترجمة -وبتصرف- للمقال Sketch vs Photoshop: 5 Expert Designers Share Their Thoughts لصاحبه Vincent Alocada

نأمل، بعد الانتهاء من هذا الدرس التعليمي، أن توظّف مهاراتك الجديدة وتبدأ في دمج التصميم المسطّح في مواقع الويب والمشاريع الخاصة بك.

وإلى جانب ذلك، فإنّ حركة التصميم المسطّحة ليست جميلة من الناحية الجمالية فحسب، بل لها غرض وظيفي أيضًا.

إنشاء أيقونة مسطّحة للصفحة الرئيسية

قبل البدء بشرح الكيفيّة التي سيتمّ بها تصميم الأيقونة، لنطّلع على النتيجة النهائية:

افتح برنامج الفوتوشوب، وأنشئ ملفََّا جديدََا مع إعطاء الخاصية preset القيمة photo (وضبط القيم التالية 10 إنشات × 8 إنشات، 300 DPI، خلفية شفافة Transparent Background، ألوان RGB).

استخدم الأداة Rounded Rectangle وقم بإنشاء شكل جديد بالأبعاد 1736 بكسل / 1736 بكسل وشعاع طوله 83 بكسل وأعطه اللون ‎#82d8b5 (أو يمكنك اختيار اللون الذي يناسبك لهذا الشكل).

باستخدام أداة القلم (Pen Tool)، ارسم شكلا مثل الشكل الموجود في الصورة أسفله، وأعطه اللون ‎#a30d00. سيكون هذا الشكل بمثابة السقف الخاص بأيقونة الصفحة الرئيسية التي ننشئها.

بعد ذلك، دائما مع أداة القلم، ارسم شكلا مستطيلا مثل الذي في الصورة أدناه (الشكل ذو اللون الأبيض)، أعطه اللون الأبيض ‎#ffffff. وارسم مربعا صغيرا باستخدام أداة المستطيل Rectangle ثمّ أعطه اللون ‎#3498db:

باستخدام أداة Rectangle هذه المرة، قم بإنشاء مستطيل بالأبعاد 248 بكسل / 396 بكسل و أعطه اللون ‎#fcab3a (سيجسّد هذا المستطيل باب المنزل).

(يمكنك حفظ ما قمت به لحد الآن كصورة. وفي الواقع، يمكننا اعتبار هذه الصورة كأيقونة مسطحة للصفحة الرئيسية. ولكن لا زلت أريد إضافة ظلِِّ طويل للأيقونة، فاستمر.)

بعد ذلك، باستخدام أداة القلم (Pen Tool)، و باستخدام اللون الأسود ‎#000000، ارسم شكلََا. ابدأه من الحافّة اليمنى للسقف. (عند الحافة التي يتقاطع بها اللونين الأحمر والأبيض) وقم بتمديد الرسم إلى خارج المستطيل ذو الزوايا المستديرة (المستعمَل كخلفيّة للأيقونة) ثمّ قم بإغلاق الشكل في الحافّة السفلّية اليسرى من صورة المنزل. سوف تصل إلى النتيجة التالية:

أرجع طبقة الظلّ إلى الخلف (قم بجرّها إلى الأسفل من خلال لوحة الطبقات Layers Panel)، وقم بتنقيطها (Rasterize، التنقيط هو عملية تحويل شكلِِ متجهي إلى شكل منقّط أو مبكسل) بعد ذلك (انقر يمينا على الطبقة واختر Rasterize Layer). باستخدام أداة Magic Wand، حدّد طبقة المستطيل ذات الزوايا المستديرة بأكملها واعكس التحديد بعد ذلك (يمكنك استخدام الاختصار Ctrl + Shift + I). مع استمرار التحديد، انقر على طبقة الظلّ من لوحة الطبقات واضغط على حذف Delete من لوحة المفاتيح.

أصبحت أيقونتك جاهزة الآن. لم يتبقى إلا حفظها، وللقيام بذلك انقر فوق ملف > حفظ للويب (File > ‏Save for Web، الاختصار هو Ctrl + Shift + Alt + S) احفظها بتنسيق PNG-24، مع تفعيل خاصية الشفافية. نريد أن يتم حفظ كل شيء بتنسيق PNG-24 لأنه يدعم الشفافية.

بعدما انتهينا من أيقونة الصفحة الرئيسية، سننتقل الآن للعمل على أيقونة المنشورات.

إنشاء أيقونة المنشورات المسطّحة

1- قم بفتح فوتوشوب وأعد الخطوتين الأولى والثانية من الشرح السابق (إنشاء ملف جديد و رسم مستطيل ذو زوايا مستديرة داخله كي نستعمله كخلفية للأيقونة)

2- أرسم مربّعََا مستدير الحوافّ بالأبعاد 929 بكسل / 929 بكسل و بشعاع 38 بكسل. استعملت اللون #f5ea74 ليشابه الملاحظة الملصقة.

3- أرسم خطََّا بسمك 1 بكسل و لوِّنه باللون #5d5608. وقم بوضعه في الجزء الأعلى من الملاحظة الملصقة.

4- أرسم خطوطا بسمك 15 بكسل و قم بصفّها كما هو موضح أدناه:

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

5- أرسم مستطيلا لتعبِّر عن الصورة التي تكون متواجدة بالملاحظة الملصقة.

6- أرسم ظلََّا للأيقونة كما تعلّمتَ في أيقونة الصفحة الرئيسية.

7- احفظ ما قمت بتصميمه وها هي الأيقونة جاهزة.

أيقونتي من أنا واتصل بي

يمكنك تحميل حزمة الأيقونات الكاملة من هنا.

ترجمة -وبتصرف- للمقال How to Create a Flat Navigation Icon Set in Adobe Photoshop للفريق Editorial Team

كثيرًا ما سمِعتَ بأنك تستطيع صنع مجموعتك الخاصة من الأيقونات في فوتوشوب، او بإمكانك البحث عنها على الإنترنت، ولكن ماذا إن أخبرتك بأنك تستطيع الوصول إلى مكتبات كبيرة من الأيقونات مباشرةً في فوتوشوب؟ نود اليوم أن نقدم لك هذه الإضافة في فوتوشوب.

أولًا: مجموعة FlatIcon

أكثر من 10,000 شكل متجه تضاف مباشرةً إلى فوتوشوب.

ثانيًا: مجموعة Pixel 2 Vector

تعرّف على أكبر مجموعة من الأيقونات المستخدمة في فوتوشوب بالمجان!

ثالثًا: مجموعة Creative Market

الوصول المباشر لمحتوى التصميم المميز من Creative Market. بإمكانك إيجاد المزيد على موقع blogging.com، وبإمكانك إيجاد مكونات إضافية اكثر من المتجهات في فوتوشوب:

هذه القائمة تحتوي على أفضل الإضافات لفوتوشوب: تصميم المواقع الإلكترونية، والفُرَش، وأنماط الرسم، وتعديلات الألوان، وسير العمل، والفلترة، والمؤثرات الخاصة والتحجيم.

ترجمة -بتصرف- للمقال ‎Access vector icons لصاحبه Zsolt Mathe

اصنع نموذج تصميم موقع تعليمي متكامل بدءًا ببناء التخطيط الأولي، ومن ثم الانتقال لتصميم العناصر الفردية للصفحة.

والنتيجة هي نسق صفحةٍ إلكترونيةٍ عصرية وجذابة وناضرة وجاهزة للبرمجة.

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

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

إيجاد تخطيط شبكي (Wireframe) يساعد على تطوير شكلٍ هرمي، بالإضافة إلى إعطاء رؤية عن أفضل الأماكن للعناصر الأساسية في التصميم.

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

ضع خطوطًا إرشادية بعرض "960 بيكسل " في منتصف صفحة الويب. واصنع شبكةً بسيطة لتساعدك على وضع عناصر الصفحة عليها.

إبدأ بصناعة شريط رأس الصفحة، وارسم تحديدًا (Selection) يحيط بعرض الصفحة كلها ومن ثم املأها (Fill) باللون الأبيض. إضغط بشكلٍ مزدوج على الطبقة (Layer) لعرض تنسيقات الطبقة وقم بإضافة تغطية بالتدرج اللوني (Gradient Overlay) من اللون الأبيض للون الرمادي متدرج بشكل عمودي.

فيما بعد، ارسم منطقة الرأس الأساسية حيث سيتم وضع المحتوى المميز فيها، وفي طبقة جديدة، ارسم تحديدًا (selection) ومن ثم أضف تدرجًا لونيًا باستخدامك للونين فاقعين، وقم أيضًا بإضافة ظل داخلي رقيق لإضفاء العمق على التصميم.

اللمسات الرقيقة لنسيج التصميم بإمكانها أن تضيف الحياة للتصميم. وبينما يتم تحديد منطقة الرأس بواسطة قناع (Mask)، قم بالضغط على كل من أزرار CMD+SHIFT+C للقيام بنسخها بشكل مندمج وموحد، ومن ثم قم بإلصاقها على طبقة جديدة. ثم بالذهاب لقائمة "Filter>‏ Noise>‏ Add Noise" لخلق نسيج بسيط، ثم قم بضبط وضع المزج (Blending Mode) على الاختيار (Multiply) وقم بتقليل التعتيم حتى يصل للدرجة المناسبة.

ألصق شعار الشركة، ومن ثم قم بتحريكه على الشاشة حسب الشبكة التي سبق أن أنشأتها. أضف بعض اللمسات من خلال خيارات نسق الطبقة (Layer Style Options) وأضف تدرجًا لونيًا ليتناسب مع ألوان قائمة الرأس المميزة، ومن ثم اصنع ظلًا داخليًا ناعمًا جدًا.

استخدم أداة الكتابة (Type Tool) لانشاء نص على شريط التنقل الرئيسي للموقع، اجعل الخط بلون رمادي متوسط، بينما تقوم باستخدام درجة أغمق للرابط النشط.

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

استمر بتجسيد المحتوى التقديمي، ولكن هذه المرة استخدم خط (Arial) أو (Helvetica) حتى تتمكن من وضع النص بتنسيق "html" التقليدي وبدون أساليب استبدال الصور.

ضع صورة حاسوب محمول في المنطقة المميزة (وهنا مجموعة من الأمثلة)، وهذا يتناسب بشكل تام مع طبيعة الشركة التخيلية، وتوفر منطقة مركزية ممتازة لعرض أمثلة على الأعمال على شاشة الجهاز المحمول.

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

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

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

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

استخدم أداة المستطيل المدور (Rounded Rectangle Tool) لرسم صندوق في الشريط الجانبي. ولا يهم اللون الأساسي، إذ سنغيّره في المرحلة التالية.

اضغط ضغطة مزدوجة على الطبقة وأضف مجموعة من تنسيقات الطبقة، بما فيها التدرج بين الأبيض والرمادي، والحد الخارجي (Stroke) وظل داخلي ناعم.

استخدم هذا الشريط الجانبي لصنع قسم خاص للإعلان عن آخر المشاريع المميزة على الموقع. بإمكان العناصر أن تكون عبارة عن قصاصات صور صغيرة ونصوص.

ارسم مستطيلًا دائريًا آخر ليتم استخدامه كزر، ثم قم بإضافة القليل من تنسيقات الطبقة مثل التدرج اللوني والحد الخارجي (stroke) لإعطاء تنسيق للزر يتناسب مع الشكل الكلي للصفحة ذو اللون الرمادي الجذاب.

اصنع علامةً وصفية وقصيرة للزر الذي يدعوا المستخدم للاستمرار في تصفح الموقع ورؤية المشاريع والأعمال التالية.

قم بالإشارة لنهاية المحتوى بواسطة رسم منطقة ذيل للصفحة، ثم قم بتعبئة المنطقة بلون رمادي باهت لتمييزها عن منطقة المحتوى الرئيسي.

ارسم ستارًا دائريًا ومن ثم عبّئه بتدرج لوني دائري بين الأسود والشفاف. قم بالضغط على CMD+T لتستطيع التحكم بالتحديد، ثم قم بضغط أو تمديد التدرج اللوني للحصول على رسم شبيه بالظل.

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

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

استخدم المنطقة الوسطى لذيل الصفحة لكي تعرض رسالة معينة عن الشركة. اضبط النص باستخدام نفس خطوط رأس وحاشية الصفحة.

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

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

ترجمة -بتصرف- للمقال ‎Create a Clean Modern Website Design in Photoshop

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

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

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

اذهب إلى قائمة Select ثم Color Range، واختر Highlights من نوع التحديد Selection Method كما بالصورة أعلاه.

حرك مؤشرات Fuzziness وRange بينما تراقب المعاينة الحية للصورة حتى تحصل على مستوى مناسب للمناطق الساطعة "highlights” في الصورة ، لاحظ أن شدة الإضاءة في تلك المناطق ستحدد مدى البلل الذي سيبدو عليه الطريق.

أنشئ طبقة جديدة واملأ المناطق الساطعة باستخدام اختصار ctrl+Backspace، ثم اضغط ctrl+d لتزيل التحديد.

غيّر وضع الدمج "Blending mode" للطبقة البيضاء إلى Color Dodge، ثم قلّل ملء الطبقة "Fill" إلى نحو 50%. إن لم تكن راضيًا عن النتيجة فيمكنك تغيير إعدادات الملء والشفافية حتى تصل إلى اللمعان المناسب للأسفلت.

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

أضف طبقة جديدة واملأها باللون الأسود باستخدام اختصار Alt+Backspace، ثم اذهب إلى Filter ثم Noise، ومنها Add Noise.

غيّر قيمة Amount إلى 100%، واضبط التوزيع "Distribution" على Gaussian، وفعّل خيار Monochromatic.

والآن، اذهب إلى قائمة Filter، ثم Blur، ومنها Motion Blur.

اضبط الزاوية على 60 درجة مثلًا، والمسافة "Distance" على 25 بكسل.

ستجد شريطًا رفيعًا على حواف الطبقة لم يُطبّق عليه تأثير motion blur، اضغط ctrl+t وزِد حجم الطبقة لتغطي هذا الشريط.

غير وضع الدمج "Blending Mode" إلى Screen كي نُظهر الأجزاء البيضاء فقط من الضوضاء "Noise" التي أنشأناها، هذا يسمح للصورة الأصلية أن تظهر أيضًا من خلال قطرات المطر.

اذهب إلى Image ثم Adjustments ثم Levels -أو استخدم اختصار ctrl+L- واسحب مؤشر Shadows إلى اليمين لتقليل عدد قطرات المطر.

أضف طبقة جديدة واملأها بالأسود، ثم أضف فلتر Noise بقيمة 100% مع خيارات Gaussian وMonochromatic كما في المرة السابقة، ثم أضف فلتر Motion Blur.

وفي إعدادات هذه الطبقة الثانية من المطر، زد المسافة Distance إلى 50 بكسل، لكن أبق الزاوية كما هي 60 درجة.

أيضًا كما في المرة السابقة، اضغط ctrl+t لتزيد مساحة هذه الطبقة لتكون أكبر قليلًا من طبقة المطر الأولى كي يزيد حجم قطرات المطر، واضبط وضع الدمج "Blending Mode" على Screen.

استخدم اختصار ctrl+L مرة أخرى لتفتح نافذة Levels، واسحب مؤشر Shadows إلى اليمين، ومؤشر Midtones إلى اليسار، وأبق عينك على المعاينة الحية للصورة كي تضبط الصورة على توازن مناسب بين التفرّق والكثافة الشديدة.

أضف طبقة Noise ثالثة، ثم فلتر Motion Blur، لكن هذه المرة سنزيد Distance إلى 100 بكسل، وستكون هذه الطبقة لقطرات المطر القريبة التي يجب أن تبدو وكأنها تتحرك أسرع مما وراءها.

زد مساحة هذه الطبقة بشكل كبير باستخدام اختصار ctrl+t لإنشاء قطرات مطر كبيرة، واضبط Blending Mode على Screen. يجب أن تضفي هذه الطبقات الثلاث التي أنشأناها عمقًا لوابل المطر الذي يهطل على الشارع الآن.

قلّل كمية المطر المرئية في الطبقة الأخيرة الأمامية بالتعديل في المستويات Levels:

حرك مؤشر Shadows إلى اليمين، وزد قيمة التباين Contrast بسحب midtones وhighlights إلى اليسار.

في هذه الخطوة سنغير من الشكل الموحد لطبقات المطر كي تبدو عشوائية وواقعية:

أضف Layer mask لكل طبقة من طبقات المطر، واستخدم فرشاة ناعمة بشفافية 50%، وانقر نقرات رقيقة بعشوائية هنا وهناك.

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

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

ترجمة -بتصرف- لمقال How To Add Heavy Rain to an Image in Adobe Photoshop لصاحبه Chris Spooner

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

رأينا في نموذج العرض للتصَّوير بالأشعَّة تحت الحمراء، تبدو الصور سريالية جميلة عندما يتم خلط اللون، وخاصة في الصور التي تحتوي على الكثير من الأشجار وأوراق الشَّجر. سنقوم بتكرار التأثير باستخدام صورة طبيعية، ولكن مع بعض تعديلات الفوتوشوب لعكس القنوات.

قم بفتح الصورة الطبيعيّة الخاصة بك في أدوبي فوتوشوب. سأستخدم صورة المنظر الطبيعيّ هذه، التي تحتوي على مزيج لطيف من اللون الأخضر، وتحتوي أيضًا درجات اللون المتناقضة في السماء والنهُر والصخور. ابدأ بتكرار الطبقة باستخدام اختصار CMD+J.

اعكس الطبقة المُكررة عن طريق الذهاب إلى Image > Adjustments > Invert، أو باستخدام اختصار لوحة المفاتيح CMD+I.

قم بتغيير وضع المزج لهذه الطبقة المعكوسة إلى Color. تعكس هذه الخطوة ألوان الصورة أثناء إزالة التأثير السلبيَّ.

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

تحت القناة الافتراضية لإخراج اللون الأحمر، قلل قيمة شريط تمرير اللون الأحمر إلى 0 وقم بزيادة شريط تمرير اللون الأزرق إلى 100٪.

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

الآن، يجب علينا تصحيح الألوان لتمثيل تأثير الأشعَّة تحت الحمراء، لكن الألوان باهتة نوعًا ما. أضف طبقة تعديل التَّشبع / درجة اللون.

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

ارفع قيمة شريط التمرير للتَّشبع لجعل المناطق الوردية أكثر حيوية، ثم اسحب بعناية شريط درجة اللون للعثور على أفضل توازن بين الأحمر والوردي.

قم بتغيير القائمة المنسدلة إلى اللون الأرجواني وقم بتغيير شرائط التمرير لتصحيح درجة اللون إلى أحمر أرجوانيٍّ قليلًا. قم برفع التشبُّع وتصحيح درجة اللون لمنحهم المزيد من المظهر الأحمر أو الوردي أو الأزرق.

النَّتيجة النَّهائِيَّة هي صورة واقعية بتأثير لون الأشعة تحت الحمراء، مع أوراق شجر ورديَّة نابضة بالحياة، والتي تعطي صورة المنظر الطبيعي مظهر سريالي، تقريبًا مثلُ الكواكب الفضائية. ببساطة عن طريق عكس الألوان وتحويل قنوات الأحمر والأزرق الموجودة، يمكننا مباشرة تكرَار جمال صُوَر الأشِعَّة تحت الحمراء الأصيلة في الفوتوشوب.

ترجمة –وبتصرّف- للمقال How To Create an Infrared Photo Effect in Adobe Photoshop لصاحبه Chris Spooner.

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

يستند العمل الفني الذي سأقوم بإنشائه على عنوان الفيلم الخيالي “The Phantom”. معظم العمل الشاق يتم من خلال وظائف الفوتوشوب ثلاثية الأبعاد، كل المطلوب هو بعض التهيئة للإعدادات لإنتاج التأثيرات ثلاثية الأبعاد وجعل وجه النص مشطوبًا، جنبًا إلى جنب مع الإضاءة والظلال المرتبطة بها. لولا ذلك، كان سيجب تصميم هذه التأثيرات من الصفر، ولكن مزايا الـ3D توفر وسيلة سريعة وسهلة لإنتاج تأثيرات تشبه إضاءة الحياة.

ابدأ بإنشاء لوحة بالأبعاد التي تختارها. أنا أعمل مع مستند بحجم 3000×2000 بكسل. قم بتغيير لون الخلفية إلى رمادي داكن، مثل #181818، ثم استخدم اختصار CMD+Backspace لملء طبقة الخلفية.

توجه إلى Filter > Noise > Add وقم بتهيئة الإعدادات إلى 5٪، وقم باختيارGaussian و Monochromatic لإضافة سطح محبّب ثقيل إلى خلفية التصميم.

توجه إلى قائمة الفلتر Filter menu مجددًا وقم باختيار تصحيح العدسة Lens Correction. تحت علامة التبويب المخصص Custom tab، حرك شريط تمرير Vignette Amount إلى اليسار لتطبيق هالة داكنة حول لوحة الرسم.

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

حدد كل طبقة نصية بدورها وانتقل إلى3D > New 3D Extrusion من محدد الطبقة Selected Layer. سيؤدي القيام بذلك إلى تغيير مساحة العمل إلى الوضع ثلاثي الأبعاد وإنشاء نماذج فردية من النص.

اضغط مع الاستمرار على مفتاح Shift في لوحة المفاتيح وقم بتحديد كل طبقة من الطبقات ثلاثية الأبعاد في لوحة الطبقات، ثم انتقل إلى3D>Merge 3D Layers. سيجمع هذا بين النماذج المنفصلة في مشهد ثلاثي الأبعاد.

بشكل افتراضي، يقف النص ثلاثي الأبعاد في وضع مستقيم ضد الأرضية، ولكن نريد أن يتم وضع النص على ظهره لهذا التأثير لعنوان الفيلم. قم بتحديد كل كائن ثلاثي الأبعاد في اللوحة ثلاثية الأبعاد، ثم انتقل إلى قسم الإحداثيات من لوحة الخصائص Properties panel. قم بتغيير قيمة دوران X إلى 90° درجة.

اضغط على قائمة الأيقونة الصغيرة الموجودة في جانب لوحة الخيارات Properties panel، ثم قم باختيار Move Object to Ground Plane. سيحرص هذا الخيار على أن العنصر لا يطفو في فراغ ثلاثي الأبعاد.

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

حدد كلاً من النماذج النصية ثلاثية الأبعاد من خلال الضغط على مفتاح CMD لإضافتها إلى التحديد، ثم قم بتهيئة Cap options في Properties panel إلى عرض بنسبة 100٪ مع زاوية 45 درجة افتراضيًا. وهذا سيطبق أسلوب “King Kong” المشطوب على وجه النص.

في لوحة 3D panel، حدد لانهائية عنصر Infinite Light 1. ستعرض الواجهة أيقونة كبيرة يمكن تدويرها لتغيير اتجاه مصدر الضوء. انقر واسحب الطرف الأصغر من الرسم لتوليد ظل طويل من خلال تسليط الضوء على زاوية حادة.

بِاستخدام Infinite Light 1 الذي تم اختياره، قم بتغيير ليونة الظل في لوحة Properties panel لطمس الظلال. إذا كانت زاوية إعدادات الإضاءة الخاصة بك تظلل وجوه النص باللون الأبيض، قم بإغلاق الكثافة داخل هذه الخيارات أيضًا.

ارجع مرة أخرى إلى لوحة 3D panel ، تنقل وانقر بين جميع المستويات التي تنتهي بكلمة Material لتسليط الضوء عليها جميعًا. قم بتقليل التألق إلى صفر وقم بتغيير لون الانتشار من الأبيض إلى الرمادي الفاتح من داخل لوحة الخصائص Properties panel.

اختر فقط مواد Extrusion Materials لكلا النموذجين في اللوحة ثلاثية الأبعاد 3D panel، ثم قم بتغيير اللون المنتشر لهذه الوجوه إلى نصف رمادي من لوحة الخصائص Properties panel.

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

قم بالرجوع إلى تخطيط الفوتوشوب الافتراضي ضمن Window > Workspace > Essentials menu لإلغاء تحديد الأدوات ثلاثية الأبعاد.

قم بإضافة طبقة تعديل المستويات، ثم اضغط على مفتاح ALT أثناء النقر بين طبقة التعديل والطبقة ثلاثية الأبعاد لجعل تأثير التعديل لا ينطبق إلا على النص وليس على الخلفية. قم بضبط الظلال وشرائط الدرجات اللونية النصفية بضع وحدات لتحسين تباين النص ثلاثي الأبعاد.

كل ما تبقى لإنهاء عنوان تصميم قديم هو وضع الملمس المحبحب. بنية “free Dust and Scratches” تناسب تمامًا نمط الفيلم الكلاسيكي. قم بلصق، تدوير وموازنة واحدة من الخامات على اللوحة الفنية، ثم قم بتغيير نمط المزج إلى الشاشة Screen وقلل التعتيم ليتناسب. اخترت 15٪ لترك بعض الملمس المُحبّب.

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

ترجمة –وبتصرّف- للمقال How To Create a Vintage Film Title Text Effect In Photoshop لصاحبه Chris Spooner.

تلقى لوحات الألوان المائية رواجًا كبيرًا بحيث يمكنك أن تضعها ضمن مجموعة تصاميمك، إلا أنك لن تحتاج لأن تكون فنانًا متمكنًا من الرسم بالألوان المائية لصنع مثل هذه اللوحات إذ إن برنامج الفوتوشوب يمكنه إنتاج تأثيرات لوحات ألوان مائية مثالية باستخدام مجموعة من المرشحات (الفلاتر) الموجودة أصلًا في البرنامج. في درس اليوم سآخذك عبر مجموعة من الإعدادات لتحويل أي صورة إلى لوحة رسم بالألوان المائية.

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

افتح الصورة التي اخترتَ العمل عليها في برنامج أدوبي فوتوشوب. أنا استخدمتُ صورة جسر البوابة الذهبية لباتريك تاماسو من موقع Unspalsh.com. انقر بالزر الأيمن على طبقة الخلفية واختر Convert to Smart Object لتحويلها إلى عنصر ذكي.

انقر على قائمة المرشحات Filter ثم اختر Filter Gallery. افتح مجموعة مرشحات Artistic واختر Dry Brush ثم غيّر إعداداتها إلى التالي:
Brush Size إلى 10 و Brush Detail إلى الخامة ا1. ثم انقر على OK لتطبيق التأثير.

اختر خيار Filter Gallery مرة أخرى ولكن تأكّد من أنك لم تختر الخيار في الأعلى الذي سيعيد تنفيذ الفلتر الأخير المطبّق بدون ضبط أية إعدادات بل يجب اختيار الخيار الأساسي الذي سيمنحنا القدرة على ضبط إعدادات جديدة بأنفسنا. هذه المرة اختر Cutout واضبط الإعدادات بحيث يكون Number of Levels عند 5 وEdge Simplicity عند 4 وEdge Fidelity عند 1.

في لوحة الطبقات، انقر نقرًا مزدوجًا على سطر فلتر Filter Gallery الموجود في الأعلى وغيّر خصائص المزج إلى Pin Light.

انقر على قائمة Filter ثم اذهب إلى Blur > Smart Blur. أدخل الإعدادات 5 لنصف القطر Radius و100 كقيمة لـ Threshold وعدّل الدقة Quality إلى High.

انقر نقرًا مزدوجًا على أيقونة الإعدادات ثم غيّر خصائص المزج لتأثير Smart Blur إلى Screen ثم خفّف التعتيم Opacity إلى 50%.

اذهب إلى القائمة

Filter > Stylize > Find Edges

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

ابحث في الإنترنت عن خامة الورق، أنا وجدتُ هذه الخامة Ivory Off White Paper Texture ذات اللون الأبيض العاجي الجميل. انسخ وألصق هذه الخامة داخل مستند الفوتوشوب ثم عدّل حجمها لتطابق حجم التصميم الذي نعمل عليه. غيّر خصائص مزج طبقة الخامة إلى Multiply.

حمّل ونصّب مجموعة الفراشي المجانية للألوان المائية. أضف قناع طبقة لطبقة الخلفية ثم استخدم الاختصار Alt+Backspace لملء القناع باللون الأسود ما سيخفي ظهور الطبقة بالكامل. اختر أداة الفرشاة Brush tool واختر واحدة من فراشي الألوان المائية.

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

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

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

هذا الدرس لا يعطيك فكرة عن استخدام مزايا 3D الجديدة في الإصدارات الحديثة من برنامج فوتوشوب بل يعلمك كيفية جعل الصور البسيطة نابضة بالحياة وخارجة عن المألوف كخروج العناصر من شاشة تلفاز أو قفز غزال من لوحة فنية ما أو كما في هذا الدرس حيث سيبدو أن الطريق يخرج من شاشة الهاتف المحمول وأن هناك سيارة منطلقة على ذلك الطريق.

سنبدأ أولًا بالحصول على صورة الهاتف المحمول. أنا اخترت هذه الصورة لهاتف محمول باليد مفرغة بالكامل وجاهزة (يمكنك الحصول على صورة أفضل غير مفرغة وتقوم بتفريغها بنفسك باستخدام إحدى طرق التفريغ المختلفة).

ثم سنحتاج لصورة الطريق. حمّلت هذه الصورة لطريق ملتوٍ في نهايته بشكل يناسب التصميم الذي أعمل عليه.

اسحب الصورة إلى داخل مستند الهاتف المحمول المفتوح في الفوتوشوب أو قم بإستيراده إلى داخل المستند عبر Import ثم عدّل بالحجم والموقع حتى تصبح أطراف الطريق السفلية البيضاء ملامسة لأسفل شاشة الهاتف المحمول بشكل شبه دقيق. وللقيام بذلك بسهولة أكبر خفّف مستوى التعتيم Opacity إلى 50% ثم استخدم الاختصار Ctrl+T للقيام بتعديل الحجم والموضع ثم اضغط على مفتاح Enter لتثبيت التعديلات الجديدة. لا تقم بتغيير مستوى التعتيم إلى الحالة الأصلية لأننا لم ننتهِ من العمل على هذه الصورة بعد.

انقر بالزر الأيمن للفأرة على طبقة هذه الصورة من لوحة الطبقات واختر Rasterize Layer وذلك لنتمكّن من التعديل المباشر على هذه الطبقة ضمن هذا المستند ولا تكون هذه الطبقة عبارة عن عنصر ذكي.

استخدم أداة التحديد المضلع Polygonal Lasso Tool لتحديد الشاشة من الداخل للهاتف المحمول مع استثناء أطراف أصابع اليد وعند الوصول بالتحديد إلى أسفل الشاشة تابع مع أطراف الطريق الخارجية لتحدد من الطريق الجزء الخارج من الهاتف المحمول وعند الانتهاء من التحديد اضغط على الاختصار Shift+Ctrl+I لعكس التحديد ثم انقر على مفتاح Delete لحذف كل ما هو خارج شاشة المحمول والجزء الخارجي من الطريق من صورة الطريق العامة.

استخدم الآن أداة الممحاة Eraser مع فرشاة ناعمة لمسح أطراف الطريق الخارجية وجعلها ناعمة مندمجة مع المحيط الذي حولها.

أعد تعتيم هذه الطبقة إلى وضعها الطبيعي 100% لتشاهد النتيجة الحالية.

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

أدرج هذه الصورة ضمن المستند وأيضًا خفّف التعتيم Opacity لنتمكّن، من العمل بسهولة أكبر على الصورة.

اتجاه السيارة الحالية مغاير لاتجاه الطريق لذلك حدّد طبقة السيارة ثم اذهب إلى القائمة

Edit > Transform > Flip Horizantal

وبذلك تم عكس الصورة أفقيًا

اضغط Ctrl+T ثم عدّل بحجم وموضع السيارة حتى تصبح مناسبة وكأنها تسير فعليًا على الطريق.

استخدم أداة القلم وابدأ بالرسم حول شكل السيارة لتحديدها. أداة القلم تعتبر من أدق الأدوات للتحديد ولكن استخدامها قد يبدو صعبًا للوهلة الأولى للمبتدئين إلا أنه من الواجب تعلّم وإتقان استخدام هذه الأداة لمن أراد فعلًا أن يحترف التصميم.

انقر على لوحة Path لإظهار المسار المرسوم بالقلم ثم انقر بالزر الأيمن للفأرة على المسار واختر Make Selection

اضغط على الاختصار Ctrl+J لنسخ التحديد إلى طبقة جديدة واحذف طبقة السيارة الكاملة القديمة. اضبط تعتيم صورة السيارة الجديدة إلى 100%.

انقر على زر التعديلات Adjustments أسفل لوحة الطبقات واختر من القائمة Curves حتى نستطيع دمج صورة السيارة بطبيعة وألوان المشهد العام للطريق.

انقر على الطرف السفلي لطبقة التعديلات هذه مع الاستمرار بالضغط على مفتاح Alt وذلك لجعل تأثيرات هذه التعديلات تطبّق على طبقة السيارة فقط وليس على كامل المستند.

الآن ومن نافذة إعدادات هذه التعديلات طبَق التعديلات التالية على الألوان الثلاثة الأساسية الأحمر والأزرق والأخضر.

أنشئ طبقة شفافة جديدة وضعها تحت طبقة السيارة ثم استخدم فرشاة ناعمة باللون الأسود وارسم ظلًّا تحت السيارة.

خفّف مستوى التعتيم Opacity لهذه الطبقة إلى 80%.

غيّر طبقة الخلفية وهي طبقة صورة الهاتف المحمول باليد إلى طبقة عادية عبر النقر بالزر الأيمن للفأرة عليها واختيار Layer from Background.

أنشئ طبقة جديدة تحت طبقة الهاتف المحمول ثم قم بتفريغ اللون الأبيض في أرضية طبقة الهاتف (يمكنك بسهولة استخدام أداة التحديد العصا السحرية Magic Wand Tool).

لوّن الطبقة الأرضية الجديدة باللون الأبيض بالكامل باستخدام أداة Paint Bucket Tool.

حدّد هذه الطبقة وانقر على أيقونة الأنماط للطبقة أسفل لوحة الطبقات. اختر Pattern Overlay.

قم بتجهيز الإعدادات كما في الصورة التالية لنمط النقش. النقش الذي اخترته هو نقش أساسي يأتي مع الفوتوشوب وهو باسم Sandpaper.

ثم أضف أيضًا نمط التدرج اللوني Gardient Overlay واضبط الإعدادات كما في الصورة التالية وانتبه لجعل Opacity بقيمة 91%.

أضف نصًا وهو عبارة عن عنوان هذا الدرس “تأثير ثلاثي الأبعاد على الصور” مع ترك فراغ مكان جملة “ثلاثي الأبعاد”. اختر خطًا عريضً لهذا النص.

أضف الأنماط الثلاثة التالية على النص Bevel & Emboss و Color Overlay و Drop Shadow مع تطبيق ما في الصور التوضيحية التالية

حمّل صورة 3D ثلاثية الأبعاد هذه وأضفها إلى المستند وعدّل حجمها وموقعها لتكون في موضعها الصحيح ضمن النص.

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

مصادر الصور:

صورة الهاتف المحمولة محفوظة الحقوق لصالح Freepik

صورة الطريق الملتوي على الجبل مجانية من Unsplash

صورة السيارة الرياضية مجانية برخصة CC0 من PEXELS

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

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

كما سنحتاج لتطبيق تأثير ألوان التفاؤل كقناع طبقة، لذلك حصلتُ أيضًا على صورة مفعمة بالألوان الجذابة.

بالإضافة إلى مجموعة مميزة من الفرش تمثّل لطخات طلاء أو حبر ويمكن الحصول عليها من الإنترنت مجانًّا.

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

حدّد طبقة صورة الفتاة المقصوصة ثم اذهب إلى القائمة

Image > Adjustments > Threshold

وسنبدأ بتطبيق تأثير Threshold على الصورة. ضع القيمة 70 في خانة Threshold Level ثم انقر على OK.

نحن لسنا بحاجة للمساحات البيضاء في هذا النوع من التصاميم وإنما فقط للمساحات السوداء وأفضل طريقة لتحديد هذه المساحات بدقة هي عبر خيار Color Range لذلك اذهب إلى القائمة

Select > Color Range

استخدم الأداة الماصة للألوان التي سيتم تفعيلها بشكل تلقائي مع هذا الخيار واختر مساحة سوداء ضمن صورة وجه الفتاة ثم ضع القيمة 128 ضمن خانة Fuzziness لتحديد أكبر قدر ممكن من اللون الأسود ضمن الصورة.

اضغط على الاختصار Ctrl+J لنسخ المساحات السوداء المحددة إلى طبقة جديدة بشكل تلقائي دون الحاجة للقيام بخطوات النسخ واللصق وإنشاء الطبقات، ثم أخفِ الطبقة القديمة تاركًا الطبقة الجديدة السوداء مع الخلفية الشفافة.

أنشئ طبقة جديدة بيضاء وضعها تحت طبقة وجه الفتاة لتكون خلفية التصميم الافتراضية.

ألصق صورة التصميم المضلع المفعم بالألوان فوق جميع الطبقات. ثم طبّق تأثير التمويه عليه من خلال القائمة

Filter > Blur > Gaussian Blur

وضع القيمة 19.4 في خانة Radius.

قم بتعديل حجم هذه الصورة الأخيرة عبر استخدام الاختصار Ctrl+T بحيث تغطي كامل مساحة التصميم.

هذا ما ستبدو عليه صورة التصميم حتى هذه اللحظة.

ولأخذ فكرة عما سيكون عليه وضع التصميم بعد تطبيق هذه الألوان على صورة الفتاة قم بالنقر بالزر الأيمن للفأرة على طبقة الألوان واختر الخيار Create Clipping Mask لتصبح هذه الطبقة طبقة قناع للطبقة التي تحتها مباشرة وهي في هذه الحالة طبقة الفتاة ذات المساحات السوداء فقط.

استخدم الاختصار B لتحديد أداة الفرشاة واستخدام فرشاة بقع طلاء أو بقع حبر وابدأ باختيار لون قريب من جهة استخدامك للفرشاة وارسم بقعًا مختلفة متنوعة في كل مرة وعلى مختلف أطراف صورة الفتاة.

وهذا ما سيبدو عليه شكل التصميم بعد الانتهاء من رسم البقع حول صورة الفتاة.

استخدام أداة النص من خلال الاختصار T ثم اكتب العبارة التي اتقفنا عليها في بداية الدرس وهي “التطلّع نحو مستقبل أفضل” واختر خطًّا مناسبًا، أنا اخترت هنا خطًا يدويًا بحيث يتناسق مع فكرة الرسم اليدوي للوحة واسقاط بقع الألوان على اللوحة ومن ثم الكتابة بخط اليد.

وأخيرًا حدّد طبقة الفتاة وطبقة الألوان المموّهة وطبقة بقع الطلاء وطبقة النص وانقر على زر Group في أسفل لوحة الطبقات لوضع جميع هذه الطبقات في مجموعة واحدة. ثم انقر بالزر الأيمن للفأرة على طبقة الألوان واختر الخيار Create Clipping Mask لتصبح هذه الطبقة طبقة قناع للمجموعة كاملة ويتم تطبيق تأثيرها على جميع الطبقات الموجودة ضمن هذه المجموعة.

هذا هو الشكل النهائي للتصميم والذي يحقق الفكرة الأساسية التي تحدثنا عنها في بداية الدرس.

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

المصادر

صورة الفتاة الصغيرة مجانية من موقع Flickr تحت الترخيص (CC BY 2.0).

صورة الألوان المضلعة مجانية من موقع Wallpaper Safari.

مجموعة فرش بقع الطلاء والحبر مجانية من موقع Brusheezy ولسهولة الوصول لهذه الأنواع من الفرش ابحث ضمن الموقع عن ink splatters وعن paint splatters.

عملية قص صورة الفتاة الصغيرة تمت باستخدام طريقة القنوات Channel المذكورة ضمن درس الدليل الكامل لقص الأشياء في فوتوشوب.

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

تأثيرات نزيف حبر الطباعة

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

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

تجد الفلتر الأول من خلال القائمة

Filter > Noise > Median

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

أدخل قيمة نصف قطر خفيفة لتشاهد النتيجة في نافذة المعاينة. القيمة من 3 - 4 ستكون كافية للحصول على زوايا منحنية مع المحافظة على وضوح النص.

الفلتر الثاني موجود ضمن القائمة

Filter > Distort > Ripple

سيمنح هذا الفلتر الحواف الخارجية للنص مظهرًا غير منتظم وشاذ.

اختر الخيار Large ضمن قائمة الحجم Size ثم حرّك المزلاج إلى قيمة 14 - 15% . أبقِ عينيك على نافذة المعاينة لتشاهد النتيجة النهائية. تفقّد باقي أجزاء التصميم للتأكد من عدم تشويه العناصر الأصغر حجمًا أكثر من اللازم.

تطبيق الخامات باستخدام فراشي الفوتوشوب

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

أضف طبقة قناع إلى تصميمك على الفوتوشوب ثم استخدم أداة الفرشاة Brush tool. اختر فرشاة خامة من خيارات مكتبة الفرش وعدّل حجم الفرشاة ليصبح مناسبًا.

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

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

خفّف مستوى ظهور التعبئة Fill إلى الصفر من لوحة الطبقات لجعل الطبقة المنسوخة غير مرئية.

انقر نقرًا مزدوجًا على الطبقة المنسوخة لإضافة نمط التوهج الداخلي Inner Glow. اضبط الخيارات إلى Normal والتعتيم Opacity إلى 100% واللون الأسود واستهدف الحواف Edge ثم اضبط مزلاجي Choke وSize لتطبيق خطوط خارجية سوداء مناسبة.

تطبيق الخامات عبر استخدام صور الخامات

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

ألصق صورة الخامة على طبقة جديدة فوق التصميم الأساسي. اذهب إلى القائمة

Layer > Make Clipping Mask

أو اضغط على الاختصار Alt+Backspace بين الطبقتين. وهذا القناع المقيّد بالطبقة السفلية سيقوم بتطبيق الخامة على تلك الطبقة.

غيّر خصائص المزج للخامة إلى Screen للخامات الداكنة أو Multiply للخامات الفاتحة لجعل الخلفية شفافة.

يمكنك زيادة تباين الخامة بضبط المستويات Levels عبر الاختصار Ctrl+L. حرّك مزالج الظلال والاضاءات للداخل لابراز التفاصيل.

بدلًا من ذلك، من الممكن تطبيق الخامة باستخدام قناع الطبقة العادي بدلًا من القناع المرتبط Clipping Mask.

استمر بالضغط على Alt أثناء النقر على مصغّر قناع الطبقة في لوحة الطبقات لتعديل المحتويات ثم ألصق الخامة مباشرة داخل القناع.

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

تطبيق الخامات باستخدام فلاتر الفوتوشوب

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

ابدأ بتحويل التصميم إلى عنصر ذكي Smart Object للحفاظ على التصميم الأساسي ومنع تطبيق التعديلات عليه مباشرة وللاستفادة من القدرة على ضبط إعدادات الفلاتر بسهولة.

اذهب إلى القائمة

Filter > Filter Gallery

وطبّق تأثير Reticulation الموجود ضمن مجموعة تأثيرات Sketch. اضبط قيمة الكثافة Density إلى 40 ثم اضبط قيمتي المستويات Level إلى الصفر.

انقر على أيقونة تأثير جديد New Effect Layer ثم أضف تأثير Torn Edges. اضبط قيمة توازن الصورة Image Balance إلى 24 والنعومة Smoothness إلى 1 والتباين Contrast إلى 17 ثم حرّك المزلاج للحصول على أفضل مظهر حبحبة.

يمكن تطبيق تأثير توهج داخلي عبر النقر المزدوج على طبقة التصميم. غيّر الإعدادات إلى Normal والتعتيم Opacity إلى 100%، اللون الأسود، الحواف Edge، ثم اضبط مزلاجي Choke وSize لابراز الخطوط الخارجية للتصميم بشكل مناسب للحروف المطبوعة.

نأتيكم بدرس جديد من سلسلة دروس تعلم التصميم باستخدام مجموعة من الصورة والتقنيات على برنامج Photoshop، مستوى الدرس متوسط وبه تقنيات جد ممتازة للتعلم.

 ستكون نتيجة درسنا اليوم كما في الصورة التالية:

قبل البدء أدعوكم لتحميل الحزم المرفقة مع الدرس (الرابط)

افتح مشروعًا جديدًا على Photoshop بالإعدادات التالية:

• 1920x1080pixels
• Resolution 720Dpi
• Color Mode RVB8bit

باستعمال أداة الطلاء (G)  نلوّن الخلفية باللون #acbfd7.

في طبقة جديدة Ctrl+Shift+N وباستعمال أداة الفرشاة (B) بالخصائص التالية :

الحجم 500-600 بكسل

الشفافية: 0%

التدفق -Flow-     30% :

ثم نرسم باللون #3a5475 الشكل :

أيضا باللون #9acbe7

نجلب الصورة التالية للمشروع.

من القائمة

Menu > Edit > Free Transform>Distort

نغير شكل الصورة

في طبقة جديدة وبأداة الفرشاة باللون الأبيض نرسم دائرة في أعلى الصورة

ثم نضيف صورة أخرى للمشروع، كما هو مبين:

نزيل بأداة الممحاة (E)   أطراف الصورة

نذهب إلى القائمة :

Menu>Filter>Blur>Gaussian Blur

نغير خصائص الدمج إلى القيمة Screen

نجلب صورة البناية التالية للمشروع

باستخدام أداة التحديد Lasso Tool (L) نحدد البناية ثم نضغط الاختصار Ctrl+j  للحصول على طبقة  بها الجزء المحدد فقط

بنفس الطريقة  مع باقي صور البنايات حتى نحصل على صورة مشابهة للصورة

ندمج طبقات البنايات عن طرق تحديد الطبقات واستعمال الاختصار Ctrl+E

ثم من القائمة :

Menu > Image >Adjustments > Hue/Saturation

و Menu>Filter>Blur>Gaussian Blur

ننسخ طبقة البنايات Ctrl+J ثم Ctrl+T  لتغيير حجمها – نكبّر حجم الطبقة قليلا-

نجلب صورة العربات الحربية للمشروع.

ثم Menu>Filter>Blur>Gaussian Blur

و Menu > Image >Adjustments > Hue/Saturation

في طبقة جديدة Ctrl+Shift+N وباستعمال أداة الفرشاة (B) بالخصائص التالية :

الحجم 20 بكسل

الصلابة -Hardness-   100%:

الشفافية:  60%

التدفق -Flow-    100% :

ثم نرسم بالألوان #ffdf00، #9a8b48، #ff9c04، #ff0404، #fffff أضواء البنايات كما في الصورة – الأمر سيتطلب بعض الصبر-

نذهب إلى القائمة

Menu>Filter>Blur> Motion Blur

نخفض قيمة الشفافية إلى 56

نجلب صورة الأرضية و من القائمة Menu > Edit > Free Transform>Distort  نغير في شكلها :

إلى Menu>Filter>Blur>Gaussian Blur

في طبقة جديدة، باستعمال الفرشاة باللون #6a82a2 نرسم خطًا أفقيًا

ثم باللون #363d45

نستعمل أداة ( Clone Stamp Tool (S لأخذ عينة من منطقة ولصقها في منطقة أخرى (لأن قبعة الجندي غير مكتملة)

بأداة الممحاة نزيل الشوائب حتى تبدو القبعة مكتملة .

نذهب إلى

Menu > Layer >New Adjustments Layer > Hue/Saturation

في طبقة جديدة Ctrl+Shift+N وباستعمال أداة الفرشاة (B) بالخصائص التالية :

الحجم 300-400  بكسل

الصلابة -Hardness-  0%:

الشفافية:  60%

التدفق -Flow-    30% :

نرسم باللون الأسود في المكان  باللون الأحمر

في طبقة جديدة وبنفس الطريقة نلون على مستوى ركبتي الجندي

نغيّر خصائص الدمج إلى القيمة Overlay

ننسخ الطبقة

نضيف الصورة للمشروع ومن Menu > Edit > Free Transform>Distort  نغير من شكلها.

نُغيّر خصائص الدمج إلى القيمة Color Dodge  مع استعمال الممحاة لإزالة الأطراف

في طبقة جديدة وبفرشاة ذات لون أبيض نرسم :

نُغيّر خصائص الدمج إلى القيمة Soft Light

نفس العملية على مستوى الركبتين مع خصائص الدمج إلى القيمة Overlay

في طبقة جديدة باللون الأبيض بفرشاة نضفي بعض اللون فوق السيارة والجندي ونخفض من قيمة الشفافية

نجلب الصورة

نغيّر خصائص الدمج إلى القيمة Screen

ننسخ طبقة الصورة – الضوء – ونموضعها في أماكن مختلفة حتى تعطينا منظر أضواء البنايات

 لتغير لون الضوء ننسخ إحدى الصور ونغير خصائصها عن طريق Menu > Image >Adjustments > Hue/Saturation

باستخدام نفس الطريقة يمكننا الحصول على ألوان مختلفة

في طبقة جديدة مع أداة الفرش باللون #fa7f00

نغير خصائص الدمج إلى القيمة Color

ثم نقوم بجلب الصورة .

نغير خصائص الدمج إلى القيمة Screen

ننسخ الصورة ونضعها في أماكن أخرى كما هو مبين.

في طبقة جديدة وبفرشاة باللون السابق (#fa7f00) نلون امتداد أضواء السيارات.

مع تغيير  خصائص الدمج إلى القيمة Color

نضيف الصورة التالية للمشروع ونضعها في الأعلى :

إلى القائمة Menu>Filter>Blur>Gaussian Blur

نغيّر خصائص الدمج إلى القيمة Screen

 في طبقة جديدة

من القائمة Menu>Filter>Render >Clouds

باستعمال الاختصار Ctrl+T  نكبّر من حجم طبقة السحب

نذهب إلى القائمة Menu>Layer>Layer Mask>Hide All

مما سيخفي جميع الطبقات ، ثم نحدد Mask  بجانب الطبقة في نافذة الطبقات

وباستعمال أداة الفرشاة (B) بالخصائص التالية :

الحجم 420  بكسل

الصلابة -Hardness-  0%:

الشفافية:  50%

التدفق -Flow-    40% :

باللون الأبيض كما هو موضح

نغيّر خصائص الدمج إلى القيمة Overlay

نضيف الصورة التالية للمشروع:

نغيّر خصائص الدمج إلى القيمة Lighten Color

في طبقة جديدة نلون بالفرشاة ذات اللون #3e738c كما هو مبين

نغيّر خصائص الدمج إلى القيمة Screen

نذهب إلى القائمة Menu>Layer>New Layer Adjustment> Balance Color

ثم Menu>Layer>New Layer Adjustment> Hue/Saturation

في طبقة جديدة نلون بالفرشاة ذات اللون # ff1a00 كما هو مبين

نغيّر خصائص الدمج إلى القيمة Overlay و الشفافية إلى 59

في طبقة أخرى باللون #fc8a39  ثم خصائص الدمج إلى القيمة Overlay 

في طبقة ثالثة  باللون #f9c43d و #fecb69  ثم خصائص الدمج إلى القيمة Overlay 

ننسخ الطبقة ونزيحها قليلا

ثم إلى القائمة Menu>Layer>New Layer Adjustment> Curves

نغيّر خصائص الدمج إلى القيمة Overlay 

ننسخ الخط مرات كثيرة وفي كل مرة نزيحه حتى نعطي للصورة تدرجًا في الخطوط- تموجات-

ننشئ نسخة تدمج جميع الطبقات عن طريق الاختصار Ctrl+Alt+Shift+E

من القائمة Menu>Filter>Sharpen > Sharpen

ترجمة -وبتصرّف- للدّرس: Réaliser l’effet de Battlefield 4 avec Photoshop لصاحبه Grafolog

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

اختر الصورة التي سنطبق التأثير عليها، أنا اخترت هذه الصورة المجانية من موقع Flickr لتطبيق هذا التأثير عليها.

افتح الصورة باستخدام الفوتوشوب ثم ضاعف طبقة الأرضية عبر الضغط على الاختصار Ctrl+J.

حدّد الطبقة الجديدة من لوحة الطبقات ثم اذهب إلى القائمة

Filter > Blur > Surface Blur

طبّق القيمة 6 على Radius والقيمة 10 على Threshold.

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

حدّد كلا الطبقتين ثم اذهب إلى القائمة

Layer > Merge Layers

أو اضغط الاختصار Ctrl+E.

ضاعف الطبقة الجديدة ثم حدّدها من لوحة الطبقات ثم اذهب إلى القائمة

Image > Adjustment > Desaturate

وذلك لإزالة الألوان وتطبيق تأثير الإشباع اللوني.

غيّر خصائص مزج الطبقة إلى Hard Light ثم خفّف التعتيم Opacity إلى 50%.

ضاعف الطبقة الأساسية ثم حرّكها إلى أعلى لوحة الطبقات ثم اذهب إلى القائمة

Filter > Other > High Pass

ضع القيمة 10 ثم اضغط OK.

وأيضًا غيّر خصائص مزج الطبقة إلى Hard Light ثم خفّف التعتيم Opacity إلى 50%.

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

ولإضافة أول تأثير لوني على الصورة اذهب إلى القائمة

Layer > New Adjustments Layer > Gradient Map

طبّق التأثير الأبيض والأسود ثم غيّر خصائص المزج إلى Soft Light.

وللتأثير الثاني اذهب إلى القائمة

Layer > New Adjustment Layer > Hue/Saturation

خفّف قيمة Saturation إلى -60.

استخدم فرشاة صغيرة الحجم ثم حدد طبقة القناع لطبقة التعديلات اللونية الأخيرة وقم بالتلوين فوق فم الطفلة.

ضاعف هذه الطبقة ثم حدد قناع الطبقة ثم اذهب إلى القائمة

Image > Adjustment > Invert

ثم عدّل قيمة Saturation إلى +50 وهذه العملية ستبرز لون الشفاه الأحمر فحسب من بقية أجزاء الصورة.

ابحث في الإنترنت عن صورة لانعكاسات الإضاءة كهذه الصورة المجانية من موقع PSDGraphics.

توجد نسختان من هذه الصورة، أحدهما بصيغة Jpg بخلفية سوداء والأخرى بصيغة Png بخلفية شفافة ويمكن استخدام أيها ولكنني استخدمت صورة الخلفية الشفافة لسهولة تطبيق التأثير المطلوب من خلالها. ألصق هذه الصورة في طبقة جديدة فوق باقي الطبقات ثم اعكسها أفقيًّا ثم عدّل بالحجم والموقع حتى تصل إلى الشكل المناسب أكثر ثم غيّر خصائص المزج إلى Screen لإخفاء اللون الأسود والإبقاء على الإضاءة فقط ثم خفّف التعتيم Opacity إلى 80%.

خفّف المستويات Levels لهذه الطبقة إلى النصف تقريبًا.

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

استخدام فرشاة بحجم أصغر وباللون البرتقالي ارسم بقعتين في باقي مساحة الصورة.

قم بإضافة طبقة جديدة ثم لوّنها بالأسود وغيّر خصائص المزج إلى Color Dodge ثم استخدم ذات الفرشاة البرتقالية ولّن فوق ذات البقع البرتقالية في الطبقة السابقة.

سنضيف المزيد من تأثيرات الإضاءة. احصل على صورة تأثير أزرق ووردي مميّز من الإنترنت كهذه الصورة المجانية من موقع Wallpapercave.

ألصق هذه الصورة في طبقة جديدة فوق جميع الطبقات وغيّر خصائص المزج إلى Soft Light.

أضف طبقة جديدة سوداء وغيّر خصائص المزج إلى Color Dodge ثم استخدم فرشاة بيضاء ناعمة بأحجام صغيرة متنوعة لرسم بقع متفاوتة الأحجام على مختلف أرجاء الصورة.

حدّد هذه الطبقة ثم اذهب إلى القائمة

Filter > Blur > Gaussian Blur

ثم طبّق القيمة 4.4

أنشئ طبقة جديدة ثم استخدم أداة التدرج اللوني Gradient ثم انقر على مُصغّر شكل التدرج من شريط أدوات التدرج لفتح نافذة التعديل على التدرج ثم اختر تدرج Noise ثم فعّل خياري Restrict Colors و Add Transparency واجعل قيمة Roughness عند 100%.

استخدم تدرجًّا زاويًّا ولوّن من الجزء العلوي الأيمن باتجاه قطري إلى الجهة السفلية اليسرى.

حدّد هذه الطبقة ثم اذهب إلى القائمة

Image > Adjustment > Desaturate

غيّر خصائص المزج إلى Color Dodge وخفّف التعتيم إلى 50%. خفّف تعتيم جميع طبقات تأثيرات الإضاءة المختلفة إلى 50%.

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

يمكنك قص الصورة لإخفاء العيوب على أطرافها بشكل طفيف وستكون هذه هي النتيجة النهائية.

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

المصادر:

صورة الفتاة الصغيرة مجانية من موقع Flickr بعنوان Lily لصاحبها Ray Dumas تحت الترخيص (CC BY-SA 2.0) وقد تم التعديل على الصورة بحسب الخطوات المذكورة في الدرس.

صورة انعكاس الإضاءة بعنوان Lens flare effect من موقع PSDGraphics.

صورة الخلفية الزرقاء والوردية بعنوان Purple And Blue من موقع WallpaperCave.

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

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

افتح الصورة المطلوبة في الفوتوشوب. أنا استخدمت هذه الصورة من موقع Unsplash.com. أضف طبقة تعديل تشبّع الألوان Hue/Saturation من خلال أيقونة إضافة طبقة تعديلات الموجودة أسفل لوحة الطبقات.

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

اختر طبقة الخلفية ثم اذهب إلى القائمة

Select > Color Range

غيّر خيار التحديد إلى خيار Sample Colors ثم انقر على الصورة لاختيار عينات الدرجات اللونية المختلفة. حاول البحث عن اللون الذي يوفّر التباين الجيد أثناء متابعتك لنافذة المعاينة الصغيرة ومشاهدة النتيجة. المزلاج الضبابي يمكن تعديله لضبط سطوع التحديد.

أضف طبقة جديدة بما أن التحديد ما زال مفعّلًا ثم لوّن تلك المنطقة باللون الأبيض عبر الاختصار CMD+Backspace. خفّف التعتيم لنحو 70-80% لإضافة بعض التفاصيل إلى الغطاء الثلجي عبر السماح للصورة الأساسية بالظهور قليلًا.

أحيانًا يكون هذا التداخل الأبيض مطبّقًا على مناطق غير ضرورية. أضف قناعًا للطبقة ثم استخدم ممحاة بفرشاة ناعمة لمسح تلك المناطق غير المرغوبة كالسماء في هذه الحالة.

اسحب طبقة الخلفية إلى أيقونة طبقة جديدة أو حدّدها واضغط الاختصار CMD+J لمضاعفتها ثم ضع النسخة الجديدة أعلى لوحة الطبقات. غيّر خصائص المزج إلى Soft Light ثم خفّف التعتيم إلى 20-30% لإعادة بعض التباين إلى الصورة.

أضف طبقة تعديلات بلون جامد واختر لونًا سماويًّا كاللون 7bbdf6. غيّر خصائص مزج الطبقة إلى Soft Light وخفّف التعتيم لنحو 10-20% لتطبيق منظر تأثير لون أزرق بارد خفيف.

أنشئ طبقة جديدة ولوّنها باللون الأبيض. اذهب إلى القائمة

Filter > Noise > Add Noise

واختر القيمة 100 للخيار Gaussian وفعّل Monochromatic.

اذهب مباشرة إلى القائمة

Filter > Blur > Gaussian Blur

لإزالة الحدّة من الضجيج عبر وضع القيمة 1px للتمويه.

غيّر خصائص مزج الطبقة إلى Screen لتحويل اللون الأسود في الطبقة إلى شفّاف وسامحًا فقط للون الأبيض بالظهور.

اذهب إلى القائمة

Image > Adjustments > Levels

أو اضغط على الاختصار CMD+L ثم حرّك مزلاج الظلال لليمين لتخفيف كثافة لون الضجيج الأبيض وجعلها تبدو بمظهر حبّات خفيفة من الثلج.

أضف طبقة جديدة واتبع ذات الخطوات السابقة من تلوين بالأبيض وإضافة الضجيج ومن ثم التمويه ولكن سيكون تمويه Motion Blur هذه المرة وبقيمة 10px وزاوية انحراف خفيفة.

استخدم المستويات Levels لتخفيف كثافة نمط الثلج ثم اضغط على الاختصار CMD+T لتحويل طبقة الثلج الثانية. استمر بالضغط على Alt وShift أثناء تكبير الطبقة للمحافظة على المركزية ونسبة الحجم. عادة عند تكبير التصاميم النقطية فإن التصميم سيتشوّه قليلًا وهذا في الواقع ما نهدف إليه مع تأثير الثلج هذا.

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

انتهينا الآن من تحويل مشهد صيفي حيوي إلى مشهد شتوي مثلج بمساعدة أداوت وتعديلات الفوتوشوب. إن خاصية Hue/Saturation ساعدت على استبدال الألوان الدافئة بألوان باردة بينما أداة التحديد اللوني Range Selection ساعدت على تحديد الأعشاب وأوراق الشجر لتطبيق التأثير عليها. وتم تعزيز التأثير بتأثير الثلج الواقعي المصنوع بالكامل بواسطة برنامج الفوتوشوب.

ترجمة -وبتصرّف- للمقال: How To Change a Photo from Summer to Winter in Photoshop  لصاحبه: Chris Spooner

تعلّمنا في المقال السابق ما هو فن البِكسل Pixel Art وماهي أنواعه وأشهر استخداماته. في هذا الدرس سنتعلّم أساسيات الرسم بهذا الفن من نوعية غير-إيزمترك Non-Isomertic وهو النوع المسطّح البسيط بدون أبعاد متساوية أو شبه ثلاثي أبعاد بل رسومات عادية بسيطة تُظهر الموضوع المرسوم من جهة واحدة فقط.

هناك عدة برامج يمكنها القيام برسم هذه النوعية من الرسومات، بعضها بسيط وسهل للغاية وبعضها احترافي ومخصّص لرسم هذه النوعية. أسهل وأبسط هذه البرامج برنامج الرسّام MS Paint من مايكروسوفت والذي يأتي عادة مع نظام التشغيل ويندوز Windows ولاستخدام هذا البرنامج يكفي أن نستخدم أداة القلم مع أصغر قياس لحجم الخط وتكبير المنظور إلى أكبر درجة وهي 800% لتتمكن من رسم رسومات بِكسل.
وفي هذا الدرس سنتعلّم كيفية تخصيص الفوتوشوب لرسم رسومات بِكسل. بدايةً سنرسم شيئًا بسيطًا لفهم الفكرة الأساسية.
افتح برنامج الفوتوشوب وأنشئ مستندًا جديدًا، عليك اختيار حجم العمل الذي سنرسمه، وبما أننا سنرسم بفن البكسل الصغير نسبيًّا فإن حجم العمل سيكون صغيرًا أيضًا، وفي هذه المرحلة سنرسم رسمًا صغيرًا جدًّا، لذلك اختر حجم 24x24 بكسل ولتكن الخلفية بيضاء. طبعًا يمكننا رسم رسومات بِكسل كبيرة وحتى ضخمة بالقياسات الكبيرة وستكون مذهلة ورائعة تلك الرسومات، ولكن رسمها سيستغرق وقتًا وهذا ما ستقوم به لاحقًا بعد أن تتعلم كيفية القيام بذلك.

كما سنشاهد ستكون مساحة العمل صغيرة للغاية وسيكون الرسم بداخلها مستحيلًا لذلك سيتوجب علينا تكبير منظور العمل من خلال أداة المُكبّر أو بالضغط على أيقونة حجم المنظور أسفل يسار البرنامج والذي سيكون حاليًّا 100% لنجعله 800% على الأقل.

وأنا في هذه الحالة هنا جعلته 1600%.

الآن اختر أداة القلم والتي ستظهر بعد الضغط بالفأرة باستمرار على أداة الفرشاة ثم اختيار أداة القلم Pen Tool.
لا يمكننا استخدام أداة الفرشاة لأنها تتميز بحواف ناعمة بينما تتميز رسومات البِكسل بحواف خطوطها ونقاطها القاسية والحادة تمامًا.

سيصبح شكل المؤشر بشكل مربع وهو بحجم 1 بكسل حيث يجب أن نتأكد من أن حجم أداة القلم هو 1 بكسل من شريط أدوات أداة القلم. وللتأكد من حدّة وقساوة الحواف اجعل قيمة Hardness عند 100%.

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

View > Show > Grid

أو بالاختصار Ctrl + ‘ وستظهر الشبكة على حقل العمل.

قد تكون الشبكة غير منتظمة وتحوي مربعات فاتحة الحدود داخل مربعات داكنة الحدود، في هذه الحالة عليك بالذهاب إلى القائمة

Edit > Preferences > Guides, Grid and Slices

ثم ضع القيمة 1 في خانة Gridline Every وفي خانة Subdivisions وتأكد من أن وحدة قياس Gridline Every هي Pixels.

في بعض الأحيان قد يقوم الفوتوشوب بتنعيم الحواف قليلًا لجعل الصورة تبدو بدقّة عالية ولتجنّب ذلك عليك بالذهاب إلى قائمة

Edit > Preferences > General

أو بالضغط على الاختصار Ctrl + K ثم ضع خيار Image Interpolation عند البند Nearest Neighbor (Preserve Hard Edges) وبذلك نحافظ على قساوة الحواف في كافة الظروف.

الآن سنبدأ عملية الرسم. ابدأ برسم الخطوط الخارجية لشكل فاكهة ولتكن كمثرى على سبيل المثال. اتبع خطوات الرسم في الأسفل لتحصل على شكل الفاكهة المطلوب.

حصلنا على شكل الفاكهة الخارجي والآن سنقوم بتلوين هذا الشكل باستخدام ذات الأداة أداة القلم مع تغيير اللون واختيار اللون المناسب. ورسم جميع المناطق الداخلية للفاكهة.

شكل الفاكهة حتى هذه اللحظة سيبدو بهذا الشكل بدون خطوط شبكة (يمكنك إظهار خطوط الشبكة وإخفاءها بالاختصار Ctrl + ‘).

وبالحجم الطبيعي ستبدو بهذا الشكل.

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

والآن سنقوم بوضع آثار انعكاس الإضاءة على الجهة المقابلة من الفاكهة عبر استخدام ألوان فاتحة أكثر من اللون الأساسي وقد نستخدم اللون الأبيض للتعبير عن شدة الإضاءة واللمعان في نقطة معينة.

شكل التصميم بدون شبكة سيكون بهذا الشكل.

والشكل النهائي بالحجم الطبيعي.

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

هذا الدرس لتعلّم أساسيات تصميم رسومات Pixel Art من نوع Non-Isometric باستخدام برنامج الفوتوشوب وسيكون هناك دروس قادمة لرسومات أكثر تقعيدًا وأكبر حجمًا كذلك لدروس من نوعية Isometric الرائعة والممتعة.

يمكنكم القيام برسومات مشابهة وإدراجها في التعليقات أسفل الدرس لنتشارك هذه الخبرة الجديدة.

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

ما هو فن البِكسل؟

فن البِكسل أو Pixel Art هو فن رسومات قديم يشبه من حيث المبدأ الحياكة الصوفية كالرسومات على الملابس الصوفية إلا أن بداية هذا النوع من الفنون بدأ مع بدء ظهور أجهزة اللعب والحواسيب حيث لم يكن بمقدور تلك الأجهزة القديمة عرض رسوميات معقدّة وكثيرة الألوان وثلاثية الأبعاد كما في يومنا هذا لذلك اعتمد مطوّرو الألعاب في ذلك القوت على هذا النوع الوحيد المتوفّر لرسم خلفيات وشخصيات الألعاب بألوانها البسيطة، وعلى الرغم من بساطتها في ذلك الوقت إلا أنها كانت رائعة وممتعة للغاية ولعّل ألعاب Pacman و Mario وStreet Fighters وKingKong وSonic أبرز ألعاب تلك المرحلة شاهد ومثال رائع على روعة تلك الرسومات في تلك الحقبة من الزمن.

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

هذا مثال رسمته باستخدام برنامج الرسام Paint الموجود ضمن نظام الويندوز Windows حيث تظهر نقاط البكسل بوضوح عند التكبير وفي شكل الرأس الصغير تظهر النتيجة بالحجم الطبيعي.
وكانت رسومات البكسل بسيطة جدًّا في البداية حيث اعتمدت نظام ألوان 8bit لتتطور إلى 16bit ومنها إلى أكثر وأكثر حتى أصبحت متطورة جدًّا لدرجة أن الرسومات الحديثة منها أصبحت تتضمن تدرجات لونية عادية بعد زيادة حجم العمل وعدد الألوان المستخدم.
على الرغم من انتشار الرسومات عالية الدقة والرسومات ثلاثية الأبعاد إلا أن رسومات البكسل مازالت موجودة بقوة وبخاصة في ألعاب الأجهزة المحمولة كالهواتف الذكية وغيرها.
ومن الممكن رسم هذه الرسومات باستخدام تقنيات وأدوات اعتيادية كأدوات برنامج الرسّام Paint والفوتوشوب Photoshop أو يمكن رسمها بدون أدوات وبشكل يدوي وهو ما ينتج إبداعًا مميزًا قد لا تستطيع الأدوات تقديمه.

أنواعه:

تم تقسيم رسومات البِكسل إلى نوعين:

الإيزومِترِك Isometric:

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

سلسلة ألعاب Age of Empires

Diablo

Transport Tycoon

وهذه صور لبعض ألعاب الهواتف المحمولة تستخدم هذا النمط من الرسومات

Pocket Harvest

Zombie Commando

وهذه بعض الرسومات لهذا النمط لبعض المصممين

للمصممة Sylvia Flores Espinoza

للمصمم Robert Podgórski

للمصمم Sergey Kostik

غير الإيزومِترِك Non-Isometric:

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

Random Heroes 2

Sword Of Xolan

وقد اشتهرت مؤخرًا هذه الرسمات كثيرًا في رسم الوجوه التعبيرية (سمايلات) وخصوصًا في رسم الأيقونات التي تعتمد بشكل كبير على هذا النوع من الرسومات وبخاصة أيقونات مواقع الإنترنت.

ولتوضيح الفرق بين نوعي فن البيكسل إليك هذا المثال

Non-Isometric
        Isometric

وسنتعلّم في الدرس التالي كيفية تصميم رسومات بفن Pixel Art بنوعية Non-Isometric وكذلك في الدرس الذي يليه سنتعلّم كيفية تصميم نوعية Isometric.

مصادر الصور:

صور المصممين من صفحاتهم على Behance.
صورة التلفاز التوضيحية من موقع ويكيبيديا تحت رخصة CC BY-SA 3.0.

يُستَخدم فلتر High Pass لزيادة حدّة الصورة بشكل جيد، ولكن لهذا الفلتر استخدام آخر وهو تنعيم الجلد في صور الأشخاص. أنا أعلم أن هناك فلاتر أخرى لتنعيم الجلد كفلتر التمويه Blur وتمويه السطح Surface Blur وغيرها ولكنك تستطيع استخدام هذا الفلتر بالإضافة لتلك الفلاتر في نفس الوقت. في هذا الدرس سأعلمك كيفية القيام بالأمر.

الخطوة 1: ضاعف الخلفية.

الخطوة 2: اعكسها عبر الذهاب إلى القائمة

Image > Adjustments > Invert

أو بالضغط Ctrl/Cmd+I في لوحة المفاتيح.

الخطوة 3: طبّق فلتر High Pass، عبر الذهاب إلى القائمة

Filter > Other > High Pass

الخطوة 4: غيّر خصائص المزج إلى Overlay.

الخطوة 5: خفّف التعتيم Opacity إلى نحو 70%.

الخطوة 6: أضِف قناعًا للطبقة Layer Mask من أسفل لوحة الطبقات. قناع الطبقة سيبدو كمستطيل أبيض في لوحة الطبقات.

الخطوة 7: اختر أداة الممحاة Eraser Tool. حدّد القساوة Hardness عند 5% والتعتيم Opacity عند 17%.

الخطوة 8: أخيرًا ارسم بواسطة الممحاة فوق العيون، الشفاه، الشعر وجميع المناطق غير المرغوبة بحيث لا نريد أن نجعل هذه المناطق ناعمة وذلك لكي نحافظ على مثالية الصورة. عندما تبدأ باستخدام الأداة يمكنك تعديل حجم الفرشاة عبر مفتاحي [ ] في لوحة المفاتيح لاستخدامها بالشكل الملائم والأمثل.

وهذه هي النتيجة النهائية.

ترجمة -وبتصرّف- للمقال: How to Soften Skin Tones with High Pass in Photoshop  لصاحبه: Bijutoha

من السهل جدًّا تصميم خط منقّط باستخدام الفوتوشوب. كل ما تحتاج إليه هو تتبّع هذه الخطوات الثلاثة.

1. كيف تجهّز إعدادات أداة القلم لتصميم تأثير الخط المنقّط؟

افتح الصورة التي تريد رسم تأثير الخط المنقط حولها. أنا اخترت صورة هذه الكعكة.

الآن اختر أداة القلم Pen Tool مع اختيار خيار الشكل Shape من شريط خيارات هذه الأداة عبر القائمة المنسدلة.

سنتابع تجهيز إعدادات القلم من شريط الخيارات العلوي. اجعل لون التعبئة Fill بدون لون واجعل لون الحدود باللون الذي تريده. أنا اخترت اللون الأبيض وجعلتُ حجم الحدود 0.65pt.

2. كيف نستخدم أداة القلم لرسم مسار تحديد قبل تأثير الخط المنقّط؟

إذا انتهيت من الخطوة الأولى، عليك أن تقوم برسم تحديد حول الصورة. باستخدام أداة القلم كما يلي.

3. كيف تُجهّز وتُعِد تأثير الخط المنقّط النهائي؟

وصلنا إلى الخطوة الأخيرة. استخدم أداة القلم مع التأكيد على أن الخط الذي رسمناه محدّد سلفًا ثم اختر خطًّا منقطًّا من شريط الخيارات العلوي من قائمة Stroke Option. يمكنك تغيير إعدادات شكل وحجم الخطوط المنقطة من زر More Option أسفل القائمة. أنا قمتُ بجعل حجم الخط 4 وحجم الفجوة بين الخطوط 2 من أجل هذا التصميم.

وبهذا يتم صناعة خط منقط حول الصور في الفوتوشوب. وهذه هي النتيجة النهائية.

ترجمة -وبتصرّف- للمقال: How to Make Dashed Line Effect in Photoshop  لصاحبه: Bijutoha

نستطيع الولوج إلى نمط القناع السريع Quick Mask عبر النقر على أيقونته الموجودة أسفل شريط الأدوات على يسار شاشة البرنامج.

يمكنك تحديد أي جزء من الصورة بسهولة كبيرة لمسحها أو تعديلها عبر استخدام نمط القناع السريع.
يمكننا البدء باستخدام هذا النمط عبر النقر على الأيقونة في شريط الأدوات أو بالضغط على حرف Q من لوحة المفاتيح.
الآن اختر أداة الفرشاة Brush Tool أو اضغط على الاختصار Shift+B في لوحة المفاتيح واجعل حجم وقساوة الفرشاة 90% أو كما يناسبك فإذا اخترت قساوة الفرشاة 100% فإن الحواف ستكون قاسية جدًّا. أما إذا اخترت قساوة الفرشاة 0% فإن الحواف ستبدو متلاشية Fade Out ومتداخلة مع المحيط. أخيرًا حدّد لون المقدمة اللون الأسود لأن هذا اللون سيسمح بتحديد القناع على المساحات المطلوبة بينما اللون الأبيض سيمسح ميزة القناع من على المساحات لذلك اجعل لون المقدمة اللون الأسود ثم ابدأ بالرسم كما في الصورة التالية.

يمكن تعديل مساحات القناع التي رسمتها باستخدام أدوات الفرشاة، سطل الدهان أو أية أداة تحديد. انظر في الصورة التالية حيث قمتُ بتعديل أو مسح مساحة من القناع الأحمر التي وضعتها ضمن نمط القناع السريع. هنا استخدمت أداة الممحاة Eraser Tool ولاحظ أن اللون الأمامي مازال اللون الأسود.

يمكنك أيضًا تعديل أو إضافة مساحات قناع إضافية باستخدام أداة الممحاة أيضًا عبر جعل اللون الأمامي اللون الأبيض. فكما تشاهد في الصورة التالية قمتُ بإضافة مساحات إضافية باستخدام الممحاة مع جعل اللون الأمامي اللون الأبيض ضمن نمط القناع السريع.

وبعد الانتهاء من رسم القناع المطلوب عليك بالعودة إلى الوضع الطبيعي عبر النقر على زر أيقونة القناع السريع مجدّدًا أو بالضغط على مفتاح Q في لوحة المفاتيح.

ما سنراه في الصورة في الأعلى هو وجود تحديد ظاهر حول جميع المناطق التي لم نشملها بالقناع ضمن نمط القناع السريع. بما أننا نريد تحديد الأجزاء الأخرى بالعكس سنقوم بعكس التحديد عبر الاختصار Ctrl/Cmd+Shift+I أو من القائمة

Select > Inverse

والآن امسح ما هو مُحدّد لوضع لون أو خلفية جديدة.

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

يمكنك تعديل اللون الأحمر الخاص بنمط القناع السريع إلى لون آخر. انقر نقرًا مزدوجًا على أيقونة نمط القناع السريع ليظهر لك صندوق أدوات هذا النمط.

جرّب تغيير اللون والتعتيم وانظر للنتيجة.

ترجمة -وبتصرّف- للمقال: About Quick Mask Mode in Photoshop  لصاحبه: Bijutoha

سنتعلم في هذا الدرس كيفية تصميم خطوط ضوء مكثّفة حول شيء أو شخص لتتمكنوا من استخدام هذه التقنية الرائعة في تصاميمكم المستقبلية.

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

أعِد تحديد العنصر عبر النقر على طبقة هذا العنصر مع الضغط على مفتاح Ctrl ثم اذهب إلى القائمة

Select > Feather

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

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

افتح بعض الخامات اللطيفة وألصقها ضمن المستند. أنا اخترت صورة الألوان المائية من ضمن المجموعة المجانية لموقعGoMedia. أزِل ألوان الصورة عبر الأمر Desaturate.

غيّر خصائص المزج إلى Multiply لتحويل المساحات البيضاء في الصورة إلى شفافة.

اذهب إلى أنماط طبقة العلبة وأضف توهّجًا خارجيًّا Outer Glow وغيّر ضمن إعدادات التوهّج خصائص المزج إلى Color Dodge للحصول على توهّج شديد بالفعل.

قم بإعداد الفرشاة لرسم الخطوط التي سنجعلها تتوهج فيما بعد، جرّب مع إعدادات الفرشاة للحصول على حدود مدبّبة رقيقة. الخيار الرئيسي لضبط التحكم Control وإعدادات الحد الأدنى للقُطر Minimum Diameter في قسم ديناميكية الشكل Shape Dynamics.

استخدم أداة القلم لرسم مسارٍ منحنٍ ناعم، ومع اختيار ذات الأداة انقر بالزر الأيمن واختر Stroke Path وتأكّد من أن خيار Brush مفعّل إلى جانب محاكاة الضغط Simulate Pressure.

أضِف توهجًا إضافيًّا آخر إلى طبقة حدود الفرشاة باستخدام إعدادات Color Dodge مشابهة للعملية السابقة.

ارسم خطوطًا قدر ما تريد حول العلبة مع إبقاء الخطوط تتدفق بسلاسة قدر الإمكان في سلسلة متنوعة من الاتجاهات.

إن تأثيرات Color Dodge تعمل بشكل أفضل عندما تكون العناصر المتداخلة ملوّنة بتدرجات لونية، هنا قمتُ بتكبير حجم التدرج اللوني للسماح بظهور تأثيرات الإضاءة بشكل أفضل حول العنصر.

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

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

اصنع تحديدًا من طبقة العلبة ثم اعكس التحديد واحذف المساحات غير المطلوبة.

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

امسح غالبية الخطوط تاركًا المساحات التي تمتزج فيها الخطوط مع العنصر.

سنضيف بعض نقاط الأشعة الضوئية إلى هذا التصميم على شكل مجموعة من النقاط الضوئية المتوهجة. ابدأ بإعداد فرشاة جديدة وهذه المرّة تلاعب بقيم التبعثر Scatter والتباعد Spacing وحجم Jitter.

ارسم بواسطة أداة الفرشاة مجموعة من هذه النقاط مختلفة الأحجام بحيث تغطي كامل مساحة التصميم حول العنصر وخطوط الإضاءة. أضِف لها بعض التوهج الخارجي كما فعلنا في خطوط الإضاءة.

امسح معظم الجزيئات لتترك أثرًا خفيفًا مناسبًا مع اختلافات طفيفة في التعتيم.

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

ترجمة -وبتصرّف- للمقال: How to Create Intense Light Streaks in Photoshop  لصاحبه: Chris Spooner