Среда, 08.04.2020, 09:02
Приветствую Вас Гость | RSS
Форма входа
Меню сайта
ЗАГРУЗИ СВОИ ФАЙЛЫ
БОЛТАЛКА
200
НАША КНОПКА
ДЛЯ ОБМЕНА КНОПКАМИ ПИШИТЕ В ЛИЧКУ
Главная » Статьи » Мои статьи [ Добавить статью ]

КАК СОЗДАТЬ СВОЮ КНОПКУ САЙТА

Прежде чем создавать кнопки для своего сайта, вы должны кое-что знать.

1.      Кнопки представляют собой графические файлы в форматах  gif, jpg, png. Bmp, psd и  jpeg не используются или используются очень редко. Размер таких файлов (здесь и в дальнейшем имеется в виду размер в байтах или килобайтах, а не длина и ширина) должен быть очень маленьким из-за времени их загрузки. Чем меньше размер, тем быстрее загрузка!

2.      Наиболее качественные кнопки создаются не в программах, подобных Paint, а в мощных графических редакторах. Самым ярким представителем является Photoshop. Я рекомендую пользоваться версиями 5.х-7. Обратите внимание, что даже в одинаковых версиях этой программы русский перевод может отличаться. Пример: в Photoshop есть пункт меню - Rasterizing.  В разных версиях его переводят как: прорисовать слой или растрезировать уровень. Вот ещё пример: Layer style переводят как стиль уровня или опции смешивания.

3.      Прежде чем создавать кнопки, вам надо определиться, сколько их будет на вашем сайте. Если кнопок много, то грузиться они будут долго, даже если размер отдельной кнопки небольшой. На мой взгляд, больше 10 кнопок делать не стоит.

4.      Есть специальные программы, в которых вы можете сделать кнопки с различными эффектами. К примеру - Xara 3D. В ней можно сделать очень неплохие кнопки и притом - объёмные. Но есть и минусы: размер созданной кнопки будет очень велик и большинство таких программ распространяются по принципу shareware.

5.      Перед созданием кнопок советую вам познакомиться с такими понятиями как css и dhtml. Возможно, кнопки вам не потребуются. Вы можете ознакомиться с ними в разделе "Статьи".

6.      Представьте ситуацию: меню сайта состоит исключительно из кнопок. Если одна и несколько кнопок не загрузятся, то посетитель просто не сможет попасть на те разделы вашего сайта, за которые эти кнопки отвечают. Вообще-то, формально он сможет, так как ссылка сохранится, но он не будет знать, куда эта ссылка ведёт (использование тег alt-комментарии не всегда может помочь).

7.      Независимо от того, в какой программе вы делали свои кнопки, вы должны будете их оптимизировать. То есть уменьшить размер для уменьшения времени их загрузки. Photoshop обладает специальными средствами для этой цели (Файл - Сохранить для Web). Оптимизация заключается в уменьшении количества цветов, используемых в кнопках. За счёт этого размер кнопки сильно уменьшится (но, к сожалению, качество тоже). Но немаловажно ещё учитывать в каком формате вы будете сохранять файл с кнопкой: gif или jpg.
GIF - самый популярный формат. Он идеально подходит, если на картинке имеются много  фрагментов одного цвета или оттенка. Помимо прочего, позволяет сохранить анимацию. Идеально подходит для большинства кнопок.
JPG - тоже очень популярный формат. В отличие от gif, его используют для хранения фотографических изображений, в которых много цветов. Его тоже применяют для хранения кнопок, но не так часто как gif.

8.      Я думаю, что иногда вы видели, как при наведении кнопки меняют свой цвет, создаётся эффект нажатия или раздаётся какой-нибудь звук (щелчок). Это делается благодаря использованию java script.

А теперь кое-что о создании кнопок именно в Photoshop.

При открытии любой картинки, убедитесь в том, что она в RGB-режиме (Изображение - Режим - RGB цвета)

1.      Прежде всего, вы должны создать новый документ (файл - новый) желательно с прозрачным фоном. После вы выделяете область какой-нибудь формы. Чаще всего в виде эллипса или прямоугольника. Это  определит форму будущей кнопки.

2.      После выделения области вы её заливаете выбранным цветом, шаблоном, градиентом или текстурой.

Здесь я залил круговое выделение алмазным градиентом. Используемые цвета: (0,204,255)-голубой и (0,90,255)-синий. В RGB модели.

3.      Ну, половину работы мы уже сделали. Осталось добавить текст.

4.      После добавления текста наступает самый интересный момент. В принципе, можно считать кнопку готовой, но можно попытаться придать ей рельефность, тень, объем... то есть украсить её. Всё эти опции находятся в одном меню. Уровень - стиль уровня - ... (Layer - Layer style - ...)
Заметьте, что у вас сейчас 2 слоя: градиентный эллипс и слой с текстом. Вы можете применить эффекты к любому из этих слоёв. Главное, чтобы вы растрезировали текстовый слой: Уровень - Растрезировать (прорисовать) - Текст (Layer - Rasterizing - ...)

5.      Вот, что получилось после добавления стиля к обоим слоям (скосы и выступы)

Собственно говоря, на этом можно и закончить. Простейшая кнопка готова. Вам осталось только сохранить её. Как вы видите, процесс создания кнопок сводится, в конечном счёте, к созданию 2 слоев: текстовый и фоновый, и их последующему украшению при помощи стиля. Не стоит забывать и о фильтрах, благодаря которым вы сможете сделать практически неповторимую кнопку. Для создания более сложных кнопок, вам потребуется более двух слоёв. Фильтры и эффекты слоя вы можете применять и к тексту: делать его объёмным, накладывать тень, заливать градиентом... Теперь всё зависит от вашей фантазии. Не забывайте, что текст на кнопке может быть написан разными шрифтами (красивые русские шрифты вы можете скачать на моём сайте). Но я всё же рекомендую вам посмотреть наиболее удачные варианты создания кнопок в разделе (Графика – Создание профессиональных кнопок). В заключении, я хотел бы добавить, что кнопки следует использовать осторожно и главное - не переборщить.

Категория: Мои статьи | Добавил: dus (28.06.2009) W
Просмотров: 7773 | Комментарии: 15 | Теги: RADUGA SOSTA-2.ttp://03081974.ucoz., свою, Как создать, сайта, КНОПКУ
Всего комментариев: 131 2 »
0
13 limonadik   [Материал]
грамотное инвестирование ваших кровных средств на http://limonadik.ucoz.ru

0
12 Гость   [Материал]
социальные полезные кнопки с размерами 242 x 16 и 480 x 32 точек для Вашего сайта .
Поисковые кнопки 160 x 24 точек для Вашего сайта.
Нужно только скопировать этот код и вставьте на свою страницу, и всё.
Вот адрес http://www.1aaa.ru/knopki/knopki%201.htm
Вот адрес Видео http://www.youtube.com/watch?v=rfLeRTu3Pbs

0
11 kinoteatr2.ucoz.com   [Материал]
kinoteatr2.ucoz.com

0
10 Павел   [Материал]
www.rfka.net

0
9 egor   [Материал]
нахуй картинки , код нужен!

0
8 Z   [Материал]
афтор пидорас где код нахуй мне картинка

0
7 максим   [Материал]
я через паинт лудше создам

0
6 iartem1372   [Материал]
Самы лучший сайт по бизнесу www.ninjacar.ucoz.ru

0
5 123madara123   [Материал]
Я сделал без знаний HTML, у меня есть секрет,как сделать кнопку всего за одну минуту. . Если кому нужно,я могу сделать. Пишите на эмейл 123madara123_96@mail.ru на аську 568972274 или пишите заказы на сайте xxxnarutoxxx.ucoz.com

0
4 эрик   [Материал]
это уже знания HTML тебе помогут

1-10 11-13
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
СЧЕТЧИКИ
Альпари — компания
НАШИ ПАРТНЕРЫ
JetSwap — идеальная система раскрутки сайтов!

JetSwap — это совершенно новые методы и сервисы в сфере обмена посетителями и рекламы интернет ресурсов.
Данная система является самым эффективным способом решения проблемы посещения ваших ресурсов.
Данная система представляет собой обмен посещениями 1:2, просмотрев 1 сайт, Вы получаете 2 посещения!

При регистрации вам присваивается 100 кредитов + 1000 баннерных показов + вы можете получить бонусы за выполнение заданий!

Уникальная защита от накруток. Контроль загрузки сайта рекламодателя.
Ручной и Автоматический серфинг, специальная программа для безопасного серфинга.
Веб-Серфинг, Popup-Серфинг, Task-Серфингпусть ваши посетители работают на вас!

Каждый вебмастер, пришедший по реферальной ссылке, приносит Вам проценты от своего заработка.
Возможность покупать, арендовать, продавать, сдавать в аренду рефералов.

Уникальная реферальная программа — ваша ставка с рефералов — 5%, но еe вы можете неограниченно увеличивать! Вы можете получать даже больше, чем сами рефералы!

И многое, многое другое…

Регистрируйтесь в системе раскрутки JetSwap!

НАШИ ГОСТИ