11 نکته ایلاستریتور برای طراحان وب که فتوشاپ را ترجیح می دهند

در اینجا یک ایده دیوانه کننده وجود دارد – پروژه وب بعدی خود را در Illustrator طراحی کنید.
اگر در درجه اول یک طراح وب هستید، به احتمال زیاد به این پیشنهاد پاسخ خوبی نخواهید داد. ایلاستریتور نمی تواند هر کاری که فتوشاپ می تواند انجام دهد، درست است؟
خوب، کاملاً اینطور نیست.
اگرچه فتوشاپ به عنوان ابزار واقعی طراحی وب ظاهر شده است، Illustrator بیش از حد توانایی پشتیبانی از نیازهای شما را دارد.

به دلیل ابزارهای چیدمان، اغلب برنامه بهتر و مناسب تری برای طراحی وب است.
از آنجایی که اکثر متخصصان طراحی وب نمی‌خواهند تصویرگری به دنبال اثبات پیدا کنند، من فهرستی از کارهای مرتبط با وب را که برای شروع تجربه طراحی وب خود در ایلاستریتور باید بدانید، تهیه کرده‌ام.
اینها را امتحان کنید و مطمئناً شروع به استفاده از Illustrator به عنوان یک ابزار استاندارد در گردش کار طراحی وب خود خواهید کرد.

 

1. اول از همه: همه واحدها را روی پیکسل تنظیم کنید

به طور پیش فرض، Illustrator از ابعاد شی برای نوع و واحدهای متریک برای نقاط استفاده می کند.

این تنظیمات برای اکثر موارد طراحی عالی هستند، اما برای طراحی وب، احتمالاً می خواهید پیکسل ها را در همه جا ببینید.

بنابراین قبل از شروع هر کار دیگری، مطمئن شوید که واحدهای شما به درستی راه اندازی شده اند.

برای تنظیم واحدها بر روی پیکسل:

• منوی Edit را باز کنید
• واحدهای اندازه گیری را در زیر منوی تنظیمات انتخاب کنید.
• همه گزینه ها را روی “pixels” تنظیم کنید

2. اسناد را با استفاده از پایگاه داده آنلاین ایجاد کنید

هنگامی که می‌خواهید کار روی پروژه جدیدی را شروع کنید، می‌توانید به راحتی پنجره New Document را ورق بزنید.

برخی از جزئیات مهم را کنار بگذارید، مانند اینکه به Illustrator بفهمید روی پروژه وب خود روی چه چیزی کار می‌کنید تا گرفتار نشوید. رنگ های CMYK و لبه های تار اجسام.

فقط به یاد داشته باشید که تنظیمات نمایه “شبکه” را در پنجره New Document انتخاب کنید و شما آماده هستید.

3. Pixel Grid Alignment را برای اشیا روشن کنید.

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

این منجر به شکل‌هایی واضح و بی‌نقص پیکسلی می‌شود که قطعاً در طراحی وب می‌خواهید.
دکمه بالایی گزینه ای برای صاف کردن شبکه پیکسل دارد که همیشه حاشیه های تمیزی را به همراه دارد.

برای فعال کردن تراز شبکه پیکسل در سطح شی:

• یک مورد را انتخاب کنید
• پانل ویرایش را باز کنید (چشم ها > ویرایش)
• گزینه “Align to Pixel Grid” را در پایین پانل علامت بزنید (اگر آن را نمی بینید، روی پانل دوبار کلیک کنید تا گزینه نمایش داده شود)

توجه: تراز شبکه پیکسل به طور پیش فرض برای همه اشیاء جدید ایجاد شده با استفاده از نمایه سند وب فعال است.

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

4. Pixel-Preview را فعال کنید

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

در واقع پیکسل‌ها را طوری خواهید دید که گویی با یک تصویر بیت مپ روی آنها کار می‌کنید.
با روشن بودن Pixel Preview، احساس می کنید در فتوشاپ هستید.

فکر کنید چقدر جالب است: شما قدرت کامل گرافیک برداری را در دست دارید، در حالی که می توانید ببینید نتیجه در سطح پیکسل چگونه به نظر می رسد.
تمیز، درسته؟

• برای فعال یا غیرفعال کردن Pixel Preview
• منوی نمایش را باز کنید

“مشاهده پیکسل ها” را انتخاب کنید

 

5. از پنجره آثار هنری استفاده کنید

تصور کنید دو دوربین فیلمبرداری در طراحی خود دارید
یک دوربین دارای سطح زوم معمولی است و 100٪ آثار هنری شما را نشان می دهد. دوربین دیگری دارای سطح زوم 400٪ و نقطه روی نماد خاصی است که روی آن کار می کنید.
مانند یک جراح، از دوربین زوم شده برای ایجاد تغییرات کوچک در سطح پیکسل در نماد استفاده کنید، در حالی که گهگاه به دوربین 100 درصد زوم شده نگاه کنید تا ببینید اندازه واقعی آن چگونه است.

پنجره‌های گرافیکی زمانی عالی هستند که باید روی اشیاء کوچک مانند آیکون‌ها کار کنید – برای بررسی ظاهر چیزها نیازی به بزرگنمایی و بزرگنمایی ندارید.
اینها پنجره‌های Artwork هستند – به شما امکان می‌دهند طراحی خود را در همان زمان در سطوح مختلف زوم، طرح‌های رنگی و سایر تغییرات مشاهده کنید.

برای کار در وب، این به ویژه هنگام کار با اطلاعات سطح پیکسل مفید است.

برای استفاده از ویندوزهای گرافیکی:

 

• منوی پنجره را باز کنید، سپس پنجره جدید را انتخاب کنید. Illustrator یک برگه جدید با همان سند نمایش داده شده ایجاد می کند.
• به منوی Window برگردید و مرتب کنید. این به شما امکان می دهد اندازه و موقعیت پنجره ها را تغییر دهید.
• سطوح مختلف بزرگنمایی را در ویندوز آزمایش کنید و شروع به ایجاد برخی تغییرات کنید تا ببینید چگونه این کار می کند

6. از نمادها برای ایجاد سریع دکمه ها، آیکون ها و غیره استفاده کنید

چند بار دکمه، نماد یا ویجت یکسان (یا تقریباً یکسان) را در فتوشاپ ایجاد کرده اید؟ اگر طراحی وب انجام می دهید، احتمالاً هر روز این کار را انجام می دهید.
Illustrator به شما کمک می کند در زمان صرفه جویی کنید و از این کار تکراری با ویژگی ها جلوگیری کنید.
در اصل، نمادها آرشیو نامحدودی از عناصر طراحی آماده هستند که می توانند با کشیدن و رها کردن ساده به گرافیک اضافه شوند و سپس در صورت نیاز اصلاح شوند.

این برای دکمه ها، نمادها و سایر اشیاء استاندارد شده که نیازی به ایجاد از ابتدا ندارند، عالی است.
اما دلیل دیگری نیز وجود دارد که نمادها قدرتمند هستند و به آن نمونه سازی می گویند.
نمادها علاوه بر ساده بودن، به شما این امکان را می دهند که به راحتی عناصر طراحی تکراری را به روز کنید.
اساساً، وقتی تغییراتی در نماد اصلی ایجاد می‌کنید، آن تغییرات بلافاصله در تمام نمونه‌های نماد در اثر هنری شما منعکس می‌شوند. آیا می خواهید دکمه های بزرگتری در سایت خود داشته باشید؟ فقط نماد را تغییر دهید.

آیا می خواهید فیلدهای فرمی که در همه صفحات متفاوت به نظر برسند؟ فقط نماد را تغییر دهید. شما ایده را دریافت می کنید.
نکته: اگر نمی‌خواهید این اتفاق برای نمونه خاصی از نماد رخ دهد، روی شیء موجود در اثر هنری خود کلیک راست کرده و «لغو پیوند به نماد» را انتخاب کنید. این به روز رسانی خودکار را خاموش می کند.

در اینجا یک ویدیوی عالی وجود دارد که نحوه استفاده و مدیریت نمادها را توضیح می دهد:
استفاده از نمادها در Adobe Illustrator از Adobe TV.

برای استفاده از نماد موجود:

• پنل Symbols را از منوی Window باز کنید.
• نماد انتخاب شده را روی اثر هنری خود بکشید

برای ایجاد یک شخصیت جدید:

• برای نماد اثر هنری ایجاد کنید
• پنل Symbols را از منوی Window باز کنید
• اثر هنری را روی پانل بکشید
• برای تایید در کادر محاوره ای OK را کلیک کنید

برای ویرایش یک کاراکتر:

• پنل Symbols را از منوی Window باز کنید
• برای ورود به حالت ویرایش روی نماد دوبار کلیک کنید
• وقتی کارتان تمام شد، برای خروج از حالت ویرایش، روی هر نقطه خارج از تصویر نماد دوبار کلیک کنید

7. به راحتی اشیایی را که به اندازه 9 قطعه هستند، مقیاس کنید

این یکی از ویژگی های پیشرفته نمادها است که به شما امکان می دهد تعیین کنید که کدام قسمت های یک شی در طول مقیاس بندی کشیده شده و کدام قسمت ها مستقیم هستند.

سمت چپ: نمونه ای از یک دکمه توسعه یافته با و بدون تنظیم مقیاس 9 تکه. راست: تنظیم مقیاس 9 تکه شامل حرکت در 4 جهت است که به Illustrator می‌گوید کدام قسمت‌های جسم محافظت می‌شوند و کدام قسمت‌ها می‌توانند مقیاس شوند.

یک مثال عملی دکمه ای با گوشه های گرد است – اگر می خواهید آن را طولانی تر کنید، نمی توانید آن را به صورت افقی بکشید، زیرا کل چیز را مخدوش می کند.

در عوض، باید نقاط شکل را به صورت دستی حرکت دهید. با پوسته پوسته شدن 9 برشی، کشش آنطور که می خواهید عمل می کند.

برای درک نحوه عملکرد آن، به این آموزش ویدیویی عالی Adobe TV گوش دهید تا در مورد آن بیاموزید:

• با استفاده از مقیاس انتخاب 9 قسمتی با نمادهای Adobe TV.

8. گوشه های گرد همه جا!

شما می توانید یک مستطیل با گوشه های گرد در فتوشاپ ایجاد کنید، اما Illustrator به شما امکان می دهد یک افکت گوشه گرد غیر مخرب را تقریباً برای هر شیئی اعمال کنید.

اثر غیر مخرب چیست؟ این بدان معناست که می‌توانید آن را روشن، خاموش یا تنظیمات آن را بدون تأثیر بر شی اصلی زیرین تغییر دهید.
می‌توانید افکت گوشه‌های گرد را تقریباً روی هر نوع شی اعمال کنید و در صورت لزوم آن را تنظیم کنید.

برای استفاده از افکت گوشه گرد:

• یک مستطیل یا شیء دیگر با گوشه های تیز ایجاد کنید
• از منوی جلوه ها، Style > Rounded Corners را انتخاب کنید.
• شعاع گوشه را وارد کنید و روی Preview کلیک کنید تا ببینید چگونه به نظر می رسد
• برای اعمال افکت روی OK کلیک کنید.

برای تغییر جلوه گوشه گرد:

• یک شی با گوشه های گرد انتخاب کنید
• پنل Appearance را از منوی Window باز کنید
• افکت گوشه گرد را پیدا کنید و برای تغییر تنظیمات دوبار کلیک کنید یا برای روشن یا خاموش کردن آن روی نماد چشم کلیک کنید.

9. پرهای سریع بیت مپ ایجاد کنید

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

برای ایجاد یک الگوی بیت مپ:

 

• تصویر طرح را در بالای اثر هنری خود قرار دهید
• روی Embed در نوار بالا کلیک کنید (مهم – بدون این کار نمی کند!)
  الگو را روی پالت Swatches بکشید
• نمونه را روی هر شی بمالید و آن را با یک الگو پر کنید.

 

10متن به طور خودکار در اطراف تصاویر و اشیاء شناور شود.

 

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

خوشبختانه ایلاستریتور این موضوع را به شما اطلاع داده است.

برای قرار دادن متن در اطراف یک تصویر:

• تصویر یا شیئی را که می خواهید متن را دور آن بپیچید انتخاب کنید
• منوی Object را باز کنید، Text Wrap > New را انتخاب کنید.
• برای تنظیم فاصله بسته بندی، منوی بسته بندی متن را دوباره باز کنید و گزینه های بسته بندی متن را انتخاب کنید.
• تصویر را بر روی متن حرکت دهید تا جلوه پیچیده را ببینید.

11. تنظیمات بصری و ظاهری غنی ایجاد کنید

در ایلوستریتور، پنل ظاهر بسیار شبیه افکت‌های لایه فتوشاپ عمل می‌کند—شما می‌توانید چندین پر و ضربه به یک شی اضافه کنید، سپس با حالت‌های انتقال، کدورت‌ها و افکت‌های آن‌ها بازی کنید تا به نتایج جالبی برسید.
این متن فقط یک شی شکل برداری است که با استفاده از پنل Appearance و جلوه ها طراحی شده است.

زمین بازی بسیار بزرگ است – از سایه های رها، تاری و براق بودن تا بافت ها، اعوجاج ها و سه بعدی. هنگام کار با گرافیک های برداری هنوز هم می توانید بسیاری از افکت ها را در فتوشاپ بازسازی کنید.
پنل ظاهر قدرتمند و سرگرم کننده است. پیشنهاد می کنم اکنون آن را امتحان کنید یا آموزش زیر را تماشا کنید تا متوجه شوید که چگونه کار می کند:
پنل Appearance را از Adobe TV تمرین کنید.

برای آزمایش با Illustrator آماده اید؟

ایجاد صفحات وب و رابط های کاربری با استفاده از فتوشاپ اکنون یک امر عادی است و اکثر طراحان از این راه حل راضی هستند.
اما فقط به این دلیل که فتوشاپ بسیار فراگیر شده است به این معنی نیست که ایلاستریتور چیزی برای ارائه ندارد – کاملا برعکس.

خود را به شدت با ابزارهایی مانند تراز شبکه پیکسلی، بسته بندی متن و ظاهر شی پشتیبانی می کند.
هنگامی که این مورد را با ابزارهای طراحی و طرح بندی قدرتمند، برش و صادرات تصویر ترکیب می کنید، Illustrator قطعا انتخاب واضحی برای طراحان وب است که می خواهند وب سایت هایی را به سرعت ایجاد کنند.
چه چیزی را ترجیح می دهید: ایلاستریتور یا فتوشاپ؟