Понедельник, 26.06.2017, 02:11:45
MyPhotoshop
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
Форма входа
Категории раздела
Мои статьи [2]
Элементы веб-дизайна [14]
Уроки Фотошопa [19]
Уроки анимации [34]
Поиск
Наш опрос
Оцените мой сайт
Всего ответов: 244
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
     Каталог статей
    Главная » Статьи » Элементы веб-дизайна

    Стеклянные иконки
    Стеклянные иконки

    Шаг 1. Для начала создаем изображение 128*128.
    Заливаем его нужный фоном или оставляем прозрачный фон.
    Создаем новый слой (ctrl+shift+N).
    Далее выбираем инструмент "скругленный прямоугольник" (shift+U несколько раз пока не попадем на то что нам нужно).
    Стеклянные иконки

    Задаем скругление 10 пикселей.
    Выставляем его в режим Path как показано на рисунке.
    Стеклянные иконки

    При зажатой клавиже shift рисуем скругленный прямоугольник на слое что мы создали.
    Нажимаем ctrl+enter для преобразования контура в выделение и заливаем любым цветом (на данный момент цвет не важен).
    Должно получится что-такое:
    Стеклянные иконки

    Шаг 2. Создаем тень для полученного скругленного прямоугольника.
    В свойствах слоя задаем следующие параметры тени:
    Стеклянные иконки

    Налаживаем градиент (цвет вы можете выбирать сами - поэкспереминтируйте).
    Я, например, использовал следующий градиент:
    Стеклянные иконки

    Можно также наложить любую текстуру (я использовал текстуру 4*2 пикселя, где половину высоты занимает черный цвет, а другую половину прозрачные пиксели, таким образом я получил линии):
    Стеклянные иконки

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

    Шаг 3. Создаем еще один слой на котором мы размещаем текс или рисунок.
    Это может быть цветной рисунок/текст или одноцветный рисунок/текст. Я использовал простой одноцветный рисунок и добавил ему тень.
    Стеклянные иконки

    Далее в свойствах слоя выставляем параметры тени:
    Стеклянные иконки

    Цвет тени выбирайте исходя из цвета фона.

    Шаг 4. Создание блика.
    Создаем еще один слой где изпользуя инструмент "скругленный прямоугольник" (уже просто U) рисуем контур с скруглением 9 пикселей и отступами по боках от "основного тела" иконки порядка 1-2 пикселя.
    Нажимаем ctrl+enter для преобразования контура в выделение и заливаем его полупрозрачным градиентом (от белого до прозрачного).
    Должно получится как на рисунке:
    Стеклянные иконки

    Далее используя инструмент "pen" (нажимаем "P"), отрисовуем дугу среза по середине иконки. Должно получится что похожее как на рисунке.
    Нажимаем ctrl+enter для преобразования контура в выделение и удаляем лишний градиент (del).
    Стеклянные иконки

    В резельтате должно получится что-то похожее на это:
    Стеклянные иконки

    Такой метод дает довольно неплохие результаты:
    Стеклянные иконки
    Категория: Элементы веб-дизайна | Добавил: myphotoshop (29.08.2008) | Автор: Serjart
    Просмотров: 562 | Рейтинг: 0.0/0
    Всего комментариев: 0
    Имя *:
    Email *:
    Код *:
    Copyright MyCorp © 2017