مزیت های ایلوستریتور نسبت به فتوشاپ برای طراحی وب

طراحی وبسایت با استفاده از نرم افزار ایلوستریتور

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

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

از آنجا که بیشتر متخصصان طراحی وب مایل به جستجوی  کاربرد های illustrator  نیستند ، من لیستی از مزیت های مربوط به وب را که برای شروع طراحی وب در illustrator  باید بدانید ، ایجاد کردم.

برخی از این مواد را امتحان کنید ، من تضمین میکنم که از illustrator  به عنوان یک ابزار استاندارد در طراحی وب استفاده خواهید کرد.

1.همه یونیت ها را روی pixels  تنظیم کنید

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

برای تنظیم یونیت ها روی pixels  :

• از فهرست ویرایش را باز کنید
• Units  را از زیر منوی preferences  انتخاب کنید
• همه گزینه ها را روی پیکسل تنظیم کنید

2.اسناد را با پروفایل سند وب ایجاد کنید

هنگامی که مشتاق شروع به کار طراحی جدید خود هستید مطمئن شوید که در تنظیمات پروفایل پنجره سند جدید وب را انتخاب کنید تا با رنگ های SMYK  و لبه های ابهام دار کار نکنید.

۳.ترازبندی شبکه پیکسل را برای اشیا روشن کنید

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

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

• 1. یک شی را انتخاب کنید
• 2. پنل تبدیل را باز کنید
• 3. گزینه "Align to pixel grid" را در پایین پنل علامت بزنید (اگر آن را نمی بینید ، برای نمایش گزینه ها روی پنل دوبار کلیک کنید)

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

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

ویژگی Pixel-Preview باعث می شود Illustrator هنگام بزرگنمایی بیش از 100٪ کارهای هنری شما مانند فتوشاپ رفتار کند به جای اینکه هر بار بردارهای عالی بگیرید ، پیکسل ها را به گونه ای خواهید دید که گویی با یک تصویر bitmap کار می کنید. با روشن بودن پیش نمایش پیکسل ، احساس خواهید کرد که در فتوشاپ هستید. فقط فکر کنید که این چقدر عالی است ! شما تمام قدرت گرافیک برداری را در دست دارید ، در حالی که قادر به دیدن نتیجه سطح پیکسل هستید.

برای فعال یا غیرفعال کردن Pixel Preview

• 1. منوی نمایش را باز کنید
• 2. "Pixel Preview" را انتخاب کنید

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

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

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

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

برای استفاده از پنجره های آثار هنری:

• 1. منوی Window را باز کنید ، سپس New Window را انتخاب کنید. Illustrator یک برگه جدید با همان سند ایجاد می کند.
• 2. دوباره به منوی Window بروید ، Float All in Window را انتخاب کنید. این کار به شما این امکان را می دهد که پنجره ها را به همان اندازه که مناسب می دانید ، در کنار یکدیگر قرار دهید و موقعیت آنها را تعیین کنید.
• 3. با سطوح مختلف بزرگنمایی در پنجره ها را آزمایش کنید و شروع به ایجاد برخی تغییرات برای دیدن نحوه کار کنید.

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

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

نکته: اگر نمی خواهید این مورد در مورد خاصی از نماد اتفاق بیفتد ، روی مورد موجود در آثار هنری خود کلیک راست کنید و سپس "break link to symbol" را انتخاب کنید. این کار آن را از بروزرسانی خودکار حذف می کند.

استفاده از نمادها در Adobe Illustrator

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

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

برای ایجاد نماد جدید:

• 1. آثار هنری را برای نماد ایجاد کنید
• 2. پنل Symbols را از فهرست Window باز کنید
• 3. آثار هنری را به صفحه بکشید
• 4- برای تأیید ، روی OK کلیک کنید

برای ویرایش یک نماد:

• 1. پنل Symbols را از فهرست Window باز کنید
• 2. برای ورود به حالت ویرایش ، روی نماد دوبار کلیک کنید
• 3. پس از اتمام ، برای خارج شدن از حالت ویرایش ، در هر نقطه خارج از آثار هنری نماد ، دوبار کلیک کنید

7. اشیا را با مقیاس 9 برش به راحتی گسترش دهید

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

8. گوشه های گرد

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

برای اعمال جلوه گوشه ای گرد:

• 1. مستطیل یا هر شی دیگری با گوشه های تیز ایجاد کنید
• 2. در منوی جلوه ها ، Stylize> Rounded Corners را انتخاب کنید
• 3. شعاع گوشه را وارد کنید و Preview را بزنید تا ببینید چگونه به نظر می رسد
• 4- روی OK کلیک کنید تا افکت اعمال شود

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

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

9. پر کردن الگوی سریع بیت مپ را ایجاد کنید

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

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

• 1. تصویر الگو را روی آثار هنری خود قرار دهید
• 2. روی Embed در نوار بالا کلیک کنید (مهم - بدون این کار نمی کند!)
• 3. الگو را به پالت نمونه ها بکشید
• 4. سواچ را روی هر جسمی اعمال کنید تا با الگو پر شود

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

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

  برای پیچیدن متن به دور یک تصویر:

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

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

در Illustrator ، پنل Appearance Object تقریباً مانند جلوه های لایه در Photoshop کار می کند ، شما می توانید چندین بار پر کردن و ضربات را به یک شی اضافه کنید ، سپس با حالت های انتقال ، با جلوه های آن بازی کنید تا نتایج جالبی کسب کنید. پنل Appearance بسیار قدرتمند و سرگرم کننده است من پیشنهاد می کنم فوراً آن را امتحان کنید.

آیا آماده امتحان Illustrator هستید؟

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

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