| Главная » Статьи » Graphics |
Создание кнопок.
Прежде чем создавать кнопки для своего сайта, вы должны кое-что знать. 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 обладает специальными средствами для данной цели (Файл - Сохранить для Веб). Оптимизация заключается в уменьшении количества цветов, используемых в кнопках. За счёт этого размер кнопки сильно уменьшится (но, к сожалению, качество также). Но немаловажно ещё учитывать в каком формате вы будете сохранять файл с кнопкой: 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 слоев: текстовый и фоновый, и их последующему украшению при помощи стиля. Следует помнить и о фильтрах, благодаря которым вы сможете сделать практически неповторимую кнопку. Для создания намного более сложных кнопок, вам будет нужно гораздо более двух слоёв. Фильтры и эффекты слоя вы можете использовать и к тексту: делать его объёмным, накладывать тень, заливать градиентом... Теперь всё зависит от вашей фантазии. Не забывайте, что текст на кнопке может быть написан разными шрифтами (привлекательные русские шрифты вы можете скачать на моём сайте). Но я всё же рекомендую вам посмотреть максимально удачные варианты создания кнопок в разделе (Графика – Создание профессиональных кнопок). В заключении, я хотел бы добавить, что кнопки следует применять осторожно и главное - не переборщить. Источник: http://easy-web.narod.ru | |
| Просмотров: 1462 | Рейтинг: 0.0/0 |
