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

[walid]

بسم الله الرحمن الرحيم ,,
الحمد لله وحدة وصلاةً وسلاماً على من لانبي بعدهـ :
وبعد ..
تعلمنا في الدروس السابقه طريقة رسم خلفية جميله للتصميم ,, وتعلمنا ايضاً كيفية رسم البنرات (الهيدر header والفوتر) بإحتراف .. كما تعلمنا ايضاً طريقة رسم مدخل الشات وروابطه ..
للتذكير :
دورة لتصميم واجهات المواقع (باحتراف) ..::+::.. الجزء الاول ..::+::.. (http://www.dzbatna.com/t288836/)

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

دورة لتصميم واجهات المواقع (باحتراف) ..::+::.. الجزء الثالـ أ ـث ..::+::.. (http://www.dzbatna.com/t288854/)
الآن وفي هذا الجزء الثالـ ب ـث من سلسلة الدروس ,, سنتعلم وكما وعدتكم طريقة رسم المساحات الإعلانية ,,
وبدون ان نطيل في الكلام سندخل مباشرةً في الشرح طريقة ,,
طبعاً وقبل ان نبدأ يجب ان يعلم الجميع ان طريقة رسم المساحات الاعلانية تختلف من مصمم لآخر .. فهناك من يضح مساحتين بنفس الحجم احداهمها علوية والاخرى سفلية
ومنهم من يضع بنر علوي وبنرين (اصغر منه) سفليين احدهما في اليمين والآخر في اليسار ,,
المهم ان الهدف من الشرح طريقة هو معرفة كيفية التطبيق فقط ,, اما الافكار والعمل عليها فتعتمد على الشخص حسب تفكيرهـ وخياله ..
بسم الله نبدأ ,,
اولاً :
من خلال اداة رسم المربع (تعلمنا استخدامها سابقاً) نقوم برسم مستطيل في منتصف التصميم (يفضل استخدام المسطرة) ويكون تحت البنر وفوق مدخل الشات :
http://www.l22l.com/l22l-up-1/5062f6f45f.jpg
هذا المستطيل الذي رسمناه سيكون هو المساحه الاعلانية الاولى التي فوق الشات ,,
الآن نقوم بوضع الصور والكتابات داخل هذا المستطيل ,,
فنقوم اولاً بإحضار الصورهـ التي نريد اضافتها ..!!
من خلال file ثم open وتحديد مكان الصورهـ وجلبها لمكان العمل ..
http://www.l22l.com/l22l-up-1/089719f15e.jpg
الآن وبعد ان اخترت صورة هذا الطفل وجلبتها الى ساحة العمل اقوم اولاً بتفعيل المستطيل الذي رسمته وذلك بالضغط عليه من خلال قائمة الليرات
http://www.l22l.com/l22l-up-1/9479830e8a.jpg
الآن اذهب الى هذه الاداهـ http://www.l22l.com/l22l-up-1/301030769d.jpg واقوم بتحديد احد اجزاء المستطيل من خلالها ..
http://www.l22l.com/l22l-up-1/9313da4ef0.jpg
ثم اضغط على نفسك التحديد بالزر الايمن واختار ثالث خيار واضع القيمه التي اريد ,,
انا مثلاً اخترت القيمه 20
http://www.l22l.com/l22l-up-1/12f38564ea.jpg
الآن اصبح المستطيل جاهزاً لاستقبال الصورهـ وبالشفافيه المطلوبه ,,
نذهب الآن الى الصوره ونقوم بتحديدها ونسخها من خلال الضغط على ctrl+a للتحديد
ثم ctrl + c للنسخ
http://www.l22l.com/l22l-up-1/7d4726947a.jpg
ثم اذهب الى ساحة العمل الآن ومن خلال الضغط على ctrl+shift+v اقوم بلصق الصورهـ على المستطيل الذي نريدهـ ان يكون مساحة اعلانيه ,,



اصبح العمل لدينا كما في الشكل
http://www.l22l.com/l22l-up-1/448fa76e0d.jpg

الآن ومن خلال الضغط على ctrl+t اقوم بتحديد مكان الصورهـ بشكل اكثر دقه ,, اي انني اقوم بتصغيرها من اعلى ومن الجانبين جتى تصبح متطابقه مع شكل المستطيل الصغير .,.
فأصبحت معنا كما في الشكل ,,
http://www.l22l.com/l22l-up-1/973f4ec5f7.jpg
الآن بقي علينا ان نقوم بدمج الصورهـ مع المستطيل حتى تأخذ مساحته فقط ,,
وذلك من خلال الضغط على ctrl+g
اصبحت الصورهـ الآن متطابقه تماماً مع المستطيل الذي رسمناهـ

http://www.l22l.com/l22l-up-1/36e72d0f03.jpg
فإن اردنا وضع صورهـ على يسار المستطيل لنا الحريه ويجب عمل نفس ما قمنا به لوضع الصورهـ الاولى ..
وهذا ما فعلته انا عندما احضرت صورهـ اخرى ووضعتها في الوجه المقابل للصورهـ الاولى ,,
فقمت باحضار صورة وردهـ وبنفس الطريقة وضعتها في المستطيل ,,
الآن نريد ان نخفف من شفافية الصورتين وذلك عن طريق الآتي :
الضغط على الصورهـ المراد تخفيف شفافيتها ,, ثم الذهاب الى fill وتخفيف النسبة من 100% الى اي رقم نريدهـ
http://www.l22l.com/l22l-up-1/da486b51fc.jpg
وبنفس الطريقه نخفف شفافية الصورهـ الاخرى ..
الآن بقي علينا ان نكتب وصف مساحة للاعلان وكذلك رابط الموقع ,,
كما في الشكل
http://www.l22l.com/l22l-up-1/16701f4943.jpg

ولكي نقوم برسم مساحة اعلانية سفلية كل ما علينا هو القيام بدمج كل طبقات المساحة التي تعلمنا كيفية رسمها (تعلمنا طريقة الدمج سابقاً) ومن ثم تكرير الطبقة وتحريكها بأداة التحريك (تعلمناها سابقاً) الى المكان الذي نريد وضعها فيه ,,
وبكذا نكون انتهينا من رسم المساحات الاعلانية على ساحة العمل ,,
فأصبح لدينا الشكل النهائي كالتالي ,,
http://www.l22l.com/l22l-up-1/842dfea322.png
درس مفصل اليوم كان جداً بسيط ولم احاول ان اكثر من الشرح طريقة حوله لكي لا يفقد المتعلم تركيزهـ ..
انتظرونا في الدروس القادمه ..



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