Share
Fiind "pixel perfect" este ceva care a devenit mai puțin important pentru designerii de web odată ce am acceptat toate că site-urile web poate sa arata diferit pe diferite ecrane si dispozitive. Dar asta nu înseamnă că atenția la detalii este mai puțin de dorit. În acest tutorial vă voi prezenta un instrument (o extensie Chrome) care vă poate ajuta să atingeți perfecțiunea pixelilor în desenele dvs. web.
Mai întâi, vizitați www.canvasflip.com/visual-inspector pentru a descărca extensia Chrome. Odată instalat, vi se va solicita să vă înscrieți pentru un cont (gratuit, dar actualizările sunt disponibile de la 5 USD pe utilizator, pe lună). Ești susținut!
Visual Inspector extensia ChromeInspectorul vă permite să selectați orice element din pagină și să îi examinați proprietățile. Iată ce arată inspectorul când selectăm sigla de pe pagina de pornire Tuts +, de exemplu:
Putem vedea marcajul utilizat și diferitele clase atribuite elementului. Putem vedea, de asemenea, padding, frontieră și alte stiluri aplicate. Putem vedea sursa de imagine în acest caz, și prin derularea în jos putem vedea mult mai mult pe lângă.
În acest stadiu putem exporta orice bunuri pe care le putem vedea. Fișierele de imagini, deși nu în format SVG, sunt ușor accesibile pentru a le apuca. Chiar și textul și alte stiluri pot fi exportate în format JPG sau PNG și preluate în aplicația de proiectare la alegerea dvs., ceea ce este foarte util.
Mișcând mouse-ul în jurul browser-ului și făcând clic pe diferite elemente, se vor arăta măsurători și aliniere, specificate și implicite, ajutându-vă să obțineți o idee solidă despre unde este totul în legătură cu orice altceva - și vă ajută să atingeți perfecțiunea pixelilor.
Ca și în cazul multor alte instrumente de inspecție pentru browser, puteți modifica proprietățile și stilurile elementelor care vă plac. Cu toate acestea, cu Visual Inspector, așa cum ați putea inspecta, toate stilurile pot fi modificate cu ajutorul instrumentelor vizuale (glisoare, elemente de selectare a culorilor și așa mai departe).
Odată schimbat, puteți lovi CSS Output pentru a dezvălui noile stiluri pe care le-ați creat.
Alternativ, puteți lovi Sincronizarea modificărilor pe Info fila și editările vor fi salvate în contul dvs. Acest lucru vă permite să revizuiți aceste modificări în viitor - ceva ce inspectorii obișnuiți de browser nu permit în mod implicit.
Inspectorul vizual este un instrument excelent pentru cei care se bucură rafinare în browser. Examinați ceea ce există deja, efectuați modificările dorite, apoi exportați aceste modificări sau salvați-le pentru mai târziu. Și dacă faceți upgrade, puteți colabora și cu membrii echipei. Du-te și verificați-l apoi spuneți-ne ce credeți în comentariile dvs.!
Accentsconagua