Share
Edge Reflow er et relativt nytt program fra Adobe, som ble annonsert i 2012 og utgitt i februar 2013, med heishøyde som gjør det mulig å "Design responsive web" og "Lag flotte responsive design". Den vanskelige delen er at akkurat nå kan du ikke bruke den direkte for å skape respons nettsteder, bare responsive design.
Dette betyr at du kan åpne Reflow og bruke det visuelle designgrensesnittet for å lage fullt fungerende designprototyper, med fargeskjemaer, layouter, formelementer, koblinger og tekstinnhold på plass. Du kan forhåndsvise designet ditt både i verktøyet og i Chrome, og du kan angi breakpoints, gjøre designet ditt responsivt og forhåndsvise det for mobil gjennom Adobes Edge Inspector-verktøy.
Men for øyeblikket er det så langt du kan få. Du er ennå ikke i stand til å fortsette og eksportere designet ditt som en faktisk nettside. Det er ingen direkte kontroll over HTML og CSS som utgjør designet, og Adobe gjør det veldig klart at kodeutgangen for forhåndsvisninger bør betraktes akkurat det; forhåndsvisningskode og ikke av produksjonskvalitet. Så, etter å ha gått gjennom prosessen med å designe nettstedet ditt i Reflow, må du sette det sammen en gang for å skape kode som et nettsted kan bruke.
For noen designere er dette bare bra; skape en funksjonell prototype som klienter kan grønt lys er en integrert del av prosessen. For mange designere, men å lage et nettsted to ganger, gjør Reflow et verktøy som ennå ikke er ineffektivt å vedta for formålet med å opprette responsivt nettstedopprettelse.
Det er noen snakk om at fulle eksportverktøy blir lagt til på ubestemt tid i fremtiden, men så sier andre snakker Reflow vil bare være et designverktøy og vil aldri inkludere en arbeidsflyt for fullstendig sideoppretting. Så selv om ting kan endres i fremtiden, kan vi for nå bare anta at for de som ønsker å ha et fungerende nettsted ved slutten av designprosessen, kan det ikke være så bra for Reflow.
Når det er sagt, mens Reflow kanskje ikke er komplett Nettstedskaping verktøyet, det har noen funksjoner som kan gjøre det svært nyttig nettsted element design verktøy.
For meg er de største fordelene det for øyeblikket er sine Photoshop-lignende CSS-kontroller som lar deg se effektene av dine valg i sanntid. Du kan kontrollere farger, bakgrunner, grenser, skygger, lyser, buede hjørner, opasitetsinnstillinger, filtre og mer i et godt kjent miljø.
Og mens Reflow ikke gir deg kodeeksportverktøy for et komplett nettsted, gir det deg muligheten til å kopiere og lime inn CSS for ett element om gangen. For å gjøre det, klikker du bare på elementet du arbeider med for å velge det, og deretter nederst på skjermen klikker du på <> ikon på slutten av breadcrumb stien. Dette vil gi deg et popup-vindu med elementets CSS for å kopiere og lime inn:
Med denne funksjonen kan du designe individuelle elementer som skal brukes på nettstedet ditt, og kopier deretter deres CSS til bruk i ditt produksjonsklare nettstedsprosjekt. Det kan hende du må fjerne noe uønsket oppsettkode for ting som marginer eller høyder, men det meste av stylingskoden er godt å bli klistret rett inn i en CSS-fil. Hvis du er kjent med Photoshop, kan du likt dette for å lage lagstiler og lagre dem ut for senere bruk.
Så hvorvidt Reflow noensinne blir et fullt funksjonelt verktøy for nettverksskaping, er det noen virkelig nyttige ting du kan gjøre med det akkurat nå, og vi skal dekke fem av dem.
Adobe Edge Fonts er en imponerende samling av gratis å bruke webfonter som kan lastes inn på et hvilket som helst nettsted. For å gjøre det, legg til en liten JavaScript-kodebiten til delen av siden som sådan:
Skriften blir deretter påført via CSS på vanlig måte, f.eks.
p font-family: abel, sans-serif; font-weight: 300; font-style: normal;
Kantfonter ser ut til å ha mer av et problem med FOUT (flash av ustabil tekst) enn Google-fonter lastet via en tag i delen, men metoder er gitt for å minimere effekten som beskrevet i Adobes dokumentasjon.
Som alle designere som noensinne har jobbet med skrifttyper, vet det noen ganger som en skrift ser ut i et utvalgspanel, å være ganske annerledes enn hvordan det ser ut når det nødvendige tekstinnholdet ditt, skriftstørrelsen, farger og eventuelle andre effekter blir brakt inn i bildet. Gjennom å bruke Reflow for å forhåndsvise Edge Fonts med alle disse tingene på plass, kan du unngå den vanskelige prosessen med å måtte bytte embedded script-tag og forskjellige CSS-stiler hver gang du vil prøve en ny skrift. Dette er hvordan:
Legg til en "Tekstboks" på lerretet ved først å velge tekstboksverktøyet øverst til venstre i Reflow-grensesnittet:
Deretter tegner du en tekstboks på lerretet:
Skriv inn teksten du vil forhåndsvise skrifttyper med, ved å erstatte standardordet "Tekst" som vises når du er ferdig med å tegne tekstboksen.
Still inn stylingegenskapene du vil bruke ved å klikke på styling fanen på venstre side av grensesnittet:
Her kan du angi tekstfargestørrelsen, skrifttypestilen, skriftstørrelsen og alle de andre egenskapene du ser i typografi panel avbildet ovenfor.
Under dette panelet vil du også se Bakgrunn og Borders panelet du kan bruke til å fullt ut simulere fargeskjemaet teksten blir brukt i:
Nedenfor er vår tekst med farge-, størrelse-, vekt- og bakgrunnsinnstillinger på plass:
Merk: Jeg har også sentrert teksten og lagt til noe polstring under Oppsett tab.
Nå er du klar til å forhåndsvise fonter for å se hvilke som vil fungere med ønsket størrelse, vekt og fargevalg. Du vil kanskje tilpasse størrelsen og vekten litt mens du går, for å gjøre opp for variasjonene fra en skrift til den neste.
For å velge nye skrifttyper, kontroller at tekstboksen er valgt, klikk deretter på T+ ikon til høyre for skriftsnitt merkelapp:
Dette gjør at et vindu vises med en rekke kantfonter å velge mellom:
Når du ser en du liker, klikker du på den, og etter en kort belastningstid vil den bli brukt på tekstboksen din. Du kan fortsette å teste ut de forskjellige skriftene til du finner en du liker, f.eks.
Når du har valgt skrifttypen du vil bruke, kan du gå over til Edge Fonts-siden for å hente JavaScript-innebygningskoden.
Bare søk etter navnet på skrifttypen du valgte, klikk på den, og den innebygde koden vil bli vist for deg nedenfor.
Med Reflows CSS3-innstillinger kan du lage noen ganske flotte teksteffekter, igjen på samme måte som å lage tekstlagstiler i Photoshop. Alle disse stilene kan opprettes via håndkoding, men muligheten til å se tweaks i sanntid kan være uvurderlig. Her er noen få eksempler på rene CSS-teksteffekter og innstillingene som brukes til å lage dem.
Innstillinger brukt (kreditt: markdotto.com):
Innstillinger brukt:
Innstillinger brukt:
En av de kuleste tingene du kan gjøre med CSS3 er å lage spiffy knapper som tidligere ville ha krevd store clunky bilder. Som med teksteffekter i den siste delen, gjør Reflows realtids-CSS-innstillinger denne prosessen raskere og mer intuitiv enn håndkoding. Her er et par CSS-only-knappeksempler laget i Reflow.
Innstillinger brukt:
Innstillinger brukt:
Sammen med muligheten til å lage teksteffekter og knappestiler Reflow gir deg også verktøy for å plassere bilder, tekstinnganger, velg bokser, boksene og radioknappene på lerretet for styling. I tillegg kan du lage generiske "bokser" som i hovedsak er ekvivalente med "divs", så mellom alle disse funksjonene har du byggeblokkene som kreves for å lage klasser for UI-sett stilark.
Du kan starte fra bunnen av med ditt eget design, eller du kan sette ut for å etterligne eksisterende PSD UI-kits. Hvis du vil gå fra PSD til UI, har Reflow en funksjon som er nesten kjempeflott med PSD-kasser som ikke er lastet ned, og det er Photoshop CC Connect.
Etter å ha lastet ned et PSD UI Kit, som dette kule, lille, frie flatsettet fra Blaz Robar, gå videre og åpne det i Photoshop. I tilfelle av dette settet ser du følgende:
Deretter i Reflow, med et nytt dokument åpent, klikk på Photoshop CC Connect ikonet øverst til høyre i grensesnittet:
I popup-vinduet som vises, klikker du på Opprett ny side knapp:
Reflow vil forsøke å lage en duplikat av det som vises i Photoshop. I tilfelle av dette UI-settet får du følgende:
Resultatet er kanskje ikke helt det vi håpet på, da jeg er sikker på at det er fordelaktige arbeidsflyter for å lage PSD-er som importerer feilfritt til Reflow, men det er faktisk mer nyttig enn det kan virke først. Årsaken er at til tross for ting som ennå ikke ser ut som vi trenger dem til, er de viktige elementene som er inkludert i settet på plass sammen med sine farger. Dette sparer deg for å lage elementer og kopiere over fargekoder. Du kan flytte de genererte elementene rundt og justere dem til de ser ut som originalen.
Accentsconagua
px i stedet for %. Dette forhindrer at elementene krympes og strekker seg uforutsigbart dersom du endrer bredden på lerretet eller endrer størrelsen på Reflow-vinduet.slektning til absolutte. På denne måten kan du dra elementer og plassere dem der du vil unngå overlapping og gjøre dem lettere å se.slektning til absolutte slik at du fortsatt kan plassere den der du velger på lerretet.Når du går sammen, kan du finne at det er elementer som krever bilder som ikke kan gjøres med Reflow CSS-innstillingene alene, og som sådan krever bilder, som de små pilene til dette brukergrensesnittet eller de sosiale ikonbildene. Dette er hvor en annen kul funksjon av Photoshop CC Connect kommer inn.
For å umiddelbart importere et bilde fra den originale PSDen alt du trenger å gjøre er å finne laget, og gi det nytt navn til ønsket bildefilnavn. For eksempel, i denne PSD vil jeg få tilgang til den lille, hvite nedadgående pekepilen du ser på de oransje elementene. Først finner jeg laget i PSD, som i dette tilfellet er merket ">" under "Image Nav Copy" -mappen. Jeg omdøper det laget til filnavnet Jeg ønsker at det eksporterte pilbildet skal ha, dvs. "downarrow.png".
Jeg klikker deretter det samme Photoshop CC Connect ikonet vi treffer for å importere PSD utgangspunktet, bare denne gangen klikker jeg på Asset Library knapp. Reflow vil vise deg en kort "import" melding som den trekker i hvilket som helst lag fra PSD-en din som har en filfilutvidelse på slutten av navnet. Nå kan jeg klikke på Asset Library ikonet og jeg ser min "downarrow.png" -bilde som jeg kan dra og slippe hvor som helst på designet.
Merk: Det er en forhåndsvisning av bildet i vinduet over filnavnet, men i dette tilfellet er det litt vanskelig å se, å være liten og hvit.
Etter litt justering av Reflow-innstillinger er det mulig å få den første importerte jumbleen av figurer til å se ganske sammenliknet med det originale bildebaserte brukergrensesnittet:
CSS-filtre er ganske nye på scenen og lar deg bruke noen veldig kule visuelle effekter til ethvert HTML- eller SVG-element; fra divs, til bilder, til knapper, men den vanligste bruken av disse filtrene har en tendens til å være på bilder. Husk at støtte for CSS-filtre fortsatt er begrenset til Chrome, Opera og Safari, slik at måten du velger å bruke dem, bør være bare for ekstra øyehud som ikke lar IE og Firefox-brukere få redusert funksjonalitet.
Med Adobe som bidragsytere til CSS Filters-spesifikasjonen, er det kanskje ikke overraskende å se verktøy for å bruke dem som er inkludert i Reflow, og de gir en veldig nyttig måte å teste ut hvordan filterinnstillingene vil se i sanntid når du bruker og justerer dem. Dessverre støtter Reflow bare sju av de ti tilgjengelige filtrene, men de er fortsatt mye å jobbe med:
Effektene er ikke synlige som standard i din Styles fan, så å aktivere dem gå til Vis> Skinnende webfunksjon klikk deretter på knappen til venstre for filtre alternativ. Når du er aktivert, kan du klikke på et hvilket som helst element på siden din og deretter klikke på + ikon under filtre Innstillingspanel for å legge til nye CSS-filtre:
Som med andre CSS-effekter kan du faktisk håndkode CSS-filtre, men å kunne se resultatene av innstillingene dine i sanntid bidrar til å fremskynde prosessen. Du kan bruke enkeltfiltre til bilder, eller kombinere filtre for å lage en rekke forskjellige effekter. Her er noen eksempler på filtre som er brukt via Reflow:
Bilde med lov av http://publicdomainpictures.net/Hvis du ennå ikke har sett på Reflow, eller hvis du har, men besluttet å ikke bruke det som et webdesignverktøy, kan du kanskje bli lokket til å ta det og prøve det ut som et nettsted element design verktøyet i stedet. Det kan ikke være akkurat det du leter etter i et komplett verktøy for oppretting av nettsteder, men det kan bare gjøre en god jobb ved å gjøre segmenter av din overordnede designprosess raskere og mer intuitiv.
Du kan ta tak i kildefilene som følger med denne artikkelen for å få alle Reflow-dokumentene vist ovenfor og få noen ideer om hva du kan gjøre.
Reflow er tilgjengelig som en gratis inkludering med ethvert Creative Cloud-medlemskap, om medlemskapet er for en enkelt app eller flere, og du kan også bruke den uten kostnad på en 30-dagers prøveperiode. Les mer på Reflow-portalen.
