Last updated Nov. 23, 2014
الملاحظات
دروس عامة في عالم التصميم

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

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


موضوع مغلق
رقم المشاركة # 1  
أضيفت بتاريخ 11 - 06 - 2005 عند الساعة 03:34
صورة '!! badr2005 !!' الرمزية
!! badr2005 !!
:: عضو نشيط ::
!! badr2005 !! غير متواجد حاليآ بالمنتدى
بيانات موقعي
اسم الموقع: المصمم بدر العنزي
اصدار المنتدى: مدونات
تاريخ الإنضمام: 06 - 06 - 2005
رقم العضوية : 4885
الدولة : داخل الهارديسك
العمر: 34
المشاركات: 1,013
قوة السمعة : 677
أرسل رسالة بواسطة MSN إلى !! badr2005 !!
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 كيلوبايت, عدد مرات المشاهدة 15939 مرة)
بدر العنزي
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
الدولة : دار أبو متعب
العمر: 33
المشاركات: 11,639
قوة السمعة : 12573
افتراضي  رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
ماشالله كافي ووافي وشرح متميز من عضو متميز بالتوفيق اخوي وجزاك الله خير
" نمضي في رحلة الحياه ,, تفرقنا مقادير الظروف .."
ملحوظه : أي رافضي لاشوف رقعة وجهه بأي نطاق يخصني ,,
----------
ملحوظه للبزران فقط واسمح لي ياتركي : تم تسجيل خروجي من ترايدنت بناءا على طلبي لعدم تفرغي ولأسباب أخرى خاصه.
----------
قريباً قصة :
الذيب مايهرول عبث
  • عاشق حزن غير متواجد حاليآ بالمنتدى
أضيفت بتاريخ 11 - 06 - 2005 عند الساعة : 04:48
رقم المشاركة # 3
:: عضو نشيط ::
صورة '!! badr2005 !!' الرمزية
تاريخ الإنضمام: 06 - 06 - 2005
رقم العضوية : 4885
الدولة : داخل الهارديسك
العمر: 34
المشاركات: 1,013
قوة السمعة : 677
أرسل رسالة بواسطة 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---
قريـــباً دورة تعليمية بشكل ومضمون جديد
  • !! badr2005 !! غير متواجد حاليآ بالمنتدى
أضيفت بتاريخ 11 - 06 - 2005 عند الساعة : 08:16
رقم المشاركة # 4
:: عضو نشيط ::
صورة 'رزان' الرمزية
تاريخ الإنضمام: 12 - 04 - 2005
رقم العضوية : 3586
الدولة : :: جـــ Jeddah ـــدة ::
العمر: 27
المشاركات: 1,633
قوة السمعة : 966
افتراضي  رد : تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )
يعطيك ألف عافية أخوي بدر ...

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

تحياتي

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

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

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

Failed ( حاليا )

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


https://www.behance.net/Failed

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

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

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


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







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

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

والله ما قصرت



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

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

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

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

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

العلامات المرجعية

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


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

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

غلق/فتح (الكل) ضوابط المشاركة
لا يمكنك اضافة مواضيع جديدة
لا يمكنك اضافة مشاركات
لا يمكنك اضافة مرفقات
لا يمكنك تعديل مشاركاتك

رمز [IMG] : متاحة
رمز HTML : معطّلة
المراجع : معطّلة
Refbacks are متاحة



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


Powered by vBulletin® Version 3.8.7 .Copyright ©2000 - 2014, Jelsoft Enterprises Ltd
SEO by vBSEO ©2011, Crawlability, Inc.
Google
‪Google+‬‏