درس تصميم واجهة موقع] .. (ِA) .. شرح/Castro0o

[صمت المشا111عر]

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

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

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

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

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

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

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

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



الدرس الأول



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

عرضها 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:


والسلام عليكم ورحمة الله وبركاته[/align]

[شمعة العين]

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

[الحــــــــــور]

مشكوووور صمت

وان شاء الله بحاول واذا طلع معي شي بنزله

وينثبت لاهميته

لك خالص شكري واحترامي

حوري

[امونه الليمونه]

http://www.9m.com/upload/28-09-2007/0.39745011916159.gif
http://www.9m.com/upload/26-09-2007/0.51523011811666.gif

[صمت المشا111عر]

مشكوووور صمت
وان شاء الله بحاول واذا طلع معي شي بنزله
وينثبت لاهميته
لك خالص شكري واحترامي
حوري
http://smiles.al-wed.com/smiles/25/38qwe.gif

[صمت المشا111عر]

http://www.9m.com/upload/28-09-2007/0.39745011916159.gif
http://www.9m.com/upload/26-09-2007/0.51523011811666.gif
http://smiles.al-wed.com/smiles/25/38qwe.gif

[ღ♥ღ دمعـ على خدي ـتيღ♥ღ]

http://e11e.net/files/899.gif (http://e11e.net/index.php?action=viewfile&id=899)
http://e11e.net/files/897.gif (http://e11e.net/index.php?action=viewfile&id=897)

[مـــشاكس]

http://www.21za.com/pic/thankyou003_files/20.gif
http://www.21za.com/pic/thankyou004_files/24.gif
http://www.21za.com/pic/thankyou002_files/10.gif

[رمش الغلا]

مشكووووووووووووووووور اخوي على الطرح المميز

[Ḟญяṧậή Mậқќậђ]

http://www.merkaz.net/up/uploads/46574.gif (http://www.merkaz.net/up/46574.html)