У попередньому уроці ми дізналися про загальні принципи функціонування інструментів перо (pen) та додаткового вибору (subselection tool). А сьогодні ми спробуємо більш детально розібратися з функціонуванням кривих Безьє з допомогою інструменту перо (pen). А щоб урок не видався нудним, спробуємо провести детальне практичне заняття, в якому намалюємо новорічну ялинку (ну то й що, що Новий рік вже закінчився).
За основу, яку будемо «обмальовувати», візьмемо ось таку привабливу ялиночку, яка складається із простих контурів. Можете скопіювати зображення, щоб і собі попрактикуватися з ним.
Сьогодні ми спробуємо не лише досконало повторити її у флеші, але й розфарбуємо. Отож, до справи:
- Імпортуємо в бібліотеку (File -> Import -> Import to Library) зображення ялиночки і відразу ж розміщуємо його на сцені (не забудьте підігнати розмір сцени до розміру зображення). Шар, на якому буде розміщуватися це зображення виступатиме фоном. В наступних кроках ми будемо повторювати зображення. Тому, щоб випадково не «пошкодити» цей шар, замкнемо його у шкалі часу (timeline). Натисніть на замок
- Додайте новий шар (layer) в шкалі часу (timeline). Він з’явиться вище, ніж наш шар із тлом (на якому розміщене оригінальне зображення ялинки). Саме у цьому шарі ви будете починати малювати з допомогою інструмента перо (pen). Виберіть цей інструмент у панелі інструментів, клікнувши мишкою по відповідній іконці або натиснувши клавішу “P”.
- Перш, ніж безпосередньо приступити до малювання, потрібно налаштувати наш інструмент. Як бачите, я вибрав червоний колір ліній (будемо починати малюнок із зірки, а вона буде в нас червоною), вимкнув заливку і обрав ширину ліній у 2 пікселі (щоб було краще видно)
- На зображенні зірка намальована пунктирною лінією, але нас це мало хвилює. Ми зробимо її суцільною. Малювати прямі лінії з допомогою інструмента перо насправді дуже просто. Клікніть перший раз на верхньому куті зірки, а потім на наступній точці, яку хочете з’єднати. Між двома точками з’явиться абсолютно пряма лінія. Потім переходимо до наступної вершини і так далі.
- По аналогії з тим, як ми замкнули самий нижній шар, замкнемо наш шар із зіркою. Наступний контур будемо створювати на новому шарі (створіть його), щоб уникнути перетину із зіркою. Для цього виберемо темно-зелений колір у панелі налаштування інструмента перо (pen) (а як же інакше – ми ж все-таки ялинку малюємо).
- На відміну від зірки верхній «поверх» ялинки складається із вигнутих контурів. Саме їх створення є найскладнішою і водночас – найбільш потужною можливістю інструмента «перо». За аналогією почнемо із самого верхнього кута (той, що безпосередньо дотикається до зірки). Не бійтесь малювати по раніше створених контурах зірки. Оскільки цей шар закритий, то пошкодити його ми не можемо.
- Якщо вам вдалося намалювати зовсім непросту форму верхнього «поверху» ялинки, то можна сказати, що інструмент перо (pen) ви частково засвоїли. Принаймні, зрозуміли основні принципи. Далі буде простіше. Закрийте шар із «верхнім поверхом» так само, як ви раніше закрили зірку. Створіть новий шар (у ньому ми намалюємо кульку).
- Можете скопіювати кульку і в тому ж шарі (layer) розкидати її по відповідних місцях на шаблоні (не зважайте, що ми поки-що не домалювали саму ялинку). Колір кульок також можна буде змінити, вибравши їх з допомогою інструмента вибору (selection tool). Результат не примусить себе довго чекати.
- За аналогією зі всіма попередніми кроками закриваємо і цей шар (з кульками) від редагування. А далі починається найцікавіше. Нам належить домалювати ялинку.
- Закрийте всі зайві шари (із зіркою та кульками) від редагування і перегляду. Для цього окрім замка поставте на них (у шкалі часу) хрестик навпроти ока. Шари стануть невидимими і не будуть нам заважати. Після цього тимчасово відкрийте вміст шару із «першим поверхом» ялинки і скопіюйте його у буфер з допомогою стандартної комбінації клавіш Ctrl+C. Знову закрийте шар і виберіть порожній (щойно створений) шар безпосередньо під ним. Вставте зображення з допомогою комбінації Ctrl+V.
- Виберіть у панелі інструментів вільну трансформацію (free transform tool). При цьому навколо щойно вставленого вами зображення з’явиться чотирикутник з точками на кутках. Схопіть мишкою за один із кутів цього чотирикутника, і затиснувши клавішу shift розтягніть зображення (клавіша shift дозволяє зберегти пропорції). Мабуть, ви вже здогадалися, що ми намагаємося зробити.
- Створіть новий шар безпосередньо під шарами із «поверхами ялинки» і намалюйте там «ніжку» дерева (за аналогією з тим, як ви малювали перший поверх ялинки). Виберіть для неї коричневий колір.
- Тепер переходимо до розфарбовування. Якщо ви все зробили правильно і розмістили шари таким чином, як було описано у попередніх пунктах, то проблем з розфарбовуванням не виникне. Виберіть інструмент заливки (paint bucket tool) і почергово відкриваючи відповідні шари розфарбуйте ялинку у потрібні кольори (я вибирав трішки світліші кольори, ніж колір самих контурів). Для розфарбовування просто клікніть «відром» всередині відповідного контуру. Як бачите, все просто. Починайте з нижніх шарів і переходьте до верхніх.
- Вітаю. Результатом цієї кропіткої роботи стала ось така приваблива ялиночка
Останній клік повинен чітко збігатися з першою точкою (при цьому біля вказівника з’явиться круглий символ, який вказує на те, що контур можна замкнути) – таким чином ми намалюємо завершений контур, який у майбутньому можна буде залити будь-яким кольором і навіть градієнтом.
Якщо є така можливість, всі контури нашого малюнку варто робити замкненими, щоб потім була можливість їх «залити». Принаймні ялинку ми будемо створювати саме за таким принципом – повністю замкнених контурів.
Як бачимо, наша зірка умовно складається із чотирьох елементів-поверхів. Ми намалюємо тільки один з них – самий верхній. Інші по суті є повторенням верхнього, тому з ними проблем виникнути не повинно.
Найцікавіше починається тоді, коли ми спробуємо створити «вигнутий контур». Для цього клікніть один раз, щоб встановити початкову точку. На наступному вузлі (де лінія ламається) клікніть вдруге, але не відпускайте ліву клавішу мишки, а потягніть її. Ви побачите, що щойно створена вами дуга починає вигинатися. Ваше завдання зробити так, щоб вигин дуги максимально відповідав вигину оригінального зображення. На перший погляд це складно, але поекспериментувавши з перетягуванням спрямовуючого вектора (по колу і вверх-вниз) ви відчуєте, що можете створити криву практично будь-якої форми. І це справді так. Для початку створіть свою першу криву.
Обов’язково зверніть увагу на те, що коли ви створите свою першу криву (на малюнку, зображеному вище, їх вже декілька) із останньої точки, наче два промені, з’являться два вектори, які керують зображеннями. Перший відповідає за вигин щойно створеної кривої, а другий буде відповідати за вигин наступної (роблячи зображення плавним). Оскільки наші кути доволі гострі, то другого вектору нам не потрібно (інакше не вийде правильного зображення). Для того, щоб вимкнути непотрібний вектор, клікніть один раз тим самим інструментом перо по останній точці щойно створеної кривої. Якщо ви все зробили правильно – один вектор зникне. Після цього можна продовжувати малювати, видаляючи зайві елементи кліками на «якірні точки» (anchor points).
Спеціально записав короткий скрінкаст, в якому показано, як створювати контур “верхнього поверху” ялинки з допомогою інструмента “перо”. Подивитися його можна за посиланням. Думаю, відразу все стане ясно!
В результаті у вас повинно вийте ось таке зображення
З кулькою все набагато простіше, ніж із «верхнім поверхом» оскільки вона має правильну круглу форму. Для її малювання ми будемо використовувати не перо, а інструмент «овал» (oval tool). Виберіть відповідний інструмент в панелі і, затиснувши клавішу shift (ви ж пам’ятаєте, що саме з її допомогою створюються правильні геометричні форми) намалюйте коло, яке за розмірами відповідатиме ескізам. Не забудьте попередньо обрати бажаний колір (та хоч би й рожевий) і вимкнути заливку (поки що ми малюємо тільки контури). Результат повинен виглядати приблизно так
Якщо придивитися, можна звернути увагу, що всі «поверхи» ялинки як дві краплі води схожі один на одного. Тому ми не будемо малювати їх чотири рази, а просто скопіюємо наш «перший поверх» і збільшимо його до потрібних розмірів. Для цього вставте три нових порожніх шари (для кожного поверху) і розмістіть їх (просто перетягніть) нижче під шар із першим поверхом.
Досягніть максимального співпадіння із «другим поверхом» ялинки і перемістіть контур туди, де він і повинен знаходитися. Потім повторіть кроки 10 і 11 для третього та четвертого (найнижчого) поверхів.
Зображення виглядає не дуже привабливо, оскільки ми поки-що не заливали контури кольором і як наслідок всі лінії видно (вони виглядають із-під зображення).
(Якщо з якихось причин контури не зафарбовуються, значить ви не «закрили» їх. В такому разі відредагуйте контур з допомогою інструмента вибору (selection tool). Просто вхопіть цим інструментом за кінчик прямої, яка дотикається до початку контура і при збільшеному (200% або 400%) режимі перетягніть її таким чином, щоб вона точно припасувалася до початкової прямої. Тобто зробіть так, щоб контур був повністю закритий. Як варіант, просто виберіть в налаштуваннях вашого paint bucket tool опцію «закривати великі проміжки» (close large gaps))
А якщо ви уважно пройшли весь цей урок і зуміли намалювати таку ялиночку, то навчилися не тільки користуватися інструментом перо (pen), але й вдосконалили свої навички в управлінні шарами (layers) та навчилися працювати із простою заливкою (paint bucket tool).
Якщо у вас виникли будь-які запитання, що стосуються уроку, не соромтесь задавати їх у коментарях.
А я думаю, проведу ще один міні-урок по роботі з інструментом pen, який дозволяє створювати контури практично будь-якої складності. Якщо буде потрібно – то запишу спеціальний відеокаст. Бо продемонструвати роботу цього інструменту у відео набагато простіше, ніж описати все це словами. Дякую за увагу. І залишайтеся на зв’язку.
Квітень 9, 2009 о 12:38
Дякую за урок, вочора, забув пр те що для нормальної аімації кожен символ має бути в окремому шарі, і пів години не міг зрозуміти в чому справа, переглянкув підбірку уроків і згадав