Как нарисовать кнопки для сайта?

2 ноября 2014 г. Просмотров: 393 Инструкции
Удобный интерфейс, отлично прорисованная графика, правильное расположение элементов на странице – половина успеха сайта у посетителя. Рисование кнопок для сайта – небольшая, но немаловажная часть работы над онлайн-проектом.
Создать сайт самостоятельно с Wix.com

Инструкция

  • Попробуйте нарисовать круглую кнопку. Приведенный ниже способ универсален и для создания логотипов, аватарок. Рисовать ее не сложно, несмотря на количество действий, которое вам придется совершить.
  • Откройте программу Adobe Photoshop. Создайте новый документ, нажав комбинацию «Ctrl+N». Параметры изображения 300*300, разрешение 72 пикселя/дюйм. Фон и цветовой режим по умолчанию белый и RGB соответственно.
  • Лучше всего рисовать векторами, чтобы при уменьшении кнопки не ухудшилось ее качество. Выберите инструмент «Овал», зажмите Shift и от центра нарисуйте круг.
  • Теперь к получившемуся кругу примените несколько эффектов. Пройдите в меню «Слои» - «Стиль слоя» - «Параметры наложения». Здесь нужно будет наложить градиент.
  • Далее здесь же поставьте галочку напротив «Тиснение», чтобы придать кнопке необходимую выпуклость, и установите следующие параметры: стиль – обводящее тиснение, метод – мягкая огранка, глубина – 220%, размер – 1 пиксель, смягчение – 5 пикселей, угол – 135о без глобального освещения, высота – 32, режим подсветки – нормальный с непрозрачностью 30% , режим тени – умножение с непрозрачностью 25%
  • Для придания еще большего объема здесь же в параметрах наложения поставьте галочку на «Тень» и установите следующие параметры: режим наложения – умножение, прозрачность – 40%, угол – 125о с использованием глобального освещения, смещение – 5 пикселей, размер – 20 пикселей.
  • Результатом произведенных действий станет такое изображение, как показано на рисунке.
  • Теперь создайте новый слой, вновь выберите «Овал» и нарисуйте круг меньшего радиуса, чем первая фигура. Откройте «Параметры наложения», поставьте галочку напротив «Внутренняя тень» и установите параметры: режим наложения – мягкий свет, угол – 125о, смещение – 0 пикселей, стягивание – 45%, Размер – 21 пиксель.
  • Далее здесь же в параметрах наложения отметьте «Наложение градиента» и создайте градиент с параметрами как на картинке. Нажмите ОК
  • Далее установите стиль наложения – радиальный, масштаб – 124%
  • Теперь поставьте галочку напротив пункта «Обводка» и задайте такие параметры: размер – 5 пикселей, положение – снаружи, режим наложения – нормальный, непрозрачность – 100%, тип обводки – градиент.
  • В итоге этих действий должно получиться нечто, уже более похожее на кнопку. Вы можете вновь открыть параметры наложения и поэкспериментировать с ними.
  • Теперь нужно добавить кнопки бликов, чтобы кнопка обрела стеклянную фактуру. Для этого опять создайте новый слой, выберите инструмент «Овальное выделение», создайте овал над кнопкой и залейте его белым при помощи инструмента «Заливка». Зажмите Ctrl, кликните на слой с цветным кругом, инвертируйте выделение («Выделение» - «Инверсия»). Теперь жмите Delete. Овал должен обрезаться по периметру круга.
  • На панели слоев измените параметр «Обычное» на «Мягкий свет», затем нажмите на значок векторной маски и выберите инструмент «Заливка» - «Градиент». Залейте блик снизу вверх. Кнопка почти готова.
  • Можно на кнопку добавить надпись. К ней также можно применить эффекты наложения, такие как внутреннее, внешнее свечение, градиент и так далее. Не бойтесь экспериментов, чем больше фантазии вы прилагаете в работе, тем быстрее освоите как сам редактор, так и веб-дизайн.
  • Оцените статью!