:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع)

Admin عدد الرسائل : 15 تاريخ التسجيل : 21/11/2007

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

طبعا مواضيع الدورة منقولة

وحقوق الدروس كلها للأخ المبدع الاستاذ المعاقب

جزاه الله خير الجزاء

وقد نقلتها لكم للإستفادة لا غير

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

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

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

- اللون البرتقالي (وهو المستخدم بهذه الدورة)
:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

-اللون الازرق
:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

-اللون الاحمر
:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

الان قم بأختيار الوانك حسب الجموعات في الخطوه الاولى او اي الوان اخرى تحبها
:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

الان لنقم بأختيار اداة التعبئة :::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

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

3-الان لنبدأ برسم اجزاء الهيدر او القسم العلوي من الواجهة , قم بأختيار اداة البن تول :::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

أنقر هنا لتحميل الملف

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

اولا: قم بتكرير كل طبقه على حدا
:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

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

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

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

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

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

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

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

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

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

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

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

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

:::1:::درس تصميم الهيدر(دورة تصميم واجهة موقع) Pic

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

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

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

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

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

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

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

دمتم بكل ود

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

^__^