Докторская пилюля
На основе видеоурока 003 – Докторская пилюля « TrueCryer's Blog
В этому уроке мы узнаем, как делать блики на «rounded shiny buttons», как говорят веб-дизайнеры, т.е. на выпуклых глянцевых поверхностях. Изучив приемы на пилюле, вы сможете также рисовать кнопки для сайтов.
Создаем новый документ. Нарисуем прямоугольник при помощи инструмента Rectangle с размерами:
- Ширина: 800
- Высота: 200
- Скругление углов: 100 (половина высоты)
Мы получили заготовку. Вызовем диалоговое окно Fill and Stroke (Shift+Ctrl+F). Зальем фигуру желтым цветом. Применим к ней градиент. Выберем вариант Linear Gradient и отредактируем его. Щелкнем на кнопке Edit, перейдем ко второй точке останова и уберем прозрачность (A = 255), а также используем значения для HSL: H = 34, S = 255, L = 255.
Добавим еще одну точку останова. Сделаем фигуры более темной, уменьшив значение L до 75.
Выбираем инструмент Gradient и сделаем его вертикальным. В центре мы видим точку останова, которую можно потянуть вниз.
Продублируем нашу фигуру (Ctrl+D). Чуть-чуть увеличим вторую копию - нажмем комбинацию клавиш Ctrl+). Снова вызовем диалоговое окно Fill and Stroke, если оно закрыто. Здесь нужно обратить внимание на одну вещь. Если мы будем менять градиент у второй копии фигуры, то у первой фигуры также будет меняться градиент (проверьте самостоятельно). Чтобы избежать подобной ситуации, в диалоговом окне нажимаем кнопку Dublicate. У нас появится новый градиент, который и будем редактировать.
Меняем у него значение H = 0, делая его красным. Переходим к оставшимся точкам останова и проделываем ту же операцию. У нас получится красная градиентная фигура.
Нарисуем прямоугольник, чтобы отсечь половину нашей красной фигуры. Выделим сначала красную заготовку, далее при помощи клавиши Shift выделим нарисованный прямоугольник.
Выбираем в меню команду Path→Difference (Ctrl+-). У нас останется половинка красной фигуры, которая чуть больше желтой фигуры.
Далее сделаем на наших фигурах блики. Продублируем красную и желтые фигуры. Нарисуем при помощи инструмента Bezier прямоугольную рамку-путь, потом с помощью редактора узлов (F2) потянем нижнюю часть рамки вниз, чтобы получить дугу.
Продублируем получившуюся рамку-путь. Выделим желтую фигуру и первый путь, далее сделаем пересечение выбранных фигур (Path→Intersection)
Зальем полученный результат светло-серым цветом.
Возьмем второй путь и красную фигуру и тоже получаем из них пересечение при помощи Intersection. Зальем его также светло-серым цветом.
У нас получились две фигуры для блика. Причем одна из них полностью закрывает вторую. А нам нужно получить две половинки для пилюли. Поэтому нужно отрезать часть большого блика. Продублируем красную часть пилюли, объединим ее с большим бликом и применим операцию Difference.
У нас теперь имеются две половинки пилюли и два блика для каждой половинки.
Поработаем с бликами. Мы будем использовать динамический оффсет (Dynamic Offset). Будьте внимательны. Зальем левый блик белым цветом. Выбираем команду Path→Dynamic Offset и уменьшаем фигуру, потянув за единственный узел на фигуре.
Далее выбираем команду Path→Object to Path, потом снова Path→Dynamic Offset и увеличиваем фигуру блика. Если вы все сделали правильно, то фигура блика должна избавиться от острых углов.
Повторяем те же операции с правым бликом.
Далее при помощи инструмета Gradient зальем блики градиентом.
Осталось наложить тень. Возьмем красную половинку, продублируем ее и зальем черным цветом. Кстати, я заметил, что в моих фигурах использовалась обводка, которая совершенно не нужна для пилюли. Если у вас также есть обводка, то удалите ее. В диалоговом окне Fill and Stroke сделаем размытие фигуры (Blur = 1). Теперь опустим тень под красную половинку, но при этом она должна быть выше желтой, чтоб тень от красной пилюли падала на желтую часть, которая меньше красной и следовательно должна иметь тень.
Осталось сделать общую тень, отбрасывамую от всей пилюли. Так как пилюля состоит из двух разных частей, нужно создать общую фигуру. Выделяем все объекты.
Дублируем получившуюся фигуру и применяем объединение (Path→Union). В результате получим фигуру, которая по форме соответствует всей нашей пилюле. Для наглядности я сдвинул на время новую фигуру.
Зальем ее черным цветом и сделаем размытие (Blue = 2). Переместим тень в самый низ под все слои. Выделим все объекты и сгруппируем их (Ctrl+G). Наша пилюля готова. Сохраняем ее и радуемся хорошо сделанной работе.
