В этой статье в качестве примера используется китайская версия Photoshop CS2. Действия для других версий Photoshop могут немного отличаться. Давайте сначала посмотрим на конечный эффект.
Конкретные шаги для
достижения конечного эффекта
заключаются в следующем.1. Запустите китайскую версию Photoshop CS2, нажмите Ctrl+N, чтобы открыть диалоговое окно «Создать», при необходимости выполните некоторые настройки (размер должен соответствовать будущему меню навигации) и нажмите кнопку «ОК», чтобы создать новый документ.
2. Нажмите кнопку «Создать новый слой» под панелью слоев, чтобы создать новый слой. Выберите инструмент «Прямоугольник со скругленными углами» на панели инструментов, установите его радиус на 15 пикселей на панели параметров, а затем нарисуйте на новом слое прямоугольник с закругленными углами, как показано на рисунке 1.
Рисунок 1
3. Теперь примените следующий стиль слоя к фигуре выше.
проекция:
Рисунок 2.
Внутренняя тень:
Рисунок 3.
Внутреннее свечение:
Рисунок 4.
Цветовое наложение:
Рисунок 5
ход:
на рисунке 6
, получается эффект кнопки, показанный на рисунке 7.
Рисунок 7
4. Теперь снова используйте инструмент «Прямоугольник со скругленными углами», на этот раз нарисуйте белый прямоугольник с закругленными углами меньшего размера над кнопкой, как показано на рисунке 8.
Рисунок 8
5. Установите режим наложения этого слоя на «Перекрытие» и установите непрозрачность на 30%, вы можете получить эффект кнопки, как показано на рисунке 9.
Рисунок 9
6. Затем скопируйте эти кнопки, расположите их в меню навигации и добавьте текст, как показано на рисунке 10.
Рисунок 10
7. Выберите «Инструмент «Срез»» на панели инструментов, откройте меню «Вид» и убедитесь, что слева от «Выровнять» стоит галочка. Это автоматически выровняет срезы по краям и сделает их более точными. ломтики. Используйте «Инструмент фрагмента», чтобы вырезать кнопку за кнопкой, и каждый фрагмент будет содержать кнопку. Результат показан на рисунке 11.
Рисунок 11
8. Теперь, когда нарезка завершена, вы можете вывести ее в виде HTML-файла для подготовки к последующему веб-дизайну. Выберите команду меню «Файл | Сохранить для Интернета». Чтобы получить наилучший эффект изображения, используйте настройки, показанные на рисунке 12. После настройки нажмите кнопку «Сохранить».
Рисунок 12
9. В диалоговом окне «Сохранить результаты оптимизации как» выберите место сохранения файла веб-страницы, введите имя файла, как показано на рисунке 13, выберите тип сохранения «HTML и изображения (*. html)», а затем нажмите кнопку «Сохранить».
Рис
. 13. В результате появится HTML-страница и папка изображений, содержащая изображения кнопок.
Теперь вам нужно только скопировать HTML-код на другие веб-страницы, чтобы использовать его, но не копируйте теги заголовка/тела, созданные Photoshop при копировании.