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

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

اولا :
نقوم بتحديد مقاس العمل (العرض يجب ان لا يتعدى 777 بيكسل لأن هذا يتسبب في ظهور المسطرهـ) مع حريتنا في اختيار الارتفاع حسب ما يحتاجه العمل ,, انا في الشرح طريقة استخدمت 800
http://www.l22l.com/l22l-up-1/d352c5bf96.jpg

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

http://www.l22l.com/l22l-up-1/7b16bc14a9.jpg

ثالثاً :



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

http://www.l22l.com/l22l-up-1/aa270a1c81.jpg
رابعاً وهذا المهم :
الآن الخلفية عشان تاخذ تأثيرات حلوهـ وتحتوي على تدرجات رائعه لازم نضيف لها حركات تعطيها رونق
ومنظر جميل ,,
الآن واحد بيسألني كيييف ؟؟
لازم تركزون معي زين .. ترى الفكره لها اكثر من شكل والمهم انكم تاخذون الخبره من هنا وبعدين تبدعون على راحتكم ..
مثلاً .. انا هنا بضيف مربع في نص التصميم بلون غير عن لون الخلفية .. عن طريقة اداة رسم الاشكال كما في التالي
http://www.l22l.com/l22l-up-1/96520d888a.jpg
وهنا الشكل بعد اضافة المربع
http://www.l22l.com/l22l-up-1/133f27c4c9.jpg

الآن المربع الذي اضفناه بالنص بنقوم بإضافة بعض التأثيرات له ..
http://www.l22l.com/l22l-up-1/6c21b99045.jpg

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

http://www.l22l.com/l22l-up-1/d7396475a6.jpg

من خلال اداة الباث نقوم بتوزيع نقاط ع العمل كما هو موضح بالصوره ..
http://www.l22l.com/l22l-up-1/840334395b.jpg

مثلاً انا وضعت ثلاث نقاط في كل جانب ومقابل كل نقطه نقطه في الجانب الآخر .. وكل شخص منكم يوزع النقاط مثل ما يريحه (الشغل هنا كمثال بس) ..
ملاحظة : عشان يكون الشكل متنااسق ومعتدل لازم نضع مقابل كل نقطه نقطه مقابلها بنفس المكان (بامكاننا استخدام المسطرهـ في ذلك) بينما نجد هناك مصممين آخرين يحبون ان يكون الشكل عشوائي ..!!
فإذا كنت ممن يرغبون بأن يكون الشكل عشوائي لك الحق في توزيع النقاط بالشكل الذي تحب
المهم بعد ما نوزع النقاط ابيكم تركزون معاي شوي .. عشان تعرفون كيف رح نتصرف مع النقاط الموزعه على العمل (انا هنا بعطيكم طريقة خاصة على اساس ما تحتاجون الى استخدام اداة الباث باحتراف .. لان استخدامها باحتراف يحتاج وقت للتعلم وهذا شيء ممكن يصعب مهمتكم) ..
الطريقه هذي جداً بسيطه ,, يعني الحين تروح للنقطه اللي على اليمين وتضغط عليها بأداة الباث (نفس اداة
الباث التي رسمت بها النقاط)
كما بالصورهـ
http://www.l22l.com/l22l-up-1/1d743d0ca8.jpg
الآن بعد ما ضغطنا على النقطه الاولى كيف نتعامل معها ؟؟
عن طريق الاسهم اللي في كيبوردك تحركها مثلاً (5 مرات لليمين) ..
صارت معانا بالشكل هذا
http://www.l22l.com/l22l-up-1/9a23280e47.jpg

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

http://www.l22l.com/l22l-up-1/6420518804.jpg

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

http://www.l22l.com/l22l-up-1/1fd0c14c02.jpg

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

http://www.l22l.com/l22l-up-1/7a1ba4e671.png

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



https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©