ເນື້ອຫາ
- 01. ປ່ຽນຮູບພາບພື້ນຖານໃຫ້ເປັນຮູບແບບ
- 02. ເອົາແບບຂອງລົງໃສ່ artboard
- 03. ສ້າງ artboard ໃໝ່ ສຳ ລັບຮູບແບບ
- 04. ປະຢັດຮູບແບບການ ນຳ ໃຊ້ເວັບ
- 05. ປະສົມປະສານຮູບແບບເຂົ້າໃນເວັບໄຊທ໌້ຂອງທ່ານ
- ມັກນີ້ບໍ? ອ່ານເຫຼົ່ານີ້!
- ຄວາມຮູ້ທີ່ຕ້ອງການ: ພື້ນຖານ HTML, CSS ພື້ນຖານ, ປະສົບການການອອກແບບ vector ພື້ນຖານ
- ຕ້ອງການ: Illustrator CS6 ຫຼື Illustrator CC
- ເວລາຂອງໂຄງການ: ເວລາ 15-20 ນາທີ
- ເອກະສານສະ ໜັບ ສະ ໜູນ
ດ້ວຍ ຈຳ ນວນໂທລະສັບສະມາດໂຟນແລະແທັບເລັດທີ່ເພີ່ມຂື້ນທີ່ສະ ໜັບ ສະ ໜູນ ການແກ້ໄຂບັນດາ ໜ້າ ຈໍທີ່ສູງຂື້ນ, ຜູ້ອອກແບບ ກຳ ລັງເລີ່ມຍ້າຍອອກໄປຈາກໂຄງສ້າງທີ່ມີຄວາມໂປດປານໃນຮູບແບບທີ່ອີງໃສ່ vector. ນີ້ຊ່ວຍໃຫ້ນັກພັດທະນາສາມາດຮັກສາກາຟິກທີ່ມີຄຸນນະພາບສູງສຸດໃນເວັບໄຊຂອງພວກເຂົາໂດຍບໍ່ ຈຳ ເປັນຕ້ອງປັບປຸງໃຫ້ທັນສະ ໄໝ.
ໃນບົດສອນທີ່ໃຊ້ເວລາ 15 ນາທີນີ້, ຂ້ອຍຈະສະແດງວິທີການປ່ຽນຮູບພາບ vector ເປັນຮູບແບບຊ້ ຳ ໃນ Adobe Illustrator, ສົ່ງອອກ ສຳ ລັບເວັບ, ແລະໃຊ້ມັນຢູ່ໃນເວັບໄຊທ໌ຂອງເຈົ້າ.
- ອ່ານທຸກ ຄຳ ຕອບຂອງ Illustrator ຂອງພວກເຮົາທີ່ນີ້
01. ປ່ຽນຮູບພາບພື້ນຖານໃຫ້ເປັນຮູບແບບ
ເປີດ Pattern.ai (ສະ ໜອງ ໃຫ້ໃນເອກະສານສະ ໜັບ ສະ ໜູນ ສຳ ລັບບົດແນະ ນຳ ນີ້) ໃນ Illustrator. ນີ້ແມ່ນຮູບພາບເລີ່ມຕົ້ນ ສຳ ລັບການສອນ, ແຕ່ຖ້າທ່ານມີການອອກແບບຂອງທ່ານເອງ, ທ່ານສາມາດ ນຳ ໃຊ້ຂະບວນການດຽວກັນເພື່ອ ໝູນ ໃຊ້ແບບນັ້ນເປັນຮູບແບບຊ້ ຳ.
ເມື່ອທ່ານເປີດ 'Pattern.ai' ແລ້ວ, ໃຫ້ເລືອກ ວັດຖຸ> ຮູບແບບ> ເຮັດ.
ສິ່ງນີ້ຈະເປີດຂຶ້ນ ຕົວເລືອກຮູບແບບ ສົນທະນາ. ປັບແຕ່ງຈົນກວ່າທ່ານຈະໄດ້ຮູບແບບທີ່ທ່ານມັກ. ເມື່ອທ່ານຈົບລົງແລ້ວ, ໃຫ້ກົດປຸ່ມ ເຮັດແລ້ວ ປຸ່ມຂ້າງເທິງ artboard ໄດ້.
02. ເອົາແບບຂອງລົງໃສ່ artboard
ຕອນນີ້ຮູບແບບນີ້ຢູ່ໃນແຜງ Swatches (ຖ້າທ່ານບໍ່ມີແຜງ Swatches ຂອງທ່ານເປີດ, ໄປທີ່ ໜ້າ ຕ່າງ> Swatches), ກົດແລະລາກ swatch ໃສ່ artboard.
03. ສ້າງ artboard ໃໝ່ ສຳ ລັບຮູບແບບ
ຂະຫຍາຍໃຫຍ່ຂື້ນຈົນກວ່າທ່ານຈະເຫັນກ່ອງສີ່ຫລ່ຽມພາຍໃນຮູບແບບ. (ຢ່າກັງວົນ: ນີ້ບໍ່ແມ່ນຂໍ້ຜິດພາດ - ມັນສະແດງໃຫ້ເຫັນບ່ອນທີ່ການເຮັດຊ້ ຳ ຄືນອີກ.)
ເມື່ອທ່ານພົບເຫັນກ່ອງສີ່ຫລ່ຽມ, ໄປທີ່ແຖບເຄື່ອງມືແລະເລືອກເອົາ Artboard Tool. ກຳ ລັງຖື [Shift], ແຕ້ມແບບ artboard ອີກຢ່າງ ໜຶ່ງ ດັ່ງຮູບຂ້າງລຸ່ມນີ້. ປ່ອຍ [Shift] ເມື່ອທ່ານເຮັດແລ້ວ.
04. ປະຢັດຮູບແບບການ ນຳ ໃຊ້ເວັບ
ເລືອກ artboard ໃໝ່ ໂດຍໄປທີ່ ປ່ອງຢ້ຽມ> Artboards ເພື່ອ ນຳ ເອົາກະດານ Artboards. ທ່ານຄວນມີສອງກະດານລາຍການໃນຮູບແບບ: ເລືອກສອງ.
ດຽວນີ້ໄປ ແຟ້ມ> Save For Web.
ການສົນທະນາອື່ນຈະປາກົດຂຶ້ນ. ສຳ ລັບຄຸນນະພາບທີ່ດີທີ່ສຸດ, ໃຫ້ໄປທີ່ Preset ເລື່ອນລົງແລະເລືອກ PNG-24. ໃຫ້ແນ່ໃຈວ່າ ຄວາມໂປ່ງໃສ ຖືກເລືອກໄວ້ເພື່ອໃຫ້ທ່ານສາມາດມີສີທີ່ຢູ່ເບື້ອງຫຼັງຂອງຮູບແບບ.
ກົດ ບັນທຶກ. ເມື່ອໄດ້ຮັບການກະຕຸ້ນກ່ຽວກັບສະຖານທີ່, ໃຫ້ເລືອກ imgs ໄດເລກະທໍລີຢູ່ໃນໂຟນເດີຂອງໂຄງການຂອງທ່ານ.
05. ປະສົມປະສານຮູບແບບເຂົ້າໃນເວັບໄຊທ໌້ຂອງທ່ານ
ໃນປັດຈຸບັນວ່າຮູບແບບແມ່ນກຽມພ້ອມທີ່ຈະໄປ, ເປີດ index.html ແລະ primary.css (ໃນ css ໂຟນເດີ). ທ່ານບໍ່ຄວນຈະມີການປ່ຽນແປງໃດໆຕໍ່ເອກະສານ index.html ເວັ້ນເສຍແຕ່ວ່າທ່ານຕ້ອງການສ້າງບ່ອນທີ່ເຫຼືອຂອງເວັບໄຊທ໌້ໂດຍກົງກັບຮູບແບບ. ໃນ primary.css ແຟ້ມ, ເພີ່ມລະຫັດດັ່ງຕໍ່ໄປນີ້:
ຮ່າງກາຍ {
ຮູບພາບພື້ນຫລັງ: url ('../ imgs / pattern.png');
background-repeat: repeat;
}
(ທ່ານຕ້ອງການເພີ່ມລະບົບ ຄວາມເປັນມາ - ເຮັດເລື້ມຄືນ ເສັ້ນເນື່ອງຈາກວ່າບາງຄັ້ງຕົວທ່ອງເວັບມີບັນຫາຮູບແບບການໂຫຼດ, ສະນັ້ນສິ່ງນີ້ຈະກວມເອົາທຸກຖານຂໍ້ມູນ.)
ເມື່ອທ່ານໄດ້ບັນທຶກທັງສອງໄຟລ໌, ໃຫ້ເບິ່ງຜົນໄດ້ຮັບໃນຕົວທ່ອງເວັບຂອງຕົວເລືອກຂອງທ່ານເພື່ອໃຫ້ແນ່ໃຈວ່າຮູບແບບນັ້ນເຮັດວຽກຖືກຕ້ອງ. ແລະນັ້ນແມ່ນມັນ: ທ່ານມີການອອກແບບຊ້ ຳ ໃນເວັບໄຊຂອງທ່ານ. ດຽວນີ້ທ່ານສາມາດທົດລອງເຕັກນິກນີ້ດ້ວຍຮູບແບບຂອງທ່ານເອງ.
ມັກນີ້ບໍ? ອ່ານເຫຼົ່ານີ້!
- ບົດແນະ ນຳ ພາບປະກອບ: ແນວຄວາມຄິດທີ່ ໜ້າ ຕື່ນຕາຕື່ນໃຈທີ່ຈະລອງມື້ນີ້!
- ຄູ່ມືສຸດທ້າຍໃນການອອກແບບໂລໂກ້ທີ່ດີທີ່ສຸດ
- ຕົວອັກສອນເວັບຟຣີທີ່ດີທີ່ສຸດ ສຳ ລັບນັກອອກແບບ
