Share
Edge Reflow este un program relativ nou de la Adobe, care a fost anunțat în 2012 și lansat în februarie 2013, cu pasul liftului, care vă permite să "Design web responsiv" și "Creați modele frumoase receptive". Partea dificilă este că acum nu o poți folosi direct pentru a crea răspuns site-uri web, numai receptiv modele.
Acest lucru înseamnă că puteți să vă deschideți Reflow și să utilizați interfața sa de design vizual pentru a crea prototipuri de design pe deplin funcționale, cu schemele de culoare, layout-urile, elementele de formă, link-urile și conținutul textului. Puteți să vă previzualizați design-ul atât în cadrul instrumentului, cât și în Chrome și puteți seta puncte de interferență, puteți face designul să răspundă, apoi să îl previzualizați pentru mobil prin intermediul instrumentului Adobe Edge Inspect.
Cu toate acestea, în acest moment este cât de departe puteți obține. Încă nu puteți continua și exportați design-ul dvs. ca un site web real. Nu există control direct asupra HTML și CSS care alcătuiesc designul, iar Adobe face foarte clar că ieșirea de cod pentru previzualizări ar trebui să fie luată în considerare doar; un cod de previzualizare și nu de calitate a producției. Deci, după ce ați trecut prin procesul de proiectare a site-ului dvs. în Reflow, trebuie să îl puneți împreună pentru a doua oară pentru a crea codul pe care un site viu îl poate utiliza.
Pentru unii designeri acest lucru este bine; creând un prototip funcțional pe care clienții îl pot folosi ca lumină verde ca parte integrantă a procesului lor. Pentru mulți designeri, totuși, crearea unui site de două ori face ca Reflow să fie un instrument care este încă prea ineficient pentru a fi adoptat în scopul creării unui site reactiv.
Există câteva vorbe despre faptul că instrumentele de export complete sunt adăugate la un moment nelimitat în viitor, însă alte discuții spun că Reflow va fi vreodată un instrument de proiectare și nu va incorpora niciodată un flux de lucru pentru crearea completă a site-ului. Deci, în timp ce lucrurile s-ar putea schimba în viitor, pentru moment nu putem decât să presupunem că pentru cei care doresc să aibă un site funcțional la sfârșitul procesului lor de proiectare, Reflow poate să nu fie atât de potrivit.
Acestea fiind spuse, în timp ce Reflow nu poate fi complet crearea de site-uri web instrument, are unele caracteristici care pot face un foarte util design element web instrument.
Pentru mine, cele mai mari avantaje pe care le oferă în prezent sunt controalele CSS de tip Photoshop, care vă permit să vedeți efectele alegerilor dvs. în timp real. Puteți controla culori, fundaluri, margini, umbre, strălucire, colțuri curbate, setări de opacitate, filtre și multe altele într-un mediu foarte familiar.
Și în timp ce Reflow nu vă oferă instrumentele de export de cod pentru un site complet, acesta vă oferă posibilitatea de a copia și lipi CSS pentru un singur element în același timp. Pentru a face acest lucru, faceți clic pe elementul pe care lucrați pentru al selecta, apoi în partea inferioară a ecranului faceți clic pe <> pictogramă la sfârșitul pistei de pâine. Acest lucru vă va oferi o fereastră pop-up cu elementul CSS pentru a copia și lipi:
Cu această caracteristică puteți proiecta elemente individuale pentru a fi utilizate în site-ul dvs., apoi copiați-le CSS-ul pentru a fi utilizate în proiectul site-ului dvs. de producție. Este posibil să trebuiască să eliminați un cod de aspect nedorit pentru lucruri precum margini sau înălțimi, însă majoritatea codului de styling este bine să fie inserat direct într-un fișier CSS. Dacă sunteți familiarizați cu Photoshop, ați putea asemăna acest lucru cu crearea de stiluri de straturi și salvarea acestora pentru o utilizare ulterioară.
Deci, dacă Reflow devine sau nu vreodată un instrument de creare a site-ului complet funcțional, există câteva lucruri foarte utile pe care le puteți face cu el chiar acum și vom acoperi cinci dintre ele.
Adobe Edge Fonts este o colecție impresionantă de fonturi web gratuite care pot fi încărcate în orice site web. Pentru a face acest lucru, adăugați un mic fragment JavaScript în secțiune a paginii, cum ar fi:
Apoi, fontul este aplicat prin CSS în modul obișnuit, de ex.
p font-familie: abel, sans-serif; font-weight: 300; font-style: normal;
Fonturile de tip Edge par să aibă mai multă problemă cu FOUT (flash de text necompensat) decât fonturile Google încărcate printr-o etichetă în secțiune, cu toate acestea sunt furnizate metode pentru a minimiza efectul descris în documentația Adobe.
Pe măsură ce fiecare designer care a lucrat vreodată cu fonturi știe, uneori felul în care un font apare într-un panou de selecție sfârșește prin a fi destul de diferit de modul în care arată când imaginea dorită, dimensiunea fontului, culorile și orice alte efecte sunt aduse în imagine. Folosind Reflow pentru a examina Fonturile Edge cu toate aceste lucruri în loc, puteți evita procesul greoi de a trebui să schimbați eticheta de script încorporată și diferite stiluri CSS de fiecare dată când doriți să încercați un font nou. Iată cum:
Adăugați o "casetă de text" pe pânză selectând mai întâi instrumentul casetei de text din partea stângă sus a interfeței Reflow:
Apoi desenați o cutie de text pe pânză:
Introduceți textul în care doriți să previzualizați fonturile, înlocuind cuvântul implicit "Text" care este afișat după ce ați terminat desenarea casetei de text.
Setați proprietățile de styling pe care doriți să le utilizați făcând clic pe Coafura în partea stângă a interfeței:
Aici puteți seta dimensiunea fontului textului, stilul fontului, greutatea fontului și toate celelalte proprietăți pe care le vedeți în Tipografie panoul descris mai sus.
Sub acest panou veți vedea și fundal și Frontiere pe care îl puteți folosi pentru a simula pe deplin schema de culori în care va fi folosit textul:
Mai jos este textul nostru cu setări de culoare, dimensiune, greutate și fundal:
Notă: De asemenea, am centrat textul și am adăugat niște cearceafuri sub schemă fila.
Acum sunteți gata să începeți să previzualizați fonturile pentru a vedea care dintre acestea vor funcționa cu dimensiunea, greutatea și schema de culori dorită. S-ar putea să doriți să ajustați dimensiunea și greutatea puțin pe măsură ce mergeți, pentru a compensa variațiile de la un font la altul.
Pentru a alege fonturi noi, asigurați-vă că caseta de text este selectată, apoi faceți clic pe T+ din dreapta pictogramei Fontul eticheta:
Aceasta va face să apară o fereastră cu o gamă de Fonturi Edge pentru a alege:
Când vedeți unul pe care doriți să-l faceți clic pe el și, după un timp de așteptare scurt de încărcare, acesta va fi aplicat în caseta de text. Puteți continua să testați diferitele fonturi până când găsiți unul care vă place, de ex.
Odată ce ați selectat fontul pe care doriți să-l utilizați, vă puteți îndrepta spre site-ul Fonturi Edge pentru a obține codul de încorporare JavaScript.
Doar căutați numele fontului pe care l-ați selectat, faceți clic pe el și codul de încorporare va fi afișat pentru dvs. mai jos.
Cu ajutorul setărilor CSS3 ale lui Reflow, puteți crea câteva efecte de text minunate, din nou într-un mod similar creării de stiluri de strat text în Photoshop. Toate aceste stiluri ar putea fi create prin codarea manuală, dar abilitatea de a vedea trucurile în timp real poate fi de neprețuit. Iată câteva exemple pure de efecte text CSS și setările utilizate pentru a le crea.
Setările utilizate (credit: markdotto.com):
Setările utilizate:
Setările utilizate:
Unul dintre cele mai tari lucruri pe care le puteți face cu CSS3 este crearea butoanelor spiffice care anterior ar fi necesitat imagini mari ciudate. Ca și în cazul efectelor de text din ultima secțiune, setările CSS ale programului Reflow în timp real fac acest proces mai rapid și mai intuitiv decât codarea manuală. Iată câteva exemple de butoane de tip CSS realizate în Reflow.
Setările utilizate:
Setările utilizate:
Împreună cu capacitatea de a crea efecte de text și stiluri de butoane, Reflow vă oferă, de asemenea, instrumente pentru a plasa imagini, intrări de text, casete selectate, casete de selectare și butoane radio pe panza pentru styling. În plus, puteți crea "cutii" generice care sunt în esență echivalente cu "divs", astfel că între toate aceste caracteristici aveți blocurile necesare pentru a crea clase pentru foile de stil pentru kit-ul UI.
Puteți începe de la zero cu propriul dvs. design, sau puteți seta pentru a emula kituri existente PSI UI. Dacă vrei să mergi de la PSD la UI atunci Reflow are o caracteristică care este aproape minunat cu kiturile PSD descărcate în afara casetei, și anume Photoshop CC Connect.
După ce ați descărcat un kit PSD UI, ca și acest kit mic, gratuit, de la Blaz Robar, continuați și deschideți-l în Photoshop. În cazul acestui kit veți vedea următoarele:
Apoi, în Reflow, cu un nou document deschis, faceți clic pe Photoshop CC Connect pictograma din partea dreaptă sus a interfeței:
În fereastra pop-up care apare, faceți clic pe Creați o pagină nouă buton:
Reflow va încerca să creeze un duplicat al a ceea ce se afișează în prezent în Photoshop. În cazul acestui kit de UI veți obține următoarele:
Rezultatul poate nu este exact ceea ce am fi sperat, deoarece sunt sigur că există fluxuri de lucru preferențiale pentru crearea PSD-urilor care se importă perfect în Reflow, însă este de fapt mai utilă decât ar părea la început. Motivul este că, în ciuda unor lucruri care încă nu au aspectul căruia le avem nevoie, elementele esențiale incluse în kit sunt la locul lor, împreună cu culorile lor. Acest lucru vă salvează problemele de a crea elemente și de a copia codurile de culoare. Puteți mutați elementele generate în jurul lor și le puteți modifica până când acestea arată ca cele originale.
Accentsconagua
px in loc de %. Acest lucru va împiedica elementele să se micșoreze și să se întindă imprevizibil dacă schimbați lățimea panzei dvs. sau redimensionați fereastra Reflow.rudă la absolut. În acest fel, puteți să glisați elemente și să le poziționați acolo unde doriți să împiedicați suprapunerea și să le faceți mai ușor.rudă la absolut astfel încât să puteți plasa încă locul pe care îl alegeți pe pânză.Pe măsură ce mergeți, puteți găsi că există elemente care necesită imagini care nu pot fi realizate numai cu setările pentru Reflow CSS și, ca atare, au nevoie de imagini, cum ar fi săgețile mici din acest set de interfețe UI sau imaginile sociale icon. Aici intră o altă caracteristică interesantă a Photoshop CC Connect.
Pentru a importa instantaneu o imagine din PSD-ul original, tot ce trebuie să faceți este să-i găsiți stratul, apoi să îl redenumiți după numele fișierului dorit. De exemplu, în acest PSD vreau să accesez mica săgeată indicatoare care arată pe elementele portocalii. Mai întâi, găsesc stratul său în PSD, care în acest caz este etichetat ">" sub folderul "Imagine Nav Copy". Redenumesc acest strat la numele fișierului pe care doresc să îl aibă imaginea săgeată exportată, adică "downarrow.png".
Apoi faceți clic pe același Photoshop CC Connect pictograma am apăsat pentru a importa PSD inițial, doar de data asta când dau clic pe Biblioteca de active buton. Reflow vă va arăta un scurt mesaj "importat" în timp ce trage în orice strat din PSD care are o extensie de fișier imagine la sfârșitul numelui său. Acum pot să dau clic pe Biblioteca de active icon și voi vedea imaginea mea "downarrow.png" pe care o pot trage oriunde în design.
Notă: există o previzualizare a imaginii în fereastra de deasupra numelui fișierului, însă în acest caz este puțin greu de văzut, fiind mic și alb.
După o anumită modificare a setărilor pentru Reflow, este posibil ca mulajul de forme importat inițial să fie comparabil cu setul original UI bazat pe imagine:
Filtrele CSS sunt destul de noi pe scena și vă permit să aplicați câteva efecte vizuale foarte reci la orice element HTML sau SVG; de la divs, la imagini, la butoane, însă cea mai comună aplicare a acestor filtre tind să fie pe imagini. Rețineți că suportul pentru filtrele CSS este totuși limitat la Chrome, Opera și Safari, așa că modul în care alegeți să le utilizați ar trebui să fie doar pentru bomboane extra oculare care nu vor lăsa utilizatorii IE și Firefox cu orice funcționalitate redusă.
Cu ajutorul Adobe care contribuie la spec. De filtre CSS, nu este deloc surprinzător să vezi instrumentele pentru utilizarea acestora incluse în Reflow și oferă un mod foarte util pentru a testa modul în care setările de filtrare vor apărea în timp real în timp ce le aplicați și le modificați. Din nefericire, Reflow acceptă numai șapte din cele zece filtre disponibile, dar acestea sunt încă foarte multe pentru a lucra cu:
Efectele nu sunt vizibile în mod prestabilit în stiluri , astfel încât să le activați Vizualizare> Funcție Web strălucitoare apoi faceți clic pe butonul din stânga Filtre opțiune. După activare, puteți face clic pe orice element din pagină și apoi faceți clic pe + pictograma sub Filtre pentru a adăuga filtre CSS noi:
La fel ca și în cazul altor efecte CSS, ați putea codifica efectiv filtrele dvs. CSS, dar văzând rezultatele setărilor în timp real, ajută la accelerarea procesului. Puteți să aplicați filtre individuale pe imagini sau să combinați filtrele pentru a crea o varietate de efecte diferite. Iată câteva exemple de filtre aplicate prin Reflow:
Imagine de la http://publicdomainpictures.net/Dacă nu ați luat încă o privire la Reflow, sau dacă aveți, dar ați decis să nu o utilizați ca un instrument de design al site-ului web, probabil că ați putea fi tentați să o luați și să îl încercați un design element web în schimb. Este posibil să nu fie exact ceea ce căutați într-un instrument complet de creare a site-urilor, dar ar putea să facă o treabă excelentă pentru a vă ajuta să faceți mai rapid și mai intuitiv segmente ale procesului de design global.
Puteți lua fișierele sursă incluse în acest articol pentru a obține toate documentele Reflow prezentate mai sus și pentru a obține câteva idei despre ceea ce puteți face.
Reflow este disponibil ca o includere gratuită cu orice membru al Creative Cloud, indiferent dacă este vorba de o singură aplicație sau de un singur număr, și îl puteți folosi fără taxă pe o perioadă de 30 de zile. Citiți mai multe la portalul Reflow.
