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

كيف يمكن أن يكون البرنامج مساعد لعملية تصميم الموقع؟

يمكن الإستفادة منه في عدة أمور ما دام أنه أحد برامج (أعبرته أفضلها) المتخصصة في رسومات المتجهية Vector Graphic ولكنه تجاري ، هناك برامج مفتوحه المصدر أيضاً مثل برنامج Inkscape، Karbon14، NodeBox، .. وغيره.

تقطيع التصميم وتحويله إلىxhtml

خلال البرنامج تستطيع إستخدام أداة Slice Tool لتقطيع التصميم كما هو موجود أيضاً في برنامج Photoshop بنفس المهام وطريقة حفظ كل جزء من الأجزاء التي تريدها عن طريق Save for Web & Devices … من قائمة  File ..

slice_tool

التخطيط للموقع

طرق التخطيط لواجهة الموقع أو قالب الموقع تختلف حسب طريقة الشخص، إمكانيات البرنامج تتيح لك كافة الطرق الممكنة، ومن الطرق التي أستخدمها للتخطيط لقالب الموقع أو لمهام تطبيق ويب مثلاً هي الخريطة الذهنية Mind Mapping ويمكن عملها بسهولة بأدوات البرنامج مثل أداة القلم Pen Tool أو أدوات الأشكال مثل المربعات والدوائر أو أداة الفرشاة Paintbrush Tool.

mind-mapping

يمكنك من خلال اليستريتر التخطيط لشكل الموقع(التخطيط المبدئي) صحيح أنه لا توجد أدوات لعمل ذلك بشكل مباشر وهناك نماذج موجودة في برنامج Fireworks على سبيل المثال ولكن ادوات البرنامج يمكن أن تلبي طلبك مثل الأدوات التي ذكرتها مسبقاً كأداة Pen Tool و Paintbrush Tool، هناك موضوع آخر كتبته حول واجهة المستخدم يمكنك الإستفادة منه.

تصميم الأيقونات

أغلب عملية تصميم الأيقونات في مواقع الويب يتم عملها في برنامج اليستريتر سواء كانت العملية من التخطيط أو رسمها مباشرةً، هناك عدة دروس حول تصميم الأيقونات منتشرة في الويب، من أفضل المقالات التي أعجبتني ضمن مجلة Smashing Magazine في السنة الماضية أضافت درس رائع لتصميم الأيقونات وأفضل شيء هو أن اليستريتر أحد برامج الرسومات المتجهية فالدقة موجودة بالطبع، مصادر:

Icons In Illustrator

ملقات بدقة عالية

وهذه الميزة الرئيسية للبرنامج لأنه من برامج Vector Graphic ويمكنك رؤية المقارنة بين Vector و Raster ، تستطيع حفظ ملفاتك لإستخدامها لاحقاً في برامج 2d و3d عن طريقة حفظها بالنسخة الثامنة من برنامج Illustrator وذلك عند حفظها بعد الإنتهاء من عملك في البرنامج وإختيار إصدار البرنامج الخاص بالملف Illustrator 8.

Save File in Illustrator

وبعدها تستطيع فتحها بسهولة إما عن طريق برامج الجرافك 2d أو 3d، هذا مثال لتحويل كلمة مكتوبة باليستريتر(خط حر):

Illustrator File

وتحويلها إلى كلمة ثلاثية الأبعاد بعد حفظها بالطريقة السابقة:

Illustrator File in Cinema 4d File

هذا مجرد مثال توضيحي فقط، أحببت أوضح إستخدامات البرنامج في عدة أمور.