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

كيفية إنشاء مجموعة من ايقونات الآيس كريم بإستخدام برنامج ادوبي اليستوليتر

by
Read Time:20 minsLanguages:

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

Final product imageFinal product imageFinal product image
What You'll Be Creating

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

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

تحدثنا بما فيه الكفاية — دعنا نفتح برنامج الاليستوليتر ونبدأ اللعب مع بعض الوصفات .

1.إعدادات الملف

دعنا نبدأ بشكل بسيط بواسطة انشاء ملف جديد (Control-N or File > New) ونعدل بعض الإعدادات .

  • عدد الصفحات : 1
  • العرض : 640 بيكسل
  • الارتفاع : 600 بيكسل
  • الوحدات : بيكسل

ومن تبويب الخيارات المتقدمة :

  • نمط الألوان : RGB
  • التأثيرات النقطية : عالي (300 ppi)
  • محاذاة الاشكال الجديد الشبكة المبكسلة : ضع إشارة الصح بجانب العبارة
setting up a new documentsetting up a new documentsetting up a new document

2. إعدادات الطبقات

بمجرد اننا انشئنا ملف جديد حان الوقت لعمل الطبقات التي تجعلنا نتمكن من انشاء مساحة عمل لطيفة و انيقة لنركز كل قسم من الرسم خطوة واحدة بوقت واحد . لذا , افتح لوحة الطبقات , وانشئ ستة طبقات , واعد تسميتهم كالتالي :

  1. أرجواني
  2. برتقالي
  3. أخضر
  4. شكولاته
  5. مزدوج
  6. بيسكويت
setting up the layerssetting up the layerssetting up the layers

3. تعديل الشبكة

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

لتعديل بعض الخيارات التي تكلمت حولها , يجب ان تذهب لـ Edit > Preferences > Guides & Grid. من هناك , سوف تظهر لك بعض الخيارات , حيث انت بحاجة لتعديل التالي :

  • Gridline every: 1 px
  • Subdivisions: 1
adjusting the grid settingsadjusting the grid settingsadjusting the grid settings

ما إن تقوم بالتعديل كالخيارات التي في الاعلى , انت بحاجة لتفعيل الخيار من خلال الذهاب الى View > Snap to Grid.

نصيحة سريعة : يجب ان تعرف ذلك الخيار Snap to Grid سوف يحول لـ Snap to Pixel في كل مرة تدخل نمط عرض البيكسل , لكن ذلك لطيف تماماً بما أن الشبكة اعدت للقيم الدنيا . سوف تجعل وظيفة عمل الاثنان نفسها .

تسطيع ان تقرأ اكثر حول الشبكة وكيفية عملها من خلال الذهاب لبعض دروسي الأخرى التي تغطي ذلك الموضوع :

أيضاً , اذا كنت ترغب بتحريك بعض الاشياء بمساعدة لوحة المفاتيح , من خلال مفاتيح الاسهم التوجيهية , ربما ترغب بتغيير Keyboard Increment لـ 1 بيكسل لتجعله دقيق قدر الإمكان . تسطيع عمل ذلك بالذهاب إلى Edit > Preferences > General > Keyboard Increment.

adjusting the keyboard increment settingsadjusting the keyboard increment settingsadjusting the keyboard increment settings

اذا كانت اعدادات النسخة من البرنامج لديك لـ pt "نقطية" , فقط اذهب الى units و غير الـ General والـ Stroke units لـPixels احسنت عملاً .

4. إنشاء الايقونة الاولى

الخطوة الاولى

اختر العمل على الطبقة الارجوانية , واستخدم الـ Rounded Rectangle Tool لإنشاء شكل بـ 28x90 بيكسل مع 4 بيكسل للزوايا "Corner Radius" . التالي , لون الشكل بإستخدام اللون التالي #B392AC و ضع الشكل بإستخدام الإحداثيات التالية في لوحة التحويل " Transform panel" :

  • X: 226 px
  • Y: 211 px
positioning the top base shape for the first iconpositioning the top base shape for the first iconpositioning the top base shape for the first icon

الخطوة الثانية

ما إن تقوم بإنشاء الشكل الاول , حدده , ودعنا نعطيه حدود سميكة من خلال الذهاب الى Object > Path > Offset Path وادخل 4 بيكسل في حقل الـ offest

creating the outline of the first icon using the offset path effectcreating the outline of the first icon using the offset path effectcreating the outline of the first icon using the offset path effect

الخطوة الثالثة

ربما لاحظت ذلك نحن الان لدينا شكل خلف الشكل الاصلي , لكننا بحاجة لتغير لونه حتى لا يمتزجا في شكل واحد . ببساطة حدد الشكل ومن ثم غير لونه لشئ ما اكثر قتامة #735D78

changing the color for the first icons outlinechanging the color for the first icons outlinechanging the color for the first icons outline

الخطوة الرابعة

تالياً انشئ مستطيل اصغر 6x22 بيكسل مع زوايا بحدود 1 بيكسل . لون الشكل بإستخدام #F7D1CD ومن ثم حاذه في الوسط بشكل افقي بجانب حدود الآيس كريم , تأكد من وضعه في الاسفل .

creating the stick for the first iconcreating the stick for the first iconcreating the stick for the first icon

نصيحة سريعة : كما انت ترى , القسم العلوي من العصا يدخل تحت الآيس كريم بحوالي 4 بيكسل , اي نفس قيم الحدود الحالية . تستطيع تحقيق هذا المرحلة من الدقة من خلال تغيير لـ نمط عرض البيكسل (Alt-Control-Y or View > Pixel Preview), اي تسمح لك لرؤية البيكسل الفعلي الذي يكمن تحت العمل الفني الخاص بك .

example of using the pixel preview mode for positioning the stick to the first iconexample of using the pixel preview mode for positioning the stick to the first iconexample of using the pixel preview mode for positioning the stick to the first icon

الخطوة الخامسة

اعطي العصا حد خارجي باستخدام نفس الـ Offset Pathتأكد من تغير لونه الى #735D78

first icon with basic shapes finishedfirst icon with basic shapes finishedfirst icon with basic shapes finished

الخطوة السادسة

ما ان نحصل على الشكل الرئيسي , بإمكاننا البدء بوضع بعض التفاصيل . بما ان عملنا الاخير كان على العصا , دعنا نبدء من هناك استخدم اداة المستطيل (M) انشئ شكل 6X4 بيكسل , الذي سوف نحوله للون الاسود #000000 هذا الشكل سوف يعتير كالظل , سوف نغير طريقة المزج "Blending Mode "الى Multiply ومن ثم نقلل الشفافية الى 20 %

adding a subtle shadow to the first icons stickadding a subtle shadow to the first icons stickadding a subtle shadow to the first icons stick

الخطوة السابعة

التالي , اضف خطين مائلين بانشاء مستطلين بـ 6X4 بيكسل #735D78الذي سوف نضعها بعيدة بمقدار 4 بيكسل عن بعضها البعض ومن ثم نحن بحاجة الى تعديل الاشكال بتحديد نقاط الربط اليمين باستخدام اداة التحديد (A) ومن ثم حرك النقاك للاعلى 2 بيكسل , إما باستخدام السهم الاعلى في الكيبورد او الزر اليمين للماوسTransform > Move وادخل -2 بيكسل الى حقل الادخال العامودي . اخيراً جمع العامودين (control-G) و ضعهم بجوارالظل الذي قمنا بإنشاءه سابقاً

adding details to the first icons stickadding details to the first icons stickadding details to the first icons stick

الخطوة الثامنة

تحرك للاعلى , نستطيع البدء بإضافة حزمه من الإضاءات للآيس كريم دعنا نبدء مع المستطيل الخارجي , عن طريق إنشاء نسخة (Control-C > Control-F) من القسم الداخلي ومن ثم نضيف مستطيل صغير 24x86 بيكسل مع 2 بيكسل للزاوية (ارسمه مع الاحمر الفاتح)

مع كلا العنصرين المحددين , اذهب الى لوحه (Pathfinder ) واستخدم الـ Minus Front option. هذا سوف ينشئ تقاطع في الشكل الكبير , الذي نستطيع استخدامه كـ ضوء فعلي .

creating the cut out for the all-round highlight for the first iconcreating the cut out for the all-round highlight for the first iconcreating the cut out for the all-round highlight for the first icon

الخطوة التاسعة

غير لون الشكل للابيض #FFFFFF , و Blending Mode لـ Soft Lightو مستوى الشفافية الى 40%

adjusting the blending mode for the all-round highlight of the first iconadjusting the blending mode for the all-round highlight of the first iconadjusting the blending mode for the all-round highlight of the first icon

Step 10

استخدم اداة المستطيل (M) وانشئ مستطلين بـ اللون الابيض #FFFFFFواحد صغير ( 20X4 بيكسل) وواحد طويل (20X10 بيكسل) , و ضعهم على القسم العلوي من الايقونة .

ثم , ضعهم بالوسط بشكل افقي بمحاذاة الشكل الارجواني , حيث يكون لديك فجوة 14 بيكسل بين الحد الخارجي والمستطيل السفلي , و 4 بيكسل اخرى بين الشكلين ب اللون الابيض .

adding the diagonal highlights to the first iconadding the diagonal highlights to the first iconadding the diagonal highlights to the first icon

الخطوة الحادية عشر

تعديل اثنين من الاضاءة بتحديد نقاط التحديد اليمنى واستخدام اداة التحديد (A) و من ثم تحريكهم للاعلى 20 بيكسل (right click > Transform > Move and enter -20 px into the Vertical input field).

adjusting the diagonal highlights for the first iconadjusting the diagonal highlights for the first iconadjusting the diagonal highlights for the first icon

الخطوة الثانية عشر

بما أن الإضاءات بحاجة لتكون شفافة الى حد ما , يتوجب علينا تعديلهم بتغيير Blending Modes الى soft light والشفافية الى 60 %

adjusting the blending modes for the diagonal highlights of the first iconadjusting the blending modes for the diagonal highlights of the first iconadjusting the blending modes for the diagonal highlights of the first icon

الخطوة الثالثة عشر

الآن انا سوف اعرض لك خدعة (من المحتمل انك لاتعرفها بالفعل) اذا طبقت الـ a blending mode على الطبقة , ومن ثم قمت بعمل group لواحدة اخرى , تستطيع تطبيق الـ blending mode الجديدة على الـ group نفسها حسناً ؟

إذاً دعنا نحدد الاضاءات , اجمعهم (Control-C > Control-F) ومن ثم من لوحة الشفافية اختر Overlay , دع الشفافية كما هي .

التأثير واضح تماماً , كما هو اعطى الايقونه المزيد من الشعور النابض بالحياة

applying a second blending mode to the diagonal highlights of the first iconapplying a second blending mode to the diagonal highlights of the first iconapplying a second blending mode to the diagonal highlights of the first icon

الخطوة الرابعة عشر

تالياً , نحن سنبدأ بإضافة التفاصيل النهائية لاول ايقونه من الآيس كريم بإضافة الرشات الملونة . استخدم اداة المستطيل (M) وارسم مجموهة من الاشكال بإستدارة على درجة 45°

ابدأ بالتزيين بإستخدام الوان متباعدة لجعلهم مختلفين عن بعضهم البعض

  • الارجواني الغامق 735D78
  • الزهري الفاتح F7D1CD
  • البرتقالي الشاحب F49AA1

الآن ربما لاحظت ان الرشات تمر فوق الإضاءة , وهذا الذي لا نريده لتعديل ذلك , ببساطة حدد الإضاءة الخارجية و زر يميني Arrange > Bring to Front

adding the sprinkles to the first iconadding the sprinkles to the first iconadding the sprinkles to the first icon

الخطوة الخامسة عشر

ما إن تنتهي من إضافة الرشات , حان الوقت لإنشاء نجمات اضاءة صغيرة اولاً انشئ دائرة ة 12X12 بعرض بإستخدام اداة Eliipse tool ثم , استخدم اداة التحديد (A) و حدد النقاط العلوية والجانب اليساري منه , واحذفهم من خلال زر Delete .

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

اختر القطع , وقم بتوحيد كل النقاط , (select the anchors > Control-J)حتى تنتهي مع شكل مغلق . ثم ببساطة حددهم جميعاً واستخدم Pathfinder’s > Unite

creating the star shaped highlightscreating the star shaped highlightscreating the star shaped highlights

الخطوة السادسة عشر

انشئ اثنين من اشكال النجوم وضعهم بجانب بعضهم البعض مع الاشكال الثلاثة المحددة , اذهب الى لوحة الشفافية وغير الـ Blending Modesالى Overlay وخفض الشفافية الى 80%

ما إن تقوم بذالك , اجمعهم سوياً (Control-G) , وضعهم بداخل الايقونة حوالي 18 بيكسل من الجزء العلوي للحدود الخارجية الرئيسية , دع فجوة بينهم وبين الجانب الايمن فقط 2 بيكسل .

positioning the star shaped highlights onto the first iconpositioning the star shaped highlights onto the first iconpositioning the star shaped highlights onto the first icon

الخطوة السابعة عشر

انهي الايقونه بإضافة تدرج لطيف من الاعلى . اولاً حدد الحدود الخارجية (للآيس كريم والعصا) و انشئ نسخة منهم(Control-C > Control-F). ثم النسخة المكررة المحددة , وحدهم لشكل واحد , وطبق التدرج الطولي مع الاعدادات التالية :

  • اللون اليساري #00FF00
  • اللون اليميني : #D4145A
  • الزاوية : -90
gradient settings for the first icongradient settings for the first icongradient settings for the first icon

الخطوة الثامنة عشر

بما أن التدرج شديد جداً , نحن بحاجة لتعديل الـ Blending Mode من خلال تخفيف الشفافية الى 50% هذا سوف يعطينا تأثير توهج ناعم ولطيف .

أخيراً , لاتنسى تحديد كل عناصر الايقونة وتجمعهم سوياً (Control-G) حتى لا تضيع بعض العناصر في حال نقل الايقونة .

first icon finishedfirst icon finishedfirst icon finished

5. إنشاء الايقونة الثانية .

الخطوة الأولى

حرك الطبقة البرتقال للأعلى واستخدم اداة المستطيل (M) لإنشاء شكل 52X90 بيسكل لونه بإستخدام #F49AA1

بما أننا بحاجة الى كلا القسمين العلوي والسفلي لجعلهم بشكل مستدير , سوف نستخدم Round Corners effect لفعل ذلك. استخدم اداة التحديد المباشر (A) , حدد نقاط الزوايا السفلية وطبق 6 بيكسل استدارة عليهم بالذهاب الى Effect > Stylize > Round Cornersوادخل القيم في الحقل (2). ثم حدد نقاط الزاوية العليا واعد نفس العملية , لكن بإدخال قيم مختلفة 26 بيكسل (3).

creating the base shape for the second iconcreating the base shape for the second iconcreating the base shape for the second icon

الخطوة الثانية

وبمجرد الانتهاء من انشاء الشكل , حان الوقت لإضافة الحدود له بإستخدام offset path مع 4 بيكسل , تأكد من تغيير الوان الشكل الى #C96975

adding an outline to the second iconadding an outline to the second iconadding an outline to the second icon

الخطوة الثالثة

اضف عصا صغيرة بإستخدام مستطيل 12x28 بيكسل مع حدود 6 بيكسل لون الشكل باستخدام #F7D1CD ومن ثم انشئ حدود 4 بيكسل استخدم الـ #C96975 , تأكد من جعل كلاً من الحدود والعصا خلف الآيس كريم (right click > Arrange > Send to Back). تأكد من جعل العصا وسط الايقونة , حاذها كما فعلنا سابقاً مع العصا .

adding the little ice cream stick to the second iconadding the little ice cream stick to the second iconadding the little ice cream stick to the second icon

الخطوة الرابعة

اضف بعض التفاصيل لعصا للآيس كريم بإنشاء ظل 12x4 بيكسل #000000 Blending Mode لـ Multiply , خفض الشفافية 20 % و بعض المستطيلات المدورة 1x4 بيكسل مع زوايا 0.5 بيكسل . لون القطع الصغيرة بإستخدام #C96975 ومن ثم إنثرهم داخل عصا الآيس كريم , تأكد من جعل الظل يعبر فوقهم , أيضاً انت ربما بحاجة لجعل كل العناصر في نفس المجموعة حتى لا تفقدهم (Control-G)

adding details to the second icon stickadding details to the second icon stickadding details to the second icon stick

الخطوة الخامسة

انتقل الى القطعة العليا من الايقونة واعط الآيس كريم إضاءة من خلال تكرار نفس العملية بتغيير Blending Mode لـ Soft Light بينما تخفض الشفافية الى 30 % .

adjusting the blend settings for the all-round highlight of the second iconadjusting the blend settings for the all-round highlight of the second iconadjusting the blend settings for the all-round highlight of the second icon

الخطوة السادسة

اضف الإضاءات المائلة بإستخدام اثنين من المستطيلات البيضاء واحدة 44x10 بيكسل , وأخرى 44x4 بيكسل ونحن سوف نضعهم في وسط الايقونة استخدم الـ Move function , حدد زوايا النقاط اليمنى مع اداة التحديد المباشر ومن ثم حركهم بشكل عامودي -44 بيكسل (2).

غير الـ Blending Modes للاشكال الى Soft Light و خفض مستوى الشفافية 50% (3) . الاشكال بحاجة للبقاء داخل الآيس كريم , دع فجوة صغيرة 2 بيكسل على كل طرف , نحن بحاجة لتغطية المستطيلات بإنشاء شكل 44x82 بيكسل المماثل للاطراف الدائرية لشكل الزهري

ثم مع كلاً من الشكل الكبير والمستطيلات المحددة , زر يميني Make Clipping Mask حالما تقوم بفعل ذلك , الإضاءات يجب جاهزة (5).

adding the diagonal highlights to the second iconadding the diagonal highlights to the second iconadding the diagonal highlights to the second icon

الخطوة السابعة

ما إن نقوم بإضافة الإضاءات المائلة , نستطيع البدء بالعمل على الفراغات الصغيرى على سطح الآيس كريم . اولاً اختر اداة المستطيل ذات الاطراف المدورة وانشئ شكل 6x62 بيكسل (#C96975) مع زوايا 3 بيكسل (1) .

استخدم اداة التحديد المباشر (A) حدد واحذف النقاط السفلية , ومن ثم اضغط Control- Jلاعطاء الشكل النهاية المستطحة (2).

تالياً اضف مستطيل 2X58 بيكسل مع اطراف 1 بيكسل في الاعلى , وانشئ تقاطع بإستخدام Pathfinder’ خيار الـ Minus Front . الشكل (3 و 4) ما إن تقوم بإنشاء التقاطع , اضف اثنين من الدوائر 2X2 بيكسل للساقين في الاسفل وادمجهم مع التقوس مثل الشكل (5)

انشئ شكل آخر مطابق 2X58 بيكسل للنسخة السابقة (6) وثم اقطع دائرة 2X2 بيكسل من الشكل السفلي الشكل 7 و 8 اضف ظل صغير اعلى داخل الشكل ومن ثم حدد كل العناصر و اجمعهم سوياً بإستخدام Control-G.

creating the little fosses for the second iconcreating the little fosses for the second iconcreating the little fosses for the second icon

الخطوة الثامنة

ضع الاشكال فوق الآيس كريم , ومن ثم انشئ ثلاث نسخ إضافية , ضعهم بجانب بعضهم البض بـ فراغ حوالي 4 بيكسل .

positioning the fosses onto the second iconpositioning the fosses onto the second iconpositioning the fosses onto the second icon

الخطوة التاسعة

ما إن نضيف الاشكال , بإستطاعتنا الان آخذ نسخة (Control-C) من اضاءات النجمة في الايقونة السابقة وعمل لصق (Control-F) على النسخة التي نعمل عليها الآن .

adding the star shaped highlights to the second iconadding the star shaped highlights to the second iconadding the star shaped highlights to the second icon

الخطوة العاشرة

انهي الايقونة بإضافة تدرج طولي مع الإعدادات التالية :

  • اللون اليساري #00FF00
  • اللون اليميني #D4145A
  • الزاوية -90
  • Blending Mode: Color Burn
  • الشفافية 20 %
second icon finishedsecond icon finishedsecond icon finished

6. إنشاء الايقونة الثالثة

الخطوة الاولى

كالعادة , تأكد من انك على الطبقة الصحيحة (الواحدة الخضراء في تلك الحالة ) وانشئ نسخة من الايقونة الاولى وانسخها هناك , لذا انت وضعت 40 بيكسل بين التكرار والايقونة الثانية .

creating the third icon using the first onecreating the third icon using the first onecreating the third icon using the first one

الخطوة الثانية

الغي جمع كل عناصر الايقونة (right click > Ungroup) ومن ثم احذف التدرجات بتحديدهم ومن ثم اضغط حذف (1) . بينما نحن نحذف الاشياء , تستطيع ايضاً التخلص من الرضات الصغيرة (2) والخطوط المائلة من العصا الصغيرة (3) .

الآن دعنا نحرك بعض الاشياء قليلاً من خلال تغيير الالوان . حدد كلا الحدود الخارجية الكبيرة وحدود العصا ولونهم بإستخدام #386150 للايقونة املئ بـ #CAF7E2 ولتعبئة العصا . من هذه النقطة (4) ايقونتا الصغيرة يجب ان تبدو اكثر مثل شيء حلو من كوكب آخر , اي بالضبط ما نحن نريده .

adjusting the color scheme of the third iconadjusting the color scheme of the third iconadjusting the color scheme of the third icon

الخطوة الثالثة

ابدأ بإضافة التفاصيل كالشرائط المائلة #CAF7E2 (الشكل 2) , النقاط الصغيرة #CAF7E2(الشكل 3) , واثنين من الخطوط 12x4 بيكسل للعصا (4) .

اعتماداً على كيفية جمعك لعناصر الايقونة , سوف تجلب الاضاءات فوق كل شيء ايضا بتحديدهم ومن ثم الزر اليميني Arrange > Bring to Front

ماإن تضع كل شيء . لا تنسى إعادة جمع العناصر بإستخدام Control-G

adding details to the third iconadding details to the third iconadding details to the third icon

الخطوة الرابعة

انهي العمل على الايقونة بإضافة تدرج طولي ناعم مع الإعدادات التالية :

  • اللون اليساري
  • اللون اليميني #D4145A
  • الزاوية -90
  • Blending Mode: Lighten
  • الشفافية 60%
third icon finishedthird icon finishedthird icon finished

7. أنشئ الايقونة الرابعة

الخطوة الأولى

اذهب الى طبقة الشكولا ,واستخدم شكل المستكيل مستدير الزوايا 28x18 بيكسل مع 2 بيكسل للزوايا . لونه بإستخدام #A07F7F ومن ثم ضعه حوالي 40 بيكسل اسفل الايقونة الاولى .

positioning the first element of the fourth iconpositioning the first element of the fourth iconpositioning the first element of the fourth icon

الخطوة الثانية

مع الشكل المحدد الجديد , اذهب الى Object > Path > Offset Path واعطه حدود 4 حتى تكون الاشياء متوازنه . غير الوان الحدود الى #785F5F ومن ثم انشئ واحد للإضاءة #FFFFFF كما فعلنا في كل الايقونات السابقة , مع الـ Blending Mode ضع Soft Light والشفافية الى 40%

ماإن تملئ كلا , الحدود الخارجية والإضاءة , اجمع العناصر معاً بإستخدام Control-G.

creating the first ice cream segment for the fourth iconcreating the first ice cream segment for the fourth iconcreating the first ice cream segment for the fourth icon

الخطوة الثالثة

انشيء تكرار من مقطع الايقونة فقط من خلال سحب للاسفل مع الضغط علىAlt (لإنشاء التكرار) والـ Shift (للسحب بشكل مستقيم)

بينما كل قطعه سوف يكون لها حدود خارجية , يجب ان تحاول دمجهم حتى لا ينتهي بك الامر مع فجوة كبير بين الحشوات . انصحك بالعودة الى Pixel Preview Mode حتى تكون دقيق قدر الإمكان (Alt-Control-Y) .

ماإن تنشيء النسخة الاولى اضغط Control-D (تكرار) مرتين لانشاء كامل الشرائح

creating the remaining segments for the fourth iconcreating the remaining segments for the fourth iconcreating the remaining segments for the fourth icon

الخطوة الرابعه

عدل القطعتين الثانية والرابعة لالوان اكثر اشراقاً بقليل بإستخدام #BA9494

adjusting the color scheme for the fourth iconadjusting the color scheme for the fourth iconadjusting the color scheme for the fourth icon

الخطوة الخامسة

إبدء العمل على عصا الايقونة بإنشاء مستطيل 6x28 بيكسل مع زاويا 1 بيكسل . لونه بإستخدام #F7D1CD ومن ثم ضعه تحت القطعة الأخيرة إذاً الفسم السفلي يداخل تحت الحدود . ومن ثم , مع العصا المحددة , اعطه Offset Path , مع 4 بيكسل غير لون الشكل الى #785F5F

adding the little ice cream stick to the fourth iconadding the little ice cream stick to the fourth iconadding the little ice cream stick to the fourth icon

الخطوة السادسة

اضف ظل مناسب 4x6 بيكسل #000000 و Multiply تكون 20% للعصا ومن ثم حدد كل العناصر و اجمعهم سوياً بإستخدام Control-G.

fourth icon with basic shapes finishedfourth icon with basic shapes finishedfourth icon with basic shapes finished

الخطوة السابعة

في هذه المرحلة سوف نضع الاشكال الاساسية , سوف نبدأ العمل على إضافة التفاصيل إستخدم شكل المستطيل (M) , وإنشيء حزمه من الاشكال مختلفة الاحجام لونهم بإستخدام ومن ثم ادرهم بزاوية 45 - درجة بالضغط (R) لعمل الدوران ومن ثم اسحب بإستخدام الماوس للاعلى

اجمع الاشكال الزخرفية سوياً (Control-G وضع واحدة لقطعة الآيس كريم الاولى (2) وواحدة أخرى للقطعة الثالثة (3)

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

adding details to the fourth iconadding details to the fourth iconadding details to the fourth icon

الخطوة الثامنة

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

adding the star shaped highlight to the fourth iconadding the star shaped highlight to the fourth iconadding the star shaped highlight to the fourth icon

الخطوة التاسعة

انهي الايقونة بإضافة تدرج طولي هادئ مع الخيارات التالية :

  • اللون اليساري #FFFF00
  • اللون اليميني #C1272D
  • الزاوية 90 -
  • Blending Mode: Hard Light
  • الشفافية : 20 %
fourth icon finishedfourth icon finishedfourth icon finished

8. إنشاء الايقونة الخامسة

الخطوة الاولى

ضع نفسك على الطبقة المزدوجة , مع إستخدام شكل المستطيل (M) انشئ شكل 26X90 بيكسل الذي سوف نلونه بإستخدام #9CD6F2

استخدم اداة التحديد المباشر (A) , حدد نقاط السفلية و طبق تأثير الزاوية المدورة 4 بيكسل (2). ثم قم بعمل نفس الخطوة للنقاط العلوية اعطهم قيم عالية 13 بيكسل (3) للحصول على شعور الزاوية المدورة

adjusting the fill shape for the fifth iconadjusting the fill shape for the fifth iconadjusting the fill shape for the fifth icon

الخطوة الثانية

ما إن تقوم بتعديل الشكل , اعطه حدود #6B94A8 ومن ثم حاذه الاثتنين للجانب اليميني من الايقونة السابقة, دع فجوة 40 بيكسل بينهم .

positioning the fifth iconpositioning the fifth iconpositioning the fifth icon

الخطوة الثالثة

اضف العصا الصغيرة اسفل الآيس كريم بإنشاء مستطيل مدور الزوايا 6x22 بيكسل مع 3 بيكسل للزوايا لون الشكل بإستخدام #D9F0F9 (الشكل 1) ومن ثم اعطه حدود 4 بيكسل#6B94A8 (الشكل 2)

ضع العصا اسفل الايقونة حيث تغطى بالجزء السفلي من الآيس كريم .

positioning the ice cream stick for the fifth iconpositioning the ice cream stick for the fifth iconpositioning the ice cream stick for the fifth icon

الخطوة الرابعة

اضف تفاصيل صغيرة للعصا كنقاط مثل الرشات وظل مناسب 6x4 بيكسل (#6B94A8), الذي طبقناه على الايقونات الاخرى

adding details to the fifth icons stickadding details to the fifth icons stickadding details to the fifth icons stick

الخطوة الخامسة

حيث ان هذه الايقونه هي 2 آيس كريم مزدوجه , نستطيع الآن استخدام العناصر التي انشئناها حتى هذه اللحظه بإستخدامهم لإنشاء القسم الثاني

للقيام بذلك , ببساطة حدد كل العناصر ومن ثم اسحب لليمين بينما تستمر بالضغط على Alt (لعمل تكرار) و shift (للسحب بشكل مستقيم) . تأكد من انك جعلت العرض بطريقة البيكسل التي تستطيع من خلالها التأكد من الخطوط الخارجة الرئيسية للعنصرين .

example of using pixel preview to correctly overlap the elements of the fifth iconexample of using pixel preview to correctly overlap the elements of the fifth iconexample of using pixel preview to correctly overlap the elements of the fifth icon

الخطوة السادسة

ما إن نقوم بعمل التصاق لـ قطعتي الآيس كريم سوياً , سوف نرسل كلا الحدود الخارجية للعصا الى الخلف من خلال تحديدهم ومن ثم الزر اليميني Arrange > Send to Back.

correctly adjusting the position of the two sections of the fifth iconcorrectly adjusting the position of the two sections of the fifth iconcorrectly adjusting the position of the two sections of the fifth icon

الخطوة السابعة

ابدأ بإضافى كل التفاصيل الصفيرة كالإضاءات , الخطوط المائلة واخيراً اشكال النجوم .

adding the star shaped highlight to the fifth iconadding the star shaped highlight to the fifth iconadding the star shaped highlight to the fifth icon

الخطوة الثامنة

اخيراً اضف تدرج طولي لطيف بإستخدام القيم التالية :

  • اللون اليساري #00FF00
  • اللون اليميني #D4145A
  • الزاويا -90
  • Blending Mode: Multiply
  • الشفافية 10%
fifth icon finishedfifth icon finishedfifth icon finished

9. انشئ الايقونة السادسة والاخيرة

الخطوة الاولى

تحرك على الطبقة الأخيرة , طبقة البسكويت , و استخدم اداة المستطيل ذو الحواف المدورة لإنشاء شكل 52x112 بيكسل مع زوايا 4 بيكسل .

لون الشكل بإستخدام #F4D5BD ومن ثم طبق تأثير Offset Path مع 4 بيكسل لاعطاءه الحدود الخارجية #806347

ما إن تقوم بإنشاء العناصر , ضعهم بجانب الايقونة التي قمنا سابقاً بإنشاءها , دع 28 بيكسل فجوة بينهم

positioning the basic shapes for the sixth iconpositioning the basic shapes for the sixth iconpositioning the basic shapes for the sixth icon

الخطوة الثانية

اضف الإضاءة الآن , حيث سنقوم بعمل مجموعة من العناصر التي سوف تنهي هذا الجزء من الايقونة . استخدم الابيض #FFFFFF للون, و ضع Blending Mode لـ Soft Light بينما نحافظ على مستوى الشفافية حوالي 60%

adding the all-round highlight to the sixth iconadding the all-round highlight to the sixth iconadding the all-round highlight to the sixth icon

الخطوة الثالثة

خذ اداة المستطيل ذات الحواف المدورة و إنشئ شكل صغير 52x56 بيكسل مع زوايا 4 بيكسل التي سوف نلونها بإستخدام #C4976E

ثم , حدد الشكل وطبق تأثير Offset Path مع 4 بيكسل عليه , و لون الحدود بإستخدام #806347

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

creating the bottom section for the sixth iconcreating the bottom section for the sixth iconcreating the bottom section for the sixth icon

الخطوة الرابعة

ابدأ بعمل طريقتك من خلال التفاصيل بإنشاء مجموهة من الدوائر 4x4 بيكسل #806347 (الشكل 2) ومن ثم اضف كل الاضاءات (الشكل 3) ومن ثم الخطوط المائلة (الشكل 4) اشكال النجوم (الشكل 5) واخيراً ظل مناسب (الشكل 6)

adding details to the sixth iconadding details to the sixth iconadding details to the sixth icon

الخطوة الخامسة

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

  • اللون اليساري #C7B299
  • اللون اليميني #C1272D
  • الزاوية -90
  • Blending Mode: Hard Light
  • الشفافية 20 %
sixth icon finishedsixth icon finishedsixth icon finished

هذا كل مافي الأمر

أمل ان تكونوا قد استمتعتم بهذه الهدية اللذيذه وتعلمتم بعض الاشياء الجديدة في هذه الرحلة

لا تتردد في وضع نسختك في القسم المخصص , وانا اتطلع دائما لرؤية ما ستقوم به شكراً لانتباهكم , اتمنى لكم يوماً جميلاً !

all icons finishedall icons finishedall icons finished
One subscription.
Unlimited Downloads.
Get unlimited downloads