Урок № 31. Поиграем с обводкой. Часть I.

Вы зарегистрировались на стоках? Экзамен на «Shutterstock» прошли? Поздравляю! Вы умны и талантливы!  Вас ждет успех, который принесет и первые деньги! Теперь рисуйте и рисуйте! Пусть ваша фантазия просто бесчинствует!  Это необходимо!

Но надо идти вперед, достигнута первая цель, а теперь спокойно будем изучать то, что требуется  знать. Никому глубокие знания никогда  не мешали. Методически, с усилиями над собой и своими рисунками работать – вот рецепт успеха в любом деле, стоки не исключение.

Не прошли экзамен, не приняли картинки?  Вы в унынии.  Всё бросили, сказки не получилось! Вас обманули, уверяя, будет легко и просто? Настроения больше нет.

Ну-ка, разберитесь в себе! Вы, как Хлестаков из «Ревизора» Гоголя,  быстро хотели сыграть роль хоть на ступеньку выше, чем предназначена?

Вспомним  Хлестакова  в знаменитой сцене вранья: «Литераторов часто вижу. С Пушкиным на дружеской ноге. Бывало, часто говорю ему: «Ну что, брат Пушкин?» — «Да так, брат, — отвечает, бывало, — так как-то все…» Большой оригинал».

Не уподобляйтесь Хлестакову. Ему и о Пушкине сказать нечего, полная пустота, не привыкшая думать. А вы умны и талантливы, не бросайте изучение программы.

Кто-то не скажет, а в душе подумает, что никогда ему программу не освоить, даже пытаться не надо, стоки вообще не для него.  Довольно часто видела я таких людей, первые неудачи  их сбивали с толку. Начинают с энтузиазмом, в мечтах возносятся к вершинам, а при небольшом затруднении  опускают руки и всё бросают.

Послушаем ещё незабвенного Николая Васильевича. Это уже из «Мертвых душ»: «Забирайте же с собою в путь, выходя из мягких юношеских лет в суровое ожесточающее мужество, забирайте с собою все человеческие движения, не оставляйте их на дороге, не подымете потом! Грозна,  страшна грядущая впереди старость, и ничего не отдает назад и обратно! Могила милосерднее ее, на могиле напишется: «Здесь погребен человек!», но ничего не прочитаешь в хладных, бесчувственных чертах бесчеловечной старости».

Вы осуждаете меня, что я цитирую  что-то страшное? Но это правда. Сейчас вы молоды душой, хотя уже на пенсии. Ломайте голову над программой, добивайтесь цели, стоки вам рано или поздно покорятся.

Вспомним с детства вдолбленные слова  вознесенного и сброшенного с пьедестала кумира: «Учиться, учиться и учиться!» Добавим только, что это делать надо всю жизнь. И скептицизм уберите. А то сразу вспомнили: «Век живи, век учись   —  дураком помрешь!» Альтернатива всему – старческий маразм.  Вы  же хотите быть интересными своим близким на долгие годы, так не унывайте, работайте над собой.

Итак, в путь, к новым открытиям! Снова учеба, снова кропотливый труд.  «Но пораженья от победы ты сам не должен отличать»… — слова  Б. Пастернака всех примиряют и уравнивают.

Ученики всегда молоды душой, бодры и веселы! Улыбнемся и начнем! А в конце урока и поиграем!

Хорошо знаем, что линия контура называется обводкой. Обводка обладает такими свойствами, как толщина линии, цвет и пунктирный узор.  После создания контура или фигуры можно изменять характеристики обводки. Как это сделать?  Займемся этим на сегодняшнем уроке.

Мы рисовали фигуры с помощью обводки, а потом её удаляли за ненадобностью. Но обводка в  Adobe Illustrator не так проста, как кажется. Её секреты скрыты в палитре Stroke (штрих). Создайте новый документ с таким же названием  stroke, чтобы знать, чем будем заниматься. Начнем всё с чистого листа.

Открыли программу? На панели справа найдите иконку  Stroke (штрих).

Иконка Stroke_Ikonka Stroke

Ошибиться невозможно, на самой иконке уже изображены три линии  различной толщины, будто напоминание  об особенностях обводки, которые мы изучаем.  Кликнем по ней.

Палитра Stroke_Palitra Stroke

Ого, сколько всего! Явно,  Adobe Illustrator CS6  не дает застояться мозгам!

Самым первым параметром обводки является её толщина. Weight (толщина) может быть выбрана из раскрывающегося списка.   Нажмите на черный треугольник, список возникнет перед вами.  Цифры можно ввести  вручную.  Скоро мы этим воспользуемся, но рассмотрим ещё некоторые параметры, данные  ниже Weight (толщина). А пока выбираем цифры толщины обводки, я взяла  20 pt.

Параметры Weight (толщина)_Parametry` Weight (tolshchina)

Ниже Weight (толщина)  находятся кнопки, которые позволяют выбрать один из способов окончания линии обводки. Cap (кепка, ограничение) дается в трех видах.

Варианты концов линии_Varianty` kontcov linii

Рассмотрим их. Первый –  Butt Cap (срезанное ограничение, кепка торца). Обводка контура «срезается» точно по последней якорной точке.

Срезанный конец линии_Srezanny`i` konetc linii

Надо закрепить то, что узнали.  Воспользуемся инструментом Line Segment Tool (Инструмент линейного сегмента), он поможет нам провести линию.

Инструмент, помогающий провести линию_Instrument, pomogaiushchii` provesti liniiu

Кликните по инструменту и зажмите Shift,  чтобы линия получилась идеально вертикальной. Поставьте Weight (толщина) 20 pt.  Длина линии нас не интересует.  В Adobe Illustrator CSобводка может быть градиентной. Так и воспользуемся этим, ведь у нас новая версия.

Градиентная обводка_Gradientnaia obvodka

Как я получила такую обводку? Открыла палитру образцы (Swatches), затем библиотеку образцов, выбрала градиент, далее Color Combinations. Открыла палитру Gradient, в Type поставила Radial.

Заметили, что палитре Gradient  тоже есть Stroke?  Но об этом поговорим чуть позже!

Палитра Gradient_Palitra Gradient

Рисуем линию. Вот результат. Конец линии обводки обрезан строго и ровно. Мы об этом ведем разговор, а то увлеклись другим.  Пользуемся  новшествами.

Градиентная обводка_Gradientnaia obvodkaКрасиво, правда?  Разбираемся дальше. Round Cap (круглая кепка).  Закругленное окончание обводки выступает за последнюю якорную точку контура на половину толщины обводки. Это показывает и сама иконка.

Круглое окончание линии_Krugloe okonchanie linii

Посмотрим практически.

Круглое окончание линиии_Krugloe okonchanie liniii

И последнее в этом ряду. Очень похоже на первое, Projecting Cap (выступающая кепка) больше напоминает Round Cap, но форма прямоугольная, а не закругленная.

Выступающее окончание линии_Vy`stupaiushchee okonchanie linii

Вот как это на практике.

Выступающее окончание линии_Vy`stupaiushchee okonchanie liniiРазличия есть, запомним их. Под этой группой  разнообразных «кепок» находится Corner (угол).  Это вид обводки в острых углах.

Различные виды углов_Razlichny`e vidy` uglov

Опять рассмотрим подробно.

Острый угол_Ostry`i` ugol

С помощью инструмента Pen (перо) нарисуем острый угол. Вот как он выглядит, когда включена кнопка Miter Join (заостренное соединение). А «кепка» осталась Projecting Cap.

Острый угол_Ostry`i` ugol

Изменим «кепку» на  Round Cap. Угол острый, а концы линии круглые.

Угол с круглыми концами_Ugol s krugly`mi kontcami

Продолжим расшифровку Corner (угол). Round Join (закругленное соединение) сделает угол и «кепки» одинаковыми.

Круглое окончание угла_Krugloe okonchanie ugla

Чего мы и добивались!  Всё круглое, одинаковое.

Круглое окончание угла и концов_Krugloe okonchanie ugla i kontcovНу, и последняя кнопка. Bevel Join (срезанное соединение). На иконке это видно.

Срезанный угол_Srezanny`i` ugol

Посмотрим, как это выглядит на угле.

Срезанный угол_Srezanny`i` ugolЯвно надо первую «кепку» Butt Cap,  чтобы было красивее.

Срезанные угол и концы_Srezanny`e ugol i kontcy`

Вы правы, лучше  Projecting Cap. Всё-то вы чувствуете и знаете! Ну, просто молодцы!

Срезанный угол и выступающие окончания линий_Srezanny`i` ugol i vy`stupaiushchie okonchaniia linii`

Запоминаем, первоклассники, это пригодится. Конечно, хочется сразу применить знания, но не торопитесь, пожалуйста, всему своё время!

Ещё надо обратить внимание, что при включенном  Miter Join (заостренное соединение) зажигается параметр Limit (предел заострения). Он задается в долях толщины линии. Не будем только углубляться в детали.

Дополнительные свойства острого угла_Dopolnitel`ny`e svoi`stva ostrogo ugla

У меня стоит 10 х, программа сама всё делает, а мы не заморачиваемся. Тонкостей в программе достаточно!

Параметры острого угла_Parametry` ostrogo ugla

Следуем за другими  возможностями  в палитре  Stroke. Нас ждет Align Stroke (расположение обводки). И если приглядеться, то понятно, что обводка может идти по центру, по внешней части объекта и по внутренней.

Расположение обводки_Raspolozhenie obvodki

А теперь разберемся! Нарисуем прямоугольник, его параметры нас не интересуют. Нам важна его обводка. Align Stroke To Center (Расположить обводку по центру).

Расположение обводки по центру_Raspolozhenie obvodki po centru

Вот так это выглядит.  Контур кривой Безье (выделен синим) будто заключен в рамку обводки.

Обводка по центру_Obvodka po centruAlign Stroke To Inside (расположить обводку внутри)

Обводка внутри_Obvodka vnutri

Ничего себе! Это называется внутри? Это же по внешнему краю! – Да, дорогие мои, обводка внутри по отношению к контуру кривой Безье. Вот так, а не иначе!

Обводка внутри_Obvodka vnutri

Ну,  и  Align Stroke To Outside (расположить обводку снаружи).

Обводка снаружи_Obvodka snaruzhi

Здесь уже всё понятно. Всё делается по отношению к контуру кривой Безье.

Обводка снаружи_Obvodka snaruzhi

Первоклассники, иногда люди рисуют объекты, не обращая внимания на включенные параметры обводки, а потом удивляются, что у них что-то не совпадает. Программа точна, будьте вы всегда начеку, тогда всё без  проблем. Видите, один и тот же прямоугольник, а размеры визуально получаются разные.

Но вернемся к  Align Stroke To Center (Расположить обводку по центру). Заглянем в палитру Gradient. Тут тоже есть интересные возможности! Apply gradient within stroke (Примените градиент в пределах обводки).

Градиент в пределах обводки_Gradient v predelakh obvodki

Такими были все наши прямоугольники, кликнем  Apply gradient along stroke (Примените градиент вдоль обводки). Совсем другое дело!

Градиент вдоль обводки_Gradient vdol` obvodki

Конечно, интересна и третья кнопка! Apply gradient across stroke (Примените градиент через обводку). Ну,  неплохо! Перед нами просто готовая рамочка! Запомним это!

Градиент через обводку_Gradient cherez obvodku

А теперь, первоклассники, самостоятельная работа! В Type измените Radial на Linear, посмотрите  на вид градиента. Изменяйте и расположение обводки по отношению к кривой Безье, конечно, интересуйтесь градиентом. Будет ли что-то работать? Исследуйте! Выводы делайте сами! Вы уже достаточно опытны!

Пока обводка является обводкой, легко увеличить её толщину. Я поставила 60 pt.

Увеличение толщины обводки_Uvelichenie tolshchiny` obvodki

И опять продолжите самостоятельную работу, увеличивая и уменьшая толщину обводки нашего прямоугольника. Играйте! Только когда легко и просто, приятно учиться! Наконец-то мы подошли к игре, теория уже надоела! Но без неё нельзя!

Чтобы преобразовать обводку в залитый объект, идем в главное меню вверху программы, выбираем  ObjectPath  –  Outline Stroke (объект – путь – преобразовать обводку).

Преобразование обводки_Preobrazovanie obvodki

Вот такое преображение. Палитра  Stroke не работает. Все функции её отменились за ненадобностью.  Но мы, играючи,  сделали довольно трудное, это не изучали, да и сейчас не будем, только запомним, что перед нами градиентная  сетка Gradient Mesh.

Преобразование обводки в градиентную сетку_Preobrazovanie obvodki v gradientnuiu setku

Снимем выделение, вот результат.

Преобразованная обводка_Preobrazovannaia obvodka

Как-то резко, попробуем убрать в градиенте самый первый желтый цвет. Но у преобразованного объекта сделать это трудно, вернитесь к обводке, и уберите лишний цвет в градиенте.

Рамочка более естественная, хотя оставьте и первую!

Можно пойти и другим путем. Object – Expand Appearance (объект – разобрать оформление)

Разобрать оформление_Razobrat` oformlenie

Так мы уже делали. Это привычно.

Преобразование обводки в градиентную сетку_Preobrazovanie obvodki v gradientnuiu setku

Видите, как отменилась обводка и появилась заливка. Та же градиентная  сетка Gradient Mesh, только убран один цвет. Обводки нет, исчезла!

Обводки нет_Obvodki net

Ну, с этим разобрались!

Теперь попробуем поиграть с полученным. Объект выделен, кликнем два раза на инструменте Scale Tool (инструмент масштаба).

Инструмент масштабирования_Instrument masshtabirovaniia

В появившемся окне вставим такие параметры (можете и другие): Horizontal — 65%, Vertical — 65%.

Параметры масштабирования_Parametry` masshtabirovaniia

Нажимаем Copy, а затем горячие клавиши Ctrl+D.  Сделайте столько раз уменьшение объекта, сколько вам нужно. Вот такая анфилада!

Результат масштабирования_Rezul`tat masshtabirovaniia

А вот без удаленного цвета как получилось!

Результат масштабирования_Rezul`tat masshtabirovaniia

Самостоятельная работа! Создайте другие объекты, с другой заливкой и повторите изученное. Посмотрим, что у вас получится. Играйте! Это легко и весело!

Результаты масштабирования разных фигур_Rezul`taty` masshtabirovaniia razny`kh figur

У меня такие игрушки, у вас лучше! Но как забавно! Фантазируйте!

Сохраним эти игрушки и откроем новый документ, который назовем stroke1.

На чистом листе из линий обводки создадим цветы, это тоже интересно! Готовимся к игре. Рисуем линию с Round Cap (круглая кепка).  Толщину возьмем самую большую – 100 pt. Цвет выбирайте сами! У меня так, у вас по-другому!

Линия с круглыми концами_Leeniia s krugly`mi kontcami

Выбираем  инструмент вращения Rotate Tool (R),  кликнем,  удерживая клавишу Alt, строго в центре линии.

Линия с центром_Leeniia s centrom

Это знакомо по солнышкам, вызовите диалоговое окно, поставьте угол 60, нажмите Copy.

Диалоговое окно инструмента вращения_Dialogovoe okno instrumenta vrashcheniia

Нажимаем  Ctrl+D, завершаем цветочек.

Цветок_TCvetok

Далее  выделяем  все три линии. Это делает уже черная стрелка.

Выделяем элементы цветка_Vy`deliaem e`lementy` tcvetka

Идем  в меню Object > Expand (объект – разобрать).

Команда разобрать_Komanda razobrat`

Выйдет окно Expand, нажимаем ОК.

Окно Expand_Okno Expand

У нас самостоятельные  объекты.

Преобразованные объекты_Preobrazovanny`e ob``ekty`

Обводка стала заливкой.

Преобразование обводки в заливку_Preobrazovanie obvodki v zalivku

Но у нас много  объектов. А зачем, если окрашены они одинаково? Воспользуемся инструментом Shape Builder Tool  (инструмент для постройки формы)

Инструмент преобразования формы_Instrument preobrazovaniia formy`

Объединим объекты. Мы этим пользовались! Вспомните урок № 19!  Появилась мелкая сетка, отпускайте мышь, Alt не нажимайте, а то удалите одну из частей.

Цветок - единый объект_TCvetok - ediny`i` ob``ekt

Вот такой цветочек. А теперь играем и выдумываем! Самостоятельная работа. Используем все полученные знания! Цветы из обводки_TCvety` iz obvodki

У меня такие цветочки, вы поиграли лучше, ваша фантазия более свободна, я рада!

Сохраните нарисованное, пригодится!
Отдыхаем! Перемена!

Следующий урок №32. Поиграем с обводкой. Часть II.


Эта страница была показана 23658 раза.

Пожалуйста, поделитесь, если страница оказалась полезной!
  • Добавить ВКонтакте заметку об этой странице
  • Facebook
  • Одноклассники
  • LiveJournal
  • Twitter
  • Tumblr
  • Мой Мир

Урок № 31. Поиграем с обводкой. Часть I.: 10 комментариев

  1. Елена, здравствуйте! Во-первых, хочу выразить Вам свою благодарность за уроки! Ваша манера изложения материала легка, доступна и приятна! Это просто настоящий подарок, что я нашла Ваши уроки! Спасибо огромное! Подскажите, пожалуйста, для засылки на стоки обязательно ли, чтобы все объекты были сгруппированы? Правильно ли я поняла, что каждый объект должен быть сгруппирован, но не все вместе? Проясните ситуацию

    1. Ольга, здравствуйте! Спасибо за хорошие слова, писать уроки для благодарных людей легко и приятно. 🙂
      Группировать объекты вовсе не обязательно ни в процессе работы, ни при отправлении на стоки. А можно и группировать. Мне удобнее, когда объект собран воедино, то есть сгруппирован. Я могу его смело передвигать и знаю, что ни одна деталь не будет потеряна. Но авторы решают сами, как им удобнее. В этом нет проблемы.

    1. Алла, очень рада за Вас. Навыки рисования у Вас хорошие, «Иллюстратор» освоите быстро. Смотрите и другие уроки на сайте, и уроки в интернете. С Вашим желанием учиться нельзя останавливаться на одном! 🙂

  2. Здравствуйте. Помогите пожалуйста выйти из тупиковой ситуации: никак не могу переключиться с заливки на обводку с последующим фиксированием последней. Переключаюсь на режим обводки и выбираю нужный градиент, а режим тут же переключается с обводки на заливку. Что я только не делала!…Обидно до слёз! Что же я не так делаю? Может всё дело в версии иллюстратора ? У меня CS5.
    Помогите пожалуйста, прошу вас!

    1. Уважаемая Оксана! Конечно, всё дело в версии «Иллюстратора». Применение градиентов к обводке возможно стало только в Adobe Illustrator CS6. Скачайте, пожалуйста, эту версию и всё получится! Успехов! 🙂

  3. Здравствуйте , Елена , урок прошёл , но не пойму почему инструмент Shape Builder Tool при объединении объекта меняет (мажет) цвет ?

    1. Станислав, этот инструмент не мажет, а присваивает объединенным частям один цвет. Попробуйте ещё раз!

  4. Ох, не знаю, ответит ли автор, но надеюсь. Сделал всё как тут сказано — получилось. Базовой кистью. А как только поменял кисть с базовой на другую — сразу какая-то ерунда с градиентом произошла, «Apply gradient across stroke» не работает, при любом выбранном из 3 вариатов градиент идёт тупо сверху-вниз. А надо вдоль контура (который по центру). При условии, что линия S-образная (попытка нарисовать растение) это всё портит. В Интернете решения не нашёл. Cs6. Буду благодарен за помощь.

    1. Здравствуйте, рада, что всё получилось по уроку. Мы работали с обводкой. Если у Вас так же сработала базовая кисть — отлично! Остальные кисти — другие инструменты, у них свои законы, к ним это нельзя применить. О кистях речь пойдет в других уроках. Удачи в изучении программы! 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *