درس مفصل من الالف الى الياء لتصميم موقع احترافي .. بالصور

بسم الله الرحمن الرحيم
والصلاة والسلام على اشرف الأنبياء والمرسلين ..... اما بعد ::
( اللهم لاعلم لنا الاماعلمتنا )

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


https://mwadah.com/images/imgcache/2007/04/700.imgcache

نبـــــــداء الدرس على بركة الله ,,,,,,,,,,,,,,,,,,!!!!!
افتح الفوتوشوب وعمل صفحه جديده من new او جديد وختر القياسات 777 * 555 او على حسب رغبتك لاحظ الصور :::

https://mwadah.com/images/imgcache/2007/04/701.imgcache
https://mwadah.com/images/imgcache/2007/04/702.imgcache
نأتي بالصوره التى نريد ان نضعها خلفيه بالضغط على open او فتح ونختار الصوره من جهازنا ثم نسحبها الى منطقة العمل وهنا اخترت خلفية الورود لاحظ الصور
https://mwadah.com/images/imgcache/2007/04/703.imgcache
https://mwadah.com/images/imgcache/2007/04/704.imgcache
نضغط على CTRL + T ونسحب اطراف التحديد للصوره حتى نغطي الصفحة بها لاحظ الصوره
https://mwadah.com/images/imgcache/2007/04/705.imgcache
بعد ان نغطي الصفحة البيضاء بالصوره نضغط انتر لأزالت التحديد ثم نذهب الى filter >>> blur >>> radial blur ونطبق الخيارات كما بالصوره :
https://mwadah.com/images/imgcache/2007/04/706.imgcache
https://mwadah.com/images/imgcache/2007/04/707.imgcache
ستلاحظ ان الصوره اصبحت كالأشعاع ثم نبداء بوضع بنر او مربع عنوان الموقع وسيكون الشرح بالصور تابع :
https://mwadah.com/images/imgcache/2007/04/708.imgcache
ثم نطبق فلتر على المربع الذي رسمناه والفلتر هو كما بالصوره
https://mwadah.com/images/imgcache/2007/04/709.imgcache
تظهر رسالة تفيد أن الشكل سيحدث به تغيرات المهم انت اضغط ok

https://mwadah.com/images/imgcache/2007/04/710.imgcache
ضع خيارات الفلتر كما بالصوره
https://mwadah.com/images/imgcache/2007/04/711.imgcache
بعد اعطاء البنر انحناء نعطيه تأثير الضل من اسفل قائمة اللير نختار كما بالصوره
https://mwadah.com/images/imgcache/2007/04/712.imgcache
نضع الخيارات كما بالصوره
https://mwadah.com/images/imgcache/2007/04/713.imgcache
الأن نريد وضع خلفية للبنر او مربع عنوان الموقع .. نضغط فتح ثم نختار صوره ونسحبها الى منطقة العمل كما شرحنا قبل
ونغطي بالصوره ثلاث ارباع البنر بالضغط على CTRL+T وسحبها الى الوضع المطلوب لاحظ الصوره
https://mwadah.com/images/imgcache/2007/04/714.imgcache
الأن اضغط انتر لأزالت التحديد ... الأن نريد دمج الصوره مع البنر بحيث تكون الصوره داخل اطار البنر فقط .. وركز في هذه الخطوه
سيكون شرحها بالصور افضل :
https://mwadah.com/images/imgcache/2007/04/715.imgcache
الان اجعل التحديد على خلفية البنر واقصد بالتحديد اللون الازرق الواضح على الصوره التي تتحكم بها وهي الصوره الأولى ويجب ان تكون
فوق البنر وليس تحته الأن اضغط الأختصار CTRL+G وهذه
الخطوه لدمج الخلفيه مع البنر وجعلها داخل حدود البنر فقط .. حركها لتعرف معنى كلامي .. بعد عمل الازم ستلاحظ وجود سهم صغير يدل على
دمج الصوره مع البنر لاحظ الصوره :
https://mwadah.com/images/imgcache/2007/04/716.imgcache
الأن نريد تغيير لون خلفية البنر لتتناسب مع لون البنر وذلك بالضغط على CTRL+U وقم بعمل
نفس الأعدادات بالصوره :
https://mwadah.com/images/imgcache/2007/04/717.imgcache
الأن نريد وضع صوره داخل شكل جميل وتكون بالزاويه على اليمين للموقع .. نختار شكل من الاشكال الجاهزه عندنا او فرشاه
وليكن شكل ويمكن الحصول عليه بالضغط بالزر الأيمن على المربع وختيار اخر شكل من بين المجموعه.. تابع الصور :
https://mwadah.com/images/imgcache/2007/04/718.imgcache
https://mwadah.com/images/imgcache/2007/04/719.imgcache
بعد الحصول على الشكل المطلوب وليكن قلب مثلا .. نأتي بالصوره التي نريد دمجها معه ونضع الصوره فوق الشكل وندمجها بالضغط
على CTRL+G كما علمنا سابقا .. الأن نريد تحريك الشكل مع الصوره الى المكان المناسب ويم تحريكهما معاً بربطهما معاً
وذلك يتم كما بالصوره :
https://mwadah.com/images/imgcache/2007/04/720.imgcache
ونحرك الشكل الذى عملناه وهو قلب داخله صورة بنت الى الجهه اليمني من البنر
ونعطيه بعض التاثيرات مثل الضل او على حسب الرغبه كما تعلمنا تاثير الضل سابقاً
سيصبح شكل الموقع حتى الأن تقريباً كما بالصوره :
https://mwadah.com/images/imgcache/2007/04/721.imgcache
نرسم مربع بالنص من ادات المربع بشريط الأدوات ونعطيها تأثير الضل كما عرفناه لاحظ
https://mwadah.com/images/imgcache/2007/04/712.imgcache
https://mwadah.com/images/imgcache/2007/04/713.imgcache
ونكتب فوقه كلمة chat او دخول الزوار او اي كلمة ترغب بها ونعمل لها تأثيرات كما في الصوره ماعليك الاوضع علامة صح امام الخيارات التي امامك
https://mwadah.com/images/imgcache/2007/04/722.imgcache
https://mwadah.com/images/imgcache/2007/04/723.imgcache
نضع فراشه او قلوب او ايقونات او حتى صوره ونمسح اطرافها لمربع الشات حتى تعطيه منظر جذاب
وطبعا كلمه chat نغير لونها الأسود الى اي لون متناسق مع الموقع لاحظ بعد التعديلات .. مع اضافة بعض
اللمسات من الفرش الجاهزه لبرنامج الفوتوشوب
https://mwadah.com/images/imgcache/2007/04/724.imgcache
الان نكتب عنوان الموقع ونعطيه نفس تأثيرات كلمة شات التي عملناها سابقاً ونزيد عليها بتمويج العنوان ليكون بارزاً عند دخول الموقع
وهذا عند الضغط على زر الكتابه انضر فوق بالزاويه اليمنى للفوتوشوب تلاحظ وجود زر حرف T وتحته انحناء
لاحظ الشرح بالصور
https://mwadah.com/images/imgcache/2007/04/725.imgcache
وعند الضغط عليها يتم عرض مربع ومنه تختار اي شكل يعجبك مع امكانية سحب اشرطة التمرير وتغيير الشكل
ليتناسب مع الوضع الذي تريد لاحظ الصوره
https://mwadah.com/images/imgcache/2007/04/726.imgcache
بعد التعديلات على اسم الموقع ووضعه بالبنر بالحجم المناسب للموقع ...... لم يبقى لنا الا الأزرار
وهذه تتم بعمل زر واحد ونسخه لأكثر من نسخه على حسب عدد الأزرار بموقعك
نبداء بعمل مستطيل ثم نقوم بمسح احد الاطراف بالممحاه مسحاً خفيفاً حتى يكون متدرجاً بالمسح
اي يكون احد الاطراف واضح والطرف الاخر خفيف ونضع عند الطرف الواضح اي شكل
لعطي الزر شكلا جميلا مثلا نختار القلب المحدد فقط كما بالصور :
https://mwadah.com/images/imgcache/2007/04/727.imgcache
كما يمكنك اعطائه شكلا افضل بأضافة تأثيرات عليه
اما هذا القلب فهو عباره عن فرشاه جاهزه وهناك اشكال وفرش كثيره تفيدك
بتصميمك فحرص على اقتناء اكبر عدد ممكن منها
الى هذا الحد نكون قد انهيناء تصميم موقع كاملا بشكل احترافي بالفوتوشوب
تحياتي
م....ل

رائــــــــــــــــــــــ ـــــــــــع

رائـــــــــــــــع تعب

بيض الله وجهك

وشـكــ وبارك الله فيك ـــرا ...

الله يطول عمرك اخوي ابو نواف

بارك الله فيك والله يعطيك العافيه

تحياتي لك

شـكــ وبارك الله فيك ـــرا ... تحياتي .

مجهود كثييييييير رائع بارك الله فيك اخي

كفيت ووفيت في الشرح ماشاءالله عليك

تحياتي لك

الله يسلمكم ويبارك فيكم جميع

تحيتي لكم

بسم الله الرحمن الرحيم
والصلاة والسلام على اشرف الأنبياء والمرسلين ..... اما بعد ::
( اللهم لاعلم لنا الاماعلمتنا )

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


[aldl]http://www.mwadah.com/imgcache/10524.imgcache[/aldl]
نبـــــــداء الدرس على بركة الله ,,,,,,,,,,,,,,,,,,!!!!!
افتح الفوتوشوب وعمل صفحه جديده من new او جديد وختر القياسات 777 * 555 او على حسب رغبتك لاحظ الصور :::

[aldl]http://www.mwadah.com/imgcache/10525.imgcache[/aldl]

[aldl]http://www.mwadah.com/imgcache/10526.imgcache[/aldl]

نأتي بالصوره التى نريد ان نضعها خلفيه بالضغط على open او فتح ونختار الصوره من جهازنا ثم نسحبها الى منطقة العمل وهنا اخترت خلفية الورود لاحظ الصور

[aldl]http://www.mwadah.com/imgcache/10527.imgcache[/aldl]

[aldl]http://www.mwadah.com/imgcache/10528.imgcache[/aldl]

نضغط على CTRL + T ونسحب اطراف التحديد للصوره حتى نغطي الصفحة بها لاحظ الصوره

[aldl]http://www.mwadah.com/imgcache/10529.imgcache[/aldl]

بعد ان نغطي الصفحة البيضاء بالصوره نضغط انتر لأزالت التحديد ثم نذهب الى filter >>> blur >>> radial blur ونطبق الخيارات كما بالصوره :

[aldl]http://www.mwadah.com/imgcache/10530.imgcache[/aldl]

[aldl]http://www.mwadah.com/imgcache/10531.imgcache[/aldl]

ستلاحظ ان الصوره اصبحت كالأشعاع ثم نبداء بوضع بنر او مربع عنوان الموقع وسيكون الشرح بالصور تابع :

[aldl]http://www.mwadah.com/imgcache/10532.imgcache[/aldl]

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

[aldl]http://www.mwadah.com/imgcache/10533.imgcache[/aldl]

تظهر رسالة تفيد أن الشكل سيحدث به تغيرات المهم انت اضغط ok

[aldl]http://www.mwadah.com/imgcache/10534.imgcache[/aldl]

ضع خيارات الفلتر كما بالصوره

[aldl]http://www.mwadah.com/imgcache/10535.imgcache[/aldl]

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

[aldl]http://www.mwadah.com/imgcache/10536.imgcache[/aldl]

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

[aldl]http://www.mwadah.com/imgcache/10537.imgcache[/aldl]

الأن نريد وضع خلفية للبنر او مربع عنوان الموقع .. نضغط فتح ثم نختار صوره ونسحبها الى منطقة العمل كما شرحنا قبل
ونغطي بالصوره ثلاث ارباع البنر بالضغط على CTRL+T وسحبها الى الوضع المطلوب لاحظ الصوره

[aldl]http://www.mwadah.com/imgcache/10538.imgcache[/aldl]

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

[aldl]http://www.mwadah.com/imgcache/10539.imgcache[/aldl]

الان اجعل التحديد على خلفية البنر واقصد بالتحديد اللون الازرق الواضح على الصوره التي تتحكم بها وهي الصوره الأولى ويجب ان تكون
فوق البنر وليس تحته الأن اضغط الأختصار CTRL+G وهذه
الخطوه لدمج الخلفيه مع البنر وجعلها داخل حدود البنر فقط .. حركها لتعرف معنى كلامي .. بعد عمل الازم ستلاحظ وجود سهم صغير يدل على
دمج الصوره مع البنر لاحظ الصوره :

[aldl]http://www.mwadah.com/imgcache/10540.imgcache[/aldl]

الأن نريد تغيير لون خلفية البنر لتتناسب مع لون البنر وذلك بالضغط على CTRL+U وقم بعمل
نفس الأعدادات بالصوره :

[aldl]http://www.mwadah.com/imgcache/10541.imgcache[/aldl]

الأن نريد وضع صوره داخل شكل جميل وتكون بالزاويه على اليمين للموقع .. نختار شكل من الاشكال الجاهزه عندنا او فرشاه
وليكن شكل ويمكن الحصول عليه بالضغط بالزر الأيمن على المربع وختيار اخر شكل من بين المجموعه.. تابع الصور :


[aldl]http://www.mwadah.com/imgcache/10542.imgcache[/aldl]

[aldl]http://www.mwadah.com/imgcache/10543.imgcache[/aldl]

بعد الحصول على الشكل المطلوب وليكن قلب مثلا .. نأتي بالصوره التي نريد دمجها معه ونضع الصوره فوق الشكل وندمجها بالضغط
على CTRL+G كما علمنا سابقا .. الأن نريد تحريك الشكل مع الصوره الى المكان المناسب ويم تحريكهما معاً بربطهما معاً
وذلك يتم كما بالصوره :

[aldl]http://www.mwadah.com/imgcache/10544.imgcache[/aldl]

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

[aldl]http://www.mwadah.com/imgcache/10545.imgcache[/aldl]

نرسم مربع بالنص من ادات المربع بشريط الأدوات ونعطيها تأثير الضل كما عرفناه لاحظ

[ash3h]http://www.mwadah.com/imgcache/10536.imgcache[/ash3h]


[aldl]http://www.mwadah.com/imgcache/10537.imgcache[/aldl]


ونكتب فوقه كلمة chat او دخول الزوار او اي كلمة ترغب بها ونعمل لها تأثيرات كما في الصوره ماعليك الاوضع علامة صح امام الخيارات التي امامك

[aldl]http://www.mwadah.com/imgcache/10546.imgcache[/aldl]

[aldl]http://www.mwadah.com/imgcache/10547.imgcache[/aldl]

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

[aldl]http://www.mwadah.com/imgcache/10548.imgcache[/aldl]

الان نكتب عنوان الموقع ونعطيه نفس تأثيرات كلمة شات التي عملناها سابقاً ونزيد عليها بتمويج العنوان ليكون بارزاً عند دخول الموقع
وهذا عند الضغط على زر الكتابه انضر فوق بالزاويه اليمنى للفوتوشوب تلاحظ وجود زر حرف T وتحته انحناء
لاحظ الشرح بالصور


[aldl]http://www.mwadah.com/imgcache/10549.imgcache[/aldl]


وعند الضغط عليها يتم عرض مربع ومنه تختار اي شكل يعجبك مع امكانية سحب اشرطة التمرير وتغيير الشكل
ليتناسب مع الوضع الذي تريد لاحظ الصوره

[aldl]http://www.mwadah.com/imgcache/10550.imgcache[/aldl]

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

[aldl]http://www.mwadah.com/imgcache/10551.imgcache[/aldl]

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

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

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

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

وانتي كذلك يا ام عمر

تحياتي

رائــــــــــــــــــــــ ـــــــــــع

رائـــــــــــــــع تعب

بيض الله وجهك

وشـكــ وبارك الله فيك ـــرا ...

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

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

جزاك عنا كل خير وكتبه الله لك فى ميزان حسناتك

سلمت يمناك

وفي انتظار جديدك الجمل

ودمت لنا

وجاري التنفيذ

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

تحيتي لكم

:n2006107::n2006107::n200 6107:

مشكور
جزاك الله الف خيررررررررررررررررررر