Share
Edge Reflow è un programma relativamente nuovo di Adobe, che è stato annunciato nel 2012 e pubblicato a febbraio 2013, con il livello di ascensore che consente di "Progettare il web reattivo" e "Creare bellissimi modelli reattivi". La parte difficile è che al momento non è possibile utilizzarlo direttamente per creare reattività siti web, solo reattivo disegni.
Ciò significa che è possibile aprire Reflow e utilizzare la sua interfaccia di progettazione visiva per creare prototipi di design completamente funzionanti, con schemi di colori, layout, elementi di moduli, collegamenti e contenuto di testo. Puoi visualizzare l'anteprima del tuo design sia all'interno dello strumento che in Chrome, e puoi impostare i punti di interruzione, rendere il tuo design reattivo e visualizzarlo in anteprima per dispositivi mobili tramite lo strumento Edge Inspect di Adobe.
Tuttavia, al momento è il massimo che puoi ottenere. Non sei ancora in grado di andare avanti ed esportare il tuo design come un vero e proprio sito web. Non esiste un controllo diretto sull'HTML e sul CSS che costituisce il design, e Adobe rende molto chiaro che l'output del codice per le anteprime dovrebbe essere considerato proprio questo; codice di anteprima e non di qualità di produzione. Quindi, dopo aver attraversato il processo di progettazione del tuo sito in Reflow, devi metterlo insieme una seconda volta per creare il codice che un sito live può utilizzare.
Per alcuni designer questo va bene; la creazione di un prototipo funzionale che i clienti possano emettere luce verde è parte integrante del loro processo. Per molti progettisti, tuttavia, la creazione di un sito due volte fa di Reflow uno strumento ancora troppo inefficiente da adottare ai fini della creazione di un sito reattivo.
Si parla di strumenti di esportazione completi che verranno aggiunti in un punto indefinito in futuro, ma poi altri interventi dicono che Reflow sarà sempre e solo uno strumento di progettazione e non incorporerà mai un flusso di lavoro per la creazione completa del sito. Quindi, mentre le cose potrebbero cambiare in futuro, per ora possiamo solo presumere che per coloro che desiderano avere un sito funzionante alla fine del loro processo di progettazione, Reflow potrebbe non essere così adatto.
Detto questo, mentre Reflow forse non è completo creazione del sito web strumento, ha alcune caratteristiche che possono renderlo molto utile progettazione di elementi del sito Web strumento.
Per me, i più grandi vantaggi che offre attualmente sono i controlli CSS di Photoshop che ti permettono di vedere gli effetti delle tue scelte in tempo reale. Puoi controllare colori, sfondi, bordi, ombre, bagliori, angoli curvi, impostazioni di opacità, filtri e altro in un ambiente molto familiare.
E anche se Reflow non ti fornisce strumenti di esportazione del codice per un sito completo, ti dà la possibilità di stampare e incollare i CSS per un elemento alla volta. Per fare ciò basta fare clic sull'elemento su cui si sta lavorando per selezionarlo, quindi nella parte inferiore dello schermo fare clic su <> icona alla fine del percorso del breadcrumb. Questo ti darà una finestra popup con il CSS dell'elemento da copiare e incollare:
Con questa funzione puoi progettare singoli elementi da utilizzare nel tuo sito, quindi copiare i loro CSS da utilizzare nel tuo progetto di sito pronto per la produzione. Potrebbe essere necessario rimuovere del codice di layout indesiderato per cose come margini o altezze, ma la maggior parte del codice di stile è buona per essere incollata direttamente in un file CSS. Se hai familiarità con Photoshop, potresti paragonarlo a creare stili di livello e salvarli per un uso successivo.
Quindi, se Reflow diventerà o meno uno strumento di creazione di siti web completamente funzionale, ci sono alcune cose davvero utili che puoi fare con esso in questo momento, e ne copriremo cinque.
Adobe Edge Fonts è una straordinaria raccolta di caratteri web gratuiti che possono essere caricati su qualsiasi sito web. Per fare ciò, aggiungi un piccolo snippet JavaScript al sezione della pagina in questo modo:
Il carattere viene quindi applicato tramite CSS nel modo normale, ad es.
p font-family: abel, sans-serif; font-weight: 300; stile font: normale;
I font Edge sembrano avere più problemi con FOUT (flash di testo non animato) rispetto ai font Google caricati tramite un tag nella sezione, tuttavia sono forniti dei metodi per minimizzare l'effetto come descritto nella documentazione di Adobe.
Come sa ogni designer che abbia mai lavorato con i font, a volte il modo in cui un font appare in un pannello di selezione finisce per essere molto diverso da come appare quando il contenuto del testo, la dimensione del font, i colori e tutti gli altri effetti sono portati nell'immagine. Utilizzando Reflow per visualizzare in anteprima Edge Fonts con tutte queste cose in atto, puoi evitare l'arduo processo di dover modificare il tuo tag di script di incorporamento e vari stili CSS ogni volta che desideri provare un nuovo font. Ecco come:
Aggiungi una "Casella di testo" alla tua tela selezionando prima lo strumento casella di testo dall'angolo in alto a sinistra dell'interfaccia di Reflow:
Quindi disegna una casella di testo sulla tela:
Inserisci il testo con cui desideri visualizzare l'anteprima dei caratteri sostituendo la parola predefinita "Testo" che viene visualizzata dopo aver finito di disegnare la casella di testo.
Impostare le proprietà di stile che si desidera utilizzare facendo clic su Messa in piega scheda sul lato sinistro dell'interfaccia:
Qui puoi impostare la dimensione del carattere del colore del testo, lo stile del carattere, il peso del carattere e tutte le altre proprietà che vedi in Tipografia pannello raffigurato sopra.
Sotto questo pannello vedrai anche il sfondo e frontiere pannello che puoi usare per simulare completamente la combinazione di colori in cui il testo sarà usato:
Di seguito è riportato il nostro testo con le impostazioni relative a colore, dimensioni, peso e sfondo:
Nota: Ho anche centrato il testo e aggiunto un po 'di padding sotto il disposizione linguetta.
Ora sei pronto per iniziare l'anteprima dei caratteri per vedere quali funzionano con le dimensioni, il peso e la combinazione di colori desiderata. Potresti voler modificare leggermente le dimensioni e il peso mentre procedi, per compensare le variazioni da un font all'altro.
Per scegliere nuovi caratteri, assicurarsi che la casella di testo sia selezionata, quindi fare clic su T+ icona a destra di carattere tipografico etichetta:
Verrà visualizzata una finestra con un intervallo di font bordo tra cui scegliere:
Quando ne vedi uno ti piace cliccarci sopra e, dopo un breve tempo di attesa per il caricamento, verrà applicato alla tua casella di testo. Puoi continuare a testare i vari font finché non ne trovi uno che ti piace, ad es.
Una volta selezionato il tipo di carattere che si desidera utilizzare, è possibile accedere al sito di Edge Fonts per acquisire il codice di incorporamento JavaScript.
Cerca semplicemente il nome del carattere che hai selezionato, fai clic su di esso e il codice di incorporamento verrà visualizzato per te di seguito.
Con le impostazioni CSS3 di Reflow puoi creare effetti di testo davvero fantastici, sempre in modo simile alla creazione di stili di livello testo in Photoshop. Tutti questi stili potrebbero essere creati tramite la codifica manuale, ma la possibilità di vedere i tuoi ritocchi in tempo reale può essere inestimabile. Ecco alcuni esempi di effetti di testo CSS puri e le impostazioni utilizzate per crearli.
Impostazioni utilizzate (credito: markdotto.com):
Impostazioni utilizzate:
Impostazioni utilizzate:
Una delle cose più interessanti che puoi fare con CSS3 è creare pulsanti spiffy che in precedenza avrebbero richiesto immagini grandi e goffe. Come con gli effetti di testo nell'ultima sezione, le impostazioni CSS in tempo reale di Reflow rendono questo processo più rapido e intuitivo rispetto alla codifica manuale. Ecco alcuni esempi di pulsanti solo CSS realizzati in Reflow.
Impostazioni utilizzate:
Impostazioni utilizzate:
Insieme alla possibilità di creare effetti di testo e stili di pulsanti, Reflow offre anche strumenti per posizionare immagini, input di testo, caselle di selezione, caselle di controllo e pulsanti di opzione sulla tela per lo stile. Inoltre, puoi creare "scatole" generiche che sono essenzialmente equivalenti a "div", quindi tra tutte queste funzionalità hai i blocchi predefiniti necessari per creare classi per i fogli di stile del kit dell'interfaccia utente.
Puoi iniziare da zero con il tuo design, oppure puoi decidere di emulare kit di interfaccia utente PSD esistenti. Se vuoi passare da PSD a UI allora Reflow ha una funzione che lo è quasi fantastico con i kit PSD scaricati pronti all'uso, e questo è Photoshop CC Connect.
Dopo aver scaricato un kit UI PSD, come questo simpatico piccolo kit piatto gratuito di Blaz Robar, vai avanti e aprilo in Photoshop. Nel caso di questo kit vedrai quanto segue:
Quindi, in Riempi, con un nuovo documento aperto, fare clic su Photoshop CC Connect icona in alto a destra dell'interfaccia:
Nella finestra popup che appare, fai clic su Crea nuova pagina pulsante:
Reflow tenterà di creare un duplicato di ciò che è attualmente visualizzato in Photoshop. Nel caso di questo UI Kit otterrai quanto segue:
Il risultato forse non è esattamente quello che avremmo potuto sperare, poiché sono sicuro che ci sono flussi di lavoro preferenziali per la creazione di PSD che importano in modo impeccabile in Reflow, tuttavia è in realtà più utile di quanto possa sembrare all'inizio. La ragione è che, nonostante le cose non ancora in voga come le abbiamo necessarie, gli elementi essenziali inclusi nel kit sono presenti insieme ai loro colori. Ciò ti risparmia la fatica di creare elementi e di copiare i codici colore. Puoi spostare gli elementi generati attorno e modificarli finché non sembrano originali.
Accentsconagua
px invece di %. Ciò impedirà agli elementi di restringersi e allungarsi in modo imprevedibile se cambi la larghezza della tela o ridimensiona la finestra Riscorri.parente a assoluto. In questo modo puoi trascinare gli oggetti e posizionarli dove vuoi evitare la sovrapposizione e renderli più facili da vedere.parente a assoluto quindi puoi ancora posizionarlo dove vuoi sulla tela.Mentre procedete, potreste scoprire che ci sono elementi che richiedono immagini che non possono essere eseguite con le sole impostazioni di Reflow CSS e che hanno bisogno di immagini, come le piccole frecce di questo kit di interfaccia utente o le immagini delle icone sociali. È qui che entra in gioco un'altra fantastica funzionalità di Photoshop CC Connect.
Per importare immediatamente un'immagine dal PSD originale, tutto ciò che devi fare è trovare il suo livello, quindi rinominarlo nel nome del file immagine desiderato. Per esempio, in questo PSD voglio accedere alla piccola freccia bianca rivolta verso il basso che vedi sugli elementi arancioni. Innanzitutto, trovo il suo livello nel PSD, che in questo caso è etichettato ">" nella cartella "Image Nav Copy". Rinomino quel livello al nome del file che desidero avere l'immagine della freccia esportata, ad es. "Downarrow.png".
Quindi faccio clic sullo stesso Photoshop CC Connect icona che abbiamo colpito per importare inizialmente il PSD, solo che questa volta clicco su Libreria di risorse pulsante. Reflow ti mostrerà un breve messaggio di "importazione" che estrae qualsiasi livello dal tuo PSD che ha all'estensione del file immagine alla fine del suo nome. Ora posso fare clic sul Libreria di risorse icona e vedrò la mia immagine "downarrow.png" che posso trascinare e rilasciare ovunque sul disegno.
Nota: c'è un'anteprima dell'immagine nella finestra sopra il nome del file, tuttavia in questo caso è un po 'difficile da vedere, essendo piccolo e bianco.
Dopo aver apportato alcune modifiche alle impostazioni di Reflow, è possibile fare in modo che l'imbroglio iniziale importato delle forme sia paragonabile al kit dell'interfaccia utente originale basato sull'immagine:
I filtri CSS sono abbastanza nuovi sulla scena e ti permettono di applicare effetti visivi molto interessanti a qualsiasi elemento HTML o SVG; dalle div, alle immagini, ai pulsanti, tuttavia l'applicazione più comune di questi filtri tende ad essere sulle immagini. Ricorda che il supporto per i filtri CSS è ancora limitato a Chrome, Opera e Safari, quindi il modo in cui scegli di utilizzarli dovrebbe essere solo per un ulteriore piacere visivo che non lascerà agli utenti di IE e Firefox funzionalità ridotte.
Con Adobe che contribuisce alle specifiche dei filtri CSS, non sorprende vedere gli strumenti per utilizzarli inclusi in Reflow e fornisce un modo molto pratico per testare come le impostazioni dei filtri verranno visualizzate in tempo reale mentre le applichi e le modifichi. Sfortunatamente, Reflow supporta solo sette dei dieci filtri disponibili, ma quelli sono ancora molto con cui lavorare:
Gli effetti non sono visibili di default nel tuo stili scheda, quindi per attivarli vai su Visualizza> Caratteristica Web brillante quindi fare clic sul pulsante a sinistra di filtri opzione. Una volta attivato, puoi fare clic su qualsiasi elemento della tua pagina e quindi fare clic su + icona sotto il filtri pannello delle impostazioni per aggiungere nuovi filtri CSS:
Come con gli altri effetti CSS, puoi effettivamente codificare i tuoi filtri CSS, ma essere in grado di vedere i risultati delle tue impostazioni in tempo reale aiuta ad accelerare il processo. Puoi applicare singoli filtri alle immagini o combinare filtri per creare una varietà di effetti diversi. Ecco alcuni esempi di filtri applicati tramite Reflow:
Immagine per gentile concessione di http://publicdomainpictures.net/Se non hai ancora dato un'occhiata a Reflow, o se hai, ma hai deciso di non usarlo come strumento di progettazione di siti web, forse ora potresti essere indotto ad afferrarlo e provarlo come un elemento di design del sito strumento invece. Potrebbe non essere esattamente quello che stai cercando in uno strumento completo per la creazione di siti, ma potrebbe solo fare un ottimo lavoro per rendere più veloci e più intuitivi segmenti del tuo processo di progettazione generale.
Puoi prendere i file sorgente inclusi in questo articolo per ottenere tutti i documenti relativi al flusso di lavoro presentati sopra e ottenere alcune idee su cosa puoi fare.
Reflow è disponibile come inclusione gratuita con qualsiasi abbonamento di Creative Cloud, indipendentemente dal fatto che l'iscrizione sia per una singola app o più, e puoi anche utilizzarla gratuitamente per una prova di 30 giorni. Maggiori informazioni sul portale Reflow.
