25.12.07
Метки: photoshop, веб-дизайн, уроки фотошоп
В прошлом уроке фотошоп по веб-дизайну мы узнали, как нарисовать красивую кнопочку на сайт. В этот раз будем учиться рисовать систему навигации, то есть меню для сайта. Ту часть, с которой часто начинается создание дизайна сайта.
1. Создаем документ, размеры значения не имеют, я выбрал 640×480. Заливаем его цветом #080713
2. С помощью инструмента
[U] рисуем фигуру
3. Применяем настройки в Стиле Слоя (Layer Effects)
Результат:
4. Кисточкой (Brush)[B] белого цвета, диаметром в 3 пикселя, рисуем линии приблизительно на одном расстоянии.
Можно отмерять и высчитать точно, но я, как видите, не стал.
5. И для этого слоя настраиваем стили.
Вышло такое вот
6. Добавим вот такие шарики с обеих сторон.
Как их сделать? Гораздо проще, чем мебель из массива. С помощью инструмента «Эллипс»
[U], удерживая Shift, рисуем круг и применяем к нему настройки, как и в пункте 3, только меняя размер тиснения в зависимости от диаметра шарика.
Выделяем зону на шарике с помощью «эллипса»
[М] и заливаем ее градиентом 
[G] от белого к прозрачному.
Ставим Непрозрачность(Fill) на 7%, жмет Ctrl+T и слегка поворачиваем слой. Шарик готов. Таким путем делаем и остальные.
7. Дублируем слой с прямоугольником, у которого скругленные углы, который мы создали в самом начале урока. Применяем к нему Фильтр- Рендеринг- Блик (Filter-Render-Lens Flare). Выскочит меню с предложением растрировать слой, жмем «Аха». В появившемся окошке выбираем «Начало ролика» и снова жмем «Да».
Я уменьшил Непрозрачность (Fill) до 15%
8. Создаем новый слой.
Делаем выделение «эллипс» [M] и заливаем его белым цветом. Удерживая Ctrl, жмем на слой с прямоугольником, который расположен ниже. Этим действием мы выделим контур прямоугольника. НО! Активным по-прежнему должен оставаться слой с белым эллипсом. Нажимаем Ctrl+Shift+I и жмем Delete. Результат.
С помощью все того же «Эллипса» [M] делаем такое выделение
и снова Delete. Непрозрачность(Fill) слоя на 3%
9. Дублируем слой с фоном и применяем к нему Фильтр- Рендеринг- Блик (Filter-Render-Lens Flare). Подставляем его в угол меню, удаляем лишнее и уменьшаем Непрозрачность (Fill) до 70%.
10. Теперь нам нужно изменить настройки двух шариков, ближайших к этому блику.
Для маленького:
Параметр Тиснение с прежними настройками. Для того, что крупнее:
Вот собственно и все. Вот так выглядит наше меню:
Когда уже будем размещать его на сайте, то обрежем лишний фон вокруг, который я оставил для наглядности, и добавим пункты меню, которые выполним в виде текстовых ссылок, следовательно, рисовать в Фотошопе нам их не нужно.
А вот это уже окончательный вариант, который будет сиять на сайте:
Автор: Найкрис Кроули (блог о веб-дизайне).
При использовании материала ссылка на сайт обязательна
Popularity: 1%
Доброго времени суток Найкрис.
Мне понравилась эта менюшка, только вот я не совсем понимаю как туда пункты меню добавить?
Ведь надо постараться чтобы каждый пункт был ровно по середине своей ячейки.
Это уже делается при помощи таблицы стилей.
Глянь этот урок, как делается меню для сайта
Найкрис, а можно ли как то в фотошопе ЦС 3 линии рисовать автомптически(ну что бы точки начала и конца задать), а то рисую и рука вдруг дрогнет и всё каряво получается(каляка-маляка).За ранее спасибо Вам.
можно нарисовать автоматически прямую линию: ставишь первую точку, зажимаешь Shift и ставишь вторую, между ними получается прямая линия.
Более сложные линии, загагулины и т.д. рисуются при помощи кривых.
Если нужно, могу рассказать подробно, как именно
Да, расскажите пожалуйста
ок, на выходных подготовлю урок
Мне как то не очень понравилось =)
Хорошая идея с меню, и ее воплощение!
подскажите новичку плиз))) как активировать меню нарисованное в фотошоп — на сайте? как вставлять отдельно нарисованные кнопочки — знаю) спасибо большое заранее! очень жду ответа!