الروند
09-03-2009, 01:08 AM
السلام عليكم
سأقوم في هذا الموضوع بوضع طريقة عمل بعض اللمسات الخاصة بتصميم المواقع
طبعا اقصد هنا التصاميم الهادئة وذات الطابع البسيط او مايقال عنها 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 بكسل فقط
حسناً قم الأن بتلوين اللير العلوي لون أغمق من لون الخلفية واللير الثاني لون افتح من لون الخلفية
هذه هي الطريقة بكل بساطة
حسنا ماذا لو اردنا استخدامها كقواطع بين القوائم كما استعملتها في هذا الستايل بالفوتر
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
او كما في هذه الصورة :-
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
كما تلاحظ هذا الخط متلاشي من اليمين واليسار
عندما ترى مثل هذا الشيء هل تتراود لك فكرة التلاشي كما فعلتها في الكلمة في أول الدرس ؟
نعم تستطيع فعل ذلك ولكن لدي طريقة افضل واسهل وأكبر دقة منها في هذا الشيء
قم بالذهاب الى الأداة Rectangular Marquee Tool
وضع الـFeather كما بالصورة مثلا
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
كلما زدت هذا العدد زادت نسبة الشفافية طبعا
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
قم بعد ذلك بتحديد الجانب الأيمن من اللير وحذف مابداخل التحديد بواسطة زر Delete فقط
وقم بتطبيق نفس الشيء على الجانب الأيسر لتلاحظ الفرق
الحدود المتلاشية
شاهد هذا التأثير كم هو جميل
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
كنت اعتقد ان مثل هذا التأثير في الماضي صعب جدا ولكن حاولت ان اقوم بفعله فوجدت انه سهل جدا
قم ببساطة برسم لير بشكل مربع مثلا واذهب الى تنسيقات اللير وبالتحديد الى Stroke وانتبه الى مافي الصورة
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
ربما تتسائل اين الجديد ؟؟
الجديد ياعزيزي انك ستقوم باستخدام Gradient وليس لون عادي
وهنا تكمن الخدعة
لنفترض ان الخلفية باللون #0f5c82
سنقوم بوضع تدرج الحد ( Stroke ) باللونين
#012638
#0f5c82
طبعا مع وضع نفس اللون على اللير ككل وهو نفس لون الخلفية #0f5c82
ستلاحظ ان هذا التأثير الجمل واضح وبدون اي مشاكل
اتمنى الأستفادة للجميع ...
ملاحظات :-
الطرق المتبعة بالأعلى ليست قياسية ولست ملزما بها يمكنك اتباع اي طرق اخرى لانجاز نفس العمل
اتبعت بالموضوع شرح الفكرة وليس شرح الأدوات بالكامل ماعدا المتقدمة منها على الاقل بالنسبة للفئة المستهدفة من الموضوع
اذا كان لديك اي اضافة للموضوع يمكنك وضعها وأفادة الجميع بها
النقل مسموح طبعا وفق قواعد النقل السليمة ...
تحياتي للجميع
سأقوم في هذا الموضوع بوضع طريقة عمل بعض اللمسات الخاصة بتصميم المواقع
طبعا اقصد هنا التصاميم الهادئة وذات الطابع البسيط او مايقال عنها 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 بكسل فقط
حسناً قم الأن بتلوين اللير العلوي لون أغمق من لون الخلفية واللير الثاني لون افتح من لون الخلفية
هذه هي الطريقة بكل بساطة
حسنا ماذا لو اردنا استخدامها كقواطع بين القوائم كما استعملتها في هذا الستايل بالفوتر
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
او كما في هذه الصورة :-
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
كما تلاحظ هذا الخط متلاشي من اليمين واليسار
عندما ترى مثل هذا الشيء هل تتراود لك فكرة التلاشي كما فعلتها في الكلمة في أول الدرس ؟
نعم تستطيع فعل ذلك ولكن لدي طريقة افضل واسهل وأكبر دقة منها في هذا الشيء
قم بالذهاب الى الأداة Rectangular Marquee Tool
وضع الـFeather كما بالصورة مثلا
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
كلما زدت هذا العدد زادت نسبة الشفافية طبعا
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
قم بعد ذلك بتحديد الجانب الأيمن من اللير وحذف مابداخل التحديد بواسطة زر Delete فقط
وقم بتطبيق نفس الشيء على الجانب الأيسر لتلاحظ الفرق
الحدود المتلاشية
شاهد هذا التأثير كم هو جميل
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
كنت اعتقد ان مثل هذا التأثير في الماضي صعب جدا ولكن حاولت ان اقوم بفعله فوجدت انه سهل جدا
قم ببساطة برسم لير بشكل مربع مثلا واذهب الى تنسيقات اللير وبالتحديد الى Stroke وانتبه الى مافي الصورة
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
ربما تتسائل اين الجديد ؟؟
الجديد ياعزيزي انك ستقوم باستخدام Gradient وليس لون عادي
وهنا تكمن الخدعة
لنفترض ان الخلفية باللون #0f5c82
سنقوم بوضع تدرج الحد ( Stroke ) باللونين
#012638
#0f5c82
طبعا مع وضع نفس اللون على اللير ككل وهو نفس لون الخلفية #0f5c82
ستلاحظ ان هذا التأثير الجمل واضح وبدون اي مشاكل
اتمنى الأستفادة للجميع ...
ملاحظات :-
الطرق المتبعة بالأعلى ليست قياسية ولست ملزما بها يمكنك اتباع اي طرق اخرى لانجاز نفس العمل
اتبعت بالموضوع شرح الفكرة وليس شرح الأدوات بالكامل ماعدا المتقدمة منها على الاقل بالنسبة للفئة المستهدفة من الموضوع
اذا كان لديك اي اضافة للموضوع يمكنك وضعها وأفادة الجميع بها
النقل مسموح طبعا وفق قواعد النقل السليمة ...
تحياتي للجميع