Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создаем скетч-иконки погоды в Illustrator

15 февраля 2013 | Опубликовано в Уроки | 3 Комментариев »

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

 

Конечный результат

 

Шаг 1 

Для начала нам нужно создать задний план. Будем делать это при помощи панели  Appearance. Создаем новый документ с размерами 600 х 400 пикселей. Теперь в панель Swatches будем добавлять новые цвета. Устанавливаем цвета, которые показаны на рисунке ниже, и добавляем их.

Возьмите Rectangle Tool (M) и нарисуйте прямоугольник с размерами монтажной области. Заполните его градиентом, как показано на изображении ниже. 

Теперь перейдите к панели Appearance. Щелкните левой кнопкой мыши на значок в правом верхнем углу  и выберите "Add New Fill".

Теперь у вас есть две заливки. Выберите нижнюю и установите цвет, как показано на рисунке ниже. 

Затем выберите верхнюю заливку и нажмите маленький треугольник рядом с «Fill». Нажмите кнопку «Прозрачность» (Opacity) и в Blending Mode установите режим Multiply. 

Шаг 2

Создаем текстуру. Вы должны добавить новую заливку (Add New Fill). 

Затем для этой заливки выберите более темный цвет.

Переходим в Effect> Stylize> Scribble. Используйте следующие настройки. 

 После применения эффекта вы получите текстуру. Установите режим Blending Mode  - Soft Light и прозрачность Opacity 30%, чтобы сделать текстуру мягче. 

Шаг 3

Давайте в нашем бекграунде сделаем небольшие разрезы. Выбираем Ellipse Tool (L) и рисуем эллипс с радиальной градиентной заливкой.

Используя Free Transform Tool (E), сужаем эллипс. 

Затем рисуем линию, используя Line Segment Tool (\). Выделяем все объекты и переходим в панель Pathfinder. Наконец удаляем нижнюю часть эллипса. 

 

Размещаем верхнюю часть эллипса над над бэкграуендом. В панели Transparency устанавливаем Blending Mode  - Multiply. Далее создаем копии для второго разреза. 

Шаг 4

Наш фон готов. Дальше можно создать новый слой для создания листов бумаги. Рисуем квадрат с помощью Rectangle Tool (M). Заполняем его градиентом, как показано на изображении ниже.   Затем берем инструмент Convert Anchor Point Tool (Shift + C)  и немного перетаскиваем правый нижний угол, чтобы край получился немного закругленным. Выбираем наш лист бумаги и копируем его (ctrl+С). Мы сохраним его в памяти, чтобы в дальнейшем добавить к нему тени.

С помощью инструмента Direct Selection Tool (A) перемещаем нижние углы, как показывают красные стрелки на изображении ниже.  Теперь, нажав команду Ctrl+B, чтобы вставить сохраненную копию. Заливаем ее черным цветом. 

Шаг 5

Создаем тень. Выбираем форму, которую только-что заполнили черным и дважды кликаем по ней, чтобы использовать режим изоляции ( чтобы возвратиться можно дважды щелкнуть на пустом месте). Заполняем форму с помощью линейного градиента и устанавливаем Blending Mode — Multiply и непрозрачность 50%. 

Шаг 6

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

Шаг 7

Нарисуйте форму скрепки.  Для этого используйте Pen Tool (P). 

Шаг 8

Добавляем некоторые детали. Открываем панель Stroke и устанавливаем Weight — 8pt  и  Caps — Rounded . Выбираем цвет обводки — серый.

Используем горячие клавиши Command/ctrl + C и Command/ctrl  + F, чтобы на том же месте создать копию. Устанавливаем в Stroke Weight - 5pt и светлый цвет. 

Делаем третью копию. Устанавливаем в  Stroke обводку белого цвета, Weight — 3pt. 

Выделяем все объекты и переходим в Object> Expand.

Шаг 9

Выбираем белую форму скрепки, которая находится наверху скрепки. Нажимаем Ctrl + C и Ctrl + F, чтобы создать копию, и перемещаем ее немного вправо.

Выбираем две белые формы и используем команду Minus Front на панели  Pathfinder. Наконец группируем все формы.

 

Шаг 10

Наша скрепка готова. Мы можем разместить ее над листками бумаги. Теперь нужно удалить скрытые части скрепки. Выбираем скрепку и используем инструмент Knife. Нужно срезать верхнюю часть.

Выбираем часть скрепки, которая показана на изображении ниже. Нажимаем правой кнопкой и выбираем Arrange > Send to Back.

Теперь наша скрепка выглядит гораздо лучше. 

Также можно добавить тень. Для этого копируем скрепку. Заполняем копию черным цветом и устанавливаем непрозрачность - 15%. Теперь нужно отрезать верхнюю часть тени и подвинуть ее немного вправо. 

Шаг 11

Таким же способом создаем вторую скрепку.

Шаг 12 

Начинаем рисовать символы погоды. Используем несколько эллипсов Ellipses (L), чтобы получить форму облака. Объединяем все формы с помощью панели Pathfinder.

Шаг 13

Теперь нужно создать текстуру. Рисуем ее, используя инструмент Blob Brush (Shift + B).

Создаем три копии ( Command/Ctrl + C и Command/Ctrl + V). Устанавливаем режим наложения Blending Mode —  Multiply в панели Transparency.

Шаг 14

Помещаем форму облака над текстурой и выделяем все. Переходим в  Object > Clipping Mask > Make.

Шаг 15

Рисуем дождь. Создаем эллипс Ellipse (L). Затем берем инструмент Convert Anchor Point (Shift + C) и выделяем верхнюю точку эллипса. Получаем острый угол.

С помощью инструмента Direct Selection Tool (A) перемещаем эту точку вверх. У нас получилась форма капли. 

Шаг 16

Делаем несколько копий. Затем нужно создать составной контур. Выделяем все и переходим в Object> Compound Path> Make. Это необходимо для создания Clipping Mask в следующем шаге. 

Шаг 17

Теперь можно добавить текстуру дождя, как это делали в шаге 14, используя Clipping Mask (Ctrl + 7).

Размещаем на листке форму облака и дождя.

Шаг 18

Создаем форму солнца. Берем инструмент  Polygon Tool и щелкаем левой кнопкой мыши в любой части документа. Устанавливаем значение сторон — 3 и нажимаем кнопку ОК, чтобы создать треугольник. Затем вытягиваем его.

Рисуем эллипс, как показано на изображении ниже. 

Выбираем треугольник. Теперь берем инструмент Rotate ® и, удерживая Alt, нажимаем в центре эллипса. Устанавливаем угол поворота 45  градусов и нажимаем на кнопку  Копировать.

Затем нажмите Ctrl + D несколько раз, чтобы повторить это действие. В конце концов нужно выделить все и использовать  команду «Unite», чтобы слить все части в одну форму. 

 

Шаг 19

Теперь можно добавить текстуру солнца с помощью  Clipping Mask( как и в шаге 14).  Она должна быть заполнена оранжевым.

Поместите солнце на втором кусочке бумаги. 

Шаг 20

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

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

облако по-прежнему прозрачное. Выберите форму облака, как показано на изображении ниже. На этой форме основывается Clipping Mask.

Теперь заливаем эту форму голубым и наше облако уже не прозрачное.

Элементы погоды готовы.

Шаг 21

Создание текста. Нужно сделать новый слой. С помощью инструмента Type Tool (T) делаем надпись  "MONDAY". 

Нажимаем правой кнопкой мыши и выбираем  "Create Outlines" для преобразования текста в форму.

Рисуем под текстом прямоугольник. Копируем текст, нажав ctrl+ C. Выбираем все элементы и нажимаем  Minus Front на панели Pathfinder. Текст исчезает и мы получаем новую форму. Но все же в дальнейшем нас будет нужна надпись. Поэтому мы и скопировали ее.

Выделите прямоугольник и перейдите Effect> Stylize> Drop Shadow. Установите значения:

Теперь нажмите комбинацию Command/ctrl+ F и текст "MONDAY" появится на том же месте. Затем нужно создать составной контур. Выделяем текст и нажимаем  Object> Compound Path> Make. Теперь создаем Clipping Mask. Выделите все и перейдите в Object> Clipping Mask> Make.

Снова нажмите Ctrl + F, и вы получите еще одну копию текста. Установите непрозрачность 15% для этой копии. Сгруппируйте все (Ctrl + G). 

Шаг 22

Сделать текст «TUESDAY», используя те же методы.  

Шаг 23

Теперь добавляем температуру. Нарисуйте маленький эллипс (L). Затем перетащите этот эллипс в панель Brushes. Создайте Scatter Brush.

Используйте настройки, как показано на изображении ниже. 

Возьмите Pencil Tool (N) и нарисуйте зигзаг. Затем сузьте его. 

Затем выберите все эти пути и нажмите Scatter Brush, который мы создали. Не забудьте после этого выбрать  Object> Expand Appearance.

Мы получаем линии., которая состоит из маленьких кругов. Для этих форм можно установить непрозрачность 50%. Затем щелкните правой кнопкой мыши и выберите Transform> Rotate. Установите угол 180 градусов и нажмите кнопку Копировать. 

Затем щелкните правой кнопкой еще раз и выберите Transform> Reflect. Введите параметры, которые показаны ниже и нажмите кнопку Копировать. Сгруппируйте все. 

Теперь у нас есть основа для нового Art Brush. Перетащите ее на панель Brushes. Выберите Art Brush. 

Введите значения, как показано на скриншоте ниже. Не забудьте для Colorization Method  установить Tints.

Шаг 24

Возьмите Pencil Tool (N) и нарисуйте «+18» и «+23». Затем выберите эти пути и  Art Brush, который мы создали. 

Шаг 25

Устанавливаем надписи со значениями температуры в нужных местах. 

Заключение

Все готово. Теперь получилось, что понедельник — плохой день. Пускай солнечным будет вторник. Надеемся, вам понравился урок. Приятного дня и хорошей погоды!

Автор урока —  Roman Volkov
Перевод — Дужурка



Комментарии

  1. Lyurik_Lancer
    Thumb up Thumb down 0

    Дякую за урок. Мены вын обовязково пригодиться.

    Ответить

  2. Ирина
    Thumb up Thumb down 0

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

    Ответить

  3. Александр
    Thumb up Thumb down 0

    вы бы картинки обновили *HELP*

    Ответить

Оставить ответ


− 6 = один

Вставить изображение