Меню сайта

Реклама



Мини-профиль
Турист



СТАЛКЕР!
Привет сталкер!
Я рад тбя видеть!
Но я незнаю кто ты?
Регистрация
Вход!

---

Список Сталкеров

Мини-чат

Вход на сайт
Ну что застыл?Входи уже!
Логин:
Пароль:

Поиск

Активисты форума
Мировой
"VIP"
Ранг: Бог зоны
Посты: 1857
Пол: Сталкер
Репутация: 521
Ramzes
"Модератор"
Ранг: Бог зоны
Посты: 1116
Пол: Сталкер
Репутация: 112
Червь
"VIP"
Ранг: Бог зоны
Посты: 875
Пол: Сталкер
Репутация: 250

Наш опрос
Любимая локация из Тени Чернобыля?
Ответов: 285

Друзья сайта


Друзья сайта


Статистика

Форум
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Photoshop » Уроки Photoshop » Кнопки для сайта
Кнопки для сайта
LabysДата: Понедельник, 18.07.2011, 00:03 | Сообщение # 1


Сообщений: 251
Награды: 4
Репутация: 184

Статус:
И снова здравствуйте!! На сегодняшнем уроке мы с вами будем учиться делать симпатичные кнопки для сайта.

1. Создаем новый документ в Adobe Photoshop. Фон и размер значения не имеют.

2. Делаем заготовку.
С помощью инструмента
Прямоугольник со скругленными краями
(Rounded Rectangle)
рисуем такую фигуру. У меня радиус закругления 5 пикселей.

Создаем новый слой через Shift+Ctrl+N или нажав на иконке нового слоя в окне слоев (если оно закрыто, нажмите F7).

Теперь, используя
Ellipse Tool (Эллипс)
и удерживая Shift, чтобы окружность была пропорциональной, рисуем круг, который накладывается поверх прямоугольника. Приблизительно так:
,
Можете переместить фигуры с помощью знакомого инструмента
Move Tool (Перемещение)
Удерживая CTRL, кликаем на слой с кругом, чтобы выделить его.

Далее идем в
Select–Modify–Contract
(Выделение–Модификация–Сжать)
и ставим значение 5 пикселей.

Создаем из выделения новый слой Ctrl+J:

и заливаем его любым цветом с помощью инструмента
Bucket (Заливка)
Ту же операцию проделываем с прямоугольником. После того, как залили и это выделение, снова кликайте на слой с кругом (который больше) и нажмите Delete. Должно получиться так:

Соединяем слои круга и прямоугольника (большие)
Merge Layers (Слить слои).

Применяем к ним эффект
Layer-Layer Effects-Gradient Overlay
(Слои-Эффекты слоев-Градиент):

К меньшему кругу и обрезанному прямоугольнику применяем такие настройки (из той же группы Layer-Layer Effects):
Inner Glow (Внутреннее свечение);
Bevel and Emboss (Скос и рельеф);
Gradient Overlay (Градиент);
Stroke (Обводка, или Штрих):

Получилось вот такое:

3. Добавление деталей
Выделяем обрезанный прямоугольник, кликнув на его слое.

Опять сжимаем выделение, на этот раз на 2 пикселя.
С помощью инструмента Select Tool (Выделение), с такими настройками

удаляем нижнюю часть выделения (Delete). Прошу прощения за многочисленную тавтологию…
Создаем новый слой и заливаем выделенную область белым цветом. В окне слоев в правом верхнем углу уменьшаем
Opacity (Непрозрачность)
до 20%.

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

Добавляем картинку и текст. В настройках для нижнего слоя можно добавить тень, по вкусу.
Кнопка готова

Вот и другие варианты, выполненные по данному методу

Надеюсь, пригодится. Спасибо за внимание, встретимся после перерыва... И не дай бог кто-то решит прогулять!
Автор: Найкрис Кроули
Форум » Photoshop » Уроки Photoshop » Кнопки для сайта
  • Страница 1 из 1
  • 1
Поиск:

Портал Stalker-St является собственностью его владельца.
Копирование материалов дизайна Запрещено!
Дизайн сделал Александр Пюссе (Grimm)
Stalker-St.ru © 2011 - 2014
Хостинг от uCoz