» Форма входа

»Мoy-weB ver.4.1

» Статистика

 Главная » 2008 » Сентябрь » 10 » Создаем серию иконок для сайта

Создаем серию иконок для сайта
10.Сен.2008 | 16:21:08
драствуйте! Наверное все видели на сайтах возле разделов картинки,
обозначающие данную тематику? Так вот, решил я написать урок о создании
серии иконок в одном стиле.

Шаг 1.
Создадим документ размером 100х500 пикселей, 72 точки. Ширину я брал из расчета 5 иконок по 100 пикселей = 500.
"Разметим
область". Создаем направляющие через каждые 100 точек. Для удобства я
еще добавил линейки на месте самой крайней иконки.
Создаем серию иконок для сайта

Шаг 2.
Приступим к рисованию.
Выбираем инструмент "Custom Shape Tool"(U). В качестве форм я выбрал стандартные фотошоповские формы Web.
Создаем серию иконок для сайта

Рисуем "конвертик", режим - "Paths".
Создаем серию иконок для сайта

Новый слой (Ctrl+Shift+N). Сбрасываем цвета (D). Выбираем кисть диаметром 2-4px.
Далее инструмент "Pen Tool"(P) - Stroke Path - Brush (ставим галочку Simulate Pressure).
Да, важно, чтобы у кисти стояли такие параметры, иначе эффекта Simulate Pressure не выйдет
Создаем серию иконок для сайта

Результат:
Создаем серию иконок для сайта

Новый слой. "Pen Tool"(P) - Fill Path - Background Color(белый). Метод смешивания - Overlay. Сливаем слои (Ctrl+E).
Создаем серию иконок для сайта

Далее выбираем Polygonal Lasso Tool.
Ctrl+клик на слое с конвертом, и вместе с зажатой Shift рисуем вот такое выделение, то есть делаем фон конверта.
Вот пример:
Создаем серию иконок для сайта

Создаем новый слой. заливаем его белым цветом. И помещаем за слой с конвертом.
Настройки слоя: Gradient Overlay 7dbe0a(0%) - a1d54f(50%) - 80c218(50%) - a2d93f(100%)
Создаем серию иконок для сайта

Сливаем слои. Free Transform - Distort (Кстати лучше оставлять скрытую копию слоев)
Создаем серию иконок для сайта

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

Вот результат с 5-ю иконками.
Создаем серию иконок для сайта

П.С.
Чтобы разрезать общую картинку, собственно на иконки, ограничте каждую
иконку направляющими через каждые 100 пикселей, как в шаге 1, а потом
выберите инструмент Slice, -> Get slices from guides и сохраните в
формате, который Вам нужен.

Автор: xard
Категория: Уроки фотошоп | Просмотров: 674 | Добавил: CorsaR
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]