Beauty – ретушь для начинающих при помощи Photoshop.

Beauty – ретушь для начинающих при помощи Photoshop.

Эффект голограммы на фотографии.

Эффект голограммы на фотографии.

Создание портрета при помощи шрифтов.

Создание портрета при помощи шрифтов.

Создаем красивую оригинальную шапку для блога.

Создаем красивую оригинальную шапку для блога.

Необычный эффект глаз при помощи Photoshop.

Необычный эффект глаз при помощи Photoshop.

Создаем макет сайта о звездах и знаменитостях.

Создаем макет сайта о звездах и знаменитостях.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию футуристического логотипа в фотошоп.

Урок по созданию футуристического логотипа в фотошоп.

Создаем дизайн телефона на Android в Photoshop.

Создаем дизайн телефона на Android в Photoshop.

Создание макета сайта в стиле минимализма.

Создание макета сайта в стиле минимализма.

Как создать пиксельную кнопку в фотошопе

Как создать пиксельную кнопку в фотошопе

Создаем макет сайта для службы знакомств.

Создаем макет сайта для службы знакомств.

Создание RSS иконки.

Создание RSS иконки.

Урок по созданию простого  и современного  макета для сайта.

Урок по созданию простого и современного макета для сайта.

Графика для сайта.  Рисуем иконку на сайт.

Графика для сайта. Рисуем иконку на сайт.

Урок по созданию зимнего текста.

Урок по созданию зимнего текста.

Урок по созданию красивого новогоднего макета в фотошоп.

Урок по созданию красивого новогоднего макета в фотошоп.

Псевдо HDR.

Псевдо HDR.

Как создать основу для рекламы профессиональной косметики для волос.

Как создать основу для рекламы профессиональной косметики для волос.

Создание эффекта рисунка на фотографии.

Создание эффекта рисунка на фотографии.

Создаем макет сайта, продающий програмное обеспечение.

Создаем макет сайта, продающий програмное обеспечение.

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта для гостиниц и ресторанов.

Урок по созданию макета сайта для гостиниц и ресторанов.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию яркого красочного дизайна сайта.

Урок по созданию яркого красочного дизайна сайта.

Создание простого и стильного макета сайта.

Создание простого и стильного макета сайта.

Создаем макет блога в фотошоп.

Создаем макет блога в фотошоп.

Создаем оригинальный чистый стиль для сайта.

Создаем оригинальный чистый стиль для сайта.

Создаем профессиональную панель навигации для сайта.

Создаем профессиональную панель навигации для сайта.

Рисуем милую девчушку-смайл.

Рисуем милую девчушку-смайл.

Урок по рисованию прохлаждающегося солнца.

Урок по рисованию прохлаждающегося солнца.

Фантастический эффект фотографии.

Фантастический эффект фотографии.

Создание приятного макета сайта портфолио.

Создание приятного макета сайта портфолио.

Создание макета сайта для портфолио в стиле Веб 2.0

Создание макета сайта для портфолио в стиле Веб 2.0

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок рисования реалистичного динамика.

Урок рисования реалистичного динамика.

Создаем стильный коллаж.

Создаем стильный коллаж.

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок создание эффекта металлического текста

Урок создание эффекта металлического текста

Небесный коллаж

Небесный коллаж

Как создать пиксельную кнопку в фотошопе

Tags: Графика для сайта | Уроки Photoshop | уроки web дизайна | уроки веб дизайна

33-7

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

 

 

 

 

 

 

Создайте новый документ размером 300*300 пикселей.

33-1

Залейте содержимое области темно-серым цветом. При помощи инструмента Прямоугольник со скругленными углами создайте форму черного цвета.

 

33-2

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

33-3

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

33-4

Далее при помощи инструмента Карандаш толщиной в 1 пиксель создайте полоски подобно тому, как показано на рисунке. Для того чтобы линии получились достаточно ровными зажмите клавишу Shift.

33-5

Далее при помощи мягкого ластика уберите слегка ненужные области. Добейтесь такого результата как на картинке.

33-6

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

33-7

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

33-8

33-9

33-10

Данные методы лучше будет сделать для разделения активной кнопки  от неактивной.

AddThis Social Bookmark Button
 

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


Защитный код
Обновить

поиск
RSS
Подготовка макета.

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

кол-во просмотров6418
Подробнее...

Стили сайтов. Промостиль.

     Промо-стиль, или иначе как его называют презентационный, максимально раскрывает оформительские способности дизайнера. Главная черта сайтов в таком стиле является...

кол-во просмотров4447
Подробнее...

Контент. Как сделать материал читаемым.

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

кол-во просмотров6637
Подробнее...

Интересная подборка креативных вещей.

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

кол-во просмотров5376
Подробнее...

Несколько интересных и креативных рекламных плакатов.

Как известно, хорошая реклама всегда привлекает внимание потенциальных клиентов по отношению к товарам и услугам, которые мы им предлагаем. Для любого...

кол-во просмотров4441
Подробнее...