И снова здравствуйте!!
На сегодняшнем уроке мы с вами будем учиться делать симпатичные кнопки для сайта.
1. Создаем новый документ. Фон и размер значения не имеют.
2. Делаем заготовку.
С помощью инструмента «Прямоугольник со скругленными краями» (Rounded Rectangle) рисуем такую фигуру. У меня радиус закругления 5 пикселей.
Теперь, используя «Эллипс» и удерживая Shift, рисуем круг, который налаживается поверх прямоугольника. Приблизительно так:
Удерживая CTRL, кликаем на слой с кругом, чтобы выделить его.
Далее идем:
Выделение – Модификация – Сжать(5 пикселей)
Select – modify – contract
Создаем новый слой и заливаем его любым цветом.
Ту же операцию проделываем с прямоугольником. После того, как залили и это выделение, снова кликайте на слой с кругом (который больше) и нажмите Delete. Должно получиться так:
Соединяем слои круга и прямоугольника (большие). Применяем к ним эффект:
К меньшему кругу и обрезанному прямоугольнику применяем такие настройки:
Получилось вот такое:
3. Добавление деталей
Выделяем обрезанный прямоугольник.
Опять сжимаем выделение, на этот раз на 2 пикселя.
С помощью инструмента «Выделение», с такими настройками
, удаляем нижнюю часть выделения.
Прошу прощения за многочисленную тавтологию…
Создаем новый слой и заливаем выделенную область белым цветом. Уменьшаем «Непрозрачность» (Opacity) до 20%
Подобные манипуляции проделываем и на круглой части кнопки, чтобы и там добавить бликов.
Добавляем картинку и текст. В настройках для нижнего слоя можно добавить тень, по вкусу.
Кнопка готова
Вот и другие варианты, выполненные по данному методу
Надеюсь, пригодится.
Спасибо за внимание, встретимся после перерыва… И не дай бог кто-то решит прогулять!!
Автор: Найкрис Кроули.
При использовании материала ссылка на сайт обязательна
Постовой:
А здесь раздают SEO софт.
Создаем Ледяной Текст в Фотошопе
ICQ#
e-mail:
Комментариев: 6 [о новых скажет RSS]
10 августа 2008 в 9:26
Здорово. Спасибо за уроки. Блин - была куча вопросов по работе с фотошопом, щас и не вспомнить, что конкретно хотелось бы узнать. Единственное, что хочется узнать, да и наверное не мне одному - раскажите, как делать в фотошопе, анимированные баннеры? желательно красивые, и желательно также с наглядными примерами. ?
Заранее спасибо.
10 августа 2008 в 12:26
Андроид, вспоминай все, что хотел, обязательно отвечу!
А насчет анимации в фотошопе - будет! Давно хотел, но небыл уверен, что нужно. А коль такие дела, то не буду медлить. В ближайшие день-два опубликую
3 октября 2008 в 21:25
Я это все таки сделал_!!
правда, из за того что Вы некоторые вещи не объяснили, было трудно пока сам найду_!!
Спасибо за урок, убил пару лишних часов_!!
3 октября 2008 в 21:52
А что я упустил, о чем не рассказл, где возникли затруднения?
8 ноября 2008 в 11:42
вот вопрос как с помощью Html сделать чтобы при наведение на кнопку скажем напдпись меня свой цвет а при нажатие казалось бутто реально кнопка нажата ???
8 ноября 2008 в 14:08
При наведении как сделать, я описывал тут
http://naykris.com/menyu-dlya-sajta-svoimi-rukami/
чтобы при нажатии менялось изображение, я делал когда-то с помощью яваскриптов, но как мне кажется, это лишний эффект. Хотя, если сильно нужно, могу поискать.
Комментировать