ប្រសិនបើមានទិដ្ឋភាពមួយនៃការធ្វើការជាមួយ Illustrator ដែលខ្ញុំពិតជាមិនចូលចិត្តវាត្រូវបានបម្លែងសិល្បៈបន្ទាត់ទៅរូបភាព svg សម្រាប់ទូរស័ព្ទឬបណ្តាញ។ ដោយប្រើម៉ឺនុយនាំចេញ> នាំចេញហើយជាភាពស្មោះត្រង់ដ៏ឃោរឃៅលក្ខណៈពិសេសសំរាប់រក្សាទុកសំរាប់ Web - នាំចេញ> រក្សាទុកសម្រាប់បណ្ដាញ - មិនមានភាពងាយស្រួលប្រើទេ។
ការបម្លែងគំនូរទៅជាទ្រង់ទ្រាយ .svg បានបើកប្រអប់គំរាមកំហែងមួយដែលសម្រាប់អ្នកដែលថ្មីចំពោះលំហូរការងារនេះបានផ្តល់ជម្រើសអារម្មណ៍ច្របូកច្របល់ដែលមិនបង្ហាញពីការពិតដែលមានទ្រង់ទ្រាយ .svg មួយចំនួនហើយមានតែមួយក្នុងចំណោមពួកវាត្រឹមត្រូវ។ ទ្រង់ទ្រាយ។ នៅពេលដែលអ្នកបានប្រើវាទៅក្នុងលំហូរការងារនេះវាមិនមែនជាបញ្ហាធំនោះទេប៉ុន្តែខ្សែបន្ទាត់នៃការរៀនគឺចោត។
នោះត្រូវបានផ្លាស់ប្តូរទាំងស្រុងជាមួយនឹងលក្ខណៈពិសេស Export for Screens ថ្មីនាំចេញ Export for Screens និងបន្ទះ Export Asset ដែលត្រូវបានណែនាំឱ្យ Illustrator CC 2015 នៅខែមិថុនាឆ្នាំ 2016 ។ នៅក្នុង "របៀប" នេះខ្ញុំនឹងបង្ហាញអ្នកពីរបៀបប្រើទាំងពីរ លក្ខណៈពិសេស។ តោះចាប់ផ្តើម។
01 នៃ 04
របៀបក្នុងការនាំចូលការនាំចេញសម្រាប់អេក្រង់នៅក្នុង Adobe Illustrator CC 2015
ដោយបានក្លាយជាអ្នកប្រើ Illustrator ពី Illustrator 88 ខ្ញុំគិតថាអ្នកអាចយល់ពីភាពស្ទាក់ស្ទើររបស់ខ្ញុំក្នុងការពិចារណា Illustrator ជាឧបករណ៍រចនាដ៏ធ្ងន់ធ្ងរសម្រាប់ចំណុចប្រទាក់និងបណ្ដាញចល័តនិងគម្រោង។
នៅពេលដែល artboards ត្រូវបានណែនាំនៅក្នុងកំណែ CS4 2008, ខ្ញុំគិតថានោះគឺជាការបន្ថែមគួរឱ្យចាប់អារម្មណ៍ទៅនឹងកម្មវិធី។ នៅពេលដែលខ្ញុំបានមើលឃើញលក្ខណៈពិសេសរក្សាទុកសម្រាប់ Web ដែលលែងប្រើនៅ Illustrator ជាថ្មីម្តងទៀតខ្ញុំឃើញថាវាគួរឱ្យចាប់អារម្មណ៍ប៉ុន្តែខ្ញុំបានរកឃើញលក្ខណៈពិសេសដូចគ្នានៅក្នុងកម្មវិធី Adobe Fireworks ដែលត្រូវបានតម្រឹមជាមួយក្រាហ្វិកបណ្ដាញជាងគំនូររូបភាព។
ជាមួយនឹងការមកដល់នៃការរចនាជាលើកដំបូងតាមទូរស័ព្ទចល័តនិងការពឹងផ្អែកកាន់តែខ្លាំងទៅលើរូបភាព SVG សម្រាប់គម្រោងទូរស័ព្ទដៃ Illustrator គឺជាឧបករណ៍ "ទៅ" របស់ខ្ញុំសម្រាប់ SVG ហើយបានក្លាយជាចំណុចសំខាន់ក្នុងដំណើរការការងារ UI Design ។
យ៉ាងណាក៏ដោយប្រសិនបើខ្ញុំត្រូវនាំចេញទ្រព្យសម្បត្តិសម្រាប់ទូរស័ព្ទចល័ត Sketch 3 និង Photoshop CC 2015 គឺជាឧបករណ៍របស់ខ្ញុំ។ អ្នកគំនូររូបនេះបានបញ្ចូលបញ្ជីនៅក្នុងខែមិថុនាឆ្នាំ 2016 ជាមួយនឹងម៉ឺនុយនាំចេញសម្រាប់អេក្រង់ដ៏ល្អ។
នៅក្នុងឧទាហរណ៍ខាងលើខ្ញុំមានអេក្រង់ពីរសម្រាប់ទូរស័ព្ទ iPhone ហើយពួកគេស្ថិតនៅលើអាល់ប៊ុមដាច់ដោយឡែកដែលមានឈ្មោះថា "ផ្ទះ" និង "ទីកន្លែង" ។ ដើម្បីបញ្ចេញវាខ្ញុំបានជ្រើសឯកសារ> នាំចេញនាំចេញសម្រាប់អេក្រង់។ ប្រអប់នាំចេញសម្រាប់អេក្រង់បើក។
02 នៃ 04
របៀបប្រើប្រអប់នាំចេញសម្រាប់អេក្រង់ប្រអប់
នៅពេលប្រអប់លេចឡើងសូមចុចលើផ្ទាំងសិល្បៈនីមួយៗដែលត្រូវបានជ្រើសរើស។ បន្ទាប់មកវានឹងបង្ហាញសញ្ញាសម្គាល់។ អ្នកក៏អាចចុចទ្វេដងលើឈ្មោះផ្ទាំងសិល្បៈដើម្បីជ្រើសវានិងប្តូរវា។ នេះជារឿងល្អដើម្បីដឹងថាតើសិល្បៈរបស់អ្នកត្រូវបានគេដាក់ឈ្មោះថា "Artboard 1" និង "Artboard 2" ដែលនិយាយត្រង់ទៅអ្នកគ្មានអ្វីសោះ។
អ្នកមានជម្រើសបីនៅក្នុងតំបន់ជ្រើសរើស:
- ទាំងអស់: ជម្រើសនេះនាំចេញផ្ទាំងសិល្បៈនីមួយៗនៅក្នុងឯកសារជាឯកសារដាច់ដោយឡែក។
- ជួរ: បញ្ចូលជួរនៃផ្ទាំងគំនូរដែលត្រូវនាំចេញ។ នេះមានប្រយោជន៍ជាពិសេសសម្រាប់គម្រោងដែលមានផ្ទាំងគំនូរជាច្រើន។
- ឯកសារពេញ: ជ្រើសរើសយកផ្ទាំងគំនូរទាំងនេះហើយផ្ទាំងគំនូរទាំងអស់នឹងត្រូវបានរុំព័ទ្ធទៅក្នុងឯកសារតែមួយ។
តំបន់នាំចេញអនុញ្ញាតឱ្យអ្នកជ្រើសថតទិសដៅសម្រាប់ទិន្នផល។ ថតលំនាំដើមនឹងជាទីតាំងបច្ចុប្បន្ននៃឯកសារ Illustrator ។
ទ្រង់ទ្រាយគឺជាកន្លែងដែល "វេទមន្តកើតឡើង។ អ្នកនឹងសម្គាល់ឃើញមានរូបតំណាងបី - ប្រព័ន្ធប្រតិបត្តិការ iOS ។ Android និង Gear ។ ពីរដំបូងគឺការពន្យល់ផ្ទាល់ខ្លួន។ រូបតំណាងត្រៀមលក្ខណៈបើកការកំណត់ទ្រង់ទ្រាយដែលអនុញ្ញាតឱ្យអ្នកត្រួតពិនិត្យរបៀបដែលទ្រង់ទ្រាយឯកសារនីមួយៗក្នុងបញ្ជីនឹងត្រូវបានធ្វើឱ្យប្រសើរឡើង។ ការកំណត់ទាំងនេះគឺ "ទ្រង់ទ្រាយជាក់លាក់" ហើយនៅពេលអ្នកបានធ្វើការផ្លាស់ប្ដូរសូមចុចប៊ូតុងរក្សាទុកការកំណត់ហើយការផ្លាស់ប្តូរទាំងនោះនឹងត្រូវបានអនុវត្តទៅទម្រង់ដែលត្រូវបង្ហាញ។
នៅពេលអ្នកជ្រើសរើសប្រព័ន្ធប្រតិបត្តិការ iOS ឬ Android បញ្ជីនឹងផ្លាស់ប្តូរដើម្បីរួមបញ្ចូលទាំងដំណោះស្រាយទាំងអស់ដែលមាននៅលើវេទិកានោះ។ ការចុះបញ្ជីប្រព័ន្ធប្រតិបត្តិការ iOS នឹងបង្ហាញ កត្តាធ្វើមាត្រដ្ឋាន សម្រាប់អេក្រង់ប្រភេទ Retina និងជម្រើស Android នឹងមានមាត្រដ្ឋានចាប់ពី .75x ដល់ 4x ដែលអាចដំណើរការបានគ្រប់ឧបករណ៍ Android ទាំងអស់នៅទីនោះ។
ប្រសិនបើមានទ្រង់ទ្រាយបង្ហាញថាអ្នកចង់ដកចេញសូមចុច "x" ។ ប្រសិនបើមានមួយដែលអ្នកចង់បន្ថែមចុចប៊ូតុងបន្ថែម + បន្ថែមមាត្រដ្ឋាន។
នៅពេលបញ្ចប់សូមចុចប៊ូតុងនាំចេញផ្ទាំងសិល្បៈហើយរបារវឌ្ឍនភាពមួយនឹងបង្ហាញអ្នកនៅពេលដំណើរការត្រូវបានបញ្ចប់។
03 នៃ 04
ការប្រើការនាំចេញសម្រាប់ឯកសារអេក្រង់ពី Adobe Illustrator CC 2015 ។
នៅពេលអ្នកពិនិត្យមើលលទ្ធផលនៃការនាំចេញសម្រាប់អេក្រង់អ្នកនឹងឃើញថារូបគំនូរនេះបានបង្ហាញនូវអេក្រង់ដែលរាបស្មើរនៃអេក្រង់នីមួយៗ។ នៅលើផ្ទៃខាងលើនេះអាចហាក់ដូចជាខ្សោយបន្តិចជាពិសេសប្រសិនបើអ្នករំពឹងថា Illustrator បាននាំចេញរូបភាពនិងបំណែកទាំងអស់ជារូបភាព។
ប្រសិនបើអ្នកត្រលប់ក្រោយហើយគិតអំពីវាមួយភ្លែតនេះជាអ្វីដែលអ្នកត្រូវការពីព្រោះអ្នកអាចប្រើលទ្ធផលនេះនៅក្នុងកម្មវិធីគំរូដូចជា Adobe Experience Design , Principleformac, Atomic.io , UXPin ឬកម្មវិធីគំរូដើមផ្សេងទៀត។
ក្នុងឧទាហរណ៍នេះខ្ញុំកំពុងប្រើ Adobe Design Design (XD) ដើម្បីបង្កើតការចុចធម្មតា។ ជំហានទីមួយក្នុងដំណើរការនេះគឺដើម្បីជ្រើសរើសទំហំ iPhone 6 ដែលត្រូវគ្នានឹងវិមាត្ររបស់ផ្ទៃ Illustrator Interface
នៅពេលដែលចំណុចប្រទាក់បើកខ្ញុំបានជ្រើសរើសឧបករណ៍ Artboard ហើយចុចម្តងនៅលើបន្ទះបិទភ្ជាប់ដើម្បីបន្ថែមស្នាដៃសិល្បៈមួយទៀត។ បន្ទាប់មកខ្ញុំបានដាក់ឈ្មោះពួកគេថា "ផ្ទះ" និង "ទីកន្លែង" បានជ្រើសរើសស្នាដៃសិល្បៈនីមួយៗហើយនាំចូលរូបភាពពីរូបភាពពីគំនូរគំនូរ។
ដើម្បីបង្កើត "ចំណុចក្តៅ" សម្រាប់ការចុចដោយចុចខ្ញុំបានគូសចតុកោណកែងលើប៊ូតុងរុករកនៅលើអេក្រង់ដើមហើយកំណត់តម្លៃបំពេញនិងតម្លៃស៊ុមទៅគ្មានដោយដោះជម្រើសលក្ខណៈទាំងនោះនៅក្នុងផ្ទាំងលក្ខណសម្បត្តិ។ ខ្ញុំបានធ្វើដូចគ្នានឹងប៊ូតុងត្រលប់ក្រោយនៅលើទំព័រទីកន្លែង។
ដើម្បីបន្ថែមអន្តរសកម្មខ្ញុំបានជ្រើសរើសរបៀប Prototype ហើយបន្ទាប់មកចុចលើ "hotspot" ។ បន្ទាប់មកខ្ញុំបានអូសព្រួញ - ហៅថាលួសមួយ - ទៅទំព័រកន្លែងហើយកំណត់គោលដៅការផ្លាស់ប្តូរនៅទីកន្លែង, ចលនាដើម្បីរុញទៅឆ្វេង, ការបន្ធូរបន្ថយនិងរយៈពេលនៃការផ្លាស់ប្តូរទៅ .6 វិនាទី។
ខ្ញុំបានធ្វើម្តងទៀតជំហាននេះជាមួយ hotspot នៅលើទំព័រកន្លែង។ ភាពខុសគ្នាតែមួយគត់គឺការផ្លាស់ប្តូរនេះត្រូវបានកំណត់ដើម្បីជំរុញសិទ្ធិ។ នៅពេលខ្ញុំចុចប៊ូតុងលេងខ្ញុំបានសាកល្បងគំរូដើមរបស់ខ្ញុំ។
04 នៃ 04
របៀបប្រើបន្ទះនាំចេញធនធានក្នុង Adobe Illustrator CC 2015
រួមជាមួយនឹងម៉ឺនុយរក្សាទុកអេក្រង់ផងដែរ Adobe ក៏បានបន្ថែមបន្ទះថ្មីមួយដែរ - Asset Export - ដែលបានដកចេញនូវចំណុចឈឺចាប់ដ៏ធំមួយនៅក្នុង UI Design workflow ។
ចំណុចឈឺចុកចាប់គឺរូបតំណាង។ គំនូរជីវចលគឺជាកម្មវិធីគំនូរវ៉ិចទ័រដ៏អស្ចារ្យប៉ុន្តែដើម្បីបង្ហាញទិន្នផលចូរនិយាយថារូបតំណាងចំនួន 10 នៅលើទំព័រដែលមាន 40 ឬ 50 នៃពួកវាត្រូវបានគេរក្សាទុកជារូបភាព SVG ។ នេះត្រូវការពេលវេលាច្រើនជាងធម្មតាដោយសារការធ្វើដំណើរបន្តទៅបន្ទះ SVG ។ ចំណុចឈឺចាប់នេះគឺជារឿងអតីតកាល។
ផ្ទាំងថ្មីនេះអាចរកឃើញនៅ Window> Asset Export ។ ពេលបន្ទះបើកសូមជ្រើសយកទ្រព្យដែលអ្នកចង់បម្លែងទៅ SVG ឬទ្រង់ទ្រាយផ្សេងហើយអូសក្នុងបន្ទះ។ ពេលអ្នកដោះកណ្ដុររូបភាពតូចមួយនៃទ្រព្យត្រូវបានបន្ថែមទៅបន្ទះ។ ដាក់ឈ្មោះទ្រព្យសម្បត្តិ។ បន្តអូសវត្ថុចូលក្នុងបន្ទះរហូតដល់អ្នកបញ្ចប់។
ជ្រើសធាតុនីមួយៗនៅក្នុងផ្ទៃការកំណត់នាំចេញឬជ្រើសរើសពួកវាដោយចុចគ្រាប់ចុចប្ដូរ (Shift) ហើយចុចលើប៊ូតុងនីមួយៗ។ ជ្រើសទ្រង់ទ្រាយរបស់អ្នក - ក្នុងឧទាហរណ៍នេះខ្ញុំបានជ្រើសរើស SVG ហើយចុចប៊ូតុងនាំចេញ។ ធាតុដែលបានជ្រើសនឹងបង្ហាញជាឯកសារ SVG ទៅទីតាំងតែមួយជាមួយឯកសាររូបភាព។
ដែលជាកន្លែងដែលដំណើរការទាំងនេះទទួលបាន neater សូម្បីតែអ្នកគឺមិនត្រូវប្រើបន្ទះនាំចេញទ្រព្យសកម្ម។ ប្រសិនបើអ្នកចុចប៊ូតុងរក្សាទុកសម្រាប់អេក្រង់នៅផ្នែកខាងក្រោមបន្ទះនោះប្រអប់នឹងបើក។
ផ្ទុយទៅវិញអ្នកអាចចុចលើផ្ទាំងទ្រព្យសម្បត្តិនៅក្នុងបន្ទះរក្សាទុកសម្រាប់អេក្រង់ដើម្បីចូលដំណើរការបន្ទះនាំចេញធនធាន។ ឧទាហរណ៍ប្រសិនបើអ្នកមានរូបតំណាងផ្ទាល់ខ្លួននៅលើផ្ទាំងសិល្បៈអ្នកអាចបើកបន្ទះនាំចេញធនធាននៅក្នុងប្រអប់រក្សាទុកសម្រាប់អេក្រង់ហើយអូសធាតុនោះទៅក្នុងបន្ទះនាំចេញធនធាន។