اهلا ومرحبا بحضراتكم في
الدرس مفصل العاشر و الاخير :: دورة تصميم استايل style للمبتدئين

ولكنه في الحقيقه هو ليس درس مفصل لتصميم استايل style وانما هو درس مفصل تصميم الواجهه التابعه للاستايل style ..

والتي كنت لمحت لها في درس مفصلي السادس من الدورة

واسال الله ان ينفع بنا وبكم والله المستعان ؛

فلتتابعوا معي الدرس مفصل واي استفسارات انا بالخدمه ان شاء الله..

في الدرس مفصل السادس قد انتهينا من تصميم الهيكل الاساسي للواجهه
وهو يتمثل في هذه الصورة :

وفي هذا الدرس مفصل سوف نصمم القوائم ونقوم بتركيب installها لتكتمل الواجهه
ونقوم برفعها بعد ذلك باذن الله
كما تعلمنا نقوم الان بفتح برنامج الفوتوشوب ..
ثم نفتح عمل جديد بهذه المقاسات ان شاء الله ..

لتكن بالشكل التالي ان شاء الله :

ثم نكب لون الخلفيه الاساسي بها كما تعلمنا
لتصبح بالشكل التالي ان شاء الله :

ثم نستخدم اداة الرسم الدائري هذه :

ثم نرسم مستطيل مع ترك مسافات بين الحواف الرئيسية للشكل الاساسي كالتالي :

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

سوف نقف على اللير ونضغط كليك يمين بالماوس
ثم نقوم بعمل rasterize كما تعلمنا
ثم نختار belnding opitions ونعطي له تاثير stroke كالتالي ::

ليكن بالشكل التالي ان شاء الله تعالى ::

ثم نقوم بعمل لير جديد ونستخدم اداه التحديد هذه ::

ونحدد المنطقه العلويه كالتالي باذن الله :

ثم نكب به اللون الاحمر او اللون المناسب لواجهتك الخاصه بك كالتالي ::

ركزوا معي في هذه الخطوة لانها صعبه نوعا ما
الان سوف نقوم بعمل مطابقه للير الاخير هذا واللير المرسوم من قبل تابع معي ::
سنقف على لير الاخير هذا كالتالي ::

ثم نضغط زرار ctrl من الكيبورد مع الضغط كليك شمال من الموس على اللير المرسوم هذا ::

ليظهر لنا التحديد كالتالي ::

ثم نضغط من الكيبورد على زراير ( ctrl+alt+shift+i )
ليظهر لنا التحديد بالشكل التالي ان شاء الله ::

ثم نضغط على زرار delete لتتم المطابقه بعون الله كالتالي ::

الان سوف نقوم بفتح العمل الاساسي للاستايل style والذي قمنا بتصميمه من قبل ..
وناخذ منه تاثيرات الهيدر header كالتالي ::

ثم نضعها على هذا اللير الاخير كالتالي ان شاء الله ::

لتكن بالشكل التالي ان شاء الله ::

ويمكنك وضع تاثيرات جديده خاصه بك ان شاء الله وانت وذوقك ...
ثم نعمل كوبي لهذا اللير بعد وضع التاثيرات كالتالي ان شاء الله ::

ثم نضغط على زرارين ( ctrl+t ) لعمل دوران لللير الاخير هذا
حتى نضعه باسفل القائمه ::

نضغط كليك يمين بالماوس بداخل هذا الشبكه
ونختار flip virtcal كما شاهدنا
ثم نستخدم اداة التحريك هذه ::

لنحرك هذا اللير الاخير الى اسفل القائمه لتكن كالشكل التالي باذن الله ::

الان نحفظ العمل على هيئه صورة كما تعلمنا
ثم نقوم بفتحها لكي نقوم بتقطيعها ان شاء الله ..
ويستحسن حفظ العمل ايضا على هيئه psd
ربما تحدث اية اخطاء فيمكنك الرجوع اليه وان شاء الله يحصل خير ..
الان نفتح الصورة التي قمنا بحفظها
ونحاول تقليل الهوامش من حول القائمه قدر الامكان باداه التحديد الكالتالي :

ثم ننسخها بزرارين ( ctrl + c ) ونفتح عمل جديد وكما علمنا انه عند النسخ
نجد ان العمل الجديد ياخذ نفس المقاسات المنسوخه من طول وعرض ..
فكل ماعلينا هو الضغط على زرارين ( ctrl + v )
وهذا لعمل لصق ان شاء الله ليكون الشكل كالتالي :

ونبدا الان بالتقطيع ان شاء الله وهو اشبه مايكون من تقطيع الواجهه فتابعوا معي ...
باداه التحديد نحدد على المنطقه العلويه كالتالي ::

ثم بزرارين (ctrl + c) ناخذها كوبي ونلصقها في عمل جديد ...
ثم نفعل ذلك مع المنطقه الوسطى والسفليه ليكن لدينا 3 قطع كالتالي ان شاء الله ...

ونبدا بتقطيع قطعه قطعه ان شاء الله فتابعوا معي ...
ونبدا بالقطعه العلوية سوف نقوم بتقطيعها الى 3 قطع
(يمين - وسط - يسار) مع مراعاه المقاسات
فلنقطع مثلا اليمين كالتالي ::

وبهذه المقاسات مثلا ::

ثم ناخذها كوبي كما تعلمنا ونلصقها في عمل جديد
وناخذ القطعه اليسرى بنفس مقاسات اليمنى وناخذها نسخ ونلصقها بعمل جديد
ونقطع المنطقه الوسطة بنفس الارتفاع( h )
ولا يشترط العرض وناخذها كوبي ثم نلصقها في عمل جديد
لتكن المنطقه العلويه لدينا مقطعه الى 3 قطع كالتالي ان شاء الله ::

وكذلك الحال بالنسبه للمنطقه السفليه والوسطى مع مراعاه ان يكون ::
عرض القطعتين اليمنى واليسرى بنفس عرض القطعتين اليمنى واليسرى في المنطقه العلويه اي ( w : 0.74 ) في هذا المثال ...

ليكن كما شاهدنا لدينا 9 قطع من القائمه كامله ان شاء الرحمن ......
ثم نبدا بحفظ القطع على هيئه صور لدينا بالجهاز والافضل ان يكونوا بداخل فولدر
فانا مثلا سوف اضعهم بفولدر اسمه qima وبالاسماء التاليه ::

والان انتهينا بفضل الله من الفوتوشوب سنتجه الى الفرونت بيج والله المستعان ...
وتعلمنا والحمد لله الاعدادت في الفرونت بيج في الدروس السابقه وسنقتصر على ذكر بعضها فقط ...
اولا نعمل جدول مكون من 9 خانات ونعطيه نفس القيم التاليه
من خصائص الجدول كما ذكرنا من قبل ::

ليكن كالشكل التالي ان شاء الله تعالى :::

ثم نسحبه الى الداخل من الجانب الايمن ليصبح شكله كالتالي باذن الله تعالى ::

ثم نضيف الصور اليمنى واليسرى لكل الخلايا من زرار اضافه صورة
ولا ننسى التوسيط قبل اي اضافه ليكن الشكل كالتالي ::

ثم نضيف الصور الوسطى للخلايا الوسطى من خصائص الخليه
ثم استعراض ولاننسى التوسيط ايضا قبل اي اضافه ليكن الشكل كالتالي ::




وخطوة اضافيه هنا وهي اضافه صور المنطقه الوسطى (اليمنى واليسرى) مرة ثانيه
من خصائص الخليه وهذا لانها تتمدد ..
وبكده انتهينا من تركيب install القطع والحمد لله
ولنحفظ ملف الاندكس كما تعلمنا بجانب مجلد الصور ليكونا كالتالي باذن الله ::

والغرض من هذا هو حفظ العمل حتى اذا حدث خطا فيما بعد
فلنرجع له وان شاء الله يحصل خير ..
الان نريد تركيب install القوائم هذه في الواجهه الخاصه بنا ورؤيتها على الطبيعه ان شاء الرحمن ...
وهنا نحتاج اجراء بعض الاعدادات قبل فعل ذلك ان شاء الرحمن ...
اولا نسحب العمود الايمن من القائمه الى اليمن والاعمده الوسطى
(اليمين الى اليمين و اليسار الى اليسار )
ليكن شكل القائمه كالتالي باذن الله تعالى ::

ثانيا سوف نقوم باستبدال اليمين باليسار واليسار باليمين
من تعليمات برمجيه اسفل البرنامج ...
كل ماعليك فعله هو تغيير اسم القطع اليمين الى اليسار واليسار الى اليمين لتكن كالتالي ::

ثم ننقل مجلد qima بداخل مجلد صور الواجهه وهو في هذه الدورة باسم rafek-n
ثم حفظ ولا نغلق الفرونت بيج ولا القائمه ونفتح الواجهه بالفرونت بيج الان ...
ثم نعمل جدول مكون من 9 خانات بمنتصف الواجهه ونعطيه نفس القيم السابقه ::

ليكن كالشكل التالي ان شاء الله تعالى :::

والان نسحب العمود اليمين الى اليمين والعمود اليسار الى اليسار كما تعلمنا ...
ثم نذهب الى القائمه لناخذها نسخ كامله كالتالي ::

ثم نذهب الى الواجهه ونلصقها في الخلايا ال 9 كالتالي ::

ثم نقوم بتظبيط القوائم كما تعلمنا عن طريق سحب الاعمده لتكن في النهايه الواجهه بالشكل التالي ان شاء الله ::

ثم ندخل الى التعليمات البرمجيه للواجهه و نقوم باستبدال qima الى rafek-n/qima او كما تسميهما انت وحسب الامتداد الموجود لديك ...

ثم نضيف مانريدة من روابط واقسام كما تعلمنا من قبل ...
ثم نحفظ الواجهه كما عليها ونرفع ملف index ومجلد الصور
الى مجلد www بموقعك وبجوار بعضهما البعض
ثم اذهب الى موقعك وشوف النتيجه
واقول لكم الف مبروك عليكم انتهاء الدورة كامله (ستايل style وواجهه )
والواجهة interface مرفقه لمن يريد الاطلاع عليها ان شاء الله
باسورد فك الضغط : www.r-khair.net



.:ليس بالضروري ان مانقدمه من دورات هو الاصح وانما هو احد الطرق الصحيحه:.



الملفات المرفقة [TR]
face-rafek-n.zip (114.1 كيلوبايت, عدد مرات المشاهدة 70 مرة) [/TR]



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©