Создание объёмной кнопки для сайта
В этом уроке по работе с фотошопом я покажу как можно создать красивую объёмную кнопку для сайта.
Один из вариантов создания похожей кнопки я уже рассматривал в уроке под названием: "".
Откроем новый документ: "Файл - Новый" или просто нажмём Ctrl+N.
В окне документа установим параметры, указанные на рисунке. В дальнейшем размер кнопки можно будет уменьшить.
Установим цвет переднего плана чёрный. Для этого достаточно нажать клавишу D.
Выберем инструмент "Заливка" (G).
Щёлкнем по нашему документу и он окрасится в чёрный цвет.
Создадим новый слой. Для этого щёлкнем по второй справа иконке в палитре "Слои".
Выберем инструмент "Овальная область" (M).
Нажмём и удерживаем клавиши Alt и Shift, наведём курсор на центр нашего слоя, щёлкнем левой кнопкой мыши и создадим круглое выделение, расположенное по центру нашего изображения.
Зальём наше выделение любым цветом, отличным от чёрного. Для этого щёлкаем по иконке цвета переднего плана и в окне выбора цвета устанавливаем необходимый цвет, к примеру зелёный.
Выбираем инструмент "Заливка" (G) и щёлкаем им по нашему выделению. Оно окрасится в зелёный цвет.
Придадим верхнему слою некоторые стили. Для этого щёлкаем по второй слева иконке fx в палитре "Слои" и в раскрывшемся списке выбираем "Внутренняя тень".
В окне "Стиль слоя" я поставил значения, которые Вы видите на рисунке. Вы конечно можете выбрать свои параметры.
Переходим к параметру "Внутренне свечение". Я установил вот такие значения. Вы, как всегда, вольны выбрать то, что Вам нравится.
Выбираем "Глянец" и устанавливаем такие параметры, чтобы кнопка выглядела объёмной. Нажимаем "Да".
Придадим ещё большую объёмность нашей кнопке. Для этого идём по такому пути. Создаём новый слой - Ctrl+N.
Устанавливаем цвет перднего плана белый. Для этого вначале нажимаем D (цвета переднего и изаднего плана установились по умолчанию, т.е. цвет перднего плана чёрный, а заднего - белый), а затем X (цвета переденго и заднего цветов поменялись местами).
Выбираем инструмент "Градиент" (G).
Щёлкнув по окошку градиента, выбираем градиент от цвета переднего плана к прозрачности, градиент - линейный.
Проводим нашим градиентом сверху вниз.
Вот что у нас получилось.
Снимаем выделение - Ctrl+D.
Применяем инструмент трансформирования - Ctrl+T.
Нижний центральный маркер двигаем вверх.
Левый и правый центральные маркеры двигаем вправо и влево соответственно.
Поворачиваем рамку трансформации по часовой стрелке.
Перемещаем рамку в верхний правый угол.
Нажимаем Enter.
Дублируем верхний слой, просто перетащив его на вторую справа иконку "Создать новый слой" палитры "Слои".
Идём в "Редактирование - Трансформирование - Отразить по горизонтали".
Точно также отражаем по вертикали и перетаскиваем с помощью инструмента "Перемещение" (V) наш блик в нижний левый противоположный угол.
У нас остался активным верхний слой. Нажимаем сочетание клавиш Ctrl+E и наши два слоя с бликами объединятся.
Выбираем "Фильтр - Размытие - Размытие по Гауссу".
В окне фильтра примерно устанавливаем такой радиус размытия.
Переходим на слой с зелёной кнопкой и устанавливаем параметр "Заливка" для этого слоя равным нулю.
Переходим на верхний слой и создаём новый слой - Ctrl+N.
Выбираем, к примеру, синий цвет и заливаем им, с помощью инструмента "Заливка" (G) наш верхний слой. Всё точно также, как и описывалось выше.
Выберем инструмент "Горизонтальный текст" и что-нибудь напишем.
Объединим текстовый слой и "Слой 3" - Ctrl+E.
Перетащим наш объединённый слой под слой с кнопкой и инструментом "Перемещение" (V), разместим нашу надпись по центру кнопки.
Щёлкнем левой кнопкой мыши по зелёной кнопке (Слой 1) и наша кнопка выделится.
Нажмём сочетание клавиш Shift+Ctrl+I и наше выделение инвертируется.
Нажимаем кнопку Delete и снимаем выделение - Ctrl+D. Наша кнопка готова!

В этом уроке по работе с фотошопом я покажу как можно создать красивую объёмную кнопку для сайта.

Один из вариантов создания похожей кнопки я уже рассматривал в уроке под названием: "Создание круглой кнопки для Вашего сайта".


Подобные публикации:


{smooth-scroll-top}

Откроем новый документ: "Файл - Новый" или просто нажмём Ctrl+N.




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




Установим цвет переднего плана чёрный. Для этого достаточно нажать клавишу D.




Выберем инструмент "Заливка" (G).




Щёлкнем по нашему документу и он окрасится в чёрный цвет.




Создадим новый слой. Для этого щёлкнем по второй справа иконке в палитре "Слои".




Выберем инструмент "Овальная область" (M).




Нажмём и удерживаем клавиши Alt и Shift, наведём курсор на центр нашего слоя, щёлкнем левой кнопкой мыши и создадим круглое выделение, расположенное по центру нашего изображения.




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




Выбираем инструмент "Заливка" (G) и щёлкаем им по нашему выделению. Оно окрасится в зелёный цвет.




Придадим верхнему слою некоторые стили. Для этого щёлкаем по второй слева иконке fx в палитре "Слои" и в раскрывшемся списке выбираем "Внутренняя тень".




В окне "Стиль слоя" я поставил значения, которые Вы видите на рисунке. Вы конечно можете выбрать свои параметры.




Переходим к параметру "Внутренне свечение". Я установил вот такие значения. Вы, как всегда, вольны выбрать то, что Вам нравится.




Выбираем "Глянец" и устанавливаем такие параметры, чтобы кнопка выглядела объёмной. Нажимаем "Да".




Придадим ещё большую объёмность нашей кнопке. Для этого идём по такому пути. Создаём новый слой - Ctrl+N.




Устанавливаем цвет перднего плана белый. Для этого вначале нажимаем D (цвета переднего и изаднего плана установились по умолчанию, т.е. цвет перднего плана чёрный, а заднего - белый), а затем X (цвета переденго и заднего цветов поменялись местами). Выбираем инструмент "Градиент" (G).



Щёлкнув по окошку градиента, выбираем градиент от цвета переднего плана к прозрачности, градиент - линейный.




Проводим нашим градиентом сверху вниз.




Вот что у нас получилось.




Снимаем выделение - Ctrl+D. Применяем инструмент трансформирования - Ctrl+T.




Нижний центральный маркер двигаем вверх.




Левый и правый центральные маркеры двигаем вправо и влево соответственно.




Поворачиваем рамку трансформации по часовой стрелке.




Перемещаем рамку в верхний правый угол.




Нажимаем Enter.




Дублируем верхний слой, просто перетащив его на вторую справа иконку "Создать новый слой" палитры "Слои".




Идём в "Редактирование - Трансформирование - Отразить по горизонтали".






Точно также отражаем по вертикали и перетаскиваем с помощью инструмента "Перемещение" (V) наш блик в нижний левый противоположный угол.




У нас остался активным верхний слой. Нажимаем сочетание клавиш Ctrl+E и наши два слоя с бликами объединятся.




Выбираем "Фильтр - Размытие - Размытие по Гауссу".




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




Переходим на слой с зелёной кнопкой и устанавливаем параметр "Заливка" для этого слоя равным нулю.




Переходим на верхний слой и создаём новый слой - Ctrl+N.




Выбираем, к примеру, синий цвет и заливаем им, с помощью инструмента "Заливка" (G) наш верхний слой. Всё точно также, как и описывалось выше.




Выберем инструмент "Горизонтальный текст" и что-нибудь напишем.




Объединим текстовый слой и "Слой 3" - Ctrl+E.




Перетащим наш объединённый слой под слой с кнопкой и инструментом "Перемещение" (V), разместим нашу надпись по центру кнопки.




При нажатой кнопке Ctrl щёлкнем левой кнопкой мыши по зелёной кнопке (Слой 1) и наша кнопка выделится.




Нажмём сочетание клавиш Shift+Ctrl+I и наше выделение инвертируется.




Нажимаем кнопку Delete и снимаем выделение - Ctrl+D. Наша кнопка готова!



{smooth-scroll-top}

Комментарии  

Guest
0 # Guest 25.12.2013 05:41
не очень как-то...
Ответить | Ответить с цитатой | Цитировать
ОООООООО
0 # ОООООООО 04.09.2011 05:33
:woohoo:
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 27.02.2011 23:04
B) :side: :side: :side: :side: :side: :side: :side: :side: :side:
Ответить | Ответить с цитатой | Цитировать

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

Введите Ваше имя, или зарегистрируйтесь на сайте, что бы имя в ответах вставлялось автоматически: это займёт 2 минуты! После регистрации вы сможете редактировать свои сообщения и не придётся вводить подтверждение.
Ваш аватар к комментарию возможен, если вы зарегистрированы в системе Gravatar. Если нет - зарегистрируйтесь, это бесплатно.


Кто на сайте

Сейчас 312 гостей и один зарегистрированный пользователь на сайте

  • chiglova1

Помощь сайту

Понравился сайт? Внесите вклад в его развитие, пожертвовав любую сумму.

Деньги пойдут на оплату серверов и на развитие сайта.

В примечании к платежу, при желании, укажите свои данные.

Пользователи, внесшие вклад

Вход на сайт

ВСЕ РАССЫЛКИ САЙТА НА EMAIL

 

РАССЫЛКИ ВКОНТАКТЕ

 

 Начните свой путь в мир ФОТОШОПА сейчас!

Основная полезная рассылка сайта.

Соглашение

 

 

 

 

Поиск по сайту

Присоединяйтесь в

Что в сундучке?

  • Текстовых уроков - 1152
  • Видеоуроков - 765
  • Вебинаров и тренингов - 66
  • Практических советов - 167
  • Программ - 7
  • Шаблонов, обоев и клипартов - 368
  • Наборов кистей, фигур - 320
  • Календарей - 117
  • Наборов рамок - 560
  • Книг, журналов - 125
  • Текстур, узоров и фонов - 44
  • Наборов иконок - 28
  • Наборов логотипов - 3
  • Наборов стилей - 51
  • Шрифтов - 78
  • Разное - 70