Бачили коли-небудь шоти ваших улюблених дизайнерів з процесом роботи в Ілюстраторі? Було цікаво, чому і навіщо їх криві Безьє так акуратно розставлені?
Ми постараємося пролити світло на цей загадковий процес, що виглядає так безглуздо.
Важливо: ця замітка передбачає повне розуміння і володінням інструментом Перо в Ілюстраторі.
Опорні точки, точки прив'язки
До недавнього часу я, безумовно, належав до клубу «Нафіга-це-надо?», І, в таємниці, до клубу «Як-вони-це-роблять?». Однак, я вирішив дізнатися, в чому фішка, і, виявляється, дотримання перпендикулярного розташування напрямних економить купу часу і зусиль.
Ось напис, яку ми намалювали при підготовці цієї інструкції:
Мал. 01
Зауважте, що що направляють кривих Безьє (за винятком кількох особливих випадків, які розглянемо пізніше) акуратно вирівняні по вертикальних і горизонтальних осях. Давайте подивимося, чому такий підхід - відмінна практика.
Менше варіантів для розміщення вузлів
Звучить, як щось не дуже круте, вірно? Але це реально зручно. Ходили колись в ресторан, меню в якому настільки велике і вичерпне, що воно практично потребує власного ISBN? Я таке ненавиджу. Іноді вибір місця для вузлів може змусити вас почувати себе так само складно, як і таке меню. Ваш скетч завантажений в Ілюстратор і чекає трасування, ваш пін тул (Pen Tool) бродить по кривим також, як палець по тому меню - звідки б почати? Не знаю, як ви, але я найчастіше вибирав блюдо дня, або, як у нашому випадку, найдальшу точку кривих. Давайте поговоримо про це.
Розміщення вузлів
Ось вам секретний соус. Єдиний метод, при якому напрямні розміщуються акуратно під кутами в 0 ° і 90 ° - це розміщувати вузли з певною стратегією. Метод може звучати складно, але одного разу зрозумівши його, застосовувати його супер-просто.
Подивіться на спрощену схему на малюнку 4. Червоними точками позначені горизонтальні вузли, синіми - вертикальні. Зауважте, що кожна точка розміщується на найдальшої точці кожної кривої.
Мал. 04
Мал. 05 пояснює цю модель трохи більш детально. і показує оптимальне місце для розміщення вашого вузла.
Ви дізнаєтеся, що розмістили вузол неправильно, коли отримаєте ось таку проблему:
Мал. 06 - Переміщення точки в червоному гуртку (у напрямку стрілки) зробить криву краще підходить під ескіз.
Тепер ми знаємо, що розміщення вузлів не носить випадковий характер. Обмеження самого себе в техніці розміщення вузлів, описане вище, дозволяє вам думати трохи менше під час векторизації і передати важку роботу від мозку вашої м'язової пам'яті. Тепер поговоримо про напрямних кривих Безьє.
Робимо класні криві з направляючими кривих Безьє
Тепер, коли ми розібралися з вузлами, прийшов час приділити увагу напрямних. Подивіться на цей GIF:
Якщо ви хоч раз векторізіровалі леттерінг, ілюстрацію або щось в цьому роді, картинка вище здається цілком звичним видовищем. Ви витратите велику частину часу, чіпляючи ці маленькі червоні кружечки на кінці напрямних, умовляючи їх скласти правильну криву. Тут немає магії, і чим більше ви практикуєтеся, тим краще буде виходити.
Фантастика з цими ГВНКБ (горизонтальними і вертикальними напрямними кривих Безьє) починається, коли ви обмежуєте їх (ага, знову). Ваш мізинець ніколи не повинен відпускати Shift під час вибору оптимальної довжини напрямних. Таке лінійне обмеження варіантів дуже освіжає. Я, буквально, відчуваю себе набагато краще, коли мені приходить проект з векторизацией.
Отже, в чому підступ?
Звучить все це дуже кльово, звичайно, але є кілька моментів, до яких потрібно придивитися при використанні ГВНКБ.
Іноді вам не вдасться знайти найдальшу точку кривої для розміщення вузла.
Іноді лінія закінчується до того, як вона досягає потрібної точки (як на Рис.5). Абсолютно нормально в цьому випадку відпустити шифт і просто повернути направляючу на той кут, який видається слушним. Не потрібно ставати фашистом Безьє, потрібно щоб ваш дизайн настільки круто, наскільки можливо.
Продовжуй тримати свої вузли на прив'язі.
Цей метод є набагато більш вимогливим ніж випадкове розміщення вузлів. Якщо вузли почали збиватися на манівці, ваші криві стають все менше схожими на Монро. і все більше - на Людину-слона. Якщо крива просто не бажає працювати (див. Рис.7), спробуйте трохи зрушити вузол.
Розміщення може здатися тісним або незграбним.
Іноді та сама «далека точка» (ДТ) знаходиться дуже близько до іншої ДТ. Подивіться на цей бардак:
Мал. 08 - Це часто буде відбуватися в кінцевих штрихах букв. Наприклад, вгорі «s» в нашому слові 'Beziers'.
Але не хвилюйтеся, це все частина веселощів. Достатній зум допоможе точно налаштувати всі деталі, дивіться:
Це реально коштує трохи додаткового часу в таких місцях, як це, коли ви розумієте всі інші вигоди методу.
У підсумку, ось чому ми будемо використовувати ГВНКБ в майбутніх проектах.
Ми поговорили про спрощення розміщення вузлів. Якщо це зберігає і економить ваш час, чому б і ні. ГВНКБ також зменшує загальну кількість вузлів, яке доводиться робити, а це - спрощує роботу і зменшує розмір файлів. Крім цього, ваші криві в підсумку виходять більш плавними. І, нарешті, через меншої кількості рішень, які доводиться приймати, весь процес векторизації відчувається трохи більше автоматичним, залишаючи вам більше часу, щоб взяти справжні інструменти і намалювати більше букв.
І, будемо чесними, це свого роду развлекуха :)
І ще, ви виглядаєте як хтось, хто знає те, що не знають інші дизайнери, коли публікуєте свої роботи на Дріббле;)
Ось кілька прикладів застосування ГВНКБ різними дизайнерами.
Dave Foster:
…та інші.
Мал. 13 Okay Type
Круто, тільки ось тут трохи підправити "Не треба ставати фашистом Безьє, потрібно щоб ваш дизайн настільки круто, наскільки можливо."
Сенс якраз в тому, що така техніка дозволяє економити час і на отрисовку і на внесення змін. Якби ви уважно читали, то побачили б, що про це написано в статті.
Просто якби мене спочатку вчили такій техніці, то я напевно її і використовував би зараз. А тому я самоучка, то пристосувався будувати по-своєму. Мені швидше будувати за своєю логікою. Як швидше, так і роблю. Я шукав ґрунтовного обгрунтування саме чому потрібно робити так, а не інакше, але вагомих аргументів на користь "запаралелювання вусиків" так і не знайшов ..)
Ніколи не задрачивавший на тему вирівнювання хендлов по осях, але іноді саме так виходить.