چرا Adobe Illustrator از ابزارهای ضروری برای طراحان وب است؟

ممکن است شما در جایگاه یک طراح وب یا اپلیکیشن تا بحال به Adobe Illustrator به عنوان یک نرم افزار کارآمد در حوزه دیزاین وب توجه نکرده باشید. Illustrator ابزارها و قابلیتهایی دارد که میتوانیم از طراحی یک ماکاپ (وایرفریمینگ) یا محتوای ساده تا طراحی‌های responsive کامل، از آن استفاده کنیم. در این مقاله همراه ما باشید تا شما را با دلایلی که یک طراح وب را ملزم میکند که با ایلاستریتور کار کند اشاره کنیم.

۱. عدم وابستگی به رزولوشن

وقتی شما کار در دنیای چاپ را شروع کنید، یکی از اولین چیزهایی که درباره آن یاد می‌گیرید «رستر در مقایسه با وکتور» است. تا مدتها این مساله واقعا برای وب کاربردی نداشت. وب سایت ها تا حدود زیادی از رستر یا محتوای متنی استفاده می‌کردند و وکتور جایگاه قابل توجهی نداشت. این وضعیت قطعا با ابداع فونت‌آیکونها، گرافیک برداری (SVG) و غیره تغییر یافته است.
ایلاستریتور ذاتا وکتورمحور (مبتنی بر نقطه‌ها و ریاضی) است و برای شما امکان ایجاد art work در مقیاس نامحدود بدون افت کیفیت را فراهم می‌آورد. در محیط وب، ما باید با اندازه دستگاههای مختلف خود را وفق دهیم، و محتوا باید برای هر اندازه ای (سایزهای معمول – تلفن، تبلت، و دسکتاپ) بهترین ظاهر را داشته باشد.

۲. قابلیت کار با هر یک از فرمتهای SVG ، PNG ، GIF ، JPG

از آنجا که ایلوستریتور یک ابزار وکتور است، می‌تواند محتوای وبِ بهینه‌سازی شده را در فرمتهای گرافیکی SVG ، PNG ، GIF ، JPG تولید نماید. فایل SVG در ایلاستریتور به راحتی قابل ایجاد است (با مراجعه به مسیر: File > Save As) و یک سری کامل از گزینه‌های ذخیره را برای تنظیم دقیق خروجی SVG در اختیار شما قرار می‌دهد.
وب به طور مداوم در حال تکامل است، و محتوای گرافیکی برداری در تعداد زیادی از سایتها در حال استفاده است. SVG وکتور قابل استفاده برای وب است. در ایلوستریتور، در مسیر File > Save As بیشتر تنظیمات پیشفرض مورد نیاز ما ارائه شده است. همانند بیشتر فرمتهای فایل اگر محتوا بر روی آرت‌بورد با SVG پشتیبانی شود، کار خواهد کرد؛ در غیر اینصورت، کار نخواهد کرد. این فرایند ساده می‌تواند برای طراحی یک سایت Responsive و محتوایش شگفت‌انگیز باشد.

۳. آیکون‌فونت‌ها و فونت‌های متنوع

از آنجا که Adobe Illustrator بخشی از Creative Cloud است، مشترکان به کتابخانه Typekit دسترسی دارند. این بدان معناست که یک کتابخانه کامل از فونت های میزبانی‌شده را می‌توانید در طراحی‌های ایلوستریتورتان و بر روی وبسایتتان استفاده کنید.

خیلی از ما از فونت‌آیکونها برای آیکونهای شبکه های اجتماعی، دکمه‌ها، و غیره استفاده می‌کنیم. ده‌ها سایت فونت‌آیکون وجود دارند، همچون Font Awesome و Genericons. بیشتر آنها امکان دانلود دارند. آنچه دانلود میکنید معمولا شامل یک فونت دسکتاپ می‌شود که می‌توانید نصب و در زمان طراحیتان در ایلوستریتور استفاده کنید. در این نرم‌افزار، بیشتر و چه بسا تمامِ آیکونها، همانطور که در تصویر پایین می‌بینید، در فونت‌آیکونها از پنل Glyphs قابل دسترسی هستند (Type > Glyphs).

۴. پیکسل پرفکشن (کار با گریدها)

بیشتر ما این روزها از گریدها برای طراحی استفاده می‌کنیم، برای شروع طراحی یک سایت،  به framework نیاز داریم که دربرگیرنده یک گرید سیال (CSS) است. اگر شما به ایلاستور مسلط باشید تطبیق دادن طراحی با گرید میتواند برای دیزاین وبسایت شما مفید باشد .

طراحی برای یک گرید معمولا بدان معناست که ما می‌خواهیم پیکسل‌پرفکشن نیز حاصل شود. در ایلوستریتور، این به معنای چیدمان با گرید پیکسل تعبیه‌شده داخلی است. وقتی شما یک سند جدید (File > New) ایجاد کنید، ایلوستریتور یک سری از پروفایل‌های وب و دیوایس را برای شروع طراحی شما ارائه می‌کند. این فرایند فضای رنگ را به صورت RGB و واحدها را به صورت پیکسلها تنظیم می‌کند، چند سایز مختلف به شما می‌دهد، و در تنظیمات قابلیت «تطبیق دادن اشیاء جدید برای گرید پیکسل (Align New Objects to Pixel Grid)» را فعال می‌کند.

با گزینه «تطبیق دادن اشیاء جدید برای گرید پیکسل» هرگونه محتوای جدیدی که ایجاد کنید به گرید پیکسل چسبانده می‌شود که وقتی حالت  View > Pixel Preview روشن باشد و حداقل ۶۰۰% زوم کنید، به طور پیشفرض نمایش داده می‌شود. این ویژگی لبه‌های افقی و عمودی اشیاء را تیزتر می‌کند. اگر آرت‌ورک با گرید پیکسل تطابق نیافته باشد، شما می‌توانید آرت‌ورک را انتخاب کنید،  سپس آنگونه که در شکل ۶ نشان داده شده است، در پنل Transform گزینه Align to Pixel Grid را انتخاب کنید (Window >Transform).

شما همچنین میتوانید شبکه چیدمان ایلوستریتورتان را برای ۱۲، ۱۶ یا هر تعداد ستون تنظیم کنید. الگوهای AI در وب موجودند که می‌توانید دانلود و استفاده کنید. همچنین می‌توانید گرید خودتان را ایجاد کنید.

۵. طراحی کامل یا وایرفریم

برای برخی از پروژه‌های وب ممکن است فقط از ایلوستریتور برای ایجاد وایرفریمهای ساده همچون المانهای صفحه، آیکونها، و غیره استفاده کرد. ولی اگر پروژه به ما اجازه دهد ما از ایلوستریتور برای ایجاد یک ارائه پیکسل-پرفکت از صفحات responsive استفاده می‌کنیم. چندمنظوره بودن ایلاستریتور یکی از قابلیت های فوق العاده این نرم افزار است.

۶. عملکرد خوب با رستر

وقتی ما یک سایت را طراحی می‌کنیم، وکتور بودنِ ایلوستریتور بخاطر قابلیت تطبیقِ آن خیلی خوب است. ولی به احتمال فراوان شما نیاز به رستر تصاویر بر روی سایتتان نیاز خواهید داشت. اگر چه ایلوستریتور بهترین گزینه برای ویرایش تصاویر رستر نیست اما از لایه‌ها و Layer Comps در فتوشاپ نیز پشتیبانی می‌کند و به راحتی میتوانید فایل های PSD خود را در فتوشاپ باز کنید. سپس این محتوا را می‌توان با انتخاب File > Save برای وب بهینه‌سازی نمود.

۷. نمادها و دیگر قابلیتهای صرفه‌جویی در زمان

ایلوستریتور قابلیت هایی همچون نمادها (با مقیاسبندی ۹ برشه)، متن و استایلهای گرافیکی، شکلهای لایو، global swatches، دکمه‌های دینامیک، و غیره، دارد که کار کردن با آنها باعث صرفه جویی در زمان ما می شود.

در ادامه درباره بعضی از آنها توضیح خواهیم داد:

• نمادها (با مقیاسبندی ۹ برشه)

نمادها راهی بسیار خوب برای استفاده مجدد از آرت‌ورک در اختیار شما قرار می‌دهند. آرت ورک ذخیره شده به صورت یک نماد به هر تعداد از دفعات در سند شما قابل استفاده است. اگر نماد اصلی ویرایش شود، نمادها در سند شما که instances نامیده می‌شوند نیز آپدیت می‌شوند.

اگر شما وقتی نمادها را ایجاد می‌کنید گزینه مقیاسبندی ۹ برشه را روشن کنید، آرت ورک با یک پوشش گرید مانند به نه بخش تقسیم میشود، و هر یک از این نه بخش به طور مستقل مقیاسبندی می‌شوند. نکته بسیار خوب درباره مقیاسبندی ۹ برشه این است که وقتی آرت‌ورک تغییر سایز داده شود، گوشه‌های آن مقیاسبندی نمی‌شوند، ولی بخشهای باقیمانده تصویر چرا. اگر شما این نماد را ویرایش کنید، راهنماهای ۹ برشه مجددا ظاهر می‌شوند.

• استایلهای متنی و گرافیکی

برای حفظ یکدستی و همچنین افزایش سرعت کار، می‌توانید همه نوع استایل را در ایلوستریتور به کار بگیرید. از استایلهای متنی معمولی همچون استایلهای کاراکتر و استایلهای پاراگراف تا کار با استایلهای گرافیکی، ایلوستریتور چندین راه برای کارکرد هوشمندانه‌ای که پیچیده نباشد، ارائه می‌کند.

• اشکال زنده (live shapes)

ورژن‌های اولیه Illustrator CC به آسانی قادر به ایجاد و ویرایش گوشه‌های گرد بوده‌اند. مقیاسِ این گوشه‌ها می‌توانند با تغییر آرت‌ورک تغییر کنند، یا نکنند. این اشکال زنده سبب شده‌اند تا ایجاد گوشه های گرد بسیار آسان شود. گوشه‌های live shapes، در چند جا، از جمله در پنل Transform ، با اعداد نیز قابل ویرایش هستند.

• گلوبال سواچ‌ها

قاعدتا یک قابلیت شگفت‌انگیز دیگر برای صرفه‌جویی‌ در زمان، ایجاد گلوبال سواچها و کار با آنها است. اگر شما یک رنگ را در ایلوستریتور ذخیره کنید، می‌توانید Global را در گزینه‌های Swatch انتخاب کنید. آنگاه اگر هر یک از گزینه‌های Swatch را تغییر دهید، هر جایی از Document که Swatch را اعمال کرده‌اید، آپدیت خواهد شد.

۸. تولید نمونه اولیه تعاملی

اگر از ایلوستریتور برای ایجاد یک ماکاپ طراحی وب استفاده می‌کنید، خوب است که بتوانید یک تعاملپذیری پایه را به طراحیتان اضافه کنید و آن را با دیگران (مثلا مشتریانتان) به اشتراک بگذارید. بدین طریق شما می‌توانید، حتی پیش از ایجاد یک خط کد، به حسی بهتر برای UX برسید و تغییراتی در UI ایجاد کنید. شما می‌توانید از طیف وسیعی از ابزارهای تهیه نمونه اولیه (prototyping) انتخاب کنید. برای مثال با استفاده از ابزار MarvelApp شما می‌توانید محتوای AI را به صورت PNG ذخیره کنید و تصاویر را در MarvelApp آپلود نمائید. سپس می‌توانید تعاملپذیری ساده‌تری را بیفزایید که شما و مشتریتان امکان «تست» آن را داشته باشید.

۹. CSS را استخراج می‌کند

یکی از قابلیتهای ایلوستریتور امکان استخراج CSS است. ایلوستریتور، چند ورژن قبلتر، پنل CSS Properties را اضافه کرد (در مسیر: Window > CSS Properties)، که می‌توانید از آن برای استخراج CSS از متن، آرت‌ورک، و محتوای دیگر استفاده کنید، و سپس آن را به صورت یک فایل CSS اکسپورت کنید یا آن را در ویرایشگر محبوبتان اکسپورت نمایید. این تکنیک می‌تواند برای طراحانی که CSS فرانت‌اند ارائه می‌کنند، یا برای نقطه شروع طراحی یک سایت مفید باشد.

یکی از قابلیتهای پنلِ CSS properties  این است که می‌تواند آرت‌ورک را به شکل فایل PNG ذخیره کند. اگر ایلوستریتور تشخیص دهد که آرت‌ورک بیش از حد پیچیده‌تر از آن است که با یک باکس یا متن و فرمت ایجاد شود (مثلا گروهی از اشیاء برای ساخت یک لوگو)، آرت‌ورک را rasterize می‌کند، و وقتی CSS را اکسپورت می‌کنید آن را به صورت یک PNG ذخیره می‌نماید. در پانل CSS Properties ، سی‌اس‌اس ایجاد شده برای یک تصویر پس‌زمینه خواهد بود.

برای دانلود “ویدئوی آموزشی نحوه اکسپورت گرفتن از CSS در ایلاستریتور”  ایمیل خود را وارد کنید:

جمعبندی نهایی

امیدواریم، با تمام این ابزارها و قابلیتهای خیلی خوبی که در دسترس هستند، اکنون متوجه شده باشید که چرا Adobe Illustrator CC می‌تواند به عنوان بخشی از گردش‌کار وب استفاده شود. این ابزار طراحی وب بی نقصی نیست، ولی قابلیتهای بسیاری دارد که باعث می‌شود برای برای شما مفید باشد.