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

لا شك أن شركة أدوبي (Adobe) تتربع على عرش العالم في برامج التصميم. إنها توفر كل شيء بدءًا من تصميم الفكتورات (الصور المتجهة Vectors) وصولًا إلى الأعمال المطبوعة، ومع إصدارها لبرنامج أدوبي إكس دي (Adobe XD)، فإنها تقدم الآن نماذج الويب الأولية (Prototypes). وعلى الرغم من أن هذه البرامج بها الكثير من الميزات، فإنها تزداد توسّعًا لتشمل مزيدًا من الإضافات. ولهذا السبب أسرد هنا أفضل البرامج المساعدة والإضافات لجميع مصممي سحابة أدوبي الإبداعية (Adobe CC) الذين يقومون بإنشاء أي شيء انطلاقًا من تطبيقات الجوال وحتى نماذج المواقع الإلكترونية. فبغض النظر عن مستوى خبرتك، من المؤكد أنك ستجد شيئًا مفيدًا هنا. Craft أبدأ قائمة الإضافات بحديثي عن InVision Craft والتي تعتبر إلى حد بعيد أكبر إضافة. فهي متوفرة للفوتوشوب (Photoshop) وسكتش (Sketch)، واللذيْن يوفران نفس الميزات. وتمثّل Craft مكتبة من المكونات الإضافية مع العديد من الميزات المختلفة المدمجة معًا. فيمكنك تصميم نماذج أولية prototypes، وأتمتة "المحتوى الوهمي المولّد" أو ما نطلق عليه اسم (لوريم-إيبسوم Lorem Ipsum)، ومزامنة موارد التصميم تلقائيًا مع السحابة. كل ذلك من لوحة الإضافة Craft. هذه الإضافة مجانية وستظل هكذا إلى الأبد. أوصيك بتجربتها وسترى كيف سيتحسن سير عملك الرقمي بها. Fontea يشكّل فن صياغة الحروف وطباعتها (التايبوغرافي) جزءًا كبيرًا من تصميم الويب، وبواسطة خطوط جوجل للويب Google Web Fonts يمكنك الذهاب إلى أبعد من خطوط النظام الافتراضية (default system fonts). لهذا السبب بالضبط تم بناء Fontea؛ لمساعدة مصممي الويب في صياغة الطباعة الجميلة دون الاعتماد على عائلات الخطوط المثبتة مسبقًا. يمكنك مع Fontea الاختيار من بين مئات الخطوط من Google مجانًا. ويمكنك أيضًا تضمين جميع هذه الخطوط في مواقع الويب الخاصة بك، لذا فهي مثالية لأي مشروع. كما يمكنك التنقل بسرعة بين الأنماط المختلفة دون تنزيل أي شيء. Block HTML تتيح لك الإضافة المجانية HTML Block كتابة التعليمات البرمجية وتحويلها مباشرةً إلى عناصر في Photoshop، ويشبه هذا عكس ما يقوم به البرنامج المساعد لتصدير الكود، حيث يمكنك الآن استيراد الكود مباشرة إلى ملفات Photoshop. سيحب المطورون خصوصًا هذا المكون الإضافي؛ لأنه غالبًا ما سيسهل عليهم إنشاء أزرار وقوائم وأعمدة باستخدام CSS أولاً. فإذا كنت تفضل الترميز باستخدام أدوات أشكال Photoshop وتأثيرات الطبقة، فإن تثبيت هذا المكون الإضافي سيوفر عليك ساعات من الهمّ. PS Pen Panel لم يكن الغرض من Photoshop أن يكون أداة تحرير رسوم متجهة (فكتور). ومع ذلك، فهو يحتوي على هذه الأدوات التي تُعتبر واحدة من أفضل الطرائق لتصميم العناصر المتجهة (الفكتورات) للويب. إن التنقل بين أدوات القلم المختلفة وفتح قائمة التفضيلات لتشغيل / إيقاف تشغيل "أدوات Snap Vector Tools" يمثل إزعاجًا كبيرًا بالنسبة لنا، PS Pen Panel ستحل هذه المشكلة تمامًا. إنها إضافة مجانية يضيف لوحة جديدة إلى واجهة المستخدم الرسومية. وقد تم تصميم هذه اللوحة لمصممي الكائنات المتجهة (الفكتورات) الذين يصنعون الرموز باستمرار في Photoshop بدلاً من Illustrator. وقد يستغرق الأمر بعض الوقت للتكيف معه، لكنه سيسرع من سير عملك. ملاحظة: هذه الإضافة مجانية 100٪ لكنها لا تزال تخضع لعملية اختبار من الموقع. إنها الطريقة التي تم بها تصميم منظومة الإضافات، لكن لوحة القلم هذه مجانية للتنزيل، لذا لا تدع الموقع يربكك! AI2Canvas يمكنك القيام بالكثير باستخدام لوح الرسم (HTML5 Canvas) ورسومات الويب المتجهة من نوع SVG. لكن هذه الخطوة الإضافية لتصدير ملفات SVG وترميزها إلى عناصر لوح الرسومات (canvas elements) تستنزف الكثير من الوقت. مع الإضافة AI2Canvas، يمكنك أتمتة ميزة تصدير Illustrator بكل سهولة. حيث يتيح لك ذلك إنشاء رسومات متجهة وتصديرها إلى لوح رسم HTML5 Canvas تلقائيًا. ويمكنك حتى إضافة ميزات الدوران لإنشاء تأثيرات متحركة، وكل ذلك من Illustrator! Copio إذا كنت تريد نسخ طبقة في Photoshop ، فيمكنك تكرار ذلك دائمًا بنقرة زر واحدة. لكنك لن تتمكن مطلقًا من نسخ طبقة من ملف واحد ولصقه في ملف مختلف. يمكن مع Copio أن يتغير كل شيء. فهذا البرنامج المساعد البسيط المجاني يمكِّنك من النسخ / اللصق الكامل لأية طبقات ترغب في نقلها من ملف إلى ملفات فوتوشوب PS أخرى. عادةً ما يتعين عليك سحب وإسقاط الطبقات، وقد يكون ذلك محاولة شاقة لمطابقة المؤشر فوق علامة تبويب ملف Photoshop معينة. باستخدام هذا البرنامج المساعد، يمكنك فقط تحديد الطبقة ونسخ / لصق باستخدام اختصارات لوحة المفاتيح في Copio. لقد أصبح التصميم في Photoshop أسهل كثيرًا. Cut&Slice Me زادت أجهزة رتينا (منتجات شركة Apple) من الوقت اللازم لتصميم تطبيقات الهواتف الذكية. لكنها أيضًا جلبت هذه المتطلبات إلى تصميم الويب المتجاوب حيث تحتاج حتى مواقع الويب إلى صور بمقاسات @2x و @3x لتبدو واضحة على كل شاشة. فباستخدام الإضافة Cut & Slice Me، يمكنك أتمتة عملية التصدير من خلال الصور ذات الحجم المناسب والمسمى الصحيح. ما عليك سوى اختيار الأجهزة التي تحتاج إلى دعمها، ودع هذه الإضافة تتكفل بالباقي. Composer يعتبر Adobe Photoshop برنامجًا رائعًا لصناعة النماذج نظرًا لوجود ميزة تكوين وتجميع الطبقات (layer comps). حيث تتيح لك هذه التكوينات إعادة تصميم الواجهات بألوان، وحالات مستخدم، وميزات مختلفة مع الاحتفاظ بها جميعًا في مستند واحد. ينتقل Composer بتكوينات الطبقة إلى المرحلة التالية. فهذه الإضافة تتيح لك تحديث العناصر المتشابهة عبر جميع تكوينات الطبقة، وبذلك فلن تحتاج إلى العمل عليها فرادى. لذلك، لنفترض أن لديك شعارًا في الزاوية العلوية اليسرى مؤلف من أربع تكوينات طبقية مختلفة. وأردت نقله إلى المركز. تقليديًا، ستحتاج إلى سحب هذه التكوينات عبر الشاشة لكل طبقة أربع مرات. باستخدام Composer، فأنت تقوم بتحديد جميع تكوينات الطبقة، وتحرك الشعار، وتكون قد أنجزت ما تريد بكل سهولة ويسر. Long Shadow Generator لقد ساهمت اتجاهات التصميم الحديثة مع material Design ودفعت إلى إبراز تأثير الظل الطويل. وأصبح من الشائع جدًا أن يكون لدى مستخدمي Photoshop مولّد الظل الطويل Long Shadow Generator هذه الإضافة الذي يعيد إنشاء الظل المطلوب بنقرة واحدة. يمكنك تحديد طول الظل، العتامة، والاتجاه مع نوع اللون. ثم النقر فوق "إنشاء"، ومن ثم يتم تطبيق ظلك الطويل على أي عنصر تريده. CSS3Ps لايمكن ختام هذه المقالة دون ذكر أداة تصدير الكود المهمة CSS3Ps. فهي تُعتبر أفضل خيار مجاني متاح مع الدعم الكامل لخصائص CSS3 الحديثة. قم أولاً بتصميم عناصر في Photoshop، ثم حدد تلك الطبقات وانقر فوق الزر CSS3Ps. ستقوم الإضافة تلقائيًا بإخراج شفرة CSS3 الخالصة جنبًا إلى جنب مع الأصناف (classes) لإعادة إنشاء هذه العناصر في صفحتك. يمكنك تطبيق هذا المكون الإضافي على كل شيء بدءًا من طبقات النص وصولًا إلى الأزرار، كما أنه يدعم طبقات متعددة في آنٍ واحد. يمكنك مشاهدة هذا الفيديو التوضيحي للتعرف على كيفية استعمال هذه الإضافة. كل هذا ليس إلا نزرًا يسيرًا من الإضافات المفضلة لمصممي الويب، ولكن توجد هناك إضافات جديدة دائمًا يتم إصدارها، لذا كن على اطلاع وانتظر المزيد من مكونات Adobe CC الإضافية في المستقبل القريب. ترجمة -وبتصرف- للمقال ‎10 Free Web Design Plugins For Adobe Photoshop لصاحبه Jake Rocheleau

بغض النظر عن نوع العمل الذي تقوم به، كُن على يقين من أنّ معظم المشاريع تتطلب قص صورة ما من خلفيتها. أحياناً تكون العملية سهلة جداً إذا تمّ تسليط إضاءة استوديو احترافية في الصورة، لكنها ستكون أصعب إذا ما كانت الخلفية تتضمن تفاصيل دقيقة. في هذا الدرس سأقدّم نظرة عامة على مجموعة من تقنيات القص التي تعلمتها على مر السنين وسأقدم المشورة حول الأسلوب الأفضل للاستخدام. اختيارات سريعة ورديئةأحياناً تحتاج إلى قص شيء ما بسرعة من الخلفية وبدون طرح أية أسئلة. إن لم يكن من المفترض أن تكون النتيجة النهائية دقيقة تماماً فهناك عدة أدوات في الفوتوشوب تقدم لك حلولاً سريعة وسهلة. أداة الممحاة Eraserإن كان المطلوب إزالة الخلفية من الصورة ببساطة فإنّ كل ما عليك القيام به هو فركها بأداة الممحاة Eraser tool. الفكرة الأساسية ليست سيئة، ولكن هناك تقنيات أفضل بكثير من الممحاة وهي لا تخرّب الصورة، كما سنرى لاحقاً عند استخدام قناع الطبقة Mask. كيف نستخدم أداة الممحاةاختر فرشاة الممحاة واضبط إعدادات النعومة والحواف. بإمكانك بعدها أن ترسم مساحة الخلفية مع الانتباه والحذر حول حواف المواضيع التي تهمك والتي لا تريد تخريبها. متى نستخدم أداة الممحاةإنّ نعومة الفرشاة ستحقق نتائج ناعمة، وخصوصاً إذا استخدمت Wacom tablet (جهاز لوحي يستعمل مع قلم خاص للرسم باحترافية على الكمبيوتر) لتسريع العملية ولتتحكم بشكل أفضل بالأداة. على كل حال إن الأثر المدمّر للممحاة ستجعلك تبدو أبلهاً إذا ما ارتكبت أيّ خطأ لذلك أنصحك باستخدام قناع الطبقة Layer Mask بدلاً من ذلك. أداة العصا السحرية Magic Wandغالباً ما كانت العصا السحرية أول أداة قمنا بتجربتها كمبتدئين بالفوتوشوب ولكن كلّما زادت خبرتك أكثر كلّما أدركت أن قدرات هذه الأداة محدودة أكثر. مع ذلك فإنّ العصا السحرية أداة صغيرة رائعة لقص الصور البسيطة والسهلة التي تتميز بتباين واضح بين الحواف. كيفية استخدام أداة العصا السحريةانقر على الجزء الذي تريد تحديده والفوتوشوب سيقوم بكل العمل من أجلك. يمكنك أيضاً أن تتلاعب بمستوى التسامح Tolerance لتضبط التحديد بشكل دقيق إلّا أنّ القيمة الافتراضية غالباً ما تفي بالغرض. متى نستخدم أداة العصا السحريةإنّ هذه الأداة رائعة لتحديد مساحات في صورة ذات حواف متنافرة بين أجزاءها ولتحديد الألوان الجامدة وأيضاً التباين المرتفع. أداة التحديد السريع Quick Selectionأداة التحديد السريع تتبع أداة العصا السحرية. وبدلاً من السماح للفوتوشوب باتخاذ كافة القرارات (كما في العصا السحرية) فإنّ هذه الأداة تُمَكّنُك من الرسم بالضبط فوق المنطقة التي تريد تحديدها والفوتوشوب سيقوم بتطبيق التحديد وفقاً لتعليماتك. إنّها أسهل بكثير من التجريب والخطأ في إعدادات Tolerance للعصا السحرية. كيف نستخدم أداة التحديد السريعنجدها في نفس مجموعة الأدوات التي تضم العصا السحرية وهي تستعمل أسلوب الفرشاة لرسم التحديد. سيقوم الفوتوشوب باحتساب المنطقة المراد تحديدها وفقاً للحواف القريبة. اضبط حجم الفرشاة باستخدام [ و ] مفاتيح الأقواس لتتحكم بالدقة. بإمكانك إلغاء تحديد بعض المناطق بالضغط على مفتاح Alt والنقر على المناطق المراد إزالة التحديد عنها. متى تُستَخدم أداة التحديد السريععندما تحتاج لقدرة تحكّم أكبر من العصا السحرية ولكنك لا تزال غير مهتم بالدقة العالية للنتيجة النهائية عندئذ ستكون فرشاة التحديد السريع هي الأداة المناسبة لهذه المهمة. التحديد اليدويقد تكون مملة، ولكن أفضل نتائج القص غالباً ما تأتي من الرسم اليدوي للتحديد حول موضوعك. سرعان ما أصبح مصممو الرسوميات محترفين في استخدام أداة القلم وذلك من خلال الاستخدام اليومي لهذه الأداة. أداة الحبل المضلّع Polygonal Lassoأداة الحبل هي أداة أخرى اعتمد عليها المبتدؤون حتى وصلوا تدريجياً لاستعمال أداة القلم. أداة الحبل رائعة للتحديد السريع ولكنها تعتمد على وجود سلسلة حواف مستقيمة وإذا نقرت بالخطأ نقرة مزدوجة وأغلقت التحديد قبل الأوان فإنّ ذلك سيجعل هذه الأداة كابوساً خصوصاً عند القيام بتحديدات معقدة. كيف نستخدم أداة الحبللهذه الأداة ثلاثة أنواع وهي الرسم الحر Freehand، المضلّعات Polygonal والخيارات المغناطيسية Magnetic. أداة الحبل المضلّع هي الأكثر استخداماً. كل ما عليك القيام به هو تتبع الصورة من خلال سلسلة من النقرات حتى تصل لنقطة البداية مجدداً وذلك لكي تغلق التحديد أو بالنقر المزدوج حيث يغلق التحديد مع حافة مستقيمة تمتد بين نقطتي البداية والنهاية. وفي حالة الاستمرار بالضغط على مفتاح Shift أثناء التحديد فإنه سيتم التحديد باتجاه الزاوية 45° والزاوية 90° لرسم تحديدات متّجهة بدقة. متى نستخدم أداة الحبلإنّ المضلعات المختلفة لهذه الأداة تحديداً غير فعّالة لعملية القص واللصق حيث غالباً ما تقص خارج الموضوع. وإن كان موضوعك معقّد التفاصيل فسوف تفشل بالتأكيد مع هذه الأداة وسيتوجب عليك استخدام أداة القلم. أداة القلم Pen toolأداة القلم مفيدة أكثر من أداة الحبل. بالنسبة للمبتدئين بإمكانكم رسم خطوط منحنية، وهذا مفيد لأولئك اللذين يعيشون خارج عالم ماين كرافت (لعبة مشهورة بعدم وجود أي منحنيات فيها). أداة القلم تقوم بإنشاء مسارات يمكن تعديلها وحفظها لاستخدامها مستقبلاً، وهي ميزة رائعة عند العمل على مشاريع حقيقية. كيفية استخدام أداة القلمإنّ منحنيات البيزيير Bezier هي من الآليات الأساسية لأداة القلم وهي تحتاج إلى درس كامل لشرحها، ولكن بمجرد أن تتقن هذه الأداة ستصبح صديقك الجديد المفضّل. تتبع صورتك لتصنع مساراً دقيقاً ببعض البكسلات (البكسل هي وحدة قياس الصور النقطية) داخل حواف موضوعك لتجنب التقاط أي جزء من الخلفية المُراد القص منها، ثم أغلق المسار عند نقطة البداية. هذا المسار يمكن تعديله بواسطة أداة التحديد المباشر أو يمكنك حفظه بإعطائه اسماً جديداً في لوحة المسارات Paths panel. يمكنك تحويل مسارك الذي قمت برسمه بهذه الأداة إلى تحديد في أي وقت. يمكنك حتى إضافة جوانب لإلغاء الحواف المزعجة. متى نستخدم أداة القلمأداة القلم هي بمثابة سكين الجيش السويسرية بالنسبة لأدوات الفوتوشوب. لا يوجد الكثير من الحالات التي لا يمكن استخدامها فيها ولكن قد يكون هناك تقنيات أخرى أسرع وخصوصاً عندما تحاول معالجة الأشياء المعقدة مثل الشعر والفراء أو التفاصيل الدقيقة. الاختيارات اللونيةالاختيارات اللونية هو اسم استخدمته لوصف التقنيات التي تستخدم التباين والألوان في الصورة لصنع التحديد. هذه الطرق عظيمة للتفاصيل الشديدة التعقيد في الصور حيث لن ينفع معها رسم التحديد يدوياً. القنوات Channelsكل الصور تتكون من قنوات الأحمر، الأخضر والأزرق التي تحوي كل منها على درجة لونية مختلفة من الصورة. القنوات لديها قابلية إنشاء معظم التحديدات الدقيقة للتفاصيل البالغة الدقة والتعقيد مثل الشعر أو الفرو ولكنها لا تعمل بشكل جيد مع الخلفيات المعقّدة أو حيث يكون هناك تباين ضعيف. كيفية استخدام القنواتشاهد قنوات الأحمر، الأخضر والأزرق بشكل فردي لتجد الأكثر تبايناً بين المناطق التي تريدها وبين المناطق التي لا تريدها. اسحبها إلى فوق new icon (أيقونة جديدة) لصنع نسخة جديدة منها. يمكنك زيادة التباين أيضاً عن طريق ضبط المستويات Levels أو المنحنيات Curves لتعتيم الألوان السوداء وتفتيح الألوان البيضاء. عندما تحقق التباين الجيد بين التفاصيل الدقيقة لصورتك ستحتاج لتعبئة المناطق المتبقية من التحديد المرغوب يدوياً بالفرشاة السوداء. حمّل تحديد قناتك بواسطة الضغط على CMD أو Ctrl مع الضغط على القناة اللونية المحددة من لوحة القنوات. متى نستخدم القنواتكلّما كان لديك صورة واضحة التباين بين الموضوع المراد قصّه وبين الخلفيّة كلّما كان أسلوب القنوات للتحديد أفضل وتقدّم لك أنظف تحديد ممكن وخصوصاً عند تحديد الشعر أو الفرو ولكن بشرط أن تكون الخلفية واضحة ونظيفة. مجال اللون Color Rangeستجد هذه الميزة في قائمة التحديد Select وهي أداة يدوية يمكن استخدامها لإنشاء تحديد سريع مبني على درجات اللون في الصورة. وهي مفيدة خصوصاً لتحديد الإضاءات highlights أو الظلال shadows أو إن أردت تحديد منطقة بلون معين من الصورة. كيفية استخدام مجال اللوناذهب إلى قائمة: Select > Color Range لتفتح خيارات مجال اللون. يمكنك الاختيار بين الألوان البسيطة (لون المقدمة الذي قمت باختياره) أو اختيار الأضواء الساطعة (الأجزاء الفاتحة) Highlights، الدرجات اللونية النصفية Midtones أو الظلال (الأجزاء الداكنة) Shadows إذا أردت فقط اختيار المناطق الفاتحة أو الداكنة في الصورة. متى نستخدم مجال اللونإنّ أفضل استخدام لهذا الأسلوب هو التحديد السريع للخلفيات البيضاء من لقطات الاستوديو وبعد ذلك سنقوم بعكس التحديد من قائمة التحديد لتحديد الموضوع المطلوب بسهولة. تحديد القناع Maskالأقنعة هي أداة للتعديل تحقق لك أقصى حدود عدم التخريب أثناء التعديل. بدلاً من مسح الصورة باستمرار هي تقوم بإخفاء الأجزاء الغير مرغوبة فقط وسيمكنك تعديل التحديد لاحقاً. ارسم أقنعتك يدوياً أو اصنعهم باستخدام أي تقنية من تقنيات التحديد المذكورة سابقاً لتزيل بشكل مؤقت أجزاءً من صورتك. أقنعة الطبقة Layer Masksوتطبّق على طبقة واحدة بالضغط على أيقونة Add Layer Mask أسفل لوحة الطبقات. وستكون المناطق السوداء في القناع هي المناطق المخفية من الطبقة. كيفية استخدام أقنعة الطبقةلقد تحدّثنا سابقاً عن كون أسلوب أقنعة الطبقة أفضل بديل لأداة الممحاة. لاستخدام هذه التقنية سيتوجب عليك استعمال أداة الفرشاة في مكان استعمال الممحاة ورسم تلك المناطق الغير مرغوبة بالفرشاة السوداء. الفرق هنا أنّه في حال ارتكبت أي خطأ فإنّك ستتداركه بالرسم باللون الأبيض مكان وقوع الخطأ. متى نستخدم أقنعة الطبقةإنّ أفضل طريقة لاستخدامها هي أن تستخدم مع تقنيات أخرى للتحديد وذلك لضمان التعديل غير المُخَرّب. أقنعة القُصَاصَة Clipping Masksإنّها شبيه بأقنعة الطبقة إلّا أنّها يمكن تطبيقها على مجموعة من الطبقات. مبدأ العمل واحد لكلا الأسلوبين حيث المناطق السوداء مخفية والبيضاء ظاهرة. كيفية استخدام أقنعة القُصَاصَةبالضغط على مفتاح Alt وبالنقر بين طبقتين في لوحة الطبقات أو بالزر الأيمن على الطبقة المعينة ومن ثم اختيار Make Clipping Mask من القائمة. تذكّر أن تضع قناع القصاصة تحت الصورة الرئيسية ضمن مجموعة طبقات. متى نستخدم أقنعة القُصَاصَةإنّها فعّالة بشكل خاص مع التحديد اللوني. قم بتعبئة طبقة أحادية اللون أو تحديد مجال اللون بالأسود في طبقة جديدة ثم طبّق هذه الطبقة كقناع قُصَاصَة. نصائح احترافيةالآن أصبح لديك ترسانة كاملة من تقنيات التحديد التي ستجعلك جاهزاً للتصدّي لأي نوع من أنواع الصور في مشاريعك ولكن لدي بعض نصائح التحديد الإضافية التي ستساعدك على تحقيق نتيجة أفضل. استخدام أداة تنعيم الحواف Refine Edge لقص الشعر والفروتقنية القنوات ممتازة لقص نموذج لقطات بخلفيات استوديو مثالية ولكن بالنسبة لبقية الأوضاع التي لا تكون فيها الخلفية مثالية فإننا سنستخدم أداة تنعيم الحواف Refine Edge والتي ستكون الخَيَار الأفضل. هذه الأداة يجب تسميتها فعلياً "أداة الشعر" حيث أن استخداماتها تتمحور حول الشعر بشكل خاص. هي تتناغم مع التحديد الأساسي للعصا السحرية / القلم / الحبل وتمدّد هذا التحديد بذكاء ليشمل تلك التفاصيل الدقيقة. تتبع المسار حول الموضوع المراد تحديده ولكن بشكل قريب من حدود مناطق الشعر أو الفرو بدون أن نقلق بشأن تنعيم الشُعَيرَات. اذهب إلى القائمة Select > Refine Edge وقم بزيادة قيمة نصف القطر لرؤية الشعر يظهر بشكل سحري في التحديد. وسّع خيارات الفرشاة وارسم فوق مناطق أطراف الشعر التي تريدها ضمن التحديد مع أداة تنعيم نصف القطر Refine Radius tool. انتقل إلى أداة تحسينات الممحاةErase Refinements tool وارسم حول أي منطقة لا تتطلب تعديلات تنعيم الحواف التي قمنا بها للتو. سيكون التحديد النهائي جيد خصوصاً فيما يتعلق بتحديد الشعر حتى بوجود الخلفيات ذات التفاصيل المعقّدة طالما يوجد ما يكفي من التباين لإتمام العملية. القيام بعملية Defringe لإزالة الهالات والحدودفي بعض الأحيان عندما تقوم بلصق ما قمت بقصّه داخل خلفية داكنة ستلاحظ أن لها حواف رقيقة فاتحة أو هالة. هناك طريقة رائعة وسهلة لإزالتها باستخدام خَيَارDefringe. اذهب إلى القائمة Layer > Matting > Defringe وأدخل القيمة px 1 في الخيارات. بمجرد النقر مرة واحدة على هذا الأمر ستختفي كل الحدود البشعة على الفور. كن حذراً فقد تخرّب لك القواطع ذات التفاصيل الدقيقة جداً. استخدام أدوات Dodge و Burn على الصورة لضبط التباينأسلوب التحديد اللوني التي تَستَخدم القنوات يمكنها أن تُولّد تحديدات ممتازة إذا كان فقط التباين والدرجة اللونية في الصورة بالشكل الصحيح. المستويات Levelsوالمنحنيات Curves ستعدّل الصورة كاملة ولكن يمكنك تنعيم المناطق المحددة بأدوات Dodge و Burn. استخدم أداة Dodge لتفتيح مناطق في الخلفية كالسماء مثلاً. فالسماء الزرقاء ستبدو بلون رمادي متوسط في تحديدات القنوات ولكن يمكن تفتيحها بإضافة المزيد من التباين بينها وبين موضوعك الأساسي. أداة Burn ستساعدك على تعتيم مناطق داخل التحديد والتي تكون دقيقة جداً ولا يمكن رسمها بالفرشاة السوداء. قم بتغيير الوضع إلى Shadows، Midtones أو Highlights لاستهداف المنطقة الصحيحة بأمان. إعادة رسم الشعر مجددافي بعض الأحيان سيكون من المستحيل إنشاء تحديد نظيف ودقيق لشعر شخص ما بسبب الخلفية الشديدة التعقيد وكثيفة التفاصيل. في تلك الحالة يوجد نصيحة أخيرة يمكنها أن تنقذ الوضع وهي رسم بعض الشُعَيرَات الجديدة. اصنع تحديد قاسي حول خط شعر موضوعك وألصق ما قمت بقصّه في طبقة جديدة. ثم قم بتخفيف مستوى شفافية الصورة الأصلية الموجود في الأسفل في لوحة الطبقات. استخدم أداة Smudge مع فرشاة ناعمة لرسم شُعَيرَات منفردة. ابدأ مع فرشاة ناعمة بمقاس 3-4 px لتجسيد القاعدة السميكة ثم خفف الفرشاة تدريجياً لرسم نهايات الشعر الناعمة. سيبدو هذا العمل مملاً للغاية ولكنه لن يستغرق وقتاً طويلاً خصوصاً إذ استخدمت الجهاز اللوحي Wacom Graphics tablet. اشتري إضافات فوتوشوب Photoshop pluginأنا ليس لدي الكثير من الخبرة في إضافات الفوتوشوب Plugins لذلك لا يمكنني منحكم نصائح احترافية ولكنني أعلم أنّ هناك مجالات للتحديد كثيرة قائمة على الإضافات في الفوتوشوب. أكثرها شعبية هو إضافة Fluid Mask الذي يحتوي على ميزات مصممة خصيصاً لاختيار الشعر المعقّد، الأشجار، الزجاج والأقمشة شبه الشفافة. إن كنت ترى بأنّك تضيّع ساعات طويلة في قص الصور ربما ستجد مساعدة إضافية في إضافات الفوتوشوب Plugins التي تساعدك على تسريع العمل وتمنحك نتائج أفضل. ترجمة -وبتصرّف- للمقال: The Ultimate Guide to Cutting Stuff Out in Photoshop لصاحبه Chris Spooner.

نرى العديد من التصاميم عبر الإنترنت التي يشكّل فيها نص كثيف صورة ما لوجه شخص مثلًا. في هذا الدرس سنتعلّم كيفية القيام بذلك عبر برنامج جيمب GIMP. في هذا الدرس ستكون الصورة داكنة للغاية لدرجة أن الأسود يشكّل معظم أجزاء الصورة وفي هذه الحالة سنحتاج إلى صورة داكنة لوجه شخص. حمّل هذه الصورة المجانية لوجه هذا الطفل. تأكّد أن لون المقدمة هو اللون الأسود ثم انقر على أيقونة إضافة طبقة جديدة من لوحة الطبقات واختر خيار التعبئة بلون المقدمة (وهو اللون الأسود). استخدم أداة النص ثم ارسم بها مستطيل الكتابة بحيث يكون أكبر من مساحة الصورة حتى يغطي النص جميع جوانب الصورة. اكتب نصًا كثيفًا يغطي كامل مساحة مربع النص بخط صغير وباللون الأبيض. واختصارًا للوقت قم بنسخ نص جاهز ولصقه ضمن المربع. حدّد طبقة النص وانقر بالزر الأيمن للفأرة عليها واختر من القائمة المنبثقة خيار Add Layer Mask واختر من النافذة التي ستظهر لك الخيار الأول( White (full opacity حدّد طبقة الطفل الأصلية ثم اضغط على Ctrl+C لنسخ الطبقة ثم حدّد قناع طبقة النص واضغط Ctrl+V للصق الطبقة كقناع لطبقة النص. انقر على الطبقة الأخيرة التي قمنا بلصقها بالزر الأيمن للفأرة ثم اختر من القائمة الخيار Anchor Layer ستلاحظ كيف أن هناك بعض المساحات التي يظهر فيها النص بشكل خاطئ ويجب إزالته لذلك اختر أداة الفرشاة واختر اللون الأسود وحدّد قناع الطبقة ولوّن فوق تلك المساحات غير المرغوبة باللون الأسود. اذهب إلى القائمة Colors > Levels لتعديل مستويات الإضاءة لطبقة قناع النص. والآن ضع القيمة 170 لمؤشر الإضاءة من الجهة اليمنى كما في الصورة حتى نجعل النص فاتحًا أكثر ويظهر بشكل أفضل. وبهذا تكون الصورة النهائية جاهزة ويمكن استخدام نص بالأحرف اللاتينية التي قد تجعل مستوى التعبئة أعلى من مستوى النص العربي.

سنتعلّم اليوم كيفية تعديل الصور وتطبيق تأثير Threshold وقناع الطبقة بالإضافة إلى استخدام أنواع خاصة من الفرش لصناعة تصميم أنيق وإضافة النص المطلوب على التصميم. يمثّل استخدام هذه المزايا جميعًا أساسيات تعديل الصور على الفوتوشوب لصناعة البروشورات والفلايرات وحتى صور الغلاف لصفحات الفيس بوك والتويتر وغيرها. سنحتاج أولًا إلى الفكرة الأساسية التي سنبدأ من خلالها بالبحث عن المصادر للحصول على مواد التصميم، والفكرة الأساسية هنا هي تصميم صورة فتاة صغيرة تنظر نظرةً فيها تفاؤل وتطلّع بحيث سنضيف النص “التطلّع نحو مستقبل أفضل” بحيث يمكن استخدامها في مواضيع معاناة الأطفال اللذين يمرون بظروف صعبة أيًّا كانت. ولهذا سنحتاج إلى صورة الفتاة الصغيرة ذات النظرة المميزة (المصادر مذكورة في نهاية الدرس). كما سنحتاج لتطبيق تأثير ألوان التفاؤل كقناع طبقة، لذلك حصلتُ أيضًا على صورة مفعمة بالألوان الجذابة. بالإضافة إلى مجموعة مميزة من الفرش تمثّل لطخات طلاء أو حبر ويمكن الحصول عليها من الإنترنت مجانًّا. افتح الصورة باستخدام برنامج الفوتوشوب. قص جسم الفتاة من الخلفية، واختصارًا للوقت يمكنك الاطلاع على أساليب القص المختلفة التي يمكنك استخدامها من خلال درس الدليل الكامل لقص الأشياء في فوتوشوب وسنحصل على الشكل التالي بعد إتمام عملية القص. حدّد طبقة صورة الفتاة المقصوصة ثم اذهب إلى القائمة Image > Adjustments > Threshold وسنبدأ بتطبيق تأثير Threshold على الصورة. ضع القيمة 70 في خانة Threshold Level ثم انقر على OK. نحن لسنا بحاجة للمساحات البيضاء في هذا النوع من التصاميم وإنما فقط للمساحات السوداء وأفضل طريقة لتحديد هذه المساحات بدقة هي عبر خيار Color Range لذلك اذهب إلى القائمة Select > Color Range استخدم الأداة الماصة للألوان التي سيتم تفعيلها بشكل تلقائي مع هذا الخيار واختر مساحة سوداء ضمن صورة وجه الفتاة ثم ضع القيمة 128 ضمن خانة Fuzziness لتحديد أكبر قدر ممكن من اللون الأسود ضمن الصورة. اضغط على الاختصار Ctrl+J لنسخ المساحات السوداء المحددة إلى طبقة جديدة بشكل تلقائي دون الحاجة للقيام بخطوات النسخ واللصق وإنشاء الطبقات، ثم أخفِ الطبقة القديمة تاركًا الطبقة الجديدة السوداء مع الخلفية الشفافة. أنشئ طبقة جديدة بيضاء وضعها تحت طبقة وجه الفتاة لتكون خلفية التصميم الافتراضية. ألصق صورة التصميم المضلع المفعم بالألوان فوق جميع الطبقات. ثم طبّق تأثير التمويه عليه من خلال القائمة Filter > Blur > Gaussian Blur وضع القيمة 19.4 في خانة Radius. قم بتعديل حجم هذه الصورة الأخيرة عبر استخدام الاختصار Ctrl+T بحيث تغطي كامل مساحة التصميم. هذا ما ستبدو عليه صورة التصميم حتى هذه اللحظة. ولأخذ فكرة عما سيكون عليه وضع التصميم بعد تطبيق هذه الألوان على صورة الفتاة قم بالنقر بالزر الأيمن للفأرة على طبقة الألوان واختر الخيار Create Clipping Mask لتصبح هذه الطبقة طبقة قناع للطبقة التي تحتها مباشرة وهي في هذه الحالة طبقة الفتاة ذات المساحات السوداء فقط. استخدم الاختصار B لتحديد أداة الفرشاة واستخدام فرشاة بقع طلاء أو بقع حبر وابدأ باختيار لون قريب من جهة استخدامك للفرشاة وارسم بقعًا مختلفة متنوعة في كل مرة وعلى مختلف أطراف صورة الفتاة. وهذا ما سيبدو عليه شكل التصميم بعد الانتهاء من رسم البقع حول صورة الفتاة. استخدام أداة النص من خلال الاختصار T ثم اكتب العبارة التي اتقفنا عليها في بداية الدرس وهي “التطلّع نحو مستقبل أفضل” واختر خطًّا مناسبًا، أنا اخترت هنا خطًا يدويًا بحيث يتناسق مع فكرة الرسم اليدوي للوحة واسقاط بقع الألوان على اللوحة ومن ثم الكتابة بخط اليد. وأخيرًا حدّد طبقة الفتاة وطبقة الألوان المموّهة وطبقة بقع الطلاء وطبقة النص وانقر على زر Group في أسفل لوحة الطبقات لوضع جميع هذه الطبقات في مجموعة واحدة. ثم انقر بالزر الأيمن للفأرة على طبقة الألوان واختر الخيار Create Clipping Mask لتصبح هذه الطبقة طبقة قناع للمجموعة كاملة ويتم تطبيق تأثيرها على جميع الطبقات الموجودة ضمن هذه المجموعة. هذا هو الشكل النهائي للتصميم والذي يحقق الفكرة الأساسية التي تحدثنا عنها في بداية الدرس. يمكنكم القيام بالبحث عن مصادركم الخاصة والقيام بإنشاء تصاميم مشابهة تخدم أفكاركم وأهدافكم وإضافة المزيد من التأثيرات كوضع خلفية غير بيضاء جامدة و إضافة أنواع فرش مختلفة وطبقة قناع ألوان مميزة للحصول على تصاميم روعة. المصادر صورة الفتاة الصغيرة مجانية من موقع Flickr تحت الترخيص (CC BY 2.0). صورة الألوان المضلعة مجانية من موقع Wallpaper Safari. مجموعة فرش بقع الطلاء والحبر مجانية من موقع Brusheezy ولسهولة الوصول لهذه الأنواع من الفرش ابحث ضمن الموقع عن ink splatters وعن paint splatters. عملية قص صورة الفتاة الصغيرة تمت باستخدام طريقة القنوات Channel المذكورة ضمن درس الدليل الكامل لقص الأشياء في فوتوشوب.

سنتعلم في هذا الدرس كيفية صناعة تأثير خامة المعدن والكروم على النصوص في برنامج جيمب GIMP والتي تصلح لاستخدامها على النصوص وكذلك على مختلف العناصر الأخرى. بداية افتح ملفًا جديدًا في جيمب وليكن بحجم 640 في 400 بكسل. حدّد أداة التدرّج اللوني من شريط الأدوات. ثم غيّر لوني المقدمة والخلفية إلى اللون الأحمر بدرجتين مختلفتين ليكون لون المقدمة R:107 - G:6 - B:6 ولون الخلفية R:186 - G:46 - B:46 كما في الصور وفي قائمة أدوات التدرّج اللوني اختر الخيار Normal من Mode وليكن مستوى Opacity عند 100 واضغط على إشارة السهمين المتعاكسين (ضمن الدائرة الحمراء) لعكس جهة التدرّج ثم اختر الخيار Radial من Shape. ارسم الآن من منتصف لوح الرسم إلى إحدى الزوايا ليظهر الشكل كما في الصورة التالية. استخدم أداة النص لكتابة حرف ما أو نص ما. أنا كتبت حرف Z هنا. استخدمت خطًا عريضًا وهو خط Sans Bold بحجم 350px وباللون الأبيض ووضعته منتصف لوح الرسم. والآن حدّد طبقة النص من لوحة الطبقات Layers، إذا لم تكن لوحة الطبقات ظاهرة فيمكنك إظهارها بالضغط على الاختصار Ctrl+L، ثم انقر بالزر الأيمن للفأرة على هذه الطبقة واختر Alpha to Selection لتحديد النص. تم تحديد النص فقط بالفعل والآن اذهب إلى القائمة Select > Shrink وذلك لتقليص حجم التحديد ضع القيمة 1px ثم اضغط OK. اختر أداة الفرشاة ضمن صندوق الأدوات واترك الخيار Normal في Mode وحدد الفرشاة Hardness050 الناعمة الحواف من خلال النقر على شكل الفرشاة واختيارها ثم ضع القيمة 55 في Size واترك باقي الخيارات على حالها. مبدئيًا ابدأ برسم خطوط شبه أفقية بزوايا مائلة خفيفة على عرض الحرف باللون الرمادي الفاتح ثم استخدم اللون الأسود للرسم بجانب الخطوط السابقة بطريقة أكثر عشوائية ثم استخدم اللون الرمادي الداكن وتابع بنفس الطريقة حتى يبدو أن الحرف قد حصل على لمعان الكروم بأفضل طريقة ممكنة. عد مجدّدًا إلى القائمة Select > Shrink وذلك لتقليص حجم التحديد مجدّدًا وهذه المرّة ضع القيمة 7px ثم اضغط OK. انقر على أيقونة إنشاء طبقة جديدة من لوحة الطبقات Layers واترك خيارات إنشاء الطبقة الجديدة كما هي مع التأكد من اختيار الخلفية الشفافة Transparency. اختر أداة علبة الدهان Bucket ثم اختر اللون الأبيض ولوّن التحديد الجديد باللون الأبيض. قلّص حجم التحديد مرّة أخيرة بقيمة 1px. انقر على المفتاح Delete من لوحة المفاتيح لحذف ما بداخل التحديد. والآن قم بتلوين ما بداخل التحديد ضمن الطبقة الأخيرة باللون الرمادي الداكن وما ضمن الطبقة السابقة (طبقة الحرف الأساسية) باللون الأسود، طبعًا سيظهر اللون الرمادي فقط لأنه طبقته في الأعلى. اذهب إلى القائمة Filters > Distorts > Mosaic ستُفتَح نافذة إعدادات Mosaic، اختر الخيار Hexagons من Tiling primitives وذلك ليظهر أشكال مسدّسة متجانبة بداخل التحديد وهو ما يمنح الشعور بأن ما بداخل الحرف شريط معدني ثم ضع الحجم Size عند 5 والارتفاع height عند 50 والمسافة spacing عند 1 والاتقان neatness عند 0.88 واضغط OK. وهذه هي النتيجة النهائية وهي عبارة عن حرف Z كبير عريض معدني بحواف كروم أنيقة. لدى برنامج جيمب GIMP إمكانات رائعة ومذهلة وهو أفضل بديل مجاني لبرنامج الفوتوشوب الشهير والأول في هذا المجال.

من الممتع مشاهدة صور السينماغراف ومن الممتع أكثر تصميم هذه النوعية من الصور الإبداعية، حيث تجعل هذه التقنية الصور عالية الدقة تنبض بالحياة. وفي هذا الدرس سنتعلم كيفية تصميم هذه النوعية من الصور بسهولة وبخطوات بسيطة باستخدام الأدوات الحديثة الموجودة في إصدار CC من برنامج فوتوشوب، كما سأعطيكم تلميحات حول كيفية تصميم هذه الصور باستخدام الإصدارات الأقدم من برنامج فوتوشوب. ولكن أولًا دعونا نتعرّف على هذه التقنية. ما هي السينماغراف Cinemagraph؟ لقد بدأ مصطلح السينماغراف Cinemagraph بالظهور منذ عام 2011 على يد المصورين المحترفين Kevin Burg و Jamie Beck اللذين استخدما هذه التقنية لصالح دور الأزياء وعدد من النشاطات التجارية الأخرى التي تتطلب هذا النوع من الصور. Kevin Burg و Jamie Beck ومن ثم انتشر هذا الفن عبر العالم ليصبح له روّاد وأنصار ومصممون أيضًا، ويمتاز هذا الفن بإنشاء صور متحركة GIF تختلف كليًّا عن صور GIF المعروفة والمستخدمة في مواقع الإنترنت والتي كانت تتميز بدقتها الضعيفة، وبكونها تمثّل صورًا متحركة تعبيرية أو صورًا فوتوغرافية قصيرة سيئة الدقة والشكل لمشهد قصير جدًا من فيلم أو خبر مثلًا. أما هذه التقنية فتعتمد على الصور عالية الدقة، والتي يتم أخذها عادة من لقطات فيديو، ثم أخذ جزء صغير من اللقطة مع تحريك مساحة صغيرة منها أو تحريك معظم أجزاء الصورة، ولكن ليس كامل مساحة الصورة، فذلك سيجعل حجم ملف GIF ضخمًا وعرضه على الإنترنت صعبًا جدًّا، ويَعتَبرُ روّاد هذا الفن بأنهم يصممون صورًا تستمر في الحركة، نابضة بالحياة، عالية الدقة، جميلة وأنيقة. وهذه بعض الأمثلة عن هذه التقنية من إنتاج الثنائي Kevin Burg و Jamie Beck من موقعيهما على الإنترنت Cinemagraphs و Annstreetstudio. مقومات تصميم صور السينماغراف تتميّز صور السينماغراف بأنها صور ثابتة فيها حركة وحياة، لذلك فإن من أهم مقومات تصميم هذه الصور هو أن تكون اللقطة ثابتة في ملف الفيديو الذي سنعمل عليه، لأن حركة الصورة أثناء عرض اللقطة سيؤدّي إلى تحريك كامل مساحة الملف، وهذا سيجعل حجم ملف GIF كبيرًا وعرضه غير مجدٍ، أو أن التصميم سيكون مشوّهًا وغير مقبول، كما ويجب أن لا تتداخل الأجزاء التي ننوي جعلها متحركة مع أجزاء متحركة أخرى قد تغطّي على الحركة المطلوبة، وأخيرًا بما أننا سنعمل على فوتوشوب فيجب مراعاة إمكانات الحاسوب الذي سنعمل عليه، لأن استخدام مقطع فيديو كبير نسبيًّا سيستنزف طاقات هذا الحاسوب، وسيؤدّي عمله ببطء وصعوبة شأنه شأن إنشاء التصاميم ثلاثية الأبعاد 3D في هذا البرنامج. من أين أحصل على مقاطع فيديو صالحة لإجراء مثل هذه التصاميم؟ هذا مهمٌّ جدًّا لأن مقطع الفيديو يجب أن يكون بكاميرا ثابتة في مكان وزاوية التصوير، حتى نتمكّن من القيام بهذا التصميم، وإلّا سنضطر للقيام بعمليات تعديل وتحرير ضخمة على برامج المونتاج وبرامج تعديل وتحرير الفيديو لنتمكن من تثبيت اللقطة على زاوية واتجاه معين حتى نتمكن من تصميم صورة السينماغراف، لذلك يمكننا الحصول على هذه اللقطات بأنفسنا عبر تصوير مشهدٍ معيّن قصير مع تثبيت الزاوية والاتجاه، أو يمكننا أن نتّجه إلى مواقع تحميل مقاطع الفيديو والحصول على هذه النوعية من المقاطع، بعض هذه المواقع قد يكون مجاني مثل Videezy و Coverr و Videvo وغيرها كما يمكن تحميلها من مواقع غير مجانية مثل مواقع Shutterstock وفي معظم الحالات ستكون مثل هذه المقاطع موجودة تحت مصطلح Footage. التصميم باستخدام فوتوشوب إصدار CC سأستعرض هنا تصميمين سينماغراف باستخدام الإصدار CC من برنامج فوتوشوب، الأوّل باستخدام صورة جاهزة من أحد المواقع، والثاني باستخدام مقطع قمتُ بتصويرهِ باستخدام الكاميرا في هاتفي المحمول. التصميم الأول: نافورة المياه سنقوم بتصميم سينماغراف بالاعتماد على مقطع فيديو قصير حصلتُ عليه من موقع Videezy وهو عبارة عن مجموعة من نوافير مياه صغيرة بقرب بعضها البعض، وسنقوم بجعل أحد هذه النوافير تعمل فيما بقية الصورة جامدة. افتح برنامج Photoshop CC وهذا الدرس يخص إصدار CC وليس الإصدارات التي تسبقه، لأن الأدوات التي سنستخدمها موجودة في هذا الإصدار وغير موجودة في ما قبله. افتح ملف الفيديو ببساطة باستخدام فوتوشوب أو قم بسحب ملف الفيديو إلى داخل نافذة البرنامج، ليتم فتح الفيديو وسيُفتَح معه شريط أدوات الفيديو أسفل نافذة البرنامج، وإن لم يظهر لأي سبب قم بفتحه بنفسك من القائمة: Window > Timeline ستلاحظ من الصورة السابقة أن هذه الأدوات خاصة بتحرير الفيديو، وسيبدو فوتوشوب كما لو أنه برنامج مونتاج، في الحقيقة هذه الأدوات تشبه إلى حد كبير شريط أدوات AfterEffect الشهير ولكن بشكل مخفّف جدًّا. والآن استخدم زر التشغيل لتشغيل الفيديو ومشاهدة كامل المقطع، ثم استخدم المزلاج فوق شريط تمرير الوقت للمرور على المقطع. المهم هنا أن تجد الجزء الصغير جدًّا المناسب للقيام بالتصميم، ومن أهم النقاط التي يجب أن تبحث عنها هي أن تختار الجزء الذي سيتحرك والأجزاء الثابتة، وأيضًا يجب أن تحدّد نقطة البداية والنهاية لتصميمك، حيث يجب أن يكون شكل الجزء المتحرّك الذي اخترته مطابقًا إلى حد كبير لشكله عند نهاية التصميم، لأن التصميم سيكون في وضعية إعادة التشغيل المستمر Loop، ولذلك لا يجب أن يشعر المشاهد للتصميم بأنَّ هناك انقطاعًا ما، أو أن المقطع تتم إعادته تكرارًا، والعمل الجيد الصحيح هو أن تجعل إمكانية تمييز مكان القطع وإعادة تشغيل المقطع شبه مستحيلة على المشاهدين، وهذا واضح في الأمثلة التي ذكرتها فوق وهناك بعض الأمثلة في نهاية الدرس. قم بوضع المؤشر على بداية المقطع ثم اسحبه إلى بداية الجزء الذي اخترته، ثم ضعه على نهاية المقطع واسحبه إلى نهاية الجزء الذي اخترته لإنهاء التصميم. يمكنك تعديل هذه الخيارات عبر وضع المؤشر على أطراف المقطع في شريط تمرير الوقت وسحبه كما تشاء. المهم هو أن تختار فترة قصيرة جدًا لتتجنب الحجم الكبير لملف GIF الذي سيَنتُج معنا في النهاية. والآن قم بتحديد الكل عبر الضغط على الاختصار Ctrl+A ثم انسخ جميع العناصر والطبقات مجتمعة ومندمجة من الخيار Copy Merged والذي ستجده في القائمة: Edit > Copy Merged أو من خلال الاختصار Shift+Ctrl+C. ألصق ما قمت بنسخه في الخطوة السابقة باستخدام الاختصار Ctrl+V ليتم لصق نسخة عن المشهد الذي كان ظاهرًا عند القيام بعملية النسخ كصورة ثابتة، ويصبح طبقة جديدة في لوحة الطبقات، كما سيكون الإطار التالي في شريط التمرير الزمني السفلي. اسحب الطبقة الجديدة التي ألصقناها في الخطوة السابقة إلى الأعلى في لوحة الطبقات، حتى تصبح خارج وفوق مجموعة طبقات الفيديو، وعند القيام بذلك ستصبح تلقائيًّا في طبقة جديدة ضمن شريط أدوات الفيديو السفلي فوق طبقة مقطع الفيديو الأساسي. ستجد أن طبقة الصورة الثابتة تبدأ زمنيًّا بعد طبقة مقطع الفيديو الأساسي، وهذا يعني أن هذه الطبقة لن تظهر إلا بعد انتهاء عرض المقطع الأساسي، لذلك قم بسحب هذه الطبقة في شريط التمرير الزمني السفلي إلى بداية الشريط لتكون فوق مقطع الفيديو مباشرة، وبذلك ستظهر فوق المقطع مباشرة ولن يظهر المقطع أثناء العرض لأن هذه الطبقة تغطّيه بالكامل. ستلاحظ أيضًا أن طول هذه الطبقة أكبر من طول مقطع الفيديو وقد تكون أقصر في بعض الأحيان، لذلك قم بوضع المؤشر عند نهاية هذه الطبقة ثم انقر واسحب إلى خط نهاية المقطع لتكون مدة عرض كلا الطبقتين متطابقة على شريط التمرير الزمني. طبّق ميزة القناع Mask على الطبقة الجديدة الثابتة من خلال تحديد هذه الطبقة ثم النقر على زر القناع Mask أسفل لوحة الطبقات. بعد الانتهاء من الخطوات السابقة أصبح لدينا مقطع فيديو جامد يعرض صورة ثابتة وهي الطبقة التي ألصقناها بعد النسخ المدمج، وسنقوم الآن باختيار الجزء الذي نريده أن يكون متحركًا من الصورة وهو الجزء الذي ضبطنا على أساسه موقع بداية عرض المقطع ونهايته، في هذه الحالة اخترتُ أنا النافورة الصغيرة على اليمين، ولذلك سنستخدم أداة الفرشاة وباللون الأسود سنقوم بالرسم فوق قناع الطبقة ضمن مساحة هذه النافورة والمنطقة الرقيقة المحيطة بها. قم بتشغيل هذا الفيديو من زر التشغيل في شريط أدوات الفيديو السفلي وتأكّد من عملية الرسم الدقيق على قناع الطبقة، ثم تابع عملية الرسم، وفي حال ارتكاب أي خطأ يمكنك تصحيحه بالرسم بأداة الفرشاة باللون الأبيض فوق مكان الخطأ فيتم التصحيح. بعد الانتهاء من عملية الرسم على قناع الطبقة سنقوم بحفظ العمل كملف GIF لذلك اذهب إلى القائمة: File > Export > Save for Web أو من خلال الاختصار Alt+Shift+Ctrl+S. اختر الحفظ بصيغة GIF لتكون الصورة متحركة وتأكّد من أنَّ الألوان 256 ثم حدّد حجم الصورة إذا أردت بحسب تصميم موقع الإنترنت الذي ستدرج الصورة ضمنه ثم تأكّد أخيرًا من أن خيار Looping Option موضوع على Forever ثم اضغط Save. وهذه هي النتيجة النهائية لهذا التصميم: التصميم الثاني: حركة المرور في الطريق بعد أن تعلّمنا كيفية القيام بهذا التصميم مع صورة النافورة سنقوم بتجربةٍ أخرى للتأكّد من مقدرتنا على تنفيذ هذه التصاميم بسهولة. هذه المرّة سنقوم بتصميم سينماغراف لطريق عام مع بعض السيارات المارة لتوضيح فكرة تحريك أجزاء كبيرة من اللقطة، وبتقليد بسيط لتصميم السينماغراف للصفحة الرئيسية لموقع سينماغراف والذي يُظهر حركة المرور من بعيد ليلًا لشوارع باريس. هذا المقطع قمتُ بالتقاطه بنفسي باستخدام هاتفي المحمول وذلك كتتمة لهذا الدرس وللتأكيد على إمكانية إنشاء تصاميم سينماغراف من خلال كاميرا منزلية أو هاتف محمول. المهم يجب أن تبذل قصار جهدك لتثبيت يدك أثناء التقاط المقطع القصير ولمدة قصيرة، أو يمكنك استخدام أدوات المناصب ثابتة لتثبيت الكاميرا. سنتبع ذات الخطوات في التصميم الأول ولاختصار الوقت سأقوم بسرد صور الخطوات مع تلميحات لكل خطوة بالترتيب. افتح مقطع الفيديو باستخدام برنامج فوتوشوب: قم بضبط حجم المقطع إلى البداية والنهاية المناسبتين. حدّد الكل Ctrl+A. انسخ بشكل مدمج Shift+Ctrl+C. ألصق ما تم نسخه Ctrl+V. حرّك الطبقة الجديدة الملصقة للتو إلى خارج مجموعة الفيديو. حرّك مقطع الصورة الثابتة إلى بداية شريط التمرير الزمني. اضبط حجم هذا المقطع ليتطابق مع حجم المقطع الأساسي. أنشئ قناع Mask للطبقة الجديدة. ارسم بالفرشاة السوداء على القناع فوق الطريق وفوق بعض الأجزاء المتحركة في الصورة. احفظ الملف للويب كملف GIF من الاختصار Alt+Shift+Ctrl+S. طبّق ذات الإعدادات لحفظ الملف كما في المثال السابق أو كما في الصورة. والنتيجة النهائية ستكون على الشكل التالي: التصميم باستخدام الإصدارات السابقة من فوتوشوب الأمر يختلف عندما نستخدم إصدارات ما قبل CC مثل CS6 وما قبلها، إذ أنَّ أدوات الفيديو الحديثة غير متوفرة في تلك الإصدارات، إنما أدوات فيديو بالاعتماد على الإطارات Frames، وهي طريقة مرهقة لأن فوتوشوب لا يستطيع العمل على ملفات فيديو كبيرة أو حتى متوسطة الحجم، بل على ملفات صغيرة وهذا يعني أنه يتوجب علينا العمل خارج إطار فوتوشوب بدايةً كبرامج المونتاج وتعديل وتحرير الفيديو لنقوم بقص المقطع وتصغيره واختيار الجزء الأنسب للقيام بالمهمة، وحفظ المقطع الصغير الجديد ثم العمل على برنامج فوتوشوب لإنتاج السينماغراف المطلوب. الطريقة تبدأ بإدخال المقطع كطبقات عبر القائمة: File > Import > Video Frames to Layers تأكّد من تفعيل الخيار Make Frame Animation. وبذلك سيكون كل إطار من إطارات المقطع في طبقة منفردة ما سيجعل عدد الطبقات كبير. اجمع الطبقات جميعها في مجموعة طبقات واحدة باستثناء الطبقة الأولى. والآن طبّق القناع Mask على مجموعة الطبقات كاملة، ثم لوّن كامل مساحة القناع باللون الأسود، وبذلك ستكون مجموعة الطبقات شفافة ولن يظهر سوى الطبقة الأولى الموجودة خارج مجموعة الطبقات، وذلك لأن القناع ليس مطبّقًا عليها ثم استخدم أداة الفرشاة، وباللون الأبيض ارسم فوق الجزء الذي نريده أن يتحرك ليكون هو الجزء الوحيد الظاهر من مجموعة الطبقات. ثم اذهب إلى لوحة إطارات الفيديو، وستجد أن معظم الإطارات شبه شفّافة بمعظم مساحتها إلّا ما تم الرسم فوقه بالأبيض، وذلك يرجع إلى ظهور الطبقة الأولى فقط في الإطار الأول، ولحل هذه المشكلة حدّد الطبقة الأولى الموجودة خارج مجموعة الطبقات، ثم انقر على أيقونة Unify Layer Visibility الموجودة أعلى لوحة الطبقات، ثم انقر Match في النفاذة التالية. الآن جميع الإطارات تظهر بشكل صحيح وسيكون من الصعب التأكّد من أن الطبقة الأولى مطابقة بشكلها تمامًا للطبقة الأخيرة، وهذا سيُظهِر فرقًا مريعًا عند انتهاء عرض المقطع وانتقاله للتكرار إلى الطبقة الأولى، لذلك سنلجأ إلى خدعة قديمة تتمثّل بإعادة عرض جميع الإطارات في نهاية عرض المقطع ولكن بشكل معكوس، فتصبح الطبقة الأولى هي الأخيرة، وبذلك لن تظهر أي فواصل بشعة عند تكرار عرض المقطع كملف GIF، الآن حدّد جميع الإطارات ثم انقر على أيقونة قائمة خيارات نافذة Timeline في الزاوية، ثم انقر على Copy Frames لنسخ جميع هذه الإطارات. بعد أن نسخناها انقر على ذات القائمة ثم اختر خيار لصق الإطارات Paste Frames لتظهر نافذة جديدة، اختر منها Paste After Selection ليتم لصق الإطارات المنسوخة بعد الإطارات الحالية. ولنعكسها أبقِ على الإطارات الجديدة محدّدة، ثم انقر على أيقونة قائمة خيارات Timeline مجدّدًا ثم اختر Reverse Frames. يمكنك التحكّم في سرعة عرض إطارات المقطع من خلال تحديد جميع الإطارات ثم النقر على رقم زمن عرض الإطار، ثم اختيار الزمن الأنسب بحسب المقطع الذي تعمل عليه. ثم احفظ العمل كملف GIF من خلال Save for Web. والنتيجة ستكون كهذه الصورة: الخاتمة كما رأينا في هذا الدرس فإن عملية تصميم السينماغراف ليست صعبة وهي ممتعة ونتائجها رائعة جدًّا ويمكن استخدامها كخلفية جزء من موقع إنترنت أو كشرح لموقف معين عبر الإنترنت أو غيره. هذا الفن الرائع ورغم حداثة عهده إلا أنه رائج وله قاعدة جماهيرية كبيرة، وأصبح المصممون يتباهون بتصاميم من هذا النوع. طبعًا هناك بعض التصاميم ستحتاج إلى المزيد من العمل للوصول إلى نتائج مذهلة. ففي بعض الأحيان قد تضطرون للتعامل مع مقاطع غير ثابتة في التصوير، ولذلك سنحتاج إلى إلغاء الاهتزاز عبر برامج مختصة، ولعلّ أفضلها برنامج ProDAD Mercalli، ومن الممكن القيام بذلك عبر موقع YouTube الذي يقدّم هذه الميزة بعد رفع المقطع عليه، ثم قم بتحميل المقطع بعد ذلك. وفي بعض الأحيان يكون من المستحيل إيجاد نقطة بداية قريبة من حيث الشكل مع نقطة نهاية للمقطع، فنقوم بإيجاد أقرب نقطتين من حيث الشكل ثم نضاعف المقطع، ونقطع المقطع الجديد من المنتصف ونجعل النصف الأول بعد المقطع الأساسي والنصف الثاني قبله ثم نُداخل بين المقاطع عبر الخيار Fade، ومن الممكن القيام بكل ذلك في الإصدار CC من برنامج فوتوشوب، فإن لم يكن هذا الإصدار متوفرًا فسوف نلجأ إلى برامج تحرير الفيديو للقيام بهذه المهمة، وسأشرح هذا الأمر ببعض التفصيل في دروس قادمة. هذه بعض التصاميم الرائعة من بعض مواقع الإنترنت. هذه الصورة للمصمم turst67 هذه الصورة للمصمم Heinzefilm هذه الصورة من موقع The Good Films تصميم هذا النوع من التصاميم بسيط ولا يستغرق سوى بضع دقائق لذلك جرّبوا بأنفسكم وشاركونا تجاربكم. ملاحظات الدرس تم استخدام مقطع الفيديو في التصميم الأول من موقع Videezy ضمن شروط الاستخدام. تصاميم السينماغراف الناتجة عن أمثلة هذا الدرس مصممة لصالح أكاديمية حسوب تحت الترخيص CC BY-NC-SA 4.0 ويمكن تحميلها بغية الاستفادة منها لأغراض تدريبية وتعليمية فقط.

سنتعّلم في هذا الدرس طريقة صنع إحدى أدوات التصوير؛ الكلاكيت. سنقوم باستخدام الأدوات الأساسية، تأثيرات 3D، التدرّجات وأوضاع مزج الطبقات. 1. نفتح مستندا جديدا بالإعدادات التالية: الأبعاد: 500px*500px.نمط الألوان: CMYK.الدقة: (Screen (72ppi.ونتأكّد من أنّ مربّع الخيار Align New Objects to Pixel Grid غير مؤشّر ثم نضغط OK. 2. نرسم مستطيلا باستخدام (Rectangle Tool (M. بالأبعاد 295px*190px. نملأ الشكل بلون معيّن. نقوم بعمل نسخة من هذا المستطيل (Ctrl+C ثم Ctrl+F) ثمّ نغيّر ارتفاع المستطيل الثاني إلى 40px ونحرّكه إلى الأعلى باستخدام أسهم الاتّجاهات من لوحة المفاتيح: 3. نحدّد المستطيل الصغير ونذهب إلى: Object > Transform > Rotate ونضع قيمة الزاوية 10 درجات. بعد تدويره نقوم بتحريكه للأعلى باستخدام الأسهم من لوحة المفاتيح إلى أن تبقى الحافّة السفلية اليسرى فقط هي المتّصلة بالمستطيل الكبير. نحدّد المستطيلين معًا ونقوم بتوحيدهما بالضغط على زرّ Unite من لوحة مستكشف المسارات: Windows > Pathfinder 4. نقوم برسم وجه الكلاكيت باستخدام أداة القلم (P) كما موضّح في الصورة أدناه. نختار عرض الخط 3pt أو 5pt حسب الرغبة. نقوم بتحديد جميع الخطوط ونذهب إلى: Object > Expand 5. نقوم بإضافة النصوص أيضًا كما في الصورة أدناه. نحوّل النصوص إلى حدود (Outlines) وذلك بتحديد النصّ وننقر بزرّ الفأرة الأيمن ثمّ نختار Create Outlines. (أو نحدّد النصّ ثم نذهب إلى القائمة Type > Create Outline). هذه الخطوة تفيدنا في تحويل النص إلى خطوط ومنحنيات لا يمكن التعديل عليها، لذلك علينا أن نتأكد من النصوص قبل تحويلها إلى منحنيات: 6. نقوم برسم شكل مستطيل (M) ثمّ نضغط على مفتاح (E) من لوحة المفاتيح لعمل تحويل للمستطيل. نمسك النقطة الوسطية في الأعلى ونقوم بسحبها إلى اليسار بينما نضغط على مفتاحيّ Ctrl +Shift. يجب أن يكون الشكل الناتج كما في الصورة أدناه: 7. ننسخ الشكل الذي قمنا بعمله في الخطوة السابقة ونقوم بتحريكه إلى اليسار باستخدام الفأرة بينما نضغط على مفتاحيّ Alt+Shift. نضغط على Ctrl+F لعمل نسخ أخرى منه. عندما نكتفي بعدد النسخ نقوم بتحديدها جميعًا ونقوم بنسخها نسخة أخرى. من خيارات لوحة التحويل Transform Panel: Window > Transform نقوم باختيار Flip Vertical (نقوم بإظهار قائمة الخيارات من الزرّ الموجود في أقصى الحافّة اليمنى للوحة التحويل). بعدها نذهب إلى: Object > Transform > Rotate ونضع قيمة الزاوية 10 درجات. نقوم بمحاذاة هذه الأشكال مع الجزء العلوي من الكلاكيت باستخدام أسهم لوحة المفاتيح: 8. نقوم برسم مستطيل وتغيير حجمه ومكانه ليتناسب مع الشكل كما موضّح في الصورة أدناه (المستطيل الأخضر). نقوم بتحديد النقطة العلويّة اليمنى من المستطيل وتحريكها إلى الجهة اليسرى باستخدام (Direct Selection Tool (A والفأرة. عندما نتأكّد من أن الشكل أصبح كما هو مرغوب به نقوم بتحريكه جانبًا لكي نستخدمه لاحقًا: 9. نقوم بتحديد الخطوط، النصوص، وجميع الأشكال في وجه الكلاكيت مرّة واحدة، ثم نسحب هذه المجموعة إلى لوحة الرموز (Symbols Panel): Window > Symbols Panel يمكننا إعطاء اسم للرمز الجديد من نافذة خيارات النماذج، ثم نختار نوع الرمز Graphic ونضغط OK.يمكننا الآن حذف المجموعة الأصلية لأنّها أصبحت في حوزتنا في لوحة الرموز. 10. نقوم بتحديد شكل الكلاكيت ونذهب إلى القائمة: Effects > 3D > Extrude & Bevel سنستخدم الاعدادات كما في الصورة أدناه: 11. نضغط على زرّ Map Art من نافذة خيارات 3D Extrude & Bevel، ثمّ نختار المجموعة التي أضفناها في لوحة الرموز من القائمة المنسدلة الخاصّة بالرمز (Symbols) في نافذة Map Art؛ ثمّ نضغط OK. نذهب إلى القائمة: Object > Expand Appearance ثمّ إلى: Object > Ungroup نستمّر بفكّ المجموعات (Shift+Ctrl+G) إلى أن نحصل على أشكال منفصلة (أيّ يصبح الأمر Ungroup غير فعّال). نقوم بتحديد الجهة الأمامية من الكلاكيت، نضغط بزرّ الفأرة الأيمن ثمّ نختار Release Clipping Mask. 12. نحدّد الشكل الذي قمنا بوضعهِ جانبًا فيما سبق، ثم نذهب إلى: Effect > Stylize > Round Corner نغيّر نصف القطر إلى 10 ونضغط OK. نذهب الآن إلى القائمة: Effect > 3D > Extrude & Bevel ونستخدم نفس الإعدادات السابقة (الخطوة 11) ماعدا قيمة العمق (Depth) نغيّرها إلى 2pt. نذهب إلى: Object > Expand Appearance ثمّ إلى: Object > Ungroup نستمّر بفكّ المجموعات (Shift+Ctrl+G) إلى أن نحصل على أشكال منفصلة. نقوم بوضع هذا الشكل فوق الكلاكيت في مكانه المناسب: 13. نحدّد العناصر الثلاث من جانب الشكل ثلاثي الأبعاد معًا ثمّ نضغط على زرّ Unite من لوحة مستكشف المسارات. 14. نملأ الشكل بتدرّج قطري من الأبيض إلى الأسود كما موضّح في الصور أدناه: 15. لكي نملأ الكلاكيت بنفس اللون نستخدم أداة القطّارة (Eyedropper Tool (I، ونضغط على الشكل السابق لنسخ اللون. يمكننا تعديل اتّجاه التدرّج ومكانه باستخدام أداة التدرّج (Gradient Tool (G كما في الصورة أدناه: 16. نحدد الأشكال البيضاء ونملأها بتدرّج خطي من الأبيض إلى الرمادي: 17. نقوم برسم ثلاث أشكال بيضوية باستخدام (Ellipse Tool (L ونملأها بتدرّج قطري من الأبيض إلى الرمادي ونضعها في مكانها المناسب في وجه الكلاكيت كما موضّح في الصورة أدناه: وبذلك نكون قد انتهينا من عمل الكلاكيت. سنقوم الآن بعمل مكبّر صوت باللون الأحمر. 18. نقوم برسم الشكل الموضّح في الصورة أدناه باستخدام أداة القلم (Pen Tool (P. الشكل بسيط يمكن رسمه بالقليل من النقاط. لنتأكد فقط من إغلاق المسار بوضع النقطة الأخيرة فوق النقطة الأولى: 19. نذهب إلى القائمة: Effect > 3D > Revolve ونستخدم الإعدادات التالية: 20. نملأ الشكل بلون أحمر جميل ونذهب إلى القائمة: Object > Expand Appearance ثمّ إلى: Object > Ungroup نستمّر بفكّ المجموعات (Shift+Ctrl+G) إلى أن نحصل على أشكال منفصلة (إي يصبح الأمر Ungroup غير فعّال). نحدّد الأشكال المتبقّية (3 أو 4 اشكال) بينما نضغط على مفتاح Shift ونقوم بتحريكها باستخدام أسهم لوحة المفاتيح. بالإمكان حذف الأجزاء المتبقّية (في الجهة اليسرى) حيث لم نعد بحاجة إليها. بهذه الخطوة سنكون قد حصلنا على بنية بسيطة ومرتّبة للملف الخاص بنا. 21. نحدد الجزء السفلي من مكبّر الصوت ثم نضغط على زرّ Unite من لوحة مستكشف المسارات (Pathfinder Panel): 22. نكرّر الخطوة السابقة مع الأجزاء الأخرى. بعد ذلك نقوم برسم الشكل الموضّح أدناه (الشكل الأخضر) باستخدام أداة القلم (P). سيمثّل هذا الشكل شعاع ضوء على سطح مكبّر الصوت: 23. نحدّد الشكل السفلي من مكبّر الصوت ثم نقوم بنسخه (Ctrl+C) ثمّ نضغط على مفتاح Shift+ شكل الشعاع معًا ونضغط على زرّ Intersect من لوحة مستكشف المسارات. نضغط على مفتاحيّ Ctrl+B لوضعه خلف شكل الشعاع. نغيّر لون الشعاع إلى اللون الأحمر. نحدد الجزء السفلي للكلاكيت وشكل الشعاع معًا ونضغط Ctrl+Alt+B، ثمّ نذهب إلى القائمة: Object > Blend > Blend Options في نافذة الخيارات التي ستظهر نغيّر نوع المسافة (Spacing) إلى Specified Steps من القائمة المنسدلة، ثمّ نضع عدد الخطوات 40. 24. نقوم بتحديد الجزء العلوي من مكبّر الصوت ثم نملأه بتدرّج قطري من الأحمر إلى الأسود. يمكننا تغيير مركز واتجاه التدرّج باستخدام أداة التدرّج (G): 25. يمكننا الآن وضع الكلاكيت بالقرب من مكبّر الصوت. انتهى التصميم تقريبًا، لكن بقِي هنالك شيئًا مفقودًا في الصورة؛ الظلال! فبوجود الظلال تصبح الصورة أكثر واقعية. 26. نقوم بعمل نسخة من كل من الكلاكيت ومكبّر الصوت (Ctrl+ C ثم Ctrl+V). نحدد نسخة الكلاكيت ونضغط على زرّ Unite من لوحة مستكشف المسارات. نكرر هذه الخطوة مع نسخة مكبر الصوت أيضًا. أصبح لدينا الآن أشكال للظل، وكلّ ما علينا فعله هو محاذاتها بشكل صحيح وفي المكان الصحيح: 27. نقوم بوضع ظل الكلاكيت خلف شكل الكلاكيت (Ctrl+X، ثم نحدّد شكل الكلاكيت، ثم نضغط Ctrl+B). نذهب إلى القائمة: Object > Envelope Distort > Make it with Warp ونستخدم الاعدادات كما موضّحة في الصورة أدناه ثمّ نضغط OK. نذهب إلى: Object > Expand ثم نضغط OK. 28. نحدّد ظل مكبّر الصوت ثم نضعه فوق مكبّر الصوت. يتم تحريك الأشكال إلى الأمام أو الخلف عن طريق الاختصار (Ctrl+[) أو (Ctrl+]). يجب أن يكون الشكل الناتج كالتالي: 29. نحدد شكليّ الظلّين ونضغط على زرّ Intersect من لوحة مستكشف المسارات: 30. نملأ الشكل الناتج بتدرّج من الأبيض إلى الأسود. نغيّر الوضع إلى Multiply من لوحة الشفافية: Window > Transparency Panel 31. نقوم بالتعديل على اتجاه التدرّج لنحصل على الشكل في الصورة أدناه. وبذلك يكون الدرس قد انتهى بالفعل: ترجمة -وبتصرّف- للدّرس: Create a Clapperboard icon with Adobe Illustrator.