Съвети за работа с Illustrator. За уеб дизайнери, които предпочитат Photoshop

Съвети за работа с Illustrator. Ето една луда идея - проектирайте следващия си уеб проект в Illustrator. Ако сте основен уеб дизайнер, вероятно няма да реагирате много добре на това предложение. Illustrator просто не може да прави всичко, което Photoshop може, нали?

Не със сигурност по този начин.

Въпреки че Photoshop се превърна в де факто инструмент уеб дизайн, Illustrator е повече от способен да отговори на вашите нужди. Благодарение на своите инструменти за оформление, това често е по-добра и по-подходяща програма за уеб дизайн.

Тъй като повечето професионалисти в уеб дизайна не искат да се лутат из Illustrator в търсене на доказателства, аз съставих списък с функции, свързани с уеб, които трябва да знаете, за да започнете да експериментирате с уеб дизайн в Illustrator.

Опитайте няколко от тях и гарантирам, че ще започнете да използвате Illustrator като стандартен инструмент в работния процес на вашия уеб дизайн.

1. На първо място: задайте всички единици на пиксели. Съвети за работа с Illustrator

По подразбиране Illustrator използва метрика единици за размери на обекти и точки за текст. Това са страхотни настройки за повечето дизайнерски ситуации, но за уеб дизайн вероятно ще искате да виждате пиксели навсякъде. Така че, преди да започнете да работите върху нещо друго, уверете се, че вашите единици са настроени правилно.

За да зададете единиците на пиксели:

1. Отворете в менюто Редактиране
2. Изберете мерни единици от подменюто за настройки.
3. Задайте всички опции на „пиксели“

2. Създавайте документи с помощта на профил на уеб документ.

 

Когато искате да започнете да работите върху нов дизайн, лесно превъртете през прозореца Нов документ и пропуснете някои важни подробности – като например да кажете на Illustrator, че планирате да работите върху уеб дизайн, така че да не използвате CMYK цветове. и замъглени ръбове на обекта. Само не забравяйте да изберете настройката за интернет профил в прозореца Нов документ и ще се оправите.

3. Разрешете подравняването на пикселната мрежа за обекти. Съвети за работа с Illustrator

Тази функция е животоспасяваща, ако някога сте имали проблеми с размазани ръбове във Photoshop.

Подравняването на пикселната решетка ще коригира правите хоризонтални и вертикални сегменти на обект, за да пасне перфектно на пикселната решетка, като същевременно поддържа извитите и наклонените сегменти гладки. Резултатът е ясни, перфектни като пиксел форми - нещо, което определено искате в уеб дизайна.

Горният бутон има активирано подравняване на пикселната мрежа, което винаги води до ясни ръбове.

За да разрешите подравняването на пикселната мрежа на ниво обект:

1. Изберете обект
2. Отворете панела Transform (Прозорец > Трансформация).
3. Поставете отметка в квадратчето „Подравняване към пикселната мрежа“ в долната част на панела (ако не го виждате, щракнете двукратно върху панела, за да покажете опциите)

Забележка. Подравняването на пикселната мрежа е активирано по подразбиране за всички нови обекти, създадени с помощта на профила на уеб документа. Ако обаче поставяте обекти от други файлове на Illustrator, ще трябва ръчно да коригирате подравняването на пикселите за тях. Съвети за работа с Illustrator

4. Включете визуализация на пиксели.

Функцията Pixel-Preview ще накара Illustrator да се държи точно като Photoshop, когато мащабира вашето изображение над 100% - вместо да получавате перфектни вектори всеки път, вие всъщност ще виждате пикселите, сякаш работите с растерно изображение.

Включването на пикселен преглед ще ви накара да се почувствате като във Photoshop.

Помислете колко готино е - имате цялата мощ на векторната графика на върха на пръстите си и можете да видите как изглежда резултатът на ниво пиксел.

Чисто, нали?

Активиране или деактивиране на визуализация на пиксели

1. Отворете менюто за преглед
2. Изберете Pixel View.

5. Използвайте прозорци с произведения на изкуството. Съвети за работа с Illustrator

Представете си, че две видеокамери са насочени към вашия проект.

Една камера има нормално ниво на увеличение, което показва 100% от вашата работа. Другата камера има 400% ниво на увеличение и е насочена към една конкретна икона, върху която работите.

Подобно на хирург, вие използвате камерата за мащабиране, за да направите малки промени на ниво пиксел в иконата, като от време на време поглеждате към камерата със 100% увеличение, за да видите как всъщност изглежда в действителния си размер.

Прозорците на капака са страхотни, когато трябва да работите с малки елементи като икони - не е нужно непрекъснато да увеличавате и намалявате, за да проверите как изглежда всичко.

Това са прозорци с произведения на изкуството – те ви позволяват да разглеждате дизайна си едновременно с различни нива на мащабиране, цветови настройки и други варианти. Това е много полезно за уеб дизайн, особено когато работите с детайли на ниво пиксел.

За да използвате прозорци с произведения на изкуството:

1. Отворете менюто Window, след което изберете New Window. Illustrator ще създаде нов раздел със същия документ в изгледа.
2. Отидете отново в менюто Window, изберете Arrange > Move All to Window. Това ще ви позволи да промените размер и разположение на прозорците един до друг както намериш за добре.
3. Експериментирайте с различни нива на увеличение в прозорците и започнете да правите някои промени, за да видите как работи. Съвети за работа с Illustrator

6. Използвайте символи за бързо създаване на бутони, икони и други.

Колко пъти сте създавали един и същ (или почти същия) бутон, икона или джаджа във Photoshop? Ако се занимавате с уеб дизайн, вероятно го правите всеки ден.

Illustrator може да ви помогне да спестите време и да избегнете тази повтаряща се работа със символи.

По същество символите са безкраен набор от готови дизайнерски елементи, които могат да се добавят към работата чрез просто плъзгане и пускане и след това да се променят, ако е необходимо. Това е идеално за бутони, икони и други стандартни обекти, които не е необходимо да се създават от нулата.

Но има и друга причина, поради която символите са мощни, и тя се нарича инстанциране.

Символите са не само удобни, но също така улесняват актуализирането на повтарящи се елементи на дизайна.

 

По същество всеки път, когато правите промени в оригиналния символ, тези промени незабавно се отразяват във всички екземпляри на символа, намерени във вашето произведение. Имате ли нужда от по-големи бутони на уебсайта си? Просто сменете символа. Искате ли вашите полета на формуляра да изглеждат различно на всяка страница? Просто сменете символа. Схванахте идеята.

Съвет: Ако не искате това да се случи с конкретен екземпляр на символа as, щракнете с десния бутон върху обекта във вашата илюстрация и изберете Прекъсване на препратка към символ. Това ще го изключи от автоматичните актуализации.

Ето един добър видеоклип, обясняващ как да използвате и манипулирате символи:

Използване на символи в Adobe Illustrator на Adobe TV .

За да използвате съществуващ символ:

1. Отворете панела Символи от менюто Прозорец.
2. Плъзнете избрания символ върху вашата работа

Създайте нов символ:

1. Създайте символно изображение
2. Отворете панела Символи от менюто Прозорец.
3. Плъзнете илюстрация върху панела
4. Щракнете върху OK в диалоговия прозорец, за да потвърдите.

За да редактирате символ:

1. Отворете панела Символи от менюто Прозорец.
2. Щракнете двукратно върху символ, за да влезете в режим на редактиране.
3. Когато приключите, щракнете двукратно някъде извън изображението на символа, за да излезете от режима на редактиране.

7. Лесно разширяване на обекти с 9-сегментно мащабиране. Съвети за работа с Illustrator

Това е усъвършенствана символна функция, която ви позволява да определите кои части от обект се разтягат по време на мащабиране и кои остават непроменени.

Отляво: Пример за разтегнат бутон със и без настройка за 9-сегментно увеличение. Вдясно: Настройката за 9-сегментно мащабиране включва преместване на 4 водача, които казват на Illustrator кои части от обекта са защитени и кои части могат да бъдат мащабирани.

 

Практичен пример е бутон със заоблени ъгли - ако искате да го направите по-дълъг, не можете просто да го разтегнете хоризонтално, защото това ще изкриви целия обект. Вместо това ще трябва ръчно да преместите фигурните точки. С 9-сегментно мащабиране разтягането работи както сте предвидили. Съвети за работа с Illustrator

За да разберете наистина как работи, слушайте този страхотен видео урок от Adobe TV, за да се запознаете бързо:

Използване на 9-сегментно мащабиране със символи на Adobe TV .

8. Заоблени ъгли навсякъде!

Можете да създадете заоблен правоъгълник във Photoshop, но Illustrator ви позволява да приложите неразрушителен ефект със заоблен ъгъл към почти всеки обект. Какво е неразрушителен ефект? Това означава, че можете да го включвате, изключвате или променяте настройките му, без да засягате основния оригинален обект.

Можете да приложите ефекта на заоблените ъгли към почти всеки тип обект и да го коригирате според нуждите. Съвети за работа с Illustrator

За да приложите ефекта на заобления ъгъл:

1. Създайте правоъгълник или друг обект с остри ъгли
2. От менюто Ефекти изберете Стилизиране > Заоблени ъгли.
3. Въведете радиус на ъгъла и щракнете върху Визуализация, за да видите как изглежда.
4. Щракнете върху OK, за да приложите ефекта.

За да промените ефекта на заобления ъгъл:

1. Изберете обект със заоблени ъгли
2. Отворете панела Облик от менюто Прозорец.
3. Намерете ефекта Rounded Corners и щракнете двукратно върху него, за да промените настройките му, или щракнете върху иконата на око, за да го включите или изключите.

9. Създаване на бързо запълване с растерен модел. Съвети за работа с Illustrator

Фините модели на фона са голям хит в уеб дизайна, но много дизайнери смятат, че не са лесни за прилагане в Illustrator.

Трябва да призная, че не е интуитивно, но решението е просто.

За да създадете шаблон на растерно изображение:

1. Поставете снимка на шаблона върху вашето парче
2. Щракнете върху „Вмъкване“ в горната лента (важно - няма да работи без него!)
3. Плъзнете шаблон към палитрата Swatches
4. Приложете мостра към всеки обект, за да го запълните с шарка

10. Автоматично поставяне на текст около изображения и обекти.

Photoshop е известен със своите основни възможности за редактиране на текст. Ако искате да обвиете текст около изображение, трябва да създадете две или три различни текстови рамки и да симулирате ефекта. Съвети за работа с Illustrator

За щастие, Illustrator ви покрива.

За да обвиете текст около изображение:

1. Изберете изображението или обекта, около който искате да обвиете текст
2. Отворете менюто Обект, изберете Обвиване на текст > Нов.
3. За да зададете разстоянието за обвиване, отворете отново менюто за обвиване на текст и изберете Опции за обвиване на текст.
4. Преместете изображението върху текста, за да видите ефекта на обвиване

11. Създавайте богати визуални ефекти с настройки за външен вид на обекта. Съвети за работа с Illustrator

В Illustrator панелът Appearance на даден обект работи много като ефектите на слоя във Photoshop – можете да добавите множество запълвания и щрихи към обект, след което да си играете с техните режими на прехвърляне, непрозрачност и ефекти, за да получите интересни резултати.

Този текст е само един векторен обект, стилизиран с помощта на панела Облик и ефекти.

Игралната площадка е доста голяма - от падащи сенки, размазване и сияние до текстуриране, изкривяване и 3D. По този начин можете да пресъздадете повечето от ефектите от Photoshop, докато все още работите с векторни графики.

Панелът за външен вид е мощен и забавен – предлагам ви да го изпробвате веднага или да гледате урока по-долу, за да разберете как работи:

Овладяване на панела за външен вид на Adobe TV .

Готови ли сте да започнете да експериментирате с Illustrator?

Създаването на уебсайтове и потребителски интерфейси с помощта на Photoshop вече се превърна в норма и повечето дизайнери са доволни от това решение. Съвети за работа с Illustrator

Но това, че Photoshop стана толкова широко разпространен, не означава, че Illustrator няма какво да предложи - точно обратното. С инструменти като подравняване на пикселна решетка, обвиване на текст и външен вид на обекти, това е силен аргумент.

В комбинация с мощен инструменти за оформление и векторни графики, нарязване и експортиране на изображения, Illustrator определено е очевиден избор за уеб дизайнери, които искат бързо да разработват уебсайтове.