Tags: Графика для сайта | Дизайн/Рисование

В этом  уроке  можно подробно узнать, как можно создать иконку на сайт. Для этого мы будем использовать различные градиенты , стили  и тени для получения наилучшего результата.
Значок мы будем создавать в наибольшем необходимом размере это 256*256 пикселей.  Применять будем наложение монохромных градиентов.

Начнем рисовать иконку с создания круга. На холсте 256* 256 пикселей создайте круг с помощью инструмента Фигура, залейте его любым цветом. Добавляем к нему стили слоя Наложение градиента, чередуем  темные и светло серые тона, чтобы добиться  эффекта блестящего металла.

Далее на новом слое загружаем выделение своего изображения, нажав правой кнопкой мыши на эскизе  слоя зажав при этом клавишу Ctrl. Уменьшаем данное выделение примерно на 1 пиксель и на новом слое заливаем его черным цветом.

Добавляем к новому слою наложение градиента  от темно – серого к черному .

Этому же слою добавьте внутреннее свечение  с эффектом сглаживания, используя при этом серые цвета, чтобы добиться эффекта хромированной окантовки.

Далее загрузите выделение  последнего слоя и заполните его одним из повторяющихся узоров. Загрузить набор пиксельных узоров.

Измените режим наложения на Умножение и уменьшите прозрачность слоя до 25%.

Далее создаем другое круглое выделение  в форме кольца для создания калибровочной шкалы. Для этого на новом слое создайте круг, залейте его любым цветом, затем внутри этого круга создайте выделение, которое будет меньше по диаметру  и нажмите кнопку Удалить, получив при этом форму кольца, как показано на рисунке.  Создайте квадратное  выделение, щелкните правой кнопкой мыши и выберите из меню Свободное трансформирование. Переверните квадрат вниз ,зажав при трансформировании клавишу  Shift.  Поместите его вниз так, чтобы его верхняя точка была совмещена с центром нашей иконки. Удалите ненужную область il viagra.

Добавляем нашему слою наложение градиента , используя при этом градиент цветов радуги, убедитесь что стиль градиента выбран спектральный. Используйте градиент от синего с красному. Добавьте внутреннюю тень, чтобы придать объём верхней части нашей шкалы.

В центре иконки создайте маленький круг, добавьте ему эффект металла , применив наложение градиента, и тонких теней.

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

Мы создали большой вариант иконки. Но далеко не всегда на сайтах применяется иконка такого размера как эта.

  Теперь мы уменьшим и создадим уменьшенный вариант иконки.

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

Такие эффекты как градиент нуждается в корректировке, поэтому  зайдите в меню и измените настройки стиля слоя под каждый размер индивидуально.

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

Вот что получилось в итоге:

Источник.