Рисование стеклянных кнопок продолговатой формы
Такой же точно базовый эффект можно использовать для придания "стеклянного" вида продолговатым кнопкам. Для этого нужно залить линейным градиентом прямоугольник со скругленными углами, а затем использовать уменьшенную копию прямоугольника, чтобы имитировать блик. Хотя существует несколько методов создания подобных кнопок, описанный ниже метод, пожалуй, является самым простым и быстрым и требует использования минимума объектов.
1. При помощи инструмента Rectangle (F6) начертите прямоугольник с размерами приблизительно 12*2 см. В случае необходимости вы можете использовать другие пропорции для кнопки, это зависит от текста, который планируется на ней расположить.
|
2. Не снимая выделения с прямоугольника, используйте Rectangle Corner Roundness и Round Corners Together в верхнем меню. Скруглите все углы фигуры на 100% как показано ниже. Вы также можете скруглить углы вручную, используя Shape Tool (F10).
|
|
Важно: чтобы сохранить симметричность скругленных углов прямоугольника, сразу создавайте фигуру нужного размера вместо того, чтобы затем сжимать или расширять ее, нарушая симметрию.
|
3. Вы берите инструмент Interactive Fill и протащите направляющую сверху вниз, чтобы применить градиентную заливку с параметрами по умолчанию. Чтобы добавить цвета в нужных точках, откройте диалоговое окно Fountain Fill (F11) и в нем выберите Custom. В примере использовалась синяя цветовая схема. Для маркера 0% использован цвет C100, M20, Y0, K80, для маркера 100% - C10, M0, Y0, K0. Добавьте третий маркер в позиции 40% и установите ему цвет C100, M20, Y0, K20. Напоследок установите значение Edge Pad 5% и удалите видимую обводку.
|
|
4. Нарисуйте еще один прямоугольник приблизительно 10*1 см. Скруглите углы также, как у первого, залейте белым и удалите видимую обводку. Расположите белый прямоугольник поверх синего, как показано на рисунке.
|
|
5. Возьмите инструмент Interactive Transparency и протащите его направляющую сверху вниз по верхнему прямоугольнику, чтобы применить к нему линейную прозрачность. В верхнем меню установите 5% для Edge Pad.
|
|
6. Выделите прозрачный прямоугольник и сделайте его копию, нажав + на цифровой клавиатуре. Растяните копию так, чтобы ее нижний край почти доходил до нижней границы кнопки. Залейте ее цветом 100% Cyan, нажав на соответствующий цветной квадратик в палитре.
|
7. Возьмите инструмент Interactive Transparency и протяните направляющую как показано на рисунке. Чтобы слегка смягчить эффект прозрачности, протащите квадратик 60% Black из палитры на место белого маркера инструмента Transparency. В верхнем меню среди параметров прозрачности выберите Add. Выделите все объекты в составе кнопки и сгруппируйте их (Ctrl+G). Ваша кнопка практически готова.
|
|
Изменяя цвета заливки, вы можете создавать кнопки самых разных цветов.
|
Альтернативой градиентной заливке может послужить эффект линзы, примененный к кнопке. Так вы создадите иллюзию прозрачного стекла, искажающего поверхность, находящуюся под ним. Чтобы добиться такого эффекта, для начала создайте прямоугольник, который послужит фоном будущей кнопке. В примере ниже фоном послужил прямоугольник с растровой заливкой. Чтобы применить такую заливку к любому выделенному объекту, возьмите инструмент Interactive Fill и в верхнем меню Fill Type укажите Bitmap Pattern. Нарисуйте базовый прямоугольник со скругленными углами для кнопки поверх фона, затем откройте докер Lens (Alt+F3) и там выберите тип искажения Fish Eye. Увеличьте параметр Rate так, чтобы создать эффект искажения фона. Нажмите Apply. После этого создайте и расположите две меньшие фигуры для бликов, залейте их белым и примените линейную прозрачность (сверху вниз для меньшей, снизу вверх для большей фигуры).
С помощью Text tool добавьте подпись кнопке. Выровняйте текст по центру. Если выделить одновременно текст и кнопку, то можно будет использовать клавиатурные сокращения для выравнивания текста и кнопки по вертикали (клавиша С) и по горизонтали (клавиша Е). Если вам нужно создать несколько кнопок, различающихся лишь надписью, то вы можете использовать вариант кнопки без надписи в качестве шаблона.
|
