Как сделать красивую кнопку?

3 ноября 2014 г. Просмотров: 537
Путешествуя по просторам интернета, пользователи часто обращают внимание на графическое оформление ресурсов. Это важный параметр любого сайта. От внешнего вида страницы зависит, останется посетитель на ней или закроет и уже никогда её не посетит. Поэтому графике сайта придают особое значение. Но при украшении ресурса не следует забывать и о его функциональности. Ссылки должны быть похожи на ссылки, а кнопки – на кнопки.

Инструкция


  • Чтобы сделать красивое оформление для сайта вам понадобятся знания графических редакторов. Один из лидеров в этой области – это Adobe Photoshop. Откройте вашу программу. Создайте новый документ с параметрами указанными на изображении.

  • Залейте фон цветом «bfbfbf». С помощью инструмента «перемещение» установите горизонтальную и вертикальную направляющие по центру документа. Выберите инструмент «прямоугольник с закругленными краями». Обратите внимание, он должен находиться в режиме «слой фигура». Наведите курсор на центр документа, нажмите левой кнопкой мыши и одновременно удерживайте клавишу «Alt». Нарисуйте прямоугольник. Откройте стили слоя и установите параметры, которые указаны на изображении.

  • Зажмите на клавиатуре клавишу «Ctrl» и кликните левой кнопкой мыши по слою с фигурой. Загрузится выделение. Возьмите с панели инструментов «прямоугольное выделение». Установите его в режиме вычитания. Очертите верхнюю часть выделения. Создайте новый слой и залейте его белым цветом. Установите прозрачность слоя на 20%.

  • Возьмите инструмент «текст». Напишите нужное вам слово. Установите шрифт, размер и начертание текста. Зайдите в стили слоя и задайте следующие параметры. Ваша кнопка готова.

  • Теперь проверим её на точные пиксели. Возьмите инструмент «увеличение». Максимально увеличьте размер кнопки. Внимательно просмотрите все края. Они должны иметь четкие границы. Никаких переходных цветов. Если формы не четкие - загрузите функцию «свободное трансформирование» и клавишами управления поправьте форму кнопки. Теперь вы можете разместить её на вашем сайте.
  • Оцените статью!