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







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

 بعد أن انتهينا و لله الحمد من تصيميم هيكل الواجهة و إضافة تأثيرات و أشكال جميلة عليها و زخرفتها نأتي الآن إلى إضافة صور للواجهة و إضافة تأثيرات كذلك و يمكنك مراجعة قسم دروس التصميم لمعرفة كيفية إضافة التأثيرات و التعامل مع الصور :  و الآن نبدأ باسم الله : افتح الواجهة اللي سويناها و هي ملف PSD ... الآن يمكن تلاقي منطقة العمل صغيرة و لازم تصمم و هي على دقتها الأخيرة يعني 100% عشان ما يطلع التصميم مشوه و إنت بتصمم على الصغيرة و بعدين تكبرها يعني من القوائم في الأعلى اختر Window بعدين Navigator و راح تطلع لك منطقة بكون مكتوب فيها 50% أو أي رقم كان و إنت أكتب بدلا منه 100 و اضغط Enter .. الآن قم بإنشاء طبقة (لير) جديدة و خليها في منطقة الليرات بعد طبقة الخلفية يعني آخر شي تحت و بتكون الثانية من تحت و الكل عارف كيف ينشئ طبقة (ياشيخ قلنا كيف و اسكت ) Ctrl + Shift + N ... و بعد كل هذا نختار لون على حسب لون واجهتنا و يكون غامق شوي و بعدها نختار أداة الفرشاة و من هذا الدرس تستطيع رؤية جميع الأدوات و طريقة استخدامها و بعض مهام و أوامر الفوتوشوب : http://www.traidnt.net/vb/showthread.php?t=1046299 الآن و بعد اختيار أداة الفرشاة و اللون نقوم بالتلوين بالماوس على المكان الفارغ في الواجهة في البانر طبعا لأن الصور سيتم إضافتها فقط في البانر يعني نلون المنطقة الفارغة بين أول الواجهة و المستطيلات اللي أنشأناهم للبانر في الأعلى و بكون اللون كما في الصورة (الفكرة بتوصلك عند مشاهدة الصورة) :

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

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

الآن نقوم بإضافة باقي الصور و طبعا كلها نضيفها في البانر و نسوي نفس الطرق و لما نجمع الصور كلها نبدأ بالدمج بواسطة هذا الدرس التالي : http://www.traidnt.net/vb/showthread.php?t=1049735 يعني بواسطة درس دمج الصور نستطيع الدمج بين الصور و الآن نكون قد انتهينا من البانر و أضفنا الصور و دمجناها و هذا الشكل النهائي بعد الدمج :

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

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

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

الآن نقوم بتخزين الواجهة بصيغة JPG و من هنا توجد طريقة التخزين و نرجو من الجميع مراجعة الدروس في قسم الدروس التعليمية : http://www.traidnt.net/vb/showthread.php?t=1046299 إن شاء الله تكون هذه الحلقة بسيطة لأنه فقط علينا دمج الصور و كتابة بعض الكلام اللي يعجبنا و نراكم في الحلقة القادمة ... شكرا لكم و السلام عليكم .. AhMeD

الملفات المرفقة

نوع الملف : zip Stars Brush.zip (258.2 كيلوبايت


http://www.traidnt.net/vb/showthread.php?p=9725712#post9725712


الحلقة الاولي __ الحلقة الثانية __ الحلقة الثالثة __ الحلقة الرابعة _ الحلقة الخامسة _ الحلقة السادسة_ الحلقة السابعة__ الحلقة الثامنة