البحث في الموقع

في درسنا هذا سنتعلم طريقة تصميم مؤقت عد تنازلي والذي نجده في نظام التشغيل iOS 7 بواسطة برنامج فوتوشوب . هيمن التّصميم المسطّح مؤخّرا على شبكة الأنترنيت، ولا شك في أن الجميع بات يعلم سعي شركة أبل لخلق نظرة جديدة وشعور جديدة تجاه أنظمة تشغيلها، لقد كنت سعيدا حقا عند رؤيتي لبعض التصاميم التي تم إصدارها قبل صدور نسخة نظام التشغيل iOS 7. لهذا قمت بتجهيز هذا الدرس والذي سيستند فيه كل من الشكل والألوان على الخلفيات التي تم إصدارها، و سيكون هذا الدرس سريعا جدا ومناسبا للمبتدئين وسيساعدهم في فهم القوة التي يتمتع بها التحويل الحر. 1. نقوم بفتح ملف جديد وليكن بالمقاسات التّالية: 730px*410px، ثم نضيف الخطوط التوجيهية guidelines عن طريق سحب أداة المسطرة Ruler Tool التي تظهر في الأعلى وعلى الجهة اليسرى، ووضع الخطّين النّاتجين في مركز العمل (خط عمودي وآخر أفقي): 2. نرسم دائرة باستخدام أداة (Ellipse Tool (U مقاسها 120px*120px، نضعها في مركز مساحة العمل لكن مع إخفاء طبقة التعبئة fill وتحديد قيمة stroke بـ: 5px، أمّا اللّون فنختار #e1e1e1: 3. نقوم بتكبير مساحة العمل بنسبة 1200% ونرسم خطًا عرضه 1px باستخدام الأداة (Line Tool (U، بدءًا من الحافّة العلوية إلى غاية مركز الدّائرة: 4. من لوحة المفاتيح نضغط Ctrl+Alt+T، فتظهر لنا النّقاط التي تتحكّم بتحويل الشّكل.هل شاهدت النقطة المحورية (التي تظهر في وسط الخط) دعنا نقوم بتحريكها إلى الحافة السفلى من الخط عن طريق الضغط على مفتاح Alt في لوحة المفاتيح والنقر وسحبه إلى الأسفل: 5. قبل الضغط على المفتاح Enter وبينما النقاط التي تتحكم بتحويل الشكل لا زالت تظهر نقوم بتغيير قيمة الدوران Rotation إلى 10 درجات ثم نضغط على الزر مرتين Enter: 6. من لوحة المفاتيح نضغط Shift+Ctrl+ Alt+T لنسخ ما قمنا بتصميمه في الخطوة السابقة، نستمر في الضغط إلى غاية الحصول على شكل حلزوني كما يظهر في الصورة: بعدها نقوم بتغيير اللون إلى الأبيض: 7. نقوم بمضاعفة الشكل الأساسي الأول الذي قمنا بعمله ونضعه في أعلى قائمة الطبقات layers panel، حيث أن ذلك سيكون مؤشر الدوران: نقوم بتطبيق التدرج اللوني gradient overlay: 8. نقوم بتغطية الجزء الذي نريد إخفاءه ونتأكد أنه يتوافق مع اليوم الذي نريده وكذلك الوقت، الدقائق والثواني التي سوف نضعها: 9. باستخدام أداة النص (Text Tool (T نضع رقم اليوم الذي نريده وكذلك الوقت، الدقائق والثواني مع إضافة تسمية مناسبة: الخطوة الأخيرة نقوم بتجميع الطّبقات التي قمنا بعملها ومضاعفتها 4 مرات، ثم نرتّبهم بشكل أفقي مع تحديد مسافة 20px للفصل فيما بينهم: ترجمة -وبتصرّف- للدّرس Create a Flat Countdown Timer in Photoshop – iOS 7 Inspired لصاحبه James Richman.

بعد اصدار نظام التّشغيل iOS 7 من طرف شركة أبل Apple، أصبح لزاما على مصممي ومطوّري التطبيقات أن يعيدوا ظبط لغتهم البصرية حتى تتناسب مع طبيعة التصميم الجديد لنظام التشغيل iOS 7. إذا أردت أن تعرف أكثر حول المبادئ الأساسية المستخدمة من طرف الشركة في تصميم الأيقونات ستجدها في هذا الرابط. بالنسبة لدرسنا اليوم سنتعلّم طريقة استخدام الأدوات الأساسيّة الموجودة في برنامج أدوبي اليستريتور، التّدرج اللّوني، وأداة Blend Tool لتصميم أيقونة سفاري safari. بداية نقوم بتحميل الملفات المرفقة لهذا الدرس أو الاستعانة بأيّ ملف شبيه له (الملف عبارة عن تصميم شبكة). 1. بعد تحميل الملف المرفق، نقوم بفتحه في طبقة layer جديدة مع قفلها والتأكد بأنها تتواجد أعلى باقي الطّبقات كما يظهر في الصورة: 2. نقوم برسم مربّع باستخدام أداة المستطيل (M) دون أن ننسى الضّغط على المفتاح shift في نفس الوقت. نحدّد مقاس المربّع (الطول والعرض) بـ: 120px، بعدها نضعه فوق الشّبكة ( الملف الذي قمنا بتحميله سابقا). 3. نتّبع المسار التالي: Effect > Stylize > Round Corners ونحدّد قيمة Radius بـ 27°. 4. الخطوة التّالية هي رسم دائرة باستخدام الأداة (Ellipse Tool (L مع الضّغط في نفس الوقت على المفتاح shift، ووضعها فوق المستطيل حيث يمكننا تعديل حجمها ليتناسب مع الشبكة (140px)، ثم نقوم بتلوينها باستخدام اللون الأزرق (بإمكانك تغيير اللون لاحقا). 5. نرسم شكلاً جديدا باستخدام أداة Polygon Tool. نضغط على الزر الأيسر للفأرة وفي نفس الوقت نضغط على مفتاح السهم السفلي لحذف بعض زوايا الشكل الذي قمنا برسمه فنحصل على مثلث. نستمر في الضّغط على الزر الأيسر للفأرة مع الضغط على المفتاح shift لوضع المثلث بشكل أفقي، نقوم بعدها بوضعه فوق الدائرة (بإمكاننا تعديل القياسات إذا احتجنا إلى ذلك). نضاعف المثلّث بالضغط على (Ctrl + C ثم Ctrl + F) ثم نتبع المسار التالي: Object > Transform > Reflect نحدد Axis بـ: Horizontal ونضغط OK، نقوم بوضع المثلث الثاني أسفل المثلث الأوّل كما هو مبين في الصورة ونختار لهما اللونين الأحمر والأبيض. بعدها نحدّد المثلثين ونغير المقاس إلى 16px. 6. نتبع المسار التالي: Object > Transform > Rotate ونختار الزاوية: 45-° (أو بإمكانك فعل ذلك بطريقة أخرى من خلال الضغط على shift وتدوير الشكل بواسطة الفأرة) نقوم برسم مستطيل صغير ومحاذاته مع الدّائرة، بعدها نضاعفه ونضع المستطيل الجديد في أسفل الدائرة ثم نحدد كلا المستطيلين ونضغط Ctrl+G لجمعهم في طبقة واحدة. 7. نتّبع المسار التالي: Effect > Distrort&Transform > Transform ونحدد قيمة الزاوية بـ: 10° مع تحديد عدد النسخ Copies بـ: 17 نسخة ونضغط OK. 8. نضاعف مجموعة الطّبقات (Ctrl + C ثم Ctrl + F) ثم نقوم بعزل النسخة الثانية ونضغط مرّتين على زر الفأرة، بعدها نعدّل طول المستطيلات. 9. نقوم بالضّغط مرّتين على السهم العلوي الموجود في قائمة الطبقات layers، ثم نتبع المسار التالي: Object > Transform > Rotate مع تحديد قيمة الزاوية 5°. نقوم بتحديد المثلثين ونحاول وضعهما في الواجهة بالضغط على Ctrl+Shift+]. 10. نطبّق التدرج اللّوني على الدّائرة باستخدام الألوان التالية: (R=0, G=227, B=255) و (R=24 ,G=70, B=243) أو: 1846F3 #00E3FF# في هذه الإضافة سأريك طريقة عمل خط متقطّع، حيث بإمكانك استخدام هذه الطريقة عندما لا تكون بحاجة إلى عدد معين من الخطوط. نحدد قيمة Stroke بـ: 7pt ثم نقوم بتعديلات كما في الصورة الموضحة: وهذه هي الصورة النهائية لأيقونة المتصفح safari بعد تتبع جميع الخطوات السابقة: ترجمة -وبتصرّف- للدّرس How to create iOS7 icons in Adobe Illustrator? #03 – Safari icon لصاحبه Zoltan Ordog.

بعد إصدار نظام التّشغيل iOS 7 من طرف شركة أبل Apple، أصبح لزاما على مصممي ومطوّري التطبيقات أن يعيدوا ظبط لغتهم البصرية حتى تتناسب مع طبيعة التصميم الجديد لنظام التشغيل iOS 7. جميع التّطبيقات تحتاج أن تظهر بشكل جميل، ولا تنسى أن أيقونات التطبيقات الموجودة في المتاجر هي من تجذب المستخدمين، وهي من تظهر على شاشات هواتفهم .نظام التشغيل iOS يقوم باستعمال الأيقونات في مراكز الألعاب، نتائج البحث، الإعدادات وكذلك الوثائق التى تم إنشاؤها بواسطة التطبيقات. إذا أردت أن تعرف أكثر حول المبادئ الأساسية المستخدمة من طرف الشركة في تصميم الأيقونات ستجدها في هذا الرابط. في درسنا سنتعلم طريقة استخدام الأدوات الأساسية الموجودة في برنامج أدوبي اليستريتور، التدرج اللوني، وأداة Blend Tool لتصميم أيقونة الفيديوهات. بداية نقوم بتحميل الملف المرفق أو الاستعانة بأيّ ملف شبيه له (الملف عبارة عن تصميم شبكة). 1. بعد تحميل الملفات المرفقة لهذا الدرس، نقوم بفتحه في طبقة layer جديدة مع قفلها والتأكد بأنها تتواجد أعلى باقي الطّبقات كما يظهر في الصورة: 2. نقوم برسم مربّع باستخدام أداة المستطيل (M) مع الضّغط في نفس الوقت على المفتاح shift وتحديد مقاسه (الطول والعرض) بـ: 120px بعدها نضعه فوق الشّبكة ( الملف الذي قمنا بتحميله). 3. نتّبع المسار التالي: Effect > Stylize > Round Corners ونحدّد قيمة Radius بـ 27°. 4. نقوم برسم مستطيل (M)، نختار له اللّون الأسود، ونضعه مع التّصميم السابق كما يظهر في الصورة: 5. ننسخ الشّكل الأوّل (Ctrl + C)، ثمّ نقوم بتحديد جميع الأشكال ونتّبع المسار التالي: Window > Pathfinder Panel نختار الخاصيّة Intersect كما هو موضح في الصورة. نضغط Ctrl + B لوضع الشّكل الذي قمنا بنسخه سابقا. 6. نرسم مستطيل آخر باستخدام الأداة Rectangle Tool، نختار له اللون الرمادي والمقاسات: 22px*18px. بعدها نتبع المسار التالي: Object > Transform > Shear مع تحديد قيس الزاوية بـ ـ45°. الآن نقوم بعمل نسختين من الشّكل بالضّغط على (Ctrl + C ثم Ctrl + F ثم Ctrl + F) ونضعهما كما في الصورة . ثم وباستخدام أداة Pathfinder Panel نختار الخاصية Unite. 7. نحدّد المستطيلات الثلاثة ونقوم بقلبهم باتباع المسار التالي: Window > Transform Panel > options ونختار الخاصيّة Flip Vertically. 8. نقوم بنسخ الشّكل الأسود (Ctrl + C) لأننا سنحتاجه لاحقا، ثم نحدد المستطيلات الثلاثة التي تتواجد خارجه. نضغط على المفتاح shift وفي نفس الوقت نحدد الشكل الأسود. باستخدام أداة Pathfinder Panel نختار الخاصية Intersect وفي نفس الوقت نضغط على alt. بعدها نختار الخاصية Expand الموجودة في لوحة التحكم Pathfinder. الآن نقوم بوضع الشّكل الأسود الذي قمنا بنسخه سابقا بالضّغط على (Ctrl +B). 9. نطبّق التّدرج اللّوني gradient على الشّكل الأخضر باستعمال اللونين: 46ECC6 – #58CAFC#. 10. نحتاج إلى إضافة القليل من الظّلال ولعمل ذلك نضاعف الشكل الأسود بالضغط على (Ctrl + C ثم Ctrl + B) نستمر في تحديده ونسحبه قليلا إلى الأسفل. نختار له اللون الأبيض، ثم نحدّد الشّكلين الأبيض والأسود ونتبع المسار التالي: Object > Blend > Make يمكننا تغيير إعدادات blend باتباع المسار التالي: Object > Blend > Blending Options حيث نستطيع تحديد عدد الخطوات والتّوجه أيضا steps / orientation. 11. باتّباع المسار التالي: Window > Transparancy Panel نقوم بتغيير نوع blending إلى Multiply. نضغط Ctrl + F لوضع الشكل الأسود في مكانه كما يظهر في الصورة: ترجمة -وبتصرّف- للدّرس How to create iOS7 icons in Adobe Illustrator? #02 – Videos لصاحبه Zoltan Ordog.

بعد إصدار نظام التّشغيل iOS 7 من طرف شركة أبل Apple، أصبح لزاما على مصممي ومطوّري التطبيقات أن يعيدوا ظبط لغتهم البصرية حتى تتناسب مع طبيعة التصميم الجديد لنظام التشغيل iOS 7. إذا أردت أن تعرف أكثر حول المبادئ الأساسية المستخدمة من طرف الشركة في تصميم الأيقونات ستجدها في هذا الرابط. في درسنا سنتعلّم طريقة استخدام الأدوات الأساسيّة الموجودة في برنامج أدوبي اليستريتور، التّدرج اللّوني، وأداة Blend Tool لتصميم أيقونة الطّقس Weather. بداية نقوم بتحميل الملفات المرفقة لهذا الدرس أو الاستعانة بأيّ ملف شبيه له (الملف عبارة عن تصميم شبكة). 1. بعد تحميل الملف المرفق، نقوم بفتحه في طبقة layer جديدة مع قفلها والتأكد بأنها تتواجد أعلى باقي الطّبقات كما يظهر في الصورة: 2. نقوم برسم مربّع باستخدام أداة المستطيل (M) مع الضّغط في نفس الوقت على المفتاح shift وتحديد مقاسه (الطول والعرض) بـ: 120px، ثمّ نضعه فوق الشّبكة ( الملف الذي قمنا بتحميله). 3. نتّبع المسار التالي: Effect > Stylize > Round Corners ونحدّد قيمة Radius بـ 27°. 4. نختار اللّون الأزرق، ثم نرسم دائرة باستخدام الأداة Ellipse Tool بالمقاسات التالية: 43px*7px ونحاول وضعها وسط الشّكل السابق. 5. نرسم مستطيل دائري باستخدام الأداة rounded rectangle ودائرتين جديدتين نضعهما حول الدائرة السّابقة ونختار لهم المقاسات التالية: الدائرة الصغيرة الموجودة على اليسار: 24px.الدائرة الكبيرة الموجودة على اليمين: 33px.المستطيل الدائري: 55px*14px. ثم نقوم بمحاذاة الجزء السفلي للأشكال الثلاثة كما في الصّورة، بعدها نحدّد الأشكال ونتبع المسار التالي: Window > Pathfinder Panel > Unite 6. استخدمنا الخطوات السابقة لرسم السحابة الموجودة في الأيقونة الآن نطبق عليهم التدرج اللوني. 7. نستخدم التدرج اللوني الأزرق للطبقة الخلفية أما الشمس فنختار لها التدرج اللوني الأصفر. السحابة تكون باللون الأبيض ودرجة transparency نقوم بتخفيضها إلى 90% من القائمة: Window > Transparency 8. وهذه النتيجة النهائية لهذا الدرس: ترجمة -وبتصرّف- للدّرس How to create iOS7 icons in Adobe Illustrator? #04 – Weather icon لصاحبه Zoltan Ordog.