Пятница, 29.03.2024, 03:50
Приветствую Вас Гость | RSS Главная | Регистрация | Вход
все о работе в интернете и о создании сайтов с нуля
Меню сайта

...

Новый проект для новичков в сайтостроении


Категории раздела
УРОКИ ПО ФОТОШОПУ [10]

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Форма входа


Главная » Статьи » УРОКИ ПО ФОТОШОПУ » УРОКИ ПО ФОТОШОПУ

Делаем красивое меню для сайта с помощью фотошопа

1. Создаем документ, размеры значения не имеют, я выбрал 640х480. Заливаем его цветом #080713

2. С помощью инструментаИнструмент Adobe Photoshop Скругленный Прямоугольник [U] рисуем фигуру
Меню для Сайта

3. Применяем настройки в Стиле Слоя (Layer Effects)
Меню для Сайта
Результат:
Меню для Сайта

4. Кисточкой (Brush)[B] белого цвета, диаметром в 3 пикселя, рисуем линии приблизительно на одном расстоянии.
Меню для Сайта
Можно отмерять и высчитать точно, но я, как видите, не стал.

5. И для этого слоя настраиваем стили.
Меню для Сайта
Вышло такое вот
Меню для Сайта

6. Добавим вот такие шарики с обеих сторон.
Меню для Сайта
Как их сделать? С помощью инструмента «Эллипс»Инструмент Adobe Photoshop Скругленный Эллипс [U], удерживая Shift, рисуем круг и применяем к нему настройки, как и в пункте 3, только меняя размер тиснения в зависимости от диаметра шарика.
Меню для Сайта
Выделяем зону на шарике с помощью «эллипса»Инструмент Adobe Photoshop выделение Элипс [М] и заливаем ее градиентом Инструмент Adobe Photoshop Градиент [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. Теперь нам нужно изменить настройки двух шариков, ближайших к этому блику.
Меню для Сайта
Для маленького:
Меню для Сайта
Параметр Тиснение с прежними настройками. Для того, что крупнее:
Меню для Сайта
Вот собственно и все. Вот так выглядит наше меню:
Меню для Сайта
Когда уже будем размещать его на сайте, то обрежем лишний фон вокруг, который я оставил для наглядности, и добавим пункты меню, которые выполним в виде текстовых ссылок, следовательно, рисовать в Фотошопе нам их не нужно.
А вот это уже окончательный вариант, который будет сиять на сайте:
Меню для Сайта

Автор: Найкрис Кроули.
Категория: УРОКИ ПО ФОТОШОПУ | Добавил: сосо (22.07.2012)
Просмотров: 3836 | Теги: сайт, фотошоп, меню | Рейтинг: 0.0/0

Похожие материалы
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск

Друзья сайта
  • САМОЕ ИНТЕРЕСНОЕ
  • ЛУЧШИЕ РЕЦЕПТЫ СО ВСЕГО ИНТЕРНЕТА
  • ВСЕ О ПРИМОРСКОМ КРАЕ
  • Мир искусства и фотографии
  • Photostoc info

  • Copyright MyCorp © 2024Бесплатный хостинг uCoz