درس فى عمل واجه موقع ( Home Page ) للمحترفين

http://www.9m.com/upload/28-01-2007/...1169937458.jpg

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

كيف حال الجميع أتمنى أن يكون الجميع بخير وان يكون الجميع قد أنهى الأمتحانات على خير أن شاء الله .
اليوم أقدم لكم درس فى تصميم واجهه موقع أو Home Page لقد قلت لنفسى أن أقدم للجميع درس قوى بمناسبه أنتهاء
موسم الأمتحانات أتمنى أن يعجبكم الدرس أن شاء الله وأى سؤال فى الدرس أنا حاضر لإجابه أى سؤال أن شاء الله والأن إلى الدرس .

لنفتح برنامج الفوتوشوب ونفتح صفحه جديده بمقاس 778X584 بيكسل طبعا وبخلفيه بيضاء أيضا كما بالشكل .

http://www.9m.com/upload/28-01-2007/...1169937554.jpg

يجب عند تصميم واجهه موقع ان يكون هناك دقه كبيره جدا فى ترتيب العمل لذلك سنقوم بأضافه Grid للعمل
وهذا الأختيار يمكننا من تحديد المساحه التى نريدها من خلال المربعات التى ستظهر فى ساحه العمل .

http://www.9m.com/upload/28-01-2007/...1169937685.jpg

ثم بعد ذلك سنقوم بأضافه Layer جديد وسيكون بالأسفل وسنحدده بثلاث مربعات من أسفل التصميم ويتم تلوينه بأى لون تختارته
أو ليتم تلوينه كما بالشكل أكتب الكود التالى 356AC8 فى المكان الموجود بالشكل وهو كود اللون طبعا


http://www.9m.com/upload/28-01-2007/...1169988645.jpg

ثم بعد ذلك سنقوم بأضافه Layer جديد للعمل ولكن هذه المره سيتم أضافته من أعلى الصفحه ونقوم بأستخدام
أداه التدرج (Gradient) وذلك لأضافه تردج لونى من لونين الى هذه المنطقه .

http://www.9m.com/upload/28-01-2007/...1169937827.jpg

مره أخرى نضيف Layer جديد للعمل ونحدد مربع ونصف فقط من الأعلى ثم نضيف أليه اللون بالكود السابق 356AC8
ثم بعد ذلك نفتح صندوق Blending Options ونختار منه Drop Shadow
ولمن لا يعرف كيفيه الوصول الى الى صندوق Blending Options عن طريق :
الضغط مرتين متتاليتين على اللير الذى به العمل فسيظهر لك صندوق Blending Options ونختار منه Drop Shadow
وهناك طريقه اخرى
من القائمه الرئيسيه نختار Layer > Layer Style > Drop Shadow

http://www.9m.com/upload/28-01-2007/0.154011699336.jpg

وعلى نفس التحديد الموجود نختار أداه Single Row Marquee ونقوم بتعبئتها
ثم نضع لها Stroke باللون الأبيض بمقدار 1 بيكسل من صندوق Layer Style كما تم شرحه بالفقره الماضيه .

http://www.9m.com/upload/28-01-2007/...1169938781.jpg

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

http://www.9m.com/upload/28-01-2007/...1169938844.jpg

حتى الأن من المفترض ان نكون قد وصلنا الى هذه المرحله من الشكل ومن لم يصل الى ذلك الشكل فهناك خطأ ما لديه
فعليه مراجعه الخطوات

http://www.9m.com/upload/28-01-2007/...8011699389.jpg

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

http://www.9m.com/upload/28-01-2007/0.663011699318.jpg

أتمنى أن يكون الدرس قد حاز على رضاكم وأعجابكم
وكل ما أرجوه منكم الدعاء الصالح
وشكرا جزيلا لكم مع تحياتى
Kaito Kodo

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

بل الشكر لكى اختى على المرور الطيب جدا
والحمد لله ان الدرس اعجبك
وشكرا لكى على الدعاء

الف شكر لك اخى على الدرس الرااائع حقآ ... والله يعطك العااافيه ^____^

مشكووووور على الدرس الرائع

مع تحياتي

اقتباس:

---

المشاركة الأصلية كتبت بواسطة kaito kodo

http://www.9m.com/upload/28-01-2007/...1169937458.jpg

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

ثم بعد ذلك سنقوم بأضافه Layer جديد وسيكون بالأسفل وسنحدده بثلاث مربعات من أسفل التصميم ويتم تلوينه بأى لون تختارته
أو ليتم تلوينه كما بالشكل أكتب الكود التالى 356AC8 فى المكان الموجود بالشكل وهو كود اللون طبعا

http://www.9m.com/upload/28-01-2007/...1169937685.jpg


ثم بعد ذلك سنقوم بأضافه Layer جديد للعمل ولكن هذه المره سيتم أضافته من أعلى الصفحه ونقوم بأستخدام
أداه التدرج (Gradient) وذلك لأضافه تردج لونى من لونين الى هذه المنطقه .
Kaito Kodo

---

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

شكرا لأياتو وهايبرا اى على المرور
وشكرا dead Heart على المرور والتنبيه
وقد تم التعديل .

السلام عليكم،

مشكوراخوي على الدرس القيم وانا تعبت من كثر ما اقرأ

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

درسك روعة ومفهوم وان شاء الله قريب احط التطبيق

وسلام،
محبة الربيع

السلام عليكم ...
مشكوووووووور على الدرس
عجيييييييييييب عجبني جداً
وهذا تطبيق مع انك ما طلبت


http://www.9q9q.org/index.php?image=RbhIjHsrO8a7ut

مشكور اخوي كايتو كودو ع الدرس وهذا تطبيقي انا بحطه في موقيعي
http://www.9m.com/upload/28-01-2007/0.943670113792.jpg

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

http://adlh159.3.googlepages.com/montada.jpg

إن شاء الله اعجبك
أختك جنووو
:cool21:

مشكوووووووووور يا مشرفنا ^^

وقد تم حفظه ضمن سلسلة الدروس القيمة لتطبيقه فيما بعد ^.^

دمت بود

اسيروووووهـــ،ـ،ـ،ـ

اقتباس:

---

المشاركة الأصلية كتبت بواسطة محبة الربيع

السلام عليكم،

مشكوراخوي على الدرس القيم وانا تعبت من كثر ما اقرأ

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

درسك روعة ومفهوم وان شاء الله قريب احط التطبيق

وسلام،
محبة الربيع

---

وعليكم السلام ورحمه الله وبركاته
العفو أخى هذا واجبى تجاه الجميع فمن أنعم الله عليه بعلم يجب أن ينشره ليتعلم منه الجميع
والحمد لله أن الدرس أفادك وشكرا لكى على المرور وبأنتظار تطبقك أن شاء الله تعالى .

اقتباس:

---

المشاركة الأصلية كتبت بواسطة kyubi rasengan

السلام عليكم ...
مشكوووووووور على الدرس
عجيييييييييييب عجبني جداً
وهذا تطبيق مع انك ما طلبت


http://www.9q9q.org/index.php?image=RbhIjHsrO8a7ut

---

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

اقتباس:

---

المشاركة الأصلية كتبت بواسطة dead heart

مشكور اخوي كايتو كودو ع الدرس وهذا تطبيقي انا بحطه في موقيعي
http://www.9m.com/upload/28-01-2007/0.943670113792.jpg

---

ماشاء الله عليك اخى تطيق رائع جدا والحمد لله أنى قد أستطعت أفادتك

اقتباس:

---

المشاركة الأصلية كتبت بواسطة جنى الورد

مشكووووور أستاذنا ع الدرس الراااااائع

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

http://adlh159.3.googlepages.com/montada.jpg

إن شاء الله اعجبك
أختك جنووو

:cool21:

---

شكرا جنووو على المرور الطيب والكلام المشجع
وبالنسبه للتطبيق فهو تطبيق أكثر من رائع وفيه أبداع كبير منكى

اقتباس:

---

المشاركة الأصلية كتبت بواسطة A-M-Makkawei

مشكوووووووووور يا مشرفنا ^^

وقد تم حفظه ضمن سلسلة الدروس القيمة لتطبيقه فيما بعد ^.^

دمت بود

اسيروووووهـــ،ـ،ـ،ـ

---

العفو أخى وشكرا لتصيف الدرس فى قائمه الدروس القيمه
وشكرا ك على المرور وبانتظار التطبيق أن شاء الله تعالى .

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

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

مشكووووووور أخي الكريم ع الدرس الرائع بارك الله فيك

وأنا سويت بندر :yes2: بدل واجهه لموقع :)

وأن شاء الله يعجبكم يارب






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

أريغاتوووووووووووه أخوي كايتو كودو على الدرس الرااائع ....

مبدع أخوي ومشكوووووووووور على مجهوودك.