Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Icon Design
Design

كيفية إنشاء حزمة من رموز مشغلات أندرويد في Adobe Illustrator

by
Difficulty:BeginnerLength:LongLanguages:

Arabic (العربية/عربي) translation by Asaad (you can also view the original English article)

Final product image
What You'll Be Creating

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

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

ومع ذلك ، يمكنك الحصول على كمية جديدة من القهوة ودعنا نبدأ.

لا تنسَ أنه يمكنك دائمًا توسيع المشروع من خلال التوجه إلى GraphicRiver ، حيث ستجد الكثير من حزم من رموز Android المصممة، في انتظار النقر عليها.

1. كيفية إعداد وثيقة جديدة

نظرًا لأنني أظن أنك قد قمت بتشغيل Illustrator بالفعل في الخلفية ، فأعده ودعنا ننشئ مستندًا جديدًا (File> New أو Control-N) باستخدام الإعدادات التالية:

  • Number of Artboards: 1
  • Width: 800 px
  • Height: 600 px
  • Units: Pixels

ومن قائمة Advanced :

  • Color Mode: RGB
  • (Raster Effects: Screen (72ppi
  • Preview Mode: Default
setting up a new document

نصيحة سريعة: ربما لاحظ بعضكم أن خيار Align New Objects to Pixel Grid مفقود ، وذلك لأنني أستخدم إصدار CC 2017 الجديد من البرنامج ، حيث تم إجراء تغييرات كبيرة على الطريقة التي يتعامل بها Illustrator مع الطريقة تنساب الأشكال إلى Pixel Grid.

2. كيفية إعداد شبكة مخصصة

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

خطوة 1

انتقل إلى Edit > Preferences > Guides & Grid ، واضبط الإعدادات التالية:

  • Gridline every: 1 px
  • Subdivisions: 1
setting up a custom grid

نصيحة سريعة: يمكنك معرفة المزيد حول الشبكات من خلال قراءة هذا الجزء المتعمق حول كيفية عمل Illustrator’s Grid System.

خطوة 2

بمجرد إعداد الشبكة المخصصة لدينا ، كل ما نحتاج إلى القيام به للتأكد من أن أشكالنا تبدو واضحة هي تمكين خيار Snap to Grid  الموجود أسفل قائمة View ، والتي ستتحول إلى Snap to Pixel في كل مرة تدخل فيها وضع Pixel Preview.

الآن ، إذا كنت جديدًا على "pixel-perfect workflow" ، فإنني أوصيك بشدة بالاطلاع على كيفية إنشاء برنامج تعليمي لـ pixel-perfect artwork ، مما يساعدك على توسيع مهاراتك التقنية في أي وقت من الأوقات.

3. كيفية إعداد الطبقات

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

ومع ذلك ، قم بإظهار لوحة Layers ، وإنشاء إجمالي ست طبقات ، والتي سنقوم بإعادة تسميتها كما يلي:

  • الطبقة 1: الشبكات المرجعية
  • الطبقة 2: البطارية
  • الطبقة 3: الإعدادات
  • الطبقة 4: المراسلة
  • الطبقة 5: التنبيه
  • الطبقة 6: الصور
setting up the layers

4. كيفية إنشاء الشبكات المرجعية

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

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

الآن ، بما أننا سننشئ الرموز بقصد استخدامها داخل نظام التشغيل أندرويد الفعلي ، فسنضطر إلى اتباع إرشادات الحجم والتنسيق الموصى بها ، وإعداد شبكة مخصصة من 96 × 96 بكسل مع حشوة شاملة سعة 4 بيكسل.

خطوة 1

ابدأ بإطباق كل طبقة الشبكة المرجعية ، ثم امسك أداة (Rectangle Tool (M وقم بإنشاء مربع برتقالي 96 × 96 بكسل (# F15A24) ، مما يساعد على تحديد الحجم الكلي لرموزنا.

creating the main shape for the reference grid

خطوة 2

أضف واحد أخر أصغر حجمًا 88 x 88 بكسل (#FFFFFF) والتي ستعمل كمنطقة رسم نشطة ، مما يمنحنا حشوة شاملة سعة 4 بيكسل.

creating the main shape for the active drawing area

خطوة 3

قم بتجميع المربعين اللذين يتكونان من الشبكة المرجعية باستخدام اختصار لوحة المفاتيح Control-G ، ثم أنشئ ثلاث نسخ على مسافة 24 بكسل من بعضها البعض ، مع التأكد من محاذاتهما إلى مركز لوحة الرسم.

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

creating and positioning all the reference grids

5. كيفية إنشاء رمز البطارية

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

ومع ذلك ، تأكد من أنك على الطبقة الصحيحة (التي ستكون الثانية) ثم قم بتكبير الشبكة المرجعية الأولى حتى نتمكن من البدء.

خطوة 1

ابدأ بإنشاء خلفية الرمز باستخدام دائرة 88 × 88 بكسل ، والتي سنقوم باستخدامها لونها عن طريق # 00C853 ، وسيقوم الوسط بمحاذاة منطقة الرسم النشطة بعد ذلك.

creating and positioning the main shape for the battery icons background

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

خطوة 2

أنشئ الجزء الرئيسي للبطارية باستخدام مستطيل مقاس 24 × 40 بكسل ، وسنعمل على تلوينه باستخدام اللون الأبيض (#FFFFFF) ثم تتم محاذاة المركز إلى الدائرة الأكبر ، على مسافة 20 بكسل من الحافة السفلية.

creating and positioning the main shape for the battery icons body

خطوة 3

قم بتحويل الشكل الذي قمنا بإنشائه في مخطط تفصيلي ، عن طريق إقلابه بـ Stroke ((Shift-X ، ثم تعيين Weight إلى 4 بكسل و Corner بـ Round Join ، كل ذلك من داخل لوحة Stroke.

turning the battery icons body into an outline using the stroke panel

خطوة 4

قم بإنشاء أول شريط مؤشر حالة ، باستخدام إما مستطيل 12 × 4 بكسل (#FFFFFF) أو 12 بكسل stroke عريض (#FFFFFF) مع وزن 4 بيكسل ، والذي سنقوم بمحاذاةه لجسم البطارية ، مع ترك فجوة 4 بكسل حولها.

creating and positioning the battery icons first state indicator bar

خطوة 5

أضف شريطين مؤشر آخرين ، سنقوم بتجميعهما رأسيًا على مسافة 4 بكسل من بعضهما البعض ، مع تجميعهما معًا (Control-G) بعد ذلك.

adding the remaining state indicator bar to the battery icon

خطوة 6

قم بإنهاء الرمز عن طريق إضافة الغطاء العلوي ، والذي سنقوم بإنشائه باستخدام مستطيل أصغر حجمه 8 × 4 بكسل (#FFFFFF) سنقوم بمحاذاته لجسم البطارية ، على مسافة 6 بيكسل (4 بكسل للحشوة + 2 بكسل للنصف العلوي من السكتة الدماغية).

بمجرد الانتهاء من ذلك ، لا تنس اختيار وتجميع (Control-G) كل أشكال تركيب البطارية ، وفعل الشيء نفسه في جميع أقسام الإنشاء الخاصة بالأيقونة أيضًا.

finishing off the battery icon

6. كيفية إنشاء رمز الإعدادات

بافتراض أنك تمكنت من إنهاء الرمز الأول ، يمكنك قفل الطبقة الخاصة به ، ثم الانتقال إلى المستوى التالي (الذي سيكون الثالث) ودعنا نبدأ العمل على الإعدادات الأولى.

خطوة 1

كما فعلنا مع الأيقونة السابقة ، ابدأ بإنشاء الخلفية باستخدام دائرة 88 × 88 بكسل ، والتي سنستخدمها باستخدام # 2196F3 ، مع محاذاة المركز لمنطقة الرسم النشطة الأساسية بعد ذلك.

creating and positioning the main shape for the settings icons background

خطوة 2

ابدأ العمل على شريط التمرير الأوسط عن طريق إنشاء مستطيل 4 × 32 بيكسل أو مستطيل طوله 32 بيكسل وعرض 4 بيكسل ، والتي سنقوم باستخدامها باللون الأبيض (#FFFFFF) ومن ثم محاذاة الوسط إلى الدائرة الأكبر ، على مسافة 18 بكسل من الحافة العلوية.

creating and positionign the main shape for the settings icons center slider

خطوة 3

أنشئ مؤشر حالة مربع التمرير باستخدام مستطيل حجمه 12 × 4 بكسل (#FFFFFF) الذي سنتمحور حوله مع الشكل الذي تم إنشاؤه مسبقًا ، على مسافة 4 بكسل من الحافة السفلية.

creating and positioning the main shape for the center sliders state indicator

خطوة 4

أضف القسم السفلي من شريط التمرير باستخدام مستطيل 4 × 12 بكسل (#FFFFFF) الذي سنضعه تحت شريط مؤشر الحالة ، مع تحديد وتجميع (Control-G) مع الأشكال الثلاثة معاً بعد ذلك.

creating and positioning the main shape for the center sliders lower section

خطوة 5

قم بإنشاء القسم العلوي لشريط التمرير الأيسر باستخدام مستطيل أصغر حجمه 4 × 12 بكسل (#FFFFFF) ، والذي سنقوم بمحاذاة الحافة العلوية لمنزلق المركز ، مع وضعه على مسافة 12 بيكسل منه.

creating and positioning the main shape for the left sliders upper section

خطوة 6

أضف مؤشر حالة المنزلق عن طريق إنشاء مستطيل بحجم 12 x 4 بكسل (#FFFFFF) والذي سنقوم بتجميعه رأسيًا للشكل الذي تم إنشاؤه مسبقًا ، على مسافة 4 بكسل من الحافة السفلية.

creating and positioning the main shape for the left sliders state indicator

خطوة 7

قم بإنهاء شريط التمرير الأيسر بإضافة القسم السفلي الذي سنقوم بإنشائه باستخدام مستطيل 4x 32 px و(#FFFFFF) الذي سنضعه تحت المؤشر.

بمجرد الانتهاء من ذلك ، حدد الأشكال الثلاثة وقم بتجميعها معًا (Control-G) كما فعلنا مع شريط التمرير الأوسط.

finishing off the settings icons left slider

خطوة 8

قم بإنهاء الرمز عن طريق إنشاء نسخة (Control-C> Control-F) من شريط التمرير الأيسر الخاص به ، والذي سنضعه على الجانب الأيمن من الدائرة ، على مسافة 4 بكسل من شريط التمرير الأوسط.

عند الانتهاء ، لا تنسَ اختيار وتجميع (Control-G) جميع أقسام الإنشاء بحيث لا يتم فصلها عن غير قصد.

finishing off the settings icon

7. كيفية إنشاء رمز المراسلة

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

خطوة 1

أنشئ خلفية الرمز باستخدام دائرة 88 × 88 بكسل ، وسنعمل على تلوينها باستخدام #7C4DFF ثم تتم محاذاة المنطقة لمنطقة الرسم النشطة.

creating and positioning the main shape for the messaging icons background

خطوة 2

قم بإنشاء الشكل الرئيسي لمربع الرسائل الأيسر باستخدام مستطيل 32 × 24 بكسل ، والذي سنقوم باستخدامه باللون الأبيض (#FFFFFF) ثم نضعه على مسافة 20 بيكسل من منطقة السحب النشطة والحافة العلوية على حد سواء.

creating and positioning the main shape for the messaging icons left text box

خطوة 3

ابدأ في ضبط الشكل الذي أنشأناه للتو ، عن طريق تشغيل وضع Pixel Preview أولاً (Alt-Control-Y) ثم إضافة نقطة ربط جديدة إلى الحافة السفلية ، على مسافة 10 بيكسل من اليسار إلى اليسار بالنقر بمساعدة أداة Add Anchor Point Tool.

عند الانتهاء ، لا تنس إنهاء وضع Pixel Preview باستخدام اختصار لوحة المفاتيح Alt-Control-Y.

adding a new anchor point to the bottom edge of the messaging icons left text box

خطوة 4

استمر في ضبط المستطيل عن طريق تحديد نقطة الربط السفلية اليسرى مع أداة (Direct Selection Tool (A ، ثم دفعها إلى الأسفل بمقدار 8 بكسل بمساعدة أداة Move (انقر بزر الماوس الأيمن> تحويل> نقل> عمودي> 8 بكسل ).

adjusting the shape of the messaging icons left text box

خطوة 5

حوّل الشكل الناتج إلى مخطط تفصيلي ، عن طريق قلب Fill ب Stroke بـ (Shift-X) ومن ثم تعيين Weight إلى 4 بكسل وجعل Corner  إلى Round Join.

turning the messaging icons left text box into an outline

خطوة 6

أضف خط النص الأصغر عن طريق إنشاء مستطيل 10 × 4 بكسل ، والذي سنقوم باستخدامه باللون الأبيض (#FFFFFF) ثم ضعه داخل مربع الرسالة الصغير ، مع محاذاة إلى الزاوية العلوية اليسرى ، مع التأكد من ترك 4 بيكسل الفجوة حولها.

creating and positioning the first text line onto the messaging icons left text box

خطوة 7

أضف خط النص الأوسع باستخدام مستطيل 20x4 بكسل بـ (#FFFFFF) الذي سنقوم بمحاذاته إلى المستطيل الذي تم إنشاؤه مسبقًا ، على مسافة 4 بكسل من الحافة السفلية.

عند الانتهاء ، لا تنسَ تحديد جميع أشكال مربعات النص وتجميعها معًا باستخدام اختصار لوحة المفاتيح Control-G.

creating and positioning the second text line onto the messaging icons left text box

خطوة 8

قم بإنشاء نسخة (Control-C> Control-F) من مخطط مربع النص الصغير ، ثم اعكس (right click > Transform > Reflect > Vertical) وضعه على الجانب الأيمن من الدائرة ، على مسافة 18 بكسل من منطقة الرسم النشطة على حد سواء الأيمن والأسفل.

creating and positioning the messaging icons second text box

خطوة 9

يمكنك إنهاء الرمز ، عن طريق إزالة قسم تداخل مربع النص (مظللة باللون الأحمر) بحيث ينتهي بك الأمر إلى وجود فجوة بمقدار 4 بكسل بينه وبين مخطط الطرف الأيسر. للقيام بذلك ، قم ببساطة بإضافة نقطة ربط جديدة إلى الحافة العلوية والحافة اليسرى ، ثم قم بإزالة كل النقاط الأخرى.

بعد الانتهاء من ذلك ، حدد جميع أقسام إنشاء الرمز وجمعها معًا باستخدام اختصار لوحة المفاتيح Control-G.

finishing off the messaging icon

8. كيفية إنشاء رمز التنبيه

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

خطوة 1

أنشئ دائرة 88 × 88 بكسل ، وسنقوم بعد ذلك باللون باستخدام #FFC107 ، بحيث يتم توسيطها مع منطقة الرسم النشطة الأساسية.

creating and positioning the main shape for the alarm icons background

خطوة 2

أنشئ الجزء الرئيسي من ساعة المنبه باستخدام دائرة 40 × 40 بكسل ، والتي سنقوم باستخدامها باللون الأبيض (#FFFFFF) ثم تتم محاذاة المنطقة إلى منطقة الرسم النشطة ، على مسافة 20 بكسل من الحافة السفلية.

creating and positioning the main shape for the alarm icons body

خطوة 3

قم بتحويل الشكل الذي قمنا بإنشائه للتو إلى مخطط تفصيلي ، وذلك عن طريق قلب Fill بـ Stroke ، ثم تعيين Weight إلى 4 بكسل من داخل لوحة Stroke.

turning the alarm icons main body into an outline

خطوة 4

حدد أداة القلم (P) وارسم عقارب الساعة باستخدام 4 بكسل عرض Stroke مع تعيين اللون إلى الأبيض (#FFFFFF) و Corner إلى Round Join ، مع التأكد من ترك فجوة 4 بكسل بين نقاط الربط النهائية و الدائرة الأكبر.

drawing in the little hands inside the alarm clocks main body

خطوة 5

قم بنقل بعض البكسلات نحو الأعلى ، وقم بإنشاء مستطيل 8x6 px و(#FFFFFF) الذي سنقوم بمحاذاة الجزء العلوي من الدائرة الأكبر ، وضعه بحيث ينتهي بتداخل النصف العلوي من Stroke.

creating and positioning the main shape for the alarm clocks upper section

خطوة 6

أضف مستطيل 16x4 بكسل (#FFFFFF) أعلى المستطيل الذي قمنا بإنشائه ، وتحديده وتجميعه (Control-G) معًا بعد ذلك.

finishing off the alarm clocks top section

خطوة 7

قم بإنهاء الرمز عن طريق رسم شريحتين قطريتين صغيرتين باستخدام 4 بكسل Stroke مع ضبط اللون على الأبيض (#FFFFFF). بعد الانتهاء من التحديد ، حدد مجموعة (Control-G) جميع أشكال الإنشاء في المنبه معًا ، وفعل الشيء نفسه للرمز بالكامل بعد ذلك.

finishing off the alarm clock icon

9. كيفية إنشاء رمز الصور

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

خطوة 1

يؤدي استخدام دائرة 88 × 88 بكسل (# FF6F00) إلى إنشاء خلفية الرمز التي سنتمحور حولها مع منطقة الرسم النشطة.

creating and positioning the main shape for the photos icons background

خطوة 2

أنشئ الجسم الرئيسي للصورة باستخدام مستطيل 36 × 36 بكسل ، والذي سنقوم باستخدامه باللون الأبيض (#FFFFFF) ثم نمشى مع منطقة الرسم النشط الأساسية ، على مسافة 20 بيكسل من الحافة العليا.

creating and positioning the main shape for the photos icons body

خطوة 3

قم بتحويل الشكل الذي قمنا بإنشائه في مخطط تفصيلي ، عن طريق قلب التعبئة بـ Stroke (Shift-X) ، ثم تعيين Weight إلى 4 بكسل و Corner إلى Round Join من داخل لوحة Stroke.

turning the photos icons main body into an outline

خطوة 4

باستخدام أداة القلم (P) إرسم في الخط المقسم الأفقي باستخدام 4 بكسل عرض Stroke و(#FFFFFF) التي سنضعها داخل الشكل الذي تم إنشاؤه مسبقًا ، على مسافة 4 بكسل من الحافة السفلية.

adding the horizontal divider line to the lower body of the photos icon

خطوة 5

باستخدام نفس المستطيل 4 بكسل (#FFFFFF) مع Round Join ، ابدأ في رسم أول جبل بوضع نقطة ربطك الأولى على الحافة اليسرى للصورة ، على مسافة 10 بكسل من خط الفاصل الأفقي الذي قمنا به خلق للتو.

أضف المرتكز الثاني على مسافة 10 بيكسل على كلا الجانبين الأفقي والرأسي من النقطة الأولى. انتهي من الجبل بإضافة المرتكز الثالثة والمرتكز الأخير على خط الفاصل الأفقي ، مع الضغط باستمرار على مفتاح Shift لرسم خط قطري مثالي.

drawing the photos icons first mountain

خطوة 6

ارسم في الجبل الثاني الأصغر ، مستخدمًا مستطيل نفس العرض الذي يبلغ 4 بكسل (#FFFFFF) ، وبعد الانتهاء من ذلك ، حدد جميع أشكال إنشاء الصور واستخدمها معًا باستخدام اختصار لوحة المفاتيح Control-G.

drawing the photos icons second mountain

خطوة 7

أنشئ القسم السفلي للرمز باستخدام مستطيل 28 × 6 بكسل ، والذي سنقوم باستخدامه باللون الأبيض (#FFFFFF) ثم تتم محاذاة الجزء الأوسط إلى الجزء السفلي من مخطط الصورة ، على مسافة 4 بكسل.

creating and positioning the main shape for the lower section of the photos icon

خطوة 8

قم بإنهاء الرمز ، عن طريق تدوير الشكل الذي أنشأناه للتو في مخطط تفصيلي 4 بكسل (#FFFFFF) مع الانضمام إلى Round ، ثم ضبطه بإضافة نقطة ربط جديدة إلى وسط الحافة العليا ، ستقوم بإزالتها من أجل فتح المسار (مظللة باللون الأحمر).

حدد الشكل الناتج وباقي عناصر إنشاء الصور وجمّعها (Control-G) لعمل الشيء نفسه بالنسبة إلى أقسام إنشاء الرمز بعد ذلك.

finishing off the photos icon

انتهى!

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

Final Design
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.