البحث في الموقع

يمكن أنْ يكون تطوير موقع ويب بدون الأدوات المناسبة مدعاة للكثير من الإحباط. ستجد أحيانًا أنّك تعمل على برنامج متقدّم جدًّا بالنسبة لمستواك، أو يمكن أن تكون بحاجة للانتقال إلى برنامج موجّه للمحترفين. يتعلّق الأمر بمستوى قدراتك بوصفك مصمّم مواقع، إلّا أنّ برامج التصميم للويب هي - مجملًا - نفسُها سواءٌ كنت مبتدئًا أو مستخدمًا متقدّمًا. الفرقُ الوحيد هو أنّك قد لا تستخدم جميع الميزات المتوفّرة في أداة معيّنة إنْ كنت مستخدمًا مبتدئًا أو بخبرة متوسّطة. تحتاج لاستكشاف ما يستخدمه المحترفون ومتابعة دورات وقراءة مقالات لمعرفة الطريقة التي تجعل تصميماتك أفضل ما يمكن أن تصل إليه. لذا، سنلخّص في هذا المقال بعضًا من الأدوات وبرامج التصميم التي تحتاجها أكثر من غيرها، ونشرح ما الذي يُستخدَم فيه كلّ واحد منها خلال عمليّة التطوير. ووردبريس ووردبريس هو نظام إدارة محتوى وتدوين بلغت شهرته ومرونته حدًّا جعل ثُلث مواقع الويب الموجودة تستخدمه. تمكن استضافة ووردبريس ذاتيًّا (وبالتالي يكون لديك التحكّم الكامل في موقعك). علاوة على ذلك، فإنّ المنحى التعلّمي لووردبريس سهلٌ مقارنة بمنصّات مثل Weebly وShopify. يتوفّر برنامج ووردبريس مجانًا، لكنْ ستحتاج للدفع مقابل أمور من قبيل اسم النطاق (Domain name)، الاستضافة (Hosting) والقوالب. بالمختصر، تهدف هذه المنصّة الرائعة لبناء مواقع الويب إلى العمل في الخلفيّة وإعطائك فرصة إنشاء صفحات، وتدوينات، وقوالب وغيرها بسهولة. فوتوشوب يشتهر فوتوشوب بتحرير الصوّر والتعديل عليها، إلّا أنّ هذا المحرّر الضخم يصلُح لأي نوع من مشاريع التصميم. يُستخدَم فوتوشوب لإنشاء شعارات لمواقع الويب أو لتصميم نماذج أوليّة لها. ليس غريبًا أن تجد من يستخدم فوتوشوب لإنشاء مخطّط تصميم كامل لموقع ويب، اعتمادًا على نظام الطبقات (Layers) والتصدير الذي يتوفّر عليه فوتوشوب ويوفّر الكثير من الميزات. Sketch يُنظَر إلى برنامج Sketch غالبًا على أساس أنّه إصدار مُبسَّط من فوتوشوب. يعود السبب في ذلك إلى أنّ Sketch يركّز كثيرًا على التصميم للويب، في حين يمكن استخدام فوتوشوب لأي مشروع تصميم. الميزة الأساسيّة لبرنامج Sketch هي آليّة عمله مع التصاميم المتجهيّة (Vectors)، ممّا يجعله رائعًا لتوسعة التصاميم أو تقليصها بدون فقد أي بيانات أثناء العمليّة. علاوةً على ذلك، يمكن اختبار التصميم على الأجهزة الجوّالة مباشرةً من البرنامج. GIMP توجد في GIMP تقريبًا نفس الميزات الموجودة في فوتوشوب. الفرق الأساسي هو أنّ GIMP مجانيّ تماما. يحاجج بعض المصمّمين بالقول إنّ GIMP معقّد الفهم قليلًا، إلّا أنّه منتَج مجانيّ رائع يوفّر ميزات ضروريّة للعمل على تصميم المواقع وتحرير الصوّر. Adobe Dreamweaver يعدّ Dreamweaver مصنعًا لتصميم المواقع، حيث يوجد محرّر شفرة برمجيّة على جانب الشاشة ومعاينة لموقع الويب على الجانب الآخر. يمكنك بهذه الطريقة التعديل على الشفرات البرمجيّة ورؤية النتيجة مباشرة. في حين يركّز فوتوشوب على إنشاء عناصر موقع الويب أو النماذج الأوليّة، فإنّ Dreamweaver ينشئ موقع ويب جاهزًا للعمل. يمكن بنهاية العمليّة تصدير ملفات موقع الويب ووضعها على الخادوم. WAMP الخطوة المواليّة لتصميم موقع باستخدام برنامج مثل ووردبريس أو Dreamweaver هي اختباره، ثم تعديله وفقًا لنتيجة الاختبارات. قد لا ترغب في الدفع مقابل خادوم، فقط لعرض موقع نصف مكتمل على الجمهور. توجد طريقة أفضل، وهي الحصول على خادوم محلّي مثل WAMP. بالمختصر، تشغّل الخادوم على حاسوبك الشخصيّ، وتنشئ أو تختبر موقع الويب كما لو كان موجودًا على الشبكة، وأخيرًا تنقل الملفات إلى الخادوم المتاح للعموم. يعمل برنامج WAMP على أنظمة التشغيل وندوز، ولكن يوجد بديل يعمل على حواسيب Mac وهو MAMP. عجلة الألوان (Color Wheel) من المهمّ جدًّا أن تكون لديك أداة ألوان أثناء تصميم موقع ويب. عجلة الألوان أداة مجانيّة توفّر طريقة لبناء مخطّطات ألوان ذات مظهر متناسق لاستخدامها ضمن موقع الويب. قد تكون لديك فكرة باستخدام لون معيّن في جزء من الموقع، إلّا أنّ المشكلة هي أنّ ألوانًا كثيرة لن تظهر متناسقة مع اللون الرئيسي لموقعك. تأتي عجلة الألوان للتغلّب على هذه المشكلة، إضافة إلى أنّها تساعد في تحديد الرمز الدقيق للون مّا، بدلًا من تخمينه. Adobe Spark يعمل برنامج Adobe Spark جيّدًا لتصميم البصريّات الاحترافيّة بأنواعها للاستخدام في شبكات التواصل الاجتماعي، أو منصّات التدوين، أو البطاقات المهنيّة، وغيرها. تختصر الأداة العمليّة الطويلة لإنشاء موادّ بصريّة من الصفر على فوتوشوب. كما توفّر قوالب احترافيّة كثيرة للاختيّار بينها. بالمختصر، تمكّن غير المصمّمين من إنشاء موادّ بصريّة جميلة للاستخدام على شبكات التواصل الاجتماعي أو على مواقع الويب دون اللجوء إلى فوتوشوب. ترجمة – بتصرّف – للمقال ‎9 Must-Have Web Design Tools and Alternatives لصاحبه Brenda Stokes Barron.

يختلف تصميم الأيقونات Icons كثيرًا عن تصميم الرسومات Graphics، فهناك الكثير من القواعد والحدود التي لا يمكن تخطّيها أثناء تصميم الأيقونات. وفي أي منصة ومهما اختلف التصميم، فالأيقونة دائمًا تُعَد أداةً لإيصال فكرة معينة، فالأيقونات هي تصاميم صغيرة تُغني عن استخدام الكلمات وتحسّن التصميم عمومًا، نظرًا لعدم إمكانية تزويد المواقع والتطبيقات بتصاميم ومعلومات مرئية متكاملة لكل خطوة، وهذا ما يزيد من جدوى استخدام الأيقونات. يجب مراعاة الكثير من الجوانب أثناء تصميم الأيقونات لتتميزها عن الرسومات. ولتوجيهك في هذا المجال إليك قائمةً تجمع 14 خطأً لتجنّبه، حيث نعرض فيها أخطاءً فادحةً يسهل الوقوع فيها، مع كيفية تجنبها. 1. التصميم دون استراتيجية وخطة واضحة إياك البدء بتصميم دون تخطيط مسبق ووضع خطة استراتيجية واضحة للتصميم. قد لا تحتاج لتخطيط محكم ومناقشة لاستراتيجيات الأيقونات بحد ذاتها، لكن الأمر جوهري للعلامات التجارية وتجربة المستخدم، وهذا ما يفعله المحترفون والساعون للكمال، لذا ناقش المشروع كاملًا بأهدافه ومتطلباته مع عميلك وفريقك، ويُفضّل وضع الأهداف بعيدة المدى نصب عينيك قبل التفكير بمرحلة التصميم، إذ ستجد فرقًا في التصميم وتجربة المستخدم عندما تتبع أسلوبًا منظمًا جيدًا ومتسلسلًا واختيارًا مناسبًا لمواقع الأيقونات، وكذا خطةً محكمةً للتصميم، فقد لا تلبّي أيقوناتك دوافع التصميم وتطلعات تجربة المستخدِم بدون استراتيجية أساسية وتخطيط مسبق. 2. إهمال تنوع أبعاد الشاشات أثناء تصميم الأيقونات عليك أخذ أبعاد الشاشة التي تُعرض فيها أيقوناتك بالحسبان، حيث يجب إبقاء الأيقونات واضحةً مهما اختلفت أبعاد الشاشة، أي يجب تصميم الأيقونة بحيث تتكيف بمرونة مع اختلاف الأبعاد. تستطيع إضافة عناصر وتفاصيل لإبراز تصميمك في تصميم الرسومات، لكن في تصميم الأيقونات تكون المساحة محدودةً جدًّا، بحيث أن إضافة التفاصيل سيزيدها تعقيدًا وسيؤثر على التصميم عند اختلاف الشاشة، فقد تبدو مشوشةً وغير واضحة في الشاشات الصغيرة، لذا حافظ دومًا على بساطة التصميم وفكّر بالأحجام المختلفة للشاشات، وكيف ستبدو أيقوناتك فيها، وتجنّب تصميم الشكل على حساب وضوح الأيقونات. 3. الاختيار الخاطئ لمكان الأيقونات إذا كنت تعمل على تصميم كامل أو على تصميمك الخاص، فستصمم الأيقونات بدايةً وتختار أماكنها أيضًا. ومكان الأيقونة هو الموقع الذي ستأخذه لمساعدة المستخدِم وإيصال الرسالة المطلوبة له بصورة صحيحة، طبعًا يجب طرح هذا السؤال قبل تصميم الأيقونات، فتحديد الموقع يُمكّنك من إنشاء تصميم أوضح وأكثر فعالية، ويُعَد مكان الأيقونة أحد العناصر الأساسية التي قد تؤثر سلبًا على التصميم إن لم تنتبه لها كفايةً، فوضع الأيقونة المناسبة في المكان المناسب يجعل التصميم مريحًا ويساعد المستخدِم على فهم أفضل للتصميم، لذا خُذ الموقع المبدئي للأيقونات بالحسبان أثناء تصميمها. 4. التصميم دون استخدام الشبكات Grids الشبكة Grid هي مربعات تملك الحجم ذاته تفصلها مسافات متساوية، وتساعد في الحفاظ على تناسق الأيقونات ضمن حدود موحدة، فقد تتجاوز حجم أو مساحة العنصر سهوًا أثناء تصميمك للأيقونات، وإن لم يكن لأيقوناتك الحجم والمسافات ذاتها، فقد لا تبدو مثل أيقونات أساسًا، وسيعطي التصميم النهائي للأيقونات المبعثرة والعشوائية انطباعًا خاطئًا. ولتجنّب هذا النوع من الأخطاء اعتمد على الشبكات في تصميمك للأيقونات، حيث ستساعد الشبكات المصممين الهواة كثيرًا، وبالتدريب المستمر سيتمكنون من التصميم جيدًا دونها. 5. كثرة العناصر من الأخطاء التي يجب تجنّب الوقوع بها أيضًا، هي زيادة الإضافات والعناصر غير الضرورية إلى الأيقونات لأسباب مختلفة منها تحسين مظهر أيقوناتك، والتي تنتهي عادةً بجعل التصميم أسوأ، لأن أي زيادة بدون توجّه ودراسة ستعيق وصولك للغاية من الأيقونات، إذ يجب تحقيق التوازن بين العناصر الأساسية والكمالية. قد تتمكن من توظيف المنظور والظلال بحكمة في التصميم، لكن لا يمكن للأشكال والخطوط والعناصر غير الضرورية تحسين تصميمك بالطريقة التي تتوقعها، لذا تجنّب استخدام الكثير من العناصر لأجل المظهر فقط. 6. أخطاء المنظور والظلال بفرض أنك تصمم مجموعة أيقونات لموقع أو برنامج معقد، وعليك تصميم أيقونات صغيرة مبتكرة لجعلها أكثر تميّزًا، فإذا حاولت تمييزها بمنظور غير مألوف، فسيكون الأمر صعبًا، إذ في معظم الحالات يجب امتلاك كل أيقونات المجموعة للمنظور ذاته، وعند تغييرك للمنظور من أيقونة إلى أخرى، فهذا سيعرّض مهاراتك التصميمية للنقد. وذات الشيء بالنسبة للظلال، فلها ارتباط مباشر بالمنظور، وتطبيق تأثير الظل على وجه خاطئ أو مبالغ به، سيُفقِد التصميم شكله الاحترافي. لذا يفضل الحفاظ على البساطة إن لم تكن ترغب بإهدار الوقت في إنشاء منظور مميز وظلال فريدة، وإذا أردت ذلك فتأكد من أن المنظور والظل يحسّنان التصميم بزيادة وضوحه وتناسقه. 7. استخدام النصوص يُعَد استخدام النصوص أمرًا آخر عليك تجنّبه أثناء تصميم الأيقونات، وهذا أمر شخصي لأنك قد تضطر أحيانًا لاستخدام نصوص، مثل تصميم أيقونة تتضمن شعار علامة تجارية تحتوي نصًّا، فوقتها ستصبح ملزمًا بإدراجه، ويجدر بك الاهتمام أكثر بالتصميم لأن الشعارات التي تحوي خطوطًا صغيرة ستبدو أصغر عند استخدامها ضمن الأيقونات، كما قد تفقد الوضوح وجمال التصميم. عدا ذلك لا تجعل النص أحد عناصر أيقوناتك، لأن النص قد يجعل الأيقونة مشوّشةً ويخل بالتعريف الأساسي لتصميم الأيقونات، لهذا استغل المساحة في إضافة عنصر مميز واجعل الأيقونات مفيدةً في إيصال أبسط المعلومات للمتلقين. 8. أخطاء التناسق تجنّب ارتكاب أخطاء التناسق Consistency Mistakes، وهي الإضافات التي تُفقد التصميم تناسقه، حيث يجب لمجموعة الأيقونات امتلاك تناسق مرئي، يمنحها هويةً واحدةً، وإذا صنعت تعديلًا مميزًا لكل أيقونة بالمجموعة، فلن تحافظ على درجة واحدة من الاتساق وستُفقدها الترابط المرئي بينها، لذا تذكر الحفاظ على التناسق دون خسارة الإبداع والجمال. 9. عدم أخذ تغيير الأبعاد بالحسبان إذا زدت حجم تصاميمك النقطية Raster Designs فستحصل على نسخ مُخرّبة ومموهة لأيقوناتك، لذا يُفضّل العديد من المصممين تصميم الأيقونات بصيغة الرسومات الشعاعية Vector Format، ولكنها ليست الطريقةً العملية المثالية، ففي بعض الأحيان قد لا تملك أدنى فكرة أين ستُستخدم تصاميمك وكيف ستُعدّل، وإن لم يكن عميلك متأكّدًا من مكان استخدامها النهائي، فقد تواجه تصاميمك بعض المشاكل، وفي هذه الحالات يفضّل إنشاء الأيقونات بأحجام مختلفة كيلا تتأثر عند تغيير حجمها، بحيث تحافظ على جودتها. لذا فالأفضل تصميمها أساسًا بمختلف الأحجام المطلوبة. 10. عدم التركيز على الفئة المستهدفة يُعَد عدم فهمك للفئة المستهدفة هو أحد الأخطاء الفادحة التي قد يرتكبها المصمم، فالتصميم النهائي له هدف، وإن لم يفهم المستخدمون الأيقونات أو لم يتقبلوها، فستكون خاطرت بعدم تحقيق هدفك، إذ قد لا يكون الشكل أو التصميم المثالي بالنسبة لك جيّدًا كفايةً للمستخدِمين، لذا قبل تصميم الأيقونات عليك أن تأخذ بالحسبان أعمار المستخدمين ومعتقداتهم التقليدية وعاداتهم الاجتماعية والمعاني الثقافية وما إلى ذلك، فإن لم تكن الأيقونات مناسبةً أو مقبولة، فستكون المسؤول عن خسارة التصميم كاملًا، ولهذا فمن الأفضل إعطاء الوقت المطلوب وإجراء البحث الكافي لفهم فئتك المستهدفة. 11. اختيار لوحات ألوان غير ملائمة تُعَد الألوان عنصرًا أساسيًا في أي تصميم، ويمكن مساهمة مخطط ألوان Color Scheme جيّد بتحسين تصميمك إلى مستوىً أفضل، وبالعكس، فقد يدمّر مخطط ألوان سيء تصميمًا رائعًا، لذا في تصميم الأيقونات عليك عدم العبث بالألوان كثيرًا، وهذا لا يقلل من أهميّة اللون بأي شكل، حيث يجب أن تتميّز تصاميمك عن تصاميم الآخرين لتبقى في ذهن المستخدِمين ويتمكّنوا من تذكّرها بسهولة، ولهذا تجنّب التصاميم أحادية اللون Monochromatic colors والألوان الباهتة Bland Colors في الأيقونات، واستخدم مخططات لونية Color Schemes جذّابة ومؤثرة لجذب الانتباه المطلوب والتميّز عن المنافسين. وفي نقطة أخرى، لا تغير اللون من أيقونة لأخرى ضمن نفس المجموعة، فقد يخلّ ذلك بعنصر التناسق. 12. الأيقونات المتشابهة كثيرا من المهام الصعبة على المصمم، الحفاظ على تناسق الأيقونات فيما بينها مع إضفاء لمسة مميزة لكل أيقونة بمفردها، فقد يخل أحيانًا بالتوازن بين عنصري التناسق والإبداع عندما يُطلب تصميم مجموعة أيقونات كاملة، فإن كانت أيقوناتك متشابهةً كثيرًا فيما بينها، فقد لا يفرّق المستخدم بينها، وبالتالي لا يُفهم الهدف المحدد لكل منها، كما قد تربك المستخدِمين. لذا حاول الحفاظ على تناسق العناصر الأساسية مع جعل كل تصميم مميّزًا عن البقية لضمان فهم أسهل. 13. تعقيد التصميم التصميم المعقد هو التصميم المتضمن لكثيرٍ من التفاصيل ضمن الأيقونات التي قد تبدو جيدةً في مواقع محددة لكنها غير عملية، فعند إضافة الكثير من التفاصيل لتصميمك، فسيصعُب الفهم على المستخدم، لأن التصميم المعقد يستهلك منك الوقت ويمنح المستخدم تجربةً سيئة، لذا عليك الاكتفاء بتفاصيل تقنعك، ولا تعقّد تصميمك وتجعله صعب الاستخدام. 14. التصميم من الصفر أسهل طريقة لإيجاد الأيقونات هي تصميمها من الصفر، لكن عندها من المحتمل تكرار العناصر الموجودة مسبقًا، وهناك سبب لإنشاء المصممين تصاميم جديدة، فهو أمر مهم لكل من العملاء والمستخدِمين إضافةً لكسره حاجز اللغة، فالأيقونات القديمة والمتشابهة لا تخدم أي هدف، ورغم أهمية استخدام العناصر المتداولة للحصول على أيقونة مألوفة، فيجب تجربة العديد من النماذج والسير والمضي بالعمل حتى الوصول إلى مجموعة أيقونات مميزة وجذابة وعصرية، وبهذه الطريقة تشحذ إبداعك وتتحدى مهاراتك لإنشاء أيقونات مألوفة لكن بطريقة مبتكرة. خاتمة يبدو تصميم الأيقونات بسيطًا للوهلة الأولى، فهو إظهار لخصائص عنصر ما بطريقة مباشرة ومفهومة، إلا أن صعوبة تصميم الأيقونات تكمن في السبب ذاته، ففي تصميم الرسومات Graphic designing، ينصهر إبداعك بعدة عناصر أخرى بهدف إيصال رسالة ما؛ أما بتصميم الأيقونات فأنت تملك إبداعك مع القليل من العناصر الأخرى فقط، وتجعل مجموعة الأيقونات الناجحة التصميم ملفتًا وواضحًا سهل الفهم، وبذلك تخدم العلامات التجارية في منح المستخدِم تجربةً أفضل، فارتكاب أبسط الأخطاء أثناء تصميم الأيقونات يسبِّب التباسًا في رسائل واضحة بمعلومات مضللة، مؤديًا إلى تجربة غير موفقة للمستخدِم، لقد شملت القائمة المذكورة بالأعلى كل تفصيل دقيق ومهم عليك معرفته بصفتك مصممًا، ويكمن دورك الآن في توظيف هذه المعرفة في تصميم أفضل للأيقونات. ترجمة -وبتصرّف- للمقال 14 Things Not To Do When Designing Icons. اقرأ أيضًا تصميم عالم صغير في زجاجة بالفوتوشوب تصميم ملصق لشعار فيلم Deadpool ببرنامج الفوتوشوب تصميم ملصق فضاء ذو أسلوب قديم مع أضواء ملونة بالفوتوشوب

سنتعلم في هذا المقال كيفية تصميم ملصق جذَاب ومؤثر بطابع قديم، حيث سنطبق خطوات إنشاء خطوط ضوئية جميلة وفريدة تعطي الملصق طابعه المميز، ولفهم المحتوى بصورة أفضل سنحتاج لمعرفة مسبقة بأساسيات الفوتوشوب، فتصميمه يتطلّب استخدام أدوات البرنامج الأساسية، مثل أداة الحرق Burn Tool وفُرَش الرسم والمرشحات Filters وغيرها، وفي النهاية سنضيف بعض البُنى المميزة التي توحي بأن الشكل من عالم آخر، ويمكنك توظيف التقنيات المشروحة في تصميم الملصقات الإعلانية أو استخدامها مثل تأثيرات أنيقة لصورك، وذلك فقط باطّلاع بسيط على مجال التصميم وقليل من الجهد، ونتمنى لك تعلّم أساليب جديدة. 1. أنشئ مستندا جديدا بالفوتوشوب أنشئ مستندًا جديدًا بالفوتوشوب Ctrl/Cmd + N واضبط الإعدادات كما يلي: ثم اختر أداة دلو الطلاء Paint Bucket Tool واختصارها B، ولوّن الخلفية بالأسود ذو الدرجة #000000. 2. أضف تدرجا لونيا للخلفية لإضافة تدرج لوني Gradient Overlay، اضغط مرتين على طبقة الخلفية من نافذة الطبقات لإلغاء القفل عنها، ثم كرر الضغط عليها مرتين لفتح نافذة الإعدادات Layer Styles، واضبط الإعدادات مثل الصورة التالية: 3. أضف المزيد من الألوان إلى الخلفية في الخطوة السابقة أضفنا تدرجًا لونيًا للخلفية، والآن سنضيف المزيد من الألوان لجعلها أجمل، لهذا أدرج طبقةً جديدةً واختر فرشاة رسم كبيرة وناعمة لأداة الفرشاة Brush Tool واختصارها B، ثم لوّن ضمن اللوحة عشوائيًا، وغيّر خيارات الفرشاة حتى تصل لنتيجة مُرضية. لقد اخترنا درجات من اللونين الأصفر والبرتقالي، ولست مضطرًا طبعًا للتقيّد بذلك ويمكنك اختيار أي درجة تُلائم ملصقك. حوّل هذه الطبقة إلى طبقة ذكية، وذلك بالنقر عليها بالزر الأيمن ثم اختر Convert to Smart Object، ولدمجٍ أفضل للألوان، طبّق مرشح تمويه الحركة Motion blur filter من شريط الأدوات بالأعلى Filter > Blur > Motion Blur وفق الإعدادات المرفقة بالصورة التالية، ثم غير اسم الطبقة إلى "ألوان 1" واجعل التعتيم Opacity 15%. يجب إبقاء الخلفية داكنةً، فلن يعطي تأثير الإضاءة الذي سنصممه لاحقًا التأثير ذاته عندما يُطبّق على خلفية فاتحة، سنحاول حاليًّا إضفاء بعض الألوان بلطف على الخلفية السوداء. 4. استمر بإضافة المزيد من الألوان إلى الخلفية أدرج طبقةً جديدةً، وكرر الخطوات السابقة بألوان مختلفة، وللحفاظ على ترتيب وتنظيم العمل، سمِّ هذه الطبقة "ألوان 2". 5. ادمج بنية أضواء النجوم ابحث في الإنترنت عن صورة مشابهة لصورة الإضاءة بموقع Star-Light، ثم افتحها على فوتوشوب وحرّكها إلى ساحة العمل بأداة التحريك Move Tool ذات الاختصار V، بعد ذلك حوّلها إلى طبقة ذكية Smart object، ثم اجعل الصورة أصغر باختيار Edit > Free Transform أو الاختصار Ctrl/Cmd + T، ثم قلِّل الأبعاد أثناء ضغط زر Shift دون إفلاته، وذلك للحفاظ على تناظر الصورة. غيّر الآن اسم الطبقة إلى "بنية أضواء النجوم" ثم غيّر نمط الدمج Blending mode إلى Overlay وتعتيم 20%. 6. أضف صورة الفضاء ابحث عن صورة فضاء مناسبة وافتحها على الفوتوشوب، وبما أننا نريد بُنية الصورة فقط دون ألوانها، فألغِ إشباعها اللوني من شريط الأدوات بالأعلى Image > Adjustment > Desaturate، أو بالاختصار Ctrl/Cmd + Shift + U. حرّك الصورة إلى ساحة العمل الأساسية بأداة التحريك Move Tool، ثم حوّل الطبقة إلى طبقة ذكية واستخدم التحريك الحر Ctrl/Cmd + T لتغيير حجم الصورة وتدويرها بالزاوية التي تجدها مناسبة، ثمّ سمِّ هذه الطبقة "بنية الفضاء"، وغيّر نمط الدمج إلى Soft Light وتعتيم 30%. 7. إنشاء النجوم أدرج طبقةً جديدةً ولوّنها بالأسود #000000 بأداة دلو الطلاء Paint Bucket Tool التي اختصارها G، وانقر على هذه الطبقة بالزر الأيمن وحوّلها إلى طبقة ذكية، ثم من شريط الأدوات بالأعلى اختر Filter > Noise > Add Noise واضبط الإعدادات مثل الصورة الآتية، وسمِّ الطبقة "نجوم"، مع تغيير نمط الدمج إلى Screen لإزالة اللون الأسود، والآن أصبح لديك الكثير من النقاط البيضاء لكنها لا تشبه النجوم بعد. أدرج طبقة ضبط المستويات Levels adjustment layer لإنقاص عدد النقاط البيضاء، وذلك عبر Layer > New Adjustment Layer > Levels واستخدم الإعدادات الموضحة بالصورة، ولإنقاص عدد النجوم أكثر ومنح التأثير المزيد من الواقعية، يمكنك إضافة قناع Mask إلى طبقة النجوم Layer > Layer Mask > Reveal All والرسم بفرشاة سوداء B لإزالة المزيد. 8. ابدأ تصميم تأثير الأضواء الملونة أدرج طبقةً جديدةً أعلى الطبقات Shift + Ctrl/Cmd + N، واختر أداة مستطيل التحديد Rectangular Marquee Tool التي اختصارها M، وحدد شكلًا كما في الصورة، واضبط اللون إلى الأبيض #ffffff، ثم اختر أداة التدرج Gradient Tool التي اختصارها G، وتأكد من نافذة الخيارات بأن التدرج هو بين اللون الأبيض والشفافية، ثم اضغط زر Shift. وبدون إفلاته اسحب الخط الأفقي لأداة التدرج من الحافة اليسرى لإطار التحديد إلى حافته اليمنى، ثم اختر Select > Deselect أو الاختصار Ctrl/Cmd + D لإزالة التحديد. حافظ على ترتيب العمل بتسمية هذه الطبقة "خط"، ولإضافة قناع إلى هذه الطبقة اضغط Layer > Layer Mask > Reveal All، واضبط اللون إلى الأسود #000000 مع التأكد من أن أداة التدرج ما زالت بوضع التدرج بين اللون الأبيض والشفافية، ثم أضف تدرجًا يبدأ هذه المرة من أعلى الخط الأبيض، ثم تدرجًا آخرًا من أسفل هذا الخط كما توضح الصورة: 9. العمل على الخط انقر بالزر الأيمن على طبقة "خط" التي أنشأتها في الخطوة السابقة، واختر Convert to Smart Object، ثم ضاعف هذه الطبقة Ctrl/Cmd + J واختر Edit > Transform > Flip Horizontal، ثم حدد طبقتي الخطين معًا من قائمة الطبقات من خلال الضغط على الطبقات المطلوبة مع زر Shift أو Ctrl/Cmd، وبعد تحديد طبقتي الخطين اضغط Edit > Free Transform أو الاختصار Ctrl/Cmd + T، ثم اسحب الحافة العلوية للأسفل لتقليل ارتفاعهما فلا نريد أن تصل الخطوط إلى نهاية الحافة العلوية للّوحة. 10. تغيير إعدادات الطبقة ضع طبقتي الخطين معًا في مجموعة جديدة وسمّها "1". يمكنك إنشاء المجموعة بالاختصار Ctrl/Cmd + G، ثم غيّر تعتيم المجموعة "1" إلى 80%، ولإنشاء تأثير الإضاءة ضع المجموعة "1" ضمن مجموعة جديدة وسمّها "خطوط"، ثم غيّر نمط الدمج إلى Color Dodge. الآن يفترض أنك حصلت على خطين ملونين شبيهين بالصورة الموالية: 11. ضاعف الخط سنستخدم الخط المُنشأ مثل قالب للخطوط الأخرى، ثم نعدل كل منها لمنحه هيئةً واقعيةً، بدايةً ضاعف المجموعة "1" وذلك بسحبها ووضعها فوق أيقونة إدراج الطبقة الجديدة أسفل نافذة الطبقات، ثم حرّك عناصر المجموعة الجديدة إلى اليمين بأداة التحريك Move Tool واختصارها V، وذلك حتّى تتقاطع مجموعتا الخطوط كما في الصورة. قلّل ارتفاع المجموعة الثانية بتحديدها، ثم اضغط على Edit > Free Transform أو الاختصار Ctrl/Cmd + T، ثم اسحب الخط العلوي لمربع التحريك إلى الأسفل قليلًا، وغيّر تعتيم المجموعة إلى 70%. 12. أنشئ المزيد من الخطوط كرر الخطوة السابقة لإنشاء المزيد من الخطوط، وغيّر ارتفاع كل مجموعة باستخدام التحريك الحر واختصاره Ctrl/Cmd + T، خفّض تعتيم كل مجموعة بالتدريج مع الاقتراب إلى طرفي اللوحة. 13. أنشئ خطوطا أصغر أنشئ مجموعةً جديدةً وسمِّها "خطوط صغيرة"، وغير نمط الدمج إلى Color Dodge وضعها أسفل مجموعة "خطوط"، ثم ضاعف إحدى طبقات الخطوط من مجموعة "خطوط" Ctrl/Cmd + J، وضعها في المجموعة الجديدة. اجعل الطبقة أصغر بتحريكها بينما تضغط زر Shift من Edit > Free Transform، أو الاختصار Ctrl/Cmd + T. ضاعف هذه الطبقة Ctrl/Cmd + J ثم اختر Edit > Transform > Flip Horizontal. وأخيرًا ضع هذين الخطين منتصف اللوحة كما في الصورة الآتية. 14. إنهاء الخطوط استمر بإضافة خطوط صغيرة بين الخطوط الكبيرة، وغير التعتيم لكل طبقة منها ضمن المجال 40-70%. 15. تخصيص فرشاة جديدة خصص فرشاةً جديدةً لإضفاء بعض التفاصيل على الملصق، وذلك باختيار أداة الفرشاة Brush Tool التي اختصارها B، ثم اختر فرشاةً قاسيةً مثل نقطة بداية ننطلق منها، ثم افتح نافذة الفرشاة F5 واضبط الإعدادات مثل الصورة التالية لتخصيص فرشاتك، بعدها احفظها بالضغط على زر Create new brush الموجود أسفل هذه النافذة: 16. استخدم الفرشاة الجديدة ضاعف طبقة "خطوط" وحولها إلى طبقة ذكية بالضغط عليها بالزر الأيمن واختيار Convert to Smart Object، بعدها أدرج قناعًا لهذه الطبقة Layer > Layer Mask > Reveal All، وغير اللون إلى الأسود #000000، ثم اختر الفرشاة التي أنشأتها، ولوّن بها القناع لإزالة أجزاء من هذه الطبقة، مما يعطي الإضاءة تفاصيل أنيقة، بعد ذلك استخدم الفرشاة بقطر رئيسي حوالي 50px في مركز الخطوط، ثم أصغر من ذلك بالاتجاه نحو أطراف الخطوط. غيّر نمط الدمج إلى Overlay بتعتيم 25%، وأضف تأثير تمويه من Filter > Blur > Motion Blur، مع ضبط الإعدادات كما في الصورة، ثم أضف بعض التشويش من Filter > Noise > Add Noise. 17. أدرج صورة الفضاء ابحث في الإنترنت عن صورة لمجرة كونية وافتحها على الفوتوشوب، ثمّ ألغِ إشباعها اللوني بالاختصار Ctrl/Cmd + Shift + U وحرّكها إلى لوحة العمل، سمّ هذه الطبقة "بنية"، ثم حوّلها إلى طبقة ذكية، واجعلها أصغر ودوّرها من Edit > Free Transform أو بالاختصار Ctrl/Cmd + T، واضغط على زر Shift دون إفلاته أثناء تصغير الحجم. ضع هذه الطبقة ضمن مجموعة جديدة Ctrl/Cmd + G سمّها "فضاء"، واضبط نمط الدمج إلى Color Dodge، مع الضغط على طبقة "بنية" لتفعيلها وأضف قناع أسود اللون من Layer > Layer Mask > Hide All، الآن اختر فرشاةً بيضاء ناعمةً لأداة الفرشاة Brush Tool واختصارها B بتعتيم 50% وقطر رئيسي 100px، ثم لوّن باستخدام الفرشاة ضمن الجزء العلوي من اللوحة لإظهار الأجزاء التي ترغب بها من صورة الفضاء. 18. اجعل درجات الألوان ذات طابع قديم احفظ ملف العمل بالصيغة التي تريدها، ويفضّل بصيغة PSD (صيغة فوتوشوب)، ثم حمّل مجموعة تأثيرات الفوتوشوب الجاهزة من صفحة DeviantART، وجرّبها للحصول على ألوان متنوعة، وعندما تجد ما يناسبك تكون قد أنهيت العمل. حدّد كامل العمل Ctrl+A ثم انسخه وادمج عناصره Ctrl+Shift+C وألصقه، ثم اختر Filter > Sharpen > Unsharp Mask > OK مما يجعل الشكل أوضح، وحاول عدم المبالغة باستخدام هذا التأثير. ختاما بهذا نكون قد أنهينا ملصق الفضاء القديم وأنشأنا تأثير إضاءة مميزة باستخدام الفوتوشوب، كما أنشأنا نجومًا من تأثير التشويش. نتمنى ان تكون استمتعت وتعلمت بعض تقنيات التصميم المفيدة. اقرأ أيضًا تصميم ملصق لشعار فيلم Deadpool ببرنامج الفوتوشوب كيفية تصميم ملصق مستوحى من فيلم حرب النجوم باستخدام فوتوشوب كيفية إنشاء تأثير كاريكاتيري مضحك في Adobe Photoshop كيفية قص الشعر من الخلفيات المعقدة في الفوتوشوب

نحن هنا اليوم لتعلّم كيفية إنشاء شعار فيلم Deadpool بتقنيات بسيطة جدًا من خلال برنامج الفوتوشوب Photoshop، حيث سنتناول تقنيات الدمج الأساسية وطبقات الضبط Adjustment layers وطبقات القناع Masking، وكذا رسم الأشكال بأداة القلم أو فُرَش الرسم بطريقة مبتكرة، إلى جانب تعلمنا لكيفية إضفاء التفاصيل على تصميمك. لذلك فقد يزيد الوقت المستغرق في التصميم بضع ساعات لكن النتيجة النهائية ستكون مُستحقةً لهذا الوقت، مع إمكانية تطبيقك لهذه التقنيات في تصاميمك المستقبلية الأخرى. هذه الصورة لمعاينة النتيجة النهائية: عُرض فيلم Deadpool من إنتاج شركة Marvel في السينما بتاريخ 12\2\2016 ولعب الممثل Ryan Reynolds دور شخصية Deadpool، وكان شعار الفيلم مبتكرًا ومثيرًا للاهتمام لذلك قررنا إعادة تصميم الشعار باستخدام الفوتوشوب. بعد البحث وصلنا لعناصر وخلفيات سنحصل عند دمجها على الشكل العام للشعار، حيث سنجد أن تقنيات العمل بسيطةً وواضحة وأن النتيجة رائعة. يجب التنويه على صعوبة إعادة تصميم الشعار بصورة مطابقة للشعار الأصلي، وذلك لاختلاف العناصر المستخدمة في التصميم، كما أن الشعار مصمم أساسًا بشكل ثلاثي الأبعاد، بمعنى أن ما سنتعلمه اليوم لن يكون سهلًا وقد نواجه بعض الإرباك في بعض خطواته ولكن النتيجة تستحق التجربة والعمل. عناصر التصميم العناصر المستخدمة: texture1 خلفية بالأبيض والأسود من موقع wallpoper. paper2 بنية الورق الأسود المتصدع من موقع wildtextures. cracked3 بنية ملمس صلب متصدع أسود من موقع colourbox. metal4 خلفية معدن مخدوش من موقع wallpaperfx. scraped5 بنية معدن من موقع malkowitch. grunge6 بنية جرونجي سوداء من موقع pixshark. dust7 بنية جرونجي الغبار مجانية من موقع zerofiction. dripping8 بنية تقطير من موقع dmertl. سنشرح تقنيات بسيطة يمكنك تطبيقها في مشاريعك اللاحقة، بدلًا من التركيز على تصميم شعار مطابق للأصل، وستلاحظ وجود مبالغة بإظهار التأثيرات المستخدمة لضمان فهم أفضل للأفكار، وللحصول على نتيجة مشابهة لملصق شعار الفيلم الأصلي؛ عليك تخفيف تقشير الحواف وتقليل استخدام البنى المتعدد. 1. البدء أنشئ ملفًا جديدًا ضمن الفوتوشوب بقياس 1000x1000px بالإعدادات الآتية: 2. إنشاء قاعدة الشعار ابدأ بتشكيل قاعدة الشعار برسم شكل دائري بأداة الدائرة Ellipse Tool بأبعاد 840x840px واختر إطار الشكل Stroke بسماكة 50px، مع تفريغه من الداخل باختيار Fill > No color، ثم ارسم شكلًا آخر يعامده بأداة المستطيل Rectangle tool بارتفاع 100px. ادمج الشكلين بتحديد طبقتيهما، ثم انقر بالزر الأيمن واختر Rasterize، ثم انقر به مجدّدًا واختر Merge layers. انسخ طبقة قاعدة الشعار التي حصلت عليها لاستخدامها لاحقًا؛ حيث ستحتاجها عند إنشاء تأثير الصدأ على الطلاء، انقر مرتين على الطبقة الجديدة ثم اضبط الإعدادات كالآتي: للتدرج gradient استخدم درجتي اللون التاليتين #a0a0a0 و#828282، وستجد نسخة التدرج مرفقةً في نهاية المقال للتحميل. انسخ الشكل مرتين في الخلفية ثم حرّك الطبقتين الجديدتين عدة بكسلات إحداهما لليمين والأخرى لليسار، ثم انسخ الطبقتين بعد التحريك وحرّك النسخ الجديدة نحو الأسفل قليلًا لتوحي بوجود حافة. لنُضِف الآن بنيةً ذات ملمس لهذه القاعدة، لهذا حدِّد طبقات القاعدة الخمس، ثم انقر بالزر الأيمن واختر Convert to smart object، أدرج صورة texture1 إلى ساحة العمل واختر فرشاةً كبيرةً لأداة الممحاة Eraser tool، بحيث تكون بحجم 270px وقساوة 0% hardness، ثم احذف بعض أجزاء الصورة، وغيّر نمط الدمج blend mode لطبقة الملمس إلى Vivid Light والتعتيم opacity إلى 20%، ثم تأكد من تخفيف حدة إضاءة القاعدة. والآن اجعل الصورة طبقة قناع مرتبط Clipping mask وذلك باختيار الطبقة ثم استخدام الاختصار Ctrl+Alt+G \ Cmd-Option-G. 3. أنشئ طلاء الصدأ للحصول على تأثير الصدأ على الطلاء الأحمر سنستخدم أكثر من بنية ونعدل أنماط الدمج مع تصحيح الألوان بالفُرش، سنعود إلى طبقة القاعدة التي نسختَها قبل قليل، لهذا انقر عليها مرتين لفتح نافذة الإعدادات layer style، ثم غير Color overlay إلى اللون #a51f3b، وانقر على الطبقة بالزر الأيمن ثم اختر rasterize layer style، ثم افتح نافذة layer style مجددًا وطبّق التعديلات الآتية: الخطوة التالية هي وضع صورة texture1 أعلى الطبقات الأخرى ثم تغيير نمط الدمج إلى Overlay والتأكّد أنها طبقة قناع مرتبط وذلك باستخدام الاختصار Ctrl+Alt+G / Cmd-Option-G. أعد استخدام بعض الأجزاء من الصورة ذاتها لإضفاء المزيد من التفاصيل، وتأكد من تمويه الحواف باستخدام أداة الممحاة Eraser Tool بفرشاة ناعمة لجعل التشكيل انسيابيًا، ثم غير نمط الدمج إلى luminosity واجعل هذه الطبقات طبقات قناع مرتبطة بطبقة القاعدة، واستخدم أجزاءً متعددةً من الصورة حتى تصل إلى نتيجة جيدة. أدرج طبقةً جديدةً أعلى الطبقات الأخرى، واختر أداة الفرشاة Brush Tool بحجم Size 300px وقساوة 0% Hardness، واختر اللون #a51f3b، ثم لوّن ضمن الطبقة لتعتيم الخلفية قليلًا، ثم غيّر تعتيم الطبقة opacity إلى 60%. لنُضِف بنية الورق، أدرج صورة paper2 أعلى الطبقات وغير نمط الدمج إلى Color Dodge وارفع تعتيم الطبقة إلى حوالي 90%، ثم تأكّد من مسح الأجزاء غير المرغوبة، واجعلها طبقة قناع مرتبط كما في الخطوات السابقة. سنضيف بعض التشققات على الشعار لجعله أقرب للأصلي، لهذا أدرج الصورة cracked3 في أماكن متعددة عشوائيًّا، وتأكد من تمويه الحواف، ثم غير نمط الدمج إلى Color Dodge. تأكّد من أن كل طبقات البُنى هي طبقات أقنعة مرتبطة من طبقة القاعدة الأساسية، وهنا اختر كل طبقات البُنى ثم اضغط على "Ctrl+Alt+G / Cmd-Option-G". 4. تقشير الحواف التصميم بسيط حتى الآن، لذا سنستخدم طريقةً تجعل المعدن يصدأ دون انتظار جَوْر الزمن عليه، طبعًا ما زال هناك بعض الخطوات لإجرائها لا سيّما ما يتعلّق بالصدأ عند الحواف، فالتقنية بسيطة لكنها عملية وقابلة للتطبيق في التصاميم الأخرى المشابهة. لدينا طبقة الطلاء الجميلة، والخطوة التالية هي إعادة تأثير التقشير للحواف؛ بخطوات بسيطة ولا تحتاج أي فرشاة جديدة. بالعودة إلى الطبقة الرئيسية للطلاء الأحمر الصدئ، اختر أداة الممحاة Eraser Tool، واختر فرشاةً صغيرةً بقطر حوالي 3px ثم أغلق نافذة الفرشاة brush panel وطبّق الخطوات الآتية: احذف أجزاءً صغيرةً وجرّب حتى تصل لنتيجة ملائمة، وحاول أن تغطي كل الحواف لكن دون مبالغة، وتذكّر أهميّة التفاصيل، يمكنك أخذ هذه التجربة مثالًا لذلك: 5. رسم العينين أدرج طبقةً جديدةً في الأعلى، ثم اختر أداة القلم Pen Tool، وارسم شكل العينين، وهنا استخدم الجزء الأبيض من الشعار الأصلي دليلًا لك أثناء الرسم. لتلوين الشكل انقر بالزر الأيمن في أي مكان من اللوحة واختر Fill Path، واملأه باللون الأبيض، ولإغلاق أداة القلم اختر Pen Tool ثم اضغط زر Esc. بهذا نكون قد رسمنا الشكل الأساسي للعينين، لهذا احفظ نسخةً منها لاستخدامها لاحقًا، ولتلوين العينين أدرِج طبقةً جديدةً في الأعلى، واجعلها بوضع قناع مرتبط باستخدام الاختصار Ctrl+Alt+G / Cmd-Option-G، ثم اختر فرشاةً سوداء صغيرة بحجم 10px وقساوة 0%، وارسم بعض الخطوط في زوايا العينين، ثم من شريط الإعدادات في الأعلى اختر Filter > Blur > Gaussian Blur واضبط القطر Radius 3.4 pixels. استخدم أداة التلطيخ Smudge Tool لإبراز اللون الأسود بحجم 17px وقوة 50%. قد ترغب بتمويه خفيف للشكل قبل الاستمرار بالتلطيخ Smudging، وإن شعرت بحاجة لإضافة لون رمادي، فاستخدم الدرجة #4b5358 وأكمل العملية، وعند الانتهاء اختر Filter > Sharpen > Smart Sharpen واضبط الإعدادات كالآتي: Amount 476% وRadius 3.8px وReduce Noise 30%. لإبراز الحواف أضِف تأثير ظل داخلي Inner Shadow أبيض اللون إلى إعدادات الطبقة، وبإمكانك زيادة تأثير الظل الداخلي حتى تصل لنتيجة مُرضية. سنضيف الآن الحواف السوداء حول العينين، لهذا كرر العملية كما في الخطوات السابقة؛ ارسم الشكل بأداة القلم Pen Tool، ولوّنه بالأسود، ثم أدرج الصورة metal4 أعلى الطبقات مثل قناع مرتبط بالاختصار Ctrl+Alt+G. انقر مرتين على الطبقة لفتح الإعدادات الخاصة بها Layer Style، واستخدم الإعدادات الآتية: إطار Stroke واحد، وظل خارجي Drop Shadow مرتين. أدرج طبقةً جديدةً أعلى الشكل الأسود وارسم بضع لطخات بفرشاة بيضاء صغيرة، وادمجها قليلًا بأداة Smudge Tool (يمكنك استبدال ذلك بصورة بُنية تعطي تأثير الطلاء المتناثر)، ثم ارسم بعض الخطوط السوداء حول الشكل لمنحه عمقًا. الخطوات هي ذاتها لرسم العين الأخرى، عدا تعديلات بسيطة ضمن إعدادات الطبقة Layer style، حيث يمكنك نسخ الطبقات واستخدام تأثير المرآة للحصول على العين الثانية Edit > Transform > Flip Horizontal، لكن تذكر أن عليك ضبط إعدادات الطبقة Layer Style كما في الصورة: 6. تأثير الطلاء المتناثر للخلفية أدرج صورة scraped5 خلف الشعار وحدد دائرةً بأداة Elliptical Marquee Tool، بعدها انسخ التحديد ثم ألصقه بمكانه دون تحريك. اختر أداة الحرق Burn Tool بإعدادات الحجم size 250px ونطاق الظلال Range Shadows، والتعرّض Exposure: 25%، واجعل الأجزاء حول العينين والحواف الداخلية للشعار داكنةً أكثر. لإضفاء بعض التفاصيل على الخلفية أدرج صور grunge6 وdust7 وdripping8، واستخدم أجزاءً من هذه الصور، إذ ستحتاج لتفاصيل أكثر، ولدمج كل العناصر معًا سنستخدم أنماط الدمج الآتية: صورة grunge6: نمط Screen بعتامة 100% صورة dust7: نمط Lighten بعتامة 100% صورة dripping: نمط Divide بعتامة 25% 7. الضبط النهائي أدرجنا كل العناصر وحان وقت تلوين الشعار، لهذا أدرج طبقة ضبط حيوية Vibrance adjustment layer لتحسين الشعار النهائي بضبط الحيوية Vibrance 52+ والإشباع Saturation -4، ثم أدرج طبقةً جديدةً وادمج نسخةً من كل العناصر فيها وذلك باستخدام الاختصار Ctrl+Alt+Shift+E / Cmd+Option+E. اختر من شريط الأدوات بالأعلى Filter > Sharpen > Smart Sharpen، واضبط الإعدادات مثل الصورة: أضف بعض التشويش من Filter > Noise > Add Noise. النتيجة النهائية بهذا نكون قد أنهينا العمل، والموضح بالصور الموالية. بهذا تكون قد تعرفت على كيفية تصميم ملصق لشعار فيلم Deadpool ببرنامج الفوتوشوب، ويمكنك تطبيق الفكرة على عدة ملصقات أخرى. ترجمة -وبتصرّف- للمقال Deadpool Logo Movie Poster Photoshop Tutorial. اقرأ أيضًا كيفية تصميم ملصق مستوحى من فيلم حرب النجوم باستخدام فوتوشوب كيفية إنشاء تأثير كاريكاتيري مضحك في Adobe Photoshop كيفية قص الشعر من الخلفيات المعقدة في الفوتوشوب

يستمر الجدل الدائر حول سكتش وفوتوشوب منذ الأزل. وليس هناك من ينكر أنه حتى يومنا هذا، لا يزال الفوتوشوب الأداة الأكثر استخدامًا لصنع النماذج المحاكية (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

هذا الدرس الرابع من سلسلة نصائح وحيل فوتوشوب، التي سنتعلم من خلالها العديد من الحيل والأدوات عند التصميم ببرنامج فوتوشوب بالإضافة إلى مجموعة من النصائح حول الإستخدام الأمثل للبرنامج. سنقوم في هذا الدرس بتصميم قلم وتحريكه لكتابة كلمة وسنراه يقوم بذلك بالحركة فعليًّا باستخدام برنامج فوتوشوب. وستكون النتيجة كالتالي: افتح ملفا جديدا في فوتوشوب ثم لوّن الخلفية كما تريد ثم استخدم أداة النص لكتابة أي كلمة أو عبارة تريدها مثلا: "حسوب". حوّل طبقة النص إلى طبقة صورة نقطية عبر النقر بالزر الأيمن على الطبقة واختيار Rasterize Type من القائمة. حدد هذه الطبقة واضغط Ctrl+J لصنع نسخة جديدة عنها ثم أخفِ الطبقة القديمة واستخدم أداة الممحاة لمسح جزء صغير من آخر النص. مجددًا حدّد الطبقة الجديدة ثم اضغط Ctrl+J ثم أخفِ الطبقة القديمة وامسح جزءًا إضافيًّا من النص ثم كرّر العملية حتى تمسح النص بالكامل. استخدم أدوات الأشكال واختر شكل القلم من بين الأشكال القياسية الموجودة في برنامج فوتوشوب أصلًا. ارسم شكل القلم ولوّنه كما تشاء (يمكنك استخدام صورة قلم حقيقي ببساطة). الآن اذهب إلى نافذة Window ثم فعّل نافذة Timeline ثم ابدأ بإضافة إطار Frame جديد وفي كل مرّة أظهِر طبقة جديدة من الطبقات النصيّة التي أخفيناها سابقًا مع تحريك القلم ووضع رأس القلم عند النقطة الأخيرة الظاهرة من النص وكرّر العملية حتى تصل إلى إظهار النص كاملًا. احفظ الملف من القائمة: File > Save for Web ثم اختر نوعية الملف GIF واحفظ الملف وستحصل على النتيجة التالية. طبعًا هذه نصيحة بسيطة ومختصرة ويمكنك تعديل العمل بخلفية مختلفة ونص آخر وقلم واقعي والتلاعب بعدد الإطارات ومدة إظهارها ...الخ

في هذا الدرس سوف نقوم بتحويل تصميم تم إعداده باستخدام فوتوشوب وجعله صفحة ويب جاهزة وذلك باستخدام لغتي HTML وCSS (وهو أمر يُعرف أيضا تحت اسم “التكويد”). هذا هو التصميم الذي سوف نعمل على تكويده في هذا الدرس: استخراج بعض الصورقبل أن نبدأ في تكويد التصميم سوف نحتاج إلى استخراج بعض الصور منه (في الأسفل يوجد صورة توضيحية للملفات التي نحتاجها، وكوننا لا نملك الملف لاستخراج الملفات منه فيمكنك استعمال أي بديل تراه مناسبًا فالمهم هو أن تعرف كيفية التكويد وكتابة أكواد مناسبة). بنية ملف HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Chris Spooner Design Portfolio</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="container"> </div> </body> </html> يبدأ ملف الـHTML كما هو معتاد على وسم <doctype> و <head> وأخيرًا وسم <body>. كما أننا قمنا بربط ملف CSS بواسطة استعمال وسم <link> وأضفنا أيضًا وسم <div id="container"> ليعمل كحاوٍ لجميع محتوى الصفحة. <p id="logo"> <a href="#"><img src="images/logo.png" alt="Chris Spooner logo" /></a> </p> <ul id="nav"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact</a></li> </ul> <div id="header"> <h1>Hello, I'm Chris Spooner.</h1> <h2>I craft websites that are beautiful on both the inside and out.</h2> <p class="btn"><a href="portfolio.html">View my portfolio</a></p> </div>لو نظرت إلى التصميم سوف تجد أن القائمة تأتي قبل الشعار ولكن مع ذلك فإننا سوف نقوم بإضافة الشعار قبل القائمة حتى نبقي كل شيء مرتّبًا ومنظمًا. وضعنا الشعار داخل وسم <p> واستعملنا العنصر <ul> ليحتوي على عناصر القائمة وأضفنا أيضًا وسمي <h1> و <h2> وبداخلهما عنوان ومقدمة بسيطة. <div id="content"> <h3>About Chris Spooner</h3> <p>I earn a living by creating custom brands and logo designs from scratch, as well as designing and building high quality websites and blogs, but I also enjoy producing the odd t-shirt graphic, illustration or character design. I pride myself in having the nerdy skills to build top notch creations online, as well as being knowledgeable in the print side of design.</p> <h3>My latest work</h3> <p>I’m forever creating design work for both myself as personal projects and as a hired gun for clients from around the world. Here’s a few of my most recent works.</p> <div class="portfolio-item"> <a href="#"><img src="images/portfolio-1.jpg" alt="View more info" /></a> <p class="btn"><a href="#">See more</a></p> </div> <div class="portfolio-item"> <a href="#"><img src="images/portfolio-2.jpg" alt="View more info" /></a> <p class="btn"><a href="#">See more</a></p> </div> <div class="portfolio-item"> <a href="#"><img src="images/portfolio-3.jpg" alt="View more info" /></a> <p class="btn"><a href="#">See more</a></p> </div> <div class="portfolio-item"> <a href="#"><img src="images/portfolio-4.jpg" alt="View more info" /></a> <p class="btn"><a href="#">See more</a></p> </div> </div> <div id="footer"> <p id="copyright">&copy; Chris Spooner / SpoonGraphics (Please don’t steal my work)</p> <p id="back-top"><a href="#">Going up?</a></p> </div>قمنا بعد ذلك بإضافة وسم <h3> وبداخله نص يعتبر أقل أهمية عن النص السابق (فكما تعلم أنّ وسم <h1> أهم من <h2> ومن <h3> وهكذا). بعد ذلك قمنا بإضافة العنصر <div id="content"> وبداخله يوجد المحتوى الرئيسي للصفحة والعديد من وسوم <div> كل واحد منها يحتوي على صورة مصغرة عن أحد الأعمال التي قمنا بها (وكأنها معرض أعمال مُصغّر). وأخيرًا يوجد هناك التذييل (footer) ممثلًا بالعنصر <div id="footer"> وبداخله حقوق الملكية وزر العودة للأعلى. الآن وبعد أن انتهينا من ملف الـHTML دعونا ننتقل إلى تنسيق الصفحة باستعمال CSS. تنسيقات CSSbody, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { background: #f2f0eb url(images/bg.png); font: 16px Helvetica, Arial, Sans-Serif; color: #636363; line-height: 24px; } #container { width: 960px; margin: 0 auto; } #logo { margin: 10px auto 0 auto; position: relative; width: 183px; } بدأنا ملف الـCSS بتنسيقات بسيطة لإزالة التنيسقات الافتراضية للمتصفحات، وبعد ذلك قمنا بإضافة بعض التنسيقات لجسم المدونة (وسم <body>). لاحظ أننا قمنا في البداية بإضافة خلفية مزخرفة (صورة) إلى جسم المدونة وبعدها أضفنا بعض التنسيقات التي تخص الخطوط في الصفحة. قمنا بعدها بإعطاء العنصر الحاوي (container div) عرضًا بقيمة 960px واستعملنا أيضًا الخاصية margin: 0 auto لتوسيط العنصر في منتصف الصفحة، كما أننا أضفنا نفس الخاصية السابقة إلى الشعار حتى يتوسط في الصفحة. ul#nav { width: 940px; list-style: none; overflow: hidden; margin: -134px auto 25px auto; } ul#nav li { width: 126px; height: 33px; float: left; padding: 13px 0 0 0; background: url(images/nav-bg.png); font-weight: bold; text-align: center; text-transform: uppercase; } ul#nav li:nth-child(1) { margin: 0 60px 0 0; } ul#nav li:nth-child(2) { margin: 0 316px 0 0; } ul#nav li:nth-child(3) { margin: 0 60px 0 0; } ul#nav li:nth-child(4) { margin: 0; } ul#nav li a { color: #616369; text-decoration: none; } ul#nav li a:hover { color: #a12121; } سوف نحتاج لإضافة مجموعة من الخصائص للقائمة الرئيسية حتى تتماشى وتتوافق مع التصميم الذي نعمل عليه، فقمنا أولًا بتحريك العنصر <ul> إلى الأعلى وذلك باستخدام قيمة margin سالبة وبعدها قمنا بإعطاء كل عنصر من عناصر القائمة (عناصر <li>) مجموعة خصائص، أبعاد، خلفيات وتنسيقات خطوط حتى تتوافق مع التصميم الذي نريده. وحتى نجعل الصفحة تبدو كالتصميم تمامًا فإننا استخدمنا المحدد ()nth-child: حتى نُعطي قيم margin مختلفة لكل عنصر. #header { height: 244px; padding: 52px 0 0 57px; background: url(images/home-header.jpg); } #header h1 { font: 38px Georgia, Serif; color: #f2f0eb; letter-spacing: 2px; margin: 0 0 20px 0; text-shadow: 0px 3px 3px #494949; } #header h2 { width: 510px; font: 30px Georgia, Serif; color: #f2f0eb; letter-spacing: 2px; margin: 0 0 20px 0; text-shadow: 0px 3px 3px #494949; } #header p.btn a { display: block; width: 225px; height: 50px; overflow: hidden; background: url(images/home-header-btn.jpg); text-indent: -9999px; } لاحظ أننا أعطينا الترويسة (header) ارتفاعًا بقيمة 244px وذلك لأن ارتفاع صور الخلفية الذي أعطيناها لها هو 244px. بعد ذلك استخدمنا padding مناسب حتى نُبعد النصوص عن الحواف ونجعل كل شيء مناسبًا ومتوافقًا مع التصميم، وقمنا أيضًا بإعطاء الوسمين <h1> و <h2> الموجودين في الترويسة بعض تنسيقات الخطوط حتى تتوافق مع التصميم (نوع الخط Georgia واستخدمنا أيضًا الخاصية letter-spacing لزيادة المسافة بين كل أحرف الكلمات). يمكننا كذلك محاكاة تأثير الظل عن طريق استخدام الخاصية text-shadow، بينما أضفنا عرضًا بقيمة 510px للوسم <h2> حتى نمنع النص من الظهور فوق المنطقة المخصصة له. وأخيرًا قمنا باستخدام الخاصية ()background: url وبعض الخصائص الأخرى على العنصر الذي يحمل الفئة btn. وذلك لتحويله إلى زر كما هو موجود في التصميم. #content { background: url(images/content-bg.png) repeat-y; padding: 57px 69px 50px 69px; overflow: hidden; } #content h2 { font: 30px Georgia, Serif; letter-spacing: 2px; margin: 0 0 20px 0; } #content h3 { font: 26px Georgia, Serif; letter-spacing: 2px; margin: 0 0 20px 0; } #content p { margin: 0 0 30px 0; } #content a { color: #a12121; text-decoration: none; } #content a:hover { color: #671111; } #content .portfolio-item { width: 182px; padding: 4px; background: #eee; text-align: center; float: left; margin: 0 7px 14px 7px; } #content .portfolio-item p.btn { margin: 0; } #content .portfolio-item p.btn a { display: block; width: 183px; height: 29px; padding: 7px 0 0 0; background: url(images/see-more-bg.png); font-weight: bold; text-align: center; text-transform: uppercase; text-decoration: none; } الآن سنقوم بتنسيق المحتوى الرئيسي للمدونة. لاحظ أننا أعطينا العنصر content# صورة كخلفية وأضفنا padding بقيم معينة حتى نُبعد المحتوى عن الأطراف. بعد ذلك استخدمنا overflow: hidden حتى نتأكد من أنّ جميع العناصر الموجودة داخل هذا العنصر والتي تحمل الخاصية float لن تقوم بتشويه التصميم وتخطيط الصفحة (استخدام الخاصية overflow: hidden في مثل هذه الحالة يسمى clearing floats). قمنا كذلك باستخدام بعض الخصائص البسيطة للنصوص الموجودة داخل هذا العنصر (كنوع الخط وحجمه وبعض الأمور الأخرى). قمنا بعد ذلك بتنسيق الصور المصغرة وذلك بإعطائها خلفية بلون رمادي وإعطائها الخاصية float: left حتى تظهر جميع الصور إلى جانب بعضها أفقيًا، وأخيرًا قمنا بتنسيق عناصر <a> لنجعلها تبدو وكأنها أزرار وذلك بإعطائها خلفية باستعمال الخاصية ()background: url. #footer { background: url(images/footer-bg.png) no-repeat; padding: 40px 0 0 0; overflow: hidden; margin: 0 0 30px 0; } #footer p#copyright { font-size: 12px; float: left; margin: 0 0 0 30px; color: #b8b6b2; } #footer p#back-top { font-size: 12px; float: right; margin: 0 30px 0 0; } #footer a { color: #a12121; text-decoration: none; } #footer a:hover { color: #671111; } بقي علينا الآن تنسيق التذييل الخاص بالصفحة. الجزء الأسفل من المحتوى تم إضافته كخلفية للتذييل، وبعدها أضفنا padding بقيم مناسبة حتى ندفع بمحتوى التذييل إلى أسفل صورة الخلفية. لاحظ أننا استخدمنا no-repeat وذلك حتى نتأكد بأنّ الصورة تظهر مرة واحدة فقط ولا تتكرر. قمنا بإضافة خصائص نصيّة لكل من حقوق الملكية وكذلك زر العودة إلى الأعلى وقمنا أيضًا باستخدام الخاصية float لإزاحة العنصرين إلى يمين ويسار الصفحة. إضافة بعض الجافاسكربت لدعم متصفح IE8 وأقلإنّ متصفح IE8 والنسخ الأقدم منه لا تدعم المحدد nth-child: لذلك إذا أردت أن تدعم هذه المتصفحات فبإمكانك أن تستخدم مكتبة jQuery لتساعدنا في ذلك: $(document).ready(function() { $("ul#nav li:nth-child(1)").css("margin-right", "60px"); $("ul#nav li:nth-child(2)").css("margin-right", "316px"); $("ul#nav li:nth-child(3)").css("margin-right", "60px"); $("ul#nav li:nth-child(4)").css("margin-right", "0px"); });حتى وإن كانت تلك المتصفحات لا تدعم المحدد nth-child إلا أن استخدام هذا المحدد مع jQuery ممكن وسوف تقوم تلك المتصفحات بتطبيق التنسيقات بدون أي مشاكل. إنهاء الصفحات الداخليةبعد أن قدمنا بإنهاء الصفحة الرئيسية فإننا سوف نقوم ببناء الصفحات الداخلية للموقع. سوف تكون بنية هذه الصفحات متشابهة نوعًا ما مع القليل من الاختلافات كما أن فيها بعض العناصر المشتركة لذلك سيكون بناؤها أمرًا يسيرًا. <div id="header" class="page"> <h1>About Chris Spooner</h1> </div>لنقوم بتنسيق ترويسة أخرى يمكننا بكل بساطة أن نضيف فئة (class) للترويسة الخاصة بالصفحات الداخلية وبعدها نقوم بإعطاء هذه الترويسة حجمًا أصغر وصورة خلفية معينة. لقد قمنا مسبقًا بإنشاء الشيفرة البرمجية الخاصة بعناصر معرض الأعمال، لذلك يمكننا تكرار هذه العناصر لكل مشروع على حدة، وكل ما نحتاج لتغييره هو الصورة المصغرة الخاصة بكل مشروع. خاتمةوهكذا نكون قد قمنا بتكويد كامل التصميم. أتمنى أن تكونوا قد استفدتم من الدرس. ترجمة -وبتصرّف- للمقال How to Code a Stylish Portfolio Design in HTML/CSS لصاحبه Iggy.

تعلّمنا في المقال السابق ما هو فن البِكسل 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 الرائعة والممتعة. يمكنكم القيام برسومات مشابهة وإدراجها في التعليقات أسفل الدرس لنتشارك هذه الخبرة الجديدة.

أمس اشتريت مجموعة أدوات تصميم الأكريليك التي تتضمن مصادر تصميم باستخدام دهان الأكريليك والذي يساعد على تصميم أعمال فنية رائعة باستخدام مجموعة متنوعة من خامات الدهان الملونة، فراشي الفوتوشوب، رسومات فكتور وملف فوتوشوب ذكي مذهل. لذلك في درس اليوم سأعلمكم كيفية تصميم ملصق مذهل للمهرجان الصيفي للموسيقى باستخدام خيارات صغيرة من هذه الأدوات التي يمكنك البحث عنها وتحميلها من الإنترنت. سيتم إنشاء العمل الفني باستخدام خامتين من دهان الأكريليك مع عينات فكتور من ضربات الفرشاة، فراشي الدوائر وفراشي الأسطر. سنقوم بدمج جميع هذه العناصر مع بعض النصوص والأشكال في برنامج الفوتوشوب لإنتاج هذا الملصق الملوّن البرّاق لمهرجان الموسيقى الصيفي. حمّل مجانًا أمثلة عن حزمة أدوات الأكريليك الخاصة بهذا الدرس بعد تحميلك لملف عينات الحزمة المجانية قم بفتح الخامة الحمراء ذات الاسم Mercury Rising في الفوتوشوب. انقر نقرًا مزدوجًا على طبقة الخلفية لجعلها قابلة للتعديل ثم اضغط CMD+T للتحويل. كبّر الخامة مع الضغط على مفتاحي Alt وShift حتى تملأ المنطقة المدهونة كامل مساحة العمل. اضغط CMD+I لعكس ألوان هذه الطبقة ويتحوّل اللون الأحمر إلى أزرق برّاق. أو يمكنك استخدام تقنية نمط طبقة لونية فوقيّة للحصول على ذات اللون الجديد. افتح خامة الورق في الفوتوشوب ثم اضغط CMD+A لتحديد الكل ثم CMD+C للنسخ. عُد مجدّدًا إلى ملف العمل الأساسي ثم اضغط CMD+V للصق. غيّر خصائص مزج هذه الطبقة إلى Multiply ثم اذهب إلى القائمة Image > Adjustments > Desaturate لإزالة الألوان. خفّف التعتيم لنحو 60% لتخفيف الضغط على الخامة. افتح خامة دهان أكريليك باسم Summer Harvest. هذه الصور ذات نوعية PNG قد تم قصّها بالفعل من خلفيّاتها لذلك يمكنك استخدامها في جميع أنواع التصاميم التي تعمل عليها. انسخ وألصق الخامة داخل المستند الرئيسي الذي نعمل عليه. اضغط CMD+T للتحويل ثم دوّر، كبّر وضع الخامة بشكل تبدو منبثقة من الزاوية السفلية اليسرى وبارزة قطريًّا. بعض الوهج والهالات قد تظهر عند وضع خامة PNG فوق خلفية داكنة. اذهب إلى القائمة Layer > Matting > Defringe وأدخل القيمة 1px لإزالة هذه الظاهرة. انقر نقرًأ مزدوجًا على طبقة الخامة وأضف ظلالًا Drop Shadow. اجعل لون الظل أسود وخصائص المزج Multiply والتعتيم 30% وزاوية الظل 90 درجة والمسافة 25px والانتشار صفر والحجم 50px. انقر بالزر الأيمن على Drop Shadow ضمن خصائص الطبقة الملحقة أسفلها ثم اختر Create Layer. اضغط CMD+T للتحويل ثم الزر الأيمن واختر Warp. احنِ واضبط الظلال للحصول على شكل أكثر واقعية وطبيعية كما لوكان الدهان رُفِعَ بعيدًا عن الخلفية. اضغط Enter لتطبيق التعديلات ثم خفّف قيمة Fill للطبقة إلى 15% للمزيد من تخفيف ظهور الظل. اختر أداة رسم المستطيل ثم أنشئ طبقة جديدة. اسحب شكلًا مستطيلًا بدءًا من المركز عبر الاستمرار بالضغط على مفتاحي Alt وShift للمحافظة على مركزية الشكل وتساوي الأبعاد ما يجعل الشكل الناتج عبارة عن مربّع. امسح لون التعبئة ثم أضِف حدودًا بيضاء من شريط الأدوات العلوي. اضبط حجم الحدود إلى 25px. حرّك هذا الشكل ليتطابق مع مركز مساحة العمل. أضِف قناعًا لطبقة المستطيل ثم استمر بالضغط على مفتاح CMD أثناء النقر على مُصغّر طبقة خامة Summer Harvest في لوحة الطبقات لتحميل تحديد على شكل الخامة. حدّد قناع طبقة المستطيل في لوحة الطبقات ثم استخدم الاختصار ALT+Backspace لملء هذا التحديد باللون الأسود وبالتالي تحقيق مسح مثالي لهذا الجزء من الشكل. اختر أداة الفرشاة واضبط القساوة على 75%. اجعل لون المقدمة اللون الأبيض ثم ابدأ بالرسم على لوح الرسم لإعادة إظهار المستطيل من قناع الطبقة. اضبط رأس الفرشاة لتحقيق سيطرة أكبر ودقة أعلى أو اضغط على مفتاح X لتبديل لون المقدمة بلون الخلفية والتلوين باللون التالي لإعادة إخفاء الأجزاء غير المرغوبة. اتبع حواف المربع واستعد المساحات الفارغة بين حدود ضربتي فرشاة من الخامة لإعطاء الانطباع بأن المربع يمر من خلال ضربات الفرشاة تارة فوقها وأخرى تحتها. انقر مرتين على طبقة المربع ثم أضِف ظلالًا لهذه الطبقة. كرّر عملية النقر بالزر الأيمن واختيار Create Layer ثم حوّل باستخدام Warp لإنتاج ظل أكثر واقعية. استخدم أداة النص واكتب في وسط المربع. أنا استخدمت خطًّا هندسيًّا جميلًا مجانيًّا اسمه Montserrat بالبنط العريض. استمر بالضغط على Alt أثناء سحب عنصر النص لتصنع نسخة عنه ثم عدّل النص لتوضّح اسم المهرجان المطلوب. استخدم الاختصار CMD+T لتحويل وتغيير حجم عناصر النص وجعلها بالعرض ذاته. ومن أجل رقم 2016 فقد استخدمت خطًّا مميزًا غير مجاني اسمه Have Heart. احنِ هذا النص قليلًا بشكل يتداخل قليلًا مع النص في الأعلى. لتعزيز نص 2016 انسخ شكل فكتور خط سفلي بالفرشاة من الحزمة التي حمّلتها في بداية الدرس ثم ألصقها في مستند الفوتوشوب. عدّل حجمها وضعها تحت رقم 2016 ثم اضغط CMD+I لاستبدال لون التعبئة الأسود باللون الأبيض. انسخ أحد عناصر النص السابق وصغّره لنستخدمه في كتابة لائحة بأسماء الفنانين المشاركين في الحفل الموسيقي. حدّد جميع عناصر النص الجديدة واستخدم زر المحاذاة من شريط الأدوات لتتم محاذاتهم إلى الوسط وتوزيع المسافات بينهم بالتساوي. انسخ شكل فكتور شطبة الفرشاة الحادة من الحزمة التي تم تحميلها بداية الدرس وألصقها في مستند الفوتوشوب. اضغطها للأسفل حتى تصبح خطًّا نحيفًا ثم استخدمه كحاجز بين العناصر النصيّة في اللائحة. استمر بالضغط على Shift وحدّد جميع أشكال الحواجز والنصوص ثم استمر بالضغط على Alt أثناء سحب نسخة عنها وضعها في الجهة المقابلة. عدّل النصوص الجديدة لإضافة بقية أسماء المشاركين ثم حدّد جميع هذه العناصر وطابقها في منتصف مساحة العمل. انسخ شكل فكتور ضربة الفرشاة الدائرية وألصقها أعلى التصميم. عدّل الحجم بشكل مناسب ثم استخدم CMD+I لعكس اللونين الأبيض والأسود. استخدم هذا الشكل الأخير لوضع الشعار بداخله والذي سيكون لونه مأخوذًا بأداة القطّارة Eyedropped من خامة الدهان العلوية لجعلها مندمجة مع ألوان التصميم. استخدم عنصر نصٍّ جديد واكتب فيه كلمة Presents تحت الشعار مع تصغيره قليلًا وجعل التباعد بين الأحرف 500 لجعله بارزًا أكثر. قمنا باستخدام خامات الدهان المتنوعة بذكاء لصناعة تصميم ملصق تجريدي رائع لمهرجان الحفل الموسيقى الصيفي. لقد رأينا كيف أن خامات JPEG ممتازة للخلفيات بينما خامات PNG هي الأفضل للتداخل مع بقية العناصر بدون استخدام الخلفيات البيضاء للحصول على النتائج الجيدة. يمكن استخدام هذه النوعية من الخامات منفردة أو بشكل مجمّع للحصول على تصاميم رائعة. ترجمة -وبتصرّف- للمقال: How To Create a Music Festival Poster Design in Photoshop لصاحبه: Chris Spooner

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

اتبع الخطوات في درس الفوتوشوب هذا لتتعلم كيفية تصميم نص مشوّه رائع. سنصمم باستخدام مجموعة متنوعة من الفراشي منظرًا لبقايا قطرات ماء مطبوعة على الورق مسببة تشوهًا في النص بسبب التبلّل من القطرات والرشح والدوائر. أذكر أنني شاهدت تصميمًا مشابهًا للمصمم Craig Ward عبر تصميمه الرائع Ink and water don’t mix. ولقد أعجبني التصميم وقررت أن أجرّب بنفسي لذلك فتحت برنامج فوتوشوب وبدأت التجريب. اتبع هذه الارشادات التفصيلية لتعلّم إنشاء تصميم مشابه باستخدام الفراشي الجاهزة لتشويه بعض التايبوغرافي الذي سنختاره. ابدأ العمل على فوتوشوب عبر فتح ملف جديد. أنا اخترت نموذج ملصق عرضي. استخدم عبارة كلاسيكية بخط معبّر مثل مجموعة خطوط Bodoni. قسّم الكلمات إلى طبقات وحرّكها حتى تصبح متناسقة ومتوازنة، قم بمحاذاة عناصر الكلمات مع الأحرف التي فوقها وتحتها للحصول على هيكل متناسق. من الممكن أن نقوم بتوسيخ أيدينا وتلطيخها ببعض الحبر وتلطيخ الورق ثم مسحه بواسطة الماسح الضوئي للحصول على نتائج جيدة، ولكن بدلًا من ذلك يمكننا اتخاذ الطريق الأسهل واستخدام فراشي جاهزة من مصممين وفنانين كرماء. ابحث في شبكة الإنترنت عن مجموعات فراشي بقع الحبر للفوتوشوب. هذه بعض من الخيارات الرائعة التي وجدتها: Gradient Splats (Coffee Stains (1 (Coffee Stains (2 (Coffee Stains (3 Sumi Ink Brushes حمّل مجموعة من ملفات ABR داخل الملف. في فوتوشوب اضغط على السهم الصغير في زاوية لوحة الفراشي Brushes واختر Preset Manager ثم حمّل جميع فراشي الحبر. اختر بعضًا من أشكال الحبر المثيرة للاهتمام من مجموعة الفراشي المتنوعة وارسم بعض العلامات والبقع على النص في طبقة جديدة. اضبط حجم الفرشاة باستخدام مفاتيح الحوامل المربعة. ارسم العديد من البقع على أطراف الحروف بشكل يشابه شكل رسم الحرف فإذا كانت علامة الحبر طويلة فقم برسمها فوق جزء حرف طويل. أعطِ بعض الحروف تشويهًا كبيرًا بإضافة علامات كبيرة من الحبر ولكن حافظ على العبارة بشكل مقروء ومرئي 100%. بعض الفراشي تكون برؤوس مدببة ومن المفترض أن يكون هذا التصميم عبارة عن تشويه النص بشكل طبيعي بسبب قطرات الماء لذلك اختر بعضً من هذه الفراشي وانقر نقرًا خفيفًا لرسم القطرات والعلامات بشكل مناسب. يمكنك إعادة استخدام الفراشي ولكن تجنّب التكرار لذلك قم بتدوير اتجاه الفرشاة في كل مرّة. عندما تقترب من إنهاء التصميم، حمّل بعض فراشي البخاخ لتستخدم قطرات صغيرة لإضافة بعض اللمسات الأخيرة على التصميم. قم بتحميل خامة ورق الجرونجي لإضافة خلفية تفاعلية مثيرة للاهتمام. أشبع ألوان الصورة بالأمر Desaturate وخفّف التعتيم Opacity إلى 15% لجعل درجات ألوان الخلفية ملائمة أكثر. انظر إلى التصميم بشكل عام واضبط التعتيم Opacity لأي طبقة بحسب أهميتها واستخدم فرشاة صغيرة ناعمة لمزج مساحات مناسبة بين النص والحبر. ترجمة -وبتصرّف- للمقال: Create a Cool Wet Ink Typography Effect in Photoshop لصاحبه: Chris Spooner.

في الدرس السابق قمنا باستخدام برنامج فوتوشوب لتصميم واجهة موقع لغابة افتراضية باسم "Pinewood Forest". أمّا في هذا الدرس فسوف نقوم بتكويد ذلك التصميم باستخدام لغتي HTML وCSS وتحويله إلى صفحة ويب كاملة. كما سنقوم أيضًا باستخراج الصور الموجودة في التصميم لاستعمالها في الموقع. في حال أنك لم تقرأ الدرس السابق، أنظر إلى الصورة في الأعلى لترى التصميم الذي سوف نقوم بتكويده. يحتوي الموقع على صورة خلفية كبيرة وثابتة لتسمح لمحتوى الموقع بالتمرير(scroll) فوقها، والمحتوى نفسه مجزأ إلى عدة أجزاء، وتم استخدام مجموعة من الصور لجذب انتباه الزائر. استخراج الصور الموجودة في التصميم ستكون الخطوة الأولى قبل البدء بتكويد التصميم هي استخراج الصور من التصميم. بعض أجزاء التصميم يمكن عملها باستخدام CSS فقط ولكن أجزاء أخرى من التصميم سنحتاج فيها إلى الصور. يحتوي الجزء الرئيسي للموقع على صورة خلفية كبيرة، وسوف نحتاج إلى ضغط هذه الصورة لتقليل حجمها الكبير وذلك عن طريق اللجوء إلى خيار Save for web. كما قلنا سابقًا، سيحتوي الموقع على خلفية ثابتة وسوف يظهر المحتوى فوق هذه الصورة، وبالتالي فإن العناصر مثل الشّعار سنحتاج إلى استخراجها بصيغة PNG-24 لأن هذه الصيغة تدعم الشفافية (transparency). ستكون خلفية المحتوى الرئيسي للموقع ذات طابع شفاف أيضًا وبالتالي سوف نحتاج إلى استخراجها بصيغة PNG، وهذه الخلفية سيتم تقسمها إلى ثلاثة أقسام؛ قسم علوي وقسم سفلي وقسم مكرر في المنتصف. المجموعة النهائية للصور سوف تحتوي على صور بصيغة PNG وأخرى بصيغة JPEG. بعض الصور ستكون بحجم صغير، وهذه الصور سيتم تكريرها (باستخدام CSS) لإنشاء خلفيات مزخرفة، أمّا الصور الأخرى فسوف تكون صورًا بديلة عن النصوص لاستخدامها كعناوين. بنية ملف HTML <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Visit Pinewood Forest</title> <link href="styles.css" rel="stylesheet" /> </head> <body> <div id="container"> </div> </body> </html> سيحتوي الملف الرئيسي (index file) على أكواد HTML. يُستخدم <doctype html!> لتعريف المتصفح بإصدار HTML المُستخدم ويعتبر أيضًا من الممارسات الجيدة في عالم تصميم الويب، لذلك احرص على أن يكون موجودًا في كل موقع تقوم بتصميمه. يتبع ذلك وسم <head> ويحتوي هذا الوسم على عنوان الصفحة وعلى رابط لملف CSS. وأخيرًا يوجد وسم <div> وسيحتوي هذا الوسم على بقية عناصر/وسوم الصفحة. <body> <div id="container"> <div id="header"> <p id="logo"> <a href="#" title="Return to the homepage"> <img src="images/pinewood-forest-logo.png" alt="Pinewood Forest logo" /> </a> </p> <ul> <li><a href="#">Visit</a></li> <li><a href="#">Discover</a></li> <li><a href="#">Trails</a></li> <li><a href="#">Maps</a></li> </ul> </div> </div> </body> </html> يبدأ التصميم بوسم div مع إعطائه id بقيمة "header" وسيحتوي هذا الوسم على الشّعار وعلى عناصر القائمة الرئيسية (navigation items)، وسيكون الشعار عبارة عن صورة داخل وسم <img> موضوعة في وسم <a>. تُستخدم title الموجودة في وسم <a> لتعريف المستخدم بالوجهة التي سيصل إليها حال نقره على الرابط، أمّا alt في وسم <img> فإنها تُستخدم لإعطاء المستخدم وصفًا عن الصورة في حالة عدم ظهور الصورة. يُعتبر وسم <ul> هو الوسم الشائع عند عمل القوائم الرئيسية لأنّه يُصوّر لنا وبدقة تلك القائمة على هيئة HTML حتى لو لم يكن هناك تنسيقات CSS. وبالرجوع إلى التصميم يمكنك ملاحظة أن الشعار موجود في الوسط بين قوائم العناصر الرئيسية، ولكننا سنبقي كلا العنصرين (الشعار والقائمة الرئيسية) مفصولين عن بعضهما حتى نحصل على هئية وملف HTML نظيف ومُرتّب، وسنلجأ لاحقًا إلى استخدام CSS لتحريك تلك العناصر حتى نحصل على نتيجة مرضية ومطابقة للتصميم. <div id="content"> <div id="feature"> <div id="feature-content"> <h1>Explore the forest</h1> <p>Find everything you need to explore and discover the mysteries of the forest, from maps and trail guides to must see attractions</p> <p class="btn"><a href="#">Begin your journey</a></p> </div> </div> </div> بعد الترويسة (header) تأتي منطقة المحتوى الرئيسي (main content)، ولجعل هيكل ملف HTML نظيفًا فسوف يتم وضع جميع العناصر في وسم <div> واحد، كما وستظهر منطقة الـfeature في بداية الصفحة وداخل وسم <div> ليتم تموضعها بشكل دقيق ومناسب. أمّا بالنسبة للعنوان الرئيسي في الصفحة (الذي يحتوي على النص "Explore the forest") فسوف يتم وضعه داخل وسم <h1>. لاحظ أيضًا أنه تم إضافة "class="btn إلى العنصر <p> ليمكننا تحويل هذا العنصر إلى زر باستخدام CSS. المستوى الثاني من العناوين سيكون موجودًا داخل وسم <h2>، وسيكون المحتوى الرئيسي منقسمًا إلى عمودين، بحيث يكون العمود الأكبر عبارة عن div مع id بقيمة "main" وبداخل هذا العمود توجد النصوص (عناصر <p>). لا تنسى تحويل الروابط إلى عناصر <a> وأي رموز خاصة (characters) إلى ما يقابلها من HTML entities (مثل رمز "&" يتم تحويله إلى "&"). وفي الأسفل من نفس العمود يوجد قسم "upcoming events"، ويمكننا استخدام عناصر <dl> ،<dt> و<dd> (اختصار للكلمات "Definition List"، "Definition Term" و"Definition Description" على التوالي) بحيث تحتوي عناصر dt على تاريخ الحدث وعناصر <dd> على وصف بسيط للحدث. لاحظ أننا استعملنا وسوم <span> داخل عناصر <dt> وذلك لإعطائها تنسيقات مميزة باستخدام CSS. <div id="side"> <div class="aside"> <a href="#"><img src="images/tracks-and-trails.jpg" alt="Tracks and Trails" /></a> <p>Pinewood Forest has a vast selection of walking and hiking trails to suit every visitor<a href="#">Find out more</a></p> </div> <div class="aside"> <a href="#"><img src="images/mountain-biking.jpg" alt="Mountain Biking" /></a> <p>Pinewood Forest is home to some of the most demanding XC and Freeride Mountain Biking routes<a href="#">Find out more</a></p> </div> <div class="aside"> <a href="#"><img src="images/christmas-events.jpg" alt="Christmas Events" /></a> <p>Pinewood Forest has a vast selection of walking and hiking trails to suit every visitor<a href="#">Find out more</a></p> </div> </div> </div> <div id="footer"> <p id="back-to-top"><a href="#">Back to top</a></p> </div> </div> بالنسبة للعمود الأصغر فسوف يكون موجودًا داخل عنصر div آخر مع id بقيمة "side". تتكون القائمة الجانبية (sidebar) من ثلاثة أقسام رئيسية وكل قسم يحتوي عنوان على شكل صورة وعلى وصف بسيط لكل قسم، ولأن كل صورة تحتوي على نص بداخلها فقد قمنا باستخدام alt لكل صورة حتى نحافظ على ما يسمى بالـaccessibility. وفي نهائية الصفحة قمنا بإغلاق وسم <div> الخاص بالمحتوى وتحتها يوجد div خاص بالـfooter وبادخله نص "Back to top" ليأخذنا إلى أعلى الصفحة عند الضغط عليه. انتهينا إلى الآن من هيكلة ملف HTML ويمكنك إلقاء نظرة إلى الصورة في الأعلى لترى كيف يجب أن يظهر بدون CSS. لاحظ أنه يمكن قراءة الملف حتى بدون تنسيق الملف باستخدام CSS. تنسيق الصفحة باستخدام CSS body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { font: 14px/26px Georgia, Serif; color: #444a54; background: #2d3237 url(images/bg-photo.jpg) center top no-repeat fixed; } #container { width: 960px; margin: 50px auto; } لنبدأ الآن بتنسيق الموقع باستخدام CSS. يُستخدم السطر الأول من أجل إزالة أي تنسيقات افتراضية للمتصفحات (يسمى هذا "CSS reset")، وبعد ذلك يوجد داخل المحدد body الخصائص العامة للخطوط في الموقع وصورة خلفية، ولأننا نريد هذه الصورة أن تكون ثابتة لا تتحرك مع باقي الصفحة عند التمرير(scrolling) فقد قمنا بإعطائها القيم "fixed" ،"top" و"center". وقد قمنا بإضافة لون أزرق (2d3237) حتى تظهر الخلفية بشكل أفضل لمن لا يمكنه رؤية الصورة لسبب أو لآخر وكذلك لمن يمتلك شاشات بدقة وأبعاد ضخمة. أمّا بالنسبة للحاوي الرئيسي (main container) فقد تم إعطاؤه عرض ثابت بقيمة 960px وتم توسيطه باستخدام الطريقة الشائعة margin: 0 auto. header { background: url(images/content-top.jpg) center bottom no-repeat; overflow: hidden; } header p#logo { position: relative; width: 295px; margin: 0 auto -74px auto; } header ul { width: 916px; margin: 0 auto 110px auto; overflow: hidden; list-style: none; } header li { float: left; } header li:nth-child(1) { margin: 0 70px 0 0; } header li:nth-child(2) { margin: 0 325px 0 0; } header li:nth-child(3), header li:nth-child(4) { margin: 0 0 0 70px; } header li a { font-size: 16px; letter-spacing: 9px; color: #4e5761; text-decoration: none; } header li a:hover { color: #7c8896; } يمكنك ملاحظة أنه تم إضافة صورة كخلفية للقسم العلوي من جزء المحتوى إلى الأسفل من الترويسة. ولموضعة الشعار وعناصر القائمة الرئيسية كما هو موجود في التصميم، فقد استخدمنا الخاصية margin بقيم سالبة. ولأن عناصر القائمة موجودة في كلا الجانبين من الشعار فقد تم استخدام nth-child لتحديد كل عنصر من العناصر الأربعة وإعطائه قيمة margin مناسبة، وعن طريق استخدام letter-spacing استطعنا تنفيذ التباعد بين الحروف(tracking) الموجود في التصميم. content { padding: 0 52px; overflow: hidden; background: url(images/content-repeat.png) center top repeat-y; } content #feature { width: 916px; height: 420px; position: relative; margin: 0 0 30px -30px; background: url(images/feature-bg.jpg); } content #feature #feature-content { position: relative; width: 384px; top: 92px; left: 460px; } content #feature #feature-content h1 { widht: 384px; height: 91px; margin: 0 0 5px 0; background: url(images/explore-the-forest.png); text-indent: -9999px; } content #feature #feature-content p { color: #fff; margin: 0 0 15px 8px; } content #feature #feature-content p.btn a { display: block; widows: 163px; height: 39px; background: url(images/begin-your-journey.png); text-indent: -9999px; } content #feature #feature-content p.btn a:hover { margin: -1px 0 0 0; } بما أنّ ارتفاع div الخاص بالمحتوى سيختلف من صفحة لأخرى، فقد قمنا باستخدام صورة ليتم تكريرها حتى نسمح لجزء المحتوى أن يتمدد بدون قيود، واستخدمنا padding على اليمين واليسار حتى نُبعد محتوى الصفحة عن الحواف. ولأنّ منطقة المحتوى ستحتوي على عمودين وكل منهما يحتوي على الخاصية float، فسوف نحتاج إلى استخدام overflow: hidden حتى يظهر كل شيء بشكل جيد. إعطاء قسم الـfeature الخاصية position: relative سيسمح للمحتوى بالتحرك في مكانه، كما أنّ القيمة السالبة للخاصية margin ستعوّض عن قيمة padding التي تم إعطاؤها لـdiv المحتوى وذلك لنسمح لذلك القسم بالتمدد إلى أقصى أطراف الصفحة. كما أنه تمّ استخدام صورة في وسم h1، ولكن تم تنسيق الفقرة باستخدام خصائص font في CSS. وبالنسبة للزر، فقد تم استخدام صورة وإعطائه بعض التنسيقات حتى يظهر بشكل جيد. content #main { width: 536px; float: left; margin: 0 20px 0 0; } content h2 { font-size: 20px; font-weight: normal; margin: 0 0 20px 0; } content p { margin: 0 0 20px 0; } content a { color: #3f6489; } content a:hover { color: #0d3965; } content dl { } content dt { float: left; width: 40px; height: 50px; margin: 0 15px 0 0; background: #a1a3a5 url(images/date-bg.png); font-size: 30px; color: #fff; text-align: center; } content dt span { display: block; font-size: 12px; font-weight: bold; text-transform: uppercase; } content dd { float: left; width: 480px; } content dd h3 { float: left; font-size: 20px; font-weight: normal; } content dd span { float: left; margin: 4px 0 0 10px; visibility: hidden; } content dd p { clear: left; } content dd:hover span { visibility: visible; } سيكون الـdiv الرئيسي هو الأعرض بين العمودين؛ بعرض 536px. وسيكون العرض لكل من main وside بالإضافة إلى الـmargin بينهما هو العرض الخاص بـdiv الأب منقوصًا منه قيمة padding اليسار واليمين. تم تحويل عناصر dt إلى أيقونة التاريخ عن طريق إعطائها عرض وطول ولون خلفية رمادي. وباستخدام تنسيقات font مناسبة أمكننا جعل نص التاريخ كبيرًا وبلون أبيض، كما أنّه تم جعل الخط الخاص بالعنصر span أصغر بقليل حتى يظهر الشهر أسفل رقم اليوم بشكل جميل. وحتى تظهر عناصر dt وdd بجانب بعضها فقد تم إعطاؤها الخاصية float: left. لاحظ أننا استخدمنا visibility: hidden على العنصر span وذلك حتى نخفيه عن أنظار الزائر إلى أن يضع مؤشر الفأرة فوق عنصر dd لنقوم عندها بإظهار رابط "View more info". content #side { width: 300px; float: left; } content .aside { padding: 17px 0 0 17px; margin: 0 0 30px 0; background: url(images/aside-bg.png) center top no-repeat; } content .aside img { margin: 0 0 15px 0; } footer { padding: 70px 22px; background: url(images/content-bottom.png) center top no-repeat; } footer p#back-to-top { float: right; font-size: 11px; } footer p#back-to-top a { color: #fff; text-decoration: none; } footer p#back-to-top a:hover { color: #d7d9d8; } كل عنصر aside. تم إعطاؤه خلفية مزخرفة، وبالنسبة للخطوط فإنها ستأخد التنسيقات الخاصة بـ div المحتوى بسبب ما يسمى بالتوريث (inheritance). أمّا بالنسبة لرابط "back to top" فسوف نضطر إلى إعطائه تنسيقات جديدة لأنه موجود خارج div المحتوى، ولأنّ هذا الرابط موجود ضمن خلفية داكنة وخارج المحتوى الرئيسي فإننا سنحتاج لتعديل الألوان وجعلها مختلفة عن البقية الموجودة في باقي الصفحة. بقي شيء واحد قبل أن ننتهي من هذا الدرس وهو أنّه يجب عليك أن تعرف أن خاصية nth-child غير مدعومة في بعض إصدارات متصفح Internet Explorer، لذلك إذا أردت أن تدعم تلك المتصفحات فيجب عليك استخدام jQuery: $(document).ready(fucntion() { $("#header ul li:nth-child(1)").css("margin-right", "70px"); $("#header ul li:nth-child(2)").css("margin-right", "325px"); $("#header ul li:nth-child(3)").css("margin-left", "70px"); $("#header ul li:nth-child(4)").css("margin-left", "70px"); }); إلى هنا نكون قد أنهينا درسنا وحصلنا على صفحة كاملة وجاهزة. يمكنك أيضًا تصفح الموقع بشكله النهائي إذا أحببت ذلك. أو تصفح الملفات المصدرية. ترجمة -وبتصرف- للمقال: Design a Textured Outdoors Website in Photoshop لصاحبه: Iggy.

يُستَخدم فلتر 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

تظهر على الدوام توجهات مُختلفة للتصميم والتي تُطلقها وتقف خلفها الشركات الكبيرة المؤثرة على الأسواق، وتُعدّ تقنيّة التصميم بالظل الطويل "Long Shadow Design" أحد أكثر التوجهات المُلفتة والتي ظهرت مع إعلان شركة Apple لنظامها iOS 7 وأصبحت تُكمّل جنباً إلى جنب تقنيّة التصاميم المُسطحة "Flat designs" والتي أظهرتها شركة مايكروسوفت Microsoft جلياً مع نظامها Windows 8. الظل الطويل "Long Shadow" ببساطة!هو عبارة عن ظل مُنحني بزاوية 45 درجة في العادة ويُمكن رسمه في الطرف اليميني أو اليساري للتصميم (عادة يُستخدم الظل على يمين التصميم للناظر – أي كأن هُناك ضوء مُسلّط من أعلى اليسار ليظهر الظل في اليمين)، وبدأ استخدام التأثير مع الايقونات "icons" إلّا أنه امتد ليشمل الكتابة والرسومات والأجهزة بحسب نظرة المُصمم وإبداعه في التطبيق. أمثلة تطبيقيّة: على اليمين Skype من تصميم JustD. على اليسار Flat Club من تصميم miguelcm. تطبيق عملي على تأثير الظل الطويل "Long Shadow":بعد أن تعرفتم على تاريخ انطلاق التأثير سنكون سعداء لأخذكم بجولة تطبيقيّة تشرح آلية تنفيذ التصميم عبر برنامج Adobe Photoshop. سنخرج بدرسنا بالنتيجة التالية: تلميح: كما هو معروف في عالم التصميم بأن النتيجة النهائية قد تظهر بعدة طرق قد يكون بعضها مُعقّد وصعب وبعضها سريع وجميعها يؤدي الغرض. أيضا نود أن نشير بأنه وبعد انتشار توجّه التصميم بالظل الطويل ظهرت العديد من المواقع الالكترونية التي وفّر بعضها تطبيقات مأجورة و مجانيّة تُمكّن المُستخدمين ممن ليست لديهم خبرة في التعامل مع برامج التصميم من تطبيق الظل الطويل على الرسومات والشعارات الخاصة بهم، أيضاً هُناك إضافات مكتبية وإضافات إلى برامج التصميم ذاتها وفّرت نفس الفكرة، إنما في العادة لا تُوجد نتائج صحيحة وواضحة بشكل كامل باستخدام تلك التطبيقات التي تعتمد على نقاط وخوارزميات مُحددة لذا فإن مُعظمها لن تُلبي الاحتياج المطلوب بشكله الكامل. سنوفّر لكم بهذا الدرس الأساس الصحيح لعمل تأثير الظل الطويل "Long Shadow" بخطوات واضحة عبر استخدام برنامج Adobe Photoshop. لنبدأ بالتطبيق! الخطوة الأولى:1 - افتح مساحة عمل جديدة في Adobe Photoshop واختر الإعدادات كما في الصورة أدناه: 2- اختر لون مُناسب للخلفية، سوف نختار اللون (714a76 #) في تصميمنا: 3- اكتب الاسم المُراد التطبيق عليه واختر له اللون الأبيض (ffffff#) ثُم قم بتوسيطه داخل مساحة الرسم، كما هو موضّح أدناه: (تلميح: تأثير الظل الطويل سوف يبرز بشكل جمالي أكبر مع الخطوط العريضة) الخطوة الثانية:1- تحديد زاوية 45 درجة (وهي زاوية ميلان الظل المُراد رسمه) من خلال اتباع ما يلي: اضغط على (CTRL + " / أو حرف ط) لإظهار الشبكةقم بتقريب الصورة من خلال استخدام أداة (Zoom Tool – أو العدسة المُكبِّرة) أو بالضغط مُباشرة على الحرف Zارسم سطر بشكل يدوي من خلال استخدام أداة (Line Tool) أو بالضغط مُباشرة على الحرف Uقُم بإدارة السطر بين زاويتيّ إحدى خانات الشبكة كي يُصبح ميلانه بزاوية 45 درجة (ما يهمُنا هُنا هو تحديد الميلان بزاوية 45 درجة وطريقتها كانت بتقسيم زوايا المُربع في المُنتصف كون أن زواياه قائمة "90 درجة"، لاحظ السطر الأخضر كيف يخترق مُربعات الشبكة بالرسم التوضيحي) 2- كرّر السطر الأخضر (مُحدِّد ميلان الظل) بنسخه وتوزيعه على الزوايا اليمينية للكلمة كما هو مُوضّح بالشكل التالي: الخطوة الثالثة:1- رسم الظل الطويل من خلال اتباع المراحل التالية: - اختر أداة البن تول (Pen Tool) وضع إعدادات الرسم كما هو مُوضّح 2- اعمل على الرسم بأداة (Pen Tool ) بالوصل بين نُقاط الزوايا العُلوية اليمينية كما هو موضّح بالصور: النتيجة: 3- كرّر نفس طريقة العمل السابقة لرسم ظل للنُقاط كما هو مُوضّح: النتيجة: الخطوة الرابعة والأخيرة:1- العمل على دمج ظل الكلمة مع ظل النُقاط من خلال اتباع ما يلي: - اذهب إلى نافذة الطبقات "Layers" وحدد طبقات الظلال من خلال إبقاء الضغط على زر CTRL واختيار الطبقات المُراد دمجها بزر الفأرة الأيسر. - بعد التحديد اضغط بزر الفأرة الأيمن واختر Merge Layers (( بالإمكان الاستعانة بالاختصار CTRL + E )) 2- العمل على تفتيح الظل لإخراجه بشكل واقعي ومُناسب: - اذهب إلى نافذة الطبقات "Layers" واضغط بزر الفأرة الأيمن على الطبقة الخاصة بالظل واختر نافذة Blending Options ثُم توجّه إلى نافذة إعدادات التدرج Gradient Overlay وحدّد ألوان التدرج للظل. لرسمتنا قُمنا بتحديد اللون الخفيف نفس لون الخلفية (714a76 #) ليظهر تلاشي للظل عند ابتعاده. كما اخترنا للظل الثقيل اللون (523a55 #). النتيجة النهائية للعمل

نستطيع الولوج إلى نمط القناع السريع 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

من السهل جدًّا تصميم خط منقّط باستخدام الفوتوشوب. كل ما تحتاج إليه هو تتبّع هذه الخطوات الثلاثة. 1. كيف تجهّز إعدادات أداة القلم لتصميم تأثير الخط المنقّط؟ افتح الصورة التي تريد رسم تأثير الخط المنقط حولها. أنا اخترت صورة هذه الكعكة. الآن اختر أداة القلم Pen Tool مع اختيار خيار الشكل Shape من شريط خيارات هذه الأداة عبر القائمة المنسدلة. سنتابع تجهيز إعدادات القلم من شريط الخيارات العلوي. اجعل لون التعبئة Fill بدون لون واجعل لون الحدود باللون الذي تريده. أنا اخترت اللون الأبيض وجعلتُ حجم الحدود 0.65pt. 2. كيف نستخدم أداة القلم لرسم مسار تحديد قبل تأثير الخط المنقّط؟ إذا انتهيت من الخطوة الأولى، عليك أن تقوم برسم تحديد حول الصورة. باستخدام أداة القلم كما يلي. 3. كيف تُجهّز وتُعِد تأثير الخط المنقّط النهائي؟ وصلنا إلى الخطوة الأخيرة. استخدم أداة القلم مع التأكيد على أن الخط الذي رسمناه محدّد سلفًا ثم اختر خطًّا منقطًّا من شريط الخيارات العلوي من قائمة Stroke Option. يمكنك تغيير إعدادات شكل وحجم الخطوط المنقطة من زر More Option أسفل القائمة. أنا قمتُ بجعل حجم الخط 4 وحجم الفجوة بين الخطوط 2 من أجل هذا التصميم. وبهذا يتم صناعة خط منقط حول الصور في الفوتوشوب. وهذه هي النتيجة النهائية. ترجمة -وبتصرّف- للمقال: How to Make Dashed Line Effect in Photoshop لصاحبه: Bijutoha

سنتعلم في هذا الدرس كيفية القيام بإنشاء تأثير مخطط هندسي أزرق في برنامج أدوبي فوتوشوب. إن كنت تعتقد بأنك ستجلس لساعات طويلة في رسم مخطط هندسي تقني فأنت مخطئ، سنقوم بخدعة خاصة في الفوتوشوب لإنشاء هذا النوع من المخططات في دقائق. سنستخدم بعض المرشحات الموجودة في الفوتوشوب لإنتاج الخطوط الأساسية من صورة مصدرية ومن ثم سندمج بعض نقوش خطوط الشبكات والخامات للحصول على الواقعية في التصميم. الواقعية في تأثير المخطط الهندسي الأزرق يعتمد كليًّا على الصور المصدرية التي سنعمل عليها. ومن أجل نتائج أفضل استخدم صورة الموضوع من الأمام، الجانب والأعلى، مدمجين في مستند واحد. المخططات الهندسية الزرقاء الحقيقية مرسومة بدقة وبتفاصيل تقنية خاصة بينما الصورة التي سنقوم بتطبيق التأثير عليها ستحوي دائمًا تفاصيل إضافية غير مرغوب بها وانعكاسات. إن التصيير (الرندر) ثلاثي الأبعاد للمخطط أو رسومات الفكتور يمكن استخدامها مباشرة بدون تعديلات الفوتوشوب ولكن في هذا الدرس سأشرح كيفية إنشاء مثال بناءً على صورة فوتوغرافية لمنزل. افتح الصورة المصدر ببرنامج الفوتوشوب. صورة هذا المنزل هي صورة مجانية بعنوان House Lights Turned On. اذهب إلى القائمة Image > Adjustments > Desaturate لإزالة الألوان من الصورة وجعلها بيضاء وسوداء. اذهب إلى القائمة Filter > Stylize > Find Edges لإنشاء مظهر الخطوط الأساسية التي تشكّل تأثير المخطط الهندسي الأزرق. المخططات الهندسية الزرقاء عمومًا هي عبارة عن خطوط مرسومة بلون فاتح فوق خلفية زرقاء داكنة لذلك اذهب إلى القائمة Image > Adjustments > Invert لعكس الألوان. الصورة تتضمن عناصر غير مرغوبة في المساحات المحيطة والتي لا يجب أن تكون ضمن المخطط الهندسي الأزرق. استخدم أداة القلم لتتبع العناصر المحيطة المطلوبة ثم انقر بالزر الأيمن واختر Make Selection. بما أن التحديد مفعّل انقر على أيقونة قناع الطبقة Layer Mask أسفل لوحة الطبقات لعزل العناصر على خلفية شفافة. أنشئ طبقة جديدة واسحبها تحت طبقة الصورة الأساسية. لوّن هذه الطبقة بالأزرق الداكن كاللون 051340# . غيّر خصائص المزج لطبقة الصورة إلى Screen لجعل الخلفية السوداء شفافة تاركًا الخطوط البيضاء ظاهرة على الخلفية الزرقاء. انقر نقرًأ مزدوجًا على طبقة الصورة وأضِف تأثير حدود الطبقة Stroke . غيّر الإعدادات إلى 5px من الداخل وخصائص المزج Screen والتعتيم 100%. من أجل إضافة الشبكة إلى المخطط سنحتاج أولًا إلى حامل نقوش. أنشئ مستندًا جديدًا بحجم 80x80px. قد يختلف هذا الجحم بناءً على حجم العمل. ارسم مستطيل تحديد في أعلى الصورة ليكون ضلع مربع الشبكة وانتبه للحجم. أضِف طبقة جديدة وأخفِ طبقة الخلفية في هذا المستند. استخدم أداة التحديد المستطيل لرسم شريط بعرض 2px على طول الحافة اليسرى ثم لوّنهم بالأبيض. اضغط على CMD+D لإلغاء التحديد ثم اذهب إلى القائمة Edit > Define Pattern امنح هذا النقش الجديد اسمًا يصفه بدقة مثل 80x80px Grid Pattern. أغلق هذا المستند ثم عد إلى ملف العمل الأساسي. أنشئ طبقة جديدة واختر أداة سطل الدهان. اختر Pattern من القائمة في الشريط العلوي ثم اختر أحدث حامل ألوان لديك. انقر في أي مكان في ملف العمل لتطبيق النقش على الطبقة. استخدم أداة التحديد المستطيل لرسم تحديد حول الصورة الرئيسية بشكل يكون حدود التحديد مطابقة لخطوط الشبكة الأخيرة. انقر بالزر الأيمن واختر Stroke ثم أدخل القيمة 5px في الخيارات مع اختيار اللون الأبيض والتوسيط. كبّر منظور العرض وارسم تحديدًا باستخدام أداة التحديد المستطيل حول مربعات الشبكة خارج إطار الحدود المرسومة في الخطوة الأخيرة ثم احذفها جميعًا. أضِف قناعًا لطبقة الشبكة. استمر بالضغط على Alt أثناء النقر على القناع لتعديل محتوياته. حمّل وافتح واحدة من خامات الغبار والخدوش الخاصة بي، ثم ألصقها مباشرة في القناع. عدّل حجم وزاوية الخامة لتملأ مساحة القناع بالكامل. انقر بواسطة أداة التحديد للخروج من وضعية تعديل القناع والعودة إلى الملف الأساسي وبما أن القناع لا يزال محدّدًا اضغط CMD+L لفتح نافذة المستويات. حرّك المزلاج لليمين لزيادة التباين بشكل كبير ثمّ حرّك مزلاج المخارج البيضاء إلى اليسار لاستعادة خطوط الشبكة وتظهر فوق الصورة بوضوح. أنهِ هذا التأثير بإضافة خامة ورق متّسِخ مثل أحد خامات الورق الملكية المجانية من Bashcorpo. ألصقها داخل المستند، دوّر واضبط الحجم، ثم أزِل ألوان صورة خامة الورق واعكس هذه الألوان. غيّر خصائص مزج طبقة الورق إلى Screen لإظهار تأثير الجرونجي وتتفاعل مع الخلفية الزرقاء لتعزيز الواقعية في تأثير المخطط الهندسي الأزرق. النتيجة النهائية تبدو رائعة كتأثير مخطط هندسي أزرق وتبدو كأنها مرسومة باليد مع وجود نمط الشبكة والتجاعيد والبقع والطيّات لإضافة المزيد من الواقعية. ترجمة -وبتصرّف- للمقال: How To Create a Blueprint Effect in Adobe Photoshop لصاحبه: Chris Spooner

سنبدأ بعيدًا عن الحاسوب حيث سنستخدم بعض الأدوات المنزلية لصناعة بعض الموارد الفوتوغرافية. ثم اتبع درس الفوتوشوب هذا لتتعلم كيفية معالجة الصور مع مختلف الأدوات والتقنيات لإنتاج تصميم مفعم بالحيوية مصنوع من تأثير تيارات ضوئية مكثّفة. سنبدأ بالعمل بعيدًا عن الحاسوب ونجمع معًا الموارد اللازمة للعمل عليها لاحقًا. إذا كنت تفضّل تجاوز هذه المرحلة والحصول على موارد رقمية جاهزة فإن هذه مجموعة من ستة صور تيارات ضوئية متوهجّة عالية الدقة في هذه الصفحة يمكنك استخدامها. كبداية سنحتاج إلى أداتين وهي كاميرا رقمية ومصباح يدوي. وستكون الكاميرات من نوع SLR خيارًا مثاليًّا لهذه المهمة حيث سنقوم بوضع إعدادات فتحة صغيرة أثناء التصوير الطويل. بالنسبة للمصباح اليدوي فمن الممكن استخدام أي نوع منزلي ببساطة ولا تتردد في تجربة عدة أنواع لاختيار النتائج الأفضل. جِد مساحة واسعة وأسدل الستائر وأطفئ الإضاءة للحصول على أشد ظلمة ممكنة. ثبّت الكاميرا على المنصب ثلاثي القوائم أو على أي سطح ثابت واضبط الكاميرا يدويًّا إلى الفتحة العالية F لزيادة عمق المجال وزِد سرعة إقفال مصراع عدسة الكاميرا إلى 20 – 30 ثانية. مع وجود المصباح في يدك والكاميرا مفعّلة قم بالتلويح بالمصباح بطريقة مجنونة حتى ينغلق مصراع الكاميرا. جرّب إعدادات مختلفة للكاميرا وتقنيات تحريك مختلفة أيضًا لتسجيل مجموعة من الصور واختيار الأفضل بينها. بعد بضع محاولات سيكون لديك مجموعة من الصور الجيدة للعمل عليها. وهنا صورة مثال صنعتها بنفسي ويمكنك أن تقوم بتحميلها إذا أردت. افتح الصورة التي اخترتها ببرنامج الفوتوشوب واضبط المستويات Levels والمنحنيات Curves وتشبع الألوان Hue/Saturation لزيادة قتامة الخلفية وزيادة بريق الأضواء. استورد الصورة إلى مستند جديد وامسح حوافها لتمتزج بنعومة مع الخلفية السوداء. في طبقة جديدة استخدم أداة التدرج اللوني Gradient Tool لتمزج ثلاثة ألوان برّاقة من حواف الصورة. غيّر خصائص مزج الطبقة إلى Color. اضغط على CMD+U لفتح نافذة أدوات الإشباع اللونية Hue/Saturation وحرّك المزلاج لضبط الألوان حتى تصل إلى الدرجة اللونية التي تفضلها. اختر لونًا أرجوانيًّا داكنًا ثم اختر فرشاة ناعمة. أنشئ طبقة جديدة وغيّر خصائص المزج إلى Color Dodge. ارسم بالفرشاة فوق مناطق الإضاءة لتكثيف تلك المناطق لتبدو وكأنها عملية وصل بين نقطتين. إن إعدادات Color Dodge تجعل الألوان تتفاعل وتُحدِث تأثيرًا حيويًّا. أنشئ مستندًا جديدًا بحجم 4x4px. كبّر منظور العرض وارسم خطًّا قطريًّا عبر المستند باستخدام أداة قلم الرصاص Pencil Tool. اذهب إلى القائمة Edit > Define Pattern ارجع إلى المستند الأساسي واملأ طبقة جديدة بهذا النقش الذي أنشأناه باستخدام أداة Fill Tool مع تعديل إعدادات الملء إلى Pattern من شريط إعدادات هذه الأداة. غيّر خصائص المزج إلى Overlay وخفّف التعتيم إلى 25%. أنشئ قناعًا لهذه الطبقة ولوّن المناطق السوداء في القناع لمسح قطاعات خطوط المسح. أنشئ نقشًا جديدًا وهذه المرة بناءً على مربع واحد والذي سيتكرّر ليُشكّل نقشًا منقطًّا صغيرًا. املأ طبقة جديدة بهذا النقش الجديد مع جعل خصائص المزج Overlay والتعتيم 25% وامسح المناطق أيضًا باستخدام قناع الطبقة كما في الخطوة السابقة. ارسم تدرجًا كبيرًا للأرجواني الداكن في طبقة جديدة وخفّف التعتيم إلى 15%. سنحتاج لهذا في الخطوة التالية حيث أن تقنية مراكبة الألوان لن تعمل على اللون الأسود النقي لذلك أضفنا الأرجواني للسماح لذلك التأثير بالبروز. في لوحة خصائص الفرشاة أنشئ فرشاة مخصصة والتي ستتكون من عدة أجزاء. ابدأ بتخفيف القساوة للفرشاة الدائرية القياسية إلى 0 وتحديد التباعد عند 100. في قسم ديناميكية الشكل Shape Dynamics اضبط حجم Jitter إلى 100%. إذا كنت تستخدم لوح القلم فإن خيارات ضغط القلم ستسمح لتأثير الفرشاة بالظهور بحسب القوة المستخدمة في الضغط على أداة اللوح. في قسم الانتشار Scattering اضبط Scatter إلى 1000%. في طبقة جديدة غيّر خصائص المزج إلى Color Dodge وارسم فوق مناطق خطوط الإضاءة لإضافة مجموعة من الجسيمات مما يضيف أسلوبًا حيويًّا للتصميم. أنشئ فرشاة جديدة وبإعدادات مشابهة ولكن هذه المرة بفرشاة أكبر وأقسى. خذ لونًا أزرقًا فاتحًا من التصميم وارسم مجموعة من الأشكال بنمط سطوع العدسات. استخدم أداة التمويه لإضافة العمق عبر تمويه بعض أشكال السطوع هذه. غيّر نمط الطبقة إلى Color Dodge وخفّف التعتيم إلى 60%. استخدم ذات اللون لملء سلسلة من الشرائط القطرية التي رسمتها باستخدام أداة Polygonal Lasso Tool. امسح حواف الشرائط لتمتزج مع باقي المستند. غيّر خصائص مزج طبقة الشرائط إلى Soft Light لتسمح للألوان بالتمازج لإضافة الحيوية إلى التصميم. قم بأية تعديلات نهائية واضبط التصميم بما يناسبك. لقد قمتُ ببساطة بإضافة بعض النصوص باستخدام خصائص المزج Color Dodge لموازنة التصميم. عمومًا، على الرغم من أنه يمكننا تصميم الخطوط الضوئية باستخدام الحاسوب إلا أنني أعتقد أن استخدام أدوات خارجية كالكاميرا والمصباح يعطي عنصرًا إضافيًّا لتفاصيل التصميم. ترجمة -وبتصرّف- للمقال: Create a Simple Vibrant Light Effect in Photoshop لصاحبه: Chris Spooner

إن استخدام الأشكال البسيطة يمكن أن يُنتج بعض التصاميم المعاصرة لملصقات كبيرة. سنقوم اليوم بتصميم ملصق مثير للاهتمام وملفت للنظر باستخدام كلمة واحدة فقط. ابحث عن صورة عشوائية تكون القاعدة الأساسية للتصميم، موضوع الصورة ليس مهمًّا على الاطلاق، فقط اختر صورة ذات تباين متنوع ومصممة بناءً على لونك المفضّل. في هذه الحالة اخترتُ أنا صورة مشهد طبيعي ذو الألوان الخضراء والزرقاء المتداخلة. افتح الصورة في برنامج فوتوشوب وعدّل حجمها بحسب حجم الملصق الخاص بك. اذهب إلى القائمة: Filter > Blur > Gaussian Blur اسحب المزلاج إلى أقصى حد ممكن حتى تزول ملامح الصورة بالكامل وتمتزج الألوان معًا. اذهب إلى موقع Bittbox.com وحمّل واحدة من الخامات عالية الدقة. ضع الخامة في طبقة جديدة في فوتوشوب. طبّق الأمر Desaturate على الصورة ثم غيّر خصائص المزج إلى Soft Light وخفف التعتيم opacity قليلًا ما يضيف القليل من التفاصيل والخشونة إلى الصورة. استخدم أداة النص لكتابة النص الذي ترغب به ضمن الملصق، أنا استخدمت كلمة SPOON بالخط العريض وبخط Helvetica Condensed Black. دوّر النص بزاوية 45 درجة (استمر في الضغط على Shift للحصول على هذه الزاوية بدقة). غيّر خصائص المزج إلى Soft Light للسماح للخامة في الخلفية بالظهور من خلالها. ضع النص بحيث يغطي زاوية الملصق ثم اسحب نسخة عنه مع الضغط على Alt وغيّر حجم النسخة وضعها في موقع جديد. اسحب نسخًا جديدة من النص مع الضغط على Alt وغيّر أحجامها حتى تملأ مساحة الملصق. قم بتدوير إحدى النسخ بزاوية 90 درجة لزيادة التنوع في اتجاهات نصوص التصميم. حرّك النص وضعه بشكل يغطي أية فجوات ضمن التصميم. انسخ نسخًا جديدة من النص مع تغيير الأحجام والزوايا في كل مرة مع التأكّد من محاذاة الزوايا الاتجاهات القطرية للتصميم. عندما تظهر الفجوات قم بملئها بنص جديد مناسب من حيث الحجم والزاوية. تأكّد في كل مرة تقوم فيها بنسخ النص من التنوع في الاتجاهات والأحجام وعدم تكتّل نصوص كثيرة متشابهة في الحجم والاتجاه في منطقة واحدة من التصميم. بعد القيام بنسخ مجموعة كبيرة متنوعة من النصوص من حيث الأحجام والزوايا فإن التصميم أصبح جاهزًا ومكتملًا. ترجمة -وبتصرّف- للمقال: Create a Trendy Typographic Poster Design لصاحبه: Chris Spooner.

لقد أنهيت للتو تجربة جديدة في الفن الرقمي حيث صممت نقشًا تجريديًّا رائعًا باستخدام الأشكال البسيطة في فوتوشوب. اتبع الخطوات في هذا الدرس لتعلم تصميم تفاصيل هذا الفن مع تأثيرات التدرجات والنقوش. التصميم ذاته مؤلف من مجموعة من الدوائر متّحدة المركز مع اختلاف أحجامها. كل دائرة ملوّنة على أساس حامل ألوان بستة ألوان ثم التدرجات وتعبئة النقوش التي تضيف المزيد من العمق إلى التفاصيل. قبل البدء بالتصميم الرئيسي سنحتاج إلى تصميم النقش المستخدم في هذا التصميم. أنا استخدمت هنا النقش المنقّط المُكرّر. ابدأ ملفًّا جديدًا في فوتوشوب بحجم 40x40px وكبّر منظور العمل. استخدم الأدلّة لتحديد مركز التصميم ثم ارسم دائرة. استمر في الضغط على Alt أثناء رسم الدائرة ابتداءً من المركز للمحافظة على المحاذاة المثالية. استمر في الضغط على Alt أثناء النقر وسحب الدائرة لصنع نسخة عنها. حرّك هذه النسخة الجديدة إلى إحدى زوايا مساحة العمل بحيث يكون مركز هذه الدائرة عند زاوية التصميم تمامًا. كرّر هذه العملية ثلاث مرّات أخرى مع وضع كل دائرة جديدة في زاوية جديدة من زوايا العمل. ثم اذهب إلى القائمة: Edit > Define Pattern أنشئ ملفًّا جديدًا ولكن هذه المرة ارسم مربعين أسودين بحيث يغطي كل مربع ربع حجم العمل. حوّل هذا الرسم إلى نقش كما فعلنا في الخطوة السابقة. لنبدأ العمل على القطعة الفنية الشاملة. أنشئ ملفًّا جديدًا بالحجم الذي تختاره. أنا اخترت مُلصقًا بحجم A3 وبدقة 300dpi. لوّن الخلفية بلون فاتح ثم اذهب إلى القائمة: Filter > Noise > Add Noise لإضافة تأثير الضجيج (البرغلة) إلى الخلفية وجعلها تبدو مثل خامة جميلة. استورد حامل ألوان مناسب، أنا اخترت هذه الألوان من ColourLovers. ارسم أول دائرة ولوّنها بأحد تلك الألوان. انقر نقرًا مزدوجًا على طبقة الدائرة في نافذة الطبقات ليتم فتح نافذة أنماط الطبقة. أضف التلوين بتدرج لوني Gradient Overlay ودع اللونين الأبيض والأسود الأساسيين ولكن بدّل خصائص المزج إلى Soft Light. هذا الأمر سيسمح للونين الأبيض والأسود بالتفاعل مع اللون الأساسي ورسم درجات ألوان قاتمة وفاتحة. أضف حدودًا Stroke للدائرة ولونها بلون أزرق أفتح من اللون الأساسي. وحافظ على الحدود لتكون خارجية واضبط حجمها بما يناسبك. ثم أضف ظلالًا Drop Shadow. اضبط المسافة Distance إلى الصفر، ولكن زِد الحجم حتى تمتد الظلال إلى ما بعد الحدود. خفّف التعتيم Opacity للحصول على تأثير ظل خفيف. أضف بعض التفاصيل للشكل عبر اختيار Pattern Overlay. اختر أحد النقوش التي صممناها سابقًا من القائمة ثم بدّل خصائص المزج إلى Soft Light. استمر بالضغط على CMD/CTRL أثناء النقر على مُصغّر الطبقة في لوحة الطبقات لتحميل تحديد هذه الطبقة ثم استخدم أداة التحديد Marquee Tool وانقر بالزر الأيمن واختر من القائمة Transform Selection. صغّر التحديد مع الضغط على مفتاحي Alt و Shift. لوّن هذه الدائرة الصغيرة بأحد الألوان المحدّدة مسبقًا من حامل الألوان ثم تابع إضافة أنماط الطبقة المختلفة بما في ذلك التدرج اللوني والحدود والظلال. حمّل تحديد الدائرة الصغيرة ثم صغّر التحديد قليلًا. لوّن الدائرة الجديدة بلون جديد وأضف أنماط الطبقة التي تريدها. اجمع Group مجموعة الدوائر هذه في مجموعة واحدة ثم ابدأ العمل على مجموعة دوائر جديدة. استخدم هذه المرّة ألوان متباينة مع ألوان المجموعة القديمة من لوحة الألوان. أضف التدرجات اللونية والحدود والظلال للدائرة الجديدة من أنماط الطبقة بشكل يمنحها عمقًا وأبعادًا. غيّر اتجاه التدرج بشكل عشوائي في كل مرة لتكون كل مجموعة دوائر باتجاه مختلف. اختر نقشًا جديدًا هذه المرة وليكن نقش المربعات المتكررة الذي صممناه سابقًا في هذا الدرس. غيّر خصائص المزج إلى Screen لجعل درجات اللون البرتقالي تتفاعل مع النقش. اضبط التعتيم لتخفيف أية تباينات مزعجة. حمّل تحديد الدائرة الصغيرة وانقر بالزر الأيمن واختر Transform Selection من القائمة. اختر لونًا أزرق فاتحًا للدائرة الصغيرة ومع إضافة مجموعة متنوعة من أنماط الطبقة يمكن الحصول على تصميم متمازج ومتناسق خصوصًا بعد إضافة التفاصيل المتنوعة والنقوش. استمر في إضافة الدوائر وتلوينها وإضافة التفاصيل وأنماط الطبقة حتى يصبح التصميم أكثر جمالية. اجعل مجموعات الدوائر متداخلة فيما بينها مع تغيير الأحجام حتى يمتلأ حجم العمل. بإمكانك أيضًا تعديل حجم النقوش في كل مرة للحصول على تنوّع وتمايز مذهل عبر تكبير وتصغير النقوش في كل مرة. ارسم وصمم المزيد والمزيد من الدوائر حتى يصبح التصميم متطوّرًا أكثر. تأكد من مداخلة الدوائر مع بعضها البعض لتحصل على تداخل بصري ملفت وأنيق. ارسم بعض الدوائر الأساسية ولوّنها بتدرجات لونية زرقاء مختلفة الاتجاهات ومختلفة الأحجام. ارسم مجموعة دوائر برتقالية مبعثرة في أنحاء التصميم باستخدام تقنية التدرجات ذاتها. هذه الجزئيات الصغيرة تساعد على منح التصميم المزيد من التفاصيل والعمق. حدّد الكل CMD+A ثم اضغط CMD+Shift+C لنسخ الجميع مدمجين. ألصق ما تم نسخه في طبقة جديدة فوق كل الطبقات في لوحة الطبقات ثم اذهب إلى القائمة: Filter > Other > High Pass اضبط المزلاج لتصبح التفاصيل بارزة من خلال اللون الرمادي. غيّر خصائص مزج هذه الطبقة الرمادية إلى Color Burn مع جعل التعتيم 35% للسماح لهذه الطبقة بالتفاعل مع الألوان الأساسية للتصميم ما يمنحها مزيدًا من الحيوية. أضف قناعًا للطبقة ثم امسح بشكل عشوائي مساحات من التصميم باستخدام فرشاة ناعمة لمنح التصميم فروقًا مختلفة في الدرجات والألوان. هذا الدرس على وشك أن ينتهي بتصميم مذهل. ارسم إطارًا باستخدام فرشاة ناعمة سوداء ثم كبّر حجمها قليلًا لتلوين أطراف العمل. غيّر خصائص المزج إلى Multiply مع جعل التعتيم 15%. اختر أداة التحديد البيضوي Elliptical Marquee ثم ارسم بعض الدوائر ضمن مساحات على الطبقة السفلية في لوحة الطبقات. استمر في الضغط على Shift أثناء رسم هذه الدوائر للمحافظة على استمرارية رسم التحديد. لوّن هذا التحديد بأحد ألوان حامل الألوان الأساسي للتصميم ثم استخدم أداة Dodge وBurn لزيادة قتامة وإضاءة بعض الأشكال. خفّف التعتيم إلى 50%. التصميم النهائي تم تصميمه ببساطة من مجموعة من الدوائر الأساسية مع بعض التدرجات اللونية والظلال والنقوش فقط. ولكن معًا مجتمعة أنشأت قطعة فنية تجريدية رائعة المظهر. ترجمة -وبتصرّف- للمقال: Create an Abstract Design with Patterns in Photoshop لصاحبه: Chris Spooner.

اتبع الخطوات في هذا الدرس لتتعلم كيفية تصميم ملصق بألوان الطيف ابتداءً بصناعة نص مخصص في إليستريتور، ثم سنأخذ تصميم الفكتور هذا إلى فوتوشوب ونستخدم الفراشي وأنماط المزج وغيرها من الأدوات. تصميم ألوان الطيف مستوحى من حواسيب ZX Spectrum التي ظهرت في ثمانينات القرن الماضي. السمة العامة للتصميم هي رسم نص فني تجريدي مخصص والذي سيتم دمجه بألوان الطيف ثم يُضاف إليه تأثير الكآبة والقِدم (جرونجي) عبر الخامات ودرجات الخلفية الصامتة. السمة العامة هي مزج نموذج تصاميم الثمانينات من القرن الماضي مع أسلوب تصميم الجرونجي الحديث. ابدأ العمل على برنامج إليستريتور. أنشئ ملفًّا جديدًا ثم ارسم الأشكال الأساسية لنص التايبوغرافي المخصص باستخدام أداة القلم. استمر بالضغط على Shift أثناء رسم الخطوط للمحافظة على زوايا ثابتة. موضوع الملصق هو ألوان الطيف لذلك سنقوم بتصميم كلمة Spectrum عبر رسم مجموعة من الخطوط المتجهة بزوايا مختلفة ثابتة والتي توضح هذه الكلمة قدر المستطاع. الهدف متابعة رسم خطوط كل حرف ابتداءً من الحرف الذي قبله دون أي قطع في الخطوط. ومع ذلك قد نضطر في بعض المناطق إلى رسم خطوط إضافية. سنقسّم كلمة Spectrum إلى قسمين ما يساعدنا على تشكيل التصميم وإضافة لمسة إضافية. أنهِ رسم المسارات بحيث تصبح الكلمة مفهومة وواضحة. استخدم الأدلة لمطابقة النقاط المفتاحية في المسارات. استخدم أداة التحديد المباشر Direct Selection tool لسحب المسارات ضمن حدود الأدلة وتنظيم تصميم التايبوغرافي. تذكّر أن تستمر في الضغط على Shift لتقييد تلك الزوايا. وبعد الانتهاء من تعديل النص قم باستعراض التصميم بشكل عام وألقِ نظرة شاملة عليه. إن كان يبدو جيدًا ولا يحتاج إلى أية تعديلات أخرى، عندها قم بزيادة حجم الحدود للمسارات لتصبح خطوط التصميم ثخينة. حدّد تصميم التايبوغرافي بالكامل ثم اذهب إلى القائمة: Object > Expand فعّل خيار الحدود فقط Stroke لتحويل هذه المسارات إلى أشكال جامدة. لوّن النص بالرمادي الفاتح وخفف التعتيم ثم اقفل العنصر بالضغط على CMD+2. ثم استخدم أداة القلم لرسم كل جزء من أجزاء التصميم والحروف. استخدم الأدلة الذكية من خلال الاختصار CMD+U التي ستساعدك على القيام بهذه العملية بسرعة ودقة. استمر في رسم أجزاء كل حرف. في كل مرة يتغيّر فيها اتجاه رسم الخط، ابدأ رسم شكل جديد. بعد الانتهاء من العملية ألغِ قفل النص الأساسي وحرّكه إلى جهة واحدة. سنعمل الآن على التصميم الجديد الذي رسمناه بالقلم للتو والمُؤلّف من عدد كبير من الأجزاء. شكّل حامل ألوان خاص بالتصميم مؤلّف من ألوان الطيف الأحمر، البرتقالي، الأصفر، الأخضر، الأزرق، البنفسجي. استخدم هذه الألوان بالتتالي لتلوين كل جزء من أجزاء التصميم بشكل متتابع وبالترتيب. ضاعف النص وحرّك النسخة الجديدة إلى أحد الجهات. استبدل الألوان بتدرجات لونية من الأسود إلى الأبيض على النسخة الجديدة ثم اضبط زوايا التدرجات لتكون متدفقة باتجاه زاوية رسم الخط لكل جزء من أجزاء النص. من لوحة التدرجات Gradient حدّد مقابض الأسود والأبيض الصغيرة من محرّر التدرج واستبدلها بالألوان من حامل ألوان التصميم الأصلي. سيكون الجزء الأول باللون الأحمر الذي سيتدرج إلى البرتقالي وبذلك سيكون تدرج الكتلة الأولى من الأحمر للبرتقالي. بشكل أساسي يجب أن يبدأ كل تدرج لوني باللون السابق في الكتلة السابقة إلى اللون التالي في الكتلة التالية من التصميم. سيظهر التصميم بشكل سلسلة ألوان متدفقة سلسة بألوان الطيف باستثناء بعض الأشكال المتداخلة والتي يجب تلوينها بأقرب لون تدرج متاح. افتح ملفًّا جديدًا في فوتوشوب واختر ملصق بحجم A3 وهو بأبعاد 297x420 مم بدقة 300dpi. استورد خامة خلفية مناسبة مثل خامة ورق عالي الدقة من موقع Shutterstock. من أجل الحفاظ على قابلية التعديل لكل جزء من التصميم، سنحتاج إلى استيراد كل قطعة على حدة. ارسم مربعًّا حول التصميم وحدّده مع القطعة الأولى. ألصق القطعة الأولى في فوتوشوب بنمط بكسل Pixels. عد مجدّدًا إلى إليستريتور وحدّد القطعة التالية مع المربع الكلي. هذا المربع الكبير سيضمن ترتيب ومحاذاة جميع القطع بشكل منتظم كما هي موجودة بالضبط في إليستريتور وبدقة. اجعل كل قطعة في طبقة منفردة. حدّد جميع طبقات قطع التصميم وغير خصائص مزجها إلى Linear Burn. اجمع جميع القطع في مجموعة واحدة عبر CMD+G. انقر نقرًا مزدوجًا على طبقة أحد القطع لتظهر نافذة أنماط الطبقة. أضف ظلًّا كبيرًا Drop Shadow مع خصائص مزج Color Burn. خفّف المسافة إلى الصفر ولكن زِد الانتشار والحجم لتمديد التأثير إلى ما بعد حواف النص. انقر بالزر الأيمن على تلك الطبقة واختر نسخ نمط الطبقة Copy Layer Style ثم ألصقها على طبقات بقية قطع التصميم. أضف قناع طبقة إلى مجموعة طبقات قِطع التصميم ثم استخدم فرشاة الألوان المائية لفوتوشوب لتطبيق التأثير على النص. عدّل الفرشاة لتخفيف التعتيم وذلك للحصول على مستويات متعددة من الدرجات اللونية وغيّر الزاوية من خيارات الفرشاة لإضافة التنوّع إلى الخامة. شوّه حواف النص قليلًا عبر إضافة نُسخ عن المناطق المجاورة لحواف الأحرف باستخدام أداة ختم الاستنساخ Clone Stamp. هذه المناطق المنسوخة سيتم تطبيق التأثيرات عليها عبر قناع الطبقة ومجموعة طبقات التصميم. أنشئ تحديدًا يحيط بكامل مساحة التصميم ولوّنه بالأسود لإنشاء حدود. غيّر خصائص المزج إلى Overlay بتعتيم 60% لمزج الحدود مع درجات الخلفية. أضف قناع الطبقة وشوّه حدود الحواف النظيفة باستخدام فرشاة الألوان المائية. أخيرًا أضِف عنوانًا للملصق في منطقة تذييل الصفحة. أطلقتُ عليه اسم "Spectrum" مع تاريخ عام 1982 الذي تم فيه اطلاق حواسيب ZX Spectrum. هذه هي النتيجة النهائية: ترجمة -وبتصرّف- للمقال: Create a Distressed Vector Typographic Poster Design لصاحبه: Chris Spooner.

سنقوم اليوم بمحاكاة لقطة مشوّهة من فيلم VHS قديم في برنامج فوتوشوب. هذا الموضوع غير عادي تمامًا وآمل أن يكون في متناول اليد لتلك المشاريع النادرة التي تحتاج إلى تكرار هذا الأسلوب. سوف نقوم بأخذ صورة ونقوم بتشويهها باستخدام مجموعة من التقنيات لمحاكاة تلك اللقطات القديمة ثم سنضيف بعض النصوص بالخطوط القديمة التي كانت تُستخدم قديمًا كلمسة أخيرة لمشهد فيلم منزلي يُعرض بواسطة جهاز مشغل فيديو قديم. النتيجة النهائية تبدو كتأثير مشهد من مشغّل فيديو قديم حقيقي والذي يُحاكي تأثيرات التشوّه والالتفاف المتنوعة التي تحصل عادة مع أشرطة فيديو VHS القديمة خصوصًا عندما نوقف عرض الشريط أو نقوم بالضغط على زر الإعادة. مجموعة فلاتر التشويه في فوتوشوب ستساعدنا على تدمير الصورة الرقمية ثم سنضيف بعض اللمسات النهائية ببعض النصوص التي تحقق الواقعية للقطات الفيديو القديمة. افتح الصورة التي اختَرتَها باستخدام برنامج أدوبي فوتوشوب. أنا استخدمتُ هذه الصورة المجانية من موقع unsplash. سنطبّق تأثير الالتفاف على هذه الصورة باستخدام أدوات Liquify الموجودة ضمن قائمة فلاتر فوتوشوب. حدّد أداة Forward Warp ثم اجعل الضغط لنحو 30 ثم ابدأ بسحب الأداة من اليسار لليمين عبر الصورة. غيّر حجم الفرشاة بشكل متفاوت بين التشوّهات الكبيرة والصغيرة. طبّق تعديلات Liquify عبر الضغط على OK ثم ارسم تحديدًا مستطيلًا على جزء من الصورة. اضغط الاختصار CMD+T لتحويل التحديد ثم مدّد هذه الشريحة لإنشاء تأثير الشاشة المشوّهة. ابحث عن صورة بعض الغيوم وافتحها في فوتوشوب. استخدم الاختصار CMD+Shift+U لإشباع ألوان الصورة ثم عدّل المستويات عبر الاختصار CMD+L لزيادة قتامة الظلال إلى درجة الأسود. اذهب إلى القائمة: Filter > Distort > Shear وأضف سلسلة من النقاط إلى المخطط لتشويه الصورة من الجانب إلى الجانب. اذهب إلى القائمة: Filter > Distort > Wave وغيّر قيمة الإعدادات إلى 999 للمولدات Generators، أقل قيمة لطول الموجة Wavelength، أقل قيمة للسعة Amplitude و100% لحجم Scale المحور الأفقي فقط. سيتم تطبيق التأثير بحسب نمط الصورة المُستخدمة، فقد يكون من الضروري تغيير اتجاه الصورة لتجنب تشويه العناصر الرئيسية مثل وجه الشخص. احفظ الصورة كملف PSD وامنحها اسمًا معرّفًا مثل displacement-map.psd. هذا الملف المؤقّت سيُستخدم ضمن فلتر الاستبدال Displace فيما بعد. عُد إلى ملف العمل الأساسي مجدّدًا ثم اذهب إلى القائمة: Filter > Distort > Displace بدّل الإعدادات إلى 100 حجم أفقي و0 حجم عمودي. بعد الضغط على OK حدّد الملف displacement-map.psd. صورة الاستبدال المُستخدمة في هذا الفلتر ستشوّه الصورة عبر المساحات البيضاء في الملف. ارسم تحديدًا مستطيلًا حول الصورة بأكملها باستثناء الحافة اليسرى البشعة ثم اضغط على الاختصار CMD+T ثم مدّد الصورة لإزالتها. جِد صورة غيوم جديدة وافتحها في فوتوشوب. قم بإشباع ألوانها Desaturate وعدّل المستويات Levels لتحويلها إلى صورة أبيض وأسود قاسية. أضِف فلتر الموجة Wave أولًا هذه المرة واستخدم ذات الإعدادات التي استخدمناها في السابق لذات الفلتر. اذهب إلى القائمة: Filter > Distort > Shear وعدّل المخطط مع نمط جديد من النقاط لتشكيل تأثير التفاف مختلف. اضغط على الاختصار CMD+A لتحديد الكل ثم CMD+C لنسخها. ثم ألصق باستخدام الاختصار CMD+V داخل ملف العمل الرئيسي ثم صغّرها واضغطها لتغطّي جزءًا من الصورة. غيّر خصائص المزج إلى Screen لجعل الخلفية السوداء شفافة، تاركًا خطوط التشوهات البيضاء الشائعة في عرض أشرطة VHS القديمة وخصوصًا أثناء التوقف المؤقت أو الإعادة. ضاعف هذه الطبقة باستخدام الاختصار CMD+J ثم حوّلها باستخدام الاختصار CMD+T واستخدم خليطًا من الانعكاس الأفقي والعمودي وتغيرات الحجم لتُنتِجَ نموذجًا ثانيًّا من خطوط التشوّهات في مكان آخر من الصورة. أنشئ طبقة تعديلات منحنيات Curves ثم اجعل خصائص مزجها Saturation. ومن ضمن نافذة إعدادات طبقة تعديلات المنحنيات انتقل على القناة الحمراء واجعل المنحني الخاص بها اشبه بحرف S ثم انتقل إلى القناة الخضراء وحوّل المنحني الخاص بها إلى ما يشبه S نوعًا ما ثم انتقل على القناة الزرقاء وأنشئ منحني كحرف S أكثر دقة. هذه التعديلات ستزيد من التشبّع اللوني في بعض مناطق الصورة بينما تخفّفها في مناطق أخرى لتقليد ونسخ نظام ألوان أجهزة التلفاز القديمة. أنشئ ملفًّا جديدًا بحجم 1 في 10px (من الممكن أن يختلف حجم هذا الملف بحسب حجم الصورة التي تعمل عليها). قم بإخفاء طبقة الخلفية ثم ارسم تحديدًا حول نصف حجم العمل ولوّنه باللون الأسود في طبقة جديدة. اضغط على الاختصار CMD+D لإلغاء التحديد ثم اذهب إلى القائمة: Edit > Define Pattern لجعل هذا الشكل نقش Pattern وأعطِ هذا النقش اسمًا معرّفًا. سيُنتِج هذا النقش سلسلة من خطوط افقيّة بحجم 5px. عُد إلى ملف العمل الأساسي واختر أداة سطل الدهان Fill bucket ثم عدّل الإعدادات في شريط الأدوات العلوي إلى Pattern. ثم ابحث عن الملف الذي أنشأناه للتو ضمن القائمة. أنشئ طبقة جديدة ثم اضغط في أي مكان ضمن الصورة لتَظهر سلسلة خطوط مسح التلفاز القديمة. غيّر خصائص المزج هذه الطبقة إلى Soft Light لتمكين التفاعل مع الألوان. لإنهاء هذا التأثير بتأثير فيلم منزلي قديم سنستخدم خط OSD mono font لكتابة بعض معلومات الشاشة الخاصة بأجهزة تشغيل الأفلام القديمة. حدّد جميع طبقات النصوص التي كتبناها باستخدام الخط السابق ثم اذهب إلى القائمة: Layer > Merge Layers لتحويلها إلى طبقة نقطيّة قابلة للتعديل. اذهب إلى القائمة: Filter > Distort > Wave احتفظ بالإعدادات السابقة ولكن خفّف من عدد المولدات إلى 30. لإنشاء آخر تأثير بنمط قديم اضغط على الاختصار CMD+A لتحديد الكل ثم اذهب إلى القائمة: Edit > Copy Merged ألصق ما تم نسخه مع الدمج في طبقة جديدة أعلى لوحة الطبقات. انقر نقرًا مزدوجًا على الطبقة الجديدة لفتح نافذة الأنماط للطبقة ثم ألغِ تفعيل القناة الخضراء G في خيارات المزج المتقدمة. حرّك الطبقة لليمين قليلًا بضعة بكسلات باستخدام أسهم لوحة المفاتيح لإنتاج اختلال في القنوات اللونية. هذا المزيج من التأثيرات والتشوّهات غالبًا ما يُشاهد على أجهزة التلفاز القديمة ومشغلات الفيديو القديمة أيضًا. ترجمة -وبتصرّف- للمقال: How To Create a Distorted VHS Effect in Photoshop لصاحبه: Chris Spooner.

هذا أحد الدروس الكلاسيكية لتحويل الصورة الفوتوغرافية إلى صورة بتأثير الرسم بقلم رصاص. إنها إحدى التقنيات البسيطة والسريعة التي تحقّق نتائج مُرضِيَة وستكون درسًا مهمًّا للمبتدئين. طوال تاريخها، أظهرت فوتوشوب العديد من الفلاتر التي تُنتِج تأثيرات الرسم والتأثيرات الفنيّة، ولكنها لا تُنتِج نتائج واقعية بدقّة. في هذا الدرس سأريكم بعض الخطوات الذكيّة التي ستحوّل الصورة الفوتوغرافية إلى مخطط مرسوم باليد بقلم رصاص، والتي يمكن تنعيمها أكثر للوصول إلى مظهر مقنع أكثر. التأثير الذي سنتعلّمه في هذا الدرس يحاكي الخطوط والظلال الناتجة عن الرسم بالقلم الرصاص. إنتاج هذا النوع من الرسوم سيستغرق ساعات من العمل حتى بالنسبة لأكثر الفنانين موهبة، ولكن قدرة فوتوشوب تعطينا المقدرة على تحقيق ذلك في دقائق. وهذا سيجعله عمليًّا أكثر في استخدام مظهر التخطيط في التصاميم التي تحتاج إلى نمط artsy. فإذا لم تكن مهتمًّا بإنشاء هذا التأثير يدويًّا فيمكنك إلقاء نظرة على صفحة Artistic Paint, Sketch & Ink Photo Effect Actions التي توفّر إمكانية تنفيذ هذا التأثير آليًّا. افتح الصورة التي تريد تعديلها وتطبيق التأثير عليها باستخدام فوتوشوب. التأثير سيظهر بشكل أفضل مع الصور ذات الخلفيات النظيفة والإضاءة الجيدة والتركيز الممتاز. في هذا الدرس سنقوم بتطبيق التأثير على هذه الصورة المجانيّة من موقع free images لطفلة صغيرة. اسحب طبقة الخلفية إلى أيقونة طبقة جديدة أسفل لوحة الطبقات، أو استخدم الاختصار Ctrl+J لمضاعفة هذه الطبقة. اذهب إلى القائمة: Image > Adjustments > Invert أو اضغط على الاختصار Ctrl+I ثم اضغط بالزر الأيمن على الطبقة واختر Convert to Smart Object لتحويل الطبقة إلى عنصر ذكي. اختر الفلتر Gaussian Blur من قائمة الفلاتر Blur ثم حدّد نصف القطر بـ 20 بيكسل (يجب عليك تحديد القيمة المناسبة بحسب الصورة). بما أننا نطبّق الفلتر على طبقة العنصر الذكي فإن التأثير سيكون تأثير ذكي Smart Filter ويمكننا تنعيم الإعدادات بحسب الحاجة بينما لن يمكننا القيام بذلك لو طبقّنا الفلتر على طبقة عادية. غيّر خصائص مزج الطبقة الجديدة إلى Color Dodge ما يعزّز تباين الصورة بشكل كبير ويُظهِر التفاصيل البارزة في الصورة. اضغط على أيقونة طبقة التعديلات Adjustment Layer أسفل لوحة الطبقات ثم اختر المستويات Levels. حرّك درجة ألوان الظلال ودرجة الألوان المتوسطة إلى اليمين قليلًا لزيادة قتامة الصورة قليلًا. أضِف طبقة تعديلات جديدة ولكن اختر هذه المرة الأسود والأبيض Black and White. الإعدادات الافتراضية ستكون كافية لإزالة الألوان وإنتاج مظهر رسم قلم رصاص قياسي. اضغط الاختصار Ctrl+A لتحديد الكل ثم اذهب إلى القائمة: Edit > Copy Merged أو من الاختصار Ctrl+Shift+C. هذا سينسخ جميع الطبقات الظاهرة. اضغط Ctrl+V للصق ما تم نسخه أعلى لوحة الطبقات. اذهب إلى القائمة: Filter > Filter Gallery ثم اختر الحواف المتوهّجة Glowing Edges ضمن قائمة Stylize. غيّر إعدادات عرض الحافة Edge Width إلى 1، وإلى أقصى إعدادات maximum Edge Brightness و Smoothness. اعكس الألوان Invert للطبقة من القائمة: Image > Adjustments > Invert أو من الاختصار Ctrl+I ليتبدّل اللون الأسود إلى أبيض والأبيض إلى أسود. غيّر خصائص مزج الطبقة الأخيرة إلى Multiply لتكون الخلفية البيضاء شفافة ثم خفّف من التعتيم opacity إلى 50-60% للحد من تأثير الخطوط العريضة على خطوط الرسم الخارجية الإضافية. أنشئ طبقة جديدة ثم اضغط على الاختصار Ctrl+Backspace لملء هذه الطبقة باللون الأبيض (حيث يجب أن يكون اللون الخلفي في لوحة الألوان). أدخل مجدّدًا إلى Filter Gallery ولكن هذه المرة اختر Texturizer وبدّل الإعدادات إلى Sandstone الحجر الرملي. غيّر خصائص مزج هذه الطبقة إلى Multiply ليُصبح العمل الفني أسفل هذه الطبقة ظاهرًا ثم خفّف التعتيم opacity لهذه الطبقة إلى 50% لإحداث تأثير ملمس الورق. لإظهار فن الرسم بأقلام الرصاص الملونة قم بإخفاء طبقة تعديلات الأسود والأبيض Black and White adjustment لإزالة تأثيرها من التصميم. والنتيجة النهائية هي تأثير واقعي من أعمال رسم الخطوط والظلال. إن الطبقة التي قمنا بتطبيق التمويه عليها وقمنا بعكسها عزّزت من تباين التصميم ولكن باقي التأثيرات الإضافية كالحواف المتوهجة وخامة الورق جعلت التصميم أكثر قابلية للتصديق. إن استخدام العناصر الذكية يمنحنا المقدرة على ضبط التمويه لتنعيم النتيجة كما نريد. ملاحظة: الصورة المستخدمة في هذا الدرس صورة مجانيّة من موقع free images لطفلة صغيرة. ترجمة -وبتصرّف- للمقال: How To Create a Realistic Pencil Sketch Effect in Photoshop لصاحبه: Chris Spooner.