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

[الروند]

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

الأنعكاس
تشاهد في الكثير من الشعارات التصاميم عدة انعكاسات كأنها على سطح زجاجي
وتستخدم بالغالب في كتابة شعار الموقع او نهاية قائمة او في اي مكان تريده
كالتالي :-
http://filaty.com/i/903/83738/6.png

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

http://filaty.com/i/903/84254/1.png

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

http://filaty.com/i/903/36266/2.png

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

http://filaty.com/i/903/12612/3.png

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

http://filaty.com/i/903/21546/4.png

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

http://filaty.com/i/903/48771/5.png

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

http://filaty.com/i/903/83738/6.png

الشريط او الخلفية بالباترن
http://filaty.com/i/903/74164/1-3.png

طبعا نشاهد هذا التأثير بكثرة في الخلفيات او في الأشرطة اوفي القوائم او غيرها الكثير
طريقة عمله بسيطة جدا
قم بتحمل الباترن الذي يعجبك من احد هذه الراوبط
Candy Cane Pattern by ~blushing on deviantART (http://blushing.deviantart.com/art/Candy-Cane-Pattern-38510378)
Stripe Patterns by ~gojol23 on deviantART (http://gojol23.deviantart.com/art/Stripe-Patterns-56385053)
Stripes patter - set 01 by ~Shizuru117 on deviantART (http://shizuru117.deviantart.com/art/Stripes-patter-set-01-74177697)

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

http://filaty.com/i/903/56326/6-2.png

الأشرطة الزجاجية او الامعة
هذا التأثير في الصورة ادناه نشاهدة في الكثير والكثير من المواقع بألوان مختلفة واشكال مختلفة
سأقوم بشرح طريقتين لعمله
http://filaty.com/i/903/68141/3-2.png

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

http://filaty.com/i/903/42295/1-2.png

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

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

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

http://filaty.com/i/903/10479/4-2.png

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

http://filaty.com/i/903/30421/5-2.png

بعد ذلك قم بتخفيف ال Opacity الى 10 او 15 وسينتج لك نفس الشكل
الصورة النهائية :-
http://filaty.com/i/903/68141/3-2.png

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

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

http://filaty.com/i/903/12274/1-6.png

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

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

http://filaty.com/i/903/59263/1-4.png

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

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

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

http://filaty.com/i/903/27077/1-5.png

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


قم بالذهاب الى الأداة Rectangular Marquee Tool
وضع الـFeather كما بالصورة مثلا
http://filaty.com/i/903/19965/2-5.png

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

http://filaty.com/i/903/10235/3-5.png

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

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

http://filaty.com/i/903/11340/5-5.png

كنت اعتقد ان مثل هذا التأثير في الماضي صعب جدا ولكن حاولت ان اقوم بفعله فوجدت انه سهل جدا
قم ببساطة برسم لير بشكل مربع مثلا واذهب الى تنسيقات اللير وبالتحديد الى Stroke وانتبه الى مافي الصورة
http://filaty.com/i/903/85485/5-6.png

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

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

ملاحظات :-

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