Share
Photoshop a făcut parte de ani de zile din designul web și este foarte probabil să continue ca atare de mult timp. Dacă proiectați pentru web folosind Photoshop sau sunteți un dezvoltator care se ocupă de codificarea PSD-urilor, probabil că există câteva probleme pe care le întâlniți în mod regulat.
Chiar dacă ați trecut de la Photoshop la Sketch pentru etapa de proiectare a fluxului de lucru, veți confrunta în continuare cu problema coderilor care au nevoie de acces la software-ul pe care altfel nu l-ar folosi. Cu oricare dintre cele două programe, este posibil să atingeți lovituri de viteză care sunt pariale pentru curs atunci când folosiți unelte al căror scop principal este designul, nu generarea de coduri pentru web.
Tipii de la Source au fost producătoare de extensii pentru Photoshop începând cu 2012. Pluginurile lor sunt concepute pentru a ușura unele dintre cele mai frecvente probleme ale procesului de proiectare, cum ar fi crearea de CSS care să reprezinte cu exactitate un design și exportul eficient al imaginilor.
Am fost mult timp fan al plugin-ului lor CSSHat, care generează cod CSS sau preprocesor din straturile Photoshop. De asemenea, folosesc pluginul PNGHat de fiecare dată când folosesc Photoshop, pentru a exporta imagini în PNG, JPEG sau Base64. Puteți vedea ambele pluginuri în acțiune în tutorialul din două părți:
Aceste plugin-uri sunt axate pe etapa de dezvoltare a procesului de creare a site-ului; transformând PSD-urile în site-uri web complet funcționale. Având în vedere că mulți dezvoltatori nu au nevoie chiar de Photoshop pentru alt scop decât accesarea PSD-urilor, este un pas natural următor pentru a vedea acest tip de îmbunătățire a fluxului de lucru luată chiar din Photoshop toate împreună.
Asta este tot ce înseamnă noul desktop și instrumentul bazat pe web, Avocode.
Avocode este un program care este construit pentru procesul de trecere de la PSD (sau Sketch) la cod. Nu generează automat site-uri pentru dvs., ci vă oferă un set de instrumente care vă permit să creați site-uri în modul în care preferați personal, dar mai eficient decât atunci când lucrați direct în Photoshop sau Sketch. Avocode își propune să depășească decalajul dintre etapele de proiectare și codificare a dezvoltării web.
În acest articol vom analiza modul în care puteți utiliza Avocode pentru:
Cu Avocode, PSD-urile sunt împărțite între designeri și dezvoltatori printr-un proces de sincronizare automatizat. Dacă sunteți un designer veți instala un plugin Photoshop și, atunci când designul dvs. este gata, veți apăsa doar un buton "Sync now" pentru a vă face PSD la dispoziția dezvoltatorului.
Modalități suplimentare de sincronizare sunt pe drum, cu Dropbox ca opțiune confirmată care vine într-o versiune viitoare. Judecând după actuala interfață beta 0.5.0 s-ar putea să vedem și sincronizarea prin Layervault, încărcarea directă și tragerea fișierelor direct din spațiul de stocare local.
Dacă sunteți dezvoltator veți primi o notificare prin intermediul Avocode că este disponibil un nou design, moment în care îl puteți deschide direct printr-un singur clic în panoul de navigare PSD. Acest lucru elimină nevoia de trimitere prin e-mail a mega-atașamentelor sau transferarea manuală a fișierelor PSD.
Împreună cu fiecare design vine un sistem de management al versiunii încorporate. Etapele progresive ale unui PSD pot fi sincronizate cu ușurință între designer și dezvoltator, din nou lovind pluginul Photoshop Sincronizați acum , fiecare versiune fiind accesibilă prin panoul de navigare PSD. Avocode își amintește setările de export anterioare ale imaginilor în proiect, ceea ce înseamnă că sarcini precum exportul de imagini recent actualizate pot fi automatizate.
Odată ce ați deschis un PSD în Avocode, veți găsi interacțiunea cu acesta pentru a fi destul de intuitivă. La fel ca Photoshop, avocatul are o Panoul straturilor unde puteți vedea toate straturile și grupurile PSD. Aceste straturi și grupuri pot fi afișate sau ascunse, iar puteți selecta oricare dintre acestea.
Pe lângă selectarea elementelor din proiect prin panoul Straturi, puteți alege Selectați Instrumentul din panoul de instrumente din stânga, apoi faceți clic pe orice element de pe scenă direct. Pentru a selecta mai multe elemente, țineți apăsat SCHIMB și continuați să faceți clic pe elementele pe care doriți să le selectați.
Selecția multiplă funcționează fie direct pe scenă, fie în panoul Straturi.
Pentru a regla designul alegeți Unealta de mana apoi faceți clic și trageți pentru a vă deplasa.
Cu orice nivel selectat și Panoul de inspecție deschideți veți vedea CSS pentru ieșirea elementului respectiv în panoul acestuia Cod subsecțiune, în formă brută sau preprocesor, în funcție de preferințele dvs. Aceasta utilizează aceeași logică de generare CSS ca și plugin-ul CSSHat, care este în continuare cel mai vizibil CSS generator pe care l-am văzut printre opțiunile disponibile în prezent.
Grabbing CSS pentru element este la fel de ușor ca făcând clic pe Copiați CSS sau Copiați mai puțin , astfel încât să puteți insera în foaia de stil sau să evidențiați direct liniile pe care doriți să le utilizați și să le copiați de acolo. Dacă aveți un cod preprocesor generat, acesta va include în mod automat mixuri din biblioteca mixin preferată. Opțiunile disponibile în prezent sunt:
Sunt sigur că nu sunt singură atunci când spun că găsirea dimensiunilor layout-ului din Photoshop poate fi cam dificilă. Abordarea Avocodei la această problemă este foarte simplă. Pentru a obține înălțimea și lățimea unui element:
1. Alege Selectați Instrumentul și selectați orice element sau mai multe elemente.
2. Citiți valorile din colțul din stânga jos al casetei de selectare albastră.
3. Sau citiți valorile din partea dreaptă a previzualizării degetului mare din partea de sus a paginii Panoul de inspecție.
Pentru a găsi distanța orizontală și verticală în pixeli între oricare două elemente:
1. Alege Instrument de măsurare și selectați orice element.
2. Plasați cursorul peste orice alt element și citiți valorile de lângă liniile roșii orizontale și verticale.
Dacă aveți un layer de text selectat, veți vedea o previzualizare clipită a conținutului din Panoul de inspecție, precum și lățimea și înălțimea sa, și o rapiditate Copiază textul butonul pe care îl puteți utiliza pentru a apuca textul din acesta pentru a vă adăuga codul.
1. Alege Instrumentul de selectare a culorilor și mutați mouse-ul în jurul scenei, urmărind previzualizarea culorilor până când aveți culoarea dorită.
2. Faceți clic pe acea locație și culoarea dvs. va fi adăugată la colorate subsecțiune în Panoul de inspecție, cu codurile hexate afișate pentru fiecare.
1. Alege Selectați Instrumentul și selectați orice element sau mai multe elemente.
2. În Panoul de inspecție sub panoul Export subsecțiune, faceți clic pe pictograma fișier mic, cu semnul albastru plus, pentru a vă seta selecția ca activ.
3. Numele activului dvs. va fi extras din numele stratului. Alegeți exportul PNG, JPEG sau SVG, apoi faceți clic pe "Exportați acum". Dacă este primul export de materiale al proiectului, veți putea alege un dosar de destinație, altfel fișierul va fi exportat imediat.
După ce ați selectat selecția ca activ, va apărea și în panoul de materiale. De aici puteți să faceți clic pe pictograma lupă pentru a fi transferat în folderul care stochează exportul de materiale.
De asemenea, puteți face clic pe butonul "Obțineți cod" din partea de sus a panoului sau pe <> pictograma din dreptul numelui activului dvs., pentru a genera cod HTML, CSS sau mai puțin puteți utiliza pentru a plasa elementul în cod.
În pluginul PNGHat pentru Photoshop există, de asemenea, control asupra setărilor exacte JPEG și PNG de export, precum și opțiunile de scalare, așa că îmi imaginez că vom vedea aceleași controale transmise în Avocode în curând.
Pentru a obține o idee despre ce să anticipați în procesele de export ale imaginii Avocode citiți mai multe despre PNGHat aici: Cum să exportați activele Photoshop pentru web cu PNGHat
În prezent, Avocode este în beta privat, astfel încât încă mai sunt multe caracteristici foarte interesante, datorită ieșirii în viitorul apropiat. Aplicația este programată să se mute în versiunea beta la un moment dat în această vară, după care vom vedea lansarea oficială.
Pe măsură ce evoluția se mișcă, iată câteva dintre lucrurile pe care le putem anticipa:
Indiferent de sistemul de operare cu care lucrați sau chiar dacă sunteți pe un dispozitiv mobil, veți putea utiliza Avocode. În momentul în care versiunea beta închisă a lui Avocode este pusă pe picioare pe Mac, dar versiunea completă a aplicației native va fi rulată și pe Windows și Linux, iar versiunea web va rula în orice browser modern.
Raportul sursă are deja un prototip de lucru care oferă toate aceleași funcționalități pentru modelele bazate pe Sketch. Deci, dacă sunteți un designer care utilizează Sketch on Mac, un designer care folosește Photoshop pe Windows, un dezvoltator care scrie un cod pe Linux sau dacă utilizați orice altă combinație, veți fi la fel de pregătiți.
Avocode este de fapt construit pe partea de sus a editorului de cod Atom produs de GitHub. Ceea ce este cu adevărat interesant în legătură cu acest lucru este că înseamnă că va exista un editor de cod deplin, robust și bogat în funcții, disponibil chiar în interiorul Avocatului la eliberarea sa publică. Fiind capabil să se ocupe de întregul proces de codare chiar într-o singură aplicație, captează cu adevărat ceea ce se formează deja ca un set de caracteristici puternice.
Pe lângă faptul că puteți captura hexacoanele pentru culorile adăugate paletei dvs., veți putea, de asemenea, să atribuiți nume de variabile fiecărei culori pentru a fi utilizate în codul dvs. de preprocesor.
Ca si in cazul multor alte functii pe calea avocatului, abilitatea de a incarca direct pe CDN este deja prezenta intr-unul din pluginurile lui Source, PNGHat, astfel incat sa putem ghici ca functiile vor fi la fel. Imaginile pot fi exportate local prin Avocode sau, alternativ, veți putea să le împingeți direct către un CDN și să aveți locația fișierului adăugată la ieșirea CSS. Veți avea, de asemenea, opțiunea de a FTP imaginile direct la serverul dvs. la export.
Videoclipurile introductive pentru Avocode menționează că va exista o opțiune de integrare cu TypeKit și Fonturile Google atunci când se generează codul de setări pentru fonturi. Acest lucru nu este încă în versiunea închisă beta sau în vreunul dintre pluginurile sursei, așa că nu sunt sigur exact cum va funcționa acest lucru, dar personal speră că va simplifica procesul de realizare a adreselor URL adecvate și a codului cu care să sune diverse fonturi.
Prima etapă a exportului de imagini în actuala versiune beta închisă a Avocode este pentru JPEG, PNG și SVG. Cu toate acestea, Sursa are deja un proces stabilit pentru generarea Base64 prin pluginul PNGHat pentru Photoshop, așa că mă aștept să le vedem extragând de la baza de cod pentru a le aduce în Avocode. De asemenea, intenționează să sprijine producția de foi de sprite împreună cu CSS-ul necesar.
Accentul Avocode va fi pe web până când va ajunge la maturitate completă, cu toate acestea există și planuri în lucrări care să permită utilizarea acestuia ca parte a dezvoltării iOS.
Sursa are deja un plugin numit iOSHat care funcționează în cadrul Photoshop pentru a genera codul Objective-C sau Swift din straturile Photoshop pentru a fi utilizat în dezvoltarea iOS. Este posibil ca suportul pentru exportul de coduri iOS în Avocode să funcționeze în același mod.
Există un element de meniu interesant în Avocode; unul care indică extinderea ulterioară a platformei, cu unele pachete inițiale deja existente:
Sursa declară că au fost inspirați de lansarea Atom-ului pentru a adopta o metodă similară de a permite ca "pachetele" personalizate să fie create și împărtășite între comunitate. Așteptăm cu nerăbdare să vedem că această cale se deschide în timp ce evoluția se mișcă.
În momentul de față Sursa rulează în mod constant caracteristicile și lucrează în feedback-ul utilizatorilor beta pe măsură ce merg. Când software-ul este public, acesta va fi disponibil prin intermediul unui model de abonament pentru 240 USD pe an.
Cu toate acestea, dacă vă aflați la începutul preordonării, veți bloca un loc cu un discount perpetuu de 70%, reducându-l la 69 de dolari pe an. De asemenea, veți avea acces la beta privat, iar în această perioadă veți putea să utilizați software-ul gratuit. Abonamentul dvs. real începe numai atunci când Avocode merge la lansarea publică.
Punctele preliminare sunt limitate, iar din acest moment există mai puțin de 230 de locuri disponibile. Pentru a preînregistra: http://avocode.com/preorder.html
Pentru informații suplimentare, vizitați:
Voi lăsa concluziile în întregime la dvs.! Ce crezi tu, esti surprins de oricare dintre caracteristicile pe care sursa le-a anuntat? Avocatul va forma o parte din fluxul dvs. de lucru viitoare? Spuneți-ne în comentariile!
Accentsconagua