لوحة المتصدرين

تظهر على الدوام توجهات مُختلفة للتصميم والتي تُطلقها وتقف خلفها الشركات الكبيرة المؤثرة على الأسواق، وتُعدّ تقنيّة التصميم بالظل الطويل "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 #). النتيجة النهائية للعمل

وفّر برنامج Photoshop منذ بداياته آليات وإضافات مُهمّة في مجال التعامل مع الصور، وقد تطورت تلك الإضافات بتطور البرنامج. سنتناول في درسنا أحد أهم الإضافات التي توفرت في النسخة الأخيرة Photoshop CC وتُدعى إضافة Perspective Warp وهي تعمل بشكل أساسي على تعديل منظور الصور بشكل سحري سريع. العديد من الصور المُلتقطة (أبنية – سيارات – طرق – مُجسمات مُختلفة ...) قد تحوي تشوهات واضحة -عند التصوير- في زوايا الأجسام الظاهرة داخلها قد تحتاج لإصلاحها، أو على الأقل قد تحتاج لتعديل الزوايا لإخراجها من منظور مُناسب بشكل أفضل، أيضًا قد تحتاج إلى دمج صورتين ليست لهما نفس زاوية التصوير وبالتالي تسعى إلى تعديل منظور (اعوجاج) إحدى الصور وتركيبها بشكل مُتناسق مع الصورة الأخرى. أمثلة تطبيقية أولًا: مُتطلبات التطبيق1- أحدث نسخة من برنامج Photoshop وهو الإصدار Photoshop CC أو ما سيأتي بعده لاحقًا. 2- سنبدأ بالتطبيق العملي باستخدام إحدى الصور المجانية والتي بإمكانك تحميلها باستخدام الرابط التالي: start_photoshop_perspective-warp.zip ثانيًا: مراحل التطبيق1- نفتح الصورة المُرفقة باستخدام برنامج Photoshop CC من خلال استدعائها باتباع File ثُم Open (بالإمكان الاستعانة بالاختصار Ctrl + O). 2- نتوجّه إلى نافذة الطبقات Layers ونعمل على نسخ الصورة بطريقة السحب والإسقاط من خلال اتباع ما هو موضّح: 3- سنعمل الآن على اختيار الأداة Perspective Warp التي سنستخدمها بتطبيقنا والتي سنصل إليها من خلال التبويب Edit ثُم اختيار Perspective Warp. سيظهر لدينا مُخطط شبكي بالإمكان التحكم بتشكيله ببساطة عبر الضغط والسحب على أي نقطة من زواياه أو سحب أي من أضلاعه ليتم تشكيله كما نرغب مع الاستعانة بإبقاء الضغط على زر Shift مع السحب بالفأرة (الأمر يحتاج لتدريب بسيط فقط). 4- عملنا الأساسي سيكون بتعديل منظور البناء الواضح بالصورة المُختارة حيث سنقوم بالتطبيق عبر الأداة وفق المراحل الرئيسية التالية: - يجب تحديد محور للبناء المُراد تعديل منظور الرؤية فيه (لاحظ الشكل) - سنبدأ بتحديد الشبكة وفق أحد طرفي البناء بحسب ما قسمها المحور الوهمي - نأتي الآن إلى نقطة هامّة للغاية وهي توزيع المُخطط الشبكي بشكل مُتوازي مع أحرف جزء البناء الذي بدأنا به "مع وضع أحد أضلاع المُخطط على محور العمل الوهمي" - بنفس المبدأ السابق تمامًا سنعمل على إنشاء مُخطط شبكي جديد يبدأ من المحور الوهمي وللطرف المُقابل من الصورة ونعمل على توجيه خطوطه بحيث توازي الشكل كما هو مُوضّح بالصورة - شرح الأزرار الخاصة بالأداة Perspective Warp - سنقوم خلال المرحلة الحالية بالتبديل والضغط على زر Wrap بعد أن كان مُحدّد افتراضيًا على Layout. - ثُم سنضغط على زر المُطابقة العمودية بحسب ما هو موضّح في الصورة - سنقوم بالضغط بالفأرة على نقطة رأس المحور وتحريك الرسم مع إبقاء الضغط على الفأرة كما هو موضّح في الصورة أدناه "العملية الحالية ستجعلنا نتحكم ببساطة بإزاحة الرسم بالانطلاق من المحور نحو اليمين ونحو اليسار" - في المرحلة الحالية ذات الأهمية البالغة سنقوم بالضغط على الزر Shift مع تحديد المحور "سيظهر المحور باللون الأصفر" - سنقوم بتغيير منظور البناء من خلال الضغط على إحدى نقاط المحور وإزاحتها نحو اليمين أو اليسار أو الأعلى أو الأسفل طبقًا للنتيجة المطلوبة - بعد الانتهاء من تعديل منظور البناء وفق الشكل المطلوب نقوم بالضغط على زر تأكيد الموافقة على العمل لتثبيت النتيجة النتيجة النهائية للتطبيق قبل وبعد

سنتعلم في هذا الدرس كيفية تصميم موقع بطريقة Parallax Scrolling من الصفر حتى النهاية، وذلك باستعمال برنامج Photoshop. في درسنا هذ سيكون القالب بخصوص وكالة مختصة في الويب (Web Agency). وهذه هي النتيجة النهائية: قبل البدء أدعوكم لتحميل هذه الحزمة. نفتح مشروع جديد على Photoshop بالإعدادات التالية: 1800x4850pixelsResolution 720DpiColor Mode RVB8bitللحصول على الدقة أثناء التحويل من PSD على HTML علينا استعمال الأسطر الدلالية (Guides Lines) ليسهل التعامل بـ CSS. نضيف العلامات الافقية الذهاب إلى: Menu > View > New Guide نختار Horizontal ثم ندخل القيم التالية: 59px ،651px ،1431px ،2237px ،2613px ،3154px ،3939px ،4767px نبدأ بالقائمة في الأعلى – يسمى الجزء العلوي: header-. نأخذ أداة النص (T) ونكتب مختلف عناصر القائمة باستعمال "Open sans" كنوع للخط و13pt في حجمه (تجده في حزمة هذا الدرس). بعدة ذلك اجلب أيقونة الموقع خاصتك، في هذا الدرس سنستعمل كلمة Awesome Agency ملونة باللون الأزرق 00b3e3#. الآن نضيف للمشروع صورة من الحجم الكبير بين العلامتين الأولى والثانية. نضيف مستطيل أسود اللون باستعمال أداة الشكل الرباعي (U). نخفض قيمة الشفافية الخاصة بالمربع إلى قيمة %71. بعد ذلك نرسم مستطيل آخر بمحتوى شفاف وإطار باللون # 617b9b. ننشئ طبقة جديدة New Layer بالضغط على Ctr+Shift+N، وبأداة القلم (P) بقيمة 1px في عرض الخط، نرسم زوايا كما تبين الصورة-للحصول على خط مستقسم يكفي النقر بالفأرة في مكان بدأ الخط ثم في مكان نهاية الخط مع النقر على زر Shift في لوحة المفاتيح وبهذا يرسم خط مستقسم الشكل بين النقطتين -: ثم نرسم مستطيل أبيض اللون كهذا. نطبق عليه – المستطيل الأبيض-Filter Motion Blur وذلك بالذهاب إلى: Menu > Filter > Blur > Motion Blur نرسم مستطيل آخر ونطبق عليه نفس الفلتر، ثم نرسم دوائر بأداة الدائرة Ellipse Tool (U) للحصول على الشكل التالي: أضف الآن النص الخاص بك (النص المستعمل في الدرس مجرد مثال بسيط، والذي سيعوض بمحتوى في HTML) بالنسبة الجزء الثالث، اجلب الأيقونات المحملة في الحزمة أول الدرس كما تبين الصورة: بالطريقة ذاتها أضف النص الخاص بك باستعمال نفس الخط «Open Sans» -ينصح الويب عدم استعمال كثرة الخطوط لتفادي بطء الخوادم Servers- نمر للجزء الرابع، نأخذ أداة المستطيل ونرسم مستطيل أزرق اللون # 32bcef باتباع العلامات -Guides-. بعد ذلك نتجه إلى خصائص الدمج Blending Options: ثم نرسم مستطيل آخر بشعاع ذو قيمة 5px ولون أزرق غامق #0c1a2d. أضف أيقونة الموقع أو أي شيء تريد، في الدرس أضفنا نفس الأيقونة السابقة وشكل المتجاوب للموقع. ثم نضي فنص رمادي فاتح وغامق للعناوين كما تبين الصورة. سنصمم الآن معرض للأعمال-Portfolio – المندرج في صفحتنا هاته، أضف الصور الخاصة بك. أرسم على صورة معية مستطيل أزرق #32bcef . بعد ذلك نرسم مستطيل آخر أبيض اللون بنفس مقاس الصورة، ثم نخفض قيمة الشفافية -opacity-خاصته إلى قيمة 65% . وللانتهاء من هذا الجزء، أضف نصا كما في الصورة: في الجزء الخامس، وبنفس الطريقة نرسم مستطيل أبيض اللون بإطار رماديcacaca #. دائما بأداة الشكل المربع نرسم في الأسفل مستطيل أزرق اللون #36caf4. بعد ذلك نتجه إلى خصائص الدمج Blending Options: نغير من طول المستطيل الأزرق حتى يتناسب مع طول المستطيل الأبيض: أضف أيقونات المواقع الاجتماعية: بعد ذلك أضف النص الخاص بك وصورة –في هذا المثال وضعنا صور العاملين في وكالتنا-: بنفس الطريقة نضيف مستطيلات ونصوص أخرى حتى نتوصل إلى النتيجة المحصل عليها: الآن، قم بجلب صورة وضعها في الأسفل –هذا الجزء من الصفحة يسمى ب footer – ونطبق عليه نفس خطوات الجزء الثاني للحصول على صورة ذات إضاءة خفيفة. ونضيف بعض الكلمات وبعض الأيقونات بالشكل التالي: لرسم استمارة -Form-للتواصل بالموقع نرسم أربع مستطيلات بمحتوى شفاف وإطار أبيض ذو عرض 1-2 pixels: ثم نضيف مربع أزرق #3ec1f1 ذو زوايا دائرية مع بعض الكلمات التي تشير إلى الحقول وزر الإرسال: وفي الأخير نضيق في الأسف مستطيل باللون #1e1e1e، بغرض الصفحة يحتوي على نص وأيقونة تشير لحقوق الملكية. لنحصل في الأخير على الصورة النهائية: ترجمة -وبتصرّف- للمقال: Tutoriel comment faire un Design Responsive en Parallaxe Scrolling.