Стильная голубая кнопка

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

Сперва создайте новый документ (в моем случае 250х150). Заполните фон цветом #5eaaff. После этого нарисуйте скругленный прямоугольник цвета #a9caee. Я задал радиус в 8px. Назовите слой с прямоугольником “Light Button“.stylish_blue_button_2.gifДобавьте к этому слою стиль Drop Shadow (настройки:Opacity:30% Distance:0 Spread:0 Size:7). Теперь зажмите CTRL и кликните на иконке слоя “Button Light“. Выберите инструмент Gradient (клавиша G). Основной цвет поставьте #FFFFFF, а фоновый цвет (второй квадратик цвета, расположенный чуть ниже и правее первого) задайте #5eaaff. Залейте градиент от самого верха выделения до низа. Зажмите SHIFT, чтобы линия была ровной.stylish_blue_button_3.gifСоздайте новый слой и цветом #5b99de нарисуйте на нем внутри старого новый скругленный прямоугольник с радиусом угла в 4px. Назовите этот слой “Button Dark“.stylish_blue_button_4.gifТеперь можно добавить немного текста. Я добавил надпись “Download” шрифтом Trebuchet MS 15pt Bold. Текст поменьше - Trebuchet MS 10pt без anti-aliasing.stylish_blue_button_5.gifЗажмите CTRL и кликните по иконке слоя “Button Dark“. Отправляйтесь в меню Select > Modify > Contract > 1px. Нарисуйте градиент снизу кверху на новом слое. Понизьте прозрачность полученного слоя до 35%.stylish_blue_button_6.gifИспользуя инструмент Pen, нарисуйте форму, как на рисунке ниже. Назовите новый слой “Light 3stylish_blue_button_7.gifЗажмите CTRL и кликните по иконке слоя “Light Button“. Потом Select > Inverse. Кликните правой кнопкой по слою “Light 3” и выберите пункт Rasterize Layer. Теперь, не снимая выделения, и с выбранным слоем “Light 3” нажмите клавишу Delete. Понизьте прозрачность слоя до около 20%.stylish_blue_button_8.gifТеперь выделите все слои, зажав CTRL и кликнув по каждому из них. Щелкните правой кнопкой по любому из слоев и выберите пункт “Duplicate Layers“. После этого слейте все скопированные слои в один (выделите их и нажмите Ctrl + E). Назовите получившийся слой “Reflection“. Направляйтесь в Edit >Transform > Flip Vertically. Не снимайте выделения с этого слоя. Передвиньте его так, чтобы он оказался ниже кнопки.Теперь переместите этот слой в палитре слоев выше слоя “Background“. Добавьте к слою маску (кликните в палитре слоев внизу на иконку прямоугольничка с окружностью на нем). Выберите инструмент Gradient (клавиша G) и задайте цвета белый и черный (нажмите клавишу D). Убедитесь, что в палитре слоев выбрана именно маска слоя “Reflection“, а не сам слой, и “протащите” градиент, как на рисунке ниже:stylish_blue_button_9.gifВот, что должно получиться в итоге:Стильная голубая кнопкаГотово! ;) Источник:

Популярность:10%

Создаем красивое лого в стиле Веб 2.0 Создаем красивое лого в стиле Веб 2.0
Всего за семь минут Вы сможете сделать первоклассное Web 2.0 лого для своего сайта!Приблизительное время выполнения: 7 минутЧитать полностью »Популярность:18%

Как сделать стильную форму поиска Как сделать стильную форму поиска
Создаем красивую форму поиска для Вашего сайта!Приблизительное время выполнения: 9 минутЧитать полностью »Популярность:12%

Стильный значок для Вашего сайта Стильный значок для Вашего сайта
Узнайте, как создать красивый веб 2.0 значок, который можно использовать где-угодно!Приблизительное время выполнения: 6 минутЧитать полностью »Популярность:17%

Классные кнопки со стеклянным блеском Классные кнопки со стеклянным блеском
Этот урок научит Вас создавать классные кнопки с отблеском, как у стекла, которые Вы сможете использовать не только на своем сайте, но и на баннерах, печатных материалах и т.п.Читать полностью »Популярность:15%

Как сделать из фотографии рисунок в Photoshop Как сделать из фотографии рисунок в Photoshop
Превращаем красивую девушку на фото в красивую девушку на картинке!Приблизительное время выполнения: 9 минутЧитать полностью »Популярность:57%