ما هو الجديد لمصممي الويب في Illustrator CC

في السادس من مايو ، أعلنت Adobe عن آخر التحديثات لبرنامجها الإبداعي. بعض هذه التحديثات لها آثار كبيرة على كيفية عمل المستخدمين مع أدواتهم. في هذه المقالة ، أود مراجعة ما قام Adobe بتغييره في Illustrator وتحديدًا كيف يؤثر ذلك على مصممي الويب.

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

دعم HiDPI

مع ظهور شاشات عالية الدقة (مثل Macbook Pro مع شاشة Retina) ، بدا Illustrator CS6 وأقدم في وقت سابق ضبابية. بدا العمل الفني والرموز منقطة وتبدو النصوص غير مستعارة. إن طبيعة Illustrator نفسها توفر عملًا فنيًا غنيًا ، لذلك كانت هذه التجربة أقل من المرغوب فيه. ولحسن الحظ ، قامت Adobe بتحسين Illustrator CC للاستفادة من شاشات العرض عالية الدقة هذه. سيبدو العمل الفني بشكل أفضل ، وسيبدو النص واضحًا ، وستبدو عناصر واجهة المستخدم (الرموز والمؤشرات وما إلى ذلك) أكثر سلاسة. كما أنهم أدخلوا بعض التحسينات على عملية التقديم أيضًا. ويستفيد الآن من الأجهزة متعددة النواة ويستخدم تجسيدًا متسلسلًا لتقديم أعمال فنية. يجب أن ترى بعض التحسن في المهام مثل التكبير ، والتنقل ، ولصق النسخ ، السحب والإفلات ، إلخ.

تحسينات المرشدين

وتستخدم الأدلة على نطاق واسع عند التخطيط ووضع الصفحات. يتيح لك إنشاء نماذج في Illustrator باستخدام الأدلة إمكانية وضع المحتوى بطريقة دقيقة. في Illustrator CC ، هناك أربعة تحسينات على الأدلة:

• يؤدي النقر المزدوج على مسطرة إلى إنشاء دليل في هذا الموقع المحدد على المسطرة.
• عندما تضغط Shift ثم تنقر نقرًا مزدوجًا فوق موقع معين على مسطرة ، فإن الدليل الذي يتم إنشاؤه عند النقطة يستقر تلقائيًا إلى أقرب علامة (تقسيم) على المسطرة.
• إذا قمت بإخفاء الأدلة (Ctrl / Cmd +؛) ثم اخترت إظهارها ، فلن يتم قفل الأدلة تلقائيًا كما فعلت في الإصدارات السابقة.
• قم بإنشاء أدلة أفقية ورأسية في إجراء واحد. فيما يلي كيفية القيام بذلك: في الزاوية العلوية اليسرى من نافذة Illustrator ، انقر فوق تقاطع المساطر واضغط Ctrl (أو Cmd على Mac) ، واسحب مؤشر الماوس إلى أي موقع في نافذة Illustrator. يصبح مؤشر الماوس شعيرات متصالبة للإشارة إلى حيث يمكن إنشاء دليل أفقي ورأسي ؛ حرر مؤشر الماوس لإنشاء الأدلة.

تحسينات بحث الخط

يبحث البحث النموذجي للأمام عن الكلمة الأولى في اسم الخط ، والتي لا تحقق أفضل النتائج على الفور. أيضًا ، قد يكون البحث عن عدد كبير من الخطوط وتصفحه أمرًا صعبًا. تمت إضافة خيار وظيفة بحث جديد “Search Entire Font Name” إلى لوحة التحكم والحروف. بالإضافة إلى ذلك ، تم الإعلان عن تكامل TypeKit لخطوط سطح المكتب مؤخرًا في MAX. هذا يعني أنه يمكنك بسهولة تصميم نماذج باستخدام نفس الخطوط التي تنوي استخدامها على الويب.

تحسينات البحث بالألوان

يمكن أن يكون العثور على لون معين من مجموعة متنوعة من الألوان مضيعة للوقت ومحبطة. في Illustrator CC ، تم إجراء تغييرات لجعل مهمة البحث والعثور على لون أسهل بكثير. يحتوي مربع الحوار Color Picker (انقر نقرًا مزدوجًا فوق وكيل التعبئة في شريط الأدوات) الآن على أداة بحث في نافذة Color Swatches. عندما تنقر فوق Color Swatches ، يظهر شريط البحث أسفل قائمة الألوان المحددة مسبقًا. اكتب اسم لون أو قيمة RGB (أو CMYK للطباعة). إذا قمت بكتابة "أزرق" ، فسيتم عرض كل حوامل اللون التي تحمل الكلمة الزرقاء في أسمائها. ستعرض الكتابة R = 77 جميع حوامل الألوان التي لها لون أحمر مع قيمة 77 في مقياس RGB. يتم تمكين أداة البحث افتراضيًا.

تم تحسين خيار البحث في لوحة Swatches. لا يفرض الحقل إتمام تلقائي. لن يتم استبدال الأحرف التي تكتبها تلقائيًا بأقرب تطابق للألوان يتم العثور عليه. يمكنك كتابة اسم لوني ، أو ببساطة كتابة قيم ألوان RGB (أو CMYK للطباعة) للبحث في حالة وجود مثل هذا التوليف. لا يتم تمكين حقل البحث بشكل افتراضي ، ويجب تمكينه لأول مرة من القائمة الفرعية الخاصة باللوحة.

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

لوحة خصائص CSS

وبالطبع ، فإن أكبر ميزة على الويب هي التحسينات التي أُدخلت على سير العمل في CSS و SVG. الآن إذا كنت من مستخدمي Illustrator المتشددين ، فقد تكون استخدمت شيئًا ما في CS5 يسمى حزمة HTML5 ، والتي كانت متوفرة من AdobeLabs. لأي سبب من الأسباب لم يظهر في CS6 ، ولكن العديد من هذه الميزات قد عادت مع هذا التحديث CC. هذه الميزات تذكر بما تم توفيره بالفعل لـ Photoshop CS6 من خلال تحديثات Creative Cloud والميزات الموجودة في Fireworks CS6.

إن لوحة خصائص CSS هي طريقة استخراج CSS من وثيقة Illustrator ، وتوفر العديد من الطرق للقيام بذلك. الخطوة الأساسية في جعل كل هذا العمل هو تسمية طبقاتك داخل لوحة الطبقات. من المؤكد أن Illustrator يمكن أن يقوم بإنشاء CSS بدون كائن له اسم داخل لوحة الطبقات ، لكنك تفتح نفسك إلى طريقة غير منظمة وربما محتملة لتوليد الشفرة. هذا هو أساسًا كيفية قيام Illustrator بتسمية قواعد الفصل التي تنشئها لك. يمكن أن تحتوي CSS التي يتم إنشاؤها على بادئات مستعرضات Webkit و Firefox و Opera و Internet Explorer. يمكنه التقاط مظاهر CSS المدعومة مثل التدرجات والأركان المستديرة.

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

• عرض CSS لكائن محدد
• انسخ شفرة CSS للكائن المحدد
• تصدير الكائن المحدد إلى ملف CSS مع الصور المستخدمة في CSS
• تصدير شفرة CSS لجميع الكائنات في المستند إلى ملف CSS

بالإضافة إلى ذلك ، يمكنك تصدير شفرة CSS لجميع الكائنات داخل المستند من خلال الانتقال إلى قائمة "ملف" وتحديد تصدير. سيؤدي ذلك إلى فتح مربع حوار ، ومن هناك يمكنك اختيار CSS من قائمة التنسيق.

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

كود SVG

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

بالإضافة إلى ذلك ، أضافت Adobe دعمًا لتصدير الأنماط غير المستخدمة. عند التصميم ، ستقوم في كثير من الأحيان بإنشاء أنماط رسوم متعددة أثناء إنشاء عمل فني. لا يجوز لك استخدام جميع الأنماط المتاحة. عند تصدير العمل الفني بتنسيق SVG ، لا يتم تصدير الأنماط غير المستخدمة. أيضًا ، في شفرة CSS المُصدرة ، لا تحتوي أنماط الرسوم على أسماء مرتبطة بها ، وقد يكون من الصعب تحديد نمط الرسم الصحيح.

يوفر Illustrator CC ميزات اثنين تمت إضافتها لتحسين تجربة العمل مع الأنماط بتنسيق SVG الذي يتناول هذه المشكلات:

• اسم نمط الرسم. عندما تختار تصدير أنماط الرسوم ، يتم تصدير اسم كل نمط مع تعريف النمط في nomenclature CSS.
• تصدير الأنماط غير المستخدمة. عند تصدير عمل فني بتنسيق SVG ، يمكنك الآن اختيار تصدير الأنماط غير المستخدمة. يسمح ذلك لمصمم أو مطور آخر يقوم باستيراد الأنماط لاستخدام أنماط الرسوم غير المستخدمة في القطع الأخرى من العمل الفني.

كيف ستستخدمها

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

إذا كنت مهتمًا بمعرفة المزيد حول الميزات الجديدة في Illustrator CC ، قم بزيارة صفحة منتج Illustrator.

هل أنت من هواة Illustrator؟ ما هي ميزات Illustrator CC التي أنت متحمس أكثر بشأنها؟ اسمحوا لنا أن نعرف في التعليقات.

• ← شبح: منصة المدونات المدعومة بالحشد ، إطلاق قريبا
• وداعا للألعاب النارية →