Все уроки Фотошоп

Есть вопрос? Задайте здесь и сейчас!

Форум Регистрация Выслать активацию Восстановить пароль Дополнительно Файлы Видео Галереи Справка  
Перезагрузить страницу Страна Фотошопия Adobe Photoshop. Фотошоп и все, с ним связанное >> Обучение Adobe Photoshop >> Необработанные уроки Photoshop >>

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

Перезагрузить страницу Страна Фотошопия Adobe Photoshop. Фотошоп и все, с ним связанное >> Обучение Adobe Photoshop >> Необработанные уроки Photoshop >>

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


 
Опции учебника
Создаем серию иконок для сайта, веб-дизайн

Предыдущий учебник Создаем серию иконок для сайта, веб-дизайн Следующий учебник
Опубликовал(а) Gostemilov
22.06.2015
Создаем серию иконок для сайта, веб-дизайн

Здраствуйте! Наверное все видели на сайтах возле разделов картинки, обозначающие данную тематику? Так вот, решил я написать урок о создании серии иконок в одном стиле.

Шаг 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

Опубликовал(а)
Аватар для Gostemilov
Администратор
Он малахольный
Регистрация: 07.09.2007
Адрес: Россия, Москва. 100 метров до МКАД
Возраст: 55
Сообщений: 92,013
Вес репутации: 10
Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима


Рекомендовать другим

Копирайт
Оригинал урока
demiart.ru/forum/index.php?showtopic=36247
 



Опции учебника

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Выкл.
Pingbacks are Выкл.
Refbacks are Выкл.


Похожие темы
Название учебника Автор учебника Раздел Числу комментариев Последнее сообщение
  Урок Photoshop для начинающих     Создаем набор иконок погоды, Create a Set of Weather Icons Gostemilov Уроки Adobe Photoshop 0 30.07.2015 04:26
Дизайн сайта-портфолио 2, дизайн сайта Gostemilov Необработанные уроки Photoshop 0 23.06.2015 21:00
Волшебная шапка для сайта, дизайн "шапки" для сайта (блога) Gostemilov Необработанные уроки Photoshop 0 22.06.2015 21:45
Макет сайта недвижимости, дизайн сайта Gostemilov Необработанные уроки Photoshop 0 22.06.2015 15:10
Дизайн сайта в DJ стиле, DJ Layout #2, дизайн, макет Веб-Сайта Gostemilov Необработанные уроки Photoshop 0 22.06.2015 08:05

###
Социальные сети
Группы
Основные разделы
Скачать и поделиться

Новости Фотошопии
Подписаться письмом
Дополнительно

Текущее время: 22:14. Часовой пояс GMT +2.


удаленная проверка сервера uptime российских хостеров
Rambler's Top100


.
Locations of visitors to this page

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc. Перевод: zCarot
vBulletin Optimisation by vB Optimise (Reduced on this page: MySQL 15.00%).