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

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

الصورة بعد رسم المربع ,,

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

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


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

وبعد ما ضغطت عليها طلعت لي نقطتين (واحده على اليمين وواحده على اليسار) ..
ذهبت انا للنقطه التي على اليمين ..


وقمت برفعها الى الاعلى قليلاً .. نجد ان المساحه من اول نقطه على اليمين الى اول نقطه على اليسار قد اصبحت متعرجه ومنحنيه ..!!

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


الآن نقوم بإضافة بعض الاعدادات الجميلة على البنر كما في الشكل ..


اصبح معنا البنر بهذا الشكل النهائي ..:


الآن وقبل ما ننتقل للفوتر .. نحاول ننظر لعملنا بنظرة (الناقد) وليس المعجب ..
ونحاول ان نصلح اي خطأ في البنر ..!!
مثلاً انا رأيت ان البنر يجب ان يكون ملتصق بسقف التصميم .. فقمت ومن خلال هذه الاداة برفعه الى الاعلى ..
وقمت كذلك بإعادة تحجيمه من خلال الضغط على (ctrl+t) او الذهاب الى ( edit -> free transform path ) والصاقه بالجانبين الايمن والايسر ..
فأصبح معنا بهذا الشكل

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


وبنفس اداة الباث التي قمنا باختيارها نوزع نقاط على الفوتر ..
الآن (ولكي نتعلم اكثر من حاله) انا لم اوزع النقاط بشكل عشوائي بل قمت بإظهار المسطره ووزعت النقاط بشكل منتظم (اظهار المسطره ctrl+r )


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

وبنفس طريقة البنر نقوم بإضافة بعض الاعدادات الجمالية :


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





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

آسف اذا قصرت في بعض التوضيحات او اخطأت في بعض التعابير ..
وانا جاهز لأي استفسار ..

تفضل اخوي النايف

http://www.i1i2.com/uploads/6ceed81710.gif

تحياتي لك

بالاول مشكور الف الف شكر اخوي النايف على الشرح الوافي

ثانيا الامارات ماشاء الله عليك طبقت بسرعه

وهذ1 هو تطبيقي الداج ^_^

http://www.r44r.net/uploads/wh_26833716.gif

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

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

الحمد لله إن الحاله في تطور :)

ومشــكور على النقد وإن شاء الله آحاول أستفيد من هذي الاغلاط

وانتظر الدرس الثالث بفارغ الصبر

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

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

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

الاخ العزيز النايف

احب اهنيك على ابداعك بهذا الشرح الرائع

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

وامنياتي يعجبك

( وامنياتي اشوف ملاحظاتكـ )

http://www.m5zn.com/uploads/cd10ffbd9d.jpg


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

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

بصراحـه كـل شـي واضـح وجميـل

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