قبل البدء في الدرس أرجو منكم رجاء شخصي إخواني و أخواتي الأعزاء .. ألا تنسوا الدعاء لأخونا وليد البريدي مؤسس الموقع بالرحمه و المغفره ...

و الأن أهلا و سهلا بكم مره أخرى في سلسلة الدروس المترجمه حصريا لبكسل بواسطتي لبكسل

فكرة درس اليوم أعجبتني لذالك قمت بترجمته , أتمنى أن تعجبكم فكرته .. سنتعلم سويا في هذا الدرس تصميم الواجهة الإلكترونية التي تظهر عندما يرتدي Iron Man الألة الخاصة به حتى يكون الكلام واضح شاهد النتيجة النهائية للدرس في الصورة التالية


الخطوة الأولى

قم بفتح مساحة عمل جديدة بخلفية سوداء

سنستعمل الأبعاد 1920x1200 pixels





الخطوة الثانية

قم بفتح الصورة التي تريد تطبيق الدرس عليها



الخطوة الثالثه

قم بإنشاء مجلد في لوحة الطبقات و سمي هذا المجلد Face

قم بنقل الطبقة الخاصة بالصورة التي فتحناها في مساحة العمل إلى هذا المجلد الجديد

بعد ذلك قم بتنشيط المجلد مرة أخرى و بعدها إذهب إلى Layer>Layer Mask>Reveal All

نستعمل الآن أداة الفرشاة ذات الإختصار (B) , و نستعمل معها اللون الأسود لحذف المناطق التي لا نريدها أن تكون في الصورة كما في الصورة التالية ..



الخطوة الرابعة

قم بعمل Duplicate أو تكرير للطبقة

بعدها نذهب إلى Filter>Blur>Gaussian Blur

و نستعمل القيمة 6 pixels في الـ Radius

و نستعمل الآن أداة Burn Tool ذات الإختصار (O) و نستعملها حول المناطق التي نريدها أن تبدو داكنة أكثر

إستعمل الصورة التالية كمرجع لك

أيضا إستعمل أداة Dodge Tool لجعل بعض المناطق فاتحة اللون أكثر من غيرها ...



الخطوة الخامسة

بإٍستعمال الممحاة أو Eraser Tool ذات الإختصار (E) , قم بحذف المناطق التي نريدها أن تكون حادة مثل العين , اللحية , الشعر


الخطوة السادسة

قم بعمل Duplicate أو تكرير للصورة الأصلية و ليست المعمول عليها blur

بعدها قم بالذهاب إلى Filter>Other>High Pass

قم بتغيير الـ Blend Mode الخاص بتلك الطبقة إلى Hard Ligh

مرة أخرى سنستعمل الممحاة لحذف بعد المناطق من الصورة ( شاهد الصورة التاليىة )



الخطوة السابعة

قم بتنشيط الطبقة الاولى ( الطبقة الخاصة بالصورة الأصلية )

الآن وبإستعمال أداة Dodge Tool ذات الإختصار (O)

قم برسم الأعين لجعلها فاتحة اللون أكثر

و بإستعمال أداة Burn Tool إجعل المناطق الأخرى داكنة أكثر

يمكنك إستعمال الاداتين على طبقات أخرى ..


الخطوة الثامنة

إذهب إلى Image>Adjustment>Hue/Saturation

لجعل الصورة داكنة أكثر ..

إستعملت القيمة -3 لـ Hue

و -32 لـ Saturation

و -38 لـ Lightness




الخطوة التاسعة

إستعملت برنامج Illustrator لأصنع الأشكال الهندسية التي سنستعملها في التصميم , لكن بالطبع يمكنك إستعمال الفوتوشوب أذا أردت هذا ..

على أية حال إستعمل أداة Ellipse Tool ذات الإختصار (L)

بعدها إستعمل أداة Blend Tool ذات الإختصار (W) لعمل نسخ كثيرة من الدوائر



الخطوة العاشرة

إذهب إلى Object>Expand

بعدها قم بالذهاب إلى Object>Ungroup

و هكذا سيمكنك التعامل و تعديل كل دائرة

بإستعمال اداة Direct Selection Tool ذات الرمز (A) و إختر بعض شرائح الدوائر و احذفها

و إستعمل أداة Pen Tool ذات الرمز (P) لإضافة بعض الإرتكازات , إستعمل الصورة التالية لتفهم الفكرة ..





الخطوة الحادية عشر

إصنع بعض الأشكال الأخرى ... بإستعمال الأدوات Line Segment Tool ذات الإختصار (\) ,, و الأداة Polar Grid Tool




الخطوة الثانية عشر

تابع إضافة المزيد من الأشكال الهندسية , على سبيل المثال أسهم بإستعمال أداة Polygon و أداة Star Tool





الخطوة الثالثة عشر

تابع إضافة المزيد من الأشكال الهندسية حتى تصل لشكل مشابه للآتي





الخطوة الرابعة عشر

نعود الآن إلى الفوتوشوب ,, ما سنقوم بفعله الآن هو نسخ الأشكال التي قمنا بتصميمها في Illustrator إلى الفوتوشوب

لكن ستضطر إلى نسخ كل عنصر بمفرده ..

قم بنسخ شريحة الدائرة الأولى ثم قم بلصقها في الفوتوشوب Smart Object ...

و سنعمل الآن على تعديل الـ Layer Styles الخاص بكل عنصر هندسي قمنا بتصميمه ...

قم بتقليل الـ Opacity الخاص بالطبقة إلى 30% .. و إختر الخيار Color Overlay

اللون الذي قمت بإستعماله #00eaff





الخطوة الخامسة عشر

سنطبق فلتر Gaussian Blur على كل شكل هندسي قمنا بتصميمه

و هذا عن طريق الذهاب إلى Filter>Blur>Gaussian Blur

إستعمل قيم مختلفة لكل شكل هندسي , و إستعمل قيمه أكبر من الـ Blur على الأشكال الكبيرة ...




الخطوة السادسة عشر

قم بتغيير الـ Color Overlay الخاص بكل شكل من الأشكال الهندسية إلى اللون الأخضر كما في الصورة التالية





الخطوة السابعة عشر

بعد الإنتهاء من وضع الأشكال الهندسية في الفوتوشوب

قم بوضعها في جروب و قم بتسمية هذا الجروب بـ Left Eye

قم بعمل Duplicate او نسخ لهذا الجروب بعدها إذهب إلى Layer>Merge Group

بعد تلك الخطوة سيكون أمامك طبقة واحده تجمع كل الأشكال الهندسية التي قمنا بتصميمها

ضع تلك الطبقة أعلى الجروب المسمى "Left eye"

بعد ذلك قم بعمل جروب لتلك الطبقة , ستكون تلك الطبقة في مجلد

قم بتغير الـ Blend Mode الخاص بهذا المجلد إلى Color Dodge ..

سنقوم بتطبيق Layer Style على الطبقة

أولا قم بتغير الـ Opacity الخاص بالطبقة إلى 70% ... بعدها قم بإختيار Color Overlay كما في الصورة التاليى

و إستعمل اللون الأبيض





الخطوة الثامنة عشر

في تلك الخطوة أضفت المزيد من الأشكال الهندسية من برنامج Illustrator

المهم , في تلك المره جعلت لون تلك الأشكال أحمر

كل ما فعلته هو أني قمت بتكرير نفس الخطوات السابق عملها .. ووضعتها في الفوتوشوب و طبقت الـ layer style كما في الخطوات السابقة و جعلت الـ opacity بقيمة 30% .. و إخترت Color Overlay

و أضفت فلتر Gaussian Blur.

أيضا قمت بتكرير أو duplicate الطبقة ووضعتها في جروب

و غيرت الـ Blend Mode الخاص بالمجلد الجديد إلى Color Dodge و عدلت Color Overlay باللون الأبيض للطبقة , و الـ opacity إلى 70% كما في الصورة التالية







الخطوة التاسعة عشر

قم بإنشاء مساحة عمل جديدة و ضعها في أعلى الطبقات جميعا

بعدها نستعمل أداة التدرج Gradient Tool ذات الإختصار (G) ... و بالنقر على ألوان التدرج يظهر لنا محرر التدرج , نختر منه اللون الأسود و الأبيض

و نعدل الـ Gradient Type إلى Noise

و نعدل الـ Roughness إلى 100%

و ننشط الخيارين Restict Colors و Add Transparency

بعد ذلك نعدل زاوية التدرج كما في الرقم 3

قم بتلوين الطبقة بالتدرج الذي قمنا بضبطه , إبدء من العين اليسرى إلى منتصف العين اليمنى المشار إليها بالرقم أربعة في الصورة التالية

إذهب إلى Image>Adjustments>Desaturate

بعدها إذهب إلى Filter>Blur>Gaussian Blur , و ضع القيمة 6 pixels في الـ Radius

بعد ذلك قم بتطبيق نفس التعديلات الخاصة بالـ layer style كما في باقي الأشكال الهندسية , بإضافة الـ color overlay ثم تقليل الـ opacity إلى 70% و إستعمال الممحاه لمحو بعض المناطق حول العين كما في المنطقه المشار إليها بالرقم خمسه في الصورة التاليىة





الــــخــــاتــــمـــــة

قم بوضع مستطيلين باللون الأسود ( لإعطاء الإيحاء أن تلك اللقطة من فيلم )

و إنتهى الدرس : )))


الدرس من إنتاج abduzeedo و مترجم خصيصا و حصريا بواسطتي لمنتديات بكسل التعليمية