() translation by (you can also view the original English article)
مع هذا البرنامج التعليمي أود أن أظهر لك بعض الحيل في إنشاء خطوط نظيفة وحواف عند العمل مع اتجاه تصميم المسطح، في Adobe Illustrator. أنماط الطبقات البسيطة وإعادة استخدام "أنماط الرسوم البيانية" للمساعدة في سير العمل الخاص بك هي الأكثر كفاءة، حيث يجب أن تكون قادراً على إنشاء مجموعة من الرموز المتطابقة في وقت لايذكر.
١. إعداد المستند الخاص بك
للبدء، لنقم بإنشاء لوح فني 500 × 500px. بما ان الرموزلدينا وحدات نمطية ولديهم الكثير من الخطوط المستقيمة سيكون من الأفضل العمل مع شبكة لضمان اشكال هشاشة بكسل مثالي. لذلك دعونا ننشئ شبكة 1px ثم اظهر واطبق على الشبكة كما هو مبين أدناه.
٢. إنشاء ايقونة مكبرة
بينما تقوم بصنع الرموز الخاصة بك حاول أن تأخذ في الاعتبار استخدام الرمز نفسه وحيث سيتم وضعه. لهذه الرموز سوف الصق حجم عام ب 128 × 12px هو أمر شائع جداً في العالم الرمزي . بما اننا نتابع اتجاه التصميم المسطح سنلتصق مع الألوان الأساسية وزواية 45 درجة مئوية مع الظلال مبالغ فيها.
الخطوة ١
سوف اقوم بانشاء الإطار السلكي لهذه الايقونات مع اشكال اساسية ثم نضبط نمط الأشكال باستخدام عدد قليل من "أنماط الرسوم". لذلك لنبدأ حدد "أداة المستطيل المدورة" وقم بإنشاء مستطيل 20 × 80px وصوره الى لوحك الفني.
الخطوة ٢
وبعد ذلك، حدد أداة القطع الناقص (L) وقم بإنشاء عدة دوائر متحدة المركز. تبدا الأولى من 70 x 70px، ثم 55 x 55px، ثم 40 × 40px، وأخيراً 15 × 15px. الآن رتتبها كما ترى أدناه.
الخطوة ٣
حدد أداة المستطيل (M) وارسم القليل من التي تغطي نصف الأشكال التي أنشأته للتو. سنستخدم هذه لقطع الأشكال التي ستصبح فيما بعد المناطق المظللة. لا يهم الطول/العرض،اضمن أن تتم محاذاتها بالضبط إلى المركز للأشكال الأخرى. أننا أيضا سوف نجعل ظل مدلي بها لذلك ارسم مربعا ولفّه 45 درجة مئوية ووضعه بحيث تجتمع حافة الخط القطري الجزء السفلي من الدائرة الخارجية والمستطيل السفلي المدور.
الخطوة ٤
باستخدام لوحة Pathfinder سوف نستخدم مزيجاً من الاتحاد و جبهة ناقصة، وقاطع لتغيير أشكال هذه المستطيلات الي تراكبات الظل لدينا. تذكر عند استخدامك هذه الأدوات التي سوف تؤثر على الشكل لذلك ستحتاج إلى تكرار هذه الاشكال من أجل إنشاء النتيجة المرجوة. في الصورة أدناه لقد طبقت اللون الأحمر للرسم والطبقة البيضاء سوف تكون الظل في وقت لاحق.
الخطوة ٥
الآن سوف نحتاج إلى صنع الظل المدلي به. ابدأ بتكرار القاع الممسوك الاكثر مع اشكال الدوائر الاكبر ثم توحدهم في كائن واحد. قم بتكرار هذا الشكل الجديد وادفع ذلك إلى 15px اليسارية. قم بزيارة الكائن > مزيج > "خيارات المزج".. وأدخل ما يكفي من الخطوات بحيث أن هناك انتقالاً سلسا (لقد التصقت مع 50)، ثم اصنع المزيج. الآن قم بتوسيع الكائن ووحدهم لتشكيل شكل واحد. فم بالتكبيرللشكل قم ببتفعيل اداة التحديد المباشر (A) وقم بتحديد النقاط الإضافية غير الضرورية وإزالتها، مع التأكد من إغلاق المسارات (Command + J) عندما تكون قد انتهيت. وأخيراً قم بمحاذاة هذا الكائن إلى الجزء الخلفي من جميع الأشكال الأخرى إذا لم تكن قد فعلت ذلك.
الخطوة ٦
بما ان الأيقونات لدبنا هي فقط '"مستوية نوعا ما"'،دعونا نسلط الضوء على بعضها. حدد أشكال العنصر الرئيسي (تلك التي باللون الأحمر) وقم بمضاعفتهم مرتين. باستخدام الأسهم الموجودة على لوحة المفاتيح، ادفع الواحد الاكثر تكررا على مدى 1px. اتجاه الدفع للعنصر بالقمة يعتمد على الاتجاه العام للون. لذلك،بالنسبة للشكل الماسس الأسفل، ادفعه إلى اليسار، ولكن للشكل الداخلي المدور، ادفعه لليمين نحو المنطقة الحمراء. حدد الاثنين المكررين وقم باستخدام "جبهة ناقصة" لترك لون سكني من الضوء . يمكنك أن ترى هذا باللون الأخضر في الصورة أدناه.
الخطوة ٧
مع الأشكال الرئيسية مكتملة دعونا نعمل أسلوب لهم. حدد كافة العناصر التي تصنع الكأس المكبرة، ودوّرها 45 º عكس اتجاه عقارب الساعة.
الآن قم بتحديد جميع العناصر التي سوف تشكل الظلال. وهذه هي الأجزاء البيضاء على المقبض والخواتم الخارجية، فضلا عن الظلال المدلية. املء هذه مع الأسود المسطح و قم بإسقاط التعتيم على 15% وتأكد من إزالة أي حدود قد تكون لديك. بمجرد أن يتم ذلك، انتقل إلى إطار > "أنماط الرسوم"، وعندما تظهر تلك النافذة انقر فوق زر العنصر الجديد في الجزء السفلي بجوار أيقونة سلة المهملات لإنشاء نمط رسومي خارج هذا التأثير.
الخطوة ٨
حدد منطقة المقبض وانتقل إلى المظهر الخاص بك (نافذة > المظهر) لوحة وأدخل المعلومات التي تظهر أدناه. لون القاعدة سيكون لون رمادي مسطع، ثم سنقوم بإضافة طبقة أخرى على رأس ذلك مليئة بالأسود إلى الأبيض المتدرج إلى 45 درجة مئوية مع عتامة 25% وقم بتعيين وضع المزج إلى متراكب. وبمجرد الانتهاء احفظ هذا ك"نمط الرسم" كذلك.
الخطوة ٩
حدد في اقصى الأسفل دائرة وسوف نطبق إلى حد كبير نفس النمط، إلا أننا سوف تستخدم ظل رمادي أفتح. مرة أخرى، احفظ هذا ك "نمط رسم".
الخطوة ١٠
حدد الدائرة الداخلية وطبق نفس النمط الفاتح الذي قمنا بعمله للتو ، اعكس التدرج اللوني بحيث أنه من الفاتح إلى الداكن.
الخطوة ١١
حدد افصى دائرة داخلية و التي سوف تكون عدستنا. سيتم استخدام نفس النمط ل هذا الشكل، وكذلك، فقط بدلاً من الرمادي، سنقوم باستخدام لون الأزرق المميز. تأكد أيضا من إنشاء "نمط رسمي" من هذا كذلك.
الخطوة ١٢
وأخيراً، سوف نسلط الضوء خاصتنا. حدد كافة العناصر الخضراء واملئهم بالأبيض المسطح ثم قم بإخفاض العتامة وصولاً إلى نسبة 25 في المائة. التأكد من حفظ هذا ك "نمط رسم" كذلك. الدائرة الاخيرة الباقية على الشكل تسليط ضوء صعب بحيث أننا سوف نترك ذلك باللون الأبيض عند 100%، فقط تأكد من إزالة الحدود.
٣. إنشاء ايقونة الترس
الخطوة ١
لنقم بإنشاء الفتحات لشكل الترس لدينا. حدد "أداة المستطيل المدور" وقم بإنشاء مستطيل 20 × 110px وصوّره إلى لوحة الرسم الآن كرر هذا الشكل ثلاث مرات أكثر وقم بإجراء استدارة لهم بزوايا 45 درجة مئوية لصنع شكل زهرة.
الخطوة ٢
وبعد ذلك، حدد أداة القطع الناقص (L) وقم بإنشاء عدة دوائر متحدة المركز. لتكون الأولى 90 x 90px، ثم 60 × 60px، وأخيراً 30 × 30px. الآن قم بترتيبها كما ترى أدناه.
الخطوة ٣
اختر شكل الزهرة والدائرة في اقصى الأسفل ووحدّهم. ثم حدد الدائرة الأصغر وكررها. الآن حدد واحدة من الدوائر الصغيرة المكررة وأكبر الأشكال و "جبهة ناقصة لترك فتحة في الوسط.
الخطوة ٤
الآن دعونا نعمل بعض الظلال مرة أخرى. ابدأ بإنشاء المستطيلات التي تغطي نصف الأشكال. بما ان لدينا نهايات المعدات الإضافية سنقوم أيضا بإضافة بعض الظلال لهذه. تنظيم زوايا الظلال للترس في النقطة التي تلتقي فيها الدائرة بنهاية العتاد.
الخطوة ٥
الآن إنشاء الظل المُدلى. قم بتكرار شكل الترس السفلي وادفع ذلك على 15px مثل الرمزالسابق لدينا. اخلط الشكلين الاثنين ثم قم بتوسيعهم وقم بتوحيدهم.
الخطوة ٦
الآن قم بإنشاء النقاط البارزة. تذكر أن تقوم بالدفع نحو اللون الأحمر
الخطوة ٧
وأخيراً، قم بتدويرالأشكال 45 º وقم بتطبيق "نمط الرسم"الذي لدينا من قبل. هذا الايقونة سهلة نسبيا حيث سنقوم فقط باستخدام النمط الرمادي الاغمق، مع التأكد من عكس التدرج للدائرة الداخلية.
٤-إنشاء أيقونة عين
الخطوة ١
نستخدم في أيقونة العين الكثير من الدوائر. لذا، قم بتحديد أداة القطع الناقص (L) وقم بإنشاء عدة دوائر متحدة المركز. لتكون الأولى 120 x 120px، ثم 50 × 50px، وأخيراً 20 x 20px. الآن قم ترتيبهم كما ترى أدناه.
الخطوة ٢
حدد الدائرة الأكبر، وقم بالتبديل إلى "أداة تحويل وجهة الارتساء" (Shift + C). حدد نقطتين على كل من اليسار واليمين، وانقر لجعلهم نقاط حادة. الآن حدد أداة التحديد المباشر (A) ادفع المرساة المنحنية العلوية لأسفل 20px. كرر هذا للأسفل، وادفعه فقط إلى الأعلى بدلاً من ذلك.
الخطوة ٣
الآن حدد كافة هذه الأشكال معا ودوّرهم باتجاه عقارب الساعة 45 درجة مئوية. بعد أن نحصل على الظلال خاصتنا، وتسليط الضوء في المكان سوف ندورها رجوعا مرة أخرى بحيث أنهم في منظورصحيح.
الخطوة ٤
حدد أداة القطع الناقص (L) وقم بإنشاء شكل بيضاوي وهو 15 × 20 px وقم بمحاذاته كما ترى اسفل.
الخطوة ٥
إنشاء الظلال، ويسلط الضوء على ما قمنا به قبل. تقسيم الأشكال و المستطيلات الى النصف وباستخدام لوحة مستكشف المسارات.
الخطوة ٦
حدد كافة الأشكال الموجودة لدينا مرة أخرى وقم بإجراء استدارة لها للخلف 45 درجة مئوية، ثم طبق أنماط الرسوم لدينا. استخدام اللون الرمادي الأفتح للجزء الرئيسي من العين والأزرق مع التدرج العكسي لقزحية العين ورمادي داكن الذي سوف نقدم الآن للبؤبؤ.
٥-إنشاء أيقونة محادثة
الخطوة 1
نحن في منتصف طريق الانتهاء من ايقونتنا! لنقم بإنشاء واحدة تمثل الدردشة، أو التعليقات. "استخدام أداة المستطيل المدور" قم بإنشاء مستطيل 80 × 75px
الخطوة ٢
الآن مع أداة المستطيل(M) قم بإنشاء مستطيل 25 x 15px ثمقم بمحاذاته للأسفل و 15px من اليمين.
الخطوة ٣
مع أداة القطع الناقص (L) ننشئ ثلاث دوائر هي 15 × 15px وقم بمحاذاتهم للمركز للمستطيل المستدير الزوايا كما ترى في الاسفل.
الخطوة ٤
تمكين أداة التحديد المباشر (A) وتحديد أسفل اليسار نقطة التي تجعل أعلى المستطيل السفلي ثم إزالته بشكل مثلث الزوايا، مع التأكد من إغلاق الطريق عند الانتهاء من ذلك.
الخطوة ٥
حدد مستطيل مستدير الزوايا والمثلث ووحدهم لعمل شكل كامل واحد. عنكا تكون موحدة،كررشكل فقاعة الكلام هذه واقلبها أفقياً وادفعها الى الأسفل وإلى 15px لليمين أدنى الأشكال الأخرى.+
الخطوة ٦
كما فعلنا مع أيقونة العين، حدد كافة الأشكال ثم قم بتدويرها 45 درجة مئوية. سوف نعمل على الظلال، وتسليط الضوء في هذه الزاوية بحيث أنه عندما نلفها مرة أخرى يتدلوا بشكل صحيح.
الخطوة ٧
كما هو الحال في الايقونات السابقة لنقم بإنشاء حواف حادة لللإشارة إلى الضوء والظلال. كن على علم بالظلال الخاصة بك. تريد تخلق الوهم بأن الدوائرتدلي بظل حقاً طويل عبر الفقاعة، وأن الفقاعة العلوية تلقي بظل على السفلية. للظلال المدلى بها من الدوائر سأكون ببساطة ساستخدم مستطيل بنفس الارتفاع كالدائرة وواسع ما يكفي لاحتواءه بالفقاعة ثم قم بإزالة الزائد.
الخطوة ٨
الآن قم بتدوير الأشكال مرة أخرى وتطبيق أنماط الرسوم البيانية الخاصة بك. الفقاعة السفلى ستكون الرمادي الغامق لدينا، بينما الأعلى ستكون الرمادي الافتح والنقاط ستكون باللون الأزرق المميز
٦-قم بإنشاء أيقونة ساعة
الخطوة ١
دعونا ننتقل إلى ساعتنا. مع أداة القطع الناقص (ل) انشئ عدة دوائر متحدة المركز. لتكون الأولى 100 × 100px، ثم 75 × 75px، وأخيراً 10 x 10px. الآن قم بترتيبها كما ترى ادناه.
الخطوة ٢
الآن سوف نقوم بإنشاء أيدي الساعة. حدد أداة المستطيل (م) لإنشاء مستطيل 10 x 30px وأخرى وهي 10 × 20px، وأخرى وهي 2 × 30 px. الآن قم بمحاذاتها بحيث أن الجزء السفلي من المستطيلات تجتمع مع منتصف الدوائر.
الخطوة ٣
قم بالتبديل إلى Rotate Tool (R) وحدد المستطيل النحيل الطويل. ضع المؤشر فوق نقطة المركزللشكل ثم انقر واسحب تلك النقطة إلى الجزء السفلي من المستطيل لضمان أن تبقى في صميم المركز وتنجذب إلى الأسفل. الآن قم بتدوير الشكل 135º باتجاه عقارب الساعة. كرر هذه الخطوة للحصول على قطعة مستطيل المقصرة، فقط قم بتدويرها عكس اتجاه عقارب الساعة.
الخطوة ٤
حدد الدائرة الأصغر في المركز واليد النحيلة الطويلة ووحدهم معا وضعهم فوق الأيدي الأخرى. الآن قم بتحديد كافة الأشكال وقم بالتدوير 45 درجة مئوية
الخطوة ٥
قص الأشكال من النصف كما فعلنا قبل وانشئ الظل المدلى به خاصتنا، فضلا عن تسليط الضوء. لتسليط الضوء ولكن أحببت فكرة امتلاك تسليط الضوء داخل المنطقة المظلمة التي يمكن ان تقع في القسم السفلي. وهذا يعطي بروز للأبعاد التي لم تكن لتكون ,هناك ينبغي استخدام الطريقة التي كنا نفعل.
الخطوة ٦
قم بتدويرالأشكال مرة أخرى وبتطبيق "أنماط الرسوم البيانية" الخاصة بك. سوف يكون الوجه الرمادي الفاتح، الحافة الخارجية،ويدا الدقائق والثواني للساعة ستكون رمادي أغمق، واليد الثانية ستكون لوننا المميز
٧-إنشاء ايقونة التقويم
الخطوة ١
ليقونتنا الآخيرة لنقم بإنشاء تقويم. حدد "أداة المستطيل المدورة" وقم بإنشاء مستطيل 90 x 80px.
الخطوة ٢
كرر هذا المستطيل المستدير الزوايا و اعمل محاذاة له إلى الزاوية اليمنى السفلية. ليس هناك نقاط لن يُصطف لها بالضبط لكن ميزة الاطباق ينبغي أن تتيح لك معرفة متى تكون قريب. عندما تكون هناك، ادفع المكررللاعلى وعبورا إلى اليسار 20px. الآن في لوحة Pathfinder قم باختيار اقسم من قائمة الايقونات في الجزء السفلي. قم بالتبديل إلى أداة التحديد المباشر (A) وحدد الشكل السفلي الخارجي وقم بإزالته. قم بإزالة الزاوية اليمنى السفلية المنحنية بحيث تكون يسارا مع حافة مستقيمة 45 درجة مئوية.
الخطوة ٣
حدد أداة المستطيل (م) قم بإنشاء مستطيل 90 x 25px وقم بمحاذاته إلى الجزء العلوي من الشكل. بعد تكرار مستطيل مستدير الزوايا الكبيرة السفلي حدد المستطيل المستوي العلوي والمدور واستخدم تقاطع من لوحة Pathfinder .
الخطوة ٤
بعد ذلك، أنشئ اثنان من "المستطيلات المدورة" التي هي بقوة 15 × 30px ويتم تدوير الزوايا بما يكفي لعمل شكل حبة. ثم مواءمتها للجزء العلوي من العنصر كما ترى بالاسفل.
الخطوة ٥
قم بالتبديل إلى أداة نوع (T)، واكتب عددا. أي شخص تريد، سأقوم باستخدام "9" كأنه اول عدد تبادر إلى الذهن. بالنسبة للخط دعونا نستخدم "Helvetica" مع حجم 50px. الان تذهب إلى كائن > توسيع وقم بتحويل النوع إلى مسار.
الخطوة ٦
حدد كافة الأشكال وقم بتدويرها 45 درجة مئوية. الآن قم بإضافة الظلال وتسليط الضوء كما قمنا به قبل. ضع في اعتبارك أن الثنية التي أنشأناها في الزاوية السفلية سوف تلقي بظل. لذلك سنقوم فقط بعمل مستطيل بنفس الارتفاع للثنية وقاطعه مع تضاعف للمستطيل السفلي.
الخطوة ٧
وأخيراً ادر الأشكال مرة أخرى وقم بتطبيق أنماط الرسوم البيانية الخاصة بك. المستطيل السفلي المدور سيكون الرمادي الفاتح لدينا الثنية تكون بيضاء مسطحة واشكال سوف تكون رمادي داكن، المستطيل العلوي سيكون لوننا المميز وسيكون العدد نفس اللون الرمادي الداكن لبؤبؤنا في أيقونة العين التي أنشأنا.
عمل رائع، أنت الآن انتهيت
بذلك مجموعة الايقونات لدينا اكتملت لقد تقدمت و قمت بإضافة لون خلفية مسطحة باستخدام اللون الرمادي الداكن لمساعدة الرموز بالبروز خد راحتك في هذه المساحة كما كأنك في لوحتك الفنية.
أمل أنني قادراً على إظهار لك أنه حتى ولو كانت الرموز مسطحة بطبيعتها "مسطحة"، لا يجب أن تكون دون موديل ونمط شكلي. ما هي الرموز الأخرى التي يمكن ان تخرج بها؟
