Рубрика: Photoshop Уроки | Урок прочитали: 303
 (голосов: 0)

Сделай в Фотошоп кнопку в стиле 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
Ссылка на источник

           

Похожие файлы и публикации:

Сделай в Фотошоп кнопку в стиле hi-tech
Если вы хотите знать, как сделать выразительные обои, тогда почитайте этот Photoshop урок.
Сделай в Фотошоп кнопку в стиле hi-tech
Этот урок покажет вам как создать красивый медиа плеер используя средства Adobe Photoshop CS3. Для ясности мы все вам покажем.
Сделай в Фотошоп кнопку в стиле hi-tech
Сегодня мы создадим симпатичную кнопку-переключатель, которую вы сможете использовать в своих работах. Для начала взглянем на финальное изображение.
Сделай в Фотошоп кнопку в стиле hi-tech
Финальное изображение
Сделай в Фотошоп кнопку в стиле hi-tech
Урок по созданию обоев для азартных людей.
Сделай в Фотошоп кнопку в стиле hi-tech
В этом уроке вы узнаете, как создать светящийся текстовый эффект с нуля.
Сделай в Фотошоп кнопку в стиле hi-tech
В этом уроке мы будем комбинировать простые векторные фигуры, стили слоев и большое количество блеска для создания прекрасной лупы для вашей иконки "Поиск", при необходимости. Давайте начнем!
Сделай в Фотошоп кнопку в стиле hi-tech
Сейчас мы узнаем, как с нуля создать логотип Microsoft Windows Media Player 10.     
Сделай в Фотошоп кнопку в стиле hi-tech
Мы будем рисовать кнопки, как на приставке NGP.
Сделай в Фотошоп кнопку в стиле hi-tech
В этом уроке Вы научитесь создавать оригинальные веб - кнопки для сайта.
Сделай в Фотошоп кнопку в стиле hi-tech
 Чтобы приступить к работе, давайте сначала посмотрим на конечный результат.
Сделай в Фотошоп кнопку в стиле hi-tech
Совместно с Sohan Negi мы разработали урок, который в подробностях покажет вам, как создать иконку пары динамиков. Урок получился длинным, поэтому мы его разбили на две части.
Сделай в Фотошоп кнопку в стиле hi-tech
В этом уроке с помощью комбинирования фотографий и различных эффектов мы создадим невероятный постаревший футуристический постер. Следуя шаг за шагом, вы узнаете, как создать картину из разных элементов.
Сделай в Фотошоп кнопку в стиле hi-tech
Этот урок посвящён тому, как с помощью Adobe Photoshop CS3 создать шаблон портфолио.
Сделай в Фотошоп кнопку в стиле hi-tech
Тени и свет делают объекты реалистичными. Так называемая «Доска объявлений», является популярным типом графики, используется в сети и печатных проектах, но зачастую они выглядят нереалистичными из-за того, что лишены объёма, из-за отсутствия света и теней.
Сделай в Фотошоп кнопку в стиле hi-tech
Тем не менее, в этом уроке, среднего уровня сложности, я покажу вам, как сделать потрясающую иконку с нуля, используя Photoshop. От Вас потребуются базовые знания Photoshop и знакомство с Pen Tool (P).
Сделай в Фотошоп кнопку в стиле hi-tech
Adobe Photoshop часто используют для создания веб элементов. Согласитесь, в этом он хорош. Поэтому сегодня мы создадим прайс лист, используя векторные фигуры и стили слоя.