Уроки Photoshop CS2 :: Уроки фотошопа :: Уроки adobe photoshop :: Регулярные пополнения базы уроков

Этот урок расскажет Вам, как сделать небольшую, но стильную голубую кнопку для Вашего сайта.

Сперва создайте новый документ (в моем случае 250х150). Заполните фон цветом #5eaaff. После этого нарисуйте скругленный прямоугольник цвета #a9caee. Я задал радиус в 8px. Назовите слой с прямоугольником «Light Button«.

Добавьте к этому слою стиль Drop Shadow (настройки: Opacity: 30% Distance: 0 Spread: 0 Size: 7). Теперь зажмите CTRL и кликните на иконке слоя «Button Light«. Выберите инструмент Gradient (клавиша G). Основной цвет поставьте #FFFFFF, а фоновый цвет (второй квадратик цвета, расположенный чуть ниже и правее первого) задайте #5eaaff. Залейте градиент от самого верха выделения до низа. Зажмите SHIFT, чтобы линия была ровной.

Создайте новый слой и цветом #5b99de нарисуйте на нем внутри старого новый скругленный прямоугольник с радиусом угла в 4px. Назовите этот слой «Button Dark«.

Теперь можно добавить немного текста. Я добавил надпись «Download» шрифтом Trebuchet MS 15pt Bold. Текст поменьше — Trebuchet MS 10pt без anti-aliasing.

Зажмите CTRL и кликните по иконке слоя «Button Dark«. Отправляйтесь в меню Select > Modify > Contract > 1px. Нарисуйте градиент снизу кверху на новом слое. Понизьте прозрачность полученного слоя до 35%.

Используя инструмент Pen, нарисуйте форму, как на рисунке ниже. Назовите новый слой «Light 3»

Зажмите CTRL и кликните по иконке слоя «Light Button«. Потом Select > Inverse. Кликните правой кнопкой по слою «Light 3» и выберите пункт Rasterize Layer. Теперь, не снимая выделения, и с выбранным слоем «Light 3» нажмите клавишу Delete. Понизьте прозрачность слоя до около 20%.

Теперь выделите все слои, зажав CTRL и кликнув по каждому из них. Щелкните правой кнопкой по любому из слоев и выберите пункт «Duplicate Layers«. После этого слейте все скопированные слои в один (выделите их и нажмите Ctrl + E). Назовите получившийся слой «Reflection«. Направляйтесь в Edit >Transform > Flip Vertically. Не снимайте выделения с этого слоя. Передвиньте его так, чтобы он оказался ниже кнопки.

Теперь переместите этот слой в палитре слоев выше слоя «Background«. Добавьте к слою маску (кликните в палитре слоев внизу на иконку прямоугольничка с окружностью на нем). Выберите инструмент Gradient (клавиша G) и задайте цвета белый и черный (нажмите клавишу D). Убедитесь, что в палитре слоев выбрана именно маска слоя «Reflection«, а не сам слой, и «протащите» градиент, как на рисунке ниже:

Вот, что должно получиться в итоге:

Готово!

Источник: http://www.webdesignersfx.com/forums/index.php?showtopic=28

• Плавный переход в фотошопе
• Уроки фотошопа
• Губы в фотошопе
• Как увеличить грудь в фотошопе?
• Фото в картину
• Как сделать кровь в фотошопе?
• Фотошоп уроки работа с фото
• Как изменить цвет машины в фотошопе?
• Как улучшить фотографию?
• Aee