В этом уроке я покажу как можно сделать простую, но в тоже время
красивую Download-кнопку в современном и всеми полюбившемся стиле Web
2.0. Download - как пример, использовать этот метод можно для чего
угодно, даже для меню на сайте. Итак, к делу.
1. Создаем новый документ или открываем макет
дизайна для вэб-страницы, если Вы хотите создать меню из этих кнопок. Я
создала документ размером
400х110px, только для кнопки.
2. Далее берем инструмент
Rounded Rectangle Tool (U), чтобы создать форму для кнопки.
В настройках выставим радиус для сглаживания углов
10-15px, Вы можете выбрать и другие значения, зависит от размеров кнопки.
Теперь создайте форму на полотне, цвет формы сейчас не имеет значения.
3. Теперь зададим стили слоя для нашей формы. Идем в свойства
Blending Options (двойной клик по слою рядом с названием на палитре слое или же через меню
Layer > Layer Style.. > Blending Options) и выставляем значения как показано на скриншотах:
Inner Shadow:
Gradient Overlay:
Вы можете использовать любой цвет какой захотите, но кнопка должна выглядеть объемно, примерно вот так:
4. Теперь время добавить симпатичный глянцевый эффект
на нашу будущую кнопку. Создадим выделение в форме нашей кнопки, это
можно сделать зажав Ctrl кликнув по иконке слоя на палитре слоев. Далее
уменьшим его примерно на
5 пикселей со всех сторон. Для этого идем
Select > Modify > Contract и вводим в появившемся окне значение
5. Вот так это должно выглядеть:
Теперь создадим новый слой и зальем наше выделение градиентов от Белого к прозрачному сверху вниз. Вот так:
Далее нам необходимо сделать кривую используя иснтрумент
Pen Tool,
сделайте кривую прямо поверх выделения, заключив в него нижнюю часть
белого градиента кнопки и удалите ее. Вот что получилось у меня:
Я еще использовала большую мягкую кисть для удаления части краев (смягчения), так они выглядят гораздо лучше.
5. Теперь добавим текст на нашу кнопку. Берем иснтрумент
Horizontal Type Tool (T) и пишем желаемый текст.
Для верхнего текста я использовала шрифт
Black Italic,
24 pt,
Sharp,
#fff, для нижнего -
Semibold Italic,
12 pt,
Sharp,
#fff и добавила в свойствах
Blending Options тень:
Drop Shadow:
Вот так это выглядит:
В заключение я добавила отражение и шестеренку для красоты. Если хотите, можете ее скачать вот здесь.
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.
Так, планшет я себе прикупил... фото (80 килобайт) Могу тут-же и обзор состряпать... В общем: Trust TB-3100 (дешевый, 1950 р.). Из цены сразу вытекает одно нехорошее последствие - чувствительность планшета. Рисую диагональ (по линейке), а получается лесенка (это если рисовать нормально или медленно). Резкое движение - линия прямая. Нашел выход - положил на планшет тетрадь в 96 листов и рисую через неё (проблема пропала как ни странно ). В остальном - 512 уровней нажатия, 12 программируемых гор. клавиш. Остальное все хорошо в общем... А если всерьез, то может на самом деле создать в меню раздел "Планшеты"? И пускай там пользователи делятся впечатлениями, советами... ИЗВИНЯЮСЬ за огромный офтопище (но может кому-то это поможет в выборе)...
Ну вот, а модель и производителя указать забыл, самое главное Я вот на WACOM Graphire4 посматриваю, уже даже знаю где купить, осталось только съездить за ним :)
Производитель - Trust, модель - TB-3100. Где производится не знаю, но скорей всего Китай.
Цитата: LuLu
Я вот на WACOM Graphire4 посматриваю
Я вот тоже его хотел. Но его не было, все магазины оббежал (если только на заказ, из Москвы). Но ждать уже не мог
Цитата: 3AHYDA
другие в руках крутил? может покажешь шедевр который с ним нарисовал?
Из других держал в руках только Genius G-Pen 450 и 560 вроде. Trust при той-же цене несколько больше по размеру... Это и повлияло на выбор. На тех не рисовал, но говорят, что хорошие модели. Да и на своем пока ничего стоящего не начирикал (пока только осваиваюсь). P.S. Раздел планшеты точно нужен...
M1ndhunter: Возможно стоило подождать и купить WACOM, я не спец, но читала хорошие отзывы о нем, как куплю, возможно, напишу первые впечатления. Но рисовать через тетрадь - это жесть. Тогда, наверное и отведу раздельчик на сайте об Устройствах, жить и творить, помогающих. Кстати, если хочешь, можешь также написать обзорчик и впечатления от твоего устройства, глядишь и еще кто поделиться впечатлениями, а я потом размещу.
Разница в работе не большая, а очень большая (в лучшую сторону ). После Wacoma больше не считаю Trust планшетом. Тот больше на "игрушку" похож. А вот Wacom - действительно "рабочая лошадка"! Рабочей области хватает. Просто верхний левый угол - соответствует тому-же углу монитора и так далее со всеми углами. Как не води пером, все равно если нажать в верхний правый угол на планшете - попадешь на кнопку закрытия окна "Х" (если программа на весь монитор "распахнута" конечно-же) . Правда больше-бы - удобней было-бы. Но и подороже соответственно. Только вот в комплекте нет программы для настройки функциональных клавиш (на планшете их две + и еще 2 на пере). Еще прикол - в комплекте оказалось два пера (одно точь в точь как у Trust'a). Я сначала даже занервничал... Приготовился уж к тем-же глюкам, как и у труст'а. Но к счастью все обошлось.
Форум - это хорошо. Надо найти свободное время, и "сотворить" более подробный обзор по планшету... Ибо впечатлений он оставил много
Публикаций: 0 | Комментариев: 0 | | ICQ: -- | | |
#17 написал: Артём (22 августа 2007 14:34)
Группа: Гости Зарегистрирован: --
Хотел задать вопрос... У меня чето не получилось... ибо переход к блику стекла не очень понятно описан... теряется переход... немогли бы вы подробней описать процедуру от: Теперь создадим новый слой и зальем наше выделение градиентов от Белого к прозрачному сверху вниз. Вот так: И дальше уже идет рисунок с эффектом!
Извинити за флуд! (теперь зарегился) --------------------------------------------- Хотел задать вопрос... У меня чето не получилось... ибо переход к блику стекла не очень понятно описан... теряется переход... немогли бы вы подробней описать процедуру от: Теперь создадим новый слой и зальем наше выделение градиентов от Белого к прозрачному сверху вниз. Вот так: И дальше уже идет рисунок с эффектом!
Там нет никакого эффекта, это просто градиент как описан, а следующий скрин, это уже удалив ненужную часть градиента. Что б выделить нижнюю часть для удаления можете воспользоваться инструментом Pen или же просто сделать полукругом, сделав овальное выделение на слое с белым градиентом, инвертровать его и удалить лишнее, нажав кнопку Del.
LuLu, Я конечно же прошу прощения... Возможно я якорь... или в подлодке... но я так и не смог придать эффект стекла... Не могли бы вы выложить пару-тройку дельных скриншотов для пояснения... Заранее благодарен!
Привет!!! У меня чтото малех не выходит.Я кагда делаю вот эта:Inner Shadow,Gradient Overlay.У меня выходит ваше все это пространство (400х110)цветом который я натворил тут Gradient Overlay.И ещо ктото может мне перевести все слова на русский, просто у меня русская версия пожалуйста! Кстати сайт СУПЕР!!!
Вы наверное применяете стили слоя для вашего фона, а надо для формы, кликните по слою с формой на панели слоев и применяет к нему все эти стили. А переводить на русский я не могу все команды, делаю для англоязычной версии, чего и всем желаю, т.к. переводы бывают очень различными и если бы я использовала одну версию с переводом одной фирмы, а вы с переводом другой, то команды могли по разному перевести и найти нужную было бы затруднительно, поэтому советую также использовать английскую, со временем привыкните. Inner Shadow - внутрення тень, Gradient overlay - заливка градиентом.
Сделайте второй вариант более светлый или надпись другого цвета, а потом в хтмл соберите эти 2 картинки в работющую кнопку. Чтобы при наведении мышки над изображением оно заменялась другим вариантом.
Работала в компьютерном магазине, и могу подтвердить, что планшеты фирмы WACOM хорошего качества, у фирмы Trust большой % брака по товару, хоть и дешево. Скупой платит дважды!
Спасибо за урок! Все замечательно получилось! Только шрифт такой не нашла! Устанавливать наверно надо! Своим заменила!
При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.
). В остальном - 512 уровней нажатия, 12 программируемых гор. клавиш. Остальное все хорошо в общем... 
Кстати сайт СУПЕР!!!
Сам пользуюсь уже год, (WACOM Intuos A4) просто супер! 
