Как нарисовать циферблат в иллюстраторе: Как создать часы в иллюстраторе

Как нарисовать векторный секундомер в Adobe Illustrator (перевод).

Содержание

  • Шаг 1. Создайте металлическую форму
  • Шаг 2. Кнопки
  • Шаг 3. Циферблат, числа и детали

Этот урок был создан в программе Adobe Illustrator CS2. Для других версий программы возможны небольшие изменения.

Шаг 1. Создайте металлическую форму

Сначала мы создаем форму часов. Создайте круг с помощью инструмента Эллипс (Ellipse tool). Заполните круг  градиентом с параметрами, показанными ниже. Растяните градиент таким образом, чтобы светлое пятно было в верхней левой части круга.

Создайте новый круг с центром в том же месте. Сделайте этот круг немного меньшим чем первый. Заполните новый круг градиентом,как показано ниже.

Результат должен быть похожим на это:

Добавьте третий круг снова с центром в том же месте и снова немного меньший чем второй круг. Дайте новому кругу градиент, похожий на это:

Чтобы добавить дополнительный теневой эффект к третьему кругу создают новый круг такого же размера и применяют градиент и прозрачность:

Если эта работа для микростоков, то градиент с прозрачностью поддерживается только в EPS 10! Еще можно прочитать Формат EPS 10 – как найти ошибки при сохранении

Результат должен быть похожим на это:

Теперь к циферблату часов. Создайте новый круг, немного меньший чем предыдущее. Добавьте градиент, как показано ниже, таким образом, чтобы самая светлая часть находилась в центре часов.

Теперь Вы создали металлический каркас часов и циферблата. Давайте идти дальше к кнопкам.

Шаг 2. Кнопки

Чтобы добавить кнопки к секундомеру сначала создают новый слой и помещают его ниже первого слоя.

Создайте прямоугольник наверху часов. Заполните прямоугольник градиентом как показано ниже, чтобы моделировать блики металла.

Скопируйте новый прямоугольник и затем расположите его поверх первого (CTRL+F). Продвиньте новый прямоугольник выше первого и измените его размеры, чтобы он стал шире, как на рисунке:

Чтобы смоделировать рифленую поверхность кнопки, мы сделаем много темных прямоугольников, чтобы показать тени. Создайте связку маленьких прямоугольников как показано ниже и расположите их сверху кнопки. Сделайте их всех черными и установите прозрачность в 60 %.

Если эта работа для микростоков, то прозрачность поверх градиента можно сохранить только в  EPS 10, EPS 8 это не поддерживает.

Чтобы добавить тень к кнопке создайте новый прямоугольник ниже верхней части, но поверх первого прямоугольника. Сделайте его черным и установите прозрачность в 30 %.

Для микростоков можно просто подобрать цвета в градиенте черного (если Вы хотите сохранить в EPS 8), не используя прозрачность. Для EPS 10 можно применить прозрачность.

Теперь создайте два круга как показано ниже. Выберите эти два круга и сделайте составной путь (Object > Compound Path > Make). Поместите круг позади кнопки Object > Arrange > Send to Back)

Примените градиент к новому кругу. Тяните градиент из центра круга к краю.

Чтобы добавить еще одну кнопку, выберите два главных прямоугольника и прямоугольник тени, который мы создали, и скопируйте их. Поверните их приблизительно 35 градусов и разместите их слева.

Шаг 3. Циферблат, числа и детали

Мы идем дальше, чтобы создать числа и детали на циферблате. Создайте новый слой и поместите его сверх других. Прежде, чем создать цифры, мы создадим все линии. Сначала создайте единственную линию в верху циферблата, как показано здесь:

Выделив линию, щелкните по инструменту Вращение (rotate tool). Тяните точку вращения из центра линии в центр часов. Теперь вращайте линию, зажав shift и ALT . Понизьте копию линии в 180 степенях. Перетащите копию линии на противоположный край циферблата:

Нам нужно скопировать эти линии вокруг циферблата с расстоянием в 6 градусов между каждым. Выберите обе линии и откройте окно Вращение (Object > Transform > Rotate). Задайте Угол вращения Angle =6 и щелкните Copy.

Повторите этот шаг, нажимая CTRL+D, пока Вы не создали все линии.

Мы хотим выдвинуть на первый план каждую 5-ую секунду, таким образом, мы теперь изменим толщину линии. Каждая 5-ая линия должна быть более толстой — 1.3 pt., а остальные — 0.6 pt.

Мы должны создать еще больше линий на этих часах. Создайте новый слой. Создайте линию наверху циферблата ( там где 12 часов), эта линия должна быть еще тоньше (0. 2 pt.) и короче чем линии на предыдущем слое. Как и в предыдущем примере с первой линией, щелкните по инструменту вращения. Тяните точку вращения из центра линии в центр часов. Теперь вращайте линию, зажав shift и ALT. Переместите копию линии на противоположную сторону циферблата.

Выберите обе линии и откройте окно Вращение (Object > Transform > Rotate). Задайте Угол вращения Angle =6 и щелкните Copy. Повторите этот шаг, нажимая CTRL+D. Повторитесь, пока Вы не создали нужное количество линий.

Чтобы добавить детальности создайте два круга с центральной точкой в центре циферблата. Один круг должен проходить по краю недавно созданных линий, и другой немного ближе к центру. задайте толщину линий 0.4 pt.

Теперь пора добавить цифры. Создайте числа при использовании инструмента Type Tool и шрифта на Ваш выбор. Добавьте числа рядом с самыми толстыми линиями.

Теперь давайте создадим стрелку. Вы можете использовать инструмент Star tool, чтобы создать треугольник. Тяните звезду, удерживая кнопку мыши, и нажмите на клавиатуре стрелка вниз, чтобы уменьшить количество углов у фигуры. Отпустите, когда у Вас получится треугольник. Сделайте треугольник темно-серым.

Измените размеры треугольника, сделав его очень узким, и подкорректируйте длину.

Добавьте маленький круг в центре часов. Заполните его темно-серым градиентом. Вы можете вращать стрелку часов с помощью инструмента Вращения Rotate tool.

Последняя деталь, которую мы создадим в этом уроке Adobe Illustrator — это блик на стеклянной поверхности. Создайте новый слой. Создайте два круга как показано на рисунке ниже.

Выделив обе окружности, в палитре Pathfinder выберите Divide. Затем разгрупируйте результат (Object > Ungroup) и удалите все лишнее:

Добавьте градиент, чтобы сделать блик, с параметрами, как на рисунке ниже:

Такой градиент с прозрачностью поддерживает только формат EPS 10.

Результат должен быть похожим на это:

Это все. Теперь у Вас есть прекрасная иконка секундомера.

Хотите заработать на своей иллюстрации? Узнайте как это сделать с помощью микростоков.

У вас остались вопросы или есть что добавить по теме статьи? Напишите в комментариях.

Как нарисовать умные часы в Иллюстраторе


В этом уроке мы будем рисовать умные часы в Adobe Illustrator. Нам предстоит работать со стандартными фигурами, живыми углами, палитрой обработки контура. В итоге вы получите минималистичное и стильное векторное изображение, которое можно использовать в качестве иконки и даже mockup-файла.


Пример HTML-страницы

Шаг 1


Для начала создайте новый документ, выбрав в меню File > New/Файл>Создать (или нажмите Control-N). Укажите документу следующие параметры:

Шаг 2


Начнем с создания ремешка. Нарисуйте прямоугольник со скругленными углами (rounded rectangle) размером 64 x 84 px и радиусом скругления углов (Corner Radius) в 20 px. Укажите прямоугольнику цвет #D3928D и поместите его на холсте как показано ниже.

Шаг 3


Создайте копию прямоугольника (Control-C > Control-F) и переместите верхнюю копию как показано ниже. Выделите обе фигуры и в палитре Pathfinder/Обработка контура кликните по иконке Minus Front/Минус верхний.

Шаг 4


Получившейся фигуре укажите обводку цвета #262A35 и толщиной в 4 px. Укажите обводке скругленные углы в палитре Stroke/Обовдка.

Шаг 5


Дублируйте нашу фигуру (Control-C > Control-F), укажите копии цвет заливки #FFBFB6, инструментом Delete Anchor Point/Удалить опорную точку удалите все точки нижние точки так, чтобы осталось только часть, показанная ниже.

Шаг 6


Тем же инструментом выделите нижние две точки и переместите их на 14 px ниже. Для этого кликните правой кнопкой и выберите Transform > Move > Vertical/Трансформировать>Переместить>Вертикально.

Шаг 7


Выделите две нижние точки инструментом Direct Selection/Прямое выделение (A) и скруглите их на 12 px при помощи функции Live Corners/Живые углы. Укажите фигуре обводку толщиной в 4 px и цвета #262A35.

Шаг 8


Рисуем застежку. Для этого нарисуйте круг размером 8 x 8 px (#E89054) с обводкой толщиной в 4 px (#262A35). Поместите круг как показано ниже.

Шаг 9


Теперь рисуем отверстие для застежки. Создайте круг размером 4 x 4 px (#262A35) без обводки, и разместите его как показано ниже.

Шаг 10


Дублируйте нижнюю (полную) часть ремешка (Control-C > Control-F), кликните по ней правой кнопкой и выберите Transform > Reflect > Vertical/Трансформировать>Отразить>Вертикально. Переместите отраженную копию как показано ниже и укажите ей цвет заливки #EA755E.

Шаг 11


Начнем работу над самими часами. Нарисуйте прямоугольник размером 16 x 48 px (#E89054), скруглите его правые углы на 8 px в палитре Transform/Трансформация в разделе Rectangle Properties/Свойства прямоугольника. Укажите фигуре такую же обводку как у остальных объектов. Поместите фигуру как показано ниже.

Шаг 12


Нарисуйте прямоугольник со скругленными углами размером 40 x 48 px (#FFC06C) с нашей обводкой и поместите как показано ниже.

Шаг 13


Экран рисуем при помощи прямоугольника со скругленными размером 32 x 40 (#262A35) без обводки и с радиусом скругления углов в 4 px. Выравниваем экран по центру прямоугольника из предыдущего шага.

Шаг 14


Рисуем кнопку при помощи круга размером 8 x 8 px (#262A35), который поместите как показано ниже.

Шаг 15


Добавляем дополнительную кнопку из прямоугольника со скругленными на 4 px углами размером 8 x 16 px (#262A35). Поместите эту кнопку ниже. Выделите все фигуры и нажмите Control-G, чтобы объединить их в группу.

Результат


Автор урока ANDREI STEFAN


Ссылка на источник


Уроки Illistrator. Уроки Adobe Illustrator. Уроки Иллюстратора. Adobe illustrator уроки. Уроки adobe illustrator для начинающих. Adobe illustrator уроки на русском. Видео уроки adobe illustrator. Adobe illustrator уроки для начинающих на русском. Adobe illustrator уроки с нуля. Уроки adobe illustrator cc для начинающих. Adobe illustrator cc 2019 уроки. Уроки adobe illustrator скачать торрент. Уроки по adobe illustrator cc. Adobe illustrator уроки вектор гайд. Уроки рисования adobe illustrator. Adobe illustrator уроки вектор гайд. Уроки векторной графики в adobe illustrator. Adobe illustrator cc 2018 уроки. Adobe illustrator логотип уроки. Уроки adobe illustrator cc 2018 для начинающих. Бесплатные уроки adobe illustrator. Урок 01 что такое adobe illustrator. Уроки работы в adobe illustrator. Adobe illustrator урок. Видео уроки adobe illustrator торрент. Adobe illustrator видео уроки скачать торрент. Adobe illustrator 3d уроки. Уроки adobe illustrator cc 2019 на русском. Интерфейс в adobe illustrator cc 2019 уроки. Уроки иллюстрация adobe illustrator. Adobe illustrator уроки рисование плашками.

Пример HTML-страницы

Как нарисовать часы в Adobe Illustrator?


Чтобы узнать, как создать аналоговые часы в Adobe Illustrator, выполните следующие действия и просмотрите обучающее видео.

Шаг 1.

Создайте новый документ квадратной формы:

Шаг 2.

Установите фон

Выберите Rectangle Tool (M) и нарисуйте прямоугольник того же размера, что и ваша монтажная область/документ. Заполните квадрат (цвет, используемый в уроке: #79c7cb).

На панели слоев измените имя слоя на «фон» и заблокируйте слой.

Шаг 3.

Нарисуйте часы

Создайте новый слой. Выберите инструмент Ellipse Tool (L) и нарисуйте круг в середине монтажной области. Заполните круг (цвет, используемый в уроке: #94d1d7). Удалить штрих.

Совет: Чтобы выровнять круг по центру монтажной области, используйте Selection Tool (V) . Выберите весь квадрат и используйте функции выравнивания (горизонтальное выравнивание по центру и вертикальное выравнивание по центру). Чтобы открыть Выровнять панель перейти к Окно->Выровнять .

Шаг 4 (необязательно).

Нарисуйте тень

Используйте Pen Tool (P) и нарисуйте форму ниже. Заполните форму (цвет, используемый в уроке: #63a49f).

Переупорядочить пути:

Шаг 5.

Создайте циферблат

Создайте новый слой. Выберите инструмент Ellipse Tool (L) и нарисуйте круг в середине монтажной области. Заполните круг (цвет, используемый в уроке: #ffffff). Выровняйте круг по центру. Заблокируйте слой.

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

Создать новый слой. Вместо числа 12 на циферблате (выровняйте число по горизонтали по центру) введите XX. Выберите шрифт и размер шрифта вашего номера (шрифт, используемый в руководстве: Arial Rounded MT Bold, 36px).

Перейти к Окно->Символы . Выделите текст и нажмите кнопку New Symbol на панели Symbols .

Используйте Pen Tool (P) , чтобы сделать нулевую точку в центре (нажмите ESC, чтобы сделать только одну точку). Выберите символ и нулевую точку. Перейти к Объект и сгруппируйте их вместе.

Перейти к Эффект > Исказить и трансформировать > Преобразовать…

Установить угол 30°, ввести 11 копий и установить точку регистрации внизу:

Перейти к Объект

70 Расширить а затем дважды выберите

Разгруппировать . Удалите нулевые точки.

Выбрать все символы. Щелкните правой кнопкой мыши и выберите «Сбросить трансформацию ».

Щелкните правой кнопкой мыши и выберите Разорвать связь с символом . Разгруппируйте и введите числа.

Посмотрите также обучающее видео:

Наслаждайтесь!

Читайте также:

Как нарисовать бумажный самолетик в Adobe Illustrator?

Как нарисовать пасхальные яйца в Adobe Illustrator?

Нравится Загрузка…

Как создать векторную графику часов в Illustrator

Этот пост был впервые опубликован в 2010 году
Приведенные советы и приемы могут быть устаревшими.

Если вы хотите развить свои навыки работы с иллюстратором, вот вам учебник! Следуйте этому пошаговому руководству, чтобы увидеть, как добавление слоя за слоем векторных фигур, а также ряда градиентов и пятна текстуры может быстро создать великолепно выглядящую графику часов в стиле значков.

Неограниченное количество загрузок из более чем 2 000 000 кистей, шрифтов, графики и шаблонов дизайна
Объявление

Основным элементом, который мы добавим к этому дизайну, помимо набора кругов для создания общей формы, является ряд градиентных заливок. Эти градиенты — это то, что действительно добавляет дополнительное ощущение глубины, а в сочетании с одной или двумя дополнительными тенями дает довольно реалистичную графику.

Откройте Adobe Illustrator и создайте новый документ. Я лично использую цветовой режим CMYK просто потому, что мне проще управлять уровнем черного в каждом цвете, но вы, безусловно, можете использовать RGB для более широкого спектра цветов. Нарисуйте круг на артборде. Удерживая нажатой клавишу Shift, создайте идеальный круг и залейте его наклонным линейным градиентом от темно-синего до светло-синего цвета.

Нажмите CMD+C, чтобы скопировать фигуру, и CMD+B, чтобы вставить ее позади. Возьмите угол Инструментом «Выделение» и немного увеличьте масштаб. Не забудьте удерживать Shift, чтобы форма оставалась пропорциональной. Настройте самый светлый образец градиента на более светлый оттенок синего.

Скопируйте (CMD+C) внешнюю форму и нажмите CMD+F, чтобы вставить ее впереди. Уменьшите фигуру, удерживая клавиши Shift и Alt. Отрегулируйте угол градиента так, чтобы он текла по диагонали в противоположном направлении.

Нажмите CMD+F еще раз, чтобы вставить еще одну копию большого внешнего круга поверх стека. Залейте эту фигуру черным цветом, затем перейдите в Эффект > Текстура > Зерно.

Измените режим наложения круга с зернистостью на Умножение, затем уменьшите непрозрачность примерно до 15%.

Эта зернистость добавляет текстуру корпусу часов, что помогает добавить нотку реализма. Ведь в реальной жизни не все так гладко.

Вставьте другой круг и уменьшите его, чтобы он соответствовал циферблату часов. Замените заливку радиальным градиентом от серого к белому. Отрегулируйте ползунки, чтобы градиент не сползал слишком далеко к центру.

В другом месте документа нарисуйте небольшой тонкий прямоугольник. Залейте прямоугольник серым цветом, затем продублируйте его, удерживая клавишу Alt и перетаскивая фигуру вниз. Удерживайте клавишу Shift, чтобы ось оставалась ограниченной по вертикали.

Эти две формы будут основой метрики циферблата, но нам нужно точно их продублировать, чтобы заполнить оставшееся пространство. Сгруппируйте фигуры вместе (CMD+G), затем выберите Объект > Трансформировать > Трансформировать каждую. 360 (градусы в круге) разделить на 12 (цифры на циферблате) равно 30 градусам каждое, поэтому введите 30 в поле Угол. Нажмите «Копировать», чтобы инициировать первое преобразование, затем просто нажмите CMD+D, чтобы повторить действие.

Когда у вас есть полный набор показателей, сгруппируйте все фигуры вместе и расположите их на циферблате.

Скопируйте и вставьте еще один дубликат циферблата, затем уменьшите его до центра. Отрегулируйте градиент, чтобы течь вертикально, от среднего до светло-серого.

Возьмите инструмент Прямоугольник со скругленными углами и нарисуйте несколько пальцев разного размера. Заполните каждую из них соответствующим цветом, например, темно-серым для «маленькой стрелки», светло-серым для «большой стрелки» и красным для счетчика секунд.

Поверните и расположите эти фигуры на циферблате. Используйте сочетание клавиш CMD+[ чтобы изменить порядок наложения, чтобы они отображались под центральным кругом.

Выберите все три круга и продублируйте их, нажав Alt и клавишу курсора вниз. Измените заливку всех трех фигур на черный и измените режим наложения на Умножение с 20%. Это создает впечатление небольшой тени под пальцами.

Используйте инструмент «Текст», чтобы заклеймить часы. Помните сочетание клавиш CMD+[ чтобы отрегулировать порядок объектов, чтобы текст был ниже часового пальца.

Скопируйте и вставьте еще одну копию циферблата и залейте черным цветом. Используйте инструмент «Эллипс», чтобы нарисовать временную фигуру на черном круге. Цель состоит в том, чтобы получить красивую плавную кривую, пересекающую черный объект. Выделив обе фигуры, используйте параметр Minus Front в палитре Pathfinder, чтобы вырезать фигуру. Измените на Multiply всего на 3%, чтобы сформировать тонкую тень.

Начнем с фона. Возьмите инструмент «Прямоугольник» и нарисуйте большой квадрат, затем залейте его диагональным голубым градиентом. Используйте сочетание клавиш CMD+Shift+[ чтобы отправить объект на задний план.

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