Здравствуйте, гость ( Вход | Регистрация )

Свернуть

Новости

Форум Лучшее из галереи Уроки и статьи
07.12.2015 Выставочный зал: кошарик - персональная выставка
31.08.2015 Интересные ссылки для рисовальщиков
21.01.2015 Выставочный зал 2: Игрушки Олеси Гавриленко

27.12.2014 Выставочный зал: кошарик - персональная выставка
17.11.2014 Дуэль "Рыбки" - победитель Лисичка
05.11.2014 Конкурс иллюстраций "Снежная королева", до 31 января
30.10.2014 Дуэль "Рыбки" до 16 ноября
14.07.2014 Мастер-класс Мини-мишка в технике фелтинга
26.05.2013 Ау! Мы ищем таланты! – приглашаем модераторов!
ДеVoчка
tn_gallery_16121_1054_197029.png

© Krasivo
06.01.2016 Виртуальный Музей: Русский живописец Василий Дмитриевич Поленов
28.12.2015 Виртуальный Музей: Нидерландский живописец Квентин Массейс
16.12.2015 Виртуальный Музей: Итальянский живописец Франче́ско Айец
17.11.2015 Виртуальный Музей: Луи Анкетен (Louis Anquetin)
11.11.2015 Виртуальный Музей: Русский живописец Алексей Иванович Корзухин
Файловый архив
06.09.2013 Прочее: Файлы к уроку "Чайная церемония"
05.09.2013 Журнал Art Tower: ArtTower Magazine #8
16.05.2013 Adobe Photoshop: Кисти: Reid Southen brush
16.05.2013 Adobe Photoshop: Кисти: Goro Fujita brush
16.05.2013 Adobe Photoshop: Кисти: Кисти для рисования в Photoshop
Блоги Новости в цифровом мире и мире дизайна
02.12.2014 Дама с каменьями: Вести с крыши 2
08.11.2014 Timenews: Вассерман: прежняя модель мировой экономики исчерпала себя
06.11.2014 Дама с каменьями: Приятные вести с крыши))) от Гаргула)
02.11.2014 Spell: Книги Дж. Кэмерон
22.10.2014 Vjaz: от ФУ до МА
25.11.2015 Комментарий от Foxx в Costa Rica Adventure Divers, Логотип для компании и рисунок на майку (maria_mer)
18.11.2015 Комментарий от maria_mer в Spellforce - майка, для фанов игры (maria_mer)
18.11.2015 Комментарий от maria_mer в Белая книга. Целитель - любительский прект (maria_mer)
09.04.2015 Комментарий от Romana в Книги Дж. Кэмерон (Spell)
08.04.2015 Комментарий от Romana в Я решил вернуться... (Элбирет)
16.03.2015 ФОТОФОРУМ-2015
01.01.2015 ARQUTE.com и ArtTalk.ru закрываются
19.01.2017 Конкурс дизайна логотипов
26.12.2016 ру/Ководство: О творческом развитии
14.10.2016 ру/Ководство: Разнообразие

 
Добавить ответ в эту темуОткрыть тему
> Стеклянные кнопки, Создание Rollover`а
V
Shmell
сообщение 15.07.2006 - 20:04
Сообщение #1


bzzzzzz
****

2 место
Группа: Почетные граждане
Сообщений: 970
Регистрация: 8.05.2006
Из: Киева
Пользователь №: 2



Симпатии:  48  


Речь пойдет о создании стеклянных полупрозрачных кнопок. На первый взгляд может показаться, что этот эффект создан с помощью 3D-программ, но на самом деле вы можете добиться такого эффекта, используя всего лишь два-три правильно настроенных векторных объектов. В этом уроке вы научитесь создавать стеклянные объекты в CorelDraw.


Создание стеклянного шара

На эффект стекла влияют такие ключевые факторы, как направление света, его интенсивность, отражение, фокус и цвет. В любом прозрачном объекте его края темнее, чем середина. Мягкое освещение на стеклянный объект, направленное сверху, создает отражение источника света. Сфокусированное отражение делает поверхность более гладкой.

Использование CorelDraw для создания стеклянного эффекта требует внимательного применения цвета и прозрачности к вашим объектам. Чтоб посмотреть, как цвет и освещение влияют на эффект, давайте начнем с создания цветного стеклянного объекта.

1. Нарисуйте окружность диаметром 50 мм (Ellipse tool), удерживая Ctrl.

2. Выберите инструмент Interactive Fill tool (G), в меню свойств выберите тип заливки Radial, а цвет желтый и белый


3. Для точной настройки градиента используйте диалоговое окно Fountain Fill (F11), выберите пункт Custom. Выделите крайний левый цветовой маркер и нажмите кнопку Other, чтобы получить доступ к большему количеству цветов. Выставите цвет C40, M50, Y100, K20. Затем так же выделите крайний правый маркер и установите цвет C0, M0, Y100, K0. Двойным кликом добавьте два новых маркера в положение 25% и 80% и установите цвета C0, M5, Y100, K20 и C0, M0, Y100, K0 соответственно.


4. Для завершения настройки цвета в меню свойств инструмента Interactive Fill tool в окне Fountain Fill Angle and Edge Pad выставите значение 5%. Удалите обводку с окружности.


Для эффекта блика создайте вторую окружность приблизительно 30мм в диаметре, залейте белым цветом и разместите в вверху и в центре большого круга, чуть ниже его края. Не снимая выделения, примените Interactive Transparency Tool. Тяните маркер сверху окружности на три четверти вниз.


Только при помощи двух объектов вы создали реалистичный стеклянный объект. Обратите внимание, что примененная к объекту заливка придает такую иллюзию, что края сферы пропускают меньше света, чем в середине, что придает сфере объема.

Те же действия помогут вам придать стеклянный вид любому объекту. Для этого необходимо помнить, что нужно уделять особое внимание градиентной заливке и направлению эффекта прозрачности.

Теперь на основе рассмотренных шагов мы создадим стеклянные кнопки.

1. Нарисуйте прямоугольник (Rectangle Tool, F6) примерно 115х30мм. (пропорции прямоугольника зависят от текста, который вы хотите поместить на кнопке).

2. Выделите прямоугольник и закруглите у него все углы при помощи введение значения 100% в полях Rectangle Corner Roundness в верхнем меню. Обратите внимание, что замочек Round Corners Together должен быть включен.
Вы также можете скруглить углы вручную, потянув их инструментом Shape.


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

3. Выберите инструмент Interactive Fill и примените градиентную заливку с параметрами по умолчанию, потянув мышкой сверху вниз. Затем откройте диалоговое окно градиента (F11) и перейдите в закладку Custom. В данном примере были использованы такие цвета: маркер 0% - C100, M20, Y0, K80, маркер 100% - C10, M0, Y0, K0, новый маркер 40% - C100, M20, Y0, K20. Прежде чем закрыть окно, установите значение Edge Pad 5%. Нажмите ок и удалите у объекта обводку.


4. Нарисуйте еще один прямоугольник размером примерно 100х13мм, закруглите у него углы, залейте белым цветом, удалите обводку и разместите его поверх первого по центру и вверху, как показано ниже.


5. Выбрав Interactive Transparency Tool потянине мышкой сверху вниз, чтобы применить прозрачность. В меню свойст установите для параметра Edge Pad 8%.


6. Выделите инструментом Pick Tool маленький прямоугольник и скопируйте его, нажав + на клавиатуре. Трансформируйте новый прямоугольник, потянув за нижний центральный маркер вниз и зайлейте цветом Cyan из палитры.

7. Выберите Interactive Transparency Tool и установите маркеры так, как показано на рисунке ниже. Для того, чтобы немного смягчить эффект, перетащите из палитры цветов образец 60% черного цвета на нижний белый маркер. Для завершения смените режим наложения с Normal на Add в меню свойств. Ваша кнопка готова.


Вы можете изменять цвета заливки, создавая различные цветовые варианты кнопок


Для создания эффекта прозрачного стекла вы можете использовать эффект линзы, который будет искажать поверхность, на которой располагается ваш объект.
Для начала сохдайте больший прямоугольник, чем ваша кнопка, который послужит фоном. В данном примере была использована растровая текстура. Чтобы применить такую текстуру, выберите Interactive Fill Tool и найдите в выпадающем меню Fill Type параметр Bitmap Pattern.
Создайте прямоугольник с закругленными углами для будущей кнопки и откройте докер Lens (Alt+F3). Выдерите параметр Fish Eye. Измените значение Rate до тех пор, пока искажение фона не будет достаточным и нажмите Apply или Enter. Чем больше значение параметра Rate, тем сильнее искажается объект.
Затем создайте два меньших прямоугольника для бликов, как было описано в предыдущем примере, залейте их белым и примените Interactive Transparency Tool (сверху-вниз для меньшего, снизу-вверх для большего).


Впишите ваш текст посередине кнопки с помощью Text tool. Для точного центрирования текста объените в группу все элементы кнопки (Ctrl+G), затем выделите группу и текст и нажмите C для центрирования по вертикали и E – по горизонтали.

Подготовка кнопки для веба.
Имея готовую кнопку, мы можем сделать ее интерактивной и задать ей режимы нажатия и перекрытия, называемые Rollover. Поскольку мы имитируем трехмерный эффект с реалистичными бликами, добавление теней станет следующим логическим шагом.
Для создания эффекта Rollover мы будем использовать Internet Toolbar.

1. Разгруппируйте элементы созданной на предыдущих этапах кнопки (Ctrl+U).

2. Выберите Interactive Drop Shadow Tool и кликните на нижнем прямоугольнике. Удерживая Ctrl, потяните от центра к низу. Таким образом вы примените тень с параметрами по умолчанию. В меню свойств установите смещение по X=0, по Y=–0.7мм, прозрачность (opacity) 80, размытие (feathering) 7; цвет тени выберите cyan.


3. Откройте меню веб-инструментов Window > Toolbars > Internet, затем выделите всю кнопку целиком. Нажмите на кнопку Create Rollover (крайняя левая). Убедитесь, что кнопка Live Preview of Rollovers выключена.


4. Нажмите на кнопку Edit Rollover (вторая слева), чтобы установить активное состояние кнопки (сейчас это Normal). Так как мы уже создали основную кнопку, изменять в в ней для этого состояния мы ничего не будем, поэтому перейдем сразу к режиму Перекрытия.


5. Для того, чтобы переключить активное состояние на перекрытие мышкой, выберите в выпадающем меню Over. Выделите надпись и измените ее цвет. В этом примере был выбран белый, чтобы при наведении мышкой на кнопку, ее текст подсвечивался.


6. Теперь перейдите в активное состояние нажатия мышкой на кнопку – Down. Инструментом Pick Tool кликните на тени и в меню Effect выберите Clear Drop Shadow. Этим действием вы удалите тень от кнопки.

7. Оставаясь в режиме редактирования состояния Down, выделите все объекты и откройте докер трансормации расположения объектов (Arrange > Transformations > Position, Alt+F7). Введите значение H=0, а V=–0.7мм и нажмите Apply или Enter. Как вы помните, такие значения мы вводили для эффекта тени, а значит сейчас мы смещаем кнопку на то же место, где находилась тень.


8. Закройте окно трансформации и нажмите на Finish Editing Rollover в меню веб-инструментов. Rollover готов.

Чтобы просмотреть результат, достаточно включить параметр Live Preview of Rollovers.

автор Steve Bain
источник
перевод: Shmell

Сообщение отредактировал Viva - 22.10.2007 - 19:36


--------------------
-- завтра будет. лучше.
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Edwards
сообщение 21.07.2006 - 00:01
Сообщение #2


Добрейшей души человек
***

Меткий стрелок
Группа: Жители
Сообщений: 567
Регистрация: 12.05.2006
Из: С.-Петербург
Пользователь №: 54
Группировка "Придурки"



Симпатии:  79  


Shmell, спасибо!
Я совсем недавно узнал о возможности создания интерфейсов в Кореле с помощью Rollover.

Прикрепленное изображение

Ну, и ссылка на эту же кнопку, но интерактивную - http://img302.imageshack.us/my.php?image=graphic1rj5.swf


--------------------
За все эти годы можно было привыкнуть, но ты не привык до сих пор(© "Зоопарк")
Мой ЖЖ
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
dooFF
сообщение 23.09.2006 - 21:35
Сообщение #3






Группа: Туристы
Сообщений: 1
Регистрация: 23.09.2006
Пользователь №: 893



Симпатии:  0  


Как мне тему открыть новую?!
Или как вставлять картинки, при ответе на сообщения если они у меня на компе, я бы показал пару уроков!!!
Кстати есть давольно простые, но в тоже время и нужные!
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Svetilkin
сообщение 23.09.2006 - 22:11
Сообщение #4


"...я не волшебник......"
*******

Меткий стрелокЗа вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 5975
Регистрация: 8.05.2006
Из: Россия
Пользователь №: 3
:)
Блог


Симпатии:  238  


dooFF, для того, чтобы разместить свой урок, вам необходимо пройти в раздел Ваши уроки и переводы и создать там тему.
Как создать новую тему , написано Здесь

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


--------------------
— Arttower.ru в соц.сетях!
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Стингер
сообщение 10.08.2007 - 10:22
Сообщение #5


ПЗРК.
*****

2 место3 место3 место1 место2 местоМеткий стрелокЗвезда писателя I степени1 местоЗа вклад в развитие ArtTower.ruКаляки-Маляки, 3 место
Каляки-Маляки, 3 местоМеткий стрелок2 место
Группа: Почетные граждане
Сообщений: 2675
Регистрация: 9.05.2006
Из: Королейный
Пользователь №: 27
Допечатка—всему голова!
Галерея Блог


Симпатии:  155  


Почему-то вчера кнопка не получилась. Зато получилась сегодня, и это радует smile.gif



Интерактивчик


--------------------
Деревянная сова нужна каждому. Но не каждый об этом знает.
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
!M@kLeR!
сообщение 15.08.2007 - 23:29
Сообщение #6






Группа: Туристы
Сообщений: 1
Регистрация: 15.08.2007
Из: Russia
Пользователь №: 4840



Симпатии:  0  


Красиво получилось clap.gif
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Artur
сообщение 1.02.2008 - 02:32
Сообщение #7






Группа: Туристы
Сообщений: 1
Регистрация: 1.02.2008
Пользователь №: 7463



Симпатии:  0  


пасипки ,приятный урок!)
Прикрепленные изображения
Прикрепленное изображение
 
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Tananda
сообщение 14.02.2008 - 21:09
Сообщение #8


Проезжий
*


Группа: Туристы
Сообщений: 12
Регистрация: 11.02.2008
Пользователь №: 7597
Галерея


Симпатии:  1  


Спасибо, с удовольствием наделала кучу кнопок.
Только пока не разобралась как их здесь прикрепить.Подскажите пожалуйста.
И еще проблема мой корел на русском о названиях кнопок я только догадываюсь.
Еще раз спасибо. smile.gif
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Viva
сообщение 14.02.2008 - 22:50
Сообщение #9


Злая и пушистая. Белая и колючая.
******

1 место1 местоМеткий стрелок2 место2 местоМеткий стрелокЗвезда писателя I степени2 местоЗа вклад в развитие ArtTower.ruЗа вклад в развитие ArtTower.ru

Группа: Старшие советники
Сообщений: 4613
Регистрация: 10.05.2006
Из: Россия, Черноземье, Липецк
Пользователь №: 45
Вне группировок:)
Галерея Блог


Симпатии:  217  


Tananda, внизу темы - кнопка "Ответить", после нажатия на нее, внизу формы ответа появится поле для загрузки изображения с вашего компьютера и прикрепления его к посту, либо, как вариант, загрузить рисунок на любой бесплатный хостинг картинок, например - www.imageshack.us, и выложить ссылку на него при помощи соответствующей кнопки "вставить изображение"

По поводу русифицированной версии корела могу дать лишь один совет - по возможности, поставьте английскую. Дело в том, что русские версии переводов сильно разнятся, и мы не можем учитывать их все. Английская же форма имеет только 1 вариант названия пунктов меню и кнопок.

Если что-то будет непонятно, я прикреплю к изображению поясняющие картинки. В принципе, интерсующие вас вопросы можно посмотреть в этой теме

Добро пожаловать на форум smile.gif

Сообщение отредактировал Viva - 14.02.2008 - 22:56


--------------------
Самая главная трудность как всегда не в технике, а в людях...

Нельзя дать всем все, ибо всех много, а всего мало.
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Адель
сообщение 29.02.2008 - 22:33
Сообщение #10


Постоялец
**


Группа: Жители
Сообщений: 144
Регистрация: 23.11.2007
Из: Свердловская область
Пользователь №: 6287
Оптимистка
Галерея


Симпатии:  11  


А у меня получилось?
Прикрепленное изображениеПрикрепленное изображение
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
ремир
сообщение 26.03.2008 - 14:38
Сообщение #11






Группа: Туристы
Сообщений: 7
Регистрация: 25.03.2008
Из: москва
Пользователь №: 8107



Симпатии:  0  


Прикрепленное изображение

а как вам такое?


--------------------
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
daria.egorova
сообщение 18.06.2011 - 14:40
Сообщение #12






Группа: Туристы
Сообщений: 1
Регистрация: 18.06.2011
Пользователь №: 18367



Симпатии:  0  


Очень крутой урок! спасибо
Хотела отправить результат работы на всеобщую критику. загрузчик картинок выдает 413 ошибку, помогите разобраться

Сообщение отредактировал daria.egorova - 18.06.2011 - 18:56
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Nac_Nac
сообщение 15.07.2011 - 11:09
Сообщение #13






Группа: Туристы
Сообщений: 5
Регистрация: 15.07.2011
Пользователь №: 18437



Симпатии:  0  


Спасибо! Пригодиться, если соберусь таки нарисовать свой сайтик)


--------------------
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения

Быстрый ответДобавить ответ в эту темуОткрыть тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



- Текстовая версия форума Сейчас: 20.10.2017 - 06:25