Хөдөлгөөнт зураглал нь үргэлж тийм зүйл биш юм
График чанарыг сайжруулахын тулд тэдний ажил хэвлэгдэхээс гадна iPhones, iPads, Android devices, Android tablets зэрэг вэбсайтууд болон төхөөрөмжүүд дээр гарч ирдэг. Гадна талаасаа энэ нь "сайн зүйл" гэж үзэж болох юм. Бидний бүтээлүүд тоон дэлгэц рүү өргөжиж байна. Сул тал нь дэлгэцийн тоог цөөрүүлж, дэлгэцийн нарийвчлалыг эвдэх тоо юм. CMYK форматад 300 dpi нарийвчлалтай TIFF зургийг хэвийн байлгахад тохиолдсон цаг үеийг санан дурсах нь нийтлэг зүйл биш юм. Өө, хөгшин сайхан өдөр!
Тэр өдрүүд дууссан. Одоо бид 200-аад 200 зураг нэг төхөөрөмж дээр зүгээр харагдаад байгаа, гэхдээ бас нэг, гурван улирлын хэмжээгээр дөрөвний нэгийг харуулаад байгаа юм. Энэ бүхэн үнэхээр үйлдвэрлэгчдийн гарт байгаа "Resolution Arms Race" тоглоомыг үйлдвэрлэгчдийн өрсөлдөгчдөөсөө илүү дэлгэцээр гаргахыг хичээдэг.
Энэ нь бидний "Бөх зовлонгийн өндрөөс" гэж нэрлэнэ. Эдгээр дагавар нь зурагны нэр дээр @x2, @ 3x гэсэн объектууд байна. Жишээ нь, тэд зөв зургийг зөв төхөөрөмж дээр зөв байрлалыг байрлуул. Дараа нь илүү сайжирдаг.
Бидний олон ажил дүрс тэмдгүүдтэй ажиллах, Хавтгай дизайны хөдөлгөөнийг бий болгосноор эдгээр зүйлсийг вектор зургийн аппликейшн дотор Illustrator and Sketch байдлаар үүсгэдэг. Асуудал нь төхөөрөмжүүд .ai эсвэл .sep файлуудыг үзүүлэх боломжгүй байна. Тэд Scalable Vector Graphics-т хөрвүүлэгдэх ёстой бөгөөд дүрсүүдийг үүсгэхэд ашигладаг програмаас хамаарч SVG сонголт байх албагүй болно.
Дараа нь илүү сайжирдаг.
Програмын шинэ анги байдаг - Prototyping програмууд нь таны дүрс, дүрсийг төхөөрөмж рүү түлхэхээс өмнө угсрах цэг болж байгаа бөгөөд тэдгээрийн онцлог шинж чанаруудтай.
Энэхүү заавар нь Photoshop болон Sketch-ийн хооронд Adobe Photoshop Design- ыг ашигласнаар таны санаа болон байршлын хоорондох өвдөлтийн цөөн хэдэн өвөрмөц цэгийг харуулах болно. Эхэлцгээе.
01 - 05
Adobe Photoshop дахь гар утасны төхөөрөмжүүдийн зургийг хэрхэн бэлтгэх
Энэ процессийн эхний алхам бол таны зорилтот төхөөрөмж буюу төхөөрөмжийг мэдэх явдал юм. Энэ тохиолдолд та iPhone 6-д зориулж 375 пиксел өргөн 667 пиксел өргөнтэй дэлгэцтэй. Уг зураг нь дэлгэцийн өргөн байхыг шаарддаг.
Ашиглах зургийг Швейцарийн Берн хот дахь Bern Minster Cathedral дотор буудуулсан байна. Зургийн нүүрэн дээр Photoshop-д нээгдсэний дараа зургийн хэмжээ болон түүний нягтралыг шалгахын тулд Зураг> Зургийн хэмжээг сонго . Мэдээжээр, 3156 x 2592 нь 300 ppi-ийн нарийвчлал бүхий форматтай, 23.4 Mb хэмжээтэй файл ажиллахгүй.
Зургийн хэмжээ харилцах цонхны дотор 100кп хүртэлх хэмжээг багасга . Үүнийг эхлээд зурагны хэмжээ өөрчлөгдөх болно. Тохиргоог тогтоодогоор өргөнийг 375 пикс болгож өөрчил. Хэрвээ та Image Size өгөгдлийг шалгаж үзвэл 23.4 Mb-ээс илүү хөдөлгөөнтэй, 338к-ээс илүү хөдөлгөөнтэй байх болно. Өөрчлөлтийг хүлээн авахын тулд OK дарж , Image Size харилцах цонхыг хааж болно.
05 - 05
Adobe Photoshop дахь "Экспорт шиг ..." ярианы хайрцагийг хэрхэн ашиглах талаар
Зургийг экспорт хийхэд бэлэн болсны дараа "Export> Export As ..." гэж сонгоод Export As dialog box-ыг нээнэ үү.
Энэ хэлэлцүүлгийн хайрцаг нь Photoshop-д саяхан нэмсэн бөгөөд тэдгээр нь олон жилийн турш хэрэглэж байсан "Save For Web" ярианы хайрцагаа орлож байна. Хэрвээ танд хэрэгтэй байгаа бол Экспортын поп дээрээс олж болно. Энэ нь тодорхой шалтгаанаар "Экспортын хувьд вэб (Legacy)" гэж нэрлэгдэх болсон юм. Хэрэв энэ харилцан ярианы хайрцагт хийсэн анхны айлчлал бол энд товч танилцуулга байна:
- Хэмжээ: Энэ баганын зургийн хэмжээг гаргана. Энэ талбайн сонирхолтой тал нь энэ зургийг томсгох боловч төхөөрөмжийн дэлгэц дээрх асар олон тооны пикселүүдээс төхөөрөмж дээр "бүдэгхэн" байдлаар дүрслэгдэхгүй.
- 1X: Үүнийг дарж үлдээд , хэд хэдэн хэмжээсээр танилцуулагдах болно. 1x, 2x ба 3х категорууд нь Apple-аас Hi Dpi төхөөрөмжүүдтэй уламжлалт холбоотой байдаг ба тэд цөөн хэдэн хамт Android төхөөрөмжүүдэд зориулж зураг бэлтгэх болно.
- Бөмбөлөг: Энэ сонголт нь таны хэмжээг харуулах боловч @ 2x гэж харагдах болно эсвэл хэмжээ нь сонгогдоно. Энэ зургийг зурагны нэрэнд нэмнэ.
- + Тэмдэг: Үүнийг дарж үүнийг гаралтын хувьд янз бүрийн хэмжээтэй нэмэх хэрэгтэй. Энэ тохиолдолд хоёр удаа дараад 2x ба 3x-ыг поп-с доошоо сонго. Энэ нь бараг iOS төхөөрөмжийг хамрах болно.
- Хогийн сав нь: Энэ товчлуурыг дарж, сонголтыг шугаман дээрээс хасна.
- Файл тохиргоо: jpg, png, gif эсвэл svg форматыг сонгох - зураг дээр хамгийн сайн тохирно. Хэрвээ файлын хэмжээ асуудал бол та Чанарын тохиргоог бууруулж болно.
- Зургийн хэмжээ: Та зургийн физик хэмжээсийг өөрчилж болно.
- Canvas Хэмжээ: Та зурагны физик хэмжээсийг өөрчилж болно.
- Мета өгөгдөл: Та зохиогчийн эрх ба холбоо барих мэдээллээ зургийн метадатад нэмж болно.
Хэрэв дууссан бол Экспортын бүх товчийг дарна уу. Та хаана байрлуулахыг хүсч байгаагаа асууна. Хөгжүүлэлтийн сайн зуршил бол New Folder товчлуур дээр дарж экспортын зургийг хадгалах фолдер үүсгэх явдал юм. Экспорт дээр дарахад та фолдер доторх зургуудыг үзүүлнэ.
03 - 05
Хөдөлгөөнт төхөөрөмжийн дүрсийг хэрхэн бэлтгэх талаар 3-р зураг дээр Bohemian кодлогчоос
Sketch 3, Bohemian Coding-ийн Macintosh-ийн програм хангамж нь вэб болон аппликейшн дээр дизайн хийхэд гол анхаарлаа хандуулдаг тул UX болон UI дизайнеруудын дунд хурдацтай хөгжиж байна. Үнэн хэрэгтээ Photoshop олон талаараа Sketch-тай "catch up" тоглох сондгой байрлалд байна.
Sketch дээр хөдөлгөөнт дүрс бэлтгэхийн тулд artboard дээр зураг сонгож , Properties panel-ийн доод хэсэгт Make Exportable товчийг дарна уу . Энэ нь Экспортын харилцах цонхыг нээнэ. 2x ба 3x хувилбаруудыг нэмэхийн тулд + тэмдэг дээр дарж мөн дагаварыг нэмнэ. Боломжит форматууд нь PNG, JPG, TIF, PDF, EPS, SVG юм. Энэ тохиолдолд JPG сонгоно уу. Экспортын товчлуурыг дарж , экспортлох төрөл бүрийн зургийг хадгалах фолдер үүсгэх буюу үүсгэнэ үү.
04 - 05
Та яагаад зурагны гурван (эсвэл түүнээс дээш) хувилбарыг үүсгэх хэрэгтэй вэ?
Олон талаараа "Mobile West" зах зээл нь "Зэрлэг Баруун" шийдвэр, нэг хэмжээ нь бүгдэд тохирохгүй юм. Дээрх жишээн дээр Adobe Experience Design-ийн зургийг 2 iPhone 6 зургууд болон Android төхөөрөмжийн artboard дээр байрлуулсан. Зүүн талд байгаа 1x хувилбар нь хагас хэмжээгээр хэрхэн байгааг хараарай. Энэ нь яг л iPhone 6 дээр текстийн дэлгэцэн дээр зураг хэрхэн харагдаж байгааг харуулж байна. 2x хувилбар нь төгс тохирох бөгөөд Android хувилбар нь дэлгэцнээс холдох болно. Таны сонголт бол зурагны цар хүрээ эсвэл Photoshop-ээс өөр хэмжээгээр экспортлох явдал юм.
05 - 05
Туршилтын эхэнд, Туршилтын ихэнхийг, Танд итгэхгүй, Нэгдүгээрт, Ялангуяа өөрийгөө үгүйсгэ
Үүнийг ойлгох хэрэгтэй зүйл бол энэ нь зөвхөн үйл явцын эхлэл юм. Ажлынхаа урсгалыг ажлын чухал хэсэг гэж үзэж болохуйц олон тооны төхөөрөмжүүд дээрээ ажиллана. Энэ нь апп эсвэл хөдөлгөөнт вебсайт төслүүдэд зориулсан график хөрөнгийг үүсгэх үйл явцын эхнийх алхам гэдгийг та бас мэдэж байх хэрэгтэй.
Прототипийн хэрэглээг ашиглах нь өвдөлтийг илрүүлэх гайхалтай арга юм. Гэхдээ эдгээр хөрөнгө нь хөгжүүлэгчийн хэрэглэж байх ёстой. Ихэнх тохиолдолд, хөрөнгийн физик хэмжигдэхүүнүүд, түүний дотор дүрсүүд нь физикээр асар их, харин svg гэхдээ png форматтай биш юм. Эхний ээлжинд, энэ нь дээд талдаа жаахан байх шиг санагдаж болох боловч өргөжүүлэх дүрслэлийн алтан дүрмийг санах хэрэгтэй.
Хамгийн гол нь таны хөгжүүлэгчтэй нягт хамтран ажиллах, загвар дизайныг үзүүлэхэд зориулж прототипинг програм хангамжийг ашиглах явдал юм. Эцэст нь, эдгээр эд хөрөнгө эцсийн бүтээгдэхүүний хувьд бэлэн байх ёстой бөгөөд таны хөгжүүлэгч таны хэрэгцээн дээр илүү сайн ажиллах болно.