//

ФотошопСундучок photoshopsunduchok

Начните свой путь в мир ФОТОШОПА сейчас!

 

 

 

БЕСПЛАТНЫЕ РАССЫЛКИ ВКОНТАКТЕ

(более 20 рассылок) 

 


Канал в Дзене:

 

Присоединяйтесь в

Вход на сайт

Профиль

Последние комментарии

Кто на сайте

Сейчас на сайте 246 гостей и нет пользователей

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

Создание иконок для сайта

Интересные иконки для Вашего сайта:

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

{smooth-scroll-top}

Создадим документ размером 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-ю иконками.
Создаем серию иконок для сайта


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


Создание сайта непростая задача. Чтобы сделать действительно качественный и функциональный сайт необходимо трудится не один день. Создание иконок, которое рассматривалось в этом посте - это одна из многочисленных задач по разработке сайта. Поэтому если Вы хотите создать действительно качественный сайт, то лучше обратиться к профессионалам, к примеру, таким, как на сайте iDesigner. Там работает действительно классная команда, которая сделает Вам необходимый сайт качественно и в установленные сроки. Кроме того, при заказе определённого пакета, Вам предложат оптимизацию под поисковые системы совершенно бесплатно.

{smooth-scroll-top}

Печать

Комментарии  

Денис
0 # Денис 17.09.2012 16:04
Спасибо автору за полезные иконки! интересная техника исполнения и внешне очень радуют, можно и на сайт повесить, только зеленый цвет поменять)).

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