ການກຽມຮູບພາບສໍາລັບອຸປະກອນມືຖື

ການຖ່າຍຮູບສໍາລັບມືຖືບໍ່ແມ່ນສິ່ງທີ່ມັນເບິ່ງຄືວ່າ

ມັນໄດ້ກາຍມາເປັນເວລາຫຼາຍຂຶ້ນສໍາລັບຜູ້ທີ່ມີ ຮູບພາບ ທີ່ບໍ່ມີພຽງແຕ່ເຮັດວຽກຢູ່ໃນຮູບພິມແຕ່ຍັງຢູ່ໃນເວັບແລະອຸປະກອນເຊັ່ນ: iPhones, iPads, ອຸປະກອນ Android ແລະແທັບເລັດ Android. ໃນດ້ານນີ້, ນີ້ສາມາດເຫັນໄດ້ວ່າເປັນ "ສິ່ງທີ່ດີ" ຍ້ອນສື່ມວນຊົນຂອງພວກເຮົາປະກົດວ່າຂະຫຍາຍໄປສູ່ຫນ້າຈໍດິຈິຕອນ. ຄວາມເສຍຫາຍແມ່ນຈໍານວນຫນ້າຈໍແລະຈໍານວນຫນ້າຈໍທີ່ສັບສົນ. ມັນບໍ່ແມ່ນເລື່ອງແປກທີ່ທີ່ຈະໄດ້ຍິນກ່ຽວກັບສິ່ງທີ່ເກີດຂື້ນໃນສິ່ງທີ່ເກີດຂື້ນກັບວັນເວລາທີ່ ຮູບພາບ TIFF 300 dpi ໃນຮູບແບບ CMYK ແມ່ນມາດຕະຖານ. ໂອ້ຍສໍາລັບມື້ເກົ່າທີ່ດີ!

ວັນເຫລົ່ານັ້ນຫມົດແລ້ວ. ພວກເຮົາໃນປັດຈຸບັນມີການໂຕ້ຖຽງກັບຄວາມຈິງທີ່ວ່າຮູບພາບ 200 ເຖິງ 200 ອາດຈະປາກົດຂື້ນໃນອຸປະກອນຫນຶ່ງແລະຍັງປາກົດຂະຫນາດໄຕມາດໃນຂະຫນາດອື່ນແລະສາມຊິ້ນຂະຫນາດໃນອີກເທື່ອຫນຶ່ງ. ມັນທັງຫມົດກໍ່ລົງມາສູ່ "ການແຂ່ງຂັນທີ່ມີການແກ້ໄຂອາວຸດ" ທີ່ຖືກປະຕິບັດໂດຍຜູ້ຜະລິດອຸປະກອນດັ່ງທີ່ພວກເຂົາພະຍາຍາມທີ່ຈະຂັດຂີ້ເຫຍື້ອຫຼາຍຂຶ້ນໃນຫນ້າຈໍກ່ວາຄູ່ແຂ່ງຂອງພວກເຂົາ.

ນີ້ເຮັດໃຫ້ພວກເຮົາຮູ້ສິ່ງທີ່ພວກເຮົາຈະເອີ້ນວ່າ "ການລຸກຂຶ້ນຂອງຕົວຢ່າງ". suffixes ແມ່ນສິ່ງເຫຼົ່ານັ້ນ - @ 2x, @ 3x - tacked ກັບຊື່ຂອງຮູບພາບ. ຕົວຢ່າງພວກເຂົາ, ສໍາລັບການຍົກຕົວຢ່າງ, ເຮັດໃຫ້ຮູບພາບທີ່ຖືກຕ້ອງຢູ່ໃນສະຖານທີ່ທີ່ເຫມາະສົມໃນອຸປະກອນທີ່ຖືກຕ້ອງ. ຫຼັງຈາກນັ້ນ, ມັນໄດ້ຮັບດີກວ່າເກົ່າ.

ການເຮັດວຽກຂອງພວກເຮົາຫຼາຍທີ່ກ່ຽວຂ້ອງກັບການເຮັດວຽກຮ່ວມກັບໄອຄອນແລະດ້ວຍການເພີ່ມຂຶ້ນຂອງການເຄື່ອນໄຫວອອກແບບ Flat, ສິ່ງເຫຼົ່ານີ້ຖືກສ້າງຂື້ນໃນຮູບແບບການແຕ້ມຮູບ vector ດັ່ງ ຮູບພາບ ແລະ ຮູບແຕ້ມ . ບັນຫາແມ່ນອຸປະກອນພຽງແຕ່ບໍ່ສາມາດ render ໄຟລ໌ຫຼື .eps. ພວກເຂົາຕ້ອງໄດ້ຮັບການປ່ຽນເປັນ Scalable Vector Graphics ແລະ, ອີງຕາມຄໍາຮ້ອງສະຫມັກທີ່ໃຊ້ໃນການສ້າງໄອຄອນ, ອາດບໍ່ແມ່ນຕົວເລືອກ SVG.

ຫຼັງຈາກນັ້ນ, ມັນໄດ້ຮັບດີກວ່າເກົ່າ.

ມີລະດັບໃຫມ່ຂອງຊອບແວ - ໃບຄໍາຮ້ອງ Prototyping - ທີ່ໄດ້ກາຍເປັນຈຸດປະຊຸມກ່ອນຮູບພາບແລະຮູບສັນຍາລັກຂອງທ່ານຖືກສົ່ງອອກໄປຫາອຸປະກອນແລະພວກເຂົາມີຄວາມແຕກຕ່າງຂອງພວກເຂົາເຊັ່ນກັນ.

ການສອນນີ້ຈະເຄື່ອນຍ້າຍລະຫວ່າງ Photoshop ແລະ Sketch ສໍາລັບຮູບພາບແລະການນໍາໃຊ້ Adobe Design ປະສົບການ ເພື່ອສະແດງໃຫ້ເຫັນບາງຈຸດເຈັບປວດລະຫວ່າງຄວາມຄິດແລະການນໍາໃຊ້ທີ່ສຸດຂອງທ່ານ. ໃຫ້ເລີ່ມຕົ້ນ.

01 of 05

ວິທີການກະກຽມຮູບພາບຕ່າງໆສໍາລັບອຸປະກອນມືຖືໃນ Adobe Photoshop

ຂັ້ນຕອນທໍາອິດໃນຂະບວນການນີ້ແມ່ນຮູ້ຈັກອຸປະກອນຫຼືອຸປະກອນເປົ້າຫມາຍຂອງທ່ານ. ໃນກໍລະນີນີ້, ທ່ານຈະກໍານົດເປົ້າຫມາຍຂອງ iPhone 6 ເຊິ່ງມີຫນ້າຈໍ 375 ພິກະເຊນກວ້າງ 667 ພິກະເຊນ. ການອອກແບບຮຽກຮ້ອງໃຫ້ຮູບພາບເປັນຄວາມກວ້າງຂອງຫນ້າຈໍ.

ຮູບພາບທີ່ຖືກນໍາໃຊ້ໄດ້ຖືກແຊງພາຍໃນວິຫານ Bern Minster ໃນ Bern, ສະວິດເຊີແລນ. ເມື່ອຮູບພາບເປີດໃນ Photoshop, ເລືອກຮູບພາບ> ຂະຫນາດພາບ ເພື່ອກວດເບິ່ງຂະຫນາດຂອງພາບແລະຄວາມລະອຽດຂອງມັນ. ແນ່ນອນ, ຮູບພາບທີ່ມີ 3156 x 2592 ມີຄວາມລະອຽດຂອງ 300 ppi ແລະຂະຫນາດໄຟລ໌ຂອງ 23.4 Mb ພຽງແຕ່ຈະບໍ່ເຮັດວຽກ.

ພາຍໃນກ່ອງໂຕ້ຮູບຂະຫນາດຮູບ, ຫຼຸດຜ່ອນຄວາມລະອຽດເຖິງ 100 ppi . ເຮັດສິ່ງນີ້ທໍາອິດເພາະວ່າຂະຫນາດຮູບພາບຍັງຈະປ່ຽນແປງ. ດ້ວຍການຕັ້ງຄ່າຄວາມລະອຽດ, ປ່ຽນຄວາມກວ້າງໃຫ້ 375 ພິກະເຊນ. ຖ້າທ່ານກວດເບິ່ງຂໍ້ມູນຂະຫນາດຮູບພາບທ່ານຈະສັງເກດເຫັນວ່າຮູບພາບໄດ້ຫຼຸດລົງຈາກ 234 ເມກາວັດໄປຫາ 338k ທີ່ມີຄວາມມືຖືຫຼາຍ. ກົດ OK ເພື່ອຍອມຮັບການປ່ຽນແປງແລະປິດກ່ອງໂຕ້ຕອບຂະຫນາດຮູບພາບ.

02 of 05

ວິທີການນໍາໃຊ້ "ການສົ່ງອອກເປັນ ... " Dialogue Box ໃນ Adobe Photoshop

ເມື່ອຮູບພາບແມ່ນກຽມພ້ອມສໍາລັບການສົ່ງອອກ, ເລືອກ "ສົ່ງອອກ> ສົ່ງອອກເປັນ ... " ເພື່ອເປີດກ່ອງໂຕ້ຕອບການສົ່ງອອກ.

Dialogue Box ນີ້ແມ່ນນອກຈາກນີ້ມາຍັງ Photoshop ແລະປ່ຽນກ່ອງໂຕ້ຕອບ "Save For Web" ທີ່ພວກເຂົາໃຊ້ສໍາລັບປີ. ຖ້າທ່ານຍັງຕ້ອງການມັນ, ທ່ານສາມາດຊອກຫາມັນໃນການສົ່ງອອກໄປບໍ່ໄດ້. ມັນແມ່ນ, ສໍາລັບເຫດຜົນທີ່ຊັດເຈນ, ເອີ້ນວ່າ "ສົ່ງອອກສໍາລັບເວັບໄຊຕ໌ (Legacy)". ຖ້ານີ້ແມ່ນການຢ້ຽມຢາມຄັ້ງທໍາອິດຂອງທ່ານກັບກ່ອງໂຕ້ຕອບນີ້, ນີ້ແມ່ນການທ່ອງທ່ຽວສັ້ນໆ:

• ຂະຫນາດ: ຄໍລໍານີ້ກໍານົດຂະຫນາດຜົນຜະລິດຂອງຮູບພາບ. ລັກສະນະທີ່ຫນ້າສົນໃຈຂອງພື້ນທີ່ນີ້ແມ່ນມັນຈະຂະຫຍາຍຮູບພາບແຕ່ວ່າຮູບພາບຈະບໍ່ປາກົດເປັນ "fuzzy" ໃນອຸປະກອນເນື່ອງຈາກມີຈໍານວນ pixels ຂະຫນາດໃຫຍ່ຢູ່ຫນ້າຈໍຂອງອຸປະກອນ.
• 1X: ກົດປຸ່ມນີ້ແລະທ່ານຈະຖືກນໍາສະເຫນີດ້ວຍຂະຫນາດຈໍານວນຫນຶ່ງ. ປະເພດ 1x, 2x ແລະ 3x ແມ່ນມີຄວາມກ່ຽວພັນກັນກັບອຸປະກອນ Hi Dpi ຈາກ Apple ແລະພວກເຂົາພ້ອມກັບອີກສອງສາມຄົນຈະກຽມຮູບພາບສໍາລັບອຸປະກອນ Android.
• ຕົວເລືອກ : ຕົວເລືອກນີ້ຈະສະແດງຂະຫນາດຂອງທ່ານແຕ່ວ່າມັນຈະຖືກສະແດງເປັນ @ 2x ຫຼືຂະຫນາດຖືກເລືອກ. suffix ນີ້ຈະຖືກເພີ່ມໃສ່ຊື່ຮູບພາບ.
• ປ້າຍ +: ກົດນີ້ເພື່ອເພີ່ມຂະຫນາດຕ່າງໆສໍາລັບຜົນຜະລິດ. ໃນກໍລະນີນີ້, ໃຫ້ຄລິກໃສ່ມັນສອງຄັ້ງແລະເລືອກ 2x ແລະ 3x ຈາກປ໊ອບອັບລົງ. ນີ້ຈະກວມເອົາອຸປະກອນ iOS ໃດໆ.
• ກະຕ່າຂີ້ເຫຍື້ອສາມາດເຮັດໄດ້: ໃຫ້ຄລິກໃສ່ປຸ່ມນີ້ແລະທາງເລືອກຈະຖືກລຶບອອກຈາກບັນທັດ.
• ການຕັ້ງຄ່າໄຟລ໌: ເລືອກຮູບແບບ - jpg, png, gif ຫຼື svg - ທີ່ເຫມາະສົມກັບຮູບພາບ. ຖ້າຂະຫນາດຂອງແຟ້ມເປັນຄວາມກັງວົນທ່ານກໍ່ສາມາດຫຼຸດຜ່ອນການປັບຄ່າໄດ້.
• ຂະຫນາດພາບ: ທ່ານສາມາດປ່ຽນຂະຫນາດຂອງຮ່າງກາຍຂອງຮູບພາບ.
• ຂະຫນາດຜ້າເຊັດໂຕ: ທ່ານສາມາດປ່ຽນຂະຫນາດຂອງກາຟຟິກໄດ້.
• Metadata: ທ່ານສາມາດເພີ່ມລິຂະສິດແລະຂໍ້ມູນຕິດຕໍ່ຂອງທ່ານກັບ metadata ຂອງຮູບພາບ.

ເມື່ອສໍາເລັດ, ໃຫ້ຄລິກໃສ່ປຸ່ມສົ່ງອອກທັງຫມົດ. ທ່ານຈະຖືກຖາມວ່າບ່ອນໃດທີ່ທ່ານຕ້ອງການຈັດວາງຮູບພາບ. ນິໄສທີ່ດີທີ່ຈະພັດທະນາແມ່ນການກົດປຸ່ມໂຟນເດີໃຫມ່ແລະສ້າງໂຟນເດີທີ່ຈະຖືຮູບພາບທີ່ສົ່ງອອກ. ເມື່ອທ່ານຄລິກໃສ່ການສົ່ງອອກ, ທ່ານຈະໄດ້ສະແດງຮູບພາບຕ່າງໆໃນໂຟນເດີ.

03 of 05

ວິທີການກະກຽມຮູບພາບສໍາລັບອຸປະກອນມືຖືໃນ Sketch 3 ຈາກ Bohemian Coding

Sketch 3, ເປັນຄໍາຮ້ອງສະຫມັກ Macintosh ພຽງແຕ່ຈາກ Bohemian Coding, ໄດ້ຮັບຄວາມສໍາຄັນໃນລະຫວ່າງຜູ້ອອກແບບ UX ແລະ UI ເນື່ອງຈາກຄວາມສຸມໃສ່ການອອກແບບເວັບແລະ app. ໃນຄວາມເປັນຈິງ Photoshop, ໃນຫລາຍໆດ້ານ, ແມ່ນຢູ່ໃນສະຖານະການທີ່ແປກປະຫລາດຂອງການຫລິ້ນ "ຈັບ" ກັບ Sketch.

ການກະກຽມຮູບພາບສໍາລັບມືຖືໃນ Sketch, ເລືອກຮູບພາບໃນ artboard ແລະ ກົດປຸ່ມ Make Exportable ຢູ່ດ້ານລຸ່ມຂອງ ໂປແກຼມ Properties . ນີ້ຈະເປີດກ່ອງໂຕ້ຕອບການສົ່ງອອກ. ກົດປຸ່ມ + ເພື່ອເພີ່ມເວີຊັນ 2x ແລະ 3x ແລະຍັງຈະເພີ່ມນາມສະກຸນ. ຮູບແບບທີ່ມີຢູ່ແມ່ນ PNG, JPG, TIF, PDF, EPS ແລະ SVG. ໃນກໍລະນີນີ້, ເລືອກ JPG. ກົດປຸ່ມສົ່ງອອກ ແລະເປົ້າຫມາຍຫຼືສ້າງໂຟນເດີເພື່ອຖືຮູບພາບຕ່າງໆທີ່ສົ່ງອອກ.

04 of 05

ເປັນຫຍັງທ່ານຕ້ອງສ້າງສາມ (ຫຼືຫຼາຍ) ເວີຊັນຂອງຮູບພາບ

ໃນຫລາຍໆດ້ານ, ຕະຫລາດມືຖືແມ່ນ "ທໍາມະຊາດຕາເວັນຕົກ" ຂອງການແກ້ໄຂແລະຂະຫນາດຫນຶ່ງແນ່ນອນບໍ່ເຫມາະສົມທັງຫມົດ. ໃນຕົວຢ່າງຂ້າງເທິງນີ້ຈາກ Adobe Experience Design, ຮູບພາບແມ່ນຢູ່ໃນ 2 iPhone 6 artboards ແລະອຸປະກອນ Android deviceboard. ສັງເກດເຫັນວ່າວິທີ 1x ຢູ່ເບື້ອງຊ້າຍຈະມີຂະຫນາດຄຶ່ງ. ນີ້ແມ່ນວິທີການທີ່ຮູບພາບຈະປາກົດຢູ່ໃນ iPhone 6 ດ້ວຍຫນ້າຈໍ Retina ຂອງມັນ. ຮຸ່ນ 2x ເຫມາະຢ່າງສົມບູນແລະສະບັບ Android ລັນຈາກຫນ້າຈໍ. ຕົວເລືອກຂອງທ່ານແມ່ນເພື່ອຂະຫນາດຮູບພາບຫຼືສົ່ງອອກຮູບພາບອອກຈາກ Photoshop ຢູ່ໃນຂະຫນາດທີ່ແຕກຕ່າງກັນ.

05 of 05

ທົດສອບໄວ, ທົດສອບເລື້ອຍໆ, ບໍ່ໄວ້ວາງໃຈ, ບໍ່ໄວ້ວາງໃຈໃຜແລະໂດຍສະເພາະຕົວທ່ານເອງ

ສິ່ງທີ່ທ່ານຕ້ອງການເຂົ້າໃຈແມ່ນນີ້ແມ່ນພຽງແຕ່ການເລີ່ມຕົ້ນຂອງຂະບວນການ. ເບິ່ງການເຮັດວຽກຂອງທ່ານກ່ຽວກັບ ອຸປະກອນຈໍານວນຫຼາຍເທົ່າທີ່ທ່ານສາມາດ ຖືເປັນສ່ວນສໍາຄັນຂອງການເຮັດວຽກ. ນອກນັ້ນທ່ານຍັງຈໍາເປັນຕ້ອງຮູ້ວ່ານີ້ແມ່ນພຽງແຕ່ຂັ້ນຕອນທໍາອິດໃນຂະບວນການສ້າງຊັບສິນຮູບພາບສໍາລັບໂຄງການເວັບໄຊທ໌ app ຫຼື mobile.

ການນໍາໃຊ້ຄໍາຮ້ອງສະຫມັກແບບ prototyping ແມ່ນວິທີທີ່ດີທີ່ຈະຄົ້ນພົບຈຸດເຈັບປວດແຕ່ຊັບສິນດຽວກັນເຫຼົ່ານີ້ຈະຕ້ອງມີຜົນຜະລິດສໍາລັບການນໍາໃຊ້ໂດຍຜູ້ພັດທະນາ. ໃນຫຼາຍໆກໍລະນີ, ຂະຫນາດທາງດ້ານຮ່າງກາຍຂອງຊັບສິນ, ລວມທັງຮູບສັນຍາລັກ, ຈະມີຂະຫນາດໃຫຍ່ທາງດ້ານຮ່າງກາຍແລະບໍ່ແມ່ນໃນຮູບແບບ svg ແຕ່ png. ຢູ່ glance ຄັ້ງທໍາອິດ, ນີ້ອາດຈະເບິ່ງຄືວ່ານ້ອຍກວ່າປາຍແຕ່ຈື່ກົດລະບຽບທອງຂອງການຂະຫຍາຍຮູບພາບ: ມັນດີກວ່າທີ່ຈະກວມເອົາຂະຫນາດໃຫຍ່ຂຶ້ນ.

ເສັ້ນທາງລຸ່ມແມ່ນເຮັດວຽກຢ່າງໃກ້ຊິດກັບຜູ້ພັດທະນາຂອງທ່ານແລະນໍາໃຊ້ຊໍແວຕົ້ນແບບເປັນວິທີການສະແດງຄວາມຕັ້ງໃຈໃນການອອກແບບຂອງທ່ານ. ໃນທີ່ສຸດ, ເຖິງວ່າຊັບສິນດຽວກັນເຫຼົ່ານັ້ນຈະຕ້ອງກຽມພ້ອມສໍາລັບຜະລິດຕະພັນສຸດທ້າຍແລະຜູ້ພັດທະນາຂອງທ່ານມີການຈັດການທີ່ດີກວ່າສິ່ງທີ່ເຂົາຕ້ອງການກວ່າທ່ານ.