WellDoneCode-ийн PerfectPixel өргөтгөл. Google Chrome-д зориулсан Pixel Perfect PerfectPixel-тэй танилцах
Өдрийн мэнд найзуудаа. Нөгөө өдөр Дима Шулешов надтай холбоо барьж, сонирхолтой нийтлэлийн сэдвийг санал болгов (Дима, сайн уу!). Миний хувьд энэ нь сонирхолтой бөгөөд хамааралтай, танд ч бас хэн нэгэнд хэрэгтэй байх гэж найдаж байна. Эдгээр нь таны буух хуудсаа яг байршлын дагуу байрлуулахад туслах хэдэн мөр код юм.
Нэмж дурдахад та зайг хэмжих, Photoshop, хөтчийн цонх, текст засварлагч хооронд шилжихэд зарцуулсан цагийг эрс багасгах болно.
Дууссан үр дүн нь таны төсөлд зүүн дээд буланд (ямар ч газар) бэхлэгдсэн товчлуур байгаа бөгөөд та түүн дээр дарахад тодорхой ил тод байдал бүхий зохион байгуулалт (зураг) таны зохион байгуулалтанд наасан болно. Та өөрийн догол мөр, хэмжээс, байршил нь дизайнтай хэр нийцэж байгааг үнэлэх боломжтой. Ойлгохын тулд та хичээх хэрэгтэй. Би эх сурвалжийг татаж аваад хэрхэн ажилладагийг харахыг зөвлөж байна, эсвэл энэ богино видеог тоглуулаарай:
Тиймээс, хэрэв та пиксел бүрийг шалгадаг нямбай үйлчлүүлэгчидтэй холбоотой асуудалтай байсан бол одоо ийм асуудал гарах ёсгүй. Эцэст нь энэ нөлөөг мэдэцгээе.
Юуны өмнө, ихэвчлэн тохиолддог шиг бид jQuery номын санг холбодог:
Ихэнх төслүүдэд энэ нь аль хэдийн холбогдсон байгаа тул үүнийг дахин хийхгүй байхаа мартуузай. Энэ нь зөрчилдөөн үүсгэж болзошгүй бөгөөд энэ нь яагаад үүссэнийг ойлгоход удаан хугацаа шаардагдах болно.
Одоо төслийнхөө дотор зарим шошго нэмье. Миний хувьд иймэрхүү харагдаж байна:
Pixel Perfect
Эхний div нь товчлуурыг хариуцдаг блок, хоёр дахь нь бидний зохион байгуулалтын давхаргыг агуулдаг. Үүнийг зөв ашиглахын тулд та хэд хэдэн энгийн тохиргоог хийх хэрэгтэй.
P (арын дэвсгэр: url(../images/maket.jpg) давтагдахгүй; /* Таны зохион байгуулалт */ өргөн: 1255px;/* байршлын өргөн */ өндөр: 750px;/* байршлын өндөр */ зүүн: calc(50) % - 627.5px);/* хоёр дахь утга - бүдүүвчийн өргөний тэн хагас нь*/ байрлал: үнэмлэхүй; дээд: 0; тунгалаг байдал: 0.4 ! чухал; шилжилт: .3s; z-индекс: 97; )
Энд тайлбар дагалддаг 4 параметрийг өөрийнхөөрөө солих шаардлагатай. Бүх зүйл энгийн!
Одоо товчлуурыг загварчилцгаая. Хэрэв гадаад төрх танд чухал бол засварлана уу, үгүй бол байгаагаар нь үлдээж болно.
#p (байрлал: тогтмол; зүүн: 0; дээд: 0; өргөн: 200px; өндөр: 75px; дэвсгэр: #c36c2c; z-индекс: 99; курсор: заагч; текстийг зэрэгцүүлэх: төв; үсгийн хэмжээ: 25px; шугамын өндөр: 0px; өнгө: #c36c2c; зүүн: -150px; босоогоор зэрэгцүүлэх: дунд; үсгийн жин: 700; шилжилт: .3s ) #p:hover (зүүн: 0; мөрийн өндөр: 80px; дэвсгэр: #88d3c2;)
За, үлдсэн бүх зүйл бол товчлуур дээр дарахад хариу үйлдэл нэмэх явдал юм. Бид зүгээр л анги нэмэх/хасах ба арын дэвсгэр дээрх байршлын тусламжтайгаар блокийн ил тод байдлыг өөрчлөх болно.
$(баримт бичиг). бэлэн(функц () ( $("#p"). дарна уу(функц () ( $("#pp").toggleClass("p") ));));
Pixel Perfect техниктэй ажиллах залгаасууд болон скриптүүдийн тойм.
Юуны өмнө Pixel Perfect техник гэж юу вэ? Бүх зүйл энгийн бөгөөд та нэрээр нь таах боломжтой - энэ нь HTML загварын загвар нь PSD-ийн анхны байршилтай яг таарч (пикселийн хувьд пиксел) байршуулах арга техник юм.
Өөрөөр хэлбэл, хэрэв та зохиосон HTML загварын "зураг"-ыг анхны PSD байршлын зураг дээр давхарласан бол хоёр зураг таарах ёстой. Зургийн бүх элементүүдийг хослуулсан байх ёстой - текст, зураг, график элементүүд.
Байршлын орчин үеийн шаардлагын дагуу Pixel Perfect нь бараг бодит стандарт юм. Тиймээс олон захиалга, үйлчлүүлэгчтэй болох хүсэл эрмэлзэл, хүсэл эрмэлзэлтэй бол энэ асуудлыг судлах нь амин чухал юм.
Бичиж байх үед Pixel Perfect техникийг тохирох хөтчийн залгаасууд эсвэл тусгай скрипт ашиглан хэрэгжүүлдэг. Хоёр залгаас болон хоёр скриптийг доор товчхон авч үзэх боловч бүх тохиолдолд Pixel Perfect-ийг турших алхамууд ижил байна.
Эхлээд Photoshop дээр анхны PSD байршлыг форматаар зураг хэлбэрээр хадгалдаг
| 1 | .png |
Энэ бол хуудасны байршлыг шалгах энгийн Pixel Perfect процедур юм. Хуудасны элементүүд эх хувьтай таарахгүй бол загварын файл дахь утгыг засна.
Firefox-д зориулсан Pixel PerfectFirefox хөтчийн хувьд ижил нэртэй хуудасны байршлыг шалгах Pixel Perfect залгаас байдаг.
Pixel Perfect залгаасыг суулгасны дараа түүний дүрс нь Firefox хөтчийн хэрэгслийн мөрөнд гарч ирнэ. Pixel Perfect залгаас гэж хэлэх нь зүйтэй болов уу Зөвхөн Firefox хөтчийн хамгийн сүүлийн хувилбарыг дэмждэг(жишээ нь, v.31 хувилбарт энэ залгаас ажиллахгүй).
Одоо та PSD-ийн анхны байршлыг Photoshop дээр нээж, форматаар бүхэлд нь зураг хэлбэрээр хадгалах хэрэгтэй
| 1 | .png |
Чухал! PNG зураг руу экспортлохын өмнө PSD байршлыг анхны хэмжээнд нь авчрах ёстой! Энэ зорилгын үүднээс Photoshop-д нөөц товчлуурын хослол байдаг: Ctrl+1 - Windows\Linux-д, Cmd+1 - Mac OS X-д зориулагдсан.
PSD байршлын PNG хуулбарыг бэлтгэж, хадгалмагц Firefox хөтчийн цонхонд энэ загварт суурилсан HTML хуудсыг нээнэ үү.
Хөтчийн хэрэгслийн самбар дээрх дүрс дээр дарж Pixel Perfect залгаасыг ажиллуулна уу. Залгаасны цонх нэн даруй гарч ирэх бөгөөд энэ нь биднийг урьдчилан бэлтгэсэн PNG зургийг (PSD байршлын хуулбар) сонгохыг хүсэх болно.
"Давхарга нэмэх" товчийг дарж, бэлтгэсэн PNG зургийг сонгоод үр дүнг гаргана - хоёр давхаргын давхаргыг (дизайн ба эх хувь):
HTML хуудасны текст болон товчлуур нь PNG эхтэй хэрхэн таарахгүй байгааг бид харж байна. Тиймээс Firebug доторх загварын табыг нээгээд (энэ залгаас Pixel Perfect залгаасыг эхлүүлэхэд автоматаар идэвхждэг) засварлаж/тохируулж эхлээрэй:
Pixel Perfect залгаасын "Invert" горимд анхаарлаа хандуулаарай - үүний тусламжтайгаар та HTML хуудасны элементүүдийг маш нарийн тохируулах боломжтой.
Дээр тайлбарласан үйл явц нь Pixel Perfect залгаас, мөн Pixel Perfect зохион байгуулалттай ажиллахаас бүрдэнэ. Бүх зүйл туйлын энгийн.
Pixel Perfect залгаастай ажиллах үйл явцыг харуулсан видеог доор харуулав (видео нь минийх биш, тиймээс би чанарын хувьд бүх утгаараа хариуцлага хүлээхгүй) - ажлын тодорхой байдлыг хангахын тулд дараахь зүйлийг хийх болно.
Firefox хөтөчийн Pixel Perfect залгаасын тойм дууслаа.
Google Chrome-д зориулсан PerfectPixelТуршилтын хуудсанд холбогдохын тулд та үндсэн мөрүүдийг бичих хэрэгтэй.
$ (функц ()( $ . pixlayout ( "/зам_зураг/зураг.ext"); ));Та скрипт дэх параметрүүдийг зааж өгснөөр үндсэн багцыг нэмж болно ( албан ёсны вэбсайтаас авсан):
$ (функц ()( $ . pixlayout (( src : "/img/layout.jpg" , тунгалаг байдал : 0.8 , дээд : 50 , төв : үнэн , клип : үнэн , харуулах : үнэн ), ".wrapper" ); ) ); pixLayout скриптийг ашиглах тухай хурдан лавлагааPixLayout скриптийг ашиглах тухай товч мэдээллийг доорх хоёр догол мөрөнд өгсөн болно ( мөн албан ёсны вэбсайтаас авсан):
Хөдөлж байна- товчлуурууд: "зүүн", "баруун", "дээш", "доош"
- товчлуурууд: W , A , S , D зураг харагдах үед
- навигацийн самбарын товчлуурууд
- Устгах ( pixLayout-ийн бүх html болон css кодыг хуудаснаас устгана уу) - самбарын баруун дээд буланд загалмай;
- Самбарыг зүү - самбарын баруун дээд буланд байгаа дүрс;
- Шуурхай лавлагаа - самбарын баруун дээд буланд асуултын тэмдэг;
- Параметрүүдийг буулгах - самбарын доод талд "дээш" сум;
- Зургийг харуулах\нуух - навигацийн самбарын төв товчлуур эсвэл Shift + E.
PixLayout скрипттэй хэрхэн ажиллахыг харуулсан албан ёсны видеог доор харуулав.
ДүгнэлтЭнэхүү богино тоймд бид пикселийг төгс байрлуулах дөрвөн хэрэгсэлтэй танилцсан. Тэдгээрийн хоёр нь үнэгүй хөтөчийн залгаасууд юм. Нөгөө хоёр нь HTML хуудастай холбогдох JavaScript скриптүүд юм.
Ажилдаа юуг сонгох нь хүн бүрийн өөрийнх нь асуудал.
Хөтөчийн залгаасуудын хамгийн сайн зүйл бол тэдгээр нь үнэ төлбөргүй, суулгахад хялбар, хэрэглэхэд хялбар байдаг.
X-Precise скриптийн сул тал нь төлбөртэй ($5), шалгаж буй HTML хуудастай холболт шаарддаг, jQuery номын сангаас хамаардаг. PixLayout-ийн сул тал нь үүнийг ажиллуулахын тулд HTML хуудастай холбогдоход нэмэлт "шуугиан" шаарддаг гэж хэлж болно.
Гэсэн хэдий ч, хоёр скриптийн давуу тал нь энэ нь ямар ч хөтөч (Firefox, Chrome, Opera, Safari) эсвэл тодорхой хөтчийн хувилбараас огт хамааралгүй, хөтчүүд хоорондын шийдэл гэдэг нь маргаангүй баримт юм. Скриптүүд бүх тохиолдолд адилхан ажиллах болно.
Google Chrome-д зориулсан PerfectPixel өргөтгөл нь загвар зохион бүтээгчид болон вэб хөгжүүлэгчдэд хэрэглэгчийн баталсан загварт хамгийн сайн тохирох вэб сайтын бүдүүвчийг бий болгоход тусалдаг.
Та Chrome дээр хөгжүүлж буй хуудсаа нээж, PerfectPixel-ийг ажиллуулж, шинэ давхарга - даалгаврын зураг нэмж, одоо үр дүн дээр зургийг бодит цаг хугацаанд давхарлаж, согогийг харьцуулж, засах боломжтой. Та энэ видеог үзээд өргөтгөл хэрхэн ажилладагийг харж болно:
Нэг хуудсанд олон давхаргыг дэмждэг бөгөөд давхаргын багц нь өөр өөр домэйны хувьд өөр өөр байдаг. Хэрэв та хөтчөө хааж, компьютерийг унтраавал нэмсэн давхаргууд болон тэдгээрийн шинж чанарууд хадгалагдана.
Хөгжүүлэгчийн тав тухтай байдлыг хангах үүднээс Түгжих функц байдаг - идэвхжүүлсэн үед та идэвхтэй давхаргын доор байрлах хуудасны элементүүдтэй харилцах боломжтой. Та давхаргын ил тод байдлыг өөрчилж, тодорхой координат өгч, масштабыг өөрчилж болно (Retina зургийг туршихад хэрэгтэй).
Энэ хэрэгсэлтэй аль болох үр дүнтэй ажиллахыг хүсч буй хүмүүст зориулж товчлуур болон хулганы үйлдлийн горимыг дэмждэг бөгөөд тэдгээрийн бүрэн жагсаалтыг төслийн албан ёсны вэбсайтаас авах боломжтой: www.welldonecode.com/perfectpixel/shortcuts.
Гарчиг дээр хоёр товшилтоор хяналтын самбарыг дэлгэцийн баруун ирмэг хүртэл багасгаж болно. Мини горим нь жижиг дэлгэцийн хэмжээс дээр мэдрэмжтэй дизайныг туршихад хэрэгтэй.
Өргөтгөл нь тогтмол шинэчлэгдэж, шинэ функцууд болон товчлуурууд нэмэгдэж, алдаанууд засагддаг. Бид санал хүсэлт, санал хүсэлт байвал бидэн рүү имэйлээр бичнэ үү. [имэйлээр хамгаалагдсан]. Ойрын ирээдүйд Firefox, Safari, IE гэх мэт бусад хөтчүүдэд зориулсан хувилбаруудыг гаргаж, үүлэн ашиглан давхарга, тохиргоог синхрончлохоор төлөвлөж байна. www.welldonecode.com/perfextpixel албан ёсны вэбсайтаас шинэ функцууд гарах огнооны талаар мэдээлэл авахын тулд мэдээллийн товхимолд бүртгүүлнэ үү.
Би энд сэтгэгдэл эсвэл имэйлээр таны асуултанд хариулахдаа баяртай байх болно.
Chrome.RF нийгэмлэгт тантай уулзаж байгаадаа баяртай байна!
13/01/2017Би холоос эхэлье. Саяхан би HTML академид зөвлөгчөөр элссэн. Зөвлөгөө өгөх нь таны мэдлэгийг зохион байгуулахад тусалдагаас гадна янз бүрийн хэрэгцээтэй зүйлсийг хөгжүүлэхэд гайхалтай түлхэц өгдөг, учир нь энэ явцад сонирхолтой ажлууд гарч ирдэг бөгөөд тэдгээрийн шийдлийг хялбархан автоматжуулж болно.
Оюутнууд гар утас, таблет, ширээний компьютер гэсэн гурван төлөвт зориулагдсан нийт есөн загвар бүхий гурван хуудас бүхий сургалтын загварыг хүлээн авдаг. Дасан зохицох хуудас гаргах явцад цонхны хэмжээг үе үе өөрчилж, ширээний хувилбарт хэв маяг нэмэх үед, жишээлбэл, гар утас эвдэрсэн эсэхийг шалгах нь зүйтэй юм. Зохион байгуулалттай нийцэж байгаа эсэхийг шалгах хамгийн сайн арга юу вэ?
Томоохон төслүүдэд ашигладаг дэлгэцийн агшин нь ийм даалгаварт хэтэрхий хүнд байдаг тул эхлэгч бүр үүнийг ашиглахын тулд бидэнд маш энгийн зүйл хэрэгтэй.
Мэдээжийн хэрэг миний бодсон хамгийн эхний зүйл бол Pixel Perfect залгаас байсан (ядаж Chrome болон Firefox-д ашиглах боломжтой), гэхдээ энэ нь хэд хэдэн шалтгааны улмаас тохиромжгүй юм. Жишээлбэл, хуудсууд хооронд шилжих, хөтчийн цонхыг өөрчлөх үед ачаалагдсан байршлыг өөрчлөх боломжгүй бөгөөд тэдгээрийг гараар солих нь хурдан уйтгартай болно. Түүгээр ч барахгүй, бидний хувьд байршлыг төгс өөрчлөх боломжтой медиа илэрхийллүүд байдаг.
Миний хамгийн анхны шийдэл иймэрхүү харагдаж байв:
BODY ( дэвсгэр-давталт: давтагдахгүй; арын байрлал: 50% 0; дэвсгэр зураг: url("img/index-mobile.png"); ) @media (мин-өргөн: 768px) ( BODY ( дэвсгэр- зураг: url("img/index-tablet.png"); ) ) @media (мин-өргөн: 1024px) ( BODY (арын дэвсгэр зураг: url("img/index-desktop.png"); ) )
Энэ кодыг хуудас бүрт оруулсан болно. Энэ нь шаардлагатай медиа илэрхийлэлүүдийг тохируулж, зургийн холбоосыг тодорхой хуудас бүрийн одоогийн байршил болгон өөрчилдөг.
Хуудас хооронд шилжих, цонхны хэмжээг өөрчлөх үед байршил өөрчлөгддөг тул үүнийг аль хэдийн ашиглаж болох бөгөөд энэ нь маш тохиромжтой. Бүдүүвчүүд нь тэмдэглэгээний доор байрладаг бөгөөд тэдгээрийг авахын тулд график засварлагч руу байнга орох шаардлагагүй тул ийм энгийн загвар ч гэсэн цагийг ихээхэн хэмнэдэг.
Гэхдээ хэв маягийг бичихийн хэрээр хуудас нь өөрийн гэсэн дэвсгэр, зурагтай гарч ирэх бөгөөд доод давхарга дахь зохион байгуулалт нь үл үзэгдэх болно. Би юу хийх хэрэгтэй вэ?
Миний дараагийн шийдэл бол хуудас бүр дээр бүдүүвч бүхий тунгалаг давхарга үүсгэдэг Chrome өргөтгөл байв. Цонхны хэмжээг өөрчлөх үед өмнөх тохиолдлын нэгэн адил медиа илэрхийлэл ашиглан байршлыг өөрчилдөг. Урамшууллын хувьд бид байршлын давхаргын ил тод байдлыг хянах, ялгааг олоход хялбар болгохын тулд ялгаа холих горимыг идэвхжүүлэх чадварыг нэмсэн.
Энэ нь гайхалтай зүйл болсон. Гэхдээ энэ нь зөвхөн Chrome дээр ажилладаг, зураг руу чиглүүлэх, зам руу шилжих гол цэгүүдийг өргөтгөлийн тохиргоонд тохируулсан байх ёстой, байршлын зургууд нь өргөтгөл дотор байх ёстой бөгөөд бусад бүх төрлийн хязгаарлалтууд байдаг. Ерөнхийдөө энэ нь бүх нийтийнх биш, шинэ төсөл бүр гарын авлагын тохиргоог шаарддаг бөгөөд энэ нь эхлэгчдэд тохиромжгүй байдаг.
Би маш энгийн шийдлийг олохыг хүссэн бөгөөд ингэснээр хэн ч тохиргоо, суурилуулалтыг даван туулж, тэр үед тэр юу хийж байгаагаа ядаж ойролцоогоор ойлгох болно.
Тэмдэглэгээг бүдүүвчтэй харьцуулахын тулд танд хоёр давхарга хэрэгтэй: тэмдэглэгээтэй давхарга ба зохион байгуулалттай давхарга. Нэг талаас, та хуудасны байршилд байрлал бүхий давхаргыг гараар оруулах боломжтой, нөгөө талаас шаардлагагүй болсон үед үүнийг мартах эрсдэл өндөр байдаг тул дараагийн сонголт нь одоо байгаа хуудасны элементүүдийг ашиглах явдал байв. давхаргууд.
Хэрэв та бүдүүвчийг арын дэвсгэр болгон тохируулсан бол ил тод байдлыг өөрчлөхөд зураглал нь мөн тунгалаг болох тул элементийг байршилтай давхарга болгон ашиглах нь дээр.
HTML ( дэвсгэр-давталт: давтагдахгүй; дэвсгэр-байрлал: 50% 0; дэвсгэр зураг: url("img/index-mobile.png"); ) @media (мин-өргөн: 768px) ( HTML ( дэвсгэр- зураг: url("img/index-tablet.png"); ) ) @media (мин-өргөн: 1024px) ( HTML (арын дэвсгэр зураг: url("img/index-desktop.png"); ) )
Өмнөх тохиолдлын нэгэн адил зохион байгуулалт нь тэмдэглэгээний доор байрлах боловч одоо дэвсгэрийг зааж өгсөн бол тэдгээр нь харагдахгүй болно. Тэмдэглэгээний давхаргыг хагас тунгалаг болгоё: -д тунгалаг байдлыг нэмж:
/* Байршил бүхий давхарга болгон ашиглах */ HTML ( дэвсгэр давталт: давтагдахгүй; арын байрлал: 50% 0; дэвсгэр зураг: url("img/index-mobile.png"); ) @media (минут). - өргөн: 768px) ( HTML ( дэвсгэр зураг: url("img/index-tablet.png"); ) ) @media (мин-өргөн: 1024px) ( HTML ( дэвсгэр зураг: url("img/index- desktop .png"); ) ) /* Тэмдэглэгээний давхаргыг хагас тунгалаг болгох */ BODY ( тунгалаг байдал: .5; )
Үүнийг бас ямар нэг байдлаар ашиглаж болох боловч энэ шийдэл нь тунгалаг байдлын тохиромжтой хяналтгүй байсан тул би хуудсанд иймэрхүү самбар нэмсэн жижиг скрипт бичсэн:
Энэ нь ил тод байдлыг хянах боломжийг олгодог (энэ тохиолдолд бүдүүвчийн оронд зүгээр л судалтай дэвсгэр байдаг), хуудасны эргэн тойронд чирж, шаардлагагүй бол унтрааж болно.
Ашиглаж болох хөтчийн тоог хязгаарлахгүйн тулд хөтчийн өргөтгөл хийхгүй байхаар шийдсэн.
Суулгац дараах байдлаар дуусна.
Миний бодлоор энэ нь нэлээд тохиромжтой хэрэгсэл болж хувирсан, гэхдээ ямар нэг зүйлийг сайжруулах нь гарцаагүй. Хэрэв танд энэ талаар ямар нэгэн санаа байгаа бол сэтгэгдэл дээр надад бичээрэй. Та ийм асуудлыг хэрхэн шийдэж, үүнд ямар хэрэгсэл ашигладаг болохыг би бас сонирхох болно.
UPD: номын сан npm руу шилжсэн, бүх оролцогчиддоо баярлалаа
Хэрэв та дөнгөж компьютерээ эзэмшиж, янз бүрийн програм хангамж ашиглаж байгаа бол танд зураг үзэх програм хэрэгтэй бол Pixel Perfect-ийг татаж аваарай. Энэхүү үзэгч нь маш энгийн байдлаар хэрэгжсэн тул хөгжүүлэгчид орос хэлээр ярьдаг хэрэглэгчдэд зориулж бүтээгдэхүүнийг нутагшуулах талаар санаа зовохыг хүсээгүй (мөн ерөнхийдөө арван жилийн өмнө санаагаа орхисон) туршлагагүй хэрэглэгч ч гэсэн үүнийг хялбархан эзэмшиж чадна.
Интерфейсийн тухайӨмнө дурьдсанчлан Pixel Perfect нь маш бага ажиллагаатай. Энэ нь зөвхөн гэрэл зураг, зураг харуулахаас гадна тэдгээрийг засах, хэвлэх, тэр ч байтугай онлайнаар нийтлэх боломжтой олон үйлдэлт үзэгчдэд дассан хэрэглэгчдэд маш хязгаарлагдмал мэт санагдаж магадгүй юм. Тиймээс, хэрэв танд олон функц хэрэгтэй бол аналогийг хайж олох замаар энэ програм хангамжийг тойрч гарахыг зөвлөж байна, жишээлбэл -.
Pixel Perfect нь JPEG, PNG, GIF болон BMP форматаар зургуудыг нээх, үзэх боломжийг танд олгоно. Гэсэн хэдий ч, програм нь нэг зургаас нөгөөд шилжихийг дэмждэггүй бөгөөд "эргэх" товчлуур байхгүй тул зураг бүрийг тусад нь нээх шаардлагатай болно. Файлыг нээх үед дэлгэцийн доод хэсэгт байгаа үзэгч нь объектын талаархи бүх техникийн мэдээллийг харуулдаг бөгөөд энэ нь нэлээд тохиромжтой юм. Үзэж байх үед хэрэглэгчид зургийг голд байрлуулж, сунгах боломжтой.
Ажлын онцлогPixel Perfect нь зөөврийн форматаар тархсан бөгөөд энэ нь хэрэглэгчийн туршлагыг улам хялбаршуулдаг. Суулгахад санаа зовох зүйлгүй, татаж авсан архивыг задлаад, гүйцэтгэх боломжтой файлыг ажиллуулаарай. Үзэгч нь компьютерийн техник хангамж болон түүн дээр суулгасан Windows-ийн хувилбарт тавигдах шаардлагагүй шаардлагыг тодорхойлдог.
Үр дүн- оросжуулсан интерфейс байхгүй;
- зөөврийн форматаар тараасан;
- Програмын хэрэгслүүд нь нэг функцийг гүйцэтгэхэд суурилдаг - график файлуудыг харуулах;
- зургийг үзэх явцад техникийн өгөгдлийг харуулах;
- програм хангамжийн бүтээгдэхүүнийг хөгжүүлэгчид дэмжихээ больсон.