Видеоуроки по Фотошопу 2 раза в месяц БЕСПЛАТНО!

Ваш e-mail: *

Ваше имя: *

Нас уже:

Ваша реклама

Хотите Быстро Овладеть Фотошопом?
Но не знаете как?
Уделите Этой Методике 11 Часов, и Вы Станете
Профессионалом в Фотошопе!

Кликните сюда, чтобы узнать подробности

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

Блестящие стеклянные кнопки для веб-интерфейсов и скинов к приложениями долгое время были популярными решениями. В этом уроке мы научимся технике создания стеклянной сферической кнопки.

interface-orbs9.jpg

Приблизительное время выполнения: 7 минут

1. Откройте новый документ (250×250 в этом примере) и выберите Circular Marquee Tool. Сначала нам нужно создать металлический фон для кнопки, так что зажмите Shift и нарисуйте круг. Создайте новый слой, назвав его One и залейте круг темно-серым (таким, как #333333). Оставьте выделение и создайте новый слой под названием Two над ним. Зайдите в Select>Modify>Contract, 2 пикселя, затем в Select>Modify>Feather 5 пикселей.

Выберите умеренно серый (такой, как #666666) в качестве цвета вашего фона. Залейте выделенную область, нажав Alt+Backspace (Mac: Option+Delete). Создайте третий слой под названием Three, не снимая выделение. Выберите белый в качестве цвета переднего плана и выберите Linear Gradient Tool. Убедитесь, что выбрана опция Foreground to Transparent. Кликните и протяните от верха к низу выделения (зажав Shift), чтобы залить выделенную область градиентом. Затем, чтобы сделать выделение немного светлее, продублируйте слой Three, выполнив Layer>Duplicate Layer, затем нажмите Ctrl+E (Command+E), чтобы выполнить слияние слоев. Теперь у нас есть немного металла, продолжим.

interface-orbs1.jpg

2. Создайте новый слой над остальными, назвав его Four. Используйте Circular Marquee Tool, чтобы создать меньший круг (зажав Shift). Залейте круг синим (например, #6699dd).

interface-orbs2.jpg

3. Зажав Ctrl (Command), кликните кнопку нового слоя, чтобы создать новый слой под Four. Назовите его и. Зайдите в Select>Modify>Expand - 2 пикселя. Теперь выберите Gradient Fill. Используйте градиент от черного к белому с этими настройками. Снизьте opacity слоя SubFour до 80%.

interface-orbs3.jpg

4. Затем вернитесь в слой Four, кликните на нем правой кнопкой и примените Blending Options - Inner Glow с такими настройками. Затем примените Inner Shadow с этими настройками. Далее идет экспериментальная часть. Создайте новый слой на Four под названием Dodge, поставьте Blending Mode на Linear Dodge. Выберите Brush Tool с кистью 100 пикселей и Hardness 10%, а Flow 40%. Зажмите Ctrl (Command) и кликните на Four, чтобы загрузить его в выделение. Выберите черепаховый цвет (например #2d8e97) и залейте этот слой для получения приятного эффекта. Чтобы сделать это, вам, вероятно, понадобится использовать цвета светлее, так же, как и для нижней области. Если нужно, снизьте opacity слоя до 80%. После того, как останетесь довольны, кликните Ctrl+E, чтобы сцепить этот слой с Four.

interface-orbs4.jpg

5. Создайте наверху новый слой под названием Five. Зажмите Ctrl (Command) и кликните на Four, чтобы загрузить его в качестве выделения. Залейте эту область белым. Кликните Ctrl+D (Command+D), чтобы снять выделение. Поставьте Blending Mode слоя на Overlay. Нажмите Ctrl+T, чтобы вызвать диалоговое окно Free Transform. Зажмите Shift и сожмите выделение из нижнего угла, чтобы он выглядел, как пример справа. Зайдите в Filter>Blur>Gaussian Blur, поставьте радиус 2.8. Снизьте opacity слоя до 40% или как потребуется.

interface-orbs5.jpg

6. Далее, создайте новый слой наверху под названием Six. Зажмите Ctrl (Command) и кликните Four, чтобы загрузить его, как выделение. Залейте его светло-голубым (например #80f2e1). Нажмите Ctrl+D (Command+D). Нажмите Ctrl+T (Command+T), чтобы выбрать Free Transform и сжать фигуру, чтобы она выглядела, как на картинке. Зайдите в Filter>Blur>Boxed Blur, выберите радиус 5 пикселей (если у вас более старая версия Photoshop, Gaussian blur в шаге выше тоже подойдет). ПоставьтеBlending Mode слоя на Soft Light и opacity на 75%.

interface-orbs6.jpg

7. Создайте новый слой под названием Seven. Используйте Rectangular Marquee Tool, чтобы создать прямоугольное выделение. Залейте его белым, выбрав белый в качестве цвета переднего плана и нажав Alt+Backspace (Option+Delete). Затем, используйте Rectangular Marquee, чтобы выбрать узкий прямоугольник посередине и нажмите Delete, чтобы очистить область. Сделайте то же самое с тонким горизонтальным прямоугольником, пока у вас не выйдет 4 прямоугольника, как у меня на картинке.

interface-orbs7.jpg

8. Чтобы округлить белые прямоугольники, откройте Liquify, нажав Shift+Ctrl+X (Shift+Command+X). Убедитесь, что выбрана опция Backdrop внизу справа. Это сложно объяснить, поэтому экспериментируйте с Liquify, пока у вас не выйдет так, как нужно. Я начал с выбора кисти радиусом 400, и использовал Pucker, кликнув вверху и прямо посередине прямоугольников и потянув немного вниз. Затем я выбрал кисть радиусом 172 и кликнул посередине прямоугольников с выбранным Bloat, чтобы немного их надуть. Затем я рисовал кистью, чтобы закрыть всю синюю область, и кликнул на все, чтобы подвинуть их вверх и наклонить. Когда я закончил, я создал слой над Seven, загрузил выделение из Seven и залил его градиентом Foreground to Transparent, используя белый в качестве цвета переднего плана. Я поставил opacity слоя на 90%. Затем я удалил оригинальный слой Seven.

interface-orbs8.jpg

9. Вот и всё! Я добавил логотип Spoono наверху для забавы.

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

Источник: http://www.spoono.com/

Дата: 2010-02-15   Автор: s_bodrov

            Просмотров: 23824




Оцените урок: 1 2 3 4 5

Комментарии к этому уроку: (16)

Комментарий добавил(а): итит
Дата: 2010-03-17

Превелите урок нормально плиз с дубляжом анг команд и изьясняеться по нормальному,а не так "сложно объяснить, поэтому экспериментируйте"

Комментарий добавил(а): Дмитрий
Дата: 2010-09-14

Жаль китайских комманд нет!

Комментарий добавил(а): папанеа
Дата: 2010-11-11

Select>Modify>Contract где это найти?

Комментарий добавил(а): лдрпднш
Дата: 2010-11-11

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

Комментарий добавил(а): Маша
Дата: 2010-12-08

методом тыка, с переводчиком и опустив некоторые моменты, у меня-таки получилось)

Комментарий добавил(а): Любовь
Дата: 2010-12-15

Во всех "фотошопских" уроках перевод на руский буквально клещами надо вытягивать:(( Почему бы, на самом деле, не давать перевод команд по-русски? - в России ведь живём). Если за каждым словом лезть в словарь, надо на кнопочку целый день потратить:(

Комментарий добавил(а): Любовь
Дата: 2010-12-15

Для папанеа. Select>Modify>Contract=выделение-Модификация-Сжать. Backdrop-задний план (правой кнопкой клик по слою "Фон" и выбрать "из з.плана.." Liquify - находится в Фильтрах и переводится Искажение (там целый набор искажений).

Комментарий добавил(а): ыы
Дата: 2010-12-15

неужели никто никогда не ставил се на комп переводчик,наводишь на слово и в окошечке перевод,ё-моё люди,вы что 2 недели как комп купили!

Комментарий добавил(а): tga
Дата: 2010-12-25

ыыы аха.. переводчик... а у слова 20 вариантов..

Комментарий добавил(а): пророк
Дата: 2011-01-09

По-русски сделайте!

Комментарий добавил(а): android
Дата: 2011-02-09

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

Комментарий добавил(а): Mix
Дата: 2011-03-09

Переводчик вам в помощ. учите Инглиш)))

Комментарий добавил(а): Serg
Дата: 2011-08-29

4. Затем вернитесь в слой Four, кликните на нем правой кнопкой и примените Blending Options - Inner Glow с такими настройками. Затем примените Inner Shadow с этими настройками. а где сами настройки-то?

Комментарий добавил(а): Виталий
Дата: 2012-08-30

Преведите на русский язык пожалуйста.

Комментарий добавил(а): Виталий
Дата: 2012-08-30

Select>Modify>Contract Select>Modify>Feather Переведите. )))

Комментарий добавил(а): Александр
Дата: 2012-12-23

Мне,тоже,затруднительно с таким обучением

Добавить Ваш комментарий:

Введите произведение чисел с картинки

Статей: 6
Уроков: 149
Приложений: 60
Комментариев: 6060
Человек online: 4