[درس] لمسات صغيرة لتصاميم ويب أفضل ...

[الروند]

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

• الأنعكاس

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


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



الخطوة الثانية قم بعمل تكرار للير الكلمة عن طريق القائمة
Layer >> Duplicate layers
ومن ثم قم بانزالها اسفل الكلمة الأولى وقلبها كالتالي :-
Edit >> transform >> Flip Horizontal
لتظهر لك كالتالي :-



الخطوة الثالثة وهي أضافة الماسك
قم بأضافة ماسك للير الثاني أو السفلي كما بالصورة التالية:-



بعد ذلك قم باختيار اداة Gradient tool واختار اللون الأبيض والسود كما هو بالصورة



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



النتيجة النهائية :-

• الشريط او الخلفية بالباترن

طبعا نشاهد هذا التأثير بكثرة في الخلفيات او في الأشرطة اوفي القوائم او غيرها الكثير
طريقة عمله بسيطة جدا
قم بتحمل الباترن الذي يعجبك من احد هذه الراوبط
Candy Cane Pattern by ~blushing on deviantART
Stripe Patterns by ~gojol23 on deviantART
Stripes patter - set 01 by ~Shizuru117 on deviantART

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

• الأشرطة الزجاجية او الامعة

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


الطريقة الاولى
قم برسم شريط عادي جدا بواسطة ادارج لير جديد وتحديد مساحة وتعبئتها بأي لون تريدة
وبعد ذلك اذهب الى خصائص هذه الطبقة وبالتحديد الى Gradient Overlay



قم بتجربة وضع الألوان التي قمت بوضع أكوادها بالصورة السابقة ماذا تلاحظ ؟
لونين رئيسيين ولونين فاتحين لكن لنفس اللونين السابقين
قم بتطبيق ذلك على الللون #a80077 مثلا

بعد ذلك سننتقل الى الخطوة المهمة وهي جمع اللونين الثانويين معها ولكن بفارق 1 فقط


قم بوضع ال Locathion كما في الصورة السابقة
اللون #0a0f0b سيكون 50
واللون #6d7673 سيكون 51
او يمكنك وضع 49 و 50 المهم ان تبقى الفارق واحدا لتشاهد ذلك التأثير
-----------------------
الطريقة الثانية :-
هذه الطريقة تعتمد على وضع لير بلون ابيض وتخفيف درجة الـ Opacity
قم باختيار لون واحد رئيسي ولكن بدرجة غامقة وأخرى فاتحة كما بالصورة التالية



بعد ذلك قم بوضع لير جديد وتحديد النصف الأعلى ووضع اللون الأبيض عليه



بعد ذلك قم بتخفيف ال Opacity الى 10 او 15 وسينتج لك نفس الشكل
الصورة النهائية :-


أنصح بتطبيق الطريقة الأولى فهي أفضل بالتأثير .

• تدرج الباترن المتلاشي

بكل تأكيد مر عليك مثل هذا التأثير في الكثير من المواقع بأختلاف اللون والشكل والحجم
لديك مثلا موقع filaty.com يستعملها في الهيدر لديه
كل ماعليك فعله هو رسم باترن بخطوط افقيه وتطبيقة في اللير المطلوب ومن ثم تطبيق الخطوة الأولى من الدرس وهي الأنعكاس ليخرج لك الشكل التالي :-



لاحظ انك تستطيع دمج كل هذه الأشياء معا لاخراج عمل متكامل وجميل !

• الخط القاطع المحفور

بكل تأكيد مر عليك هذا التأثير البسيط في الكثير من المواقع



طريقة الحفر هذه بسيطة ايضا
كل ماعليك فعله هو رسم خط افقي بواسطة بواسطة أداة Line Tool
ومن قم بعمل بعمل Duplicate layers
Layer >> Duplicate layers
وأنزل اللير الثاني بضغطة زا واحدة على السهم السفي بالكيبورد بمعنى انك ستنزل الخط الثاني 1 بكسل فقط

حسناً قم الأن بتلوين اللير العلوي لون أغمق من لون الخلفية واللير الثاني لون افتح من لون الخلفية
هذه هي الطريقة بكل بساطة

حسنا ماذا لو اردنا استخدامها كقواطع بين القوائم كما استعملتها في هذا الستايل بالفوتر
http://www.traidnt.net/vb/showthread.php?t=1139939
او كما في هذه الصورة :-



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


قم بالذهاب الى الأداة Rectangular Marquee Tool
وضع الـFeather كما بالصورة مثلا


كلما زدت هذا العدد زادت نسبة الشفافية طبعا



قم بعد ذلك بتحديد الجانب الأيمن من اللير وحذف مابداخل التحديد بواسطة زر Delete فقط
وقم بتطبيق نفس الشيء على الجانب الأيسر لتلاحظ الفرق

• الحدود المتلاشية

شاهد هذا التأثير كم هو جميل



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


ربما تتسائل اين الجديد ؟؟
الجديد ياعزيزي انك ستقوم باستخدام Gradient وليس لون عادي
وهنا تكمن الخدعة
لنفترض ان الخلفية باللون #0f5c82
سنقوم بوضع تدرج الحد ( Stroke ) باللونين
#012638
#0f5c82
طبعا مع وضع نفس اللون على اللير ككل وهو نفس لون الخلفية #0f5c82
ستلاحظ ان هذا التأثير الجمل واضح وبدون اي مشاكل

اتمنى الأستفادة للجميع ...

ملاحظات :-

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

تحياتي للجميع