دروس عامة في عالم التصميم : كل ما هو جديد في عالم دروس التصميم بكافة مجالاته تجدها هنا

تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )

صورة '!! badr2005 !!' الرمزية
!! badr2005 !!
:: عضو نشيط ::
تاريخ الإنضمام: 06 - 06 - 2005
رقم العضوية : 4885
الدولة : داخل الهارديسك
العمر: 34
المشاركات: 1,013
  • أرسل رسالة بواسطة MSN إلى !! badr2005 !!
قديمة 11 - 06 - 2005, 03:34
المشاركة 1
نشاط !! badr2005 !!
  • قوة السمعة : 677
  • الإعجاب: 105
    Icon30 تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    بسم الله الرحمن الرحيم
    والصلاة والسلام على اشرف الأنبياء والمرسلين ..... اما بعد ::
    ( اللهم لاعلم لنا الاماعلمتنا )
    أقدم لكم اخواني وأخواتي اعضاء منتديات ترايدنت وزواره الكرام
    شرح مفصل عن تصميم موقع احترافي بالفوتوشوب من الألف الى الياء وبالتفصيل الممل


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


    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )

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

    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    نأتي بالصوره التى نريد ان نضعها خلفيه بالضغط على open او فتح ونختار الصوره من جهازنا ثم نسحبها الى منطقة العمل وهنا اخترت خلفية الورود لاحظ الصور
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    نضغط على CTRL + T ونسحب اطراف التحديد للصوره حتى نغطي الصفحة بها لاحظ الصوره
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    بعد ان نغطي الصفحة البيضاء بالصوره نضغط انتر لأزالت التحديد ثم نذهب الى filter >>> blur >>> radial blur ونطبق الخيارات كما بالصوره :
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    ستلاحظ ان الصوره اصبحت كالأشعاع ثم نبداء بوضع بنر او مربع عنوان الموقع وسيكون الشرح بالصور تابع :
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    ثم نطبق فلتر على المربع الذي رسمناه والفلتر هو كما بالصوره
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    تظهر رسالة تفيد أن الشكل سيحدث به تغيرات المهم انت اضغط ok

    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    ضع خيارات الفلتر كما بالصوره
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    بعد اعطاء البنر انحناء نعطيه تأثير الضل من اسفل قائمة اللير نختار كما بالصوره
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    نضع الخيارات كما بالصوره
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    الأن نريد وضع خلفية للبنر او مربع عنوان الموقع .. نضغط فتح ثم نختار صوره ونسحبها الى منطقة العمل كما شرحنا قبل
    ونغطي بالصوره ثلاث ارباع البنر بالضغط على CTRL+T وسحبها الى الوضع المطلوب لاحظ الصوره
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    الأن اضغط انتر لأزالت التحديد ... الأن نريد دمج الصوره مع البنر بحيث تكون الصوره داخل اطار البنر فقط .. وركز في هذه الخطوه
    سيكون شرحها بالصور افضل :
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    الان اجعل التحديد على خلفية البنر واقصد بالتحديد اللون الازرق الواضح على الصوره التي تتحكم بها وهي الصوره الأولى ويجب ان تكون
    فوق البنر وليس تحته الأن اضغط الأختصار CTRL+G وهذه
    الخطوه لدمج الخلفيه مع البنر وجعلها داخل حدود البنر فقط .. حركها لتعرف معنى كلامي .. بعد عمل الازم ستلاحظ وجود سهم صغير يدل على
    دمج الصوره مع البنر لاحظ الصوره :
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    الأن نريد تغيير لون خلفية البنر لتتناسب مع لون البنر وذلك بالضغط على CTRL+U وقم بعمل
    نفس الأعدادات بالصوره :
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    الأن نريد وضع صوره داخل شكل جميل وتكون بالزاويه على اليمين للموقع .. نختار شكل من الاشكال الجاهزه عندنا او فرشاه
    وليكن شكل ويمكن الحصول عليه بالضغط بالزر الأيمن على المربع وختيار اخر شكل من بين المجموعه.. تابع الصور :
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    بعد الحصول على الشكل المطلوب وليكن قلب مثلا .. نأتي بالصوره التي نريد دمجها معه ونضع الصوره فوق الشكل وندمجها بالضغط
    على CTRL+G كما علمنا سابقا .. الأن نريد تحريك الشكل مع الصوره الى المكان المناسب ويم تحريكهما معاً بربطهما معاً
    وذلك يتم كما بالصوره :
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    ونحرك الشكل الذى عملناه وهو قلب داخله صورة بنت الى الجهه اليمني من البنر
    ونعطيه بعض التاثيرات مثل الضل او على حسب الرغبه كما تعلمنا تاثير الضل سابقاً
    سيصبح شكل الموقع حتى الأن تقريباً كما بالصوره :
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    نرسم مربع بالنص من ادات المربع بشريط الأدوات ونعطيها تأثير الضل كما عرفناه لاحظ
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    ونكتب فوقه كلمة chat او دخول الزوار او اي كلمة ترغب بها ونعمل لها تأثيرات كما في الصوره ماعليك الاوضع علامة صح امام الخيارات التي امامك
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    نضع فراشه او قلوب او ايقونات او حتى صوره ونمسح اطرافها لمربع الشات حتى تعطيه منظر جذاب
    وطبعا كلمه chat نغير لونها الأسود الى اي لون متناسق مع الموقع لاحظ بعد التعديلات .. مع اضافة بعض
    اللمسات من الفرش الجاهزه لبرنامج الفوتوشوب
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    الان نكتب عنوان الموقع ونعطيه نفس تأثيرات كلمة شات التي عملناها سابقاً ونزيد عليها بتمويج العنوان ليكون بارزاً عند دخول الموقع
    وهذا عند الضغط على زر الكتابه انضر فوق بالزاويه اليمنى للفوتوشوب تلاحظ وجود زر حرف T وتحته انحناء
    لاحظ الشرح بالصور
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    وعند الضغط عليها يتم عرض مربع ومنه تختار اي شكل يعجبك مع امكانية سحب اشرطة التمرير وتغيير الشكل
    ليتناسب مع الوضع الذي تريد لاحظ الصوره
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    بعد التعديلات على اسم الموقع ووضعه بالبنر بالحجم المناسب للموقع ...... لم يبقى لنا الا الأزرار
    وهذه تتم بعمل زر واحد ونسخه لأكثر من نسخه على حسب عدد الأزرار بموقعك
    نبداء بعمل مستطيل ثم نقوم بمسح احد الاطراف بالممحاه مسحاً خفيفاً حتى يكون متدرجاً بالمسح
    اي يكون احد الاطراف واضح والطرف الاخر خفيف ونضع عند الطرف الواضح اي شكل
    لعطي الزر شكلا جميلا مثلا نختار القلب المحدد فقط كما بالصور :
    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    كما يمكنك اعطائه شكلا افضل بأضافة تأثيرات عليه
    اما هذا القلب فهو عباره عن فرشاه جاهزه وهناك اشكال وفرش كثيره تفيدك
    بتصميمك فحرص على اقتناء اكبر عدد ممكن منها
    الى هذا الحد نكون قد انهيناء تصميم موقع كاملا بشكل احترافي بالفوتوشوب
    لأي استفسارات انا جاهز ........ ولاحد يتردد بالأسئله
    ومن اراد الصور التي استخدمتها بالتصميم فلقد ارفقتها مع الموضوع
    وكذالك لمن لاتظهر له الصور فقد ارفقتها مرتبه بالأرقام

    تحياتي

    !! badr2005 !!
    الملفات المرفقة
    نوع الملف : zip الصور المستخدمه بالدرس.zip (64.0 كيلوبايت, عدد مرات المشاهدة 15953 مرة)
    7ossam, صبير, رحال العشق و 6 آخرون معجبون بهذا.
    بدر العنزي
    www.badr4.com
    admin @ badr4.com

    Twitter : @badral3nzi
    Skype : badral3nzi
    BBM : 73F81760

    معرض التصاميم : http://www.badr4.com/my_work

    ---xxx---

    ستايل أحترافي للبيع بسعر 100 ريال فقط - احجز نسختك
    ستايل حور الأحترافي بـ 5 ألوان + PSD .. مجاني

    ---xxx---
    قريـــباً دورة تعليمية بشكل ومضمون جديد
    قديمة 11 - 06 - 2005, 04:22
    المشاركة 2
    عاشق حزن
    :: عضو شرف ::
    تاريخ الإنضمام: 20 - 04 - 2005
    رقم العضوية : 3793
    الدولة : دار أبو متعب
    العمر: 34
    المشاركات: 11,639
    افتراضي رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    ماشالله كافي ووافي وشرح متميز من عضو متميز بالتوفيق اخوي وجزاك الله خير
    " نمضي في رحلة الحياه ,, تفرقنا مقادير الظروف .."
    ملحوظه : أي رافضي لاشوف رقعة وجهه بأي نطاق يخصني ,,
    ----------
    ملحوظه للبزران فقط واسمح لي ياتركي : تم تسجيل خروجي من ترايدنت بناءا على طلبي لعدم تفرغي ولأسباب أخرى خاصه.
    ----------
    قريباً قصة :
    الذيب مايهرول عبث
    قديمة 11 - 06 - 2005, 04:48
    المشاركة 3
    صورة '!! badr2005 !!' الرمزية
    !! badr2005 !!
    :: عضو نشيط ::
    تاريخ الإنضمام: 06 - 06 - 2005
    رقم العضوية : 4885
    الدولة : داخل الهارديسك
    العمر: 34
    المشاركات: 1,013
    • أرسل رسالة بواسطة MSN إلى !! badr2005 !!
    افتراضي رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    هلا عاشق حزن ... ربي يعافيك ومشكور على مرورك

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

    رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )

    تحياتي وبالتوفيق للجميع
    بدر العنزي
    www.badr4.com
    admin @ badr4.com

    Twitter : @badral3nzi
    Skype : badral3nzi
    BBM : 73F81760

    معرض التصاميم : http://www.badr4.com/my_work

    ---xxx---

    ستايل أحترافي للبيع بسعر 100 ريال فقط - احجز نسختك
    ستايل حور الأحترافي بـ 5 ألوان + PSD .. مجاني

    ---xxx---
    قريـــباً دورة تعليمية بشكل ومضمون جديد
    قديمة 11 - 06 - 2005, 08:16
    المشاركة 4
    صورة 'رزان' الرمزية
    رزان
    :: عضو نشيط ::
    تاريخ الإنضمام: 12 - 04 - 2005
    رقم العضوية : 3586
    الدولة : :: جـــ Jeddah ـــدة ::
    العمر: 28
    المشاركات: 1,633
    افتراضي رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    يعطيك ألف عافية أخوي بدر ...

    أختك ::
    رزان
    سبحانك اللهم وبحمدك ، استغفرك وأتوب إليك
    قديمة 11 - 06 - 2005, 12:58
    المشاركة 5
    سنين عمري
    :: عضـــو::
    تاريخ الإنضمام: 11 - 04 - 2005
    رقم العضوية : 3580
    الدولة : .. ــشرقاويهــ ..
    العمر: 29
    المشاركات: 83
    افتراضي رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    يعطيك الف عافية اخووي
    كفيت ووفيت
    جزاك الف خير يارب

    تحياتي

    سنين عممري
    قديمة 11 - 06 - 2005, 13:02
    المشاركة 6
    صورة 'x_5' الرمزية
    x_5
    :: TRAIDNT ::
    :: رفيق الدرب ::
    تاريخ الإنضمام: 20 - 09 - 2004
    رقم العضوية : 11
    الدولة : :: UAE ::
    المشاركات: 246,809
    افتراضي رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    تسلم اخوي
    قديمة 11 - 06 - 2005, 14:40
    المشاركة 7
    RKEK_ALMSH3R
    :: عضو فعال ::
    تاريخ الإنضمام: 07 - 01 - 2005
    رقم العضوية : 979
    الدولة : U.S.A- Birmingham
    العمر: 30
    المشاركات: 135
    • أرسل رسالة بواسطة MSN إلى RKEK_ALMSH3R
    • أرسل رسالة بواسطة Skype™ إلى RKEK_ALMSH3R
    افتراضي رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    مشكور اخوي البدر كفية والله وفيت ...ودرس روعه ..مثل راعيه ..

    ولاتحرمنا جديدك ..
    قديمة 11 - 06 - 2005, 15:49
    المشاركة 8
    Grafx_Designer
    :: عضـــو::
    تاريخ الإنضمام: 26 - 02 - 2005
    رقم العضوية : 1909
    الدولة : السعودية
    المشاركات: 113
    افتراضي رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    مشكور على الجهد والشرح المفصل
    وجزاك الله خير
    قديمة 11 - 06 - 2005, 16:00
    المشاركة 9
    صورة 'المتفائلة' الرمزية
    المتفائلة
    :: عضو شرف ::
    تاريخ الإنضمام: 09 - 11 - 2004
    رقم العضوية : 344
    الدولة : المملكة العربية السعودية
    المشاركات: 2,929
    افتراضي رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    يعطيك العافية يارب
    شرح وافي وكافي
    الدوسري معجب بهذا.
    سبحانك اللهم وبحمدك ,, أشهد أن لا إله إلا أنت ,, استغفرك وأتوب إليك
    قديمة 11 - 06 - 2005, 16:07
    المشاركة 10
    صورة 'Failed' الرمزية
    Failed
    :: عضو نشيط ::
    تاريخ الإنضمام: 11 - 04 - 2005
    رقم العضوية : 3571
    الدولة : Motherboards
    المشاركات: 2,383
    • أرسل رسالة بواسطة ICQ إلى Failed
    • أرسل رسالة بواسطة AIM إلى Failed
    افتراضي رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    مشكوريااخي علي جهدك
    الأســـم : سعـــد الجلالـــــي

    أسم المستعار : تلميذ بو صالح ( سابقا )

    Failed ( حاليا )

    برامج الجرافيك :
    Adobe Photoshop
    ZBrush 3D Max Studio


    https://www.behance.net/Failed

    قديمة 11 - 06 - 2005, 16:10
    المشاركة 11
    صورة 'miso' الرمزية
    miso
    :: عضو نشيط ::
    تاريخ الإنضمام: 05 - 02 - 2005
    رقم العضوية : 1454
    الدولة : مصــ egyptـــر
    العمر: 26
    المشاركات: 912
    افتراضي رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    تسلم يا غالى

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

    " وقل اعملوا فسيرى الله عملكم ورسوله والمؤمنون "


    صدق الله العظيم







    لمراسلتى أضغط هنــــــــا
    قديمة 11 - 06 - 2005, 16:18
    المشاركة 12
    ابوفاتن
    :: عضو نشيط ::
    تاريخ الإنضمام: 04 - 11 - 2004
    رقم العضوية : 284
    المشاركات: 921
    افتراضي رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    بدر

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

    والله ما قصرت



    ابوفاتن
    قديمة 11 - 06 - 2005, 16:31
    المشاركة 13
    موفق يالودعاني
    :: عضـــو::
    تاريخ الإنضمام: 11 - 06 - 2005
    رقم العضوية : 5020
    المشاركات: 63
    افتراضي رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    درس فنان من واحد فنان

    يعطك الف عافيه يالذيب

    موفق خير
    شـــــكــــــــــــرا تركي الودعاني على هذا المنتدى
    اللهم وفق تركي الودعاني واجعل الفردوس فاله وفال أبويه
    قديمة 11 - 06 - 2005, 16:51
    المشاركة 14
    مررهف
    :: عضـــو::
    تاريخ الإنضمام: 16 - 02 - 2005
    رقم العضوية : 1676
    المشاركات: 62
    افتراضي رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    ابداع والله
    تسلم ماقصرت
    قديمة 11 - 06 - 2005, 19:32
    المشاركة 15
    الزعيم 2006
    :: عضو نشيط ::
    تاريخ الإنضمام: 05 - 06 - 2005
    رقم العضوية : 4864
    الدولة : دار أبوي زايد ( ربي يرحمه ) و دمشق الشام .
    المشاركات: 2,322
    افتراضي رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
    ماشاء الله عليك والله تصميم مبدع ... أرجو في المرة القادمة تييب لنا استايل و تشرح لنا كيف تم تصميمه من الصفر ...

    مشكوووووووووووووووووووووووووووووووووووووور على التصميم ...

    تحياتي (.........................) المجهول
    من كبار ترايدنت : بوصالح / ساهي / الصم / قلم حر / فوكس / غانم / جروح الوقت / الرفيق / فيصل العنقري / أمير العزاب / عادل / أحمد /أبوفاتن / لوشا / وحيد الجزيرة / Ahmod / سنابل / CSS / برق الشمال / دايم الحمد / الشحي / عبد الله الحصان / مميز / أحمد النحاس / أبو شدق / الطاير / أبو سارة / الدوسري / دروب السهر/ الحانوتي / المتفائلة / أمير الجزيرة / nmooory / M!ss N!le / ياسر / Allulu / احساس / القروم / بوحبيبه /alkahf.
    مغلق
    العلامات المرجعية

    تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )


    [درس] طريقــــة جعــــل الصــــورة مثــــل اللوحــــة الفنيـــة ( درس خطير ) درس تصميم ايقونة بحث بشكل جميل ورائع جدا

    أدوات الموضوع
    طرق العرض



    الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن : 15:31.
    المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
    فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
    التعليقات المنشورة لا تعبر عن رأي معهد ترايدنت ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)

    جميع الحقوق محفوظة Traidnt 2015
    • 009669200920037
    • 00966138648289
    • 2051033691
    Powered by vBulletin® Version 3.8.7 .Copyright ©2000 - 2015, Jelsoft Enterprises Ltd
    SEO by vBSEO ©2011, Crawlability, Inc.