Share
Edge Reflow is een relatief nieuw programma van Adobe, dat in 2012 is aangekondigd en in februari 2013 is uitgebracht, met de elevator pitch van waarmee je 'Het responsieve web kunt ontwerpen' en 'Mooie responsieve ontwerpen kunt maken'. Het lastige is dat je het nu niet direct kunt gebruiken om responsief te maken websites, alleen reagerend ontwerpen.
Dit betekent dat u Reflow kunt openen en de visuele ontwerpinterface kunt gebruiken om volledig functionerende prototypen van het ontwerp te creëren, met kleurenschema's, lay-outs, vormelementen, links en tekstuele inhoud. U kunt een voorbeeld van uw ontwerp weergeven, zowel in de tool als in Chrome, en u kunt onderbrekingspunten instellen, uw ontwerp responsief maken en het vervolgens voorvertonen voor mobiel via Adobe's Edge Inspect-tool.
Echter, op het moment dat is zo ver als je kunt krijgen. Je bent nog niet in staat om door te gaan en je ontwerp als een echte website te exporteren. Er is geen directe controle over de HTML en CSS die deel uitmaken van het ontwerp, en Adobe maakt heel duidelijk dat de code die wordt uitgevoerd voor voorbeelden, alleen maar moet worden beschouwd; voorbeeldcode en niet van productiekwaliteit. Dus, nadat je het proces van het ontwerpen van je site in Reflow hebt doorlopen, moet je het een tweede keer samenvoegen om code te maken die een live site kan gebruiken.
Voor sommige ontwerpers is dit prima; Het creëren van een functioneel prototype waarmee klanten groen licht kunnen maken, is een integraal onderdeel van hun proces. Voor veel ontwerpers echter, maakt het tweemaal maken van een site Reflow een tool die nog te inefficiënt is om te gebruiken met het oog op responsieve website-creatie.
Er wordt gesproken over het feit dat volledige exporthulpmiddelen op een onbepaald tijdstip in de toekomst worden toegevoegd, maar volgens andere sprekers zal Reflow alleen maar een ontwerptool zijn en nooit een workflow opnemen voor het maken van volledige sites. Dus hoewel dingen in de toekomst kunnen veranderen, kunnen we voorlopig alleen maar aannemen dat voor degenen die een goed functionerende site willen hebben aan het einde van hun ontwerpproces, Reflow misschien niet zo'n goede fit is.
Dat gezegd hebbende, terwijl Reflow misschien niet compleet is creatie van websites tool, heeft het een aantal functies die het heel nuttig kunnen maken website element ontwerp gereedschap.
Voor mij zijn de grootste voordelen die het momenteel biedt, de Photoshop-achtige CSS-besturingselementen waarmee je de effecten van je keuzes in realtime kunt zien. U kunt kleuren, achtergronden, randen, schaduwen, gloed, gebogen hoeken, dekkinginstellingen, filters en meer beheren in een zeer vertrouwde omgeving.
En hoewel Reflow geen code-exporthulpmiddelen voor een volledige site biedt, biedt het u de mogelijkheid om CSS voor één element tegelijk te exporteren en plakken. Om dit te doen, klikt u gewoon op het element waaraan u werkt om het te selecteren, en klikt u onderaan op het scherm op <> pictogram aan het einde van het broodkruimelpad. Dit geeft je een pop-upvenster met de CSS van het element dat je kunt kopiëren en plakken:
Met deze functie kunt u afzonderlijke elementen ontwerpen die op uw site worden gebruikt en vervolgens hun CSS kopiëren voor gebruik in uw productieafwerkende siteproject. Misschien moet je een aantal ongewenste lay-outcode verwijderen voor zaken als marges of hoogtes, maar de meeste stylingcode is goed om rechtstreeks in een CSS-bestand geplakt te worden. Als u bekend bent met Photoshop, kunt u dit vergelijken met het maken van laagstijlen en deze opslaan voor later gebruik.
Dus of Reflow ooit een volledig functioneel hulpprogramma voor het maken van websites wordt, er zijn enkele echt nuttige dingen die je er nu mee kunt doen, en we gaan er vijf behandelen.
Adobe Edge Fonts is een indrukwekkende verzameling gratis te gebruiken weblettertypen die op elke website kunnen worden geladen. Voeg hiervoor een klein JavaScript-fragment toe aan de deel van de pagina als volgt:
Het lettertype wordt vervolgens via CSS op de normale manier toegepast, bijv.
p font-family: abel, sans-serif; font-gewicht: 300; lettertype: normaal;
Randlettertypen lijken meer problemen te hebben met FOUT (flash van niet-gestileerde tekst) dan met Google-lettertypen die via een tag in de sectie, maar er zijn methoden om het effect te minimaliseren zoals beschreven in de documentatie van Adobe.
Zoals elke ontwerper die ooit met lettertypen heeft gewerkt weet, is het soms zo dat de manier waarop een lettertype in een selectiepaneel eruit ziet heel anders is dan hoe het eruit ziet wanneer de gewenste tekstinhoud, lettergrootte, kleuren en andere effecten in beeld komen. Door Reflow te gebruiken om Edge-lettertypen vooraf te bekijken met al deze zaken, kunt u voorkomen dat u uw embed-scripttag en verschillende CSS-stijlen telkens moet veranderen wanneer u een nieuw lettertype wilt proberen. Hier is hoe:
Voeg een "tekstvak" toe aan uw canvas door eerst het tekstvakgereedschap te selecteren linksboven in de Reflow-interface:
Teken vervolgens een tekstvak op het canvas:
Voer de tekst in waarvan u een voorbeeld wilt zien van lettertypen door het standaardwoord "Tekst" te vervangen dat wordt weergegeven nadat u klaar bent met het tekenen van uw tekstvak.
Stel de stijleigenschappen in die u wilt gebruiken door op te klikken styling tab aan de linkerkant van de interface:
Hier kunt u de tekstkleur, de tekenstijl, het lettertype en alle andere eigenschappen instellen die u ziet in de Typografie paneel hierboven afgebeeld.
Onder dit paneel ziet u ook de Achtergrond en borders paneel dat u kunt gebruiken om het kleurschema waarin de tekst zal worden gebruikt volledig te simuleren:
Hieronder staat onze tekst met de instellingen voor kleur, grootte, gewicht en achtergrond op de juiste plaats:
Notitie: Ik heb ook de tekst gecentreerd en wat opvulling toegevoegd onder de lay-out tab.
Nu bent u klaar om lettertypen vooraf te bekijken om te zien welke werken met het gewenste formaat, gewicht en kleurenschema. Misschien wilt u de afmeting en het gewicht een beetje bijstellen om de variaties van het ene lettertype naar het volgende goed te maken.
Als u nieuwe lettertypen wilt kiezen, zorgt u ervoor dat uw tekstvak is geselecteerd en klikt u op de T+ pictogram rechts van de Typeface label:
Hierdoor wordt een venster weergegeven met een reeks Edge-lettertypen waaruit u kunt kiezen:
Als u er een ziet die u leuk vindt, klikt u erop en na een korte wachttijd voor laden wordt deze toegepast op uw tekstvak. U kunt doorgaan met het testen van de verschillende lettertypen totdat u er een vindt die u bevalt, bijvoorbeeld.
Zodra u het lettertype dat u wilt gebruiken hebt geselecteerd, kunt u naar de Edge Fonts-site gaan om de JavaScript-insluitcode te pakken.
Zoek gewoon naar de naam van het lettertype dat u hebt geselecteerd, klik erop en de insluitcode wordt hieronder voor u weergegeven.
Met de CSS3-instellingen van Reflow kunt u een aantal behoorlijk geweldige teksteffecten maken, opnieuw op dezelfde manier als het maken van tekstlaagstijlen in Photoshop. Al deze stijlen kunnen worden gemaakt via handcodering, maar de mogelijkheid om uw aanpassingen in realtime te bekijken, kan van onschatbare waarde zijn. Hier zijn een paar voorbeelden van pure CSS-teksteffecten en de instellingen die zijn gebruikt om ze te maken.
Gebruikte instellingen (tegoed: markdotto.com):
Gebruikte instellingen:
Gebruikte instellingen:
Een van de coolste dingen die je kunt doen met CSS3 is het creëren van spiffy-knoppen die voorheen grote onhandige afbeeldingen zouden vereisen. Net als bij de teksteffecten in de laatste sectie, maken de real-time CSS-instellingen van Reflow dit proces sneller en intuïtiever dan handcodering. Hier zijn enkele voorbeelden van voorbeelden van CSS-only gemaakt in Reflow.
Gebruikte instellingen:
Gebruikte instellingen:
Naast de mogelijkheid om teksteffecten en knopstijlen te maken, biedt Reflow u ook tools om afbeeldingen, tekstinvoeringen, selectievakjes, selectievakjes en keuzerondjes op het canvas te plaatsen voor styling. Bovendien kunt u algemene "vakken" maken die in wezen gelijkwaardig zijn aan "divs", dus tussen al deze functies hebt u de benodigde bouwstenen om klassen voor UI-kitstijlbladen te maken.
U kunt vanuit het niets beginnen met uw eigen ontwerp, of u kunt proberen bestaande PSD-gebruikersinterface-kits te emuleren. Als u van PSD naar UI wilt gaan, heeft Reflow een functie die dat wel is bijna geweldig met out-of-the-box gedownloade PSD-kits, en dat is Photoshop CC Connect.
Na het downloaden van een PSD UI Kit, zoals deze coole, kleine gratis flat kit van Blaz Robar, ga je gang en open je het in Photoshop. In het geval van deze kit ziet u het volgende:
Klik vervolgens in Opnieuw plaatsen, met een nieuw document geopend op Photoshop CC Connect pictogram in de rechterbovenhoek van de interface:
Klik in het pop-upvenster dat verschijnt op Maak een nieuwe pagina knop:
Reflow zal proberen een duplicaat te maken van wat er momenteel in Photoshop wordt weergegeven. In het geval van deze UI-set krijgt u het volgende:
Het resultaat is misschien niet helemaal wat we misschien hadden gehoopt, omdat ik zeker weet dat er voorkeurswerkstromen zijn voor het maken van PSD's die foutloos in Reflow importeren, maar het is eigenlijk nuttiger dan het op het eerste gezicht lijkt. De reden is dat ondanks de dingen die er nog niet uitzien zoals we ze nodig hebben, de essentiële items in de kit aanwezig zijn, samen met hun kleuren. Dit bespaart u de moeite om elementen te maken en over kleurcodes te kopiëren. U kunt de gegenereerde elementen verplaatsen en aanpassen totdat ze eruit zien als het origineel.
Accentsconagua
px in plaats van %. Dit voorkomt dat de elementen onvoorspelbaar krimpen en uitrekken als u de breedte van uw canvas wijzigt of het formaat van het venster Reflow wijzigt.familielid naar absoluut. Op deze manier kunt u items slepen en positioneren waar u overlapping wilt voorkomen en ze beter zichtbaar wilt maken.familielid naar absoluut zodat je het nog steeds kunt plaatsen waar je maar wilt op het canvas.Als u doorgaat, ziet u mogelijk dat er elementen zijn die afbeeldingen vereisen die niet alleen met de Reflow CSS-instellingen kunnen worden gedaan en als zodanig afbeeldingen nodig hebben, zoals de kleine pijlen van deze UI-kit of de afbeeldingen met sociale pictogrammen. Dit is waar een andere leuke functie van Photoshop CC Connect wordt geleverd.
Om direct een afbeelding van de originele PSD te importeren, hoeft u alleen de laag te vinden en de naam ervan te wijzigen in de naam van het gewenste afbeeldingsbestand. In deze PSD wil ik bijvoorbeeld toegang krijgen tot de kleine witte neerwaartse pijl die op de oranje elementen staat. Ten eerste vind ik de laag in de PSD, die in dit geval is gemarkeerd als ">" onder de map "Image Nav Copy". Ik hernoem die laag naar de bestandsnaam die ik wil dat de geëxporteerde afbeelding van de pijl heeft, d.w.z. "downarrow.png".
Ik klik vervolgens op hetzelfde Photoshop CC Connect icon we hit om de PSD in eerste instantie te importeren, alleen deze keer klik ik op Asset-bibliotheek knop. Reflow geeft een kort "import" -bericht weer, omdat het elke laag van uw PSD met een extensie van een afbeelding aan het einde van zijn naam binnenhaalt. Nu kan ik op de klikken Asset-bibliotheek pictogram en ik zie mijn "downarrow.png" afbeelding die ik overal naar het ontwerp kan slepen en neerzetten.
Notitie: er is een voorbeeld van de afbeelding in het venster boven de bestandsnaam, maar in dit geval is het een beetje moeilijk te zien, omdat het klein en wit is.
Na een aantal aanpassingen van de Reflow-instellingen is het mogelijk om de aanvankelijk geïmporteerde kluwen van vormen vrij vergelijkbaar te laten lijken met de originele op afbeelding gebaseerde UI-kit:
CSS-filters zijn vrij nieuw ter plekke en stellen je in staat om een aantal zeer coole visuele effecten toe te passen op elk HTML- of SVG-element; van divs, naar afbeeldingen, naar knoppen, maar de meest voorkomende toepassing van deze filters is meestal op afbeeldingen. Houd er rekening mee dat de ondersteuning voor CSS-filters nog steeds beperkt is tot Chrome, Opera en Safari, dus de manier waarop u ervoor kiest om ze te gebruiken, moet alleen worden gebruikt voor extra eye-candy die IE- en Firefox-gebruikers geen verminderde functionaliteit zullen bieden.
Aangezien Adobe bijdraagt aan de CSS Filters-specificatie is het misschien geen verrassing dat er hulpmiddelen voor het gebruik ervan in Reflow worden weergegeven en ze bieden een zeer handige manier om te testen hoe uw filterinstellingen er in realtime uitzien wanneer u ze toepast en aanpast. Helaas ondersteunt Reflow slechts zeven van de tien beschikbare filters, maar dat is nog steeds genoeg om mee te werken:
De effecten zijn standaard niet zichtbaar in uw stijlen tab, dus om ze te activeren ga naar Beeld> Shiny Web Feature klik vervolgens op de knop links van de filters keuze. Eenmaal geactiveerd, kunt u klikken op elk element op uw pagina en vervolgens klikken op de + pictogram onder de filters instellingenpaneel om nieuwe CSS-filters toe te voegen:
Net als met andere CSS-effecten kunt u uw CSS-filters eigenlijk met de hand coderen, maar als u de resultaten van uw instellingen in realtime kunt zien, kunt u het proces versnellen. U kunt afzonderlijke filters op afbeeldingen toepassen of filters combineren om een verscheidenheid aan verschillende effecten te maken. Hier zijn enkele voorbeelden van filters toegepast via Reflow:
Afbeelding met dank aan http://publicdomainpictures.net/Als je Reflow nog niet hebt bekeken, of als je het hebt gedaan, maar hebt besloten om het niet als een website-ontwerpprogramma te gebruiken, wordt je misschien nu verleid om het te pakken en het uit te proberen als een website element ontwerp tool in plaats daarvan. Het is misschien niet precies wat u zoekt in een complete tool voor het maken van sites, maar het kan gewoon een goed werk doen om segmenten van uw algehele ontwerpproces sneller en intuïtiever te maken..
Je kunt de bronbestanden in dit artikel gebruiken om alle Reflow-documenten te bekijken die hierboven zijn weergegeven en enkele ideeën op te doen over wat je kunt doen.
Reflow is beschikbaar als een gratis opname bij elk Creative Cloud-lidmaatschap, ongeacht of dat lidmaatschap voor één app of meerdere is en u kunt het ook kosteloos gebruiken tijdens een proefperiode van 30 dagen. Lees meer op de Reflow-portal.
