Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Рисуем иконку из простых форм
Adobe Illustrator » Уроки 10 октября 2009 NazaRПечать


Рисуем иконку из простых форм
 
Шаг 1.

Открываем Illustrator и создаем новый документ, и активируем режим Outline (Command + Y). Создаем 4 прямоугольника одинакового размера, используя Rectangle Tool (M). Это будут колонны академии.

Рисуем иконку из простых форм
Шаг 2.

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

Рисуем иконку из простых форм
Шаг 3.

Создаем прямоугольники вверху и внизу колон. Это послужит основанием.

Рисуем иконку из простых форм
Шаг 4.

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

Рисуем иконку из простых форм
Шаг 5.

Создаем прямоугольник выше колон. Это будет архитрав академии.

Рисуем иконку из простых форм
Шаг 6.

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

Рисуем иконку из простых форм
Шаг 7.

Используя Pen Tool создаем треугольную форму крыши на архитраве.

Рисуем иконку из простых форм
Шаг 8.

Создаем треугольник меньшей формы внутри крыши.

Рисуем иконку из простых форм
Шаг 9.

Помещаем текст по центру архитрава. Шрифт по вкусу, я выбрал Avenir Heavy.

Рисуем иконку из простых форм
Шаг 10.

Создаем иконку пера, используя Pen Tool и помещаем в центр крыши. Вы можете нарисовать одну часть, и отфлипать другую, Transform > Reflect > Vertical и скопировать.После чего выстраиваете в линию две половинки, и используя Pathfinder , сливаете их.

Рисуем иконку из простых форм
Шаг 11.

Есть несколько способов создания эффекта лучей в Illustrator. Я делаю это следующим путем: Создаю маленький круг. Ставлю dashed stroke с Weight около (250pt в этом примере).Устанавливаем значение черты, которое нас удовлетворит (это определяет кол-во лучей). Я поставил 1,3pt. Установите промежуток если хотите,я не делал. Убедитесь, что установлено Align Stroke to Outside.

Рисуем иконку из простых форм
Шаг 12.

Expand Appearance и поместите форму ниже формы пера.

Рисуем иконку из простых форм
Шаг 13.

Дублируем маленькую треугольную форму. Обрезаем с формой солнечных лучей через Pathfinder.

Рисуем иконку из простых форм
Шаг 14.

Уберите часть солнечных лучей, которые пересекают форму пера.

Рисуем иконку из простых форм
Шаг 15.

Создайте прямоугольник позади академии. Это будет задний фон. Прямоугольник создавайте таких же размеров как и документ.

Рисуем иконку из простых форм
 Шаг 16.

Мы выполнили часть урока, которая заключала в себе работу с программой Illustrator. Теперь мы экспортируем файл в PSD. Нужно соблюдать определенные вещи при экспорте в PSD.

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

Шаг 17.

Выделяем все контуры и применяем белую заливку без обводки, цвета изменим позже в Photoshop. Теперь File > Export и экспортируем в PSD. Используя следующие настройки.

Рисуем иконку из простых форм
Шаг 18.

Открываем экспортированный файл в Photoshop. Вы увидите белое изображение. Хорошо, что мы назвали группы и слои правильно, теперь мы можем приступать к применению эффектов слоя. Примените к заднему фону Color Overlay с 80% серого. Заднему фону академии задайте Color Overlay с 40% серого и Gradient Overlay в режиме Multiply, Opacity 60%, градиент от черного к белому, линейный, и угол 90°.

Рисуем иконку из простых форм
Шаг 19.

Лестница

* Inner Shadow: Screen, Opacity 75%, Distance 3px, Size 5px, белый
* Inner Glow: Multiply, Opacity 25%, Size 3px, черный
* Color Overlay: Multiply, Opacity 100%, 80% серый
* Gradient Overlay: Multiply, Opacity 50%, linear 90°, от белого к черному
* Stroke: Size: 1px, Position Outside, Multiply, Opacity 25%, черный

Применяем Inner Shadow ставим angle 90° и проверяем галочку на Use Global Light. Шаги ниже имеют те же самые эффекты, но немного более светлый Color Overlays (B: 85/B: 90).

Рисуем иконку из простых форм
Шаг 20.

Колонны

* Drop Shadow: Multiply, Opacity 60%, Distance 2px, Size 5px, черный
* Inner Shadow: Screen, Opacity 75%, Distance 2px, Size 4px, белый
* Inner Glow: Multiply, Opacity 25%, Size 3px, черный
* Color Overlay: Multiply, Opacity 100%, 98% серый
* Gradient Overlay: Multiply, Opacity 40%, reflected 0°, от черного к белому
* Stroke: Size of 1px, Position of Outside, Multiply, Opacity 20%, черный

Основания имеют те же самые эффекты, но без Drop Shadow.

Рисуем иконку из простых форм
Шаг 21.

Сами колонны имеют те же самые эффекты, но без Drop Shadow, Inner Shadow и Color Overlay. Размер Inner Glow - 5 px.

Рисуем иконку из простых форм
Шаг 22.

Каждый из трех прямоугольников должен иметь разные эффекты. Центр:

* Outer Glow: Screen, Opacity 100%, Size 5px, белый
* Inner Glow: Multiply, Opacity 10%, Size 5px, черный
* Color Overlay: Multiply, Opacity 100%, Color: H=0;, S=1%, and B=94%
* Gradient Overlay: Multiply, Opacity 10%, reflected 0°, от черного к белому
* Stroke: Size 1px, Position: Inside, Multiply, Opacity 35%, черный

Каждый левый имеет те же самые эффекты, кроме этих:

* Gradient Overlay: Multiply, Opacity 10%, linear 0°, от черного к белому
* Stroke: Size: 1px, Position of Inside, Multiply, Opacity 25%, черный

И каждый правый так же как и левый, имеет те же самые эффекты, но конечно для Gradient Overlay:

* Gradient Overlay: Multiply, Opacity 10%, linear 0°, от белого к черному

Рисуем иконку из простых форм
Шаг 23.

Теперь архитрав.

* Drop Shadow: Multiply, Opacity 35%, Distance 5px, Size 5px, черный
* Inner Shadow: Screen, Opacity 75%, Distance 5px, Size 3px, белый
* Inner Glow: Multiply, Opacity 25%, Size 2px, черный
* Gradient Overlay: Multiply, Opacity 20%, linear 90°, от черного к белому
* Stroke: Size 1px, Position: Outside, Multiply, Opacity at 50%, черный

Рисуем иконку из простых форм
Шаг 24.

Горизонтальные линии с права и слева на архитраве:

* Drop Shadow: Screen, Opacity 75%, Distance 2px, Size 2px, белый
* Inner Shadow: Multiply, Opacity 50%, Distance 3px, Size 2px, черный
* Color Overlay: Multiply, Opacity 100%, 80% серый

Текст:

* Inner Glow: Screen, Opacity 75%, Size 2px, белый
* Color Overlay: Multiply, Opacity 100%, 40% серый

Анти-алиас на тексте установите на smooth, стандартный для импортирования в Illustrator, crisp.

Рисуем иконку из простых форм
Шаг 25.

Крыша имеет такие же эффекты, но без Drop Shadow. Внутренняя часть крыши имеет следующие эффекты:

* Drop Shadow: Screen, Opacity 75%, Distance 5px, Size 5px, белый
* Inner Shadow: Multiply, Opacity 50%, Distance 5px, Size 10px, черный
* Inner Glow: Screen, Opacity 75%, Size 2px, белый
* Color Overlay: Multiply, Opacity 100%, 70% серый
* Gradient Overlay: Multiply, Opacity 80%, linear 90°,от белого к черному

Рисуем иконку из простых форм
Шаг 26.

Форма пера:

* Drop Shadow: Multiply, Opacity 50%, Distance 2px, Size 2px, черный
* Inner Shadow: Screen, Opacity 50% Distance 2px, Size 2px, белый
* Inner Glow: Screen, Opacity 50%, Size 5px, белый
* Color Overlay: Multiply, Opacity 100%, Color: H=0°, S=1%, и B=100%
* Gradient Overlay: Multiply, Opacity 10%, linear 90°, от черного к белому
* Stroke: Size 1px, Position ставим Outside, Multiply, Opacity 50%, черный

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

Рисуем иконку из простых форм
Шаг 27.

Создаем opacity mask для солнечных лучей. В opacity mask, выбираем Gradient tool (G) и создаем радиальный градиент от белого к черному из центра формы лучей к верхушкам. После чего устанавливаем Opacity на 60%.

Рисуем иконку из простых форм
Шаг 28.

Для теней используй те следующий метод: Ctrl-click на колонне и жмем Select Pixels. Создастся выделение содержимого слоя. С помощью Elliptical Marquee убираем часть выделения, и получаем результат как показано ниже.

Рисуем иконку из простых форм
Шаг 29.

Следуем Select > Modify > Contract и ставим 1 px. Создаем новый слой и называем его "Column 1 shadow" и заливаем выделение черным

Создаем opacity mask для этого слоя. В opacity mask, выбираем Gradient Tool и создаем линейный градиент от белого к черному из нижнего правого угла к верхнему левому. .Ставим Opacity 40%.

Рисуем иконку из простых форм
Шаг 30.

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

Рисуем иконку из простых форм
Используйте туже технику, чтобы поработать со светом лестницы: Select Pixels одного из шагов, убираем часть выделения, contract 1, создаем новый слой, заливаем белый, добавляем opacity mask, создаем градиент и ставим Opacity на 40%.

Рисуем иконку из простых форм
Финальный результат:
Рисуем иконку из простых форм


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

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