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

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

أخواني اعضاء منتديات الأمراء ...

نبدأ معكم اليوم بإذن الله درس تصميم واجهات المواقع

وسيتم تقسيم الدرس إلى عدة دروس مبسطه

بحيث يسهل على الأخوان المبتدئين فهمها وتطبيقها

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

بالموضوع ليستفيد اكبر عدد ممكن من الأخوان الراغبين في التعلم



الدرس الأول



بعد فتح برنامج الفوتوشوب نقوم بأختيار صفحه جديده للعمل

عرضها 777 وطولها 670 وخلفيتها بيضاء كما هو موضح بالصوره

http://lovetouch.jeeran.com/1.jpg

الآن نقوم بإختيار لونين مناسبه حسب رغبتنا واحد خفيف والثاني غامق

أنا أخترت هاللونين
http://lovetouch.jeeran.com/2.jpg

الحين نبدأ بصبغ خلفية الصفحه باللون الخفيف اللي اخترناه

نختار أداة الصبغ
http://lovetouch.jeeran.com/3.jpg

ونصبغ الصفحة
http://lovetouch.jeeran.com/4.jpg

الآن نقوم بإختيار خلفيه مناسبه للصفحه لتزيينها
http://lovetouch.jeeran.com/5.jpg

تروح على ملف ثم فتح

وتختار صوره من جهازك وتفتحها

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

طريقة نسخ الصوره

أول شي تحددها بالضغط على زري
Ctrlوحرف A

مثل ماهو موضح بالصوره
http://lovetouch.jeeran.com/6.jpg

بعد كذا تذهب الى الصفحه اللي صبغناها وتضغط
Ctrl وحرف V للصقها
http://lovetouch.jeeran.com/7.jpg

الآن الصوره لصقناها على صفحة العمل

طيب الحين مثلاً الصوره اللي اخترناها طلعت صغيره مثل ما تشوفون

في هذه الحاله نقوم بتمديد الصوره وتكبيرها حتى تصبح بحجم صفحتنا

طريقة تمديد الصوره

Ctrl مع الحرفT
راح تتحدد معانا الصوره بشكل مختلف عن التحديد الأول

ويطلع معانا شكل مربعات صغيره بالاطراف والجوانب ووفوق وتحت

في حدود الصوره ... بعد كذا نروح بالماوس على المربعات اللي بالاطراف

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

كما هو موضح بالصوره التاليه
http://lovetouch.jeeran.com/8.jpg

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

غير مفعله او انها شبه متوقفه طيب ليش ؟؟؟؟؟

لأننا غيرنا حجم الصوره !!! لازم وتذكر دايماً

بعد ما تغير حجم اي صوره انك تضغط زر انتر

طيب بعد ما ضغطنا على انتر الحين الصوره اصبحت بحجم صفحة العمل

وجميع الخيارات مفعله وتعمل

الآن نريد أن نجعل الصوره بلون الخلفيه كيف ؟؟؟

أول شي نروح على الليرات Layres
http://lovetouch.jeeran.com/9.jpg

ونشوف اذا الصوره اللي اضفناها مضلله معانها تمام

اذا ما كانت مضلله الصوره نضغط عليها بزر الماوس اليسار

راح يتضلل معانا اللير

بعد كذا نختار خيار مناسب من قائمه الشفافيه الموجوده بالليرات

وهنا اخترت Color Burn

واعطانا لون للصوره حسب لون الخلفيه

كما هو موضح بالصوره التاليه
http://lovetouch.jeeran.com/10.jpg

الآن الصوره أصبحت بهذا الشكل
http://lovetouch.jeeran.com/11.jpg

:)

إلى الآن شغلنا تمام

أوكي الآن نريد إعطاء الصوره شكل جمالي أكثر

من خيارات الفوتوشوب في الأعلى نروح على الفلاتر Filters

من قائمة الفلاتر نختار >>>> Blur

ثم نختار منها >>>> Radial Blur
http://lovetouch.jeeran.com/12.jpg

بعد كذا تظهر لنا هذه النافذه الخاصه بالفلتر

ضع الخيارات كما هو موضح او حسب ما تريد
http://lovetouch.jeeran.com/13.jpg

بعد ما طبقنا الفلتر حصلنا على هذا الشكل
http://lovetouch.jeeran.com/14.jpg

ولا أحلى من كذا :)
طيب الآن نبي نتعلم طريقة وضع بنر للصفحه

نروح على الليرات من جديد ونضيف لير فارغ لمشروع العمل

كما هو موضح بالشرح

نطبق الشرح التالي
http://lovetouch.jeeran.com/15.jpg

الآن أصبح عندنا طبقه شفافه جديده بالعمل راح نضع فيها البنــر

أول شي نختار الأداه من قائمة الأدوات تابع الصوره التاليه
http://lovetouch.jeeran.com/16.jpg

بعد كذا نحرص على إختيار اللير اللي راح نعمل عليه من الليرات وهو اللير

الشفاف اللي أضفناه
http://lovetouch.jeeran.com/17.jpg

نروح الحين على الصفحه ونضغط بزر الماوس اليسار من الزاوية اليسار ونسحب

بدون ترك الضغط على الماوس إلى أن نصل للجهه الثانيه من الصوره

ولا نضلل من الصوره الا ثلثها او اقل

كما هو موضح بالصور التاليه
http://lovetouch.jeeran.com/18.jpg
http://lovetouch.jeeran.com/19.jpg

أوكي للحين الخطوات ماشيه تمام

بعد كذا لازم نعطي اللون اللي اضفناه شكل جمالي

اول شي تأكد انك مختار الصوره اللي ضللناها من الليرات اللي هي هذي
http://lovetouch.jeeran.com/20.jpg

بعد كذا نروح على الفلاتر Filters ونختار منها كما هو موضح بالصوره التاليه
http://lovetouch.jeeran.com/21.jpg

راح تفتح معنا هذي النافذه نطبق الموضح فيها
http://lovetouch.jeeran.com/22.jpg

الحين الناتج هو هذا الشكل
http://lovetouch.jeeran.com/23.jpg

لحفظ العمل
http://lovetouch.jeeran.com/24.jpg

نحفظه بصيغة PSD

لإكماله في الدرس القادم :)
http://lovetouch.jeeran.com/25.jpg


هذي نهاية الدرس الأول في دروس تعليم تصميم واجهات المواقع

إن شاءالله يكون واضح للأخوه المبتدئين في هذا المجال

وارجوا من كل من يطبق العمل يعرضه هنا في الموضوع

وأي استفسار أو تساؤل حول الموضوع لا تتردد في طرحه ابداً

وأنا على إستعداد تام لشرح أي شي يصعب عليكم

الصوره المستخدمه بالعمل بالمرفقات

حملها وطبق الدرس وبالتوفيق :icon31:


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

تصدق سهل مرررره من سهولته

اصلا مافهمت شي منه

ههههههههههه

يعطيك الف عافيه Castro0o

الله لايحرمنا منك

يعطيك الف عافيه خيووووو


الدرس سهـــل مرررره




لك تحياتي ..

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

يعطيك العافيه اخوي امير بكلمتي
مثل ما قلت اخوي درس سهل
وانتظروا مني الدروس الباقيه
بس ياليت اشوف تطبيق

بصراحه روعه مره وسهل ..

ابطبقا وبوريك تطبيقي باذن الله .......

لي عوده لوضع تطبيقي ..

شكرا لك أخي

شرح موفق وشامل

يعطيك ألف عافية

دمت بكل ود

انتظر تطبيقك أختي مي
دمتي بود

العفو نبض الحروف
يعافيك ربي يا غالي

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

العفو اختي مذهله
نورتي الدرس

السلام عليكم اخوي .......

هذا تطبيقي بصورتك ..


وثاني بصوره من عندي بس ما تقيت اكثير حست شوي ..


بصراحه انا مستعجله على بقيه الدرس ..

انتظر بقيه الدرس ودي بصراحه اتعلم اكثر واسرع ..


بنفس صورتك ..

http://www.prameg.com/up/uploads/fe096d2a57.jpg


بصروه ثانيه من عندي ..


http://www.prameg.com/up/uploads/3f410f7847.jpg


انتظر ردك وبقيه الدرس .........



سي يو

بطل والله اخوي كاستور

كفو يا بعدي

حبيب قلبي انت والله
ننتظر مزيدك اخوي

أميرهم

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

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

شكرا لك اخي على الشرح الوافي
تقبل تحياتي ومروري البسيط

شكرا لك اخي على الشرح الوافي
تقبل تحياتي ومروري البسيط

يعطيك العافيه كاسترو

شرح ولا أروع

بس حبيت أضيف نقطة

بالنسبة لـ الطول

راح يكون متغير يعني على حسب

طول الواجهه اللي بتسويها

وتسلم اخوي ماقصرت

وواصل ابداعك يالغلا ،،

اوكي اخوي

وصدقني بنتظر الدرس الثاني بشوق ...

تحيتي لك وعلى تشجيعك لي ..

ابوفيصل

العفو يا غالي
اسعدني تواصلك

Dr.M
ثانكس يا غالي على التعقيب
بالنسبه للطول يختلف فعلا من تصميم لآخر
لكن هذا مجرد درس لتوضيح طريقة عمل الصفحات
بطريقه بسيطه ومن ناحية الطول بسيطه طريقة زيادة طول صفحة العمل
ان شاءالله نتطرق لها بمواضيع قادمه

أسعدني مرورك وتعقيبك يا غالي

إن شاءالله أختي مي
واستمري فعلا تطبيقك دقيق وممتاز

مشكور الله يعطيك العافية يالغالي
وان شاء ننتظر جديدك

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

الدرس سهـــل



لك تحياتي ..

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

بصـراحـه مدري اش أقـوولكـ ..

بس راح أقـولكـ إنـوو انا في بداياتي للفـوتـووشـووب .. و كنت ادور لهالدرووس بإبداعـك المتميز .. و عنوان موضوعك أكثر شئ شدنـي خلاني اسجـل ..

و جمال شرحكـ خلانـي احاول و أطبق .. و أتفاجأ من نفسي ..

و يعطيك الف الف الف عافيـ ـه يا غالي ..

و هذا تطبيقي .. ابغا انتقادك لا هنت ..

http://www.9q9q.org/index.php?image=ZjpKmJfidrsPUu
وتراني انتـظر الدرس الثاني على نـااااااااااااااااااااااااااااار ..

و يعطيك الف عافيـه .. ويا حظ هالصـرح فيك يا غالي ..

بصـراحـه مدري اش أقـوولكـ ..

بس راح أقـولكـ إنـوو انا في بداياتي للفـوتـووشـووب .. و كنت ادور لهالدرووس بإبداعـك المتميز .. و عنوان موضوعك أكثر شئ شدنـي خلاني اسجـل ..

و جمال شرحكـ خلانـي احاول و أطبق .. و أتفاجأ من نفسي ..

و يعطيك الف الف الف عافيـ ـه يا غالي ..

و هذا تطبيقي .. ابغا انتقادك لا هنت ..

http://www.9q9q.org/index.php?image=ZjpKmJfidrsPUu
وتراني انتـظر الدرس الثاني على نـااااااااااااااااااااااااااااار ..

و يعطيك الف عافيـه .. ويا حظ هالصـرح فيك يا غالي ..

يامال العافيه اميرهم

وابي انزل موضوع ثاني فيه اقتراح اخر


<< يبي ينشب لكم :bigsmile:

يعطيك الف عافيه اخووي



شرح وافي وواضح

بصراحه الدرس سهل ومفييد بالحيل



مايوو

مشكوررررررررررر اخوي

يعطيك الف عافية اخوي
كاسترووووو

اشكرك اخي على مشاركتك

ولي عوده لترى تصميمي

تقبل خالص تحياتي

اختك

خلود

كاسترو

تسلم الأيادي يالغالي

درس فعلا وافي وسهل

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

لاحرمنا من أبداعك وجديدك

دمت بخير

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


على المشاركه المميزه