دليل خطوة بخطوة لتصميم الرسوم التوضيحية المخصصة بدون أي مهارات رسم

أرى العديد من الشركات اليوم تستخدم الرسوم التوضيحية أو الصور. على الرغم من أن هذه الخيارات رخيصة ، إلا أن رسالة العلامة التجارية تضعف لأن العناصر المرئية ليست حصرية للمنتج.

في عالم يستخدم فيه 74 في المائة من وسائل التواصل الاجتماعي ومسوقي B2B المرئيات في عروضهم الترويجية ، فإن كيفية تمييز نفسك بصريًا أمر بالغ الأهمية.

إذا كانت علامتك التجارية غزيرة الإنتاج ، فسيتعلم الناس اللغة المرئية المرتبطة بعلامتك التجارية. بمجرد أن يروا نفس الرسوم التوضيحية للمخزون المرتبطة بمنتج آخر ، ستضعف هوية علامتك التجارية.

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

ومع ذلك ، يخجل العديد من المصممين من العمل كرسامين خوفًا من عدم امتلاكهم لمهارات الرسم. نحن هنا لنوضح لك كيف يمكن لأي مصمم تطوير الرسوم التوضيحية الجميلة ، دون الحاجة إلى رسم.

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

أعد إنشاء الرسم التوضيحي الفضائي الشهير.

المصممة والمصممة Nina Georgieva هي الرائدة وراء هذه القطعة الشهيرة Dribbble ، والآن ، أصبح الأسلوب اتجاهًا خاصًا به.

سرقة الإلهام من Georgieva ، سننشئ رسمًا توضيحيًا خاصًا بالفضاء ، باتباع بضع خطوات سهلة.

هذا ما ستحصل عليه في النهاية.

1. ابدأ بالنجوم.

باستخدام "أداة النجمة" في Illustrator ، أنشئ نجمة من أربع نقاط. ثم اجعلها شفافة بنسبة 75٪.

أثناء التحديد ، قم بتكرارها في مكانها بالضغط على Ctrl + C ، ثم Ctrl + F.

تصغير الشكل في المقدمة.

بعد ذلك ، أضف تأثيرًا متوهجًا ؛ حدد الشكل الأكبر ؛ وقم بتطبيق تأثير "Gaussian Blur" من لوحة "Appearance".

أخيرًا ، يمكنك تخزين شكل نجمك داخل لوحة "الرموز" لاستخدامه لاحقًا في التكوين.

2. إنشاء شكل السحابة.

رص المستطيلات مع عروض مختلفة.

ادمجهم مع لوحة "Pathfinder".

أنهِ الأمر بإعطاء الشكل بالكامل قيمة عالية "لنصف قطر الزاوية".

3. اجعل الكوكب نسيجًا من الغيوم

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

قم بتجميع العديد من أشكال السحابة معًا ، وتأكد من حصولك على تعاقب المنحنيات الخارجية والداخلية لإنشاء نمط متموج.

4. القرص الملمس.

بسّط النمط المتموج قبل تطبيقه على شكل الكوكب.

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

5. إنشاء كوكب محكم.

تداخل النمط المتموج مع دائرة ، وأنشئ تقسيمًا باستخدام خيار "Divide" ضمن لوحة "Pathfinder".

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

6. إضافة جو إلى كوكب الأرض.

قم بإنشاء دائرتين أكبر ، والصقهما خلف الكوكب باستخدام Ctrl + X ثم Ctrl + B.

قم بمحاذاةهم بشكل صحيح.

أضف الشفافية إلى الدوائر الجديدة وتأثير التمويه إلى الدائرة الثالثة (داخل لوحة "Appearance").

قم بتجميع (Ctrl + G) ، وقم بتخزين النتيجة داخل لوحة "الرمز".

7. تكرار ولون الكواكب.

انسخ العديد من أشكال الكواكب من لوحة "الرموز" ، وأعد تلوينها باستخدام لونين مختلفين لكل جانب.

استخدم "أداة التحديد المباشر (A)" لتحديد و "أداة القطارة (I)" لاختيار اللون وتطبيقه.

8. مقياس ووضع الكواكب الخاصة بك

حرك الكواكب في مواضع مختلفة باستخدام "أداة التحديد (V)" ، ومنحها أحجامًا مختلفة عن طريق سحب الزوايا البيضاء التي تظهر عند تحديدها (حافظ على مفتاح "Shift" للقياس النسبي).

9. أضف الخواتم.

ارسم بعض الدوائر حول الكواكب لعمل الحلقات.

للصق كواكب أصغر أمام الحلقات ، حددها ، ثم اضغط على Ctrl + X (قص) و Ctrl + F (لصق في المقدمة).

10. إضافة بعض السحب والنجوم في السماء.

بالعودة إلى لوحة "الرمز" ، اسحب وأفلت بعض أشكال السحب والنجوم.

قم بتكرارها وقياسها ووضعها كما يحلو لك عبر مساحتك.

ها هي النتيجة النهائية.

العب بالمقياس والموضع والألوان لتجعلها خاصة بك حقًا.

أضف بعض الطباعة ، وفويلا ، لديك خلفية سطح مكتب جديدة ومخصصة.

أعد إنشاء نمط الرسوم التوضيحية لمدونة Toptal

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

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

هذا ما ستحصل عليه في النهاية.

1. ارسم زريعة بسيطة.

لإنشاء زريعة ، ابدأ بمستطيل طويل ، وأضف نقاطًا متعددة عبر الحواف باستخدام أداة القلم (P).

قم بتعديل الشكل عن طريق تحريك النقاط حولها باستخدام "أداة التحديد المباشر (A)."

2. اصنع وعاء المايونيز.

قم بإنشاء ثلاث دوائر بأحجام متناقصة ، من الخلف إلى الأمام.

الدائرة الخارجية هي الحاوية ، الدائرة الوسطى (باللون الأبيض) هي المايونيز ، والدائرة الداخلية الأصغر (ذات الخط الملون) هي لتأثير الإضاءة.

قم بقص الدائرة الداخلية من المنتصف ، وتأكد من أن "Cap" و "Corner" من لوحة "Stroke" مستديرة.

3. اصنع الكاتشب والخردل.

ضاعف كوب المايونيز لعمل الخردل والكاتشب.

ما عليك سوى تطبيق ألوان مختلفة على الصلصة والضوء ، كما هو مقترح أعلاه.

4. أضيفي الخس على شكل موجة.

باستخدام أداة القلم (P) ، تتبع خطًا مستقيمًا ، وأضف عدة نقاط إليه.

وزع مسافاتها الأفقية من لوحة "المحاذاة".

اسحب نقاط التغيير لأسفل ، وقم بتدوير كل زاوية إلى الحد الأقصى ، حتى تصبح ناعمة تمامًا.

5. اصنع شريحة خبز.

إنشاء شكل بيضاوي طويل. قم بتداخله مع شكل الموجة ، وقم بإنشاء تقسيم باستخدام خيار "Divide" من لوحة "Pathfinder".

أزل الشكل الإضافي الذي تحصل عليه من أداة "القسمة" ، ثم أعد تلوين شريحة الخبز.

6. اصنع خبز البرجر.

اعكس شريحة الخبز رأسياً ، وأضف نقطة تحول إلى الطبقة العليا.

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

7. الانتهاء من البرجر.

لون الخس باللون الأخضر.

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

حرك الأشياء لتكوين طبقة برغر مناسبة.

8. اصنع نقانق من البرغر.

ابدأ برسم البرجر الخاص بك ، وأزل الطماطم والجبن ، وأعد تلوين الخس إلى المايونيز والخردل ، وقم بتكرار الخبز السفلي للحصول على نقانق أكثر تناسقًا.

9. تصميم شكل البيتزا.

ابدأ بالطبقة العلوية من البرجر ، وحرك النقاط السفلية لأسفل ، ثم قربها من بعضها.

قم بتكرار شكل المثلث ، وصغّره ، واجعله أصفر لقاعدة جبنة.

10. نضيف اشكال الطماطم.

تداخل دائرة حمراء كبيرة مع دوائر داخلية أصغر ، واستخدم خيار "Minus Front" من لوحة "Pathfinder".

ضع شرائح طماطم متعددة بأحجام ومواضع مختلفة على شكل البيتزا.

11. اصنع بعض شرائح اللحم.

ارسم شكلاً بنيًا عضويًا باستخدام "أداة القلم (P)" ، ثم قم بتكبير حجمه فوق البيتزا.

12. أضف طبقة إضافية.

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

13. اصنع القشة.

نجمة ذات مستطيل أبيض طويل.

أضف نقطتين باستخدام أداة القلم (P) ، وحرك الحواف العلوية لثني القش.

انسخ والصق النقطة الوسطى على الحافة اليمنى ، ثم ضع حدًا أحمر اللون ، دون تعبئة.

حرك الخط الأحمر في منتصف المستطيل الأبيض.

14. اصنع علبة الصودا.

ارسم مضلعًا من ثمانية جوانب ؛ أضف العلبة حرك النقاط الأربع الأولى لأعلى ؛ وقياس (S) الحواف العلوية والسفلية للخارج لجعلها تبدو أشبه بعلبة.

أضف مستطيلات مستديرة في الجزء العلوي والسفلي لإنشاء الحواف.

15. قم بتعديل شكل العلبة ، وقياس القش.

حرك النقاط لتعديل الأشكال ، ثم قم بقياس العلبة والقشة إلى نسب متناسبة.

16. الانتهاء من تصميم الموجة على العلبة.

ارسم شكلًا عضويًا ومائجًا للتصميم على العلبة.

ثم أنشئ قسمًا باستخدام لوحة "Pathfinder" ، واحذف الأشكال الخارجية الإضافية.

ها هي النتيجة النهائية.

أعد إنشاء رسم توضيحي مستوحى من لعبة Monument Valley

Monument Valley هي لعبة مبيعًا تم إنشاؤها بواسطة UsTwo studio. لقد فازت بالعشرات من الجوائز ، بما في ذلك أفضل لعبة iPad لعام 2014 من Apple ، وأسلوبها التوضيحي مستوحى من الأعمال الفنية الهندسية الجميلة من Escher.

الآن سوف تتعلم كيفية إنشاء نفس النمط المرئي الذي جعل هذه اللعبة مثل هذا النجاح الهائل بسهولة.

هذا ما ستحصل عليه في النهاية.

سوف تستخدم فقط المستويات والمكعبات ككتل بناء للرسم التوضيحي بأكمله.

تحتوي لوحة الألوان على أربعة ألوان للمياه والعشب والخشب والمبنى - كل منها بثلاثة ألوان لمحاكاة الضوء الطبيعي.

1. إنشاء مستوى متساوي القياس.

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

سنسميها "تأثير متساوي القياس":

انتقل إلى Effect> 3D> Extrude & Bevel حدد "Isometric Top" داخل القائمة المنسدلة "Position" - داخل لوحة الخيارات التي تظهر. اضبط "Extrude Depth" على صفر تحت الخيار الأول "Extrude & Bevel".

لديك الآن مستوى متساوي القياس.

للتلاعب بالشكل بشكل أفضل ، انتقل إلى Object> Expand Appearance.

سيتيح لك ذلك تغيير لون الطائرة وتحريك النقاط بحرية.

سنسميها "تأثير التوسيع".

2. تتبع الوجوه للجزيرة.

لإنشاء الوجوه الثلاثة لشكل الجزيرة ، قم بإنشاء مربع واثنين من المستطيلات الممدودة.

كرر "تأثير متساوي القياس" على كل منهما.

للخطوة الثانية ، قم بتطبيق "Isometric Top" و "Isometric Left" و "Isometric Right" على التوالي.

3. أكمل ولون قاعدة الجزيرة.

قم بتطبيق "تأثير التوسيع" ، وقم بتلوين كل وجه بظلال مختلفة من اللون الأخضر ، بحيث يكون اللمعان دائمًا في المقدمة.

4. إنشاء وجوه مكعب في المنظور.

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

لاحظ أن كل كائن في الرسم التوضيحي الخاص بك سيستخدم ثلاثة وجوه فقط. هذا هو جمال المنظور متساوي القياس.

5. يؤلف مكعب.

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

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

6. ابدأ قاعدة الشجرة.

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

ثم ضعي ثلاث درجات من اللون البني لتمثيل الخشب.

7. الانتهاء من الشجرة.

تصغير حجم لحاء الشجرة ؛ مكرر مكعب وتلون وجوهها مثل شكل الارض باللون الاخضر.

8. استخدم مكعب لإنشاء اللبنات الأساسية

قم بتكرار مكعب ولونه باللون الوردي لمواد البناء.

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

9. تجميع الأبراج.

قم بمحاذاة قاعدة البرج والمكعب الوردي.

اترك بعض المساحة بينهما ، وضع ثلاث ركائز داخل تلك الفجوة.

للحصول على محاذاة مثالية ، تأكد من تعيين "Snap to Point" و "Smart Guides" في خيار القائمة "View".

10. جسر الأبراج.

حدد النقطة العلوية واليمنى من مستوى علوي ، وانطلق إلى النقاط مع المستوى المكافئ في البرج المزدوج.

ما عليك سوى نسخ مستوى الجانب الأيمن وتغيير حجمه لإنشاء حافة لجسر البرج.

11. إنشاء السلالم.

انسخ والصق ثلاثة وجوه من برج ؛ محاذاة الحواف لإنشاء كتلة ؛ ثم حرك النقاط السفلية لإنشاء درجة سلم واحدة.

كرر وضع الخطوات عدة مرات.

12. أغلق الدرج.

قم بمحاذاة النقاط من الجانبين الأيسر لإغلاق الفجوات من الدرج.

13. اقلب الدرج.

حدد السلالم المكتملة ، واستخدم "أداة الانعكاس (O)" لإنشاء كتلة ثانية تواجه اليسار.

تأكد من تغيير ألوان الوجوه اليمنى واليسرى لاحترام تأثير الإضاءة - الظل الأكثر قتامة إلى اليمين ، الظل المتوسط ​​إلى الظل الأيسر والأفتح في الأعلى.

14. ربط الدرج.

اربط بعض المكعبات بالدرج لعمل نقاط انطلاق ، وربطها بالأبراج.

15. إنشاء تأثير عمق المياه.

مكرر ، وتصغير السطح الأزرق الفاتح.

ضعه في أوضاع مختلفة ، وأضف ظلًا أغمق من اللون الأزرق لإنهاء تأثير عمق البحر.

16. ابدأ سطح السفينة باستخدام الطائرات الموجودة

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

17. أضف أعمدة إلى السطح.

حدد لحاء الشجرة ، ثم قم بتكرارها وتصغيرها ووضعها لإنشاء أعمدة السطح.

ها هي النتيجة النهائية.

يمكنك إضافة بقع داكنة أكبر على البحر أو مربعات ملونة متساوية القياس على مستوى الجزيرة لمحاكاة العشب والزهور.

بشكل عام ، استمتع ، وحرك الأشياء ، وقم ببناء بعض الأبراج الرائعة ، باستخدام وحدات البناء البسيطة التي تعلمتها للتو.

ختاما

كما رأينا مع هذه الأدلة الثلاثة ، لا تحتاج إلى الكثير من مهارات الرسم لإنشاء بعض الرسوم التوضيحية ذات المظهر الجيد.

كل ما عليك أن تضعه في اعتبارك هي هذه المبادئ الثلاثة:

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

استمتع بإنشاء الرسوم التوضيحية الخاصة بك ، وقم بتحميل قطعتك الفنية الجديدة في Dribbble وفي أي مكان آخر على الويب. استمتع!

• • •

مزيد من القراءة على مدونة Toptal Design:

• تجربة مستخدم التجارة الإلكترونية - نظرة عامة على أفضل الممارسات (باستخدام مخطط المعلومات الرسومي)
• أهمية التصميم المتمحور حول الإنسان في تصميم المنتج
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
• مبادئ ارشادية للواجهات المتنقلة
• التصميم التوقعي: كيفية إنشاء تجارب مستخدم سحرية