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

Думаю, не секрет, что в интернете этих самых стрелок «наверх» можно скачать тьму тьмущую. Однако, стремясь к визуальной гармонии, владелец сайта нередко приходит к выводу, что цвет кнопки было бы неплохо слегка (или кардинально) подкорректировать. А, скорее всего, и форму. В уроке я рассматриваю только дизайн кнопки;  способы установки кнопки на сайте — не моя тема).

И, в конце концов, кто мешает нам создать с нуля свою единственную и неповторимую кнопку?.. Об этом читайте в следующем уроке.

А в этом уроке мы узнаем, как изменить готовую  кнопку «наверх» в Фотошоп.

Итак, вы скачали симпатичную кнопочку в формате png, но к вашей теме она не подходит. Не беда, просто откройте файл с кнопкой в программе Photoshop.

Допустим, у вас есть такое изображение, но красный цвет вы хотели бы изменить на другой. Нажимаем комбинацию клавиш Ctrl+U, тем самым вызвав окно Цветовой тон /Насыщенность (Hue/ Saturation). Перемещая верхний движок Цветовой тон (Hue), находим желаемый цвет.

В данной ситуации нам на руку то, что белый цвет стрелки не поддается коррекции: меняется лишь оттенок фона. Помним, что движки Насыщенность и Яркость тоже можно перемещать, приближая наше изображение к задуманной цели.

А что, если вам требуется изменить цвет стрелки?.. Вот чтоб не белая была, а, допустим… Желтая.

Находясь на слое с кнопкой, выбираем инструмент Волшебная палочка (Magic Wand Tool ) (W). Она выделяет пикселы схожего цвета.

…И кликаем Волшебной палочкой по стрелке. При этом она будет выделена бегущей пунктирной линией. Если при этом выделены лишние области (у меня это блики по краям кнопки), активируем в одной группе с Magic Wand Tool инструмент Быстрое выделение (Quick Selection Tool) (W) и, зажав Alt (режим вычитания), кликаем по ошибочно выделенным областям. Диаметр кисти регулируем для удобства клавишами [ и ].

Чтобы эти блики не выделялись, нужно было перед выделением поставить галочку в окошке Смежные пиксели (Contiguous) на панели параметров инструмента Волшебная палочка:

Когда будет выделена только стрелка, активируем инструмент Заливка (Paint Bucket Tool) (G). Далее кликаем на окошко основного цвета и в открывшейся палитре цветов выбираем желаемый цвет, нажимаем ОК и курсором, принявшим вид ковша, щелкаем внутри выделенной области. Стрелка окрашивается в нужный цвет. Вот какие разные кнопки можно получить:

Кроме смены цвета, можно изменить размер и форму кнопки: сделать ее больше, меньше, шире и т.д. Для этого просто воспользуйтесь командами Трансформирования:

Если же требуется заданный размер кнопки, проще сразу ввести его численное значение: открываем меню Изображение => Размер изображения (Image => Image Size) или нажимаем комбинацию клавиш Alt+Ctrl+I. В появившемся окне мы увидим фактические значения высоты и ширины изображения, а также можем ввести свои значения и нажать ОК.

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

И, наконец, самое интересное: с помощью Фотошоп кнопке «наверх» можно добавить узор, текстуру, любые надписи, логотипы и картинки!

Нажав кнопку fх Добавить стиль слоя (Layer Style) (или сделав двойной клик по иконке слоя в палитре Слои), выбираем из списка предложенных стилей Наложение узора. Однако прежде замечу, что узор будет наложен на все изображение, а мне бы хотелось стрелку и белый ободок оставить без изменений. Поэтому я эти элементы скопирую на новый слой: сначала выделяю стрелку инструментом  Волшебная палочка (Magic Wand Tool ) (W), затем Ctrl+J копирую на новый слой. Далее выделяю цветной круг внутри кнопки инструментом Овальная область (Elliptical Marquee tool) (М), инвертирую выделение нажатием Ctrl+Shift+I (при этом выделенным становится белый ободок) и также копирую на новый слой. Теперь я могу заняться наложением узора на кнопку, для этого делаю активным самый нижний слой, где сохранилась кнопка в первоначальном виде.

Придаю Слою 0 стиль Наложение узора, при этом открывается окно:

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

Итак, я выбрала узор «Оптическая шахматная доска», масштаб 95%, режим наложения Перекрытие (Overlay). Однако теперь плоская белая стрелка на кнопке выглядит негармонично. Ей также стоит придать стиль слоя.

Внимание! В Фотошопе есть множество готовых комплексных стилей - некоторые установлены по умолчанию, а еще больше можно бесплатно скачать и установить. Это значительно облегчает работу, и особенно с web-дизайном, поскольку не нужно вручную подбирать нужные настройки.

Активируем слой со стрелкой, которую мы ранее скопировали. Открываем палитру Стили (Styles), обычно она сгруппирована вместе с палитрой Коррекция; если ее не видно, нажмите Окно => Стили (Window => Styles). Находим в наборе стиль с романтическим названием Чеканка с небом.

Обратите внимание, ниже слоя в палитре Слои появились названия эффектов, из которых состоит готовый стиль Чеканка с небом: Тиснение и Наложение градиента. На изображении мы видим результат. Небесный градиент не вписывается в цветовую гамму моей кнопки, я предпочту оставить стрелку белой. Просто нажимаю глазик слева от эффекта Наложение градиента, чем делаю его невидимым. Вот и готов результат.

Вряд ли такая красота заинтересует владельцев серьезных сайтов, но  сайты женские, детские, кулинарные, о рукоделии и отдыхе вполне могут посоревноваться в оригинальности, украсив кнопку в соответствии со своей тематикой! Тут и стразики, и вишенки, и даже вязаная текстура…

В варианте 2 и 4 стиль применен и к обводке кнопки. Если вам понравились эти кнопочки, добро пожаловать на страницу ИСХОДНИКИ, где можно скачать их одним архивом.

Использованные мной изображения кнопок были скачаны на сайте iconfinder.com в формате png по запросу в строке поиска «arrow» (стрелка).

Помимо стилей, можно украшать свою кнопку текстом, фигурами, логотипом сайта. Просто откройте картинку, перенесите в документ с кнопкой и подгоните размер с помощью Трансформирования. После этого сохраняем файл с помощью команды Сохранить для Web в формате png-24.

А мой урок подошел к концу. Успешной работы!