И снова здравствуйте! В этом уроке будет создана  кнопка «наверх» для вашего сайта — кроме функциональности, она должна вписываться в дизайн шаблона, быть заметной и удобной. Как это сделать?

В прошлом уроке мы рассматривали способы смены дизайна уже готовой скачанной кнопки, подбирали цвет, размер и форму в соответствии с темой сайта. Сегодня будем создавать кнопку самостоятельно!

Я на радостях сделала сразу три).

Начнем, конечно, с выбора формы. Если хотите, кнопка может быть прямоугольной, последующие действия (кроме выделения) все равно останутся такими же. Мне больше нравится круглая. Создаем в программе Photoshop новый документ: нажимаем Ctrl+N или Файл => Создать… (File => New…). В открывшемся окне введите желаемый размер файла: в моем случае это 120х120 пикселей, это довольно крупная кнопка, можно сделать и поменьше. Размер можно будет отрегулировать и на завершающем этапе создания кнопки «наверх». Сейчас важно установить разрешение 72 пикс/дюйм и прозрачный фон (выберите в выпадающем окошке):

Создав новый документ, выбираем инструмент Овальная область (Elliptical Marquee tool) (М) и, удерживая Alt и Shift для создания выделения из центра и сохранения пропорций, создаем круг.

То же самое можно проделать, выбрав на панели параметров инструмента Овальная область  (Elliptical Marquee tool) стиль Заданный размер и в окошках проставить желаемые размеры окружности в пикселях. Я делаю 110 пикс — меньше, чем границы документа, чтобы осталось место для тени от кнопки.

И заливаем выделение желаемым цветом, используя
инструмент Заливка (Paint Bucket Tool) (G). У меня — голубой. Дальше создадим тень и видимость объема для нашей кнопки, для чего воспользуемся стилями слоя. Внизу палитры Слои нажмем кнопку fх Добавить стиль слоя (Layer Style) и настроим следующие стили.

ВАРИАНТ 1

Тень:

Цвет тени по умолчанию — черный, так и оставляем.

Внутренняя Тень:

Здесь тоже цвет тени — черный.

Внешнее свечение:

Этот стиль дает темную окантовку вроде тени: цвет, по умолчанию желтый, я меняю на черный, а режим наложения — на Умножение (Multiplay). Если столь густая тень вам не понравится, пропустите этот шаг; если захотите оставить солнечное свечение — пожалуйста, можно ничего не менять. Подбирайте в соответствии со своим шаблоном и на свой вкус.

Внутреннее свечение:

Стиль Внутреннее свечение мы применяем для создания эффекта объема кнопки, поэтому цвет нужно выбрать чуть более темный, чем цвет заливки кнопки. Видим, что по краям круга появилось мягкое затемнение.

Обводка:

В этом примере рассматривается белая обводка. Разумеется, можно выбрать любой другой цвет, для этого просто кликните в окошке Цвет и выбирайте на свое усмотрение.

Впрочем, лично мне такой вариант (1) напоминает дорожный знак. В конце урока представлю еще два варианта обводки: 2)белая, но с рельефом; 3)обводка, заполненная с помощью градиента.

А сейчас нужно добавить стрелочку нашей кнопке. Создаем новый слой и активируем инструмент Произвольная фигура (Custom Shape Tool) (U). Основной цвет — белый. Теперь на палитре параметров в выпадающем списке «Фигура» (Shape) выбираем широкую стрелку.

Размещаем стрелку нужного размера (образуется новый слой под названием «Фигура 1″)  и затем поворачиваем ее вверх при помощи Трансформирования Сtrl+T. Получается вот что:

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

Если вы создавали кнопку с помощью стиля выделения Заданный размер, не забудьте сменить его на Обычный.

Снова создаем новый слой. Активируем инструмент Овальная область (Elliptical Marquee tool) (М) и создаем выделение в виде овала в верхней части кнопки, вот так:

При этом видим, что наш документ состоит из трех слоев, Слой 1 — сама кнопка, Фигура 1 — стрелка, верхний Слой 2 — это будущий блик.

Теперь осталось залить блик белым цветом. Для того, чтобы насыщенность блика усиливалась постепенно, воспользуемся инструментом Градиент (Gradient Tool) (G) (находится в одной вкладке с Заливкой). Основной цвет у нас по-прежнему белый. Проверьте: на Панели параметров должна стоять галочка в окошке Прозрачность (Opacity). Тип градиента — Линейный; в выпадающем меню видов градиента выбираем От основного к прозрачному.

И на верхнем слое проводим мышью сверху вниз (выделение все еще активно!). Выделенный овал заполнится белым цветом, который становится все прозрачнее к центру кнопки. (Если у вас получилось наоборот, значит, стоит галочка в окне Инверсия на Панели параметров). Готово!

Отменяем выделение клавишами Ctrl+D. Непрозрачность слою с бликом можно уменьшить до 60%, чтобы он выглядел более естественно. Теперь нужно сохранить нашу кнопку в формате png: Файл (File) => Сохранить для Web (Save for Web) (или комбинация клавиш  Alt+Shft+Ctrl+S),  формат файла PNG-24. Весит файл всего 13 Кб. При сохранении можно уменьшить размер кнопки — ввести  другое значение в пикселях или процентах.

Итак, готова кнопка «наверх» в первом варианте — с белой обводкой.

Если нам потребуется сделать обводку рельефной, как здесь:

нужно добавить еще один слой с обводкой. Это у нас будет

 ВАРИАНТ 2

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

Переходим в пункт меню Выделение => Модификация => Сжать (Select => Modify => Contract), в открывшемся окне ставим 3 пикс. Теперь выделение равномерно уменьшилось в диаметре. Выбираем  команду Редактировать => Выполнить обводку (Edit => Stroke), ширина 1 пикс, цвет — серый, расположение - снаружи:

Получилась тонкая серая линия по центру белой обводки.

 К верхнему слою с серой обводкой применим два стиля:

Итоговое изображение:

Если вы заметили, блик в кнопке № 2 другой формы. Как это сделать, рассмотрю в варианте 3: кнопка, в которой обводка и стрелка залиты градиентом.

ВАРИАНТ 3

В качестве исходных нам нужны два слоя: Слой 1 с кнопкой и Фигура 1 (стрелка), созданные по описанию Варианта 1.

Кликнем дважды по стилю слоя Обводка на самом нижнем Слое 1, чтобы открыть настройки этого стиля. Вместо Типа обводки «Цвет» выберем «Градиент«.

Кликнув по цветному окошку с градиентом, откроем окно Редактор градиентов:

Под цветной полосой видим маркеры: это контрольные точки. Они обусловливают переход цветов. Контрольные точки можно добавлять или убирать, а также перемещать. По умолчанию будет две контрольные точки: в начале и конце полосы градиента. Кликом мыши посередине, в нижней части полосы, добавим третью точку. Станет активной панель редактирования контрольных точек:

На скриншоте активна первая КТ, в окошке Цвет выбираем желаемый цвет для нее — у меня зеленый  3ef742. Значение Позиция равно 0%, поскольку это начальная точка градиента. Для добавленной посередине точки введите значение Позиции 50% и выберите белый цвет - ffffff. Для последней точки устанавливаю тот же зеленый 3ef742. Созданный нами градиент можно сохранить, он пригодится нам для стрелки. Дадим ему название в окне Имя и нажмем кнопку Новый. При этом созданный градиент появится в конце набора имеющихся градиентов:

Теперь обводка состоит из двух цветов, плавно переходящих один в другой. Угол градиента и масштаб можно регулировать по своему усмотрению: эти настройки вы увидите в окне стиля слоя Обводка (сейчас у меня угол 54, масштаб 121 %).

Займемся нашей стрелкой. Она у нас белого цвета и не сочетается с цветом обводки. Чтобы применить к стрелке градиент, выберем слой Фигура 1 и, удерживая Ctrl,  кликнем по миниатюре слоя. Появилось выделение стрелки. Активируем инструмент Градиент (G) и нажмем на стрелочку справа от цветного окна градиента. В выпадающем наборе находим сохраненный нами градиент…

Выбираем его и проводим мышью по диагонали из левого верхнего угла (чуть выше кнопки) до середины стрелки:

Получаем такой переход цвета:

Я именно верхнюю левую часть сделала белой, поскольку там будет расположен блик — получится естественно.

Теперь займемся созданием блика на кнопке «наверх». Создаем новый слой. Инструментом Овальная область (Elliptical Marquee tool) (М)  создаем круглое выделение, по размеру чуть меньше размера кнопки.

(На скриншоте пример из Варианта 2).

Далее на Панели параметров активируем последний из режимов взаимодействия выделений - Пересечение с выделенной областью (Intersect with Selection) (для этого можно удерживать Shift+Alt). Затем создаем новое круглое выделение выше и левее первого — как на картинке:

Благодаря особенностям этого режима (подробнее о режимах взаимодействия выделений здесь)  останется выделенной только область пересечения нового и прежнего выделения. Вот так:

Как и в Варианте 1, активируем Градиент, выбираем основной цвет — белый, тип градиента — линейный, вид — от основного к прозрачному. Проводим мышью по диагонали:

И получаем постепенный переход от белого к прозрачному. Уменьшаем Непрозрачность  (Opacity) слоя с бликом до 60%.

Отлично! Кнопка «наверх» для сайта готова! Выбирайте любой цвет, любой вариант создания, добавляйте что-то свое! Как заполнить кнопку или стрелку узором, я рассказывала в уроке Как сменить дизайн кнопки «наверх» в Фотошоп.

Вот такие получились кнопочки.

Успешной работы и процветания вашим сайтам!