Орбитальная кнопка

Автор: Topol Понедельник, Апрель 16th, 2012 Нет комментариев

Рубрика: Дизайн

Эту кнопку можно вполне успешно использовать на сайте. Помимо создания самой кнопки мы научимся эффективно работать с выделенными областями в Photoshop.

1    Первые трипункта должны быть вам хорошо знакомы. Тут нет ничего нового. Сначала заливаем овальное выделение рефлексивным градиентом от оранжевого к красному. Вид градиента задаются в панели опций под главным меню. Если у вас её не видно, то проверьте, стоит ли флажок рядом с пунктом меню: Окно — Опции
2    В этом пункте тоже нет ничего сложного. Мы просто добавляет текст на кнопку. Для этого мы выбираем на панели инструментов значок Т
3    Теперь дайте волю фантазии и сами придайте различные эффекты к фоновому слою и к слою с текстом. Напомню, что они задаются в меню: Уровень — Стиль уровня — …
4

  А вот сейчас кое-что новенькое. До сих пор мы делали выделение «на глаз». Но пришло время научиться это делать с точностью до пикселя. Итак:

  1. Удерживая Ctrl, кликайте на фоновый слой в палитре слоёв. От этого он станет выделенным.
  2. Дальше: Выбор — Трансформировать выбранное. Вокруг выделения появиться прямоугольник, и мы сможем изменять выделение как захотим.
  3. Вверху под главным меню должна будет появиться панель опций, где устанавливаются параметры трансформации. Если её не видно, то проверьте, стоит ли флажок рядом с пунктом меню: Окно — Опции (извините за повторение).
  4. После того, как панель опций появилась, найдите на ней значок, выделенный красным слева на рисунке. Он определяет на столько градусов вы будете поворачивать своё выделение.
  5. Поставьте на нём 30˚ и нажмите на галочку справа (он находится на этой же панели опций).
  6. Создайте новый слой командой: Уровень — Новый — Уровень.

В результате, овальное выделение повернётся на 30˚. А нам остаётся только выбрать пункт Правка — Штрих (Центр, 2-3 пикселя) для добавления контура к выделению. Обратите внимание, что эллипс должен быть на новом уровне!

5    Поздравляю, вы сделали первое кольцо. Осталось ещё три. Для того, чтобы сделать второе кольцо в точности повторите предыдущий пункт, но вместо 30˚, поставьте -30˚. От этого выделение повернется в другую сторону.
6 Подберите такое значение этого пункта, чтобы три эллипса совместились в верхней точке.

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

   Делаем третье кольцо. Вначале всё тоже самое:

  1. Удерживая Ctrl, кликайте на фоновый слой в палитре слоёв. От этого он станет выделенным.
  2. Вверху под главным меню должна будет появиться панель опций, где устанавливаются параметры трансформации. Если её не видно, то проверьте, стоит ли флажок рядом с пунктом меню: Окно — Опции.

А теперь кое-что новое:

  1. Поверните выделение на 60˚.
  2. Если вы на этом закончите, то изображение получиться неправильным. Видите точку пересечения первого и второго кольца? Слева на рисунке она выделена чёрными кругами. Так вот третье кольцо должно проходить точно через эту точку. Для этого подберите значение степени сжатия (слева на рисунке, выделено красным). У меня это примерно 60%. Но цифры не имеют особого значения. Главное то, что все три эллипса пересекались в этой месте. И ещё одна очень важная вещь: для каждого кольца вы должны создать отдельный слой!

P.S. Если три эллипса совместятся в этой точке, то они обязательно совместятся и другой точке, чуть ниже (см. рисунок слева).

7 Сделайте последнее четвёртое кольцо. Степень сжатия такая же, как и для третьего кольца, угол поворота -60˚. Проверьте количество слоёв. Их должно быть 6: фоновый слой, текстовый слой, четыре слоя с кольцами.Придайте объёмность четвёртому кольцу: Уровень — Стиль Уровня — Новые скосы и выступы
Стиль — внутренняя фаска
Глубина — 100%
Направление — вверх
Размер — 5
Мягче  — 0
8

Придайте объёмность остальным кольцам. Заметьте, значения должны быть такие же, как и у четвертого эллипса.Но вам не требуется заходить в стиль каждого уровня и заново устанавливать одни и те же числа. Достаточно кликнуть правой кнопкой мыши на слое с четвёртым кольцом и выбрать пункт: Копировать слить слоя. Дальше кликайте на другие слои и выбирайте уже Вставить стиль слоя.
9 Кольца у нас получились неплохие, но вот кнопка находится не в том месте. Она должна быть внутри эллипсов, а не за ними. Для исправления этого, выбираем один из самых полезных инструментов в любом графическом редакторе — ЛАСТИК. И очень аккуратно стираем те части колец, которые должны быть невидимы. Руководствуйтесь рисунком слева.

Кнопка сделана, а вы научились попиксельно изменять выделенные области. Но мне хотелось бы сделать несколько замечаний:

  1. Каждый эллипс мы делали на новом слое. Поэтому создаётся эффект, что они не совмещаются. Если они были на одном слое то ластиком нам пришлось бы работать ещё более аккуратно.
  2. Как видите, кольца симметричны. Поэтому, сделав 2 левых кольца, правые кольца мы могли бы сделать иначе.
    1) Уровень — Дублировать уровень
    2) Правка — Преобразование — Горизонтальное транспортирование

Источник: webcorp.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты