Рисуем банку

Запустите редактор и для удобства установите сетку.

Чтобы нарисовать банку, надо нарисовать два эллипса, которые будут являться дном и крышкой банки и соединить их линиями. Посмотрим, как это сделать быстро.

С помощью инструмента Ellipse Ellipse (F5 или e) нарисуем вытянутый эллипс, который послужит крышкой банки. Закрасьте его красным цветом.

Чтобы нарисовать дно банки, мы сделаем копию крышки через операцию Duplicate Duplicate или меню Edit | Duplicate или комбинацию Ctrl+D.

Копия эллипса появится поверх первого эллипса и будет выбрана. Нажмите и удерживайте клавишу Ctrl и перетащите эллипс вниз. Зажатая клавиша позволит сдвинуть фигуру строго вертикально.

Стенки банки можно сформировать, если соединить нижний полуэллипс с верхним полуэллипсом.

Сделайте копию верхнего эллипса (Ctrl+D). Выбранную сейчас копию трансформируем через меню Path | Object to Path. Хотя видимых изменений не произойдёт, мы теперь можем редактировать эллипс.

Для этого выберите инструмент Node Node (F2 или n). У эллипса появятся четыре узловые точки. Выберите верхний узел и удалите его клавишей Delete или через инструмент (Delete selected nodes).

Теперь выделите два боковые узла и удалите сегмент через (Delete segment between two non-endpoint nodes).

Повторите эти же операции с нижним эллипсом.

У вас останутся два полуэллипса и один эллипс, который для удобства следует перекрасить в другой цвет.

Can

Соединим две половинки через Path | Combine

Снова выбираем инструмент Node и у полученной фигуры выбираем два левых узла - один у верхней половинки, второй - у нижней половинки, удерживая клавишу Shift. Соединяем их через (Join selected endnodes with a new segment). Повторите операции с двумя правыми узлами.

Банка готова

Can

Сохраните свою работу.

Следующий этап - работа с градиентами.

Выберите сначала основную часть банки (без крышки). Затем выберите инструмент Gradient Gradient Tool (Ctrl+F1 или g) и проведите отрезок от одной стороны банки в другую.

Существует другой вариант - откройте диалоговое окно Object | Fill and Stroke... На вкладке Fill щелкните на значке Linear gradient . Результат будет одинаков - создан градиент от одной стороны до другой, используя значения Fill. У нас это красный цвет.

Обратите внимание на узлы градиента на краях банки.

Градиенты формируются точками останова Stop - цвет и смещение. По умолчанию градиент использует две точки останова с одним цветом, но разной прозрачностью.

Для нашей банки понадобится три точки останова.

Сделайте двойной щелчок на линии, которая соединяет две точки останова при выбранном инструменте Gradient Tool. Курсор будет иметь символ +, показывающий возможность добавления новой точки останова. При добавлении новая точка берёт цвет градиента в этом месте. Внешне ничего в градиенте не изменится.

Точку останова можно перетащить вдоль линии. Переместите её в центр.

Придадим банке металлический вид. Выберите левую точку останова, щёлкнув по ней. Измените цвет на тёмно-серый, выбрав этот цвет на панели цветов - 80% Gray (если задержать курсор над цветом, то его название появится в виде подсказки). Или можете воспользоваться диалоговым окном Fill and Stroke и на вкладке Fill или Stroke paint установить новый цвет. Для нашего случая при выбранной вкладке RGB значения должны быть R: 51, G: 51, B: 51, A: 255

Выберите среднюю точку останова и установите цвет White (R: 255, G: 255, B: 255, A: 255)

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

Gradient

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

Gradient

Внесём косметический штрих. Отключим обводку Stroke у банки и крышки (щёлкните на значке с крестиком Х в левой части панели цветов, удерживая клавишу Shift). Измените цвет крышки на 40% Gray (R: 153, G: 153, B: 153)

Gradient

Добавим тень. Inkscape является 2D-редактором и у него нет встроенных инструментов для работы со цветом и тенью. Поэтому тень придётся создавать вручную, включая воображение.

Для тени нужно объединить копию крышки и самой банки в один объект.

Выберите крышку банки (эллипс) и сделайте её копию (Ctrl+D). Измените цвет у дубликата, чтобы проще было различать две копии. Сконвертируйте новый эллипс в контур (Path | Object to Path, Shift+Ctrl+C). Удалите нижний узел (Node Delete. Выберите два боковых узла и удалите отрезок между ними (Node Delete Segment. У нас получится половинка сегмента.

Повторим эти операции с банкой. Выберите банку, сделайте её копию и измените цвет. Удалите три верхних узла. Выберите оставшиеся два боковых узла и удалите линию между ними. Здесь также получится половинка эллипса.

Shadow

Выделите два новых объекта. Объедините их в один контур (Path | Combine). Выберите два узла с левой стороны и соедините их () и затем сконвертируйте контур в линию (). Повторите эти же операции с правыми узлами. Получится контур банки с крышкой, которая станет прообразом тени.

Выберите три верхних узла и переместите их вниз и вбок, как показано на рисунке.

Shadow

Переместите объект Тень за банку (Object | Lower to Bottom (End)).

Узлы контура управляются специальным образом. "Рычаги" узлов представлены в виде кружочков, прикреплённых к узлу прямыми отрезками. Они становятся видимыми,когда узел выбран. Потянув за кружочки, вы можете изменить кривую.

Если кружочки не видны, то щелкните на значке на панели инструментов. Если значка там нет, отметьте флажком пункт Show handles в выпадающем списке меню справа от панели инструментов.

На рисунке стрелками отмечены узлы, которые следует отредактировать. Левый узел нужно немного повернуть против часовой стрелки, чтобы линия "рычага" была параллельна стороне тени. Это сделает более плавным переход между прямой стороной банки и частью тени. При повороте удерживайте клавишу ALT, что позволит сохранить дистанцию между узлом и рычагом.

Нижний узел также нужно отредактировать схожим образом.

Измените цвет тени на серый: 50% Gray (R: 127 G: 127 B: 127)

Края тени не должны быть слишком резкими. Размыть их можно разными способами. Самый простой способ - использовать ползунок Blur на вкладке Fill в диалоговом окне Fill and Stroke. Значение 3% создаст отличное размытие тени.

Blur использует фильтр Gaussian Blur. Некоторые браузеры не слишком хорошо поддерживают данный фильтр. В качестве альтернативы можно использовать расширение Inset/Outset Halo, которое делает множественные копии контура, уменьшая или увеличивая его на небольшие величины. Каждая копия имеет небольшую прозрачность, что в итоге приводить к эффекту размытия.

Выберите тень, затем вызовите расширение из меню Extensions | Generate from Path | Inset/Outset Halo... В диалоговом окне выберите для Width значение 5, а для Number of Steps значение 11. Будет создано размытие шириной в 5 пикселей с 11 объектами-слоями. Оригинальная тень по-прежнему выделена, её можно удалить через Del или Ctrl+X

Теперь нарисуем этикетку на банке. Мы возьмём сторону банки и уменьшим её. Выберите вертикальную часть банки и продублируйте её. Для удобства сразу поменяйте клону цвет. Выберите созданный объект и уменьшите его.

Добавим текст. Выберите инструмент Text Tool и введите какой-нибудь текст. Выровняйте его относительно этикетки. Сейчас текст выглядит ровным. Чтобы немного закруглить его по форме банки, нужно текст сконвертировать в контур. Выберите текс и выполните команду Path | Object to Path. После этой операции вы не сможете редактировать текст, так как мы получили группу отдельных объектов-обводок. Разгруппируйте объекты через Object | Ungroup и затем скомбинируйте каждый символ в один контур Path | Combine (Ctrl+K).

Дальше переводить не стал.

Источник

A Can of Soup—A Three-Dimensional Drawing with Gradients

Реклама