Создать кнопку для сайта в photoshop
Добрый день уважаемые читатели! Сегодня я хочу предоставить вам возможность сами создать кнопку для сайта в фотошопе. Когда я начинала со своим партнером самостоятельно писать сайт, то мы сталкнулись с проблемой создания всяких красивостей для проекта. И первое, что мне пришлось делать это была простая кнопка, располагающаяся в статье. Так вот если вы сталкнулись с подобной ситуацией, то специально для вас я посвящаю данный пост, где и расскажу подробно как создать кнопку для сайта.
Для начала естественно желательно запустить программу фотошоп и создать новое изображение с параметрами:
размер 700х300 рх
разрешение 72
цветовой режим — RGB COLOR
фон — прозрачный
Затем с помощью инструмента «Овальное выделение» в центре файла сделаем овал
Далее выбираем Инструмент «Заливка» устанавливаем в качестве основного цвета в цветовой палитре необходимый цвет и заливаем выделенную область. Применив инструмент «Заливка» снимаем выделение и применим к слою «Стиль слоя». Только предварительно необходимо в «Параметрах наложения» в „Дополнительных параметрах“установить непрозрачность равную „0“.
И вот после этого можно приступить уже к применению стилей слоя. Первым делом выбирем стиль «Внутреннее свечение» И установим для него следующие параметры:
режим — осветление
непрозрачность — 75%
направление — на краях
метод — мягкий
размер — 70
стягивание -20
Следующий стиль, который будет нам необходим это «Наложение градиента» с параметрами:
режим — нормальный
стиль — линейный
угол — 90*
И в завершении к нопке добавим стиль «Обводка». Для этого стиля необходимо будет установить следующие параметры:
размер — 1 пиксель
расположение — снаружи
цвет — конрастный основному
И вот только теперь можно нажать на Ок. Для продолжения работы создаем новый слой и он у нас активный. Удерживая нажатой на клавиатуре клавишу Ctrl щелкаем по первому слою , то есть слою с овалом.
После этого овал выделится
Теперь для добавления небольшого объема кнопке выбираем инструмент «Овальное выделение» нажимаем Alt и вычитаем из нижней части овала часть.
После вычитания у вас должно получиться следующее
К данной выделенной области следует применить «Градиентную заливку» линейного типа, от основного к к прозрачному. При этом основной цвет белый.И проводим от верхней части выделения к середине.
После применения инструмента «Градиентная заливка» у вас получится подобное изображение
Теперь снимаем выделение. Потом выбираем инструмент «Текст» и пишим слово, любое. Цвет выбираем контрастный с фоном. Затем к слою с текстом применим два «Стиля слоя»
«Тень»
режим наложения — умножение
непрозрачность — 75%
угол 145*
смещение -7
размер -2
«Тиснение»
стиль — внутренний скос
метод — плавный
глубина -100
направление — вниз
размер -5
Нажимаем Ок. И сохраняем кнопку с расширением .gif
Вот и все, самая элементарная кнопка для сайта готова. Если вам что — то стало не понятно из объяснения или нет желания читать вы можете посмотреть видео запись по созданию такой кнопки
[youtube]ulWelih_O9s[/youtube]
Если вы не хотите пропустить появление новых материалов на блоге «Seo записки отчаянной«, то предлагаю подписаться на обновления в удобной для вас форме.
Удачи!
Возможно Вам это будет интересно:
Вам понравилась статья? Расскажите о ней друзьям!