Inkscape Photoshop Others I'm button

Докторская пилюля

На основе видеоурока 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). Наша пилюля готова. Сохраняем ее и радуемся хорошо сделанной работе.

Посмотреть видео (2 части)


Скачать видео

Реклама

© А.Климов 2017

Рейтинг@Mail.ru