des ordinateurs

Edge Reflow CC et Adobe Generator

Juillet 2022

Edge Reflow CC et Adobe Generator


De nombreux artistes numériques créent des mises en page Web dans PhotoshopR comme comps pour le client ou comme représentation visuelle d'une conception de page Web. L'étape suivante consiste à convertir la mise en page Photoshop en un fichier HTML5 / CSS3 conforme aux normes.

Auparavant, l'artiste numérique accomplissait cela via un codage manuel, en utilisant un logiciel WYSIWYG ou en utilisant un service tiers tel que psd2html.com ou xhtmlchop.com qui exécutent cette tâche pour l'artiste numérique. Maintenant, avec la nouvelle technologie Adobe Generator, l'artiste numérique dispose d'une nouvelle ressource qui simplifiera le flux de travail de conception et de développement. Nous pouvons facilement convertir la mise en page de Photoshop CC en mises en page réactives dans Edge Reflow CC.

Dans le menu Fichier de Photoshop CC, il existe une nouvelle option pour cette tâche (Fichier - Générer - Projet de refusion Edge). La commande indiquera à Generator de déterminer la position de chaque graphique dans la mise en page Photoshop et de convertir ces informations sur les actifs d'image en div HTML5 en utilisant le positionnement relatif CSS3. Il convertit même la police utilisée dans le fichier image Photoshop en informations de police Web. S'il n'y a pas de police Web correspondante, vous êtes invité à choisir une police de remplacement.

Avec cette nouvelle commande dans le menu Fichier, vous direz à Generator de créer un nouveau dossier de projet contenant le fichier de projet Web conforme aux normes et les ressources d'image. Si vous disposez de plusieurs fichiers Photoshop .psd contenant des dispositions pour plusieurs pages Web, vous pouvez convertir chaque .psd en une page Web. Lorsque vous ouvrez le nouveau fichier de projet dans Edge Reflow, vous verrez que le nouveau code HTML5 / CSS affichera les ressources d'image en fonction de votre mise en page Photoshop. À partir de là, vous pouvez personnaliser davantage votre projet avec les points d'arrêt de requête CSS et multimédia dans Edge Reflow pour les différentes exigences d'écran pour les navigateurs Web, les tableaux et les téléphones mobiles.

Vous pouvez démarrer ce même processus à partir d'Edge Reflow en cliquant sur l'icône Photoshop sur le côté droit de l'espace de travail Reflow. Selon l'image active dans Photoshop (quel onglet est sélectionné si plusieurs images sont ouvertes dans l'espace de travail), il vous sera demandé si vous souhaitez créer une nouvelle page à partir du document .psd actif.

Il s'agit d'une étape importante pour le flux de travail de conception et de développement. Étant donné que Generator maintient une connexion entre Photoshop CC et Edge Reflow CC, toutes les modifications apportées dans l'une ou l'autre des applications seront reflétées dans les dossiers de ressources correspondants.

Divulgation: je n'ai pas été compensé financièrement pour cet article. Adobe a fourni un abonnement Creative Cloud aux fins de cet examen. Les opinions sont entièrement les miennes en fonction de mon expérience.

Copyright 2018 Adobe Systems Incorporated. Tous les droits sont réservés. Copies d'écran des produits Adobe reproduites avec la permission d'Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst et Flash Paper Paper est / sont [une] marque [s] déposée (s) ou une marque [s] d'Adobe Systems Incorporated aux États-Unis et / ou dans d'autres pays.

Exporting to Adobe Edge Reflow with Generator in Photoshop (Juillet 2022)



Tags Article: Edge Reflow CC et Adobe Generator, Digital Art and Design, Photoshop CC Edge Reflow CC et Generator

Messages De Beauté Populaires

Bananes caramel aux graines de sésame

Tableau de devis
livres et musique

Tableau de devis

Revue Eisley

Revue Eisley

livres et musique

Calabacitas - Courgettes

Calabacitas - Courgettes

nourriture et vin