دورة لتصميم واجهات المواقع (باحتراف) ..::+::.. الجزء الاول ..::+::.. ا
 

بسم الله الرحمن الرحيم ..
الحمد لله رب العالمين والصلاة والسلام على اشرف الانبياء والمرسلين وبعد :
يسرني ان اقدم للجميع دورة (تصميم واجهات المواقع من الالف للياء بكل دقة واحتراف) ..
وان شاء الله اقدر افيدكم بشيء مثمر ومفيد ..
كل اللي اتمناه ان الجميع يدعي لي بالتوفيق والنجاح ,,
وخلونا نبداً بأول درس وهو (كيفية رسم الخلفيات) ..
بسم الله

اولا :
نقوم بتحديد مقاس العمل (العرض يجب ان لا يتعدى 777 بيكسل لأن هذا يتسبب في ظهور المسطرهـ) مع حريتنا في اختيار الارتفاع حسب ما يحتاجه العمل ,, انا في الشرح استخدمت 800


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

ثالثاً :
نقوم بتعبئة الخلفية من خلال ادارة السطل بأحد الالوان المختاره (ممكن تعبيها بأداة التدرج كل واحد واللي يناسبه) .

رابعاً وهذا المهم :
الآن الخلفية عشان تاخذ تأثيرات حلوهـ وتحتوي على تدرجات رائعه لازم نضيف لها حركات تعطيها رونق
ومنظر جميل ,,
الآن واحد بيسألني كيييف ؟؟
لازم تركزون معي زين .. ترى الفكره لها اكثر من شكل والمهم انكم تاخذون الخبره من هنا وبعدين تبدعون على راحتكم ..
مثلاً .. انا هنا بضيف مربع في نص التصميم بلون غير عن لون الخلفية .. عن طريقة اداة رسم الاشكال كما في التالي

وهنا الشكل بعد اضافة المربع


الآن المربع الذي اضفناه بالنص بنقوم بإضافة بعض التأثيرات له ..


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

من خلال اداة الباث نقوم بتوزيع نقاط ع العمل كما هو موضح بالصوره ..

مثلاً انا وضعت ثلاث نقاط في كل جانب ومقابل كل نقطه نقطه في الجانب الآخر .. وكل شخص منكم يوزع النقاط مثل ما يريحه (الشغل هنا كمثال بس) ..
ملاحظة : عشان يكون الشكل متنااسق ومعتدل لازم نضع مقابل كل نقطه نقطه مقابلها بنفس المكان (بامكاننا استخدام المسطرهـ في ذلك) بينما نجد هناك مصممين آخرين يحبون ان يكون الشكل عشوائي ..!!
فإذا كنت ممن يرغبون بأن يكون الشكل عشوائي لك الحق في توزيع النقاط بالشكل الذي تحب
المهم بعد ما نوزع النقاط ابيكم تركزون معاي شوي .. عشان تعرفون كيف رح نتصرف مع النقاط الموزعه على العمل (انا هنا بعطيكم طريقة خاصة على اساس ما تحتاجون الى استخدام اداة الباث باحتراف .. لان استخدامها باحتراف يحتاج وقت للتعلم وهذا شيء ممكن يصعب مهمتكم) ..
الطريقه هذي جداً بسيطه ,, يعني الحين تروح للنقطه اللي على اليمين وتضغط عليها بأداة الباث (نفس اداة
الباث التي رسمت بها النقاط)
كما بالصورهـ

الآن بعد ما ضغطنا على النقطه الاولى كيف نتعامل معها ؟؟
عن طريق الاسهم اللي في كيبوردك تحركها مثلاً (5 مرات لليمين) ..
صارت معانا بالشكل هذا


الآن ركزوا معي مرة ثانيه
كيف رح نتصرف مع النقاط الاخرى ..؟؟
طبعاً نروح لنقطه المقابله للنقطه اللي عملناها
نسحبها بنفس الطريقة لليسار 5مرات
نجي للنقطاطاللي في نص العمل
مثلاً النقطه اللي على يميني .. اروح اضغط عليها واسحبها بنفس الطريقة الى اليسار مثلاً (5مرات)
واللي مقابلها نسحبها لليمين (5مرات)
نفس الشيء نعمله للنقطتين المتقابلتين اللي في اسفل العمل ..
بالنهاية رح يطلع معنا الشكل كما يلي

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

وبنفس الطريقة نضيف للمربع اللي رسمناه باترن آخر
تطلع معنا الخلفية بشكلها النهائي

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

آسف على الاخطاء الاملائية ماقدرت اعدلها بسبب انتهاء وقت تعديل المشاركة :(

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

على هذا المجهود

وجزاك الله الف خير

لي رجعة بالتطبق ان شاء الله

العفو ,,
وانا منتظر تطبيقك ..

_________________________________
ليش ما في تفاعل من الأعضاء ..!!
بصراحه كذا ما في شيء يخلينا نتحمس لاكمال الدورهـ ..:(

أستمر أخوي الـــنـــايـــف بارك الله فيك

بداية موفقة وشرح سلس والكل متابع (ومن وجهة نظري) يفضل أن يكون النقاش والردود بعد إنتهاء الشرح حتى تكون المتابعة أفضل والشرح متّصل :) وياليت لو يتم التوضيح في الشرح عند إضافة أي تأثير هل يتم إضافة طبقة أو لير جديد ولا لا حتى يتم التراجع في حالة الخطأ

الله يقويك وجزاك الله خير ( قو هد :) )

تحيّاتي
أبومساعد

لا ياخوي النايف

ترا اغلب مواضيع الويب العربي كذ1 حالها

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

بصراحه ودي اتعلم كيف اصمم واجهه والشرح اعجبني وانتظر تطبيقي ياغالي

هلا والله اخوي ابو مساعد ..
شكراً لك واقتراحك جداً مميز ,, ولكن في نفس الوقت قد يكون من الافضل رؤية تطبيق كل من يريد المشاركة في الدوره حتى يتم انتقاده على الاخطاء ..
كذلك الرد على الاستفسارات التي لم يفهمها البعض .. والسبب اننا نريد ان لا نمر من اي درس بدون ان ننتهي منه كلياً ..
بالنسبة لاستفسارك اخوي الغالي ,,
انت الآن لما قمت بتعبئة الخلفية ,, قمت بعد ذلك برسم اشكال داخلها لكي تمنحها بعض الجمال ..
اساساً هذه الاشكال تأخذ طبقة مستقله لكي تقوم بمسحها او تعديلها اذا لم تقتنع بشكلها ..
اما بالنسبة لاستخدام اداة الباث فهي لا تعمل الا على الطبقة المراد العمل عليها (يعني ما تعطيها لير جديد) والتراجع عن اخطاءك في اداة الباث تتم عن طريق ( ctrl+z) للتراجع لمره واحدهـ ..
و (edit-> step backward) للتراجع لأكثر من مرهـ ..
اتمنى اكون فهمت اللي تقصده ووضحت لك

حياك اخوي بحر الاحساس ..
مقدر الوضع وانا اخوك ,, ومادامك وغيرك تتابعون معي انا بحاول اوصل لكم اكبر قدر من الفايدهـ ..
وان شاء الله ما يروح تعبك بلاش وتستفيد على الاقل لو القليل وهذا والله شيء يسعدني ..!!

انتظرونا في الجزء الثاني قريباً ان شاء الله

متابعين متابعين متابعين

واصل واصل واصل :) :) :)

اسف ما سويت تطبيق

شرحك روعه جزاك الله خير

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

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

يعطيك العافيه يا النايف

هذا تطبيق


اتريا تعليقاتك

وشكرا لك على المجهود الرائع

http://www.i1i2.com/uploads/792ad3c939.gif

تحياتي

هلا والله اخوي الامارات للاستضافه ..
صدقني تطبيقك جداً جيد ..
وقمة في الوضوح ..
والتقاطيع هذي اللي ممكن تعتبر عاديه لمن يشاهدها (لوحدها) هي من يمنح التصميم بعداً آخر من الجمال بعد توزيع الروابط والبنرات عليها ..!!
تطبيق جيد جداً منك وبما انك فهمت معنى العمل لم يعد امامك سواء ايجاد الفكره وتطبيقها ..
فأنت اذن بحاجه للثقه بنفسك وايجاد الافكار المناسبة والعمل عليها ..
يعطيك العافية

اشكرك اخوي النايف وفي انتظار درسك الجديد

ويعطيك الف عافيه

تم بالفعل انزال الجزء الثاني من الدرس
http://www.arabwebtalk.com/showthread.php?p=259334 #post259334

شآكر لك يالغلا النقد

ومثلك عارف برنامج الفوتوشوب عندي من زمآن لكن ماعمري فكرت أجربه

دايم اجرب برنامج الرسام وخلافه :)

وإن شاء الله تصلح الإمور مع الوقت

هذي هي بدايات اي شخص بأي مجال ..
تصدق في بداياتي ما كنت اقدر ارسم شكل زي اللي انت عملته ..!!!
النجاح لا يأتي دفعه :d
حاول تتعلم وان شاء الله بيجي يوم تتذكر فيه بداياتك بشيء من الطرافه
وهذا حالنا كلنا مع البدايات ..
الله يوفقك وشاكر لك تفاعلك

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

الاخ العزيز النايف اشكرك على الدرس الرائع با الفعل .

مميز ولك خالص الشكر والتقدير .

( وهذا تطبيقي في هذا الدرس )

وياليت ملاحظاتكـ ..

http://www.m5zn.com/uploads/5d7882e335.jpg

ولكـ خـآلص الشكر والتقدير .

(أخوك) صـآلح ksa