Svoboda | Graniru | BBC Russia | Golosameriki | Facebook

 -Рубрики


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

Пятница, 17 Мая 2013 г. 05:20 + в цитатник
Цитата сообщения Бахыт_АБМ


Как сделать кнопки для разделов сайтаЧто такое кнопка раздела сайта? Это картинка, при клике по которой пользователь попадает на другую страницу сайта. Как, например, у меня на сайте - http://site.lentay.net (слева, кнопочки "Партнерская программа", "Готовые рецепты сайтостроителя" и т.д.).



Обычно все графические элементы сайта создают в фотошопе (графическом редакторе). Но часто сайтостроителям-новичкам это не под силу. Поэтому я нашла другое решение этого вопроса.



Есть вот такой интересный сервис - http://www.dabuttonfactory.com. Этот сервис абсолютно бесплатный. Там можно выбрать разные дизайны кнопочек и сделать на них нужные надписи. Но сервис на английском языке. Поэтому я покажу процесс создания кнопочки на примере. Готовы? Приступаем.




Заходим на сайт http://www.dabuttonfactory.com. Удобно то, что в процессе создания кнопочки Вы будете видеть результат вносимых изменений и корректировать так, как Вам нужно.



Первое поле TEXT - вводим здесь текст, который должен быть на кнопке. Например, я ввожу НОВОСТИ. Изменения сразу видны в центре экрана.



Выбираем шрифт - Font. Выбираю Sans-serif. Bold - Жирный. Italic - курсив. Отметьте галочкой то, что нужно. Я оставляю Bold, галочку с Italic снимаю.



Size - размер шрифта. Плюсом или минусом можно увеличивать или уменьшать. Я остановилась на 17.



Color - цвет шрифта.
Если кликнуть по этому окошку, можно выбрать на палитре нужный цвет. Я оставила белый. Чтобы палитра свернулась после того, как Вы выбрали нужный цвет, кликните в любую область экрана или нажмите кнопку Escape.



Text Shadow - тень у текста.



Distance - расстояние от текста до тени.



Color - цвет тени. Пробуйте. Вы будете видеть результат.



Output type - Формат готового варианта. Нам нужна картинка Image, пусть будет в формате jpeg.



Переходим к правой части экрана.



Button Type - возможные варианты - круглая, квадратная и с закругленными углами. Я оставила круглую.



Background - фон кнопки. Можно выбрать моноцвет, то есть один цвет, два цвета, градиент - перелив от одного цвета к другому. Соответственно, цвета выбрать рядом. Поэкспериментируйте. Я выбрала градиент от желтого к оранжевому.



Border - граница кнопки, обводка другими словами. Если поставить тут галочку, то нужно выбрать размер границы и цвет. Я этот параметр не включаю.



Shadow - тень кнопки. Также нужно выбрать цвет тени и расстояние от кнопки до тени. Делайте как больше нравится. Я делаю без тени.



Size - размер кнопки. Variable - варьируется в зависимости от длины текста на кнопке. Можно задать интервалы, которые должны быть вокруг текста. Я выбираю Fixed - фиксированный размер (то есть независимо от длинны текста). И задаю ширину - 150 и высоту 50.



Вот что у меня в итоге получилось.


Теперь Вам нужно сохранить вашу кнопочку на вашем компьютере. Для этого кликаем по ней. Выскакивает окошко сохранения файла button.jpeg. Вот она - картинка нашей кнопочки.



Для вас от ®™MONI4K@~}
Спасибо Автору: Ольга Александрова

Удачи Вам!

ПУТЕВОДИТЕЛЬ по Photoshop - супер уроки




АБМ

Серия сообщений "Дизайн дневника":
Часть 1 - 4 онлайн сервиса по подбору цветовой гаммы.
Часть 2 - Программа подбора цвета при Web-дизайне и составлении программ Цветик ver.6.3
...
Часть 9 - Декор вертикальный для блогов и дневников.
Часть 10 - Декор вертикальный (украшалочки) для блогов и дневников png.
Часть 11 - *Как сделать кнопки для разделов сайта*
Часть 12 - Для пользователей компьютера, ЛиРу
Часть 13 - Советы по оформлению дневников от Душицы.
...
Часть 30 - Делаем красивый текст для оформления дневника.
Часть 31 - Полезности при оформлении сообщения дневника.
Часть 32 - Коды оформления блога

Метки:  
Понравилось: 1 пользователю

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку