تصميم أيقونات فكتور خطية في برنامج إليستريتور


zahershullar

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

سنبدأ بتصميم أيقونة كاميرا رقمية. افتح برنامج إليستريتور ثم ابدأ ملفًّا جديدًا واستخدم أداة المستطيل Rectangle Tool لرسم مستطيل. ستلاحظ في هذا الدرس أننا لن نستخدم أبعادًا محدّدة بل سنعتمد على الرؤية الفنّية في التصميم ولكن بإمكانك التقيد بأبعاد محددة. ولاختصار الوقت قمتُ بجعل لون الحدود بلون معين وأزلت لون التعبئة.

01.thumb.png.fde97e2709a78e43345750313c7

استخدم أداة التحديد Selection Tool وانقر على دائرة الزوايا ثم اسحبها لتجعل زوايا المستطيل منحنية.

02.thumb.png.95707c3a2aa278bb8673c16aaf7

استخدم أداة الدائرة Circle Tool لرسم دائرة وحتى تحصل على الدائرة بشكل صحيح اضغط على مفتاحي Alt و Shift معًا أثناء رسم الدائرة حيث ستحافظ على مركزيّة الرسم وعلى أبعاد الدائرة الصحيحة.

03.thumb.png.1360508e55f1e11dd3c69a7c328

استخدم الأدلّة الذكية لتساعدك في هذا التصميم. ارسم دائرة أخرى بذات الطريقة الأولى مع البدء من مركز الدائرة القديمة واجعل الدائرة الجديدة أصغر بقليل.

04.thumb.png.4baaff9c2b762b21c8fae25de5a

كرّر ذات العملية ولكن هذه المرّة ارسم دائرة بنصف حجم الدائرة السابقة.

05.thumb.png.36b3ce31c99a6fd10581f6f7341

استخدم أداة الخط Line Tool لرسم خط قُطري ومع الاستعانة بالأدلّة الذكية لن يكون ذلك صعبًا. سيُمثّل هذا الشكل شكل العدسة المغلقة للكاميرا الرقمية.

06.thumb.png.7b779c1b045b8aa466a71efcd7a

استخدم أداة المستطيل مستدير الزوايا Rounded Rectangle Tool لرسم فتحة الإضاءة الفورية (الفلاش) واجعل الزوايا بنصف قطر صغير وذلك عبر استخدام مفاتيح الأسهم أثناء سحب الفأرة ورسم الشكل.

07.thumb.png.9220b5580d7b23e2ed10ab84f62

ارسم دائرةً صغيرةً تعادل بحجمها ارتفاع المستطيل الصغير المجاور وسنقوم بذلك بمساعدة الأدلّة الذكيّة مجددًا.

08.thumb.png.6f0fc44215cab1491a72e6f99b4

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

09.thumb.png.a0009b57b82ce303a9f61e64843

ارسم مربّعًا صغيرًا مستدير الزوايا بنفس ارتفاع المستطيل المجاور.

10.thumb.png.549e51ef20d9e91433a819b9851

اجعل لون تعبئة جسم الكاميرا بالأبيض ثم حدّد المستطيل والمربّع الصغير الخارجين من جسم الكاميرا وأرسلهما للخلف بالاختصار CMD+Shift+[.

11.thumb.png.a908313f10a20d25d6645ecbdb9

ارسم مستطيلًا صغيرًا في الركن الأيسر السفلي من الكاميرا.

12.thumb.png.be2cc81bbfac0dec0413bfcec70

انسخ هذا المستطيل مرتين عبر Ctrl+C و Ctrl+F وضع النسختين على نفس المحور العمودي للشكل الأصلي.

13.thumb.png.cb13d11f469c0dc2c659a742016

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

14.thumb.png.d29f94adc26239a1ef5d86a1371

انسخ الدائرة بذات الطريقة التي نسخنا فيها المستطيلات الصغيرة.

15.thumb.png.96c5f4301c7529fe07a5d410913

حدّد جميع المستطيلات الصغيرة الثلاث والدوائر الصغيرة الثلاث أيضًا واختر الخيار Merge من لوحة Pathfinder لدمج جميع هذه الأشكال معًا.

16.thumb.png.1dd92b85cf9a62d4189ecd142db

وبهذا نكون قد انتهينا من تصميم شكل الكاميرا الرقمية. والآن سنتجه لتصميم شكل آخر وهو القلم الذي سيرمز إلى المقالات أو الدروس.

17.thumb.png.2b2c56732bb49652ef6d70a2242

ارسم مستطيلًا نحيفًا بارتفاع كبير (استخدمتُ هنا لونًا مغايرًا وبإمكانك اختيار الألوان التي تناسبك).

18.thumb.png.c5bd1329bd9909291b2b35b559e

انسخ Ctrl+C وألصق في المقدمة Ctrl+F هذا المستطيل مرتين وحرك النسختين لتصطف جميع المستطيلات بجوار بعضها البعض.

19.thumb.png.c433e54266e32d24a4b1054c5e1

ارسم مستطيلًا مستدير الزوايا عرضيًا في الجزء العلوي من المستطيلات الثلاثة وليكن نصف قطر زوايا المستطيل صغيرًا.

20.thumb.png.90efdbf0c119fa1f6385f8954a4

ارسم مستطيلًا آخر مستدير الزوايا وهذه المرة فليكن نصف قطر الزوايا كبيرًا واجعل نصفه السفلي يغطي المستطيل العرضي السابق ثم أرسل هذا الشكل للأسفل باستخدام الاختصار CMD+Shift+[.

21.thumb.png.b70c472c90993e9bd33d7be8486

استخدم أداة القلم Pen Tool لرسم مثلّث يُشكّل رأس القلم وللحصول على مثلث مثالي استخدم الأدلة الذكية لمساعدتك على تحقيق الأبعاد المثالية لهذا المثلث (لا أنفك أذكر استخدام الأدلّة الذكية في كل مرّة ولكن استخدامها في الرسم اليدوي وبدون التقيّد بأبعاد محددة يسهّل عملية التصميم بشكل مذهل).

22.thumb.png.843c15ec8d204205785ba33a7dc

ارسم دائرةً متوسطة الحجم مركزها هو نقطة رأس المثلث السفلي.

23.thumb.png.48acca6ead7a55c0ca18fc42edd

ضاعف شكل المثلث ثم حدّده مع شكل الدائرة واستخدم الخيار Intersect من لوحة Pathfinder لقص الجزء المشترك بين الشكلين.

24.thumb.png.5ccdec3d472c6b13261f884594d

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

25.thumb.png.f6e573065fcdbdbd8cdeccdbfaf

حدّد كل أشكال القلم ثم دوّره باستخدام لوحة Transform بزاوية 45- درجة.

26.thumb.png.40182f4e9801611c54a5c5bbe5f

هذا هو الشكل النهائي للقلم.

27.thumb.png.487a3b4fde52fa5bbb693341cb2

والآن سنرسم أيقونة سنجعلها تبدو كشخصين للدلالة على الجمع وسنغيّر لون الخط إلى أخضر. ابدأ برسم مثلث كبير باستخدام أداة المضلعات Polygon Tool واجعل قاعدته للأسفل.

28.thumb.png.90990081911429e2c3e42d9c01f

استخدم أداة الدائرة مع الضغط على مفتاحي ALT و Shift لرسم دائرة مركزها رأس المثلث.

29.thumb.png.07f5d1501d220dfc21aa5f13c72

ارسم دائرةً أخرى أكبر قليلًا من الدائرة الأولى تتشاركان ذات المركز.

30.thumb.png.fa910bad12685dc58de91a08051

حدّد الدائرة الكبيرة والمثلث ثم انقر خيار Minus Front من لوحة Pathfinder لإزالة مساحة الدائرة المتداخلة مع المثلث من المثلث.

31.thumb.png.f2eb49d10988d68cf4ca9143c2c

حدّد هذا الشكل مع الدائرة ثم انسخ Ctrl+C ثم ألصق في المقدمة Ctrl+F ثم حرّكها لليسار قليلًا وبعدها صغّر حجمها قليلًا.

32.thumb.png.e4e4da8abe8ea3aab9521994406

انسخ الدائرة الكبيرة مجدّدًا ثم ألصقها في المكان في المقدمة ثم كبّرها بشكل طفيف مع استخدام مفتاحي ALT و Shift للمحافظة على موقع مركز الدائرة ونسبة الأبعاد.

33.thumb.png.6fa069af14ebb649acd3c72f5c9

حدّد الدائرة الكبيرة الجديدة والدائرة الصغيرة على اليسار ثم استخدم Minus Back من لوحة Pathfinder لتقص شكل الدائرة الكبيرة من الصغيرة.

34.thumb.png.7f5651fb36ddffb25c3aee6e149

كرّر ذات العملية مع شكل أعلى الجسم الكبير من نسخ ولصق وتكبير.

35.thumb.png.8a743a2b498ab88c4bce6f35b79

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

36.thumb.png.9c0fd53eb4d6dc8e923708f3ed0

وبهذا يصبح هذا الشكل جاهزًا للاستخدام.

37.thumb.png.d91ab8da6fc91f39fe3f4b67c89

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





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


شكرااا جزيلاً

انتم راااائعين فعلاً 

بالتوفيق

شارك هذا التعليق


رابط هذا التعليق
شارك على الشبكات الإجتماعية


يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن