&&الدرس مفصل الاول "من دورة معــاقب ديزاد باتنة" ((تصميم الهيدر header))&&

[salima]

http://www.dzbatna.com/attachments/62841d1154264554-des.jpg

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

اما بعد
اليوم بإذن الله سنبدا بدورة "معاقب ديزاد باتنة" لتصميم الواجهات من الالف الى الياء
لا اريد ان اطيل عليكم بالحديث لنبدأ بالدرس مفصل واتمنى منكم ان تضعو في ردودكم تطبيقاتكم
حتى نستطيع ان نكمل ما بدأنا به ....

ولنقل بسم الله ونبدأ بالدرس مفصل

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

- اللون البرتقالي (وهو المستخدم بهذه الدورة)
http://www.dzbatna.org/up/pic.php?u=287593InA&i=7164

-اللون الازرق
http://www.dzbatna.org/up/pic.php?u=287593InA&i=7165

-اللون الاحمر
http://www.dzbatna.org/up/pic.php?u=287593InA&i=7166

2-بعد اختيار الالوان فالتقم بفتح عمل جديد File>>>>New او بالضغط على Ctrl+N

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7167

وضع لها هذه الاعدادات الموضحه بالصورة التاليه :

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7168

الان قم بأختيار الوانك حسب الجموعات في الخطوه الاولى او اي الوان اخرى تحبها
http://www.dzbatna.org/up/pic.php?u=287593InA&i=7169

الان لنقم بأختيار اداة التعبئة http://www.dzbatna.org/up/pic.php?u=287593InA&i=7170 ونملئ الخلفية بالدرجة رقم اربعة يعني الاغمق من الدرجه الاخيره



حسب مجموعة الالوان الموضحه بالصورة الاولى من الخطوة الاولى

هكذا نكون قد انتهينا من تجهيز مسرح العمل بالالوان الازمه لبدء العمل

3-الان لنبدأ برسم اجزاء الهيدر header او القسم العلوي من الواجهة interface , قم بأختيار اداة البن تول http://www.dzbatna.org/up/pic.php?u=287593InA&i=7171 وقد صممت لكم شرح طريقة بالفيديو لكيفية رسم الاشكال بأستخدامها , طبعا رسم الاشكال لا يقتصر فقط على هذه الاداة فيمكنك مثلا رسم مربع التحكم بأجزاءه عن طريق هذه الاداء او ايضا رسم شكل جاهز والتغيير عليه حسبما تريد , وللتسهيل قمت بوضع شرح طريقة فيديو لطريقة العمل بهذه الاداء

أنقر هنا لتحميل الملف (http://www.4img.com/ar/up/06/07/30/e0126439e08ddfbdf4faa952dc910590.zip)

4-بعد رسم الاشكال وتفنن بها حسب ما تشاء سيظهر لنا هذا الناتج على سبيل المثال

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7172

وهنا سنأتي لبعض الدروس التي دمجتها بالدوره مثل درس مفصل اخونا بدر ودرس مفصل اخونا فوكس

اولا: قم بتكرير كل طبقه على حدا
http://www.dzbatna.org/up/pic.php?u=287593InA&i=7173

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7174

كما لاحظنا اصبح لدينا من كل طبقه اثنين

الان نحدد اللير الجديد من كل مجموعه ونحرك لأسفل قليلا ولليسار قليلا على ان يكون على نفس امتداد اللير الاول

بعد ذلك نختر من قائمة اللير Blending option

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7175

ونضع لها الخيارات كما في الصور بالاسفل

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7176
http://www.dzbatna.org/up/pic.php?u=287593InA&i=7177
http://www.dzbatna.org/up/pic.php?u=287593InA&i=7178

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

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7179

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7180


الان كرر اللير الاخير الخالي من اي اضافة وضعه بالاسفل وحركه بحيث يكون ابعد قليلا من اللير الثاني.


(الان انتهينا من تشكل الهيدر header واضافة الاشكال)

نأتي الان لأضافة الصور الخاصة بالهيدر header

نحضر الصور المراد اضافتها ولنفترض بأنها هذه الصورة

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7181

نحملها ونضعها على الفوتوشوب ونقوم بقصها حسب ما تراه مناسب وتصغيرها بالضغط على Ctrl+ T
ونضعها فوق الليرات الثلاث الاولى

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7182

الان نحدد لير الصورة ونضغط على Ctrl+ G لدمجها مع اللير الاول من المجموعه ونغير المود للير الى Multiply

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7183

ونكرر العملية مع الشكلين الباقيين وهذه هي النتيجه النهائية

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7184

الان لنقوم بوضع بعض الجماليات على الاشكال

حدد اللير المدموج مع الصورة اي اللير الاول من كل مجموعه واذهب الى
Layer>>layer style>>Blending Option

وضع الاعدادات كما في الصور

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7191
http://www.dzbatna.org/up/pic.php?u=287593InA&i=7192

طبعا البترن المستخدم هو بترن النقط المحفورة وسأرفقه مع الدرس مفصل

وهذه هي النتيجه

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7193

الان لاحظوا بأن الاشكال غير مرتبه وبعضها فوق بعض الان سنقوم بعملية اختيارية يعني يوجد طريقتين للعمل اما بأختيار كل لير على حدى والضغط على Ctrl+T وتصغير الليرات وترتيبها او بالقيام بالخطوات كما سأشرح طريقة لكم

الان قم بعمل Link على كل ثلاث ليرات متشابهة وايضا الصورة المدموجه بأحدهم كالتالي

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7185

ومن ثم نضغط من الكيبورد على Ctrl+ E ونكرر العملية على باقي الليرات ولا تنسى ان تكون اليرات متشابهة يعني كل مجموعه على حدى

وهذه النتيجه النهائية

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7186

لاحظ بأنك لن تستطيع التغيير على الاشكال بهذه الطريقة لأنها ستصبح بمثابة صورة

الان لنقم بتحريك الاشكال وتصغيرها وذلك بتحديد اللير والضغط على Ctrl +T وهذه النتيجه

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7187

الان لنعطي الهيدر header بعض الحركات الجمالية وهو حسب ذوقك او كما تعلمت من الدروس وانا اخترت هذه الحركه البسيطه

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

درس مفصل عمل اسلاك ملتويه ..... اعداد خالدالحربي (http://www.dzbatna.com/t103085/)


وهذا تطبيقي على الدرس مفصل


http://www.dzbatna.org/up/pic.php?u=287593InA&i=7188

الان قم بالسحب والالقاء على مساحة العمل وتذكر ان تدمج اللير الاول والثاني اي لير السلك ولير الفرش مع بعض بأستخدام طريقة الـ link التي شرح طريقةتها منذ قليل

لاحظ بأن السلك حجمة كبير وميلانة لن يساعدنا لوضعه بالهيدر header فماذا الحل

الحل بسيط جدا قم بأختيار اللير والضغط على Ctrl+ T وقم بتصغيره واضغط على Ctrl وتابع الضغط عليها وحرك الزوايا لتحصل على الشكل المناسب لوضعه على الهيدر header كما بالصورة

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7189

ستلاحظ احيانا ان السلك غير واضح او قليل نسبيا لا تهتم قم بدبل اللير اي تكريره وبيصير تمام

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

http://www.dzbatna.org/up/pic.php?u=287593InA&i=7190

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

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

واتمنى ان ارى منكم التطبيقات والدعم الكامل حتى اكمل الدورة

واي سؤال او استفسار انا جاهز وتحت امركم

واتمنى من الله العلي القدير ان اكون قد وفقت في هذا الشرح طريقة

وان اكون قد قدمت ما هو مفيد وجيد

وانتظروني بالدرس مفصل الثاني من هذه الدورة

دمتم بكل ود

انتظر تطبيقاتكم يا مبدعين

^__^

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif النقط المحفورة.zip (http://www.traidnt.net/vb/attachments/62897d1154282321-النقط-المحفورة.zip) (59.5 كيلوبايت, عدد مرات المشاهدة 950 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©