Уроки Веб и приложения John Jackson 18 июля 2011

Сделай в Фотошоп кнопку в стиле hi-tech

Сложность урока: Сложный

В этом уроке мы создадим кнопку в стиле hi-tech, которую можно использовать на первой странице для открытия веб-портала, в разных программах и в презентациях Microsoft Powerpoint.

Примечание переводчика: в уроке, для создания основной фигуры, автор в своём уроке использовал Adobe Illustrator, но я бы не стал устанавливать такого монстра ради одного урока. Все нижеизложенное можно сделать и в Adobe Photoshop, если конечно Вы с контурами дружите и легко с ними справляетесь, если нет, то я помогу Вам с выполнением первой части урока, которая адаптирована мной под Photoshop.
С выполнением первой части урока в редакторе illustrator вы можете ознакомиться здесь, в источнике урока.
Желаю удачи и легкой кисти!

Материалы для урока:

Архив

Часть 1. Адаптация под photoshop

Выполняя урок в Photoshop, начните с создания документа. Откройте Adobe Photoshop. Создайте .PSD файл размером 1024х768 пикселей со следующими параметрами.

Создание фигуры «main button».
Шаг 1. С помощью инструмента Rectangle tool (режим, сейчас и далее по уроку - слой фигура) создайте прямоугольник размером 100х120 пикселей.

Шаг 2. Создайте направляющую для выравнивания фигуры по горизонтали. Созданная направляющая должна сама прикрепиться к середине фигуры.
Выберите инструмент Add Anchior Point Tool (Инструмент "Перо+" Добавить опорную точку) и добавьте опорную точку в месте пересечения верхней границы прямоугольника и направляющей.

Шаг 3. Выберите инструмент Pen Tool (P) (Инструмент "Перо"), зажмите Ctrl и потяните новую точку вверх. В Adobe Photoshop, поднимая опорную точку, кривая сразу округляется. Так ее и оставьте – полукруглой!
Так же здесь с помощью Direct Selection Tool (A) (Инструмент "Стрелка") выделите верхнюю опорную точку, зажмите клавишу Shift а затем нажмите на стрелку вправо, на клавиатуре.
Тоже сделайте с верхней правой опорной точкой, только сместите ее влево.

Шаг 4. Теперь нужно создать еще два подобных объекта. Выделите фигуру инструментом Path Selection Tool (A) (Инструмент "Выделение контура"), копируйте Ctrl+C и сразу вставьте Ctrl+V. Активируйте свободную трансформацию Ctrl+Т. Установите Положение центра преобразования в центре нижней границы (подробнее можно узнать здесь). Затем поверните дубликат на -120° (в меню свободной трансформации введите в окошке Поворот -120°). Теперь нажмите сочетание клавиш Ctrl+Shift+Alt+T. Вы получите третий объект развернутый еще на 120°.

Шаг 5. Теперь нам нужно будет объединить все три объекта в один. Чтобы объединить фигуры сделайте следующее: снова выберите Path Selection Tool (A) (Инструмент "Выделение контура"), выделите все три объекта и в меню инструмента нажмите Объединить. Округлить края фигуры просто так не получиться. Мы пойдем другим путем, пройдя который получим немного другой результат, чем автор используя Adobe Illustrator. Создайте выделение, кликнув по миниатюре векторной маски с зажатой Ctrl. Теперь можно округлить края Select - Modify - Smooth (Выделение - Модификация - Оптимизировать), введите 10 пикселей и нажмите Ок. Перейдите в палитру Контуры и в самом низу палитры нажмите на Сделать из выделенной области рабочий контур. Кликните по новому контуру (в палитре Контуры) два раза и переименуйте его в «main button».

Создание фигуры «button bevel».
Шаг 6.  Так как наша кнопка имеет внутренний включатель - некоторый собирательный объект на передней части – нам нужно повторить прошлые шаги, но на этот раз объект будет на много меньше.

Создание фигуры «backgr bevels»..
Шаг 7. Надеюсь, предыдущую фигуру вы сделали без затруднений, перейдем к следующей.
Мы создадим только одну часть нового объекта, затем отразим его, чтобы получилось симметрично.
Продолжим. Используйте инструмент Pen Tool (P) (Инструмент "Перо") и начинайте выполнять действия описанные на изображении ниже.

Создайте дубликат. С помощью свободного трансформирования и отразите фигуру по горизонтали. Объедините два зеркальных объекта в один как было описано в Шаге 5.

Используйте те же методы дублирования что были описаны ранее, разворачивайте объекты на 120° чтобы получились три идентичных  и равнораспределенных объекта (см. шаг 4)

Создание фигуры « lamps».
Шаг 8.  В конце мы создадим круг, с помощью которого в дальнейшем сделаем световые эффекты вокруг кнопки. В финальной обработке в Adobe Photoshop мы добавим слой-фигуру для некоторых техник с масками слоя.

Порядок расположения фигур сверху вниз:

Примечание переводчика (метод Photoshop): В разделе Учебник Фотошоп, а именно в Основы инструментов можно лучше познакомиться с кривыми. Надеюсь, я помог Вам!

Часть 2.

Шаг 9. Если вы выполняли первую часть урока в редакторе Illustrator, то выделите все объекты и нажмите Ctrl+C, чтобы скопировать их в Буфер обмена.
Закройте Adobe Illustrator и откройте Adobe Photoshop. Создайте .PSD файл размером 1024х768 пикселей со следующими параметрами.

Примечание переводчика: Если для создания фигур в первой части урока вы использовали Photoshop , то пропустите этот шаг.

Шаг 10.  Закрасьте первый слой черным цветом. Затем примените следующие эффекты для создания градиента заднего вида.

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

Шаг 11.
Примечание: Если для создания фигур вы использовали Photoshop. то приступайте сразу к шагу 14.

Используйте темный серый и черный цвета, создайте Радиальный градиент с максимальным размером (130-150%). Помните, что Вы можете перетаскивать центр градиента по Вашему вкусу в любую точку холста.

Шаг 12. Сейчас вставляйте фигуры слои. Ctrl+V или Edit - Paste (Редактирование - Вклеить), вклеить как слой-фигуру.

Шаг 13. У нас получилась слой-фигура сразу со всеми кривыми и мы должны разделить ее на разные части. Дублируйте слой несколько раз, в нашем случае четыре раза, и в каждом удаляйте лишние части, оставляя одну, которая нам понадобится отдельно.

Примечание переводчика: на изображении выше изображено окно Layers (Слои), в котором Вы видите вклеенный слой-фигуру из Adobe Illustrator - Shape 1 (в миниатюре векторной маски изображены все фигуры сразу), чтобы разделить этот слой на составляющие части для дальнейшей работы с ними выберите инструмент Path Selection Tool (A) (Инструмент "Выделение контура"). Теперь сделайте три копии слой-фигуры. Далее выделите, например, на нижнем слое, Миниатюру векторной маски, затем на изображении начинайте выделять (просто кликайте по краям объекта) фигуры которые необходимо удалить и нажимайте на Delete (в следующем шаге можно увидеть, что автор оставил фигуру которую делал в Adobe Illustrator в шаге 15), так повторите для остальных слоев-фигур. И следите чтобы у Вас были выделены не только слой-фигура редактируемого объекта, а так же и Миниатюра векторной маски с которой Вы удаляете лишние объекты (напомню, что она выделяется простым кликом по ней в Палитре слоев на нужном слое)!

Шаг 14. Посмотрите, как организован порядок в слоях на картинке ниже и не забудьте дать имена каждому слою чтобы было легче работать. Остальные слои будут добавляться в процессе работы в Adobe Photoshop. Добавьте стиль слоя для главной фигуры кнопки.

Шаг 15. Кликая двойным щелчком по слою Вы откроете окно Стиль слоя для редактирования эффектов. В меню Blending Options - Default (Параметры наложения - По умолчанию) уберите прозрачность до нуля, чтобы видеть только стили слоя. Далее добавьте Радиального градиента, используя те же цвета что и для заднего вида #333333 (темный серый) и #000000 (черный). Чтобы он мягко перетекал из центра в углы измените масштаб до 120%.

Шаг 16. С помощью Blending Options - Inner Shadow (Параметры наложения - Внутренняя тень) и отключенной опции Use Global Light (Глобальное освещение), так как мы используем всегда 90°, мы инвертируем эту тень, поставьте угол тени на -90°. Это позволит усилить тень в нижней части кнопки.

Шаг 17. Мы закончили первую часть редактирования кнопки. Теперь у нас готова передняя часть, темная поверхность которой позже мы добавим блеска и псевдо 3D.

Шаг 18. Создадим хромированную обводку вокруг кнопки. Добавьте 3х пиксельную Обводку  с Градиентным типом заливки Blending Options - Stroke (Параметры наложения - Обводка). Мы добавим градиент с многими деталями внутри обводки. Мы попробуем изобразить хромированную металлическую поверхность, которая как бы будет отражать горизонт и небо впереди кнопки.

Шаг 19. Включите опцию Инверсия градиента чтобы расширить отражающий эффект хрома. Поворачивая угол градиента мы разместим свет так как нам понравится. В данном случае максимум света будет хорошо смотреться, если его разместить в верхней части обводки.

Шаг 20. Чтобы добавить больше света и теней хромированной поверхности для эффекта металла используйте Blending Options - Bevel and Emboss (Параметры наложения - Тиснение) и Gloss Contour (Контур глянца), настройки смотрите ниже.

Шаг 21. С помощью Blending Options - Inner Glow (Параметры наложения - Внутреннее свечение) мы добавим внутренним краям тиснения если это будет похоже на 3D, попытайтесь сделать так чтобы углы сливались с объектами позади.

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

Шаг 23. Далее сожмите выделение: Select - Modify - Contract (Выделение  - Модификация - Сжать). Используйте 10 пикселей в качестве размера сжатия.

Шаг 24. Теперь немного смягчите выделение: Select - Modify - Feather (Выделение  - Модификация - Растушевка). Радиус растушевки выставьте 1 пиксель и нажмите Ок.

Шаг 25. Спрячьте выделение Ctrl+H чтобы лучше было видно редактирование. С помощью Brush Tool (B) (Инструмент "Кисть"), размером 35 пикселей и 10% Нажима, нарисуйте на новом слое некоторого типа отражения на кнопке, используя белый цвет. Так как свет на кнопку падает сверху, то необходимо больше осветления верхней ее части, а нижнюю темную часть немного осветлить маленькими пятнами света.

Шаг 26. С все еще невидимым выделением (чтобы вернуть видимость нажмите Ctrl+H) мы немного уберем лишнее из того что мы нарисовали кистью дабы добавить немного интересного эффекта.

Шаг 27. Снова спрячьте выделение Ctrl+H и нажмите Delete, этим вы сотрете лишние мазки кисти. Это позволяет нам работать в ручную и отполировать нашу работу создавая тиснения, что усиливает 3D вид кнопки и дает эффект пластиковой поверхности.

Шаг 28. И так мы покончили с основной деталью кнопки. Теперь займемся созданием места для включателя в центре. Для начала уберите Непрозрачность слоя-фигуры до 0%.

Шаг 29. Создайте новый эффект для слоя: Blending Options - Inner Shadow (Параметры наложения - Внутренняя тень), поменяйте угол так же как мы делали ранее для основной части кнопки. Настройки смотрите ниже.

Шаг 30. Добавьте обводку, чтобы отделить два объекта друг от друга: Blending Options - Stroke (Параметры наложения - Обводка).

Шаг 31. Далее наложите тень на поверхность: Blending Options - Drop Shadow (Параметры наложения - Тень), Blending mode - Screen (Режим наложения - Осветление), цвет белый. Размер - 2 пикселя для четкости, для создания вдавленного эффекта нужно добавить немного света сверху.

Шаг 32. Создайте тиснение для внутренней части кнопки: Blending Options - Inner Glow (Параметры наложения - Внутреннее свечение).

Шаг 33. Главная часть готова. На самом деле это кнопка расположена на заднем плане: через добавленные эффекты мы видим что она вставлена на поверхность заднего плана, имеет вокруг металлическую обводку и содержит кнопку внутри, которая при нажатии вдавливается.

Шаг 34. Теперь мы создадим иконку включателя на кнопке. Загрузите бесплатный шрифт из архива.
Напишите этим шрифтом букву “q”, 48 размера.

Шаг 35. На изображении ниже можно увидеть как накладывается на иконку эффект тиснения, размер обводки измените на 3 пикселя, цвет такой же что и поверхность кнопки, затем примените настройки Тиснения.

Шаг 36. Обводящее тиснение позволит нам создать скошенный эффект, который отделит иконку от заднего плана.

Шаг 37. В заключении создайте металлическую текстуру для иконки, настройки смотрите ниже.

Шаг 38. Теперь мы создадим три светодиода, свет которых будет включаться при наведении курсора на кнопку. Для начала придайте слою-фигуре цвет: #06B9FB, дважды кликнув по нему чтобы выбрать цвет.

Шаг 39. Используя, слой-фигуру главной фигуры кнопки мы создадим выделение.

Шаг 40. Нам нужно расширить выделение: Select - Modify - Expand (Выделение - Модификация - Расширить).

Шаг 41. В качестве размера установите 8 пикселей и нажмите Ок.

Шаг 42. Инвертируйте выделение: Select - Inverse (Выделение - Инверсия).

Шаг 43. С таким выделением мы создадим маску, чтобы получить наши светодиоды вокруг кнопки.

Шаг 44. С помощью Обводки, цвет такой же, как и у поверхности кнопки (ниже на изображении показан номер цвета), мы сделаем контур вокруг света. Это позволит нам отделить объект от поверхности заднего плана.

Шаг45. С Тиснением мы получим затемненный верх и осветленное дно Обводки (свет падает сверху).

Шаг 46. С инвертированной Blending Options - Inner Shadow (Параметры наложения - Внутренняя тень) и Blending mode - Multiply (Режим наложения - Умножение) мы создаем акриловые отражения над верхней частью этих светодиодов.

Шаг 47. В конце мы добавим Тень, Blending Options - Drop Shadow (Параметры наложения - Тень), это позволит представить что эта деталь в дизайне кнопки изменяет поверхность заднего плана, при нажатии кнопки создается тень вокруг светодиода.

Шаг 48. Ниже Вы видите как выглядит наша кнопка сейчас, но еще не хватает некоторых эффектов.

Шаг 49. Создайте дубликат слоя-фигуры и залейте его белым цветом. Мы создадим свет светодиодам с помощью Blending Options - Outer Glow (Параметры наложения - Внешнее свечение), настройки ниже.

Шаг 50. Добавьте света рядом со светодиодами используя Тень и режим наложения Осветление: Blending Options - Drop Shadow (Параметры наложения - Тень), Blending mode - Screen (Режим наложения - Осветление).

Шаг 51. Основная часть кнопки готова. Теперь, используя выделение с радиусом растушевки в 20 пикселей внутри нового слоя сделайте задний план имеющий выпуклый вид позади кнопки, что позволит создать из центра мягкий шар, свет на который падает сверху.

Шаг 52. Залейте выделение белым цветом, ранее упоминался радиус растушевки - 20 пикселей. Вы можете использовать инструмент (G) (Инструмент "Заливка") или сочетание клавиш Alt+Backspace, чтобы закрасить слой цветом который Вы используйте Paint Bucket Tool в качестве основного.

Шаг 53. Уберите до нуля Непрозрачность заливки в окне редактирования Стиль слоя.

Шаг 54. Теперь в меню градиент, 50% непрозрачности а так же режимом наложения Overlay (Перекрытие) (используйте белый и черный цвета) мы увеличим ощущение сферической формы заднего плана кнопки.

Шаг 55. Теперь мы точно закончили с кнопкой и всеми ее деталями. Осталось доработать задний план, добавить тиснения используя оставшиеся фигуры.

Шаг 56. Как всегда уберите Заливку до 0%.

Шаг 57. С помощью Обводки создайте рельеф, настройки ниже, для тиснения на заднем фоне.

Шаг 58. Белой Тенью и режимом наложения Screen (Осветление) мы сделаем так как будто свет падает сверху на тиснение.

Шаг 59. В заключении уберите лишние участки тиснения с радиусом растушевки в 20 пикселей. Таким образом они как бы будут мягко сливаться с задним фоном и исчезать по краям.

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

Автор: Alberto Sosa
Перевод, адаптация под photoshop: John Jackson

Источник: design.tutsplus.com

Комментарии 34

Какой же плохой перевод :(

передайте в формате psd

Благодарю вас за интересный урок!

Интересный урок.Спасибо.

Помогите, пожалуйста. У меня вот такая проблема возникла на 5 шаге не скругляются края, хотя все делаю по уроку. Заранее спасибо за ответ!

Спасибо! Узнала еще больше)

Большое спасибо за урок!)

Далёк результат от совершенства, конечно. По началу жутко намучился с контурами. Зато теперь стал лучше с ними управляться. :) Благодарю за урок!

Спасибо за урок!

классный урок!

доделал)
спасибо за урок, позновательный

может быть кто подкинет еще исходник посмотреть?

Доброго времени суток. У меня возникли сложности по данному уроку. Так как я еще новичок мне не совсем понятны некоторые моменты и видимо я некорректно воспринимаю написанную информацию урока. А именно возникла проблема на 5 шаге. Сделал все как описано. Выделил, сгладил, нажал, "ОК", переименовал контур. Вроде бы все как надо, но сама фигура почему то не приняла форму уже сглаженного контура.
P.S. Было бы лучше увидеть видео версию данного урока... может быть мои молитвы буду услышаны :)
Заранее благодарю за внимание и возможно помощь :)

Что-то подобное возникало и у меня
Контур там как обводка пером
Я делал так брал перо нажимал прав кнопку мыши
Образовать выделенную область
Новый слой заливка и заливал выделенную область
Получилось в общем-то тожесамое
Помоему так точьно непомню

Спасибки)))

Возпользуйся этип скриншотом. «Ластиком» удали фон и продолжай работать :)

Полезный урок! С контурами только замудрили... можно было бы и попроще... Использовала для своего сайта...

Спасибо за урок) провозился над ним всё утро, но результатом доволен)

универсальный урок

вышло не очень да и не нашел ей применения)

Вот как то так.

Спасибо за урок!

Как сделать такой шрифт под иконкой??

Помогите с 7 шагом пжлст!!не выходит чёт=(я делаю ту фигуру (7-й шаг)после как развернул дубликат пытаюсь соединить их но...когда всёже соединяю(вроде) их по центру остаёться линия как её убрать?и как правильно обьеденить эти 2 фигурки?Пжлст кто может помогите!псп!

Спасибо. Крутой урок.
Но у меня трабл возник на 59ом шаге. При добавление маски, концы крыльев не исчезают, а темнеют из-за режимов наложения... эт ток у меня так?

Вот и мой результ...

Реально круто!!! Пришлось повозиться, но своим результатом я доволен). СПАСИБО

Еще 2
Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее