В этом уроке мы узнаем как можно быстро нарисовать секундомер (или часы) в Illustrator"е. Урок будет особенно полезным для тех, кто рисует для .
Шаг 1. Установки
Создадим новый документ размером 600х600 пикселей. Убедитесь, что галочка выравнивания по сетке отключена. Затем включим сетку (View > Show Grid) и сделаем привязку к ней (View > Snap to Grid). В настройках выставим размер ячейки сетки в 5 пикселей (Edit > Preferences > Guides > Grid) и проставим нужные нам единицы измерения (Edit > Preferences > Unit > General).
Шаг 2. Рисуем форму
Создадим круг (L) радиусом 140 пикселей и зальем его градиентом, как показано на рисунке. Не снимая выделения перейдем на панель Вид (Appearance). Добавим обводку в 4pt и применим к ней: Обводка - внутри, прозрачность 30% Soft light. Все операции делаются в окне Вид, через нажатие на слово Обводка (Stroke) и в её свойствах.
Продублируем наш круг (Ctrl+C -> Ctrl+F). Создадим эллипс 190 x 110px без обводки и для удобства зальем его черным. Поместим его, как показано на рисунке (нижний край на одну клеточку ниже центра окружности), выделим оба объекта и через окно Обработка контуров (Pathfinder) вырежем верхний из нижнего.
Выделим получившийся объект и в панели Вид удалим его обводки. Далее зальем его черным и выберем прозрачность 20%, Soft light.
Шаг 3. Рисуем циферблат
Создадим окружность радиусом 120px в центре нашей формы и зальем градиентом, как показано на рисунке. В панели вид применим к заливке фильтр Внутреннее свечение (Inner Glow) со значениями, показанными на рисунке. Добавим обводку в 2pt с цветами R=165 G=175 B=178 и применим к ней эффект Тень (Drop Shadow) с указанными ниже параметрами. Добавим еще одну обводку толщиной 1pt и с цветами R=135 G=145 B=148.
Продублируем обводку через ту же панель Вид и зададим ей толщину 2pt. Повторим действие, задав толщину 1pt. Инструментом Перо (Р) налисуем линию высотой в 5 пикселей и толщиной обводки в 2pt. Зададим обводке цвет R=176 G=184 B=186. Поместим линии на "60 секунд" нашего будущего циверблата. Продублируем линию и поместим её на "30 секунд". Сгруппируем (Ctrl+G) и применим трансформацию, как показано на рисунке (Ctrl+Alt+Shift+D)
Удилиним линию на "60 секндах" до 7px и зададим ей цвет обводки R=135 G=145 B=148. Продублируем её на "30 секунд", сгруппируем и трансформируем, как показано на рисунке.
Шаг 4. Рисуем стрелку
Нарисуем прямоугольник (М) размером 4 x 52px точно под отметкой "60 секунд". Инструментом Частичное выделение (А) сдвинем верхние точки на один пиксель к центру. Нарисуем окружность радиусом радиусом 1 пиксель и через панель Обработка контуров объединим стрелку с окружностью. Зальем результат цветом R=50 G=50 B=50. Через панель Вид создадим в объекте новую заливку, поставим ей белый цвет. Выставим для неё режим смешивания Soft light. Через меню Эффекты уменьшим её на 1px (Effect > Path > Offset Path)
Вновь выставим сетку в 5 пикселей. Нарисуем окружность радиусом 10 пикселей и зальем градиентом, как показано на рисунке. Добавим еще одну заливку с цветом R=241 G=236 B=232. Сместим её на -3 пикселя. Сгруппируем стрелку с получившейся "заклепкой" (Ctrl+G) и добавим тень новому объекту.
При желании стрелку можно повернуть на нужное нам время инструментом Поворот (R)
Шаг 5. Рисуем стекло
Нарисуем окружность радиусом 120 пикселей и накладем на неё белый исчезающий градиент и поместите его, как показано на рисунке. (Примечание: можно использовать непрозрачный градиент с режимом смешивание Умножение. В таком случае видимый край градиента должен быть отличен от белого цвета. это может быть особенно важно для стоков) . Задайте прозрачность заливки 65% и сместите контур на -3 пикселя.
Добавьте внутреннюю обводку толщиной 1pt. Добавьте для неё режим смешивания Soft light и прозрачность 30%. Добавьте вторую обводку. В єтот раз выставьте ей толщину 3pt, прозрачность 20% и режим смешивания Soft light.
Добавьте еще одну заливку, теперь уже линейную, от черного к белому и с прозрачностью 15%.
Нарисуем эллипс (L) размером 70 x 20px. Залейте черным цветом и выставьте прозрачность 3%. Примените эффект Дуга (Arc), как показано на рисунке. Продублируйте эллипс, залейте белым, выставьте прозрачность 20% и измените дугу на 50%
Шаг 6. Рисуем детали
Создадим окружность радиусом 30 пикселей без заливки. Зададим ей обводку в 3pt. Переведем обводку в заливку Object > Path > Outline Stroke и зальем градиентом, как показано на рисунке.
Добавим к объекту вторую заливку, сместив её на -1 пиксель, режим смешивания Soft light. Добавим еще одну заливку и рассположим, как показано ниже.
Добавим четвертую заливку со значениями, как на рисунке и прозрачностью 70%. Теперь добавим день для всего объекта (выделим его в самой верхней строчке панели Вид).
Нарисуем прямоугольник (М) 10 x 20px и зальем его градиентом, как показано ниже. Применим эффект Закругление углов (Effect > Stylize > Rounded Corners) со значением 3px и развернем вид объекта (Object > Expand Appearance). Добавим радиальную заливку с прозрачностью 70%.
Снова выставим сетку в 1 пиксель. Нарисуем овал 8х2 пикселя, зальем белым с прозрачностью Soft light. Добавим два черных прямоугольника 10х4 и 10х2 с режимом смешивания Soft light и прозрачностями 15% и 30% соответственно.
Выделим кольцо с держателем и переместим на задний план (Shift + CTRL + [). Нарисуем прямоугольник 10х1, зальем его цветом R=195 G=200 B=205 и поместим на передний план (Shift + CTRL + ])
Нарисуем квадрат со стороной 10 пикселей. Зальем его градиентом и применим последовательно эффекты Закругление углов (1 пиксель) и Дуга. Затем развернем вид.
Уберем привязку к сетке (Ctrl + Shift + "). Дважды продублируем нашу фигуру, поднимем вторую копию на 1 пиксель. Вычтем между собой эти две копии, к полученному результату применим прозрачность 30% и зальем черным. Повторим операцию, только теперь поднимем одну копию на 3 пикселя и прозрачность поставим 15%
Вернем привязку к сетке (Ctrl + Shift + "). Нарисуем прямоугольник 20 x 10px , скруглим ему углы на 3 пикселя и зальем градиентом. Выровняем в предыдущей фигурой. Снимем привязку и повторим фокус с вырезанием копий (1 раз).
Вновь выделим скругленный контур, смесим его на -1 пиксель (Object > Path > Offset Path). Продублируем результат (CTRL + C > CTRL + F) и опустим на 1 пиксель. Вычтем между собой эти два объекта. Результат зальем градиентом и поставим режим Soft light. Выделим снова скругленный контур, сделаем 2 его копии, опустим одну на 1 пиксель вниз и вычетм между собой. Результат зальем черным с прозрачностью 30% и режимом Soft light.
Сгруппируем полученную кнопку и повернем её на 45 градусов. Добавим тень с параметрами, как на рисунке.
Разместим внупку на секундомере. Продублируем её и отразим горизонтально. Разместим вторую кнопку. У второй кнопки изменим немного тень. Почти готово.
Добавим на задний план фон с цветом R=56 G=147 B=160. Выделим все наши объекты и преобразуем линии в заливки, а также развернем все объекты, к которым применяли эффекты Object > Expand Appearance, Object > Path > Outline Stroke. Выделим Контур нашего секундомера, продублируем (CTRL + C > CTRL + F), зальем цветом. Добавим к контуру обводку 1pt с прозрачностью 25% и режимом Soft light. Добавим еще одну обводку 3pt с прозрачностью 15%. Затем применим к контуру несколько раз эффект тени. Расположим её позади секундомера.
Наш секундомер готов. Используя различные вариации цветов, можно получить другие очень интересные варианты.
В новогоднюю ночь все мы, затаив дыхание, ждём боя курантов и наступления Нового года. Часы являются одним из главных символов праздника, и не зря их рисуют на новогодних поздравительных открытках и плакатах. Возьмите в руки новогодний номер любого журнала, и там с высокой степенью вероятности вы найдёте красивые часы со стрелками, замершими на без малого полночь. В этой статье мы хотим рассказать о том, как правильно нарисовать новогодние часы. И если вы решили сделать новогодний плакат с часами, либо нарисовать красивую открытку с тем, чтобы подарить ее близкому человеку — то этот урок рисования именно для вас.
Сначала можно попробовать самый простой способ. Для этого следует начертить круг с помощью циркуля. Затем на них нужно нарисовать аккуратные цифры. На их поверхности желательно создать новогодний рисунок. Красиво будет выглядеть Дед Мороз, сидящий на месяце.
Когда все готово, цифры желательно украсить одним цветом, а поверхность – другими. Замечательные новогодние часы готовы. Рисунок можно вырезать или же оставить в таком виде.
По другому способу можно создать новогодние часы с кукушкой. Раньше такой элемент был в каждом доме, хотя и сейчас встречается у некоторых. Если же нет таких, то их легко можно нарисовать.
Сначала следует нарисовать небольшой деревенский домик, на котором размещается круглый циферблат. Вверху нужно смастерить кукушку и небольшое местечко для нее. После этого свою работу необходимо украсить любыми выбранными цветами красок.
По этому способу получаются необычные новогодние часы. Они похожи на домашние, только имеют некоторые дополнения. Сначала необходимо нарисовать круг, используя циркуль. Затем по краям всей поверхности следует нарисовать полукруги. В каждом лепестке нужно поместить цифры, и отделить их друг от друга.
После этого необходимо нарисовать карандашом стрелочки, которые тоже могут быть необычной формы. Остается только придать изделию цвет, и оно готово. Украсить их можно любыми деталями, все зависит от желания.
Создать часы можно не только в виде круга, но и в форме квадрата. Украсив их необычной отделкой, они вполне могут стать новогодними. В первую очередь требуется создать ровный квадрат. По краям желательно оставить место, которое будет полем изделия. Около него будут размещаться цифры. Причем они могут быть как арабскими, так и римскими.
Затем потребуются стандартные стрелочки. Желательно, чтобы они показывали время ближе к двенадцати. Получившийся рисунок рекомендуется украсить любыми красками.
По этому мастер-классу можно сделать еще один праздничный рисунок, так как вокруг них будет располагаться новогодний венок. Сначала нужно нарисовать круглые часы, украсив их стрелками и цифрами. По кругу необходимо пририсовать венок их веток ели. Затем для его украшения потребуются елочные игрушки.
Когда рисунок готов, желательно преобразить его с помощью красок разных цветов. Получились праздничные часы, которые можно повесить на стену. Из него прекрасно получится новогодняя открытка или плакат. Не менее красивой будет упаковка для подарков. Можно сделать красивый новогодний будильник.
Видео мастер-класс по рисованию часов
Часы могут быть сделаны разными способами. Их украшают разными орнаментами и рельефными фигурами. Красиво будут выглядеть снежинки, звезды, месяц, елка, их можно вырезать и повесить на стену или на елку. По время работы следует делать линии плавными и аккуратными. Занятие по созданию часов очень интересное, и поэтому оно отлично подойдет для детей и взрослых.
Добрый день! Сегодня настало время урока рисования, в котором мы расскажем вам о том, как нарисовать часы! Часы, как вы знаете, бывают настенные, наручные, гигантские — установленные на архитектурных строениях, и, конечно же, мягкие. Увы, рассматривать творчество гениального Сальвадора Дали мы будем не сегодня, а часы, которые мы нарисуем, будут вполне реалистичные. Давайте начнём урок рисования и узнаем, !
Вполне возможно, кто-то посчитает настенные часы вещью из прошлого, ведь сейчас часы есть у каждого на сотовом , и других устройствах. Однако в каждом интерьер станет намного уютнее и приятнее, если на стене будут красоваться хорошо подобранные настенные часы. Собственно, начинаем рисовать!
Сначала разметим наше рабочее пространство вот такими перпендикулярными (то есть перекрещивающимися под прямым углом) линиями. Без линейки конечно же это нарисовать очень круто, но если вы не совсем уверены, используйте линейку.
Затем нарисуем вот такой круг. Можно с циркулем или каким-либо круглым предметом, но лучше всего, конечно же, попробовать нарисовать от руки.
Поверх круга из предыдущего шага нарисуем ещё один, несколько больший в диаметре.
Пользуясь разметкой из первого шага, нанесём штрихи каждого часа по всей окружность циферблата. Первыми рисуем 12, 3, 6 и 9 часов, между ними на равном расстоянии намечаем остальные.
Совсем маленькими штрихами проставляем секундные деления. Следите за расстоянием, оно должно быть строго одинаковым между всеми делениями.
Отлично, а теперь проставим числа около отметки каждого часа. Старайтесь, чтобы одинаковые цифры рисовались одинаково на каждом часе.
Ставим ровные стрелочки — в нашем случае они пересекаются и показывают семь часов. Вы можете выставить любое время, главное, правильно передайте размеры и форму стрелок
В этом уроке мы будем создавать в Adobe Illustrator набор иконок для Apple Watch. Эти иконки по умолчанию находятся на рабочем столе оригинальных Apple Watch. Для их создания мы будем использовать основные фигуры и эффекты деформации, в совокупности с более сложными методами. Итак, начнем!
Иконки для Apple Watch созданы в модном плоском стиле, подобно иконкам для iOS на последних моделях iPhone, iPad и других устройств Apple. Важно отметить, что все иконки круглой формы, поэтому нам понадобится сетка в форме круга в качестве основы для создания иконок. Вы можете скачать замечательный векторный шаблон иконки (в папке Source), чтобы упростить задачу.
Если вы хотите, чтобы ваши иконки были наиболее приближены к оригиналу вплоть до пикселя, вы можете найти изображение рабочего стола Apple Watch в поиске Google Images, и затем Файл > Поместить (File > Place) в ваш документ в качестве шаблона, чтобы рисовать иконки поверх оригинальных с соблюдением размеров и пропорций. Этот же урок не является строгой инструкцией по созданию точных копий иконок для Apple Watch.
Откройте один из шаблонов иконки (в этом уроке использован шаблон иконки 80 х 80 пикселей для часов 38 миллиметров). Перейдите в меню Просмотр > Спрятать сетку - View > Hide Grid (Ctrl + ") , чтобы скрыть сетку, если она отвелкает вам. Но убедитесь, что активированы «Быстрые» направляющие (Smart Guides) и Выравнивание (Snapping) – вы можете найти эти функции в том же меню.
Начнем создавать первую иконку «Часы». Создайте круг 4 х 4 пикселя и разместите его по центру шаблона, для этого дважды кликните по Инструменту Эллипс - Ellipse Tool (L) , чтобы появилось всплывающее окно с настройками. Затем перейдите на панель Выравнивание (Align) и установите Горизонтальное и Вертикальное выравнивание по центру монтажной области (align horizontally and vertically on the Artboard) . В качестве заливки установите оранжевый (#FF9506).
Используйте чтобы создать секундную стрелку наших часов размером 2 x 4 пикселей, с заливкой такого же оранжевого цвета. Разместите фигуру по центральной направляющей, как показано на рисунке:
Вы также можете Выровнять стрелку По ключевому объекту (Align to the Key Object) , кликнув на кружок, удерживая клавишу Alt.
Скопируйте стрелку (Ctrl + C > Ctrl + V) , сделайте ее короче и поверните под углом -60 градусов: для этого при выделенной стрелке нажмите правую кнопку мыши и в меню перейдите Трансформирование > Поворот (Transform > Rotate) . Затем разместите по направляющей, как показано ниже:
Теперь мы создадим минутную стрелку. Создайте черный прямоугольник 4 х 30 пикселей и используйте функцию , чтобы скруглить углы прямоугольника с помощью маленьких круглых маркеров – возьмите и скруглите углы по-максимуму (в данном случае радиус скругления 2 пикселя).
Поместите стрелку на соответствующее место вдоль направляющей (вы также можете сделать ее немного меньше, чтобы она вписалась во внутренний круг шаблона).
Создайте еще один прямоугольник 4 х 20 пикселей для часовой стрелки. Скруглите углы, поверните на 60 градусов и разместите на противоположной стороне от минутной стрелки.
Теперь создайте белый круг размером 80 х 80 пикселей, используя Инструмент Эллипс - Ellipse Tool (L) и поместите его снизу всех других объектов. Отлично! Наша первая иконка готова; перейдем к следующей.
Теперь создадим иконку «Mail», для этого надо будет нарисовать конверт. Для начала, создайте прямоугольник 50 х 33 пикселя любого цвета.
Далее используя Инструмент Многоугольник (Polygon Too l) с тремя сторонами (настроить количество сторон можно кликнув левой кнопкой мыши в любом месте холста при выбранном инструменте) или создайте треугольник с обводкой в 2 пункта. Затем перейдите в меню Объект > Разобрать (Object > Expand) , чтобы преобразовать треугольник в кривые: отметьте галочки Заливка (Fill), Обводка (Stroke).
Далее создайте еще один треугольник для верхней части конверта, скруглите нижний угол фигуры и также выберите в меню Объект > Разобрать (Object > Expand) . Сейчас вы можете стереть верхнюю и нижнюю линии треугольников с помощью Инструмента Ластик - Eraser Tool (Shift + E), так как они больше нам не нужны.
Удалите верхнюю часть нижнего треугольника с помощью Инструмента Ластик - Eraser Tool (Shift + E) , затем выделите обе фигуры и нажмите иконку Соединение (Unite) на панели . Далее сделайте копию основы конверта (Ctrl + C > Ctrl + F) , выберите обе фигуры: прямоугольник и верхнюю фигуру, затем нажмите на иконку Пересечение (Intersect) на панели Обработка контуров (Pathfinder) , чтобы обрезать ненужные части, выходящие за границу конверта.
Выделите прямоугольник и полоски снова и нажмите иконку Минус верхний (Minus Front)
на панели Цветом заливки конверта выберите белый и создайте круглую форму, которая будет основой иконки. Залейте фигуру линейным градиентом (Инструмент Градиент - Gradient Tool (G), Тип (Type): Линейный (Linear) от темно-голубого (#2066F0) сверху до светло-голубого (#1DD4FD) снизу.
Нашей следующей иконкой будет приложение «Музыка», которая состоит из одного элемента: музыкальной ноты. Начните создание ноты с прямоугольника 27 х 11 пикселей. Далее с помощью выделите все узлы с левой стороны прямоугольника и сместите их вниз, в итоге вы получите скошенный прямоугольник.
Используйте Инструмент Прямоугольник - Rectangle Tool (M) , чтобы создать еще два прямоугольника: 1) 3 х 20 пикселей; 2) 14 х 11 пикселей – это будет «ножка» ноты.
Далее с помощью Инструмента Прямое выделение - Direct Selection Tool (А) выделите три опорные точки нижней фигуры, как показано на рисунке и сгруглите их. Затем выделите обе фигуры и на панели Обработка контуров (Pathfinder) кликните иконку Соединение (Unite) , затем скруглите внутренний угол, соединяющий фигуры, используя функцию
Скопируйте «ножку» ноты и разместите ее, как показано ниже. Затем скруглите углы верхнего прямоугольника, чтобы сделать фигуру в целом более сглаженной. Завершите создание иконки, сделав круглую основу и залив ее линейным градиентом (Инструмент Градиент - Gradient Tool (G), Тип (Type): Линейный (Linear) от оранжевого (#FA5D3B) вверху до розового (#FF2968) внизу.
Теперь переходим к иконкам, связанным со временем, которые созданы в едином стиле. Начнем с создания круга размером 48 х 48 пикселей, и еще одного, меньшего круга внутри. Далее используйте функцию Минус верхний (Minus Front) на панели Обработка контуров (Pathfinder), чтобы получилось кольцо.
Создайте внутри кольца овал и две пересекающиеся линии, выровненные по центру.
Затем добавьте линию в верхней части фигуры и изогните ее с помощью функции Эффект > Деформация > Арка (Effects > Warp > Arch) и примените следующие настройки:
- выберите пункт По горизонтали (Horizontal)
- Изгиб (Bend): -35%
Раздел Искажение
- По вертикали (Vertical): 0%
Создайте еще одну изогнутую линию для нижней части нашей иконки, затем выделите все части глобуса и в меню выберите Объект > Разобрать (Object > Expand) . Затем создайте круглую основу иконки и залейте ее градиентом от темно-оранжевого (#ff7632) внизу к светло-оранжевому (#ff9408) вверху. Добавьте еще один круг в размер глобуса оранжевого цвета (#e45221) и разместите его ниже самого глобуса, чтобы придать иконке больше контраста.
Для следующей иконки – Секундомер – мы используем основу от предыдущей иконки. Создайте белый кружок 8 х 8 пикселей в центр, затем создайте прямоугольник 2 х 25 пикселей (он будет служить секундной стрелкой) и выровняйте его по центру.
Используйте Инструмент Прямоугольник - Rectangle Tool (M), чтобы добавить мелкие детали нашему «Секундомеру» . Далее скруглите углы кнопки секундомера с помощью функции Динамические углы (Live Corners) , установив значение Радиус скругления (Corner radius) в 1,4 пикселя.
Теперь будем делать иконку «Таймер» - используем ту же основу, что и для секундомера.
Создайте прямоугольник размером 2,5 х 13 пикселей и разместите его в верхней центральной части кольца. Затем возьмите Инструмент Многоугольник (Polygon Tool)
с количеством сторон (Sides) 3 или используйте Инструмент Перо - Pen Tool (P)
, чтобы нарисовать треугольник. Разместите его так, как показано на рисунке:
Выделите основное белое кольцо и треугольник и затем кликните по иконке Минус верхний (Minus Front) на панели Обработка контуров (Pathfinder) , чтобы вырезать левую часть кольца. Далее добавьте маленький кружок 6 х 6 пикселей по центру иконки.
Теперь поверните кружок на 45 градусов, далее с помощью Инструмента Прямое выделение - Direct Selection Tool (А) выделите левую верхнюю точку и потяните его влево-вверх (см. рисунок). Затем при выделенной точке нажмите иконку Преобразовать выделенные опорные точки к точкам преломления (Convert selected anchor points to corner) на верней панели настроек. Таким образом мы получили стрелку таймера.
Наша последняя иконка, связанная со временем, - «Будильник». Она имеет такую же основу, как и предыдущие, так что основу мы оставляем. Стрелки часов – это два прямоугольника - создайте их с помощью Инструмента Прямоугольник - Rectangle Tool (M).
Теперь сделаем верхнюю часть будильника. Создайте круг с помощью Инструмента Эллипс - Ellipse Tool (L)
и затем разделите его на две равные части, выбрав Инструмент Ножницы - Scissors Tool (C)
и кликнув по средней левой и правой точке круга. Поверните нижнюю часть на 180 градусов (проще всего повернуть фигуру подведя курсор к крайним точкам до появления значка поворота – затем повернуть фигуру). Когда закончите, разместите части наверху будильника и добавьте маленькие «ножки» в нижней части, чтобы завершить создание иконки.
Иконка «Карты» довольно простая и не содержит много элементов. Итак, создайте круг 40 х 40 пикселей в центре, залейте его голубым цветом (#087eff). Затем создайте треугольник (как было описано в предыдущих шагах) размером 17 х 25 пикселей.
Создайте бежевую (#e5decb) основу иконки. Затем перейдите в меню Объект > Контур > Добавить опорные точки (Object > Path > Add Anchor Points) и после этого выделите среднюю точку в основании треугольника, используя Инструмент Прямое выделение - Direct Selection Tool (А) и сдвиньте ее вверх, как вы можете видеть на рисунке ниже:
Создайте широкую вертикальную полосу, пересекающую всю иконку, размером 26 х 83,5 пикселей, скопируйте эту фигуру, разместите перпендикулярно первой, уменьшите наполовину, затем предварительно выделив обе фигуры, кликните на иконку Соединение (Unite) на панели Обработка контуров (Pathfinder). Разместите полученную фигуру под голубым кругом. Затем выделите эту фигуру вместе с основой иконки и нажмите иконку Разделение (Divide). Таким образом у вас получится 3 разные части основы. Разгруппируйте фигуры, кликнув правой кнопкой мыши и выбрав пункт Разгруппировать (Ungroup)
Залейте части основы зеленым (#78c73d) и светло-розовым (#fbc7d2) цветами.
Теперь приступим к созданию иконки «Погода» . Залейте основу линейным градиентом от темно-синего (#2066f0) вверху до светло-голубого (#1dd4fd) внизу. В левой части создайте кружок 27 х 27 пикселей и залейте его желтым линейным градиентом от цвета #ffc505 к цвету #fee403. Этот кружок будет «солнцем». Далее создаем облака: сделайте два кружка: один диаметром 25,5 пикселей и второй диаметром 21 пиксель. Разместите круги, как показано на рисунке.
Создайте прямоугольник 43 х 16 пикселей и скруглите углы, задав значение Радиус скругления (Corner radius) 8 пикселей. Выровняйте прямоугольник с кругами, как вы видите на рисунке. Затем выделите оба круга и прямоугольник и кликните на иконку Соединение (Unite) на панели Обработка контуров (Pathfinder) – вот у вас и получилось отличное гладкое облако.
Залейте облако белым цветом и сделайте его полупрозрачным, уменьшив значение Непрозрачность (Opacity) до 90% на панели Оформление (Appearance).
Итак, теперь будем делать иконку «Камера». Создайте основу - круг с заливкой линейным градиентом от темно-серого (#8e9196) внизу до светло-серого (#dadcdd) вверху. Затем создайте прямоугольник примерно 62 х 41 пикселей, залейте его серым (#3c3c3c) цветом и скруглите углы. Создайте еще один прямоугольник 30 x 17 пикселей, разместите его в правом верхней части от первого (см. рисунок), затем скруглите его левый верхний угол с Радиусом скругления (Corner radius) 7 пикселей. Далее нажмите иконку Соединение (Unite) на панели Обработка контуров (Pathfinder) и потом скруглите угол между двумя фигурами.
Создайте полосу в верхней части камеры, как показано на рисунке и дальше используйте функцию Минус верхний (Minus Front) , чтобы вырезать эту часть из фигуры, образующей камеру.
Создайте кнопку из прямоугольника 9 х 4 пикселя со скругленными верхними углами и разместите ее по центру шаблона. Далее используйте Инструмент Перо - Pen Tool (P), чтобы создать стрелку, указывающую на кнопку. Установите толщину обводки (Stroke Weight) в 4 пункта и сделайте концы (cap) и углы (corner) обводки скругленными на панели Обводка (Stroke) панель можно вызвать, кликнув на надпись Обводка (Stroke) сверху.
Последние детали: создайте ярко-желтый (#fac81b) кружок 6 х 6 пикселей. Затем создайте круг 37,5 х 37,5 пикселей без заливки, с толщиной обводки (Stroke Weight) в 4 пункта. Разместите маленький и большой круги, как показано на рисунке:
Выделите большой круг и перейдите в меню Объект > Разобрать (Object > Expand), преобразовав его в кольцо. Затем выделите кольцо и основу камеры и нажмите Минус верхний (Minus Front) на панели Обработка контуров (Pathfinder) . Далее выделите все серые части камеры и объедините их в одну фигуру, нажав Ctrl + 8.
В заключение используйте Инструмент Создание фигур - Shape Builder Tool (Shift + M), зажмите клавишу Alt и удалите ненужные части камеры, которые выступают за основу иконки.
Теперь делаем трубку для иконки «Телефон» . Создайте прямоугольник 8 х 40 пикселей и примените Эффект > Деформация > Арка (Effects > Warp > Arch) с такими настройками:
- выберите пункт По вертикали (Vertical)
- Изгиб (Bend): 27%
Раздел Искажение
- По горизонтали (Horizontal): 0%
- По вертикали (Vertical): 12%
Затем создайте два прямоугольника 17 х 20 пикселей в верхней и нижнее частях трубки, скруглите углы. Далее выделите все части трубки и нажмите иконку Соединение (Unite) на панели Обработка контуров (Pathfinder).
Сгладьте левую часть трубки, удалив ненужные опорные точки, используя Инструмент Перо- Delete Anchor Point Tool (-) и затем сгладьте внутренние углы используя функцию Динамические углы (Live Corners). Поверните трубку на 45 градусов и разместите поверх основы, залитой линейным градиентом от светло-зеленого (#86fb71) к темно-зеленому (#0fd51c).
Далее приступаем к иконке «Сообщение» . Основу оставляем, как и в предыдущей иконке. Создайте белый овал размером 48 х 40 пикселей. Добавьте маленький треугольник в нижней части белой фигуры, чтобы получилось диалоговое облачко. Нижний угол треугольника немного скруглите, потом немного изогните треугольник, используя Эффект > Деформация > Арка (Effects > Warp > Arch):
- выберите пункт По вертикали (Vertical):
- Изгиб (Bend): -36%
Вот так выглядит готовая иконка.
Следующая иконка «Пульт» , она очень проста и состоит из одного элемента. Для начала залейте основу линейным градиентом от темно-синего #2066f0 внизу к светло-голубому #1dd4fd вверху. Добавьте белую обводку толщиной 5,3 пункта и в настройках обводки отметьте Обводка внутри линии (Align Stroke to Inside). Создайте белый треугольник 30 х 30 пикселей и разместите его по центру иконки.
Наконец, скруглите углы треугольника с Радиусом скругления (Corner radius) 2.5 . Отлично! Иконка готова, идем дальше.
Иконка «Тренировка»
представляет собой стилизованный силуэт бегущего человека.
Создайте яркую основу иконки с заливкой линейным градиентом от желто-зеленого (#c2ec38) вверху до зеленого (#a3fc3f) внизу.
Возьмите Инструмент Перо - Pen Tool (P) и создайте отдельные линии для рук, ног и тела с толщиной обводки (Stroke Weight) в 3 пункта и в настройках обводки выставьте концы (cap) и углы (corner) на скругленные. Увеличьте толщину обводки «тела» до 6 пунктов. Создайте «голову» - круг 9 х 9 пикселей.
Выделите все линии и перейдите в меню Объект > Разобрать (Object > Expand), затем залейте все фигуры черным цветом.
Иконка «Настройки» представляет собой шестеренку. Создайте основу шестерни – кольцо 48 х 48 пикселей. Добавьте три линии с толщиной обводки (Stroke Weight) 3 пункта, соединяющиеся в центре шаблона.
Теперь нужно добавить зубцы. Создайте прямоугольник 5 х 9 пикселей и чуть уменьшите его верхнюю часть (это можно сделать подвинув точки с помощью инструмента Прямое выделение - Direct Selection Tool (А)
, затем скруглите верхние углы с помощью функции Динамические углы (Live Corners) с Радиусом скругления (Corner radius) 1,6.
Поместите зубцы в верхней и нижней частях основы (см. рисунок).
Теперь выделите обе фигуры, дважды клините по Инструменту Поворот - Rotate Tool (R)
, в открывшемся окне введите в поле Поворот – Угол (Rotate – Angle) 360/18, так Adobe Illustrator
автоматически высчитает значение для 18 фигур. Нажмите кнопку Копировать (Copy).
Нажмите Ctrl + D несколько раз, чтобы повторить предыдущее действие и добавить больше элементов. Затем выделите все зубцы, выберите цвет заливки белый и поверните все элементы на -10 градусов.
Наша следующая иконка – стилизованный цветок приложения «Фото» . Начните с создания прямоугольника 20 х 30 пикселей со скругленными углами (Радиус скругления (Corner radius) 10 пикселей). Скопируйте лепесток и поместите копию в нижнюю часть шаблона иконки, как показано на рисунке. Выделите оба лепестка и используя Инструмент Поворот - Rotate Tool (R) сделайте еще 8 копий лепестка, применив значение 360/8 для параметра Угол (Angle), нажмите кнопку Копировать (Copy).
Нажмите Ctrl + D еще несколько раз, пока не получите цветок с 8 лепестками. Переключите Режим наложения (Blending Mode) всех лепестков на Умножение (Multiply) и уменьшите Непрозрачность (Opacity) до 80%. Теперь применим каждому лепестку свой цвет, начиная с верхнего среднего и двигаясь по часовой стрелке: оранжевый (#fa9700), желтый (#f0e22c), зеленый (#b5d558), бирюзовый (#6ec19d), синий (#71b5e1), фиолетовый (#8f60c3), розовый (#d782a4) и красный (#ff2c2c).
Сделайте белую основу для цветка.
Иконка «Акции» представляет собой минималистичную диаграмму. Начнем с создания ярко-голубой (#02a6f5) вертикальной линии толщиной 3 пункта – для этого используйте Инструмент Отрезок линии - Line Segment Tool (\). Разместите линию в середине шаблона, на темной (#3f3f3f) основе иконки.
Далее создайте маленький голубой кружок в центре шаблона, примените к нему обводку (Stroke) темно-серого (#3f3f3f) толщиной в 1 пункт. Добавьте еще 4 линии с обводкой светло-серого (#555555) цвета толщиной 3 пункта по обеим сторонам иконки.
Выделите все линии, перейдите в меню Объект > Разобрать (Object > Expand) , затем удалите ненужные части линий, используя Инструмент Создание фигур - Shape Builder Tool (Shift + M).
Далее, используя Инструмент Перо - Pen Tool (P) , создайте зигзагообразную линию с толщиной обводки в 1,5 пункта. Перейдите в меню Объект > Разобрать (Object > Expand) и также удалите выступающие за край иконки линии.
Иконка «Активность»
более сложна, но и интересна. Она состоит из трех разноцветных кругов с градиентной заливкой.
Создайте два прямоугольника 6 х 7 пикселей: один розового (#ff2b91) цвета, другой – красного (#f1281e). Выделите оба прямоугольника и перейдите в меню Объект > Переход > Создать - Object > Blend > Make (Alt + Ctrl + В).
Вы можете откорректировать настройки в меню Объект > Переход > Параметры перехода (Object > Blend > Blend Options)
выбрав опцию Оптимальные цвета (Smooth Color)
, чтобы получить бесшовный переход. Перетяните полученный переход на палитру Кисти (Brush) и в окошке отметьте Объектная кисть (Art Brush)
, настройки оставьте по умолчанию.
Создайте темно-серый (#393839) круг в качестве основы иконки и поместите еще один круг внутри, применив нашу кисть, как Обводку (Stroke). Откорректируйте размер круга так, чтобы он ровно вписывался в размер шаблона иконки. Установите толщину обводки (Stroke Weight) 1 пункт, затем перейдите в меню Объект > Разобрать оформление (Object > Expand Appearance) , чтобы преобразовать обводку в объект. Поверните и/или отразите объект с помощью Инструмента Зеркальное отражение - Reflect Tool (O) горизонтально, если нужно, чтобы розовая сторона круга была справа, а красная – слева.
Затем создайте маленький розовый (#ff2b91) кружок и поместите его в центральную часть цветного кольца так, чтобы скрыть линию перехода цветов.
Теперь нам нужно добавить глубины, сделав тень. Как вы могли заметить, кольцо стало разделенным на части, после операции Разобрать оформление (Expand Appearance). Выберите верхний красный кусочек кольца, скопируйте и поместите на передний план (Ctrl + C > Ctrl + F) , залейте копию линейным градиентом от темно-красного (#a11b17) к белому и измените режим наложения на Умножение (Multiply) – это сделает белую часть градиента невидимой.
Используя ту же технику, создайте еще два цветных кольца внутри первой фигуры. Создайте Объектные кисти (Art Brush) из перехода от желтого (#d8ff06) к зеленому (#86e402), и из перехода от бирюзового (#06ffaa) к синему (#06e3f9). Также, как мы делали для первого кольца, сделайте тени для двух других.
Следующая иконка – «Passbook» , которая состоит из четырех маленьких пиктограмм: кредитная карта, самолет, видеокамера и чашка кофе. Эти пиктограммы минималистичны и могут быть сделаны с помощью панели Обработка контуров (Pathfinder) и функции Динамические углы (Live Corners) . Ниже вы можете видеть процесс создания пиктограмм пошагово: как комбинировать фигуры каждой пиктограммы.
Основа иконки состоит из четырех полос разных цветов: красного (#ff4e46), голубого (#439eca), зеленого (#3dca36) и оранжевого (#ffa02b), каждый высотой в 20 пикселей.
Создайте основной круг 80 х 80 пикселей и удалите ненужные части полос с помощью Инструмента Создание фигур - Shape Builder Tool (Shift + M)
, выделяя объекты и кликая по ненужным частям полос, при этом удерживая клавишу Alt.
Создайте круг 3,5 х 3,5 пикселя, пересекающий верхнюю часть оранжевой полосы, затем скопируйте кружок, удерживая клавиши Alt и Shift , и перетянув его вправо. Нажмите Ctrl + D несколько раз, чтобы сделать еще больше кружков. Затем выделите все копии и Образуйте составной контур - Make Compound Path (Ctrl + 8). Выделите кружки и оранжевую полосу и нажмите иконку Минус верхний (Minus Front) на панели Обработка контуров (Pathfinder).
В конце разместите на полосы пиктограммы, созданные ранее, и выровняйте их по центру иконки.
Последняя иконка – иконка «Календарь» . Она состоит из текста, написанного шрифтом Helvetica Neue и простой белой основы.
Отличная работа! Иконки рабочего стола Apple Watch готовы!
Выходишь на улицу – а там все несутся куда-то, опаздывают, едят на ходу фастфуд, болтают по телефону, при этом каждый считает, что контролирует свою жизнь. Глупцы! Если взять по чесноку, внезапно оказывается, что времени всегда нет, хотя Бог дал нам всем одинаково целых 24 часа в сутки. В этом уроке узнаем как рисовать часы, и проводить свое время с пользой! Часы – устройство для отмеривания продолжительности вашей жизни. Присутствует у каждого развитого существа, имеет встроенную функцию постоянно спешить, работа медленно, не работать. Всю жизнь среднестатистического гомо сапиенса можно определить по одному циферблату:
К тому же каким-то образом цена Ваших часов определяет, кто Вы и зачем родились. А еще такая безделушка делает вас приманкой глубокой ночью для гоп-стопа. Если у вас есть часы, то:
А вот теперь берите карандаш в руки, и приступайте к делу.
Шаг первый. Рисуем несколько неровных кругом один на другом, над ними несколько окружностей меньше. С этого всего выделяем четкий круг и делим его на четыре ровных сегмента.
Шаг второй. Вписываем внутри круга другой круг, меньшего размера, но с тем же центром. Добавим часам ручку.
Шаг третий. Проведем еще несколько таких же кругов. Внутри создаем циферблат с минутной и часовой стрелками. 
Шаг четвертый. Внутри всего этого нужно добавить еще один круг, в этот раз он будет служить для измерения пройденных секунд.
Шаг пятый. Это старинные карманные часики, а значит нарисуйте им римские цифры.
Попробуйте нарисовать еще такие гаджеты.
