GIMP — The GNU Image Manipulation Program
Гимп — бесплатный графический редактор

   


Стильное глянцевое меню для сайта

Главная Уроки Стильное глянцевое меню для сайта

Доброго дня, уважаемый читатель, в этом уроке я расскажу, как всего за несколько минут можно сделать почти классическое меню для сайта.

Обозначения:

  • ПКМ — Правая Кнопка Мыши.

Создаем документ размером 640×100 пикселей. Делаем выделение, как показано на рисунке…

Кликаем ПКМ по области и выбираем Выделение → Закруглить прямоугольник… и ставим настройки радиуса 15%.

Главное, не ставьте галочку «Вогнутое» (хотя это тоже интересный вариант…)! Ставим цвет переднего плана черный, цвет фона — темно-серый и заливаем градиентом снизу вверх как на рисунке…

Берем инструмент «Прямоугольное выделение» и на новом слое выделяем верхнюю часть нашего меню…

Заливаем белым цветом и ставим непрозрачность около 10%. Кликаем в панели слоев на нижнем слое с градиентом ПКМ и выбираем «Альфа-канал в выделение», далее в рабочей области кликаем ПКМ по выделению и выбираем Выделение → Уменьшить. Уменьшаем на 1 пиксель. Снова кликаем и выбираем Выделение → Инвертировать. Переходим на верхний новый слой и жмем Delete. Получаем примерно такое…

Создаем новый слой поверх предыдущих, выбираем инструмент «Карандаш», и черным цветом толщиной карандаша 1 пиксель проводим несколько вертикальных полос (для удобства перед этим нажмем «Альфа-канал в выделение» на нижнем слое с градиентом).

В этом шаге придадим нашим полосам-разделителям некоторого объема. Идем в меню Фильтры → Свет и тень → Отбрасываемая тень и устанавливаем такие настройки:

Вот что у нас получается на данном этапе…

Мы разделили наше меню на пункты, теперь начнем заполнять его. Инструментом «Текст» заполняем наши «ячейки» примерно так…

Все практически готово, но меню, уже на сайте, должно реагировать на наведение курсора.

Создадим Эллиптическое выделение на новом слое, как показано на рисунке и заливаем цветом #0093e8.

Идем в Фильтры → Размывание → Гауссово размывание и ставим радиус 56 пикселей (тут вы можете пробовать свои значения).

На слое с градиентом в очередной раз делаем Альфа-канал в выделение, инвертируем выделение, переходим на слой с синим эллипсом и жмем клавишу Delete. Получаем такое изображение.

Немного неправильно, что размытый овал находится и на других ячейках, поэтому стираем его до разделителей удобным вам методом. Я выбрал Прямоугольное выделение, которое подвигал с разных сторон вплотную к разделителям и жал клавишу Delete.

И вот что у меня получилось:

А вот как расположены слои, что довольно-таки важно…

Ну, вот и все, применяйте готовое меню на вашем сайте.


7

В избранном у 7 человек:

Метки: , , , , , , , , , .

Результаты урока

Добавить

Уроки: предыдущий следующий

10 комментариев

1

Пользователь #4093Ольга Майорова29 ноября 2012 в 10:28Личное сообщение

Мне урок понравился.Просто и подробно все описано.Спасибо автору за труд.

0

Пользователь #1812Макс Шевченко29 ноября 2012 в 10:53Личное сообщение

Честно? Мучительно не хватает деталей. Видно, что было стремление написать урок для новичков, но при написании подсознание не позволяло писать и скриншотить очевидные для опыта автора вещи..)

0

Пользователь #4093Ольга Майорова29 ноября 2012 в 11:16Личное сообщение

Да ладно, Макс, каких деталей Вам не хватает, все подробно описано ;)

0

Пользователь #3315Erbol Muratbek29 ноября 2012 в 13:55Личное сообщение

Всем Добрый!!!Я вот попробывал сделать вот этот урок он интересный. Но вот проблема у меня вышла в пункте Шаг 11. У меня не деалеться как у автора урока. После Шаг 11 у меня ничего не получаеться. Сделал как автор писал инвертирование но все арвно как цвет меняется на какой-то оранжевый цвет. и как удаляю через Delete выходит такой оранжевый цвет как мне быть пишите буду благодарен

2

Пользователь #2586Максим Прохоров29 ноября 2012 в 14:02Личное сообщение

Erbol Muratbek, это потому, что Вы инвертируете цвет, в меню "ЦВЕТ", а надо инвертировать выделение в меню "ВЫДЕЛЕНИЕ".

1

Пользователь #9869Валентин Борисенко29 ноября 2012 в 14:47Личное сообщение

Макс, было бы интересно узнать, чего не хватает, подскажи)

1

Пользователь #9869Валентин Борисенко29 ноября 2012 в 14:49Личное сообщение

Упс, я ,кажется, не туда поставил слой "Овал"... Он должен быть ПОД разделителями... Прошу прощения.

0

Пользователь #9647Фёдор Лазарев14 декабря 2012 в 14:57Личное сообщение

Не канает на этапе *создадим эллиптическое выделение* всё создаю. всё норм. Но не получается такая степень растушёвки. Получаются очень резкие края.Что делать? Делая гауссово размывание всё равно не получается добитсья нужного эффекта

0

Пользователь #9869Валентин Борисенко14 декабря 2012 в 15:08Личное сообщение

Фёдор, у меня без растушевки, простая область. После того, как вы залили ее цветом, необходимо снять выделение (ПКМ > Выделение > Снять выделение)
Черт, забыл об этом написать...

0

Пользователь #9647Фёдор Лазарев17 декабря 2012 в 15:51Личное сообщение

Спасибо, я всячески пытался, но не получалось так как надо. Я добился нужного эффекта с помощь того же "гауссово размывание" + "растушевать края"

Чтобы участвовать в обсуждении вы должны войти или зарегистрироваться.

  • >

Информация по уроку

Другие уроки автора

Реалистичное пламя
Простое создание текстуры пламени за несколько шагов в Гимпе.

Стильное вертикальное меню
В этом уроке я покажу, как всего за несколько минут создать неплохое меню.

Способы создания потертого текста
Урок по созданию эффекта "потертого" текста разными способами в Гимпе.

Создание хаки-текстуры
За основу был взят и переделан фотошопный урок по созданию текстуры хаки...

Гранжевая текстура
Урок по созданию гранж-текстуры стены с применением фильтров GIMP и нескольких кистей.

Кисти

Web 2 Badge (128x128) Pencil Sketch doodles2_brushes_by_hawksmont7 Фламинго NSS-V2.0-brush-an-9 Cursor Shadowed Pencil Cursor Shadowed Pencil 2 GIMP Brush GIMP Brush P_Graphite Pencil P_Graphite Pencil _grain Pencil1 Abstract1 Vandalizer Smoke1 Smoke2 Smoke3 abstract2 s_splat2 to_many_splatters(by ResONE) Пестрая клякса Цветные прямоугольники GIMP Brush Zvezda привет! slender
Воспользуйтесь нашим сортировщиком кистей для подбора нужной кисти.

Оценка урока

«Стильное глянцевое меню для сайта» получил оценку 5.00 на основе 3 голосов.

13876+0
Комментариев

вверх