ຖ້າມີລັກສະນະຫນຶ່ງຂອງການເຮັດວຽກຮ່ວມກັບ Illustrator ທີ່ຂ້ອຍບໍ່ມີຄວາມສຸກມັນກໍ່ແມ່ນການປ່ຽນເສັ້ນທາງສິນລະປະໃຫ້ຮູບພາບ svg ສໍາລັບມືຖືຫຼືເວັບ. ການນໍາໃຊ້ການສົ່ງອອກ> ການສົ່ງອອກເປັນເມນູແລະ, ເພື່ອຄວາມຊື່ສັດຢ່າງຮຸນແຮງ, ຄຸນລັກສະນະສໍາລັບການ Save For Web - ການສົ່ງອອກ> ບັນທຶກສໍາລັບເວັບ - ບໍ່ໄດ້ຖືກນໍາໃຊ້ຢ່າງແທ້ຈິງ.
ການປ່ຽນຮູບແຕ້ມຮູບແບບ svg ໄດ້ເປີດກ່ອງໂຕ້ແຍ້ງທີ່ຫນ້າສົນໃຈຫຼາຍ, ສໍາລັບຜູ້ທີ່ມີປະສົບການໃຫມ່ໃນການເຮັດວຽກນີ້, ມັນໄດ້ສະເຫນີຂໍ້ມູນທີ່ມີຄວາມສັບສົນທີ່ບໍ່ໄດ້ກ່າວເຖິງຄວາມຈິງທີ່ມີຈໍານວນຮູບແບບ .svg ແລະພຽງແຕ່ຫນຶ່ງໃນນັ້ນແມ່ນເຫມາະສົມ ຮູບແບບ. ເມື່ອທ່ານໄດ້ນໍາໃຊ້ກັບຂະບວນການເຮັດວຽກນີ້ມັນບໍ່ແມ່ນເລື່ອງໃຫຍ່, ແຕ່ເສັ້ນທາງການຮຽນຮູ້ແມ່ນຂ້ອນຂ້າງ.
ການປ່ຽນແປງທັງຫມົດທີ່ມີການສົ່ງອອກສໍາລັບຫນ້າຈໍໃຫມ່ - ສົ່ງອອກ> ສົ່ງອອກສໍາລັບຫນ້າຈໍແລະເອກະສານສົ່ງອອກສິນຊັບທີ່ນໍາສະເຫນີໃຫ້ກັບ Illustrator CC 2015 ໃນເດືອນມິຖຸນາ 2016. ໃນ "ວິທີການ" ນີ້ຂ້ອຍຈະສະແດງວິທີການໃຊ້ທັງສອງ ຄຸນລັກສະນະ. ໃຫ້ເລີ່ມຕົ້ນ.
01 of 04
ວິທີການເຂົ້າເຖິງການສົ່ງອອກສໍາລັບຫນ້າຈໍໃນ Adobe Illustrator CC 2015
ໄດ້ເປັນຜູ້ໃຊ້ Illustrator ຕັ້ງແຕ່ Illustrator 88 ຂ້ອຍຄິດວ່າທ່ານສາມາດເຂົ້າໃຈຄວາມບໍ່ພໍໃຈຂອງຂ້ອຍທີ່ຈະພິຈາລະນາ Illustrator ເປັນເຄື່ອງມືການອອກແບບທີ່ສໍາຄັນສໍາລັບເວັບແລະມືຖືແລະໂຄງການຕ່າງໆ.
ເມື່ອ artboards ໄດ້ຖືກນໍາສະເຫນີໃນ CS4 ສະບັບ 2008, ຂ້າພະເຈົ້າຄິດວ່ານີ້ແມ່ນນອກຈາກນັ້ນທີ່ຫນ້າສົນໃຈກັບຄໍາຮ້ອງສະຫມັກ. ໃນເວລາທີ່ຂ້າພະເຈົ້າໄດ້ເຫັນຄັ້ງທໍາອິດ, ບັນຫາ Save For Web ໃນ Illustrator, ອີກເທື່ອຫນຶ່ງ, ຂ້າພະເຈົ້າພົບວ່າມັນຫນ້າສົນໃຈແຕ່ຂ້າພະເຈົ້າໄດ້ພົບກັບລັກສະນະດຽວກັນໃນ Adobe Fireworks ທີ່ສອດຄ່ອງກັບຮູບພາບເວັບຫຼາຍກວ່າ Illustrator.
ດ້ວຍການມາເຖິງວິທີການແບບມືຖືທໍາອິດໃນການອອກແບບແລະການເພີ່ມຂື້ນຢ່າງຕໍ່ເນື່ອງກ່ຽວກັບຮູບພາບ SVG ສໍາລັບໂຄງການມືຖື, Illustrator ແມ່ນເຄື່ອງມື "ໄປ" ໃຫ້ SVG ແລະກາຍເປັນຈຸດສໍາຄັນໃນວຽກງານການອອກແບບ UI.
ເຖິງຢ່າງໃດກໍ່ຕາມ, ຖ້າຂ້ອຍຕ້ອງການສົ່ງສິນຄ້າໃຫ້ກັບມືຖື, Sketch 3 ແລະ Photoshop CC 2015 ແມ່ນເຄື່ອງມືທີ່ຂ້ອຍເລືອກ. Illustrator ໄດ້ເຂົ້າໄປໃນບັນຊີລາຍຊື່ໃນເດືອນມິຖຸນາ 2016 ດ້ວຍການສົ່ງອອກທີ່ດີງາມສໍາລັບເມນູ Screens.
ໃນຕົວຢ່າງຂ້າງເທິງ, ຂ້າພະເຈົ້າມີສອງຫນ້າຈໍສໍາລັບ iPhone ແລະພວກເຂົາແມ່ນຢູ່ໃນປ້າຍທະເລແຍກຕ່າງຫາກທີ່ມີຊື່ວ່າ "Home" ແລະ "Places". ເພື່ອໃຫ້ພວກເຂົາສົ່ງອອກ, ຂ້ອຍໄດ້ເລືອກ File> Export> Export for Screens. ກ່ອງໂຕ້ຕອບການສົ່ງອອກສໍາລັບຫນ້າຈໍເປີດ.
02 of 04
ວິທີການນໍາໃຊ້ Export for Screens Dialog Box
ເມື່ອກ່ອງໂຕ້ຕອບປາກົດ, ໃຫ້ຄລິກໃສ່ແຕ່ລະ artboard ເພື່ອເລືອກ. ຫຼັງຈາກນັ້ນມັນຈະມີເຄື່ອງຫມາຍກວດກາ. ນອກນັ້ນທ່ານຍັງສາມາດຄລິກສອງຄັ້ງໃນຊື່ artboard ເພື່ອເລືອກເອົາມັນແລະປ່ຽນແປງມັນ. ນີ້ແມ່ນສິ່ງທີ່ດີທີ່ຈະຮູ້ວ່າ artboards ຂອງທ່ານມີຊື່ວ່າ "Artboard 1" ແລະ "Artboard 2" ເຊິ່ງ, ເວົ້າຢ່າງແຈ່ມແຈ້ງ, ບອກທ່ານບໍ່ມີຫຍັງ.
ທ່ານມີສາມເລືອກໃນພື້ນທີ່ເລືອກ:
- ທັງຫມົດ: ທາງເລືອກນີ້ສົ່ງອອກແຕ່ລະ artboard ໃນເອກະສານເປັນເອກະສານແຍກຕ່າງຫາກ.
- ຊ່ວງ: ກະລຸນາປ້ອນຈໍານວນຂອງ artboards ທີ່ຈະສົ່ງອອກ. ນີ້ແມ່ນເປັນປະໂຫຍດໂດຍສະເພາະສໍາລັບບັນດາໂຄງການທີ່ມີປ້າຍໂຄສະນາຕ່າງໆ.
- ເອກະສານເຕັມ: ເລືອກນີ້ແລະທັງຫມົດຂອງ artboards ຈະຖືກແປເປັນເອກະສານດຽວ.
ພື້ນທີ່ສົ່ງອອກໃຫ້ທ່ານເລືອກໂຟເດີປາຍທາງສໍາລັບຜົນຜະລິດ. ໂຟເດີເລີ່ມຕົ້ນຈະເປັນສະຖານທີ່ປັດຈຸບັນຂອງເອກະສານ Illustrator.
ຮູບແບບແມ່ນບ່ອນທີ່ "magic ຈະເກີດຂຶ້ນ. ທ່ານຈະສັງເກດເຫັນວ່າມີສາມໄອຄອນ - iOS. Android ແລະເຄື່ອງມື. ສອງຄັ້ງທໍາອິດແມ່ນຄໍາອະທິບາຍດ້ວຍຕົນເອງ. ໄອຄອນ Gear ເປີດການຕັ້ງຄ່າຮູບແບບທີ່ອະນຸຍາດໃຫ້ທ່ານສາມາດຄວບຄຸມວິທີການສ້າງຮູບແບບໄຟລ໌ແຕ່ລະບັນຊີໃນລະດັບໃດຫນຶ່ງ. ການຕັ້ງຄ່າເຫຼົ່ານີ້ແມ່ນ "ຮູບແບບສະເພາະ" ແລະເມື່ອທ່ານໄດ້ເຮັດການປ່ຽນແປງຂອງທ່ານ, ໃຫ້ຄລິກໃສ່ປຸ່ມ Save Settings ແລະການປ່ຽນແປງເຫລົ່ານັ້ນຈະຖືກນໍາໃຊ້ກັບຮູບແບບທີ່ຈະອອກ.
ເມື່ອທ່ານເລືອກ iOS ຫຼື Android, ບັນຊີຈະປ່ຽນແປງທັງຫມົດຂອງຄວາມລະອຽດທີ່ມີຢູ່ໃນແພລະຕະຟອມນັ້ນ. ລາຍະການ iOS ຈະສະແດງໃຫ້ເຫັນ ເຖິງປັດໄຈການຂະຫຍາຍຕົວ ສໍາລັບຈໍສະແດງຜົນ Retina ແລະການເລືອກ Android ຈະມີລະດັບຄວາມກວ້າງຕັ້ງແຕ່ .75x 4x ເຊິ່ງຮອງຮັບອຸປະກອນ Android ທຸກຢ່າງ.
ຖ້າມີຮູບແບບທີ່ສະແດງວ່າທ່ານຕ້ອງການເອົາອອກ, ໃຫ້ຄລິກໃສ່ "x". ຖ້າມີຫນຶ່ງທີ່ທ່ານຕ້ອງການເພີ່ມໃຫ້ຄລິກໃສ່ປຸ່ມ Add Scale.
ເມື່ອສິ້ນສຸດແລ້ວ, ໃຫ້ຄລິກໃສ່ປຸ່ມ Export Artboard ແລະແຖບຄວາມຄືບຫນ້າຈະສະແດງໃຫ້ທ່ານເຫັນໃນເວລາທີ່ຂະບວນການສໍາເລັດ.
03 of 04
ການນໍາໃຊ້ການສົ່ງອອກສໍາລັບຫນ້າຈໍໄຟລ໌ຈາກ Adobe Illustrator CC 2015.
ເມື່ອທ່ານກວດເບິ່ງຜົນຂອງການສົ່ງອອກສໍາລັບຫນ້າຈໍ, ທ່ານຈະຄົ້ນພົບວ່າ Illustrator ໄດ້ອອກເວີຊັນແປນໆຂອງແຕ່ລະຫນ້າຈໍ. ຢູ່ເທິງຫນ້າດິນ, ນີ້ອາດຈະມີຄວາມອ່ອນເພຍໂດຍສະເພາະແມ່ນຖ້າທ່ານຄາດຫວັງວ່າ Illustrator ໄດ້ສົ່ງອອກທັງຫມົດຂອງບິດແລະຊິ້ນເປັນພາບ.
ຖ້າທ່ານກ້າວໄປຄືນແລະຄິດກ່ຽວກັບມັນສໍາລັບປັດຈຸບັນ, ນີ້ແມ່ນແທ້ໆສິ່ງທີ່ທ່ານຕ້ອງການເພາະວ່າທ່ານສາມາດນໍາໃຊ້ຜົນຜະລິດນີ້ໃນໃບຄໍາຮ້ອງຕົ້ນສະບັບເຊັ່ນ: Adobe ປະສົບການການອອກແບບ , Principleformac, Atomic.io , UXPin ຫຼືຄໍາຮ້ອງສະຫມັກ prototyping ອື່ນໆ
ໃນຕົວຢ່າງນີ້, ຂ້ອຍກໍາລັງໃຊ້ Adobe Experience Design (XD) ເພື່ອສ້າງການຄລິກທີ່ງ່າຍໆ. ຂັ້ນຕອນທໍາອິດໃນຂະບວນການນີ້ແມ່ນເພື່ອເລືອກຂະຫນາດ iPhone 6 ເຊິ່ງກົງກັບຂະຫນາດຂອງ Interface Illustrator
ໃນເວລາທີ່ຫນ້າຈໍເປີດ, ຂ້ອຍໄດ້ເລືອກເຄື່ອງມື Artboard ແລະຄລິກໃສ່ເທິງປ້າຍເພື່ອເພີ່ມ artboard ອື່ນ. ຂ້າພະເຈົ້າຫຼັງຈາກນັ້ນໃຫ້ພວກເຂົາຊື່ວ່າ "ຫນ້າທໍາອິດ" ແລະ "ສະຖານທີ່", ຄັດເລືອກເອົາຮູບແຕ້ມແຕ່ລະຄົນແລະນໍາເຂົ້າຮູບພາບ png ຈາກ Illustrator ໃນ artboard.
ໃນການສ້າງ "ຈຸດສໍາຄັນ" ສໍາລັບການຄລິກໂດຍຜ່ານ, ຂ້າພະເຈົ້າ drew ຮູບສີ່ແຈສາກເທິງປຸ່ມສໍາຫຼວດຢູ່ຫນ້າຈໍເຮືອນແລະກໍານົດຄ່າຕື່ມແລະຄ່າຊາຍແດນຂອງມັນໃຫ້ none ໂດຍບໍ່ເລືອກເອົາຄຸນສົມບັດເຫຼົ່ານັ້ນໃນໂປແກຼມ Properties. ຂ້ອຍໄດ້ເຮັດສິ່ງດຽວກັນກັບປຸ່ມ Back ໃນຫນ້າ Places.
ເພື່ອເພີ່ມການຕິດຕໍ່ພົວພັນ, ຂ້າພະເຈົ້າໄດ້ເລືອກຮູບແບບ Prototype ແລະຫຼັງຈາກນັ້ນຄລິກໃສ່ "hotspot". ຂ້ອຍລາກລູກສອນທີ່ເອີ້ນວ່າສາຍ - ໄປທີ່ຫນ້າສະຖານທີ່ແລະກໍານົດເປົ້າຫມາຍການປ່ຽນແປງທີ່ສະຖານທີ່, ການເຄື່ອນໄຫວທີ່ຈະຊຸກຍູ້, easing ເພື່ອຜ່ອນຄາຍແລະໄລຍະເວລາຂອງການປ່ຽນເປັນ .6 ວິນາທີ.
ຂ້າພະເຈົ້າໄດ້ເລີ້ມຂັ້ນຕອນນີ້ກັບຈຸດສຸມໃນຫນ້າສະຖານທີ່. ຄວາມແຕກຕ່າງກັນພຽງແຕ່ແມ່ນການປ່ຽນແປງທີ່ຖືກຕັ້ງຂື້ນເພື່ອການຊຸກຍູ້ຂວາ. ໃນເວລາທີ່ຂ້າພະເຈົ້າຄລິກປຸ່ມຫຼິ້ນ, ຂ້າພະເຈົ້າໄດ້ທົດສອບ prototype ຂອງຂ້າພະເຈົ້າ.
04 of 04
ວິທີການນໍາໃຊ້ຄະນະກໍາມະການສົ່ງອອກຊັບສິນໃນ Adobe Illustrator CC 2015
ພ້ອມກັບເມນູ Save for Screens, Adobe ຍັງໄດ້ເພີ່ມກະດານໃຫມ່ - Asset Export - ທີ່ເອົາຈຸດເຈັບປວດທີ່ໃຫຍ່ລົງມາໃນ UI Design workflow.
ຈຸດເຈັບປວດແມ່ນໄອຄອນ. Illustrator ແມ່ນຮູບແບບການແຕ້ມຮູບ vector ທີ່ດີແຕ່ໃຫ້ຜົນຜະລິດ, ໃຫ້ເວົ້າວ່າ 10 ໄອຄອນ, ໃນຫນ້າທີ່ມີ 40 ຫຼື 50 ຂອງພວກເຂົາຕ້ອງການແຕ່ລະຄົນຖືກບັນທຶກໄວ້ເປັນພາບ SVG. ນີ້ຕ້ອງໄດ້ໃຊ້ເວລາຫຼາຍກ່ວາທີ່ໃຊ້ເວລາຫຼາຍກ່ວາປົກກະຕິຂໍຂອບໃຈກັບການເດີນທາງສົບຜົນສໍາເລັດກັບກະດານ SVG. ຈຸດເຈັບປວດນີ້ແມ່ນສິ່ງທີ່ຜ່ານມາ.
ກະດານໃຫມ່ນີ້ສາມາດພົບໄດ້ທີ່ Window> Asset Export. ເມື່ອກະດານເປີດ, ເລືອກສິນຄ້າທີ່ທ່ານຕ້ອງການແປງເປັນ SVG ຫຼືຮູບແບບອື່ນແລະລາກລົງໃນກະດານ. ໃນເວລາທີ່ທ່ານປ່ອຍຫນູ, ຮູບພາບຂະຫນາດນ້ອຍຂອງຊັບສິນແມ່ນຖືກເພີ່ມໃສ່ກະດານ. ຊື່ຊັບສິນ. ຮັກສາສິ່ງທີ່ລາກລົງໃນກະດານຈົນກວ່າທ່ານຈະສໍາເລັດ.
ເລືອກແຕ່ລະລາຍການໃນເຂດການຕັ້ງຄ່າການສົ່ງອອກ, ຫຼືຄັດເລືອກເອົາທັງຫມົດໂດຍກົດປຸ່ມ Shift ແລະຄລິກໃສ່ແຕ່ລະຄົນ. ເລືອກຮູບແບບຂອງທ່ານ - ໃນຕົວຢ່າງນີ້, ຂ້າພະເຈົ້າໄດ້ເລືອກ SVG - ແລະກົດປຸ່ມ Export. ລາຍການຄັດເລືອກຈະອອກເປັນໄຟລ໌ SVG ກັບສະຖານທີ່ດຽວກັນກັບໄຟລ໌ Illustrator.
ບ່ອນທີ່ຂະບວນການທັງຫມົດນີ້ໄດ້ຮັບເຖິງແມ່ນວ່າທ່ານບໍ່ຕ້ອງໃຊ້ເອກະສານສົ່ງອອກສິນຊັບ. ຖ້າທ່ານກົດປຸ່ມ Save for Screens ຢູ່ດ້ານລຸ່ມຂອງກະດານ, ກ່ອງໂຕ້ຕອບເປີດ.
ກົງກັນຂ້າມ, ທ່ານສາມາດຄລິກໃສ່ແຖບຊັບສິນໃນກະດານ Save for Screens ເພື່ອເຂົ້າເຖິງເອກະສານ Export Export Asset. ຕົວຢ່າງເຊັ່ນຖ້າຄຸນມີໄອຄອນທີ່ກໍາຫນົດເອງໃນ artboard ທ່ານສາມາດເປີດເອກະສານ Export Asset ໃນກ່ອງໂຕ້ຕອບ Save for Screen ແລະລາກລາຍະການນັ້ນລົງໃນກະດານ Export Asset.