Веб-дизайн. Бумажное меню
раздел: Дизайн
И так, в этом уроке я собираюсь показать вам, как можно сделать оригинальное меню для сайта.
Шаг 1
Создадим новый документ. Зальем основу черным цветом. Затем добавим градиент от темно-синего цвета к
прозрачному от нижнего края к верхнему.
Шаг 2
На новом слое создадим белый прямоугольник (кусочек бумаги).
Шаг 3
Выделим края и, используя серый градиент, «загнём» их.
Шаг 4
Листик не должен быть освещен равномерно. Немного затемним края.
Шаг 5
Искривляем
Шаг 6
Отрежем острые края листика.
Шаг 7
Напишем текст.
Шаг 8
Добавим тень. Я использовал настройки, которые показаны на картинке.
Результат
Таким же образом создаем и остальные листики для меню, они могут быть разного цвета и размера.
Подсовываем меню под «контентный блок». Обратите внимание, что от блока на меню также падает тень.
Вот и готово!
Подсовываем меню под «контентный блок». Обратите внимание, что от блока на меню также падает тень.
Вот и готово!
Комментарии
Иллюстратор
23 января 2008
Реально заинтересовал, можно узнать что за инструмент используется в 5 шаге?
Этоже я так понимаю Фотошоп.
Админ
25 января 2008
В 5 шаге всё просто. В верхней панели
Редактирование->Трансформирование->Деформация. Можно использовать клавиши Ctrl+T и затем нажать на кнопку режима деформации, которая находится рядом с кнопками
принять/отменить.
Иллюстратор
25 января 2008
Прошу прощения, но по пути Edit-Transform, режим Деформация не нахожу. :) Может это в CS3 появился такой режим трансформации, а так как у меня CS1 то нету такой фичи?
Админ
25 января 2008
С CS1 не работал, в CS2 и CS3 есть. Если в вашей версии нет режима деформации, тогд создайте ваш лист нужной для вас формы с помощью инструмента "Перо" (Pen-Tool).
Кирилл
07 августа 2008
Реальный урок! Респект! давно хотел научиться делать такие кнопки)
Добавить комментарий