المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : دورة تصميم الواجهات .. الحلقة الثالثة .. تقطيع الواجهة interface



loulou ange
10-30-2013, بتوقيت غرينيتش 08:48 PM
http://www.dzbatna.com/images/icons/smile.gif ط¯ظˆط±ط© طھطµظ…ظٹظ… ط§ظ„ظˆط§ط¬ظ‡ط§طھ .. ط§ظ„ط*ظ„ظ‚ط© ط§ظ„ط«ط§ظ„ط«ط© .. طھظ‚ط·ظٹط¹ ط§ظ„ظˆط§ط¬ظ‡ط© (http://www.dzbatna.com/t1048033/)




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


أهلاً بكم إخواني في الحلقة الثالثة في تصميم الواجهات و في هذه الحلقة سنتناول كيفية تقطيع الواجهة interface لتركيب installها فيما بعد ...


باسم الله نبدأ :


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


بعض الأوامر الهامة و التعرف على الأدوات .. طريقك للإبحار في عالم الفوتوشوب (http://www.dzbatna.com/t1046299/)


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



http://upload.dzbatna.net/upfiles/6Eh73321.gif



الآن بعد ما حددنا البانر مع مناطق صغيرة من الأعمدة نضغط Ctrl + X عشان نقطعه و من ثم نفتح عمل جديد بدون تغيير أي شي و من ثم نضغط Ctrl + V و بطلع معنا صورة البانر اللي قطعناها و من ثم نخزنها بصيغة JPG أو على حسب ما بتحب إما GIF أو JPG ... نرجع للواجهة interface نقطع الفوتر مع مناطق صغيرة من الأعمدة بنفس الطريقة و نفتح عمل جديد و نلصقه بالداخل أي بنفس الطريقة و بطلع معنا البانر و الفوتر بهذا الشكل مقطعين :


البانر Banner :



http://upload.dzbatna.net/upfiles/6Cm73393.gif



الفوتر Footer :



http://upload.dzbatna.net/upfiles/Wje73439.gif






الآن نرجع للواجهة interface و بنلاقي الأعمدة و أهم شيء نفتح قائمة Window و نختار منها Info عشان يطلع معنا نافذة حجم القطع و بنلاقي في النافذة أو المربع اللي طلع لنا علامة + نضغط عليها و نختار Pixels أول خيار كما في الصورة :



http://upload.dzbatna.net/upfiles/WZL73486.gif



الآن و بنفس أداة التحديد نقوم بتحديد قطعة من العامود الأيمن كما في الصورة :



http://upload.dzbatna.net/upfiles/JbT73533.gif



في نافذة Info اللي خلينا فيها الحجم بالبكسل بطلع لنا عرض التحديد بالبكسل و أهم شي نعرفه و نحفظه كما في الصورة :



http://upload.dzbatna.net/upfiles/SIX73646.gif



أنا طلع معاي عرض العامود الأيمن 14 بكسل .. الآن نقوم بالضغط على Ctrl + X لقطع التحديد و من ثم نفتح عمل جديد و نلصق التحديد فيه بالضغط على Ctrl + V ... الآن على العامود الأيسر نفس الخطوات و أهم شي تحدد بنفس عرض العامود الأيمن يعني أنا طلع معاي 14 بكسل لازم أحدد العامود الأيسر بعرض 14 بكسل يعني عرض متساو للعامودين و الطول لا يهم مهما كان و نقطعه و نلصقه بنفس الخطوات ... الآن هذه صور العامود الأيمن و الأيسر :


العامود الأيمن Right Column :



http://upload.dzbatna.net/upfiles/rO773763.gif



العامود الأيسر Left Column :



http://upload.dzbatna.net/upfiles/tVb73787.gif



الآن انتهينا من التقطيع و تأكد من الأربع صور و خزنها في مجلد خاص بها ... أتمنى للجميع التوفيق في هذه الحلقة البسيطة و تابعونا في حلقات قادمة إن شاء الله و الله يوفقكم و يوفقنا جميعاً ... شكرا لكم ... مع أطيب التمنيات لكم بالنجاح في أعمالكم ... أخوكم أحمد Allulu http://www.dzbatna.com/images/smilies/icon31.gif







ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



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

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى