يمكنك إنشاء الكثير لواجهة لعبتك الخاصة وفي هذا الدرس التعليمي سأريكم كيفية إنشاء شريط تقدم اللعبة مع أيقونة استعانة لطيفة باستخدام Adobe Illustrator. سنستخدم لوحة Pathfinder لدمج الأشكال لتصبح أشكالًا جديدة، وسنضيف تأثيرات الشفافية Transparency للأشكال وغيرها الكثير. لنبدأ إذًا!
1- أنشئ مستندًا جديدًا شغل البرنامج، ثم اضغط على (N+Ctrl) لإنشاء مستند جديد. سمِّ هذا المستند وحدد Pixels من قائمة Units، وأدخل 460 بكسل في مربع العرض و 350 بكسل في مربع الارتفاع، ثم انقر على زر Advanced. حدد RGB من Color Mode و Screen بدقة وضوح (150ppi) وتأكد من انّ مربع Align New Objects to pixel Grid غير محدد، قبل النقر على "OK"**.
2- إنشاء أيقونة النجمة الخطوة الأولى: لنقم بإنشاء أيقونة النجمة. اختر أداة Star. انقر واسحب للرسم مع الضغط على مفتاح Shift. اجعل عرض النجمة 86 بكسل. اختر أداة Rotate (R) وانقر على مركز النجمة مع الضغط على مفتاح Alt. سترى الآن مربع أداة R) Rotate). اضبط الزاوية على 21 واضغط على OK. أبقِ النجم محددُا واختر أداة A) Direct Selection) واضبط نصف قطر الزاوية على 5 بكسل و Rounding على Absolute. املأ الشكل بالتدرج وبدون حد (انظر الصور أدناه).
الخطوة الثانية: انسخ النجمة والصقها في المقدمة (Ctrl + F ، Ctrl + C) مرتين. حدد الآن الشكل الجديد وصغر حجمه مع الضغط على Alt + Shift. حدد الشكل الذي قمنا بنسخه من قبل والشكل الجديد واذهب إلى لوحة Pathfinder، واختر Exclude. اجعل لونه الجديد: 255، 239، 90 واضبط Opacity على 66٪.
الخطوة الثالثة: انسخ النجمة مرة أخرى والصقها في المقدمة (Ctrl + F ، Ctrl + C). الآن، حدد الشكل الجديد وصغر حجمه مع الضغط على Alt + Shift. ثم اذهب إلى Offset Path>Path>Object، واضبط Offset على -0.5 بكسل. حدد الشكل الذي أنشأناه من قبل والشكل الجديد، واذهب إلى لوحة Pathfinder، واختر Execlude. اجعل لون الشكل الجديد على أسود، واضبط Blending Mode على Soft Light و Opacity على 100٪.
الخطوة الرابعة: انسخ الشكل الجديد والصقه في المقدمة (Ctrl + F ، Ctrl + C). الآن، أبقِ الشكل المنسوخ محددًا وصغر حجمه مع الضغط على Alt + Shift. اجعل لونه أبيض، واضبط Blending Mode على Screen و Opacity على 66٪.
الخطوة الخامسة: الآن انسخ شكل النجمة الرئيسي والصقه في الخلف (Ctrl + B ، Ctrl + C). حدد هذا الشكل، واضغط على Shift وحركه إلى اليمين بالضغط على مفتاح السهم الأيمن مرتين. ثم حركه للأعلى مع الضغط على Shift ومفتاح السهم الأعلى مرةً واحدة. املأ الشكل بالتدرج (انظر الصور أدناه).
الخطوة السادسة: لننشئ ظلًا صغيرًا الآن. انسخ النجمة الرئيسية والصقها في المقدمة (Ctrl + F ، Ctrl + C) مرتين. أبقِ الشكل الجديد محددًا وحركه لليمين والأعلى قليلًا. حدد كلا الشكلين المنسوخين واذهب إلى لوحة Pathfinder، واختر Minus Front. اضبط Blending Mode على Multiply و Opacity على 100٪، واملأه بالتدرج.
الخطوة السابعة: سننشئ في هذه الخطوة وجهًا لطيفًا للنجمة. اختر أداة L) Ellipse) وارسم دائرة بعرض وارتفاع 10 بكسل. في الوقت الحالي، املأها باللون الذي تريده، ولكن بدون حد. انسخ الشكل ومع الضغط على Shift حركه إلى اليمين بالضغط على مفتاح السهم الأيمن مرتين، وحركه للأسفل بالضغط على مفتاح السهم الأسفل 3 مرات. الآن، حدد كلاهما واذهب إلى لوحة Pathfinder، واختر Minus Front. سيكون هذا شكل العين. املأ الشكل الجديد باللون: 26،28،18، ثم اضبط Blending Mode على Color Burn و Opacity على 35٪.
*الخطوة الثامنة: دعونا نضيف الآن بعض التأثيرات. انسخ شكل العين والصقه في المقدمة (Ctrl + F, Ctrl + C) مرتين. حدد الشكل الجديد وضعه كما هو موضح في الصورة أدناه. حدد الآن الشكلين الجديدين واذهب إلى لوحة Pathfinder، واختر Intersect. املأ الشكل الجديد باللون الأسود، ثم اضبط Blending Mode على Color Burn و Opacity على 35٪.
الخطوة التاسعة: انسخ شكل العين مرةً أخرى والصقها في المقدمة (Ctrl + F ، Ctrl + C) مرتين. حدد الشكل الجديد وضعه كما هو موضح في الصورة أدناه. حدد الآن كلا الشكلين الجديدين واذهب إلى لوحة Pathfinder، واختر Minus Back. املأ الشكل الجديد باللون الأبيض. ثم اضبط Blending Mode على Screen و Opacity على 76٪.
الخطوة العاشرة: ضع الأشكال الثلاثة في مجموعة وضعها على النجمة. كما ترون حصلنا على تأثير لطيف للعين. حدد مجموعة العين، انسخها والصقها في المقدمة (Ctrl + F ، Ctrl + C). حدد الشكل الجديد وضعه كما هو موضح في الصورة أدناه. اختر الآن أداة O) Reflect) وانقر على مركز الشكل مع الضغط على Alt. اضبط زاوية الانعكاس على 120 وانقر على OK.
الخطوة الحادية عشر: وبنفس الطريقة يمكننا إنشاء فم للنجمة. اتبع خطوات شكل العين فقط. وفي حالة الفم، فقد أنشأت شكلًا بيضاويًا بسيطًا. انظر الصورة أدناه من فضلك.
الخطوة الثانية عشر: وللمسة النهائية، سنضيف بعض اللمعان والظل في الخلف لنجمنا الجميل. ولعمل الظل الخلفي، انسخ النجمة الرئيسية والصقها في الخلف (Ctrl + B ، Ctrl + C). حركه إلى اليمين والأعلى لإسقاط بعض الظل. اجعل لون هذا الشكل أسود، واضبط Blending Mode على Multiply و Opacity على 40٪. ولإضافة بعض اللمعان إلى نجمنا، اختر أداة Star وانقر على لوحة العمل. الآن ترى النافذة. اضبط Radius 1 على 30 بكسل، و Radius 2 على 5 وPoints على 4. انقر على OK. قلل حجمها كما هو موضح في الصورة أدناه واضبط اللون على الأبيض. ولجعلها أكثر لمعانًا، أنشئ بعض التدرج. ارسم دائرة بعرض وارتفاع 14 بكسل. واملأها بتدرج (من أبيض - 100٪ إلى أسود 0٪) كما هو موضح في الصورة أدناه. اضبط Blending Mode على Screen و Opacity على 100٪. وضعها خلف النجمة اللامعة الصغيرة.
3- إنشاء شريط التقدم الخطوة الأولى: اختر أداة Rounded Rectangle، وانقر على لوحة العمل، وستظهر نافذتها. اضبط العرض على 219 بكسل والارتفاع على 26 بكسل، واضبط Corner Radius على 12 بكسل، وانقر على OK. اضبط اللون على: 173،171،174 وبدون حد. حدد الشكل، انسخه والصقه في الخلف (Ctrl + B ، Ctrl + C). حرك الشكل إلى اليمين والأعلى مع الضغط على Shift ومفاتيح الأسهم مرتين لكل منهما. املأ الشكل الجديد باللون: 129، 134، 137. الآن انسخ الشكل الأمامي مرةً أخرى والصقه في المقدمة (Ctrl + F ، Ctrl + C). حدد العرض ليكون 214 بكسل والارتفاع ليكون 16 بكسل. مرةً أخرى، انسخ الشكل الجديد والصقه في المقدمة (Ctrl + F ، Ctrl + C) مرتين. حرك أحدها إلى الأسفل 3 مرات مع الضغط على Shift ومفتاح السهم للأسفل. الآن حدد كلا الشكلين واذهب إلى لوحة Pathfinder، واختر Minus Front.
الخطوة الثانية: اختر أداة Rounded Rectangle، وانقر على لوحة العمل، وستظهر النافذة. اضبط العرض على 208 بكسل والارتفاع على 13 بكسل، واضبط Corner Radius على 7 بكسل، وانقر على OK. املأ الشكل باللون: 255،239،79 وبدون حد. ضعه كما هو موضح في الصورة أدناه. حدد الشكل، انسخه والصقه في المقدمة (Ctrl + F ، Ctrl + C) مرتين. اختر واحدًا وحركه إلى أسفل. ثم حدد الأشكال الجديدة واذهب إلى لوحة Pathfinder، واختر Minus Front. اضبط Blending Mode على Screen و Opacity على 35٪. حدد الشكل مرةُ أخرى، انسخه والصقه في المقدمة (Ctrl + F ، Ctrl + C) مرتين. اختر واحدًا وحركه للأعلى. ثم حدد الأشكال الجديدة واذهب إلى لوحة Pathfinder، واختر Minus Front. اضبط Blending Mode على Color Burn و Opacity على 25٪.
الخطوة الثالثة: اختر أداة Pen وارسم بعض اللمعان على الشريط. املأ الأشكال باللون الأبيض واضبط Blending Mode على Soft Light، و Opacity على 36٪. ضع الأشكال في مجموعة ووضعها خلف الشكل الأصفر. انظر الصورة أدناه.
الخطوة الرابعة: حدد الشكل الأصفر واذهب إلى Offset Path>Path>Object. اضبط Offset على -3 بكسل. أبقِ الشكل الجديد محددًا واذهب مرةً أخرى إلى Offset Path>Path>Object. اضبط Offset على -0.5 بكسل. حدد الشكلين واذهب إلى لوحة Pathfinder، واختر Execlude. املأ الشكل باللون الأسود واجعله بلا. اضبط Blending Mode على Soft Light و Opacity على 100٪. حدد الشكل الجديد مرةً أخرى، وانسخه والصقه في المقدمة (Ctrl + F ، Ctrl + C). صغر حجمه قليلًا واملأه باللون الأبيض. اضبط Blending Mode على Soft Light و Opacity على 100٪.
الخطوة الخامسة: في النهاية أضف عليه بعض النجوم اللامعة والظل في الخلف كما فعلنا مع أيقونة النجمة. يمكنك أيضًا جعل الشكل الأصفر أقصر، ليبدو شريط التقدم ديناميكيًا. وأخيرًا، ضع كل ذلك جنبًا إلى جنب مع خلفية جميلة.
يمكنك أيضًا إنشاء أي نوع آخر من الأشكال (قلب، طاقة، ورقة وغيرها). فقط اتبع نفس الخطوات المذكورة أعلاه. هذا كل شيء. شكرًا لكم جميعًا، وسأكون مسرورًا لرؤية إصداراتك من أشرطة تقدم اللعبة.
ترجمة -وبتصرف -للمقال How to Design a Game Progress Bar in Adobe Illustrator لصاحبه Astghik Salnazaryan
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.