إختر درسك القادم !!! تطبيقات دروس فوتشوب لتصميم واجهات المواقع الإحترافية

[abohmam]

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

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

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

حياكم الله جميعا

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

وبعد فترة من التوقف نعود مجددا لنبدا المزيد من التطبقات لواجهات المواقع وكل مايحتاج اليه المصمم ليستطيع أن يصمم واجهة إحترافية لموقعه الشخصي أو كواجهة إسطوانة " تجميعة "

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

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

ونرجوا من المشتركين أو الذين سيتابعون الدروس مراعاة الآتي :

1- متابعة خطوات الشرح جيدا والتطبيق أكثر من مرة على التأثير للتمكن من أدوات الفوتشوب
2- الإلتزام بالتطبيق ومتابعة الإرشادات التى يتم التنبيه اليها فى الشروحات .
3- عدم الأسئلة خارج الدروس التى سيتم تقديمها ولاسيما قبل محاولة التطبيق .
4- سوف لايتم الإجابة على أى سؤال ممن لم يقم بالتطبيق .
5- الإحتفاظ بالشروحات لأننا سنرجع اليها فى تجميع التصميمات ، أحيانا يتم تكرارالتأثير.

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

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

.

فى البداية أقدم لكم هذا التطبيق وقد تم شرحه

http://img64.imageshack.us/img64/183/headr18.gif

هذا رابط شرح الهيدر والتأثير الزجاجي عليه (http://www.abc4web.net/vb/showthread.php?t=6254)

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_a00.png

هذا رابط شرح الأزرار والقائمة فوتوشوب وتأثيرات css (http://www.abc4web.net/vb/showthread.php?t=6486)

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

http://www.abc4web.net/vb/uploaded/1_11263133883.png (http://www.abc4web.net/vb)

:bar:

الدروس القادمة إن شاءا لله تعالى

التطبيق الأول / هيدر رائع لموقعك
http://www.abc4web.net/vb/uploaded/1_01263343479.jpg (http://www.abc4web.net/vb)
صاحب الشرح / أبوهمام


التطبيق الثاني / تصميم قائمة أفقية ( يمكن إضافة تأثيرات جافا أو أكواد CSS )
http://www.abc4web.net/vb/uploaded/1_21263343333.jpg (http://www.abc4web.net/vb)
صاحب الشرح / أبو الوليد

رابط الشرح
http://www.abc4web.net/vb/showthread.php?t=15832 (http://www.abc4web.net/vb/showthread.php?t=15832)

التطبيق الثالث / قائمة أفقية إحترافية باللون الأسود ( يمكن إضافة تأثيرات جافا أو أكواد CSS )
http://www.abc4web.net/vb/uploaded/1_11263343333.jpg (http://www.abc4web.net/vb)
صاحب الشرح / أبوهمام


التطبيق الرابع / قائمة أفقية إحترافية بتأثير الزجاج رائعة ( يمكن إضافة تأثيرات جافا أو أكواد CSS )
http://www.abc4web.net/vb/uploaded/1_01263354137.jpg (http://www.abc4web.net/vb/showthread.php?t=21504)
صاحب الشرح / أبوهمام

تم الشرح
تصميم قائمة للموقع بتأثير لامع فى فوتوشوب Glossy Menu Bar (http://www.abc4web.net/vb/showthread.php?t=21504)


التطبيق الخامس / التأثير الزجاجي الإحترافي على الأزرار والهيدر

http://www.abc4web.net/upload/images2/eyw377lhqv0vxb6.jpg (http://www.abc4web.net/upload/)
صاحب الشرح / أبوهمام


التطبيق السادس / تصميم أزرار وقوائم مع التأثير اللامع

http://www.abc4web.net/vb/uploaded/1_01263343333.jpg (http://www.abc4web.net/vb)
صاحب الشرح / أبوهمام


التطبيق السابع / تصميم قائمة رأئسية بالتأثير الزجاجي

http://www.abc4web.net/vb/uploaded/1_01263346304.jpg (http://www.abc4web.net/vb)
صاحب الشرح / أبوهمام


التطبيق الثامن / تصميم زر زجاجي Glass-Orb بتأثير رائع

http://oogletutorials.com/wp-content/uploads/2007/12/photoshop-tutorials-glass-orb-design31.gif
صاحب الشرح / خالد صبح

رابط الشرح
http://www.abc4web.net/vb/showthread.php?t=6506


التطبيق التاسع / تصميم زر - قائمة - أو توقيع بتأثير زجاجي رائع Orb Button

http://www.abc4web.net/vb/uploaded/1_01266275200.png (http://www.abc4web.net/vb)

http://www.abc4web.net/vb/uploaded/1_01266275262.jpg
صاحب الشرح / أبوهمام

رابط الشرح

http://www.abc4web.net/vb/showthread.php?t=6796


التطبيق العاشر / تصميم قائمة زرقاء

http://img63.imageshack.us/img63/6329/boxct.png
صاحب الشرح / محمود عفيفي

رابط الشرح
http://www.abc4web.net/vb/showthread.php?t=6752


التطبيق الحادي عشر / تصميم قائمه بتأثير فيستا

http://img716.imageshack.us/img716/1406/vistaa.png
صاحب الشرح / محمود عفيفي


التطبيق الثاني عشر / تصميم هيدر مع الأيقونات

http://img188.imageshack.us/img188/2961/cssoq.png
صاحب الشرح / محمود عفيفي


التطبيق الثالث عشر / تصميم مميز يُستخدم كواجهة موقع - واجهة إسطوانة أو كتاب إلكترونى

http://img715.imageshack.us/img715/8374/style.png
صاحب الشرح / محمود عفيفي

:bar:

إنتظروا المزيد قريبا إن شاء الله

:bar:

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

والله أسأل ان يوفقنا جميعا لما يحب ويرضى

ولاتنسونا من صالح دعائكم

مع أجمل تحية لكم جميعا

أبوهمام
.

[abohmam]

هذا الجزء مخصص لتحديد الدروس التى تم إختيارها
وتكليف صاحب الدرس بالبدء به

الوصول السريع إلى الدروس


رابط شرح الهيدر والتأثير الزجاجي عليه (http://www.abc4web.net/vb/showthread.php?t=6254)


رابط شرح الأزرار والقائمة فوتوشوب وتأثيرات css (http://www.abc4web.net/vb/showthread.php?t=6486)


درس تصميم زر احترافي بالفوتوشوب (http://www.abc4web.net/vb/showthread.php?t=6506)


شرح تصميم قائمة زرقاء إحترافية (http://www.abc4web.net/vb/showthread.php?t=6752)


تصميم زر - قائمة - أو توقيع بتأثير زجاجي رائع Orb Button (http://www.abc4web.net/vb/showthread.php?t=6796)


تصميم قائمة أفقية يمكن إضافة تأثيرات جافا أو أكواد CSS (http://www.abc4web.net/vb/showthread.php?t=15832)

تصميم قائمة للموقع بتأثير لامع فى فوتوشوب Glossy Menu Bar (http://www.abc4web.net/vb/showthread.php?t=21504)

:bar:
.

[محمود عفيفى]

ما شاء الله :abc_051:
أختار التطبيق الثاني / تصميم قائمة أفقية نضيف إليها( أكواد CSS أو جافا ) :abc_145:
وفقكم الله

[كينج نت]

http://www.abc4web.net/vb/uploaded/28_11256767388.gif

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


حياك الله أخي العزيز أبوهمام

ماشاء الله دروس مميزة وجميله جداً

وقد لاحظت اهتمام الاخوه جميعاً بهذا المجال

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

اما الأختيار فحقيقه أنا احتار ايهم أختار فالكل جميل ومميز

وأي كان أو اتفق عليه الاخوه سيكون جميل ومفيد لنا جميعاً بإذن الله تعالى

مع خالص الشكر لجهودك الطيبعه والعظيمة

:abc_138:

http://www.abc4web.net/vb/uploaded/28_11256767388.gif

[أبو يوسف]

جزاك الله خيرا اخي ابو همام

لنكمل المسيرة بالتسلسل والذي تفضلت بترقيمه

أعانك الله

.

[ذوالجناح]

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

[سالي الفلسطينية]

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

[أبو فارس]

جزاك الله خيرا

فليس على الكريم شرط

[الراعي]

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

[abohmam]

حياكم الله جميعا

أشكر لكم تواجدكم وتواصلكم

إن شاء الله سنبدا بالدروس قريبا وقد إنتهيت ولله الحمد من البعض وأصبح جاهزا للنشر

نلتقي قريبا إن شاء الله تعالى مع أول تطبيق

[هشام احمد]

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

ماشاء الله اخي همام منتظرين الشرح

[abohmam]

حياكم الله جميعا

تم إضافة ثاني شرح

إحترف تصميم أزرار وقائمة لموقعك بإستخدام الفوتوشوب مع أكواد CSS وتأثير hover (http://www.abc4web.net/vb/showthread.php?t=6486)

[Khaled J. Ahmad]

تم إضافة درس جديد من التطبيقات وهو

درس تصميم زر احترافي بالفوتوشوب (http://www.abc4web.net/vb/showthread.php?t=6506)

[abohmam]

حياكم الله جميعا

تم إضافة مجموعة جديدة من الدروس للأخ محمود عفيفي

سوف يضعهم تباعا فى القسم إن شاء الله تعالى

[محمود عفيفى]

بسم الله الرحمن الرحيم
جزاك الله خيرا أخى أبو همام تم الإنتهاء من الدرس الأول
درس تصميم قائمة زرقاء (http://www.abc4web.net/vb/showthread.php?p=51623#post51623) :abc_088:

[abohmam]

حياكم الله جميعا

تم إضافة درس جديد

تصميم زر - قائمة - أو توقيع بتأثير زجاجي رائع Orb Button (http://www.abc4web.net/vb/showthread.php?t=6796)

[سيرين ملكة زماني]

واو
معئول انا اتعلم الفيتشوب واسيرشاطره متلكم:abc_080:

بس راح اصمم اتعلم بس بدي رابط فيتشوب سهل وبالعربي

امانه جيبولي اياه :abc_138:

باي

[المسالم]

السلام عليكم ورحمة الله وبركاته
مشكوررررررررررررررررررررر رررررررررر
موفق بإذن الله ... لك مني أجمل ت:abc_022:حية .

[أبو الوليد]

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

[كرووك]

merciiiiiiiiiiiiiiiiiiiiiiiiiiiii:abc_152:

[أبو صخر]

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

[مسكين]

جزاك الله خيرا

[عادل نت]

ما شاء الله ...

واذا كان في دروس فيا ريت لو طريقه عمل قائمه بلغة السي اس اس وتكون قائمه منسدله .

اي مثلاً نقول هيدر عليه قائمه :) مثلاً القائمه اسمه خيارات , من بعد ما يجي الماوس عليها تفتح قائمه بعدة اختيارات :)

اذا تحقق هالدرس بتكون ساعدتوني كثير :)

[النجمة الذهبية]

جزاكم الله الف خير
اتمنى لكم التوفيق و السداد.......

[النجمة الذهبية]

اسئل الله أن يجعلها في ميزان حسناتكم

[احمد بو علي]

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .
ألف مبروك .. لقد سعدت بهذا الخبر
:abc_051::abc_051::abc_051:

[جروح بارده]

بارك الله فيك...وبجهودك الممييزة

وفقك الله

وكل عام وانتم بخير

[ابو بتال]

لو سمحت هل فيه شرح للتطبيق الرابع

[abohmam]

لو سمحت هل فيه شرح للتطبيق الرابع

حياك الله اخانا الفاضل

إن شاء الله تعالى سيتم رفع شرح التطبيق الرابع

تصميم قائمة للموقع بتأثير لامع فى فوتوشوب Glossy Menu Bar (http://www.abc4web.net/vb/showthread.php?t=21504)

[انثى الرماد]

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

[abohmam]

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

مرحبا بك وبارك الله فيك

نشكر الله جميعا على ان رزقنا المال وبارك لنا فى الوقت ويسر لنا أن نجتمع مع إخواننا لنتعاون فى الخير وننفع غيرنا بما تعلمنا

بالتوفيق

[غريب يا فؤادي]

ما شاء الله تبارك الله

جزاكم الله الفردوس الاعلى من الجناان
دروس رائعه جدااا