للمحترفين : تصميم مكبر صوت SpeakerBox

[كينج نت]

بســـ الله الرحمن الرحيم ــــم
السلام عليكم ورحمة الله وبركاته

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

http://www.abc4web.net/vb/imgcache/5621.abc4web.jpg

الآن نتوكل على الله ونبدأ وإياكم هذا الشرح للتطبيق
يمكن التطبيق على أي إصدار من إصدارات البرنامج
ملاحظة : معظم الصور بالتطبيق متحركة فيرجى الانتباه


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

http://www.abc4web.net/vb/imgcache/5622.abc4web.gif

نقوم بإنشاء طبقة جديدة ونطلق عليها أسم مركز ثم باستخدام
أداة التحديد الدائرية Elliptical Marquee Tool
نقوم برسم دائرة متوازية بحجم Px 140 Px 140
منتصف صفحة العمل كما نلاحظ بالشكل التالي

http://www.abc4web.net/vb/imgcache/5623.abc4web.gif

بعد أن قمنا برسم الدائرة نملأ الدائرة بالون Color 1E2F29
ونطبق عليها المؤثرات التالية بنفس القيم الموضحة بالشكل التالي

http://www.abc4web.net/vb/imgcache/5624.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/5625.abc4web.gif

بعد رسم الدوائر نطبق عليها فلتر Filter > Blur > Gaussian Blur
بقيمة 10 كما يوضح لنا الشكل التالي

http://www.abc4web.net/vb/imgcache/5626.abc4web.gif

الآن نضغط مفتاح Ctrl ودبل كليك على طبقة مركز ليتم تحديدها
بعد ذلك نقوم بإنشاء طبقة جديدة أعلى طبقة لمعة المركز
ونطلق عليها أسم حلقة مركز وبأي مكان ضمن التحديد
نضغط بزر الماوس الأيمن ونختار Stroke
ونطبق ماهوى موضح بالشكل التالي

http://www.abc4web.net/vb/imgcache/5627.abc4web.gif

بعد ذلك نطبق على طبقة حلقة مركز المؤثرات التالية
بالقيم والإعدادات الموضحة بالشكل التالي

http://www.abc4web.net/vb/imgcache/5628.abc4web.gif

الآن نقوم بإنشاء طبقة جديدة أسفل طبقة مركز ونطلق عليها
أسم محور مركز ثم نعود مجدداً لأداة التحديد الدائرية ونعمل تحديد
بمقاس Px 280 Px 280 كما يوضح لنا الشكل التالي

http://www.abc4web.net/vb/imgcache/5629.abc4web.gif

بعد إنشاء التحديد نملأ التحديد بالون Color 425D54
ونطبق المؤثر الموضح بالشكل التالي
بنفس القيم والإعدادات الموضحة بالشكل

http://www.abc4web.net/vb/imgcache/5630.abc4web.gif



.

[كينج نت]

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

http://www.abc4web.net/vb/imgcache/5631.abc4web.gif

الآن نقوم باختيار أداة الممحاة Eraser Tool
ونختار ممحاة متدرجة وليس حادة ثم نقوم بحذف المناطق المحددة
بالشكل التالي بضغطة واحدة فقط

http://www.abc4web.net/vb/imgcache/5632.abc4web.gif

نتابع عملية حذف الجوانب في الناحية المقابلة
كما هي موضحة بالشكل التالي

http://www.abc4web.net/vb/imgcache/5633.abc4web.gif

بعد الانتهاء من حذف المناطق الذي أشرنا لها نغير شفافية الطبقة
لنسبة Opacity 30% لنحصل على الشكل التالي

http://www.abc4web.net/vb/imgcache/5634.abc4web.gif

الآن نقوم بإنشاء طبقة جديدة أعلى طبقة محور مركز
ونطلق عليها اسم 1 ثم باستخدام أداة التحديد المربعة
Rectangular Marquee Tool
نقوم بإنشاء تحديد مشابه للتحديد الموضح بالشكل التالي
ونملأ التحديد بالون الأبيض

http://www.abc4web.net/vb/imgcache/5635.abc4web.gif

بعد ذلك نقوم بالضغط على Ctrl + T
ليتم تحديد الشكل وبأي مكان ضمن التحديد نضغط
بزر الماوس الأيمن ونختار منظور Perspective
ثم نقوم بعمل منظور للشكل كما يوضح لنا الشكل التالي

http://www.abc4web.net/vb/imgcache/5636.abc4web.gif

بعد ذلك نذهب لقائمة الفلاتر ونطبق فلتر
Filter > Blur > Gaussian Blur
بقيمة 22 لينتج لدينا الشكل التالي

http://www.abc4web.net/vb/imgcache/5637.abc4web.gif

الآن نكرر العملية ننشئ طبقة جديدة ونطلق عليها أسم 2
باستخدام أداة التحديد المربعة نقوم بعمل تحديد
بالجهة المقابلة للتحديد السابق ولكن بحجم أكبر
بعض الشيء من التحديد السابق ونملأ التحديد بالون الأبيض
ونقوم بعمل منظور للشكل ونطبق نفس الفلتر بنفس القيمة
وكذلك نقوم بما فعلناه من مقبل مع الناحية السفلية
ولكن بتحديد صغير وقيمة أقل
والشكل التالي يوضح لنا بشكل أكبر

http://www.abc4web.net/vb/imgcache/5638.abc4web.gif

من المفترض الآن أن يكون أصبح لديك (3) طبقات للتوهج
1 و 2 و 3 نقوم بدمج الثلاث طبقات بطبقة واحدة
ونطلق عليها أسم توهج محور كما يوضح لنا الشكل التالي

http://www.abc4web.net/vb/imgcache/5639.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/5640.abc4web.gif

مجدداً نقوم بإنشاء طبقة جديدة أسفل طبقة محور مركز
ونطلق عليها أسم صحن محور ثم باستخدام أداة التحديد الدائري
Elliptical Marquee Tool
نقوم بعمل تحديد بمقاس Px 304 Px 304

http://www.abc4web.net/vb/imgcache/5641.abc4web.gif



.

[كينج نت]

بعد إنشاء التحديد بالمقاسات الذي سبق توضيحها نقوم
بملأ التحديد بالون الموضح بالشكل التالي

http://www.abc4web.net/vb/imgcache/5642.abc4web.gif

بعد ذلك نذهب لقائمة الفلاتر ونطبق الفلتر الموضح بالشكل
التالي بنفس القيم والإعداد الموضحة بالشكل

http://www.abc4web.net/vb/imgcache/5643.abc4web.gif

بعد تطبيق الفلتر نطبق المؤثرات التالية على الشكل
كما يوضحها لنا الشكل التالي بقيمها وخياراتها المطلوبة للشكل

http://www.abc4web.net/vb/imgcache/5644.abc4web.gif

مجدداً ننشئ طبقة جديدة أسفل طبقة صحن محور ونطلق عليها
أسم خلفية محور وكما في السابق باستخدام أداة التحديد الدائرية
نقوم بعمل تحديد بقيمة Px 382 Px 382
ونملأ التحديد بالون Color 13221D
كما يوضح لنا الشكل التالي بشكل أكثر

http://www.abc4web.net/vb/imgcache/5645.abc4web.gif

مجدداً نقوم بإنشاء طبقة جديدة أعلى طبقة خلفية محور ونطلق عليها
أسم حلقة ثم باستخدام أداة التحديد الدائرية نقوم بعمل تحديد
بمقاس Px 340 Px 340 ونملأ التحديد بالون Color 445852
كما بالشكل التالي

http://www.abc4web.net/vb/imgcache/5646.abc4web.gif

ثم مرة أخره باستخدام أداة التحديد الدائرية نقوم بعمل تحديد
بمقاس Px 298 Px 298 ونضغط مفتاح Delete
من لوحة المفاتيح ليتم حذف القسم الغير مرغوب بالتحديد
كما يبين لنا الشكل التوضيحي التالي

http://www.abc4web.net/vb/imgcache/5647.abc4web.gif

بعد ذلك نقوم بتطبيق المؤثرات التالية على الطبقة حلقة
بنفس القيم والإعدادات الموضحة بالشكل التالي

http://www.abc4web.net/vb/imgcache/5648.abc4web.gif

الآن نقوم كذلك بإنشاء طبقة جديدة أسفل طبقة حلقة ونطلق عليها
أسم ضل حلقة ثم باستخدام أداة التحديد الدائرية نقوم بعمل تحديد
بمقاس Px 350 Px 350 ونملأ التحديد بالون الأسود
كما ننقص شفافية الطبقة لنسبة %85 Opacity
كما هوى موضح بالشكل التالي

http://www.abc4web.net/vb/imgcache/5649.abc4web.gif

بعد ذلك ننشئ طبقة جديدة أعلى طبقة خلفية محور ونطلق عليها
أسم مقبض ثم باستخدام أداة التحديد Rounded Rectangle Tool
نقوم بعمل تحديد بيضوي بدرجة التفاف Px 10
بالون الأبيض كما يوضح لنا الشكل التالي
مكان توضع الشكل والحجم المطلوب

http://www.abc4web.net/vb/imgcache/5650.abc4web.gif

بعد ذلك نقوم بعمل مضاعفة للطبقة من خلال الضغط على
مفتاح Ctrl + J ونسحب الطبقة المضاعفة للناحية المقابلة
بعدها ندمج الطبقتان معاً ثم نعمل للطبقة المدمجة مضاعفة
ونعمل لها دوران بنسبة 90 درجة كذلك نقوم بدمج الطبقتين
ونعمل مضاعفة للطبقة المدمجة ولكن هذه المرة نجعل
نسبة الدوران 45 درجة ثم ندمج الطبقتين بطبقة واحدة
ونعيد تسميتها مقبض والشكل التالي يوضح لنا المطلوب

http://www.abc4web.net/vb/imgcache/5651.abc4web.gif



.

[كينج نت]

الآن من خلال الضغط على مفتاح Ctrl + J
نقوم بمضاعفة طبقة خلفية محور
ونعيد تسميتها لأسم خلفية مقبض كما يوضح لنا الشكل التالي

http://www.abc4web.net/vb/imgcache/5652.abc4web.gif

كذلك نعيد تحديد الشكل ونملأه بالون Color 2A3732
كما يبين لنا الشكل التالي

http://www.abc4web.net/vb/imgcache/5653.abc4web.gif

مره أخره نعود لأداة التحديد الدائري ونعمل تحديد
بمقاس Px 350 Px 350ونضغط Delete من لوحة المفاتيح
ليتم حذف الجزء الغير مرغوب بوجوده والشكل التالي للتوضيح

http://www.abc4web.net/vb/imgcache/5654.abc4web.gif

بعد تطبيق الخطوة السابقة نقوم بإضافة المؤثرات التالية على
الشكل بنفس القيم والإعدادات المبينة بالشكل التالي

http://www.abc4web.net/vb/imgcache/5655.abc4web.gif

الآن نضغط مفتاح Ctrl ثم دبل كليك على طبقة مقبض
ليتم تحديدها ثم نخفي الطبقة من خلال إزالة إشارة العين
من على جانب الطبقة بعدها نفعل طبقة خلفية مقبض
طبعاً مع التنويه لأن تحديد طبقة مقبض مازال موجود
ثم نقوم بالضغط على مفتاح Delete من لوحة المفاتيح
لينتج لدينا الشكل التالي مع التنويه لأنه يمكنك حذف طبقة مقبض
بعد إتمام العملية لأننا لم نعد بحاجة لها ولكن مايظر
لو تركتها مخفية للرجوع لها بحال حدوث إي خطأ

http://www.abc4web.net/vb/imgcache/5656.abc4web.gif

الآن نقم بإنشاء طبقة جديدة أعلى طبقة خلفية مقبض ونطلق عليها
أسم برغي ثم باستخدام أداة التحديد الدائرية نقوم بعمل تحديد
بمقاس Px 12 Px 12
ونملأ التحديد بالون الأبيض كما يوضح لنا الشكل التالي

http://www.abc4web.net/vb/imgcache/5657.abc4web.gif

بعد ذلك نقوم بتطبيق المؤثرات التالية على طبقة برغي
بنفس القيم والإعدادات المبينة بالشكل التالي

http://www.abc4web.net/vb/imgcache/5658.abc4web.gif

بعدها ننشئ طبقة جديدة أعلى طبقة برغي ونطلق عليها
أسم حفرة برغي ثم باستخدام أداة التحديد المربعة
Rectangular Marquee Tool
نقوم بعمل تحديد عمودي وآخر أفقي بالون الأبيض
مقارب للتحديد المبين بالشكل التالي ونطبق عليه
كذلك المؤثر الموضح بالشكل بنفس القيم والإعدادات المبينة

http://www.abc4web.net/vb/imgcache/5659.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/5660.abc4web.jpg

في نهاية هذا الشرح الطويل قد يقول قائل ولما كل هذا التعب
لتصميم هذا الشكل وبالإمكان الحصول على شكل مشابه له
بسهولة من أي مجموعة أيقونات مثلاً
فأقول لمن يتساءل هذا السؤال أنت محق عزيزي
ولكن لحظة لو سمحة ؟؟؟؟؟
نحن لآ نشرح التطبيق أو أي درس كان لتطبيق هذا الشكل أو ذاك
أو حتى تطبيق الشكل الذي تم تطبيقه ضمن الشرح الذي طرح
ولكن نشرح لاكتساب الخبرات والمهارات بالبرنامج
فتصور بدرس طويل مثل هذا فهل يعقل
بأنك لم تكتسب أي معلومة أو فائدة
يمكنك استخدامها بتطبيقاتك ومشاريعك بالبرنامج
أخيراً أشكر لكم حسن المتابعة وأسأل المولى أن ينفع بنا وإياكم المسلمين
وإلا أن ألقاكم بدرس قادم وتطبيق جديد لكم مني خالص الشكر والتقدير
مع تحيات موقع طريق الاحتراف (www.abc4web.net)

http://www.abc4web.net/vb/imgcache/5661.abc4web.jpg


.

[abohmam]

بسم الله الرحمن الرحيم

:teslam:

شرح رائع أخى وليد بارك الله فيك

هكذا تغيب وترجع لنا بالروائع

جارى الإطلاع والإستفادة والتطبيق إن شاء الله

لك مني أجمل تحية .

[أبو يوسف]

أجزل الشكر لك اخي وليد على هذا الشرح المتأني الرائع

تحياتي لك

.

[كينج نت]

السلام عليكم ورحمة الله وبركاته

حياكم الله احبائي جميعاً

اشكر لكم مروركم الجميل وتواصلكم العطر بالتوفيق

.

[رائد ابو فيصل]

بارك الله فيك


ساحاول التطبيق في وقت لاحق

[أبوالبراء]

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

[الهمام]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أبوبكر صديق]

موفق بإذن الله ... لك مني أجمل تحية .

[أبو الوليد]

بارك الله فيك ..درس ممتاز وتطبيق جديد

[أبو صخر]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .