Делаем кнопки в Photoshop
Спонсор поста: Заказать цемент в мешках по предоплате с доставкой.
В это простом уроке мы научимся простому способу создания маленьких кнопок, используя пару слоев и один перемежающийся с ними слой изображения.
Приблизительное время выполнения: 5 минут
Шаг 1
Начните рисовать цветной фон. Я использовал темно-коричневый и серый здесь, а также легкий радиальный градиент. Затем в новом слое нарисуйте круг и залейте его цветом. Не имеет значения, какой цвет вы используете, я использовал зеленый.
Шаг 2
Далее мы собираемся применить некоторые стили слоя. Мы используем два типа Inner Shadow (Inner shadow и Inner glow). Также применим легкий Gradient Overlay и Drop Shadow и немного Satin. Я выбрал их, чтобы придать объекту 3D-вид, используя тени по краям и радиальный градиент, чтобы создать впечатление, что свет падает на середину. Последний эффект нужен лишь для того, чтобы добавить изюминку.
Как бы то ни было, вместо того, чтобы показывать вам оригинальные настройки, скачайте исходник и скопируйте оттуда Layer Style.
Шаг 3
Вот как будет выглядеть круг после применения стилей слоя.
Шаг 4
Используя Circular Selection Tool, мы нарисуем эллипс, который длиннее горизонтально, чем вертикально (как показано). Создайте новый слой и нарисуйте радиальный градиент от белого к прозрачному. Заметьте, что вам нужно протянуть градиент так, чтобы общая прозрачность появилась снаружи выделенной области (чтобы белая часть имела острый краешек там, где заканчивается выделенная область).
Когда закончите, поверните эллипс на 30 градусов. Это наша основная освещенная область.
Шаг 5
Теперь продублируйте слой с освещением. Выключите видимость первого слоя, чтобы вы видели, что делаете, далее зажмите Ctrl и кликните на втором освещенном слое, чтобы выбрать его пиксели. Затем нажмите стрелку вниз и влево несколько раз, а затем delete. У вас должен остаться освещенный краешек (как показано).
Шаг 6
Переключитесь на ваш первый освещенный слой. Затем продублируйте второй и поверните его вниз влево, как показано. Теперь у вас есть стиль для кнопки!
Шаг 7
Далее нам нужно сделать кнопку переливающейся. Чтобы сделать это, просто берем главный зеленый слой и ставим Fill на 0%
Fill вроде Opacity, только когда вы ставите Opacity 0%, стили слоя также становятся прозрачными, а если вы сделаете Fill 0%, стили слоя будут видны. Это отлично, поскольку мы избавляемся от зеленого, но у нас по-прежнему есть все для наших кнопок. Теперь все, что нам нужно – это поместить что-то под стили.
Шаг 8
Я выбрал британский флаг и вот, вы видите его и как работают стили слоя.
Шаг 9
Теперь нажмите Ctrl и кликните на слое с кругом, чтобы выбрать этот круг, нажмите Shift+Ctrl+I, чтобы инвертировать выделение, и нажмите delete. Вы закончили! Одна кнопка готова!
Шаг 10
Затем я создал ещё несколько кнопок, используя разные картинки. Шрифт, которым набрана надпись “Button Maker“, называется “Dynamoe“, если вам интересно!
Источник: http://psdtuts.com/photo-effects-tutorials/photoshop-button-maker/
Популярность: 63%
Похожие уроки photoshop:
- Стильная голубая кнопка
- Учимся создавать дизайн различных продуктов в Photoshop
- Создаем реалистичный дизайн мобильного телефона в стиле Blackberry с нуля
- Профессиональная кнопка навигации
- Кнопки для интерфейса
ВНИМАНИЕ! Столкнулись с трудностями при выполнении данного урока? Осталось что-то, что Вам непонятно? Забыли основы работы в Adobe Photoshop? Не расстраивайтесь! Решение всех Ваших проблем находится прямо здесь: "!" - Это Бесплатный Мультимедиа-Курс от Данного Сайта, пройдя который Вы сможете назвать себя мастером качественной работы в известнейшем графическом редакторе! Узнать о курсе подробнее, а также подписаться на него можно, перейдя на страницу курса: Начальный Курс Photoshop! Подпишитесь и пусть все завидуют тому, как легко и быстро Вы создаете шедевры в Adobe Photoshop! Ждем Вас!
Загрузка ...
Все просто и конкретно. Вот как заставить себя выполнять по одному шагу каждый день?
Октябрь 24th, 2008
Я по 4-5 в день фигачу для веба, фото особо не занимаюсь, иногда взгляну. Космос поделать еще люблю. Экстренное образование прижало, стдыдно на некоторые сайты смотреть, ни хочу туда же скатится со временем.
Октябрь 24th, 2008
А да, кстати. Вот это “как бы то нибыло” в статье вообще угнетает. Хотелось бы видеть полное описание урока со всеми вставками и настройками слоев. А то вроде бы и уроки не уроки .
Октябрь 24th, 2008
Да, хотелось бы видеть уроки более полными.
Октябрь 29th, 2008
Нет, урок конечно интересный, но я про**ся с ним час.. Я конечно не профи, но автор однозначно многое опустил, как ()
для него
банальное. Например, я долго пытался выполнить градиент в параметрах наложения, пока не просёк, что это нужно делать в раб. инструментах.
Но все равно,спасибо. Всё получилось.
Октябрь 29th, 2008
Да нихрена се уроки! Я бл… уже 3 часа мучаюсь над тем, какие же стрелочки нужно нажать вниз и влево? а?????? это даже уроком не назовешь - до всего приходится врубаться самой! Аж вымораживает!!!!! Аффтор, в следующий раз если не умеешь толком объяснять - лучше не лезь, пусть это сделают за тебя люди пограмотнее!!!
Ноябрь 12th, 2008
посмотрите здесь - http://be-online.at.ua/news/2008-09-27-1
Ноябрь 18th, 2008
Ноябрь 19th, 2008
А че новых уроков то нет? Все? кончились?
Ноябрь 24th, 2008
Да ну….статья половинная. Зачем писать статьб, когда ее не поймут..
Это называется собачку подразнить. Смотри как я умею. Пару кнопочек рассказал как нажать, а остальное гадай.
Кнопки норм - Статья не очень.
Ноябрь 26th, 2008
ссылок “как это сделать было описано >тут <” никто не отменил
Ноябрь 26th, 2008
Ноябрь 27th, 2008
Отличный урок, спасибо!
И ещё, заходил сюда http://photoshop-lessons.net.ru/ нашел отличные новогодние клипарты.
Декабрь 3rd, 2008
Декабрь 5th, 2008
Декабрь 5th, 2008
Отличная кнопка! Но у меня неполучилась! Если можешь, скинь пожалуйста готовый шаблон на мыло! Заранее блогадарю!
Декабрь 9th, 2008
Для всех у кого неполучилось создать кнопку-значок, ловите ссылку(Более подробное описание) http://photoweb.com.ua/view_post.php?pho=4&id=139
Декабрь 10th, 2008
Вот тут http://photoshop-lessons.net.ru/view_post.php?id=61 урок по созданию стикера в стиле web 2.0, только подробно и понятно!
Декабрь 11th, 2008
спасибо. но я эту технику давно освоил. классные кнопки получаются
Декабрь 15th, 2008
Недавно начал на Dreamweaver работать как раз пригодиться,на первый взгляд немного
мудрёно,обязательно сегодня попробую.
Декабрь 21st, 2008
Мне сложно разбираться по этим урокам. А можно показать видеоуроки со звуком. Я где-то такие видела, но по другой программе, вот там было все понятно для меня.
Декабрь 25th, 2008
Хорошенький урок… но я его уже видел на demiart.photoshop.ru
Январь 1st, 2009
Привет? тут кто-нибудь есть?
Январь 5th, 2009
Хороший и легкий в освоении урок. Хотелось бы чаще видеть новые уроки у вас.
Январь 11th, 2009
Январь 12th, 2009
Просто и доходчиво - как раз то. что и надо для навичков… Эх, жалко, когда я начинал только таких статетй почти небыло.. Спсибо Вам за то, что даете это для тех, кто хочет учится
Январь 15th, 2009
Очень здорово! Супер статья, терь есть возможность создавать самому эти красивые кнопки!
Январь 22nd, 2009
Да… кнопочки получились очень круто!!!
Надо попробовать сделать что-нибудь интересненькое и красивое!
Январь 23rd, 2009
Красивые кнопки, мне понравилось. Действительно, как тут заметили в коментах, очень доходчиво.
Февраль 1st, 2009
Уж очень хочется научиться работать в фотошопе, вот только есть одна проблема, я никак не могу начать рисовать в нем. У меня фотошоп не риссифицирован, по английски не понимаю всех слов. Пробовал нажимать все. Не могу нарисовать элементарный круг или квадрат. и не могу найти нигде урок, для “полных чайников”. Может кто подскажет. Заранее спасибо.
Февраль 3rd, 2009
Все гениальное-просто!Спасибо.
Февраль 9th, 2009
уроки хуйня,не фига не ясно. и это еще уроком называют
Февраль 12th, 2009
Согласен что нужно более подробно делать переводы… у меня тоже возникли проблемы
Февраль 12th, 2009
Полезняк. Сделаю такие для самописной админки.
Февраль 13th, 2009
А вы делаете кнопки на заказ?
Или может быть у вас есть готовые базы кнопок по разным тематикам? Было бы интересно взглянуть, может быть я бы даже купил.
Февраль 17th, 2009
Подскажите какую-нибудь русскоязычную программку…
Март 1st, 2009
Скажу чесно я в этом не бум бум мне нужна ссылка если не жалко оставьте.
ПЛИИИИИИИИЗ.
Март 2nd, 2009
А мне понравилась статья. Если раньше работал с фотошопом, то всё будет ясно. Хоть я и не сильно дружу с дизайном, но кнопочки теперь буду уметь делать. Спасибо.
Март 5th, 2009
хорошо бы всё подробно расписывать, т.к сижу и не могу найти Inner Shadow (Inner shadow и Inner glow).
Март 9th, 2009
New Keygen, Crack, Patch, Serial, Русификатор к Adobe Photoshop + бонус
http://depositfiles.com/ru/files/fks14to9v
Март 11th, 2009
чёто у меня с инверсией нифига не получается, делаю всё как написанно , выделяю ctrl слой с кругом и нажимаю ctrl+shift+i а потом удаляю слой с картинкой. И вместе с этим удаляется сама кртинка на шаре, вообщем немогу сделать инверсию, что делать????
Март 11th, 2009
Кто хочет разбираться в Фотошопе заходите на сайт http://www.photoshop-master.ru
Сайт с большим количеством уроков на http://www.demiart.ru
Март 16th, 2009
Хороший урок!
Короткий и ясный!
Пошёл кнопочки делать!))
Март 17th, 2009
Спасибо большое за уроки, всё понятно, что бы не говорили в комментариях! Мне понравилось, подпишусь как на вашу ленту
Март 27th, 2009
Неплохой урок. А как сделать такой же стиль текста BUTTON MAKER?
Март 30th, 2009
Спасибо за уроки. Только что Вы давно не добавляли новых?
Март 30th, 2009
Класс!!! Большое спасибо, кнопок себе понаделал =))))))))
Март 31st, 2009
Знал другой способ, но более долгий. А здесь действительно за пять минут можно сделать клевую кнопочку)
Апрель 3rd, 2009
Да, клевые кнопки мона делать…. а я для дизайна делал просто блики и спользовал веб2.0 градиенты
Апрель 6th, 2009
пилять! ну не ужели нельзя делать уроки на русском языке!?!?!?!
Апрель 20th, 2009
Спасибо, получились нопки )
Апрель 21st, 2009
Довольно простой урок
Апрель 21st, 2009
отличный урок, я лично сижу на http://www.psgenius.ru
Апрель 22nd, 2009
Апрель 29th, 2009
а вот здесь есть что скачать по программе фотошоп бесплатно-http://www.photoshop-practicum.ru
Апрель 29th, 2009
Выкладывайте пожалуйста более подробные скриншоты программы очень сложно в этом разобраться,особенно когда не являешься профессионалом, и только начинаешь учиться!
Май 26th, 2009
Отличный урок, спасибо!
Май 27th, 2009
Конкретно и по делу. Результат понравился.Хотелось бы более частого обновления уроков на сайте.
Май 27th, 2009
Где новые уроки?
Июнь 1st, 2009
Так правильно,все просят автора чтобы было все поподробней расписано,вот теперь автор затрачивает больше времени на создание уроков.
Июнь 2nd, 2009
еще неплохо бы добавить отражение к 9 шагу, а так претензий нет
спасибо
Июнь 5th, 2009
Требуем новых уроков!
Июнь 7th, 2009
Хороший урок спасибо, добавил сайт в закладки
Единственное если бы вы писали чаще))
Июль 21st, 2009
Хехей! У вас появился новый ученик! Мне фотошоп знать было бы хорошо, да я никак не начну его изучать =)
Июль 26th, 2009
Алекс, все-равно что-то уроки тут больше публикуют )
Июль 27th, 2009
За урок спасибо очень информативный, но над реалистичностью блика или отражения надо поработать.
Июль 28th, 2009
Cпасибо, мне этот урок очень помог…
Июль 30th, 2009
Сонник, простите, не понял ваш комментарий. Понял только, что вы обращались ко мне.
Июль 30th, 2009
админ, а когда уже будут новые уроки?
Август 4th, 2009
Супер урок! Просто и красиво! Спасибо уже делаю!
Август 13th, 2009
Очень легко и красиво
Август 13th, 2009
Достаточно познавательная статейка, прочитал, попробовал, понравилось)) Спасибо)
Август 25th, 2009
Отличный сайт, замечательно представлен обучающий материал по Adobe Photoshop.
Спасибо огромное Aвтору проекта!!!
Август 26th, 2009
Так давно хочу научиться пользоваться Фотошоп, да времени не хватает. Чтобы научиться делать одну кнопку надо потратить много времени…
Август 27th, 2009
Хороший урок. Все получилось.
Вот только горячие клавиши у меня не работают. Пришлось повозиться, чтоб те же действия в меню найти…
Август 28th, 2009
Ужс сколько комментов
Сентябрь 1st, 2009
Когда уже будут новые уроки? Вы всегда так хорошо писали и теперь такой перерыв в работе.. Ждем новых и интересных уроков!
Сентябрь 2nd, 2009
Fill вроде Opacity, только когда вы ставите Opacity 0%, стили слоя также становятся прозрачными, а если вы сделаете Fill 0%, стили слоя будут видны. Это отлично, поскольку мы избавляемся от зеленого, но у нас по-прежнему есть все для наших кнопок. Теперь все, что нам нужно – это поместить что-то под стили у меня это не получаеться ((((((( где это на русской версии на ходиться??
Сентябрь 4th, 2009
Да, более полный урок действительно необходим и желательно более подробно, что и куда нажать, чтобы при работе в русифицированном фотошопе легко находить аналогию.
Сентябрь 9th, 2009
Я собрался кнопку RSS создавать. Возможно, использую описанную методику.
Сентябрь 16th, 2009
Сложновато немного
Октябрь 2nd, 2009
ingvarr
Терпимо
Октябрь 2nd, 2009
Спасибо за урок, реально классно сделано.
Октябрь 13th, 2009
Спасибо за урок, все очень понятно и доступно!
Октябрь 24th, 2009
Что случилось с сайтом? давно не новых уроков!
Просыпайтесь, авторы
Ноябрь 6th, 2009
Очень подробно написано, давно хочу перерисовать кнопки, но как то руки не доходят, вообще хочется дизайн поменять, да что то так лень((….
Ноябрь 7th, 2009
повне фуфло!!!!! нічого не розумію(((( то не уроки, а якась фігня!!!
Ноябрь 8th, 2009
спасибо! пригодится!
Ноябрь 9th, 2009
Интересный урок, может пригодиться. Благодарю за статью )
Ноябрь 15th, 2009
Это даже не кнопки, а значки металлические, которые на одежду прикрепляют)))
Ноябрь 15th, 2009
спс за инфо
Ноябрь 19th, 2009
А видео у вас есть?
Ноябрь 28th, 2009
Ого, все гениальное просто! Вообще я пока еще очень далек от фотошоп-магии.. но не думал, что такие значки делать так просто! Спасибо, очень симпатичный урок
Декабрь 2nd, 2009
кому лень делать качайте иконки и кнопочки с сайта art-muse.com.ua
Декабрь 6th, 2009
сначала ступила и в глянце оставила черный цвет заливки) и долго ломала голову, какого фига кнопка у меня такая темная получается)
Декабрь 6th, 2009
Вообще с такими уроками остается только фон красивый выбрать и тематически подходящий, остальное разжовано по буквам)
Декабрь 6th, 2009
Спасибо за урок. Кнопка действительно очень реалистичная.
Декабрь 8th, 2009
Когда уже будут новые уроки? Очень жду.
Декабрь 11th, 2009
Понравился урок познавательно! Хочю еще!!!
вот кстати сылочка http://netstorm.com.ua/
Декабрь 23rd, 2009
И я хачу уроки!
Январь 11th, 2010
Кнопка действительно очень реалистичная.
не мешело би еще урок.
Январь 14th, 2010
Вау! спасибо! Крутой у меня значёк получился! И побольше про функции внутреннее\внешнее свечение узнала!
Январь 17th, 2010
Урок прикольный…ко мне в видеоурок на сайте однозначно!!!
Январь 21st, 2010
Прикольненько…добавлю к себе в видеоурок на сайт однозначно!!!
Январь 21st, 2010
Ох уж мне этот фотошоп! Сложная штука! Спасибо за уроки! Будем ЮЗАТЬ!
Январь 24th, 2010
Где Circular selection tool!?
Март 8th, 2010