اذهب إلى المحتوى

كيف تقوم بإنشاء شعار معدني ثلاثي الأبعاد باستخدام فوتوشوب وAdobe Ilustrator


zahershullar

قامت شركة أدوبي مؤخراً بإضافة أدوات التصميم ثلاثي الأبعاد على برنامج فوتوشوب (Adobe Photoshop). وهذه الأدوات ممتازة لإنشاء نماذج ثلاثية الأبعاد مع إضاءة واقعية جداً ومواد مختلفة مثل المعادن، البلاستيك والخشب. إنّ الكروم هو أحد التأثيرات التي تتم محاكاتها بواسطة الفوتوشوب مع مختلف التدرّجات وأنماط الطبقات، ولكن ميزة التصميم ثلاثي الأبعاد في إصدارات CS6 وCC تسمح لك بتحقيق نتائج تتجاوز التقنيات التقليدية المُستخدمة سابقاً. سنستخدم أولاً برنامج أدوبي إليستريتور (Adobe Illustrator) لتصميم شعار رائع، ثم سنصدّره إلى الفوتوشوب لتحويله إلى نموذج ثلاثي الأبعاد مع إضافة اللمعان وتأثير الكروم النهائي.

في هذا الدرس سيكون عملنا الفني هو إنشاء شعار بتأثير كروم السيارات لعبارة (RocketEagle)، إن هذه العلامة التجارية خيالية وقد تم تطبيق أسلوب فن ديكو Art Deco على أجنحتها وأنماطها. سنستغل أدوات الإليستريتور القويّة لبناء التصميم المسطّح، ومن ثمَّ سنصدّره إلى الفوتوشوب لتحويله إلى نموذج ثلاثي الأبعاد مع بروزات متعددة (لاحظ أن الشكل الدائري في المنتصف بارز أكثر من الأجنحة). ثم يأتي الجزء المثير في هذا التصميم وهو توليد تأثيرات الإضاءة والمواد لإنتاج تأثير الكروم المذهل.

RocketEagle-Final-Image-sm.thumb.jpg.f17

بالإمكان تصميم الشعار الأساسي المُسطّح بواسطة الفوتوشوب بالتأكيد ولكنني أرى أنّ أدوات الرسم المتجه (Vector) في الإليستريتور أسهل استخداماً في تصميم وإنشاء الشعارات. ارسم دائرة ثم كررها مرتين واجعل حجمهما أصغر باتجاه المركز بالتدريج. أضف الحرف الأول من علامتك التجارية R في المنتصف. بالنسبة لنوع خط الحرف R فقد استخدمتُ الخط الفني الرائع المسمّى Metropolis 1920. قم بتحويل النص إلى شكل بالضغط على الزر الأيمن واختيار إنشاء خطوط خارجية Create Outlines.

1.thumb.jpg.c16e09db0075b216c73f7dde1b1e

قم بتعديل حجم ومحاذاة النص مع أصغر الدوائر، ثم قم بزيادة سماكة حدود الدائرة بحيث تصبح سماكتها متشابهة مع سماكة النص، اذهب إلى قائمة:

 Object > Expand

واختر خيار Stroke لإضافة حدود خارجية لهذه الدائرة السميكة الحدود أصلاً داخل الشكل الحلقي.

2.thumb.jpg.0123888846bd916cf46346933e78

استخدم أداة التحديد المباشر Direct Selection لتعديل تمدد أجزاء النص المتداخلة مع الدائرة وجعلها ضمن حدود هذه الدائرة. قد نحتاج نقاط ارتكاز إضافية في بعض المناطق للحفاظ على الشكل الأصلي للحرف.

3.thumb.jpg.a964cbe7f6fa13a0dcbb75b48fd3 

تأكّد من أن تكون الأجزاء الممتدة من النص داخل حدود الدائرة، ومن ثم حدد خطوط الدائرة والنص معاً واستخدم أداة بناء الأشكال Shape Builder tool لتنسيق الأجزاء وذلك للحصول على خط مستمر وبدون تقطيع بين الدائرة والنص.

4.thumb.jpg.03e1e79d7ca4ff22c18f2ad47d9f 

اختر Unite من لوحة إيجاد المسار Pathfinder لمزج ما تبقى من العنصرين المنفصلين حتى يتكوّن شكل موحّد.

5.thumb.jpg.d899aac85bd622f31ee35da4cc5f 

في مكان آخر على لوح الرسم استخدم أداة القلم Pen tool لإنشاء خطوط ممتلئة بزاوية 45 درجة كما في الصورة. هذا الشكل سيكون الجزء الداخلي من الجناح.

6.thumb.jpg.77f84e68cb1aeb465c15c6d3e059 

فعّل Smart Guides الأدلة الذكية من قائمة:

 View > Smart Guides 

ثم ارسم مستطيلاً صغيراً. استمر بالضغط على مفتاح ALT أثناء سحب نسخة واستخدم الأدلة الذكية الخضراء لمحاذاتها بشكل ممتاز. اضغط على CMD+D عدة مرات لتكرار العملية.

ملاحظة: ما هو اختصار CMD+D. إن مفتاح CMD في الويندوز هو Ctrl وفي ماكنتوش هو Command ⌘

7.thumb.jpg.604d824eb8775ede33c53ac99994 

ضع سلسلة المستطيلات في مجموعة واحدة Group ثم اجعلها تستدير بزاوية 45 درجة. ضعها فوق الجزء الداخلي لشكل الجناح واستخدم اختصار ]+CMD+Shift لإرسالهم إلى أسفل جميع الأشكال.

8.thumb.jpg.1c8cbf35695c1fa6c64843423a17 

استخدم تقنية التكرار ذاتها وارسم سلسلة من المستطيلات الأفقية الطويلة لتُشكّل ريشات الجناح الرئيسي. ارسم مربع مؤقت ودوّره بزاوية 45 درجة، ثم ضعه على أطراف الأجنحة. اختر هذا الشكل مع جميع مستطيلات الجناح واستمر بالضغط على ALT أثناء التحريك مع أداة Shape Builder وذلك لتقليم نهايات الأطراف.

9.thumb.jpg.b59bddaf48dcbaeade96bf54f32d 

ضع ريشات الجناح في مجموعة Group ثم استخدم الاختصار ]+CMD+Shift أو اضغط على الزر الأيمين واختر:

 Arrange > Send to Back 

لإرسال تلك الريشات إلى أسفل بقية الأشكال.

10.thumb.jpg.6b99bc60ac52aceb9ea30127f5c 

اختر كامل الجناح وضعه في مجموعة Group ثم اذهب إلى قائمة:

 Object > Transform > Reflect

فعّل خيار Vertical ثم اضغط Copy كما في الصورة. استمر بالضغط على مفتاح Shift أثناء تحريك الجناح داخل الجهة المقابلة.

11.thumb.jpg.099b749ca59ec2af50c0f5b9b71 

حرّك الجناحين إلى داخل أسفل وسط الشعار لإخفاء الأشكال الزائدة حيث تتداخل الأجنحة في الوسط.

11-2.thumb.jpg.40018d39141412d0f018ba47f 

استخدم أداة المضلّعات Polygon لإنشاء شكل واستخدم الأسهم في لوحة المفاتيح لجعل عدد الأضلاع خمسة. حرّك الضلع السفلي إلى الأسفل أكثر بواسطة أداة التحديد المباشر Direct Selection مع الاستمرار بالضغط على مفتاح Shift لتمديد الشكل.

12.thumb.jpg.081b62b6eddd1f200a44825ef04 

ارسم خطّاً إضافياً أسفل المركز مستخدماً الأدلة الذكية Smart Guides لإطباق ومحاذاة المسار. دوّر الشكل 180 درجة وبذلك يمكن استخدامه كريشة ذيل. اختر أداةالدوران Rotate وانقر لوضع النقطة المحورية (التي يتم الدوران حولها باعتبارها مركز الشكل) في وسط الضلع المستقيم العلوي. استمر بالضغط على مفتاح Alt أثناء سحب الشكل لصنع نسخة أخرى بدرجة دوران مختلفة عن الأصلية.

13.thumb.jpg.2852878af05d87a3d90d857d28e 

والآن حدد الشكل الجديد واضغط CMD+D لتكرار العملية الأخيرة وصنع ريشة ذيل أخرى. قلل حجم الشكل الأوسط قليلاً ثم اضغط CMD+D مرتين لتكرار عملية التصغير على الشكل الأخيرة مرتين وبذلك تصبح الأشكال أصغر تدريجياً.

14.thumb.jpg.3e5812ae1bb9ba7915ae5366e89 

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

15.thumb.jpg.89e209b07d860190394bacd91a0 

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

16.thumb.jpg.758ab753f48413a5caf59facc12 

ضع ريشات الذيل في مجموعة Group ثم حركها إلى داخل الشعار الرئيسي بدون أن ننسى بأن نضعهم خلف بقية أشكال الشعار الأخرى. استخدم لوحة المحاذاة Align Panel لوضعهم بشكل مستقيم ومحاذاتهم مع المركز. أعطِ إحدى الدوائر نقرة إضافية لتصبح مفتاح الكائن وبذلك لن يمكن تحريكها من مكانها.

17.thumb.jpg.1eb4c4b256d9b220f5f66118973 

ارسم مربع أعلى تصميم الشعار وحدد النقطتين العلويتين بواسطة Direct Selection وحرّكهم معاً إلى المنتصف بواسطة أداة تغيير الحجم Scale.

18.thumb.jpg.11f59390c5292cbcd8e8300c060 

ارسم الخطوط الخارجية لرأس النسر مستخدماً أداة القلم Pen tool وبنقرات مفردة بدون استخدام مقابض البيزيير Bezier (هي التي تحّول الخط المستقيم إلى منحني) وبذلك يتم إنشاء خطوط مستقيمة. قم بدمج هذين الشكلين بواسطة باني الأشكال Shape Builder أو أدوات إيجاد المسار Pathfinder tools.

19.thumb.jpg.33bc8fb72349438d2fecc40849f 

قم بتحديد الرأس ثم اذهب إلى قائمة:

 Object > Path > Offset Path 

وأدخل القيمة (4mm-).

20.thumb.jpg.5a10864b05a2ff043c5217672f6 

اسحب الضلع السفلي للشكل الداخلي نحو الأسفل بواسطة Direct Selection حتى يبرز من تحت الشكل الأصلي.

21.thumb.jpg.dbd2c42411f2831453b6521b074 

استخدم خيار إزالة المقدمة Minus Front من Pathfinder لقص الأشكال الداخلية من الشكل الأصلي ثم ضع الرأس بمحاذاة مركز الشعار وعليك القيام بذلك بالعين المجردة فقط لأن هذا الرأس هو عبارة عن شكل غير متناظر.

22.thumb.jpg.22f23b06d17409ab81b1f4cd7c5 

قم بتحديد كافة الأشكال التي تُكَوِّن الشعار واضغط على زر Unite من Pathfinder. احذف الشكل الداخلي الصغير بواسطة Direct Selection وذلك لصنع صورة ظلال أحادية اللون للتصميم بالكامل.

23.thumb.jpg.eb20c7e2df02cfa37de6bd592e6 

اذهب إلى القائمة:

 Object > Path > Offset Path 

وأدخل القيمة 3mm لإنشاء خط خارجي إضافي. طبق النمط الافتراضي وهو اللون الأبيض للتعبئة والأسود للحدود ومن ثم أرسل الشكل إلى أسفل مجموعة الأشكال.

24.thumb.jpg.854b150e835556fb2b256458dc6 

حدد جميع الأشكال في تصميم الشعار باستثناء الحرف في وسط الشعار (استخدم Shift وانقر عليه لإزالته من التحديد) ثم انقر على أداة الطلاء الحي Live Paint لإنشاء مجموعة Live Paint Group.

25.thumb.jpg.90452e6f935a4226e472294e4a0 

اذهب إلى أداة تحديد الطلاء الحي Live Paint Selection tool وارسم تحديداً حول الكائن كلّه. طَبّق لوناً عشوائياً على كل الكائن.

26.thumb.jpg.66c6f49995fe9f7b77dc23f51ce 

اذهب إلى قائمة:

 Object > Expand 

واختر فقط خَيَار Object ليتم تطبيق تأثير الطلاء الحي Live Paint بشكل دائم.

27.thumb.jpg.0683b2f816c077557bb4784c217 

قم بإلغاء المجموعات من خلال الضغط بالزر الأيمن واختيار Ungroup وقم بذلك على جميع المجموعات حتى لا يعود هذا الخَيَار متاحاً وتصبح جميع العناصر منفصلة تماماً وغير مجمّعة.

28.thumb.jpg.8e9fcad44a397a0421e938028db 

حدد أحد الأشكال ثم اذهب إلى قائمة:

 Select > Same > Fill Color

29.jpg

قم بدمج كل الأشكال معاً بالضغط على خَيَار Unite من Pathfinder.

32.thumb.jpg.5c3db83ab59213a9f418997ed98 

حدد أحد المسارات ذات الحدود من التصميم واذهب إلى قائمة:

 Select > Same > Stroke Color

والآن اذهب إلى قائمة:

 Object > Expand 

ولكن هذه المرّة اختر Stroke وذلك لتحويل هذه الحدود إلى أشكال.

31.thumb.jpg.eacd4e672ccedd67f19ee87d4f9

انقر على خَيَار Unite من Pathfinder لدمج كل قطاعات الخطوط الخارجية الصغيرة في شكل مستمر متّصل موّحد.

33.thumb.jpg.f078b6b1bf83f435d1b0bd4d054 

أضف الأشكال الملونة إلى التحديد وانقر على زر إزالة المقدمة Minus Front من Pathfinder لإخراجها خارج الخطوط.

 

حدد العناصر المتشابهة التي تشكّل أجزاء مختلفة من التصميم ثم اختر Make Compound Path من القائمة المنبثقة جرّاء الضغط على الزر الأيمن للفأرة. مجموعات الأشكال هذه تضم ثلاثة أقسام مختلفة من الأجنحة، نصفي طبقات ريش الذيل الثلاثة، الأجزاء الصغيرة التي تشكّل الحرف في الوسط، الخ. هذه هي مجموعات الأشكال التي ستحتاج إلى تمديدها بنفس العمق عندما نعالج الإعدادات ثلاثية الأبعاد فيما بعد.

34.thumb.jpg.92f130a998badf5f7503fb8d7a3 

إنّ القطع موجودة في مجموعات منفصلة للمسارات المركبة، اختر (Release to Layers (Sequence من قائمة أدوات الطبقات Layers.

35.thumb.jpg.b212b897d42e0e416f2ffcecd80 

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

36.thumb.jpg.1c59c222e24b760a65d306500e8 

اذهب إلى قائمة:

 File > Export 

واحفظ الملف بصيغة ملف فوتوشوب PSD. تأكد من اختيار Write Layers قبل النقر على OK.

37.thumb.jpg.51618baaf0aa3b1206045cb753d 

افتح الملف الذي صدّرناه للتو بصيغة PSD باستخدام برنامج الفوتوشوب ولاحظ كيف أن كل مجموعات الأشكال موضوعة على طبقات مختلفة. كبّر الملف بواسطة أداة القص Crop وضع الطبقة الجديدة في أسفل اللوحة للتعبئة كخلفية مؤقتة.

38.thumb.jpg.206d3e2b0adfc5954e47a695ab6 

حدد كل طبقة بشكل دوري واختر New 3D Extrusion from Selected Layer من قائمة 3D.

39.thumb.jpg.3b53d7a0bcd27dda5f94ac0fd1e 

عندما تنتهي من تحويل كافة الطبقات إلى كائنات ثلاثية الأبعاد اذهب إلى قائمة:

 3D > Merge 3D Layers 

وبذلك يكون من السهل الوصول إلى جميع الكائنات في مشهد واحد ثلاثي الأبعاد.

40.thumb.jpg.88e9222e23e70ee6494ac542bf4 

تحت لوحة 3D اختر المشهد Scene من قائمة العناصر واستخدم أدوات التصفّح Navigation tools الموجودة أعلى لوحة أدوات الفوتوشوب لتدوير محيط العمل حتى تستطيع رؤية عمق الكائنات الثلاثية الأبعاد. في لوحة 3D حدد الطبقة الأولى ثم اضغط على Shift مع النقر على الطبقة الأخيرة لتحديد جميع الطبقات ثم عدّل عمق التمدد إلى 5px في لوحة الخصائص Properties panel.

41.thumb.jpg.fe6caf848dc312c26b7c386015c 

ستتوزّع جميع القطع المختلفة في أرجاء المكان، لذلك حدد كل طبقة على حدة وبدّل قيمة المحور Z إلى الصفر.

42.thumb.jpg.dbb4a0633ff4da23c42ee78f7db 

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

43.thumb.jpg.7d05892722e718139b5fe30be02 

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

44.thumb.jpg.7fd778e8fdb30e3a74790c4c8a3 

عندما تصبح جميع الأشكال ممدّدة فإن التصميم سيبدو رائعاً حقاً بالأبعاد الثلاثية. أسلوب فن ديكو (The Art Deco) يبدأ بالظهور بشكل تدريجي ما إن تظهر أجزاء هذا النموذج تدريجياً.

45.thumb.jpg.b66e0823523117c49aab2686f32 

إنّ التصميم لا يبدو رائعاً بهذا اللون العشوائي، استمر بالضغط على Shift وانقر من أول طبقة مواد وحتى آخر واحدة لتختار كل واحدة على حدة، ثم طبّق مادة المعدن Metal Material من لوحة الخصائص Properties. قد لا يرضي الاختيار الافتراضي طموحاتك لأنه محدود جداً لكن باستطاعتك تحميل المزيد منها من موقع Adobe’s Downloadable 3D Content. على كل حال المادة التي ستختارها لن تبدو رائعة حتى ننتهي من إعدادات الإضاءة.

46.thumb.jpg.0e951242b285a6a844e57c05426 

(IBL) وهي اختصار لعبارة Image Based Lights وتعني الإضاءات المستندة على الصورة وهي تقنية توفر تأثيرات إضاءة أكثر واقعية. اختر Environment من لوحة3D ثم اختر Replace Texture ضمن خيارات IBL في لوحة الخصائص Properties. اختر صورة مع إضاءة رائعة كغروب الشمس مثلاً. أنا استخدمت هذه الصورة من موقع Unsplash. سوف تكون الصورة هي المشهد الذي سيتم وضع النموذج ثلاثي الأبعاد النهائي ضمنه لذلك يجب أن تتطابق الإضاءة والانعكاسات تماما مع محيطها. قلل شدة الضوء إلى نحو 45٪.

47.thumb.jpg.885de8328174bf2bf53e086aec8 

اختر الضوء اللانهائي Infinite Light من لوحة 3D ثم حرّك المقبض لتغيير اتجاه الضوء. من الملفت أن الهبوط من زاوية مرتفعة سيجنبنا الحصول على انعكاسات برّاقة وسينتج بعض الظلال الجميلة. قلل كثافة الضوء Intensity لنحو 50% ونعّم الظلال Shadows إلى 60%.

48.thumb.jpg.a07da2ef58055c05426721b0cf7 

انقر على كل الطبقات في لوحة 3D مع الضغط على مفتاح Shift مجدداً لتحديدهم جميعهم. وفي مربع الإعدادات قم بتغيير الإسقاط إلى الأمام والخلف ثم بدّل إعدادات Bevel Width إلى 3%، Bevel Angle إلى 45- درجة، Inflate Angle إلى  45- درجة وأخيراً Inflate Strength إلى 2%. هذا سيضيف بعض الشطوب الرقيقة إلى الحواف وينعّم واجهة القطع ثلاثية الأبعاد، مما يساعد في توليد المزيد من الانعكاسات الخاصة بتأثير الكروم.

49.thumb.jpg.28d45f69811c777d66dbb625292 

باستطاعتك تهذيب جزء IBL المنعكس باختيار Environment من لوحة 3D. مع تفعيل أداة التحديد Selection tool انقر واسحب العالم الثلاثي الأبعاد حتى تجد الموضع المناسب الذي تظهر فيه الانعكاسات على السطوح اللامعة بشكل رائع.

50.thumb.jpg.83e0c53313a5bcaded7fc66312c 

اختر المشهد من لوحة 3D وقم بتدوير العرض في كل مكان حتى تحصل على الإطار النهائي للصورة مستخدماً أدوات 3D من أعلى قائمة الأدوات Toolbar ثم اذهب إلى قائمة:

 3D > Render 

للبدء بتصيير الشعار إلى الصورة النهائية. أنا أفضّل أن تتركه يعمل طوال الليل لأن هذه العملية تستغرق عدة ساعات لتكتمل. بإمكانك أن تتحكم بإعدادات التصيير Render من:

 Preferences > 3D 

لتضبط الدقة النهائية.

51.thumb.jpg.78bdb39d86260cfb0b1f526aba3 

بعد الانتهاء من عملية التصيير Render، قم ببعض المعالجة والتعديلات مثل المستويات Levels مثلاً فذلك سيعزز تأثير الكروم بالفعل وقم بإضفاء مزيد من البريق واللمعان لانعكاسات الضوء Highlights وزيادة السواد للظلال.

52.thumb.jpg.f40c9759fffc16a6ad829d55659 

ومن الممكن أن نحسّن التباين بنسخ وتصيير الصورة في طبقة جديدة وتغيير وضعية المزج Blending Mode إلى ضوء ناعم Soft Light. كما يمكن تقليل شفافية هذه الطبقة لتخفيف التأثير.

53.thumb.jpg.ee387ba24bc3bda30dfc680f7ad 

وهذه هي النتيجة النهائية لهذا الدرس:

RocketEagle-Final-Image-sm.thumb.jpg.f17

قمتُ بإنشاء نموذج ثلاثي الأبعاد مصغّر في ملف باستخدام السماء في نفس الصورة واستخدمت IBL لمطابقة الألوان طوال الوقت مع نسخة الشعار التي صنعناها أصلاً ببرنامج إليستريتور Illustrator. إن التصيير ثلاثي الأبعاد أنتج تأثير كروم متألق بطريقة أفضل بكثير من تقنيات أنماط الطبقات التي من الممكن استخدامها بدلاً منها. هناك ميزة أخرى في تقنية 3D الخاصة بالفوتوشوب وهي أنه بإمكاننا تغيير دوران وتموضع النموذج حتى يتناسب مع أي تطبيق كغطاء محرك السيارة مثلاً. فقط تأكد من اصطفاف النموذج بشكل ممتاز قبل الضغط على زر التصيير Render.

ترجمة -وبتصرّف- للمقال: How To Create a 3D Chrome Badge in Photoshop لصاحبه Chris Spooner.


تفاعل الأعضاء

أفضل التعليقات



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...