دورة تصميم الواجهات .. الحلقة الثالثة .. تقطيع الواجهة

[فارس قطر]

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

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

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

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

http://www.traidnt.net/vb/showthread.php?t=1046299

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

http://www.allulu.org/dros/wajeha/03/01.gif

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

البانر Banner :

http://www.allulu.org/dros/wajeha/03/02.gif

الفوتر Footer :

http://www.allulu.org/dros/wajeha/03/03.gif

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

http://www.allulu.org/dros/wajeha/03/04.gif

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

http://www.allulu.org/dros/wajeha/03/05.gif

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

http://www.allulu.org/dros/wajeha/03/06.gif

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

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

http://www.allulu.org/dros/wajeha/03/07.gif

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

http://www.allulu.org/dros/wajeha/03/08.gif

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