Практикалық нұсқаулық

Recraft-тағы SVG-белгіше: генерациядан 24 пиксельдегі тексеруге дейін

Үлкен кенепте суқұйғыш ұқыпты көрінеді, ал мәзірде оның тұтқасы байқалмай қалады. Recraft-та векторлық белгіше жасап, оны шынымен қолданылатын өлшемге қалай бейімдеуге болатынын қарастырайық.

Ашық түсті парақта векторлық контурдың түйін нүктелері көрсетілген жасыл суқұйғыштың жалпақ сұлбасы.
Векторлық контур қағидасын түсіндіретін редакциялық иллюстрация; бұл Recraft интерфейсі де, оның нәтижесі де емес.

Алдымен өлшемі мен мақсатын анықтаңыз

Өсімдіктерге күтім жасау бөліміне шағын жасыл суқұйғыш белгішесі керек делік. Мәзірде оның өлшемі 24 × 24 пиксель, ал кеңес карточкасында 48 × 48 болады. Бұл — оқу тапсырмасы, Recraft сынағының нәтижелерін көрсету емес. Талап қарапайым: адам затты жазусыз тануы керек.

Генерацияға дейін қандай бөлшектер міндетті екенін шешіңіз. Біздің суқұйғышта олар — корпус, оң жаққа созылған шүмек және сол жақтағы саңылауы анық тұтқа. Жылтырақтар, бүйіріндегі өрнек пен жеке су тамшылары бұл тапсырмаға көмектеспейді. Кішірейткенде шүмек көрінбей қалса, жасыл шелек қана қалады.

Дәл векторлық генерацияны таңдаңыз

Recraft Studio-да жобаны ашып, Create бөліміне өтіңіз. Generation type параметрінде Vector таңдаңыз: қазіргі анықтамада бұл Image түрінен бөлек генерация түрі ретінде көрсетілген. Аккаунтыңызда қолжетімді лайықты векторлық модельді және макетке сәйкес келсе, шаршы пішімді таңдаңыз.

Біртегіс боялған әрбір сурет вектор бола бермейді. Image режимінде ұқсас иллюстрация алуға болады, бірақ бастапқы файлдың түрі басқа болады. Recraft анықтамасында Vector түріндегі генерацияға референстік суреттер қолжетімсіз екені де ескертілген. Бұл тапсырманы мәтіннен бастаңыз, ал дайын растрмен жұмыс істеуді бөлек Vectorize операциясына қалдырыңыз.

Пішінді тексеруге болатындай етіп сипаттаңыз

Бірінші нұсқаға мына сұрау жарайды: «Бақша суқұйғышының қарапайым жалпақ белгішесі, бүйірінен көрініс. Кең жасыл корпус, қысқа әрі анық шүмегі оңға бағытталған, сол жағында саңылауы ашық ірі тұтқасы бар. Біртұтас қою жасыл түс, градиенттерсіз, көлеңкелерсіз, жазуларсыз, өрнектерсіз және су тамшыларынсыз. Зат шаршы композицияға толық сыйсын, айналасында бос орын болсын. Белгіше шағын өлшемде де анық көрінуі керек».

Соңғы сөйлем ниетіңізді білдіреді, бірақ нәтижені сіздің орныңызға тексермейді. Бірнеше нұсқа алып, алдымен ең түсінікті сұлбаны таңдаңыз. Өрнегі көп суқұйғыш кенепте қызығырақ көрінгенімен, навигациялық белгі қызметін нашар атқаруы мүмкін.

Артық бөлшектерді алып, байқалған қатені түзетіңіз

Шүмектің корпусқа қай жерден жалғанғанын және тұтқаның бүйірмен бірігіп кетпегенін қараңыз. Шеттегі жеке жасыл дақ кейде артық пішін болып шығады, ал жіңішке ашық саңылау тұтқаны танытатын жалғыз белгі болуы мүмкін. Алдымен осындай тұстарды түзеткен жөн.

Recraft-та Vector Editor бар. Анықтамаға сәйкес, векторды екі рет шерткенде оның пішіндері өңдеуге ашылады; қажетті пішінді тағы екі рет шерту нүктелермен және қисықтармен жұмыс істеуге мүмкіндік береді. Элементтердің орнын және бояу түсін өзгертуге болады. Біздің тапсырмада бүкіл суретті қайта күрделендіргеннен гөрі, тым тар саңылауды кеңейтіп, кездейсоқ бөлшекті алып тастаған дұрыс.

Түзетпес бұрын нұсқаны сақтап қойыңыз. Қарапайымдату кезінде танылатын пішін жоғалса, оған оңай ораласыз.

24 және 48 пиксельдік нұсқаларды үлкен нұсқаның жанына қойып салыстырыңыз

Белгішенің көшірмелерін макетке екі мақсатты өлшемде орналастырып, оны қалыпты 100% масштабта қараңыз. Бұл тексеру үшін кішкентай белгіні экранның жартысына дейін үлкейтудің мәні жоқ: келуші оны соншалықты үлкен күйде көрмейді.

24 пиксельде үш нәрсені тексеріңіз: шүмек анық көріне ме, тұтқаның саңылауы сақталған ба, корпустың айналасында бос орын жеткілікті ме. Содан кейін 48 пиксельдегі нұсқаны қараңыз. Үлкенірек нұсқа түсінікті болып, кішісі пішінін жоғалтса, тек форматты ауыстыру мәселені шешпейді. Контурды қарапайымдатыңыз, маңызды саңылауды кеңейтіңіз немесе мәзірге бөлек нұсқа дайындаңыз.

Белгіні қолданылатын фонында тексеріңіз. Ақ фондағы қою жасыл түс пен күңгірт түсті панельдегі сол жасыл түс әртүрлі көрінеді. SVG жиектерінің тегістігі әлсіз контраст пен тығыз композицияның орнын толтырмайды.

Суқұйғыштың екі жалпақ пиктограммасы: бөлшектері тым көп нұсқа және тұтқасының саңылауы ашық қарапайымдатылған нұсқа.
Шағын өлшем үшін пиктограмманы қарапайымдату сызбасы. Редакциялық мысал, Recraft сынағының нәтижелері емес.

SVG түрінде экспорттап, жүктеп алынған файлды ашыңыз

Пішін көңіліңізден шықса, SVG түріндегі экспортты таңдаңыз. Жүктеп алынған файлды макет жасайтын редакторда тексеріңіз: зат толық көріне ме, айналасында күтпеген үлкен бос орын жоқ па, түстері мен саңылаулары сақталған ба. Нақты интерфейс компонентіне орналастырғаннан кейін 24 және 48 пиксельде қайта қарап шығыңыз.

Recraft анықтамасында тұтас фреймді экспорттауға қатысты маңызды шарт бар: оның барлық элементі векторлық болуы керек. Ішінде растрлық сурет қалса, алдымен оны векторлау қажет. Сондықтан дайын белгішеге тек соңында SVG түрінде экспорттау үшін PNG-декор қоспаңыз.

Лайықты суқұйғыш PNG түрінде дайын болса

Онда басқа жолдан бастаңыз: растрды кенепке орналастырып, оны белгілеңіз де, контекстік панельден Vectorize таңдаңыз. Құжаттамада Color Reduction арқылы түстер санын азайту және кейін палитраны өзгерту сипатталған. Бұл — мәтіннен тікелей векторлық генерация емес, дайын суретті түрлендіру.

Анық, жалпақ бастапқы суретті таңдаңыз. Recraft фотосуреттерді, 3D-рендерлерді және текстурасы айқын иллюстрацияларды векторлағанда артефактілер пайда болуы мүмкін екенін ескертеді. Түрлендіргеннен кейін шүмекті, тұтқаны және шағын өлшемді қайта салыстырыңыз. PNG кеңейтімін SVG деп жай ғана өзгерту мұндай өңдеуді орындамайды.

Жұмысқа арналған бастапқы файлды сақтап, тариф шарттарын тексеріңіз

Жобаны, соңғы SVG файлын, сұрау мәтінін және мақсатты өлшемдер жазбасын бірге сақтаңыз. Мәзірге қарапайымдатылған нұсқа жасалса, оны бөлек атаңыз. Сонда келесі түзетуде шағын өлшемде анық көрінетін белгіні үлкен кенепке арналған күрделірек нұсқамен шатастырып ауыстырмайсыз.

Коммерциялық жобада қолданар алдында Recraft-тың қолданыстағы тарифтерін ашыңыз. Қазір сервис тегін жоспар нәтижелері жалпыға ашық болатынын және оларды коммерциялық мақсатта пайдалануға лицензия берілмейтінін көрсетеді; ақылы жазылым кезінде жасалған суреттерге басқа шарттар жарияланған. SVG файлының сәтті жүктелуі қажетті құқықтардың бар екенін растамайды. Тапсырманы іске қоспас бұрын модельдердің қолжетімділігін, кредит шығынын және аккаунт шарттарын тексеріңіз.

Дереккөздер мен құжаттама

Барлық мақалалар