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

[admin]

بسم الله الرحمن الرحيم ,,
في الدرس مفصل السابق (http://www.dzbatna.com/t288836/) تعلمنا كيف نصنع الخلفيات وقلنا انه لازم ما نستعجل على انفسنا في التعلم لأن التعلم يحتاج للصبر والتطبيق المتواصل ,,
ورغم ان الجزء الاول كان التفاعل فيه ما يشجع لكن لازم اوفي بتعهدي معكم واكمل هالدورهـ اللي ان شاء الله تعم على كل من يتابعها الفائده ..
طبعاً وكما قلنا وقفنا في الدرس مفصل السابق عند كيفية صنع الخلفيات ومنحها جماليات التشكيل العشوائي والباترنات ..
الآن وفي هذا الدرس مفصل بنتعلم سوا كيف نضيف بنرات للتصميم ..
ولاحظوا اني ماني مستعجل على اعطاءكم الدروس يعني يكفي الدرس مفصل الاول انكم تتعلمون صنع الخلفيات ..
عشان تاخذون مهله كافية في التطبيق ..
والحين يكفي انكم تتعلمون بس رسم الهيدر header والفوتر باحتراف (البنرات) ..
وفي نفس الوقت تجزيء الدروس يكون اكثر فايدهـ واصلح للاستيعاب بالذات لمن ليس لديهم خبره في التصميم ,,
المهم ومثل ما قلت لكم ابيكم تركزون معي في طريقة تصميم الهيدر header والفوتر (البنرات) لأنها اصعب واهم من الدرس مفصل الاول ..
بسم الله :
اولاًُ ..نقوم ومن خلال هذه الاداه برسم مربع اعلى التصميم (بنر)
http://www.l22l.com/l22l-up-1/92fa6417bc.jpg
الصورة بعد رسم المربع ,,
http://www.l22l.com/l22l-up-1/7eaeea5587.jpg

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

http://www.l22l.com/l22l-up-1/2a26c3264c.jpg

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

http://www.l22l.com/l22l-up-1/8e37493ce2.jpg

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

http://www.l22l.com/l22l-up-1/31c2dbf7dd.jpg

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

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

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

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

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

http://www.l22l.com/l22l-up-1/5ed925ac70.jpg

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

http://www.l22l.com/l22l-up-1/731333172d.jpg

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

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

الآن وقبل ما ننتقل للفوتر .. نحاول ننظر لعملنا بنظرة (الناقد) وليس المعجب ..
ونحاول ان نصلح اي خطأ في البنر ..!!
مثلاً انا رأيت ان البنر يجب ان يكون ملتصق بسقف التصميم .. فقمت ومن خلال هذه الاداة http://www.l22l.com/l22l-up-1/88192d8198.jpg برفعه الى الاعلى ..
وقمت كذلك بإعادة تحجيمه من خلال الضغط على (ctrl+t) او الذهاب الى ( edit -> free transform path ) والصاقه بالجانبين الايمن والايسر ..
فأصبح معنا بهذا الشكل
http://www.l22l.com/l22l-up-1/f320bd53ee.jpg

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




http://www.l22l.com/l22l-up-1/2ac025e696.jpg

وبنفس اداة الباث التي قمنا باختيارها نوزع نقاط على الفوتر ..
الآن (ولكي نتعلم اكثر من حاله) انا لم اوزع النقاط بشكل عشوائي بل قمت بإظهار المسطره ووزعت النقاط بشكل منتظم (اظهار المسطره ctrl+r )
http://www.l22l.com/l22l-up-1/bf9d299b8c.jpg

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

http://www.l22l.com/l22l-up-1/3590db7981.jpg

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

http://www.l22l.com/l22l-up-1/64819707e2.jpg

فأصبح معنا الآن الشكل النهائي للتصميم بعد رسم الخلفية والبنرات كالتالي :
http://www.l22l.com/l22l-up-1/556c9bbfd1.png

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



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