កំពុងរៀបចំរូបភាពសម្រាប់ឧបករណ៍ចល័ត

រូបភាពសម្រាប់ទូរស័ព្ទមិនមែនជាអ្វីដែលវាហាក់ដូចជា

វាត្រូវបានក្លាយជារឿងធម្មតាកាន់តែខ្លាំងឡើងសម្រាប់ គុណសម្បត្តិក្រាហ្វិក ដើម្បីមិនត្រឹមតែការងាររបស់ពួកគេបានលេចឡើងនៅក្នុងការបោះពុម្ពប៉ុន្តែក៏នៅលើបណ្តាញនិងឧបករណ៍ដូចជា iPhones, iPads, ឧបករណ៍ Android និង Tablet Android ។ នៅលើផ្ទៃលើនេះអាចត្រូវបានគេមើលឃើញថាជា "រឿងល្អ" ជាប្រព័ន្ធផ្សព្វផ្សាយការងាររបស់យើងលេចឡើងនៅលើពង្រីកទៅអេក្រង់ឌីជីថល។ ការធ្លាក់ចុះគឺជាចំនួននៃអេក្រង់និងបរិមាណនៃគុណភាពបង្ហាញអេក្រង់។ វាមិនមែនជារឿងចម្លែកទេដែលឮអំពីអនាគតរបស់អ្នកដែលឆ្ងល់ថាអ្វីដែលបានកើតឡើងដល់ថ្ងៃដែលរូបភាព 300 ភិចសែល TIFF នៅក្នុងទ្រង់ទ្រាយ CMYK គឺជាបទដ្ឋាន។ អូសម្រាប់ថ្ងៃចាស់ល្អ!

ថ្ងៃទាំងនោះចប់ហើយ។ ឥឡូវនេះយើងត្រូវប្រឈមជាមួយនឹងការពិតដែលថារូបភាព 200 ទៅ 200 អាចនឹងបង្ហាញរូបរាងល្អនៅលើឧបករណ៍មួយនិងលេចឡើងទំហំត្រីមាសនៅលើទំហំមួយផ្សេងទៀតនិងទំហំបីត្រីមាសនៅលើមួយផ្សេងទៀត។ វាពិតជាបានធ្លាក់ចុះទៅ "ដំណោះស្រាយអាវុធប្រដាប់អាវុធ" ត្រូវបានធ្វើឡើងដោយក្រុមហ៊ុនផលិតឧបករណ៍ខណៈដែលពួកគេព្យាយាមភាយភីកសែលបន្ថែមទៀតទៅក្នុងអេក្រង់ជាងដៃគូប្រកួតប្រជែងរបស់ខ្លួន។

នេះនាំយើងទៅនឹងអ្វីដែលយើងនឹងហៅថា«ការងើបឡើងនៃពួកបច្ច័យ»។ បច្ច័យគឺជារបស់ទាំងនោះ - @ 2x, @ 3x - tacked on ទៅឈ្មោះរូបភាព។ ឧទាហរណ៍ពួកគេជាសំខាន់ដាក់រូបភាពខាងស្ដាំនៅកន្លែងខាងស្ដាំនៅលើឧបករណ៍ខាងស្ដាំ។ បន្ទាប់មកវាទទួលបានកាន់តែប្រសើរ។

ការងារជាច្រើនរបស់យើងទាក់ទងនឹងការធ្វើការជាមួយរូបតំណាងហើយជាមួយនឹងការកើនឡើងចលនាចលនាផ្ទះអ្វីៗទាំងនេះត្រូវបានបង្កើតនៅក្នុងកម្មវិធីគូរវ៉ិចទ័រដូចជា Illustrator និង Sketch ។ បញ្ហាគឺឧបករណ៍ជាធម្មតាមិនអាចបង្ហាញឯកសារ .ai ឬ .eps ។ ពួកគេត្រូវបម្លែងទៅជា ក្រាហ្វិកវ៉ិចទ័រដែលអាចធ្វើមាត្រដ្ឋានបាន ហើយអាស្រ័យលើកម្មវិធីដែលបានប្រើដើម្បីបង្កើតរូបតំណាងវាអាចមិនមានជម្រើស SVG ។

បន្ទាប់មកវាទទួលបានកាន់តែប្រសើរ។

វាមានប្រភេទថ្មីនៃកម្មវិធី - កម្មវិធី Prototyping - ដែលត្រូវបានក្លាយជាចំណុចរួមគ្នាមុនពេលរូបភាពនិងរូបតំណាងរបស់អ្នកត្រូវបានរុញច្រានទៅឧបករណ៍ហើយពួកគេក៏មានលក្ខណៈពិសេសរបស់ពួកគេផងដែរ។

ការបង្រៀននេះនឹងផ្លាស់ប្តូររវាងកម្មវិធី Photoshop និង Sketch សម្រាប់ក្រាហ្វិចនិងការប្រើប្រាស់ Adobe បរិយាកាស រចនា ដើម្បីបង្ហាញពីចំណុចនៃការឈឺចាប់មួយចំនួនរវាងគំនិតនិងការដាក់ពង្រាយចុងក្រោយរបស់អ្នក។ តោះ​ចាប់ផ្តើម។

01 នៃ 05

របៀបរៀបចំរូបភាពសម្រាប់ឧបករណ៍ចល័តនៅក្នុងកម្មវិធី Adobe Photoshop

ជំហានដំបូងនៅក្នុងដំណើរការនេះគឺត្រូវដឹងពីឧបករណ៍គោលដៅឬឧបករណ៍របស់អ្នក។ ក្នុងករណីនេះអ្នកនឹងត្រូវបានគេកំណត់គោលដៅលើទូរស័ព្ទ iPhone 6 ដែលមានផ្ទៃអេក្រង់ 375 ភីកសែលធំទូលាយដោយ 667 ភីកសែលខ្ពស់។ ការរចនាអំពាវនាវឱ្យរូបភាពមានទទឹងនៃអេក្រង់។

រូបភាពដែលត្រូវបានប្រើត្រូវបានគេបាញ់នៅខាងក្នុងវិហារ Bern Minster នៅ Bern ប្រទេសស្វ៊ីស។ នៅពេលដែលរូបភាពបើកនៅក្នុង Photoshop ជ្រើសរើស Image> Image Size ដើម្បីពិនិត្យមើលវិមាត្រនៃរូបភាពនិងគុណភាពបង្ហាញរបស់វា។ ជាក់ស្តែងរូបភាពដែលមានទំហំ 3156 x 2592 ជាមួយនឹងគុណភាពបង្ហាញ 300 ppi និងទំហំឯកសារ 23.4 មេកាបៃនឹងមិនដំណើរការទេ។

នៅក្នុងប្រអប់ទំហំរូបភាព បន្ថយគុណភាពបង្ហាញទៅ 100 ppi ។ ធ្វើវាជាលើកដំបូងព្រោះទំហំវិមាត្រនឹងផ្លាស់ប្តូរផងដែរ។ ជាមួយនឹងការកំណត់គុណភាពបង្ហាញ, ផ្លាស់ប្តូរទទឹងទៅជា 375 ភីកសែល។ ប្រសិនបើអ្នកពិនិត្យមើលទិន្នន័យទំហំរូបភាពអ្នកនឹងសម្គាល់ឃើញថារូបភាពបានបង្រួមពី 23.4 មេកាបៃទៅ 338K ដែលងាយស្រួលសម្រាប់ទូរស័ព្ទ។ ចុចយល់ព្រម ដើម្បីទទួលយកការផ្លាស់ប្ដូរនិងបិទប្រអប់ទំហំរូបភាព។

02 នៃ 05

របៀបប្រើប្រអប់ "នាំចេញជា ... " នៅក្នុងកម្មវិធី Adobe Photoshop

នៅពេលដែលរូបភាពរួចរាល់សម្រាប់នាំចេញសូម ជ្រើស "នាំចេញនាំចេញជា ... " ដើម្បីបើកប្រអប់នាំចេញ។

ប្រអប់សន្ទនានេះគឺជាការបន្ថែមលើកម្មវិធី Photoshop ថ្មីហើយជំនួសប្រអប់ "រក្សាទុកសម្រាប់បណ្ដាញ" ដែលពួកគេប្រើអស់ជាច្រើនឆ្នាំ។ ប្រសិនបើអ្នកនៅតែត្រូវការវាអ្នកអាចរកវានៅក្នុងប្រអប់នាំចេញលេចឡើង។ វាគឺជាមូលហេតុជាក់ស្តែងដែលឥឡូវនេះត្រូវបានគេស្គាល់ថាជា "នាំចេញសំរាប់បណ្ដាញ (កេរ្តិ៍តំណែង") ។ បើនេះជាដំណើរទស្សនកិច្ចលើកដំបូងរបស់អ្នកទៅប្រអប់នេះនេះជាដំណើរទស្សនកិច្ចសង្ខេប:

• ទំហំ: ជួរឈរនេះកំណត់ទំហំលទ្ធផលរបស់រូបភាព។ ទិដ្ឋភាពដ៏គួរឱ្យចាប់អារម្មណ៍នៃតំបន់នេះគឺវានឹងពង្រីករូបភាពប៉ុន្តែរូបភាពនឹងមិនលេចឡើងជា "fuzzy" នៅលើឧបករណ៍ដោយសារតែចំនួនភីកសែលច្រើននៅលើអេក្រង់របស់ឧបករណ៍។
• 1X: ចុចលើប៊ូតុងនេះហើយអ្នកនឹងត្រូវបានបង្ហាញជាមួយចំនួននៃទំហំមួយ។ ប្រភេទ 1x, 2x និង 3x ត្រូវបានភ្ជាប់ជាប្រពៃណីជាមួយឧបករណ៍ Hi Dpi ពីក្រុមហ៊ុន Apple ហើយពួកវារួមជាមួយនឹងឧបករណ៍មួយចំនួនទៀតនឹងរៀបចំរូបភាពសម្រាប់ឧបករណ៍ Android ។
• បច្ច័យ: ជម្រើសនេះនឹងបង្ហាញទំហំរបស់អ្នកប៉ុន្តែវានឹងត្រូវបានបង្ហាញជា @ 2x ឬទំហំត្រូវបានជ្រើសរើស។ បច្ច័យនេះនឹងត្រូវបានបន្ថែមទៅឈ្មោះរូបភាព។
• សញ្ញា +: ចុចនេះដើម្បីបន្ថែមទំហំផ្សេងៗសម្រាប់លទ្ធផល។ ក្នុងករណីនេះសូមចុចវាពីរដងហើយជ្រើសរើស 2x និង 3x ពីផ្ទាំងលេចឡើង។ នេះនឹងគ្របដណ្តប់ជាក់ស្តែងឧបករណ៍ iOS ណាមួយ។
• ធុងសំរាម: ចុចនេះហើយជម្រើសត្រូវបានដកចេញពីក្រុម។
• ការកំណត់ឯកសារ: ជ្រើសរើសទ្រង់ទ្រាយ - jpg, png, gif ឬ svg - ដែលសមបំផុតចំពោះរូបភាព។ ប្រសិនបើទំហំឯកសារគឺជាកង្វល់អ្នកក៏អាចកាត់បន្ថយការកំណត់គុណភាពដែរ។
• ទំហំរូបភាព: អ្នកអាចផ្លាស់ប្តូរវិមាត្ររូបរាងនៃរូបភាព។
• ទំហំផ្ទាំងក្រណាត់: អ្នកអាចផ្លាស់ប្តូរវិមាត្ររូបរាងនៃផ្ទាំងក្រណាត់រូបភាព។
• ទិន្នន័យមេតា: អ្នកអាចបន្ថែមការរក្សាសិទ្ធិនិងព័ត៌មានទំនាក់ទំនងរបស់អ្នកទៅទិន្នន័យមេតារបស់រូបភាព។

នៅពេលបញ្ចប់សូមចុចប៊ូតុងនាំចេញទាំងអស់។ អ្នកនឹងត្រូវបានសួរកន្លែងដែលអ្នកចង់ដាក់រូបភាព។ ទម្លាប់ល្អក្នុងការអភិវឌ្ឍគឺត្រូវចុចប៊ូតុងថតថ្មីនិងបង្កើតថតទុករូបភាពដែលបាននាំចេញ។ ពេលអ្នកចុចនាំចេញអ្នកនឹងឃើញរូបភាពនៅក្នុងថត។

03 នៃ 05

របៀបរៀបចំរូបភាពសម្រាប់ឧបករណ៍ចល័តនៅក្នុងការបង្ហាញប្រភេទរូបភាពទី 3 ពីកូដបែលហ្ស៊ិក

គំនូរជីវចល 3 ដែលជាកម្មវិធីតែមួយគត់របស់ Macintosh ពី Bohemian Coding កំពុងតែទទួលបានភាពល្បីល្បាញក្នុងចំណោមអ្នករចនា UX និង UI ដោយសារតែការផ្តោតអារម្មណ៍យ៉ាងខ្លាំងលើការរចនាគេហទំព័រនិងកម្មវិធី។ ជាការពិតណាស់កម្មវិធី Photoshop មានមធ្យោបាយជាច្រើនដែលស្ថិតនៅក្នុងទីតាំងសេសនៃការលេង "ចាប់" ជាមួយ Sketch ។

ដើម្បីរៀបចំរូបភាពសម្រាប់ទូរស័ព្ទក្នុង Sketch ជ្រើសរូបភាពនៅលើផ្ទាំងសិល្បៈហើយ ចុចប៊ូតុងធ្វើឱ្យនាំចេញនៅខាងក្រោមផ្ទាំងលក្ខណសម្បត្តិ ។ វានឹងបើកប្រអប់នាំចេញ។ ចុចសញ្ញា + ដើម្បីបន្ថែមកំណែ 2x និង 3x ហើយបន្ថែមបច្ច័យ។ ទ្រង់ទ្រាយដែលមានគឺ PNG, JPG, TIF, PDF, EPS, និង SVG ។ ក្នុងករណីនេះជ្រើសរើស JPG ។ ចុចលើប៊ូតុងនាំចេញ និងកំណត់គោលដៅឬបង្កើតថតដើម្បីទុករូបភាពផ្សេងៗដែលបាននាំចេញ។

04 នៃ 05

ហេតុអ្វីបានជាអ្នកត្រូវបង្កើតកំណែបី (ឬច្រើន) នៃរូបភាព

ក្នុងន័យជាច្រើនទីផ្សារទូរស័ព្ទចល័តគឺជា "ព្រៃលិចទឹក" នៃដំណោះស្រាយហើយទំហំមួយពិតជាមិនសមស្របទាំងអស់។ នៅក្នុងឧទាហរណ៍ខាងលើពី Adobe Design Design រូបភាពនេះត្រូវបានដាក់នៅលើផ្ទាំងគំនូរ iPhone 6 និងផ្ទាំងឧបករណ៍ Android ។ ចំណាំរបៀបកំណែ 1x នៅខាងឆ្វេងហាក់ដូចជាទំហំពាក់កណ្តាល។ ជាក់ស្តែងរូបភាពនេះនឹងបង្ហាញនៅលើ iPhone 6 ជាមួយនឹងអេក្រង់ Retina របស់វា។ កំណែ 2 ស៊ីមសមឥតខ្ចោះហើយកំណែ Android ដំណើរការចេញពីអេក្រង់។ ជម្រើសរបស់អ្នកគឺដើម្បីធ្វើមាត្រដ្ឋានរូបភាពឬនាំចេញរូបភាពចេញពី Photoshop នៅទំហំខុសគ្នា។

05 នៃ 05

តេស្តដំបូង, តេស្តជាញឹកញាប់, មិនទុកចិត្តអ្វីសោះ, មិនទុកចិត្តនរណាម្នាក់និងជាពិសេសអ្នក

អ្វីដែលអ្នកត្រូវការយល់គឺនេះគ្រាន់តែជាការចាប់ផ្តើមនៃដំណើរការប៉ុណ្ណោះ។ ការមើលការងាររបស់អ្នកលើ ឧបករណ៍ជាច្រើនដែលអ្នកអាច ត្រូវបានចាត់ទុកថាជាបំណែកដ៏សំខាន់នៃលំហូរការងារ។ អ្នកក៏ត្រូវដឹងដែរថានេះគ្រាន់តែជាជំហានដំបូងក្នុងដំណើរការបង្កើតទ្រព្យសម្បត្តិក្រាហ្វិចសម្រាប់គម្រោងបណ្ដាញកម្មវិធីទូរស័ព្ទឬចល័តប៉ុណ្ណោះ។

ការប្រើប្រាស់កម្មវិធីគំរូដើមគឺជាមធ្យោបាយដ៏ល្អមួយក្នុងការរកឃើញចំណុចឈឺចាប់ប៉ុន្តែទ្រព្យសម្បត្តិដូចគ្នាទាំងនេះនឹងត្រូវតែជាលទ្ធផលសម្រាប់ប្រើដោយអ្នកអភិវឌ្ឍន៍។ ក្នុងករណីជាច្រើនទំហំវិមាត្រនៃទ្រព្យសម្បត្តិរួមទាំងរូបតំណាងនឹងមានទំហំធំនិងមិនមែនជាទ្រង់ទ្រាយ svg ប៉ុន្តែ png ។ នៅ glance ដំបូង, នេះអាចហាក់បីដូចជាបន្តិចនៅលើកំពូលប៉ុន្តែចងចាំក្បួនមាសនៃការពង្រីករូបភាព: វាជាការល្អប្រសើរជាងមុនដើម្បីធ្វើមាត្រដ្ឋានចុះជាងការបង្កើន។

ចំនុចសំខាន់គឺត្រូវធ្វើការយ៉ាងជិតស្និទ្ធជាមួយអ្នកអភិវឌ្ឍន៍របស់អ្នកនិងប្រើសូហ្វវែរគំរូដើម្បីបង្ហាញពីចេតនានៃការរចនារបស់អ្នក។ ទោះយ៉ាងណាក៏ដោយទ្រព្យសម្បត្តិដូចគ្នាទាំងនោះនឹងត្រូវត្រៀមខ្លួនសម្រាប់ផលិតផលចុងក្រោយហើយអ្នកអភិវឌ្ឍន៍របស់អ្នកមានចំណុចល្អជាងអ្វីដែលអ្នកត្រូវការ។