لمسات صغيرة لتصاميم ويب أفضل ...
السلام عليكم
سأقوم في هذا الموضوع بوضع طريقة عمل بعض اللمسات الخاصة بتصميم المواقع
طبعا اقصد هنا التصاميم الهادئة وذات الطابع البسيط او مايقال عنها 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.swalif.net/softs/swalif43/softs256948/
او كما في هذه الصورة :-
كما تلاحظ هذا الخط متلاشي من اليمين واليسار
عندما ترى مثل هذا الشيء هل تتراود لك فكرة التلاشي كما فعلتها في الكلمة في أول الدرس ؟
نعم تستطيع فعل ذلك ولكن لدي طريقة افضل واسهل وأكبر دقة منها في هذا الشيء
قم بالذهاب الى الأداة Rectangular Marquee Tool
وضع الـFeather كما بالصورة مثلا
كلما زدت هذا العدد زادت نسبة الشفافية طبعا
قم بعد ذلك بتحديد الجانب الأيمن من اللير وحذف مابداخل التحديد بواسطة زر Delete فقط
وقم بتطبيق نفس الشيء على الجانب الأيسر لتلاحظ الفرقشاهد هذا التأثير كم هو جميل
- الحدود المتلاشية
كنت اعتقد ان مثل هذا التأثير في الماضي صعب جدا ولكن حاولت ان اقوم بفعله فوجدت انه سهل جدا
قم ببساطة برسم لير بشكل مربع مثلا واذهب الى تنسيقات اللير وبالتحديد الى Stroke وانتبه الى مافي الصورة
ربما تتسائل اين الجديد ؟؟
الجديد ياعزيزي انك ستقوم باستخدام Gradient وليس لون عادي
وهنا تكمن الخدعة
لنفترض ان الخلفية باللون #0f5c82
سنقوم بوضع تدرج الحد ( Stroke ) باللونين
#012638
#0f5c82
طبعا مع وضع نفس اللون على اللير ككل وهو نفس لون الخلفية #0f5c82
ستلاحظ ان هذا التأثير الجمل واضح وبدون اي مشاكل
اتمنى الأستفادة للجميع ...
ملاحظات :-تحياتي للجميع
- الطرق المتبعة بالأعلى ليست قياسية ولست ملزما بها يمكنك اتباع اي طرق اخرى لانجاز نفس العمل
- اتبعت بالموضوع شرح الفكرة وليس شرح الأدوات بالكامل ماعدا المتقدمة منها على الاقل بالنسبة للفئة المستهدفة من الموضوع
- اذا كان لديك اي اضافة للموضوع يمكنك وضعها وأفادة الجميع بها
- النقل مسموح طبعا وفق قواعد النقل السليمة ...
المشاركة الأصلية كتبت بواسطة PHP-Master02 
.. 
