Share
Edge Reflow est un programme relativement nouveau d'Adobe, annoncé en 2012 et publié en février 2013, qui vous permet de "concevoir le Web réactif" et de "créer de superbes conceptions réactives". La partie délicate est que pour le moment, vous ne pouvez pas l’utiliser directement pour créer sites Internet, seulement sensible dessins.
Cela signifie que vous pouvez ouvrir Reflow et utiliser son interface de conception visuelle pour créer des prototypes de conception entièrement fonctionnels, avec des combinaisons de couleurs, des mises en page, des éléments de formulaire, des liens et du contenu textuel en place. Vous pouvez prévisualiser votre conception à la fois dans l'outil et dans Chrome, et vous pouvez définir des points d'arrêt, la rendre sensible à la conception, puis la prévisualiser pour mobile via l'outil Adobe Edge Inspect..
Cependant, pour le moment, c'est tout ce que vous pouvez obtenir. Vous ne pouvez pas encore exporter votre conception en tant que site Web. Il n'y a pas de contrôle direct sur le HTML et le CSS qui composent la conception, et Adobe explique très clairement que la sortie de code pour les aperçus doit être considérée comme telle. Code de prévisualisation et non de qualité de production. Ainsi, après avoir suivi le processus de conception de votre site dans Reflow, vous devez le réassembler une seconde fois afin de créer du code qu'un site actif peut utiliser..
Pour certains designers, c'est très bien. créer un prototype fonctionnel que les clients peuvent feu vert fait partie intégrante de leur processus. Cependant, pour de nombreux concepteurs, créer deux fois un site fait de Reflow un outil encore trop inefficace à adopter pour la création de site Web réactif..
Il est question d’ajout d’outils d’exportation complets à un moment indéterminé dans l’avenir, mais un autre discours dit que Reflow ne sera jamais qu’un outil de conception et n’intègrera jamais un flux de travail permettant de créer un site complet. Ainsi, bien que les choses changent à l'avenir, nous ne pouvons pour l'instant que supposer que, pour ceux qui souhaitent disposer d'un site fonctionnel à la fin de leur processus de conception, Reflow risque de ne pas convenir si bien..
Cela dit, même si Reflow n’est peut-être pas une solution complète. création de site web outil, il a quelques fonctionnalités qui peuvent en faire un outil très utile conception d'élément de site Web outil.
Pour moi, les plus grands avantages qu’il offre actuellement sont ses contrôles CSS de type Photoshop qui vous permettent de voir les effets de vos choix en temps réel. Vous pouvez contrôler les couleurs, les arrière-plans, les bordures, les ombres, les lueurs, les coins incurvés, les paramètres d'opacité, les filtres et plus encore dans un environnement très familier..
Et bien que Reflow ne vous donne pas les outils d’exportation de code pour un site complet, il vous donne la possibilité de produire en sortie un copier-coller de CSS pour un élément à la fois. Pour ce faire, il vous suffit de cliquer sur l'élément sur lequel vous travaillez pour le sélectionner, puis de cliquer au bas de l'écran. <> icône à la fin du fil d'Ariane. Cela vous donnera une fenêtre popup avec le CSS de l'élément que vous pourrez copier et coller:
Avec cette fonctionnalité, vous pouvez concevoir des éléments individuels qui seront utilisés dans votre site, puis copier leur code CSS pour une utilisation dans votre projet de site prêt à la production. Vous devrez peut-être supprimer certains codes de disposition non souhaités pour des éléments tels que les marges ou les hauteurs, mais la plupart du code de style est utile pour être collé directement dans un fichier CSS. Si vous connaissez bien Photoshop, vous pouvez le comparer à la création de styles de calque et à leur enregistrement pour une utilisation ultérieure..
Ainsi, que Reflow devienne ou non un outil de création de site Web entièrement fonctionnel, vous pouvez y faire quelque chose de vraiment utile, et nous en couvrirons cinq actuellement..
Adobe Edge Fonts est une collection impressionnante de polices Web gratuites qui peuvent être chargées sur n’importe quel site Web. Pour ce faire, ajoutez un petit extrait de code JavaScript au section de la page comme suit:
La police est ensuite appliquée via CSS de la manière habituelle, par exemple.
p font-family: abel, sans-serif; poids de la police: 300; style de police: normal;
Les polices Edge semblent avoir plus de problèmes avec FOUT (flash de texte sans style) que les polices Google chargées via un tag dans le section, cependant des méthodes sont fournies pour minimiser l’effet décrit dans la documentation de Adobe.
Comme le savent tous les concepteurs ayant déjà travaillé avec des polices, l'aspect d'une police dans un panneau de sélection est assez différent de son apparence lorsque le contenu texte, la taille de la police, les couleurs et tout autre effet requis sont intégrés à l'image. En utilisant Reflow pour prévisualiser les polices Edge avec toutes ces choses en place, vous évitez le processus ardu de devoir modifier votre balise de script incorporé et divers styles CSS à chaque fois que vous souhaitez essayer une nouvelle police. Voici comment:
Ajoutez une "zone de texte" à votre toile en sélectionnant tout d'abord l'outil Zone de texte en haut à gauche de l'interface de redistribution:
Ensuite, dessinez une zone de texte sur la toile:
Entrez le texte avec lequel vous souhaitez prévisualiser les polices en remplaçant le mot par défaut "Texte" qui s'affiche une fois que vous avez fini de dessiner votre zone de texte..
Définissez les propriétés de style que vous souhaitez utiliser en cliquant sur le bouton Coiffant onglet à gauche de l'interface:
Ici, vous pouvez définir la taille de police de votre texte, son style, son épaisseur et toutes les autres propriétés que vous voyez dans le texte. Typographie panneau représenté ci-dessus.
Sous ce panneau, vous verrez également le Contexte et Les frontières panneau que vous pouvez utiliser pour simuler complètement le jeu de couleurs dans lequel le texte sera utilisé:
Vous trouverez ci-dessous notre texte avec les paramètres de couleur, taille, poids et arrière-plan en place:
Remarque: J'ai aussi centré le texte et ajouté un peu de rembourrage sous le Disposition languette.
Vous êtes maintenant prêt à commencer à prévisualiser les polices pour voir celles qui fonctionneront avec la taille, le poids et la palette de couleurs de votre choix. Vous pouvez modifier légèrement la taille et le poids au fur et à mesure, pour compenser les variations d’une police à l’autre..
Pour choisir de nouvelles polices, assurez-vous que votre zone de texte est sélectionnée, puis cliquez sur le bouton. T+ icône à droite de la Police de caractères étiquette:
Cela fera apparaître une fenêtre avec une gamme de polices de bord parmi lesquelles choisir:
Lorsque vous en voyez un que vous aimez, cliquez dessus et, après un court temps de chargement, il sera appliqué à votre zone de texte. Vous pouvez continuer à tester les différentes polices jusqu'à ce que vous en trouviez une que vous aimez, par exemple.
Une fois que vous avez sélectionné la police que vous souhaitez utiliser, vous pouvez vous rendre sur le site Edge Fonts pour récupérer le code JavaScript incorporé..
Il vous suffit de rechercher le nom de la police que vous avez sélectionnée, de cliquer dessus et le code d'intégration s'affiche pour vous ci-dessous..
Avec les paramètres CSS3 de Reflow, vous pouvez créer des effets de texte assez impressionnants, ce qui est similaire à la création de styles de calque de texte dans Photoshop. Tous ces styles peuvent être créés via un codage manuel, mais la possibilité de voir vos modifications en temps réel peut s'avérer inestimable. Voici quelques exemples d'effets de texte CSS purs et les paramètres utilisés pour les créer..
Paramètres utilisés (crédit: markdotto.com):
Paramètres utilisés:
Paramètres utilisés:
Une des choses les plus intéressantes que vous puissiez faire avec CSS3 est de créer des boutons épineux qui nécessitaient auparavant de grandes images encombrantes. Comme pour les effets de texte de la dernière section, les paramètres CSS en temps réel de Reflow rendent ce processus plus rapide et plus intuitif que le codage manuel. Voici quelques exemples de boutons CSS uniquement réalisés dans Reflow.
Paramètres utilisés:
Paramètres utilisés:
Avec la possibilité de créer des effets de texte et des styles de boutons, Reflow vous fournit également des outils pour placer des images, des entrées de texte, des cases à cocher, des cases à cocher et des boutons radio sur le canevas pour la création de styles. De plus, vous pouvez créer des "boîtes" génériques qui sont essentiellement équivalentes à des "divs". Ainsi, entre toutes ces fonctionnalités, vous disposez des éléments nécessaires à la création de classes pour les feuilles de style de kit d'interface utilisateur..
Vous pouvez commencer à partir de zéro avec votre propre design ou vous pouvez émuler les kits d'interface utilisateur PSD existants. Si vous voulez passer de PSD à UI, alors Redistribution a une fonctionnalité qui est presque génial avec les kits PSD prêts à l'emploi téléchargés, c'est Photoshop CC Connect.
Après avoir téléchargé un kit PSD UI, comme ce petit kit plat gratuit de Blaz Robar, ouvrez-le dans Photoshop. Dans le cas de ce kit, vous verrez ce qui suit:
Ensuite, dans Redistribuer, avec un nouveau document ouvert, cliquez sur le bouton Photoshop CC Connect icône en haut à droite de l'interface:
Dans la fenêtre qui apparaît, cliquez sur le bouton Créer une nouvelle page bouton:
Redistribuer tentera de créer une copie de tout ce qui est actuellement affiché dans Photoshop. Dans le cas de ce kit d'interface utilisateur, vous obtiendrez les éléments suivants:
Le résultat n'est peut-être pas tout à fait ce que nous aurions pu espérer, car je suis sûr qu'il existe des flux de travaux préférentiels pour la création de fichiers PSD importés sans faille dans Reflow, bien qu'ils soient en réalité plus utiles qu'il n'y paraît à première vue. La raison en est que, même si les choses ne sont pas encore à la hauteur de nos attentes, les éléments essentiels inclus dans le kit sont en place, ainsi que leurs couleurs. Cela vous évite d'avoir à créer des éléments et à copier des codes de couleur. Vous pouvez déplacer les éléments générés et les ajuster jusqu'à ce qu'ils ressemblent à l'original.
Accentsconagua
px au lieu de %. Cela empêchera les éléments de se rétrécir et de s’étirer de manière imprévisible si vous modifiez la largeur de votre zone de dessin ou redimensionnez la fenêtre Redistribution..relatif à absolu. De cette façon, vous pouvez faire glisser des éléments et les positionner à l'endroit où vous souhaitez éviter les chevauchements et les rendre plus visibles..relatif à absolu afin que vous puissiez toujours le placer où vous le souhaitez sur la toile.Au fur et à mesure, vous découvrirez peut-être des éléments nécessitant des images, qui ne peuvent pas être créés uniquement avec les paramètres CSS de redistribution et qui nécessitent donc des images, telles que les petites flèches de ce kit d'interface utilisateur ou les images d'icônes sociales. C’est là qu’une autre fonctionnalité intéressante de Photoshop CC Connect entre en jeu..
Pour importer instantanément une image du PSD d'origine, il vous suffit de trouver son calque, puis de le renommer avec le nom de fichier de votre choix. Par exemple, dans ce fichier PSD, je souhaite accéder à la petite flèche blanche vers le bas que vous voyez sur les éléments orange. Premièrement, je trouve sa couche dans le fichier PSD, qui dans ce cas s’appelle ">" dans le dossier "Image Nav Copy". Je renomme ce calque en nom de fichier. Je souhaite que l’image de flèche exportée ait, c’est-à-dire "downarrow.png"..
Je clique alors la même Photoshop CC Connect nous avons frappé pour importer le PSD au départ, mais cette fois-ci, je clique sur le bouton Bibliothèque de biens bouton. Redistribuer vous montrera un bref message "d'importation" à mesure qu'il insérera dans n'importe quel calque de votre PSD ayant une extension de fichier image à la fin de son nom. Maintenant je peux cliquer sur le Bibliothèque de biens icône et je vais voir mon image "downarrow.png" que je peux glisser et déposer n'importe où sur le dessin.
Remarque: il y a un aperçu de l'image dans la fenêtre au-dessus du nom du fichier, mais dans ce cas c'est un peu difficile à voir, étant petit et blanc.
Après quelques ajustements des paramètres de redistribution, il est possible de rendre le fouillis de formes importé initial assez comparable au kit d'interface utilisateur basé sur une image d'origine:
Les filtres CSS sont relativement nouveaux sur la scène et vous permettent d’appliquer des effets visuels très intéressants à n’importe quel élément HTML ou SVG; des divs aux images en passant par les boutons, mais l'application la plus courante de ces filtres a tendance à être appliquée aux images. Gardez à l'esprit que la prise en charge des filtres CSS est toujours limitée à Chrome, Opera et Safari. Par conséquent, la façon dont vous choisissez de les utiliser devrait être uniquement destinée à un plaisir supplémentaire qui ne laissera aucune fonctionnalité réduite aux utilisateurs d'IE et de Firefox..
Adobe contribuant à la spécification Filtres CSS, il n’est peut-être pas surprenant de voir que les outils permettant de les utiliser sont inclus dans Reflow, et ils constituent un moyen très pratique de tester l'apparence de vos paramètres de filtre lorsque vous les appliquez et les modifiez. Malheureusement, Reflow ne prend en charge que sept des dix filtres disponibles, mais il reste encore beaucoup à faire:
Les effets ne sont pas visibles par défaut dans votre modes onglet, afin de les activer aller à Voir> Shiny Web Feature puis cliquez sur le bouton à gauche de la Les filtres option. Une fois activé, vous pouvez cliquer sur n’importe quel élément de votre page, puis cliquer sur le bouton + icône sous le Les filtres panneau de configuration pour ajouter de nouveaux filtres CSS:
Comme avec d'autres effets CSS, vous pouvez coder manuellement vos filtres CSS, mais le fait de voir les résultats de vos paramètres en temps réel permet d'accélérer le processus. Vous pouvez appliquer des filtres uniques aux images ou combiner des filtres pour créer différents effets. Voici quelques exemples de filtres appliqués via Reflow:
Image reproduite avec l'aimable autorisation de http://publicdomainpictures.net/Si vous n'avez pas encore jeté un coup d'œil à Reflow, ou si vous l'avez fait, mais que vous avez décidé de ne pas l'utiliser comme outil de conception de site Web, vous serez peut-être incité à le saisir et à l'essayer. un design d'élément de site web outil à la place. Ce n'est peut-être pas exactement ce que vous recherchez dans un outil complet de création de site, mais il peut également permettre de rendre les segments de votre processus de conception global plus rapides et plus intuitifs..
Vous pouvez récupérer les fichiers source inclus dans cet article pour obtenir tous les documents de redistribution présentés ci-dessus et obtenir quelques idées sur ce que vous pouvez faire..
Reflow est disponible gratuitement avec tous les membres de Creative Cloud, qu'il s'agisse d'une seule application ou de plusieurs applications. Vous pouvez également l'utiliser gratuitement pendant une période d'essai de 30 jours. Plus d'informations sur le portail de redistribution.
