Нацртај векторски Таблет-уред со Inkscape

Една мала лекција за големината на слободниот софтвер и што сè може да правиме со него (да расчистиме стереотипи и слично). Inkscape како векторска алатка во последните неколку години зазема еден сериозен потфат кај дизајнерите желни за нови предизвици што често пати експериментираат. Во денешниот туторијал ќе помогнам во создавањето на измислен touch-pad tablet. Незнам дали го исполнува нивото на детаљите што можеби повеќето графички дизајнери го очекуваат, но тоа сепак е релативно.

Inkscape може да го најдете на inkscape.org и веднаш да го зачувате за оперативниот систем што го користите (GNU-Linux/Windows/OS X). Откако ќе го инсталирате прво што треба да се уреди е документот, слоевите (layers) и помошни линии.

Нов документ

Насоката и големината на листот

Откако поставувањето на А4 листот го менувате во легнат формат, наредно треба да ги дотерате и слоевите што се наоѓаат во долниот дел од интерфејсот на апликацијата веднаш под палетата со бои.

Уредување на слоевите

Јас практикувам највисокиот слој да е специјално само за помошни линии и мерки, додека сите под него (1 или повеќе) да ги користам за тоа што го работам. Уредувањето на слоевите во Inkscape се прави преку менито Layers и тука може да додавате, менувате во длабочина и промена на името на избраниот слој.

Сега слоевите се поставени, наредно треба да се додадат помошните линии за внимателно одредување на перспективата. Линиите што се прикажани подоле на сликата се претходно определени со скица за овој туторијал и сега препорачувам да ги исцртате така, користејќи го „Draw freehand lines“.

Помошни линии

Изберете од алатникот „Create rectangles and squares“ и горе во поставувањата кај Rx (радиусот) ставете вредност 20 px. Со влечење нацртајте правоаголник со заоблени агли како што е прикажано на сликата.

За да може да ја корегирате перспективата на овој правоаголник треба да направите една промена на објектот од Object во Path. Така како обична патека со криви ја избирате алатката „Edit paths by nodes“ и ги менувате така како што перспективата ќе изгледа логично за окото. Или може да ги користите помошните линии како рамки и ќе биде поблиску до саканата перспектива.

Објект во патека

Уредување на перспективата

Уредувањето на точките е исто како и избирање повеќе датотеки со глушецот (влечи-пушти). Но овој начин на менување перспектива е доста застарен и после него се јавуваат проблеми. Тие проблеми може да се корегираат со „Make selected nodes smooth“. Сите агли имаат мало накршување и треба да се испегла тоа со избирање на деформираната точка и клик на „Make selected nodes smooth“ што ќе ги израмни таквите аберации.

Исправки

Откако горниот дел од телото на уредот е направено треба да додадете втор слој што ќе ја одреди дебелината. Со Select го избирате горниот објект и со Ctrl+D го дуплирате. Го поместувате доле десно и му ја менувате длабочината со копчето End на тастутрата. Со „Edit paths by nodes“ ги корегирате точките во горниот десен агол и долниот лев агол каде што телото треба да се спои во една комплетна целина.

Втор слој

Откако тоа е средено, сега може да ги ставите и боите на двата објекти преку избор од менито Object -> Fill and Stroke… каде што предниот објект ќе биде темно сив, а долниот светло сив и треба да му ја исклучите контурата.

Без контура

Следните украси како екран, звучници и некои копчиња може да си ги измислите сами или само пратете ги сликите како насока за да се постигне саканиот Таблет ефект.

Збучници десно

Звучниците ги цртаме со алатката „Draw freehand lines“

Звучници лево

Екранот го правите исто како и првиот правоаголник, но сега радиусот Rx е со вредност 2px. Ја правите пак целата процедура со перспективата и дотерувањето на искривените точки.

Радиус на екран

Додавањето на ефектот светлина кај екранот се прави со користењето нијнасирано боење (со Gradient editor). Начинот на користење на нијансирањето е малку различно од производите на Adobe, но истото се случува. За да додадеме точка на мешање треба да користиме Add Stop. Ако сакаме три точки на мешање на нијансирањето, тогаш трипати додаваме Add Stop, а насоката и начинот на нанесување на објектот го правиме со алатката „Create and Edit Gradients“.

Нијанси

Вредности

Разултат

Откако светлината сте ја одредиле го избирате првокреираниот објект и двапати Ctrl+D. Новите два дупликати ќе испливат најгоре, а за да ги разликувате ставете им друга боја. Првиот поместете го горе лево, а долниот дупликат што ќе остане оставете го таму каде што е. Оригиналниот објект со темно сива боја треба да остане недопрен, сега ги уредувате само двата дупликати.

Светла

Со изборот на Path -> Difference го исековме долниот дупликат и сега имаме само еден објект на кој треба да му исклучиме контура и да му смениме боја.

Сечење

Тргни контура

За крај со овој објект додајте ги вредности на Fill како што се прикажани на сликата што следи.

Ефект

За крајот да го краси делото треба да додадеме сенка, а сенката ја правиме исто со дуплирање (Ctrl+D) на првокреираниот објект. Го боиме со црна боја и со „Edit paths by nodes“ го деформираме да изгледа како сенка што паѓа.

Сенка дуплирање

Избриши вишок точки

Ги отстрануваме вишокот точки и ги корегираме со „Edit paths by nodes“, а потоа го туркаме објектот со End на тастутрата позади сите објекти.

Дореување на сенка

Сенката ја комплетираме со користење на Gradient Editor, а потоа и додаваме Blur и Opacity. Вредностите за тие два параметри ги имате на сликата.

Сенка

Откако во голем дел е веќе готов векторскиот Таблет, добро е некои детаљи да се додатат, мали подобрувања на боите и некои додатни ефекти по вкус.

Ефект

Ефектот е направен со дуплирање на екранот и мало поместување горе лево. Бојата е внимателно одбрана за да делува како отсјај и да постигне ефект на длабочина. Крајниот резултат треба да изгледа вака.

Таблет готов

Преземи ја SVG датотеката од векторскиот таблет.

Вектор таблет

gravatar
Автор: Капсаров Благој
За авторот: Од сите сплетки и досетки се обидувам да инспирирам доволен број на луѓе што сакаат да го користат мозокот за креативен и позитивен развој. Мотото го позајмив од Рене Декарт: Cogito ergo sum! повеќе...

3 Коментари

  1. еејј.. браво.. Многу добро.

  2. Inkscape е напишан во Phython па затоа gdamjan го сака 😀 Браво,одлична идеја и реализација.

  3. Интересен туториал. Еве нешто слично: ТВ со PhotoShop!

    http://psd.tutsplus.com/tutorials/icon-design/dra