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