САЙТОСТРОИТЕЛЬ

Бесплатная рассылки для начинающих сайтостроителей.

  • Вводный курс для новичков - сайтостроителей.

  • Готовые рецепты сайтостроителя

  • Бесплатные уроки и многое другое.

Введи свое имя и е-мейл в форму ниже, нажми ПОДПИСАТЬСЯ и получай всю нужную информацию прямо в свой почтовый ящик.

Ваше имя :
Ваш email :




Рекомендую:


«Фотошоп с Нуля в Видеоформате»

Если Вы в Фотошопе "Ноль", "Чайник" Или Даже "Ситечко От Чайника", Не Беда.

Уделите Моей Методике 15 Часов и 52 Минуты, и Я Превращу Вас в Фотошоп-Мастера!

Подробнее >>>








ГОТОВЫЕ РЕЦЕПТЫ САЙТОСТРОИТЕЛЯ.

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

Дата публикации: 19 ноября 2009

Что такое кнопка раздела сайта? Это картинка, при клике по которой пользователь попадает на другую страницу сайта. Как, например, у меня на сайте. Слева. Кнопочки "Партнерская программа", "Готовые рецепты сайтостроителя" и т.д.

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

Есть вот такой интересный сервис - 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. Вот она - картинка нашей кнопочки.

Думаю, дальше Вы уже знаете, что с ней делать - разместить на сайте и превратить картинку в ссылку, которая будет вести посетителя на нужную страницу вашего сайта. Все эти операции подробно описаны в моем курсе "Что нам стоит сайт построить" (в главе 10 "Как послать покупателя или учимся создавать ссылки"). Поэтому здесь я уже не буду на этом подробно останавливаться.

----------------------------------------------------

Комментарии (01.12.2009):

После публикации урока о создании кнопок для разделов сайта, мне пришло много писем с вопросом - КАК СДЕЛАТЬ КНОПКУ ОПЛАТЫ НА САЙТЕ. Об этом смотрите здесь >>>


Удачи Вам!

С уважением,
Ольга Александрова