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

[فارس قطر]

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

بعد أن انتهينا و لله الحمد من تصيميم هيكل الواجهة و إضافة تأثيرات و أشكال جميلة عليها و زخرفتها نأتي الآن إلى إضافة صور للواجهة

و إضافة تأثيرات كذلك و يمكنك مراجعة قسم دروس التصميم لمعرفة كيفية إضافة التأثيرات و التعامل مع الصور :

http://www.traidnt.net/vb/forumdisplay.php?f=4

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

افتح الواجهة اللي سويناها و هي ملف PSD ... الآن يمكن تلاقي منطقة العمل صغيرة و لازم تصمم و هي على دقتها الأخيرة يعني 100% عشان ما يطلع التصميم مشوه و إنت بتصمم على الصغيرة و بعدين تكبرها يعني من القوائم في الأعلى اختر Window بعدين Navigator و راح تطلع لك منطقة بكون مكتوب فيها 50% أو أي رقم كان و إنت أكتب بدلا منه 100 و اضغط Enter .. الآن قم بإنشاء طبقة (لير) جديدة و خليها في منطقة الليرات بعد طبقة الخلفية يعني آخر شي تحت و بتكون الثانية من تحت و الكل عارف كيف ينشئ طبقة (ياشيخ قلنا كيف و اسكت :bleh:) Ctrl + Shift + N ... و بعد كل هذا نختار لون على حسب لون واجهتنا و يكون غامق شوي و بعدها نختار أداة الفرشاة و من هذا الدرس تستطيع رؤية جميع الأدوات و طريقة استخدامها و بعض مهام و أوامر الفوتوشوب :

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

الآن و بعد اختيار أداة الفرشاة و اللون نقوم بالتلوين بالماوس على المكان الفارغ في الواجهة في البانر طبعا لأن الصور سيتم إضافتها فقط في البانر يعني نلون المنطقة الفارغة بين أول الواجهة و المستطيلات اللي أنشأناهم للبانر في الأعلى و بكون اللون كما في الصورة (الفكرة بتوصلك عند مشاهدة الصورة) :

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

و تستطيع استخدام أداة التحديد و رسم مستطيل في الأعلى على المكان الفارغ كاملا و من ثم تعبئته باللون و هذه الطريقة أسرع طبعا و لكن حبيت أبسط لكم لمعرفة طرق أخرى .. الآن و بعد التلوين نقوم بفتح الصور التي نريدها في البانر و إضافة التأثيرات عليها و مثل ما قلتلكم عندكم دروس التأثيرات و درس الأوامر و التعرف على الأدوات أرجو منكم جميعا مراجعتها جيدا .. بعد إضافة التأثيرات على الصورة الأولى مثلا و الضغط على Ctrl + Shift + E نقوم بسحبها إلى منطقة العمل في الواجهة و أهم شي تكون فوق طبقة التلوين اللي أنشأناها قبل قليل يعني تكون الثالثة من تحت في منطقة الطبقات و من ثم نختار الـ Mode لطبقة هذه الصورة Luminosity من منطقة الطبقات كما في الصورة :

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

الآن إذا كانت الصورة كبيرة و شفناها في جميع أنحاء الواجهة إما أن نقوم بقص الزوائد بواسطة أداة التحديد يعني نحدد على المكان الزائد بعد المستطيلان يعني بعد البانر و نقوم بالضغط على زر Delete أو أن نقوم بالضغط على Ctrl + T لتصغير الصورة و جعلها في الاعلى فقط في البانر و من ثم نختار علامة الصح فوق على اليمين في الأعلى كما في الصورة :

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

الآن نقوم بإضافة باقي الصور و طبعا كلها نضيفها في البانر و نسوي نفس الطرق و لما نجمع الصور كلها نبدأ بالدمج بواسطة هذا الدرس التالي :

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

طبعاً تم اختيار الدرس عشوائياً من بين الدروس و تستطيع إيجاد الكثير من دروس الدمج بالطرق المختلفة على الرابط التالي :

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

يعني بواسطة دروس دمج الصور نستطيع الدمج بين الصور و الآن نكون قد انتهينا من البانر و أضفنا الصور و دمجناها و هذا الشكل النهائي بعد الدمج :

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

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

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

الآن اللي علينا إنه نكتب كلمة مثلا و تكون بشكل جميل و لدينا كثير من الدروس في قسم الدروس للتعامل مع الكتابة بأشكال مختلفة و متناسقة جميلة .. الآن نقوم بكتابة اسم موقعنا على البانر مثلا Allulu4Design و بيطلع معنا هذا الشكل :

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

و من ثم نكتب على الزخارف و الأشكال اللي سويناها اللي يعجبنا و من ثم بطلع معنا إن شاء الله هذا الشكل النهائي (تستطيع إضافة بعض الأشكال Shapes على التصميم) :

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

الآن نقوم بتخزين الواجهة بصيغة JPG و من هنا توجد طريقة التخزين و نرجو من الجميع مراجعة الدروس في قسم الدروس التعليمية :

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

إن شاء الله تكون هذه الحلقة بسيطة لأنه فقط علينا دمج الصور و كتابة بعض الكلام اللي يعجبنا و نراكم في الحلقة القادمة ... شكرا لكم و السلام عليكم .. AhMeD :icon31:


الملفات المرفقة http://www.traidnt.net/vb/images/attach/zip.gif Stars Brush.zip (http://www.traidnt.net/vb/attachment.php?attachmentid=319536&d=1227555544) (258.2 كيلوبايت)