تعلم فى طريق الإحتراف كيف تصمم بانر إحترافي لموقعك أو منتداك

[abohmam]

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

تعلم فى طريق الإحتراف كيف تصمم بانر إحترافي لموقعك أو منتداك

الإصدارات " Photoshop CS3-CS2-CS-7 "
مستوى الشرح : متقدم وسوف نجعله متوسطا :abc_051:

الشكل النهائي

http://www.abc4web.net/vb/imgcache/3741.abc4web

وإذا كنت تريد البانر متحركا فهذه فكرة الحركة

http://www.abc4web.net/vb/imgcache/3742.abc4web

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

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

والله اسأل ان يوفقنى فى تقديم الشرح المناسب لكافة المستويات.

وكى لانطيل فى بعض الخطوات سوف نستخدم بعض الملحقات كى نختصر فى الخطوات ويسهل علينا التطبيق


.تدريجات .... Gradients
باترين ....... Patterns


يمكنكم تحميل هذه الأدوات من هذه المشاركات ان شاء الله تعالى

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

وفى هذه المشاركة طريقة إضافة الملحقات

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


=====/ بداية الشرح \=====

1- نبدأ بإنشاء ملف جديد بالمقاس التالي 468x60بيكسل

http://www.abc4web.net/vb/imgcache/3743.abc4web

2- نضيف طبقة جديدة ونملئها باللون الأبيض وننسى الطبقة الأخرى مؤقتا ربما نحتاج إليها إذا اردنا بانر متحرك !

3- نضيف ثلاثة طبقات جديدة ونسمى كل طبقة بالتالي ( الجسم - يمين - شمال )

http://www.abc4web.net/vb/imgcache/3744.abc4web

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

http://www.abc4web.net/vb/imgcache/3745.abc4web

5- نقوم بتطبيق هذه التأثيرات على هذه الطبقة


http://www.abc4web.net/vb/imgcache/3746.abc4web

- تفتح لنا النافذة وسوف نختار من Layer Style فقط كما هو مبين فى الصورة


Gradient
Stroke

http://www.abc4web.net/vb/imgcache/3747.abc4web

- الآن نقوم بإضافة أو استبدال التدريجات الموجودة بالتدريج الذى قمنا بتحميله من المرفقات وهذه هى الطريقة

Gradient

http://www.abc4web.net/vb/imgcache/3748.abc4web

- بعد إضافة التدريجات سوف نختار التدريج المشار إليه وهو باللون الأسود

http://www.abc4web.net/vb/imgcache/3749.abc4web


الآن نقوم بالتعديل على إعدادات Stroke ونضع القيم مثل التى فى الصورة . واللون 333333#

Stroke

http://www.abc4web.net/vb/imgcache/3750.abc4web


- وسوف نحصل على الشكل التالي

http://www.abc4web.net/vb/imgcache/3751.abc4web


ملحوظة :( يمكنك إدخال أى تأثير وبالقيم التى تراها مناسبة ( كالأنماط ) ، أنا فقط أستخدم هذه الملحقات للإختصار فى الشرح ) وهذا مثال :


http://www.abc4web.net/vb/imgcache/3752.abc4web

5- الآن نقف على الطبقة التى وضعنا لها إسم ( يمين ) ونستخدم أداة رسم المستطيل http://www.abc4web.net/vb/imgcache/3753.abc4web

ونرسم مستطيل صغير كما فى الشكل الذى فى الصورة التالية

http://www.abc4web.net/vb/imgcache/3754.abc4web


- ثم نطبق عليه نفس التأثير الذى قمنا به على الجسم مع تغيير اللون فقط
- وقد إخترت تدريج باللون البرتقالي والحواف Stroke بنفس اللون السابق


http://www.abc4web.net/vb/imgcache/3755.abc4web


ملحوظة :( يمكنك إدخال أى تأثير وبالقيم التى تراها مناسبة ( كالأنماط )، أنا فقط أستخدم هذه الملحقات للإختصار فى الشرح ) وهذا مثال :


http://www.abc4web.net/vb/imgcache/3756.abc4web


وسوف نحصل على هذه النتيجة

http://www.abc4web.net/vb/imgcache/3757.abc4web

6- الآن نقف على الطبقة التى أسميناها ( شمال ) ونستخدم أداة رسم المستطيل http://www.abc4web.net/vb/imgcache/3753.abc4web

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

http://www.abc4web.net/vb/imgcache/3758.abc4web


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


Gradient
Pattern
Stroke

نتابع معا مالذى يجب تعينه فى خيارات كل تأثير

Gradient Overlay
http://www.abc4web.net/vb/imgcache/3759.abc4web

ملحوظة :( يمكنك استخدام أى تأثير وبالقيم التى تراها مناسبة ( كالأنماط ) ، أنا فقط أستخدم هذه الملحقات للإختصار فى الشرح ) وهذا مثال :

http://www.abc4web.net/vb/imgcache/3760.abc4web

Pattern Overlay
http://www.abc4web.net/vb/imgcache/3761.abc4web

Stroke
http://www.abc4web.net/vb/imgcache/3762.abc4web



وبعد الضغط على OK سنحصل على الشكل التالي

http://www.abc4web.net/vb/imgcache/3763.abc4web



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

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


http://www.abc4web.net/vb/imgcache/3741.abc4web

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

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

مـ(أجمل تحية لكم جميعا)ـع
أبو هــــMــــام

[الدمشقي]

درس راااائع ومجهود أروع في الشرح والتوضيح
بارك الله بك أخي الغالي أبو همام
وجزاك الله خيراً

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

:abc_139:

[الدمشقي]

محاولة بسيطة أنوي أن أهديها لأحد الأصدقاء :


http://www.abc4web.net/vb/imgcache/3823.abc4web

[abohmam]

درس راااائع ومجهود أروع في الشرح والتوضيح
بارك الله بك أخي الغالي أبو همام
وجزاك الله خيراً

:abc_139:

وفيك بارك الله أخى الدمشقي

أشكر لك تواجدك وتشجيعك وتطبيقك

تطبيق رائع ماشاء الله تسلم الأيادى

ولكنك إختصرت بعض الخطوات !

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

لكن الفكرة رائعة ماشاء الله :abc_022:
حياك وحفظك المولى

[الدمشقي]

أشكرك أخي الحبيب أبو همام
إن شاء الله تعالى سوف يتم تلافي الملاحظات التي ذكرتها
تحيتي لك

[abohmam]

أشكرك أخي الحبيب أبو همام
إن شاء الله تعالى سوف يتم تلافي الملاحظات التي ذكرتها
تحيتي لك

حياك الله أخى ابا شام

[أبو فرحان]

بارك الله فيك أخى أبوهمام
ولو أن الفوتوشوب لدى عربى
لكن سنحاول بعون الله

[المعلم للتصميم]

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

[مبتدأ]

جزاك الله كل خير وعافية

[abohmam]

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

حياكم الله جميعا إخواني أشكر لكم مروركم العطر وتواصلكم

بالتوفيق

[thubiti23]

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

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

[taher abozied]

أبـــدأ بــاســم الله مستـعـيـنـا ............ راض بــــه مــدبــرا مـعـيـنــا

جزاك الله خير جارى التطبيق ولنا عوده

[taher abozied]

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

الحمد لله تم العمل فى انتظار البانر المتحرك

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

http://img210.imageshack.us/img210/2250/capturewizoi1.jpg

[ae.hacker]

مشكوووووووووووووووور

[oumaabde]

merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiii

[مغترب]

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

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

[mohamed_sobhy]

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

[abohmam]

بارك الله فيكم جميعا على المرور والتواصل الجاد

موفقين جميعا لكل خير

[سارّة]

شرح رائع لكن يالي يوجد تعريب للبرنامج

[منال عمار]

فين المرفقات استاذنا

[abohmam]

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

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

موفقين ان شاء الله

فين المرفقات استاذنا

حياك الله أختنا منال

يبدوا أن المرفقات لم يتم نقلها مع نقل الموقع للعنوان الجديد فعذرا !!

سيتم البحث والرفع مجددا ان شاء الله تعالى

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

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

[abohmam]

حياك الله أختنا سالي صبح على التواجد والمرور

وبخصوص سؤال أختنا منال فقد تم إضافة روابط للملحقات فى المشاركة

بالتوفيق

[ابو فاطمة]

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

صلى الله عليه وسلم


جزاك الله خير اخوي عاشت ايدك

[abohmam]

حياك الله أخى أبا فاطمة

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