كيف ترسم واجهة مشغل صوتيات باستخدام Adobe Illustrator


Sara Aber

سنتعلم طريقة تصميم مشغل صوتيات Audio Player باستخدام برنامج أدوبي اليستريتور، حيث سنعتمد في درسنا هذا على تقنية التصميم المسطّح (flat design).

audio-player.thumb.png.6025beccc19b3f299

بداية سنحتاج إلى تحميل هذه الملفات:

إعدادات مساحة العمل

1. نقوم بفتح ملف جديد خاص بالدّرس، نختار اسمًا للملف قد يكون Audio Player أو أي اسم آخر ثم نحدد قياسه 1280px*1280px ونتأكّد أننا اخترناه مخصص للويب ( profile: web).

(عادة نختار المقاسات الكبيرة للتصميم حتى لا يتأثر عند تصغيره)

1.thumb.png.796e2821b3a1ce18064eb9f35023

2. باستخدام أداة Rounded Rectangle Tool نرسم شكلا ونختار له المقاسات التّالية: 598px*244px*8px، ثم نحدد له اللون EFEFEF#:

4.thumb.png.e77b98a662c8d6e63a611523e003

5.thumb.png.d223ab10c505edcc65d4c7a9146e

3. باستخدام أداة المستطيل (M) نرسم مستطيلا نقوم بوضعه فوق الشّكل الأوّل كما في الصورة ونحدد اللون D35353 #:

6.thumb.png.8d2cb548d1c9066aa62ab6d213fc

4. نقوم بتحديد الشّكلين بالضّغط على CTRL+A، أوعن طريق الضّغط على الشّكلين وفي نفس الوقت نضغط CTRL+Shift:

7.thumb.png.c472bfd7a35f3245fecd7bf4fe1e

5. بعد تحديد الشّكلين نختار الأداة (Shape Builder tool (Shift+M لجعلهما متناسقين:

15.thumb.png.df007b48536ee8b5f648b89b3d0

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

7. نُعيد تطبيق الخطوتين 4 و6 لتصميم مؤشّر المسار الخاص بمشغل الموسيقى فنتحصل على الشكل التالي:

15.thumb.png.df007b48536ee8b5f648b89b3d0

8. نقوم بإضافة بعض اللّمسات على التّصميم، كإضافة عنوان الملف الموسيقي، مدّته الزمنيّة، والملف التّالي.

نختار نوع الخط: Lato Regular، مقاسه: font، ولونه: 7C7C7C#:

17.thumb.png.119d3670ad71cfb604e4f350b85

9. نقوم بتحريك مؤشّر الحجم (للتوضيح بأن الملف الموسيقي قيد التّشغيل)، وذلك باستخدام أداة rounded rectangle ورسم مستطيل فوق الشكل السَابق، نختار له المقاس: 422px*14px*15px radius واللون: CCCCCC#.

10. الآن نضيف مستطيل آخر على المستطيل السّابق نختار له اللّون d84848 #، ثمّ نحدد مسار كلاً من المستطيل الأوّل والثاني.

باستخدام أداة Shape Builder tool نقوم بحذف الجزء الزّائد من المستطيل الذي في الأعلى فنحصل على هذا الشكل التالي:

19.thumb.png.71487fcd4b3b1fc2410c62d8b80

11. باستخدام أداة (Ellipse tool (L نرسم دائرة ونختار لها اللون d74948 #، ثم نقوم بإضافة أيقونة الصّوت الموجودة في ملف الأيقونات كما يظهر في الصّورة:

21.thumb.png.617b2f52b6b95f903c42b4e15e4

تصميم أزرار التحكم الخاصة بالتشغيل

12. نرسم مستطيلا نضعه على الخلفية الرّئيسية للمشغّل ونختار له اللّون d85656 #:

24.thumb.png.de6a95e3d689494c56c2159953f

13. نحاول أن نجعل المستطيل على شكل دائري وذلك باستخدام أداة the Shape builder tool وحذف الأجزاء الزّائدة:

27.thumb.png.53b7aaf914abdeda8d8c6705c1c

14. الآن، نضيف العناصر الموجودة في ملف الأيقونات:

33.thumb.png.3539d256c814565f96d002657b7

تصميم قائمة التشغيل

15. نقوم بنسخ كل ما سبق لنا تصميمه:

35.thumb.png.8dde02cbb14b18c819a13bb25ed

16. نقوم بتكبير الخلفيّة الرّئيسية بمقدار 460px، أو أي قيمة تريدها:

36.thumb.png.cd4476f69b44d6c8c1ce6009b94

17. نقوم بتمديد خلفيّة العناصر بحيث تصبح أكبر من الخلفيّة الأساسية، ثم نحذف الأجزاء الزّائدة باستخدام أداة the Shape Builder.

الهدف من ذلك هو جعل الجزء الذي يحتوي على أزرار التحكّم لا يظهر بشكل دائري في الأطراف.

37_(1).thumb.png.bb75cdfa892fcea18c2f81a

18. نضع للقائمة عُنواناً:

41.thumb.png.fff3970df1b024472a48bdeec9e

19. باستخدام أداة the rectangular grid tool، نرسم شبكة تحتوي علي 6 تقسيمات أفقية فقط (نضع 0 أمام التقسيمات العموديّة):

43.thumb.png.3adc7f168831f028b2fc01b8645

20. نقوم بتوسيع الشّبكة لتتناسب مع خلفيّة مشغل الصوتيات، ونغير قيمة opacity إلى حوالي 20%، وباستخدام أداة the scissors tool نحذف الخط الأفقي:

45.thumb.png.4b74ac03c78a80e93ad9268de9a

21. لاستخدام أداة (scissors tool (C، يكفي أن نحدّد جزء من المسارالذي نريد حذفه ونضغط مرتين، ثم نستخدم زر الحذف delete من لوحة المفاتيح أو زر backspace:

47.thumb.png.bcba08840867e4c37df277fa137

22. الآن الشبكة جاهزة، نقوم بوضع الأدوات الموجودة في ملف الأيقونات والذي سبق وقمنا بتحميله ثم نضع عنوانا للقائمة:

53.thumb.png.9e8f58614a83cd138eb58001640

54.thumb.png.c8045b40b0a8c9e366def673f09

23. لتصميم شريط التّمرير، نقوم برسم مستطيل باستخدام الأداة rounded rectangle tool، نحدّد له اللون cccccc# أما لمؤشّر التوقف فنختاراللّون 262626# مع استخدام أداة the Shape Builder tool:

57.thumb.png.b6cd5311cbb77830627a20c2d7c

24. أنهينا تصميم واجهة Audio Player، بإمكانك أن تحفظ العمل على شكل: AI, PSD, JPG, PDF أو SVG.

ترجمة -وبتصرّف- للدرس How to Create a Music Player UI Using Adobe Illustrator لصاحبه James Richman.





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


لا توجد أيّة تعليقات بعد



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

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

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


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

تسجيل الدخول

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


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