Иконка на сайт
Иконка на сайт
Сложность урока: Средний
Открываем новый документ размером 25 x 25 px, цвет для фона выберите белый. Используя инструмент увеличьте изображение до 800%.
С помощью инструмента "Прямоугольник с круглыми краями" (радиус скругления = 5px) рисуем скругленный квадрат.
Идём в Layer > Layer Style > Blending Options (Слой - Стиль слоя - Параметры наложения) здесь применяем следующие стили к нашему слою с квадратом:
Inner Glow (Внутреннее свечение)
режим: осветление основы
Gradient Overlay (Наложение градиента)
стиль - линейный
Настройки градиента
Stroke (Обводка) - внутри
Кликаем OK и получаем:
Дублируем слой с иконкой Layer > Duplicate Layer.
Командой Layer > Layer Style > Clear Layer Style (Слой - стиль слоя - очистить стиль слоя) удалим все стили с нового слоя.
Далее нажмите Ctrl + T (свободная трансформация), в настройках этого инструмента установите параметры Width (ширина) и Height (высота) на 90%.
Растрируем наш слой, идём в Layer > Rasterize > Shape (слой - растрировать - форму). Выбираем прямоугольное выделение и выделяем половину нашей иконки.
Нажимаем Delete и снижаем прозрачность слоя до 30%.
И получаем вот что:
Далее будем создавать RSS символ. Выбираем инструмент , потом в окошке Форма находим такую фигурку - ©,
и располагаем её на нашей иконке, как показано на рисунке:
Идём в Edit > Transform Path > Flip Horizontal (Редактирование - Трансформировать контур - Отразить по горизонтали) и разворачиваем рисунок на 180 градусов.
Сейчас берём с такими настройками:
Рисуем маленький круг в центре нашего символа.
Растрируем наш слой с символом, идём в Layer > Rasterize > Shape. Выбираем и выделяем левую часть нашего символа, нажимаем Delete, чтобы удалить её, эту операцию проделываем и с нижней частью. Получаем вот что:
Перемещаем слой с символом вниз под слой с бликом.
Идём в окно Стиль слоя и применяем следующие стили:
Drop Shadow (Тень)
Gradient Overlay (наложение градиента)
Настройки градиента
И вот результат нашей работы:
До встречи на www.creativo.one!
Источник: www.pixelhivedesign.com
Комментарии 47
спс автору
у меня векторная иконка и без пикселизации ;)
Решил сделать чуть больше размером, после уменьшил. Результат собственно на фотографии. Так-же работал всего с 1-й цветовой схемой.
спасибо
Спасибо
Спасибо!
Спасибо!
Спасибо=)
Спасибо)
Вот мои кнопочки.
Спасибо!
Спасибо!!!=)
Спасибо)
Спасибо.
Спасибо за урок. Просто и красиво.)
Спасибо за урок! Все просто и понятно!
Немного отсебятины
Спасибо за урок)
хороший урок
За урок спасибо!
Отличный легкий урок. Спасибо!
Хороший и простой урок. вот что получилось . :)
Мои кнопочки))) Спасибо за урок! Пригодится))
Спасибо. Мои малышки. =)
Набор кнопок
спасибо))
Большое спасибо за урок!!!
Спасибо! Оказывается всё очень просто.))))
подписываемся на новости
Спасибо, большое!
Спасибо!!!