Utilisation des objets dans Adobe Muse

Les objets d’Adobe Muse comprennent des éléments de conception créés dans le programme ou importés depuis des sources externes. Les images, textes, blocs d’images, etc. peuvent être ajoutés à la page web, puis être traités à l’aide de divers outils dans Adobe Muse.

Un des workflows les plus courants consiste à créer et importer un bouton à partir d’Adobe Photoshop. A cette fin, Adobe Muse reconnaît les calques et compositions de calques créés dans Photoshop. Adobe Muse permet de définir ces calques en tant qu’Etats du bouton dans votre site web.

Pour les objets placés sur la zone de travail de la page web, vous pouvez leur ajouter des transformations selon les besoins de conception du site web. Vous pouvez également isoler un objet pour ajouter les propriétés appropriées de marge et de gouttière afin de gérer l’espacement des éléments imbriqués.

Vous pouvez positionner des cadres d’image directement dans les projets Adobe Muse en cliquant sur l’outil Cadre d’image. Dans le panneau Outils, cliquez sur l’outil Cadre d’image, puis sur l’emplacement de votre choix dans le projet.

L’espace de travail Muse fonctionne comme Illustrator et InDesign ; vous chargez l’image importée en premier, puis vous cliquez sur l’emplacement de destination sur la page. Pour ajouter un fichier d’image en le plaçant directement sur la page, procédez comme suit :

1. Choisissez Fichier > Importer, ou utilisez le raccourci clavier Commande-D (Mac) ou Ctrl-D (Windows) pour ouvrir la boîte de dialogue d’importation.
2. Parcourez l’arborescence pour sélectionner le fichier made-with-muse.png dans le dossier des fichiers d’exemple. Cliquez sur Ouvrir pour le choisir et fermez la boîte de dialogue d’importation.

Cliquez une fois dans la partie inférieure de la page pour importer l’image. Dans ce cas, vous voulez importer l’image dans sa taille réelle ; par conséquent, cliquez simplement une fois. Toutefois, si vous souhaitez redimensionner l’image importée, vous pouvez cliquer et faire glisser la souris pour donner à l’image une taille spécifique. 

Avec l’outil Sélection, faites glisser l’image vers le centre vertical du rectangle de pied de page mosaïque ; notez que des repères rouges et des zones de mesures turquoise apparaissent brièvement pour vous aider à l’aligner sur le centre.

Après avoir effectué ces modifications, la section du pied de page est presque terminée.

Vous pouvez également importer dans Adobe Muse des images prêtes à imprimer. Elles sont ainsi converties en un format adapté au web. Toutefois, créer des images adaptées au web implique souvent leur compression avec un certain compromis au niveau de la qualité. Placer dans Muse des images qui ne sont pas prêtes pour le web aboutit à leur compression automatique. Si vous publiez ou exportez un site et n’êtes pas satisfait des résultats automatisés, essayez de créer et d’optimiser manuellement vos propres images adaptées au web dans Photoshop ou dans le logiciel Adobe Fireworks®. Supprimez les images d’origine et importez les nouvelles images optimisées dans les pages, puis publiez ou exportez à nouveau votre site.

Notez que lorsque vous apportez d’autres modifications à une image dans Muse, comme un recadrage, un redimensionnement ou l’ajout de biseaux, d’ombres et de lueurs, Muse recrée alors pour vous l’image et la compresse automatiquement. Pour maîtriser davantage le processus d’optimisation, vous pouvez ajouter des effets aux images à l’aide de Photoshop ou de Fireworks, optimiser le fichier dans un programme d’édition d’image, puis l’importer dans Muse pour définir vous-même le niveau de compression. Vous pouvez importer des fichiers PSD de Photoshop directement dans Muse, plutôt que d’exporter des fichiers PNG, JPG ou GIF, mais Muse génère alors également automatiquement un nouveau fichier image à l’aide de ses propres algorithmes de compression automatique.

Des erreurs d’exportation peuvent se produire, ainsi qu’un ralentissement des opérations d’exportation, lorsqu’un fichier lié a été importé à une résolution très élevée, puis redimensionné sur la page, à une échelle beaucoup plus petite. Cette procédure n’est pas recommandée. Les incidents sont plus fréquents lorsque des images de taille réelle (plus de 2 000 pixels) sont plusieurs fois importées, puis redimensionnées pour être adaptées à la conception.

Si vous importez un fichier d’image très volumineux, Muse limite automatiquement la taille et redimensionne la largeur de l’image à 2048. Si vous placez le pointeur de la souris sur le nom d’une ressource dans le panneau Ressources, une info-bulle affiche la taille d’origine de l’image importée par rapport à celle de l’image rééchantillonnée (mise à l’échelle pour tenir dans la limite de taille maximale).

Il est conseillé de redimensionner et d’optimiser les graphiques web destinés à un site à l’aide d’un programme d’édition d’image avant de les importer sur les pages. L’importation d’images extrêmement volumineuses peut entraîner une augmentation de la taille du fichier .muse, au-delà de ce qui est nécessaire. Le fichier .muse doit traiter des données de pixel supplémentaires qui ne sont pas nécessaires pour afficher l’image sur le web. Cela peut entraîner une période de traitement plus longue lors de l’exportation et de la publication de sites. Dans certains cas, un fichier .muse très volumineux peut dépasser le délai en tentant de redimensionner et d’optimiser l’ensemble des fichiers lors de l’exportation ou de la publication. Des erreurs d’expiration peuvent se produire.

Pour résoudre ce problème, vous pouvez cliquer sur les noms de ressource avec le bouton droit de la souris et choisir Optimiser la taille de la ressource afin de supprimer les données inutiles pour afficher l’image redimensionnée.

Si vous redimensionnez une image optimisée pour qu’elle apparaisse plus grande dans une conception, l’erreur liée à une ressource suréchantillonnée Plus peut s’afficher. Pour résoudre ce problème, vous pouvez choisir l’option Importer une taille supérieure pour récupérer les données d’image supplémentaires nécessaires à l’affichage de l’image redimensionnée, dans une qualité acceptable.

Vous pouvez dessiner un espace réservé en forme d’ellipse, de rectangle ou de polygone et le remplir d’une image, de texte ou de couleur.

Le bouton Partager affiche les états comme prévu. Dans la section suivante, vous apprendrez à aligner le bouton Partager avec l’image d’écoulement située sur le côté droit de la barre de navigation du site.

Dans la section suivante, vous allez apprendre à définir les zones d’en-tête et de pied de page du gabarit.

Lorsque vous placez une image ou ajoutez une illustration à une page par d’autres biais, vous utilisez l’outil de sélection et des touches fléchées pour la repositionner. Lorsque vous déplacez l’image, celle-ci se déplace en liaison avec les autres éléments (images, texte et support) également présents sur la page. Vous pouvez aussi déplacer les autres éléments, mais la page dans son ensemble se comporte comme une brochure ou une affiche. Les éléments de la page existent sur un seul plan. Si une page est longue (contient beaucoup de contenu vertical) et que le visiteur en fait défiler le contenu, celui-ci ne voit plus les images situées en haut de la page.

Il est fort probable que vous avez déjà vu des objets ancrés en consultant des sites web ; il s’agit des éléments « persistants » qui s’affichent toujours à un emplacement donné. Ils semblent flotter au-dessus des autres éléments de la page.

Lorsque vous utilisez l’outil d’ancrage, vous ne faites que supprimer une image du flux de la page. Au lieu de la placer par rapport aux autres éléments de la page, vous la définissez à un emplacement spécifique par rapport au navigateur. Les images ancrées semblent être « scotchées », toujours placées au même endroit (comme l’angle supérieur droit ou flottant vers le bas) indépendamment des autres éléments de la page qui défilent. Si le visiteur redimensionne le navigateur, les images ancrées restent toujours à l’emplacement où elles sont épinglées par rapport à la fenêtre du navigateur.

Vous pouvez considérer l’ancrage comme un moyen d’« extraire l’image » de la conception d’une page pour la fixer sur le navigateur, comme on épingle une note sur un panneau d’affichage. L’élément ancré se déplace pour conserver sa position d’ancrage par rapport au navigateur si le visiteur redimensionne la fenêtre du navigateur, mais il ne se déplace pas si le visiteur fait défiler le contenu de la page horizontalement ou verticalement.

Pour utiliser l’outil d’ancrage, procédez comme suit :

1. La page Gabarit A étant ouverte dans la vue Conception, sélectionnez l’icône Facebook à l’aide de l’outil de sélection.
2. Cliquez sur la position d’ancrage en haut à droite dans l’interface d’ancrage du panneau de configuration. Ce paramètre « ancre » l’élément à partir de l’emplacement actuel de son angle supérieur droit.

3. Répétez les étapes 1 et 2 pour ancrer les boutons d’icône Google+ et Twitter à leurs positions supérieures sur la droite, afin qu’ils ne se déplacent pas dans la fenêtre du navigateur lorsque le reste de la page défile.
4. Cliquez sur Plan pour voir les vignettes de la page. Notez que toutes les pages incluent désormais les trois icônes des réseaux sociaux, car vous les avez ajoutées au gabarit.
5. Dans la vue Plan, double-cliquez sur la page des aliments pour l’ouvrir en mode Conception. Ou, si elle est déjà ouverte, cliquez sur l’onglet de la page des aliments pour la rendre active. Choisissez Fichier > Prévisualiser la page dans le navigateur pour afficher la page dans un navigateur.
6. Cliquez sur l’élément de menu Desserts pour accéder au bas de la longue page, à la section contenant la carte des desserts. Notez que si les autres éléments de la page défilent, les trois icônes des réseaux sociaux restent en place sur le côté droit de la page, car elles sont ancrées.

Poursuivez par le tutoriel Création de votre premier site web avec Muse - Chapitre 6, où vous allez apprendre à regrouper des ensembles d’objets afin qu’ils se comportent comme un seul élément. Vous allez également terminer la page de visite en ajoutant une carte Google intégrée qui permet aux visiteurs de localiser le Katie’s Café. Une fois le site finalisé, vous allez découvrir comme il est facile de le télécharger vers un serveur d’hébergement (optimisé par Business Catalyst) pour le publier en ligne, ce qui vous permettra de partager le travail en cours avec vos clients et vos collègues.

Dans le chapitre 4 du tutoriel Création de votre premier site web avec Muse, vous avez appris à ajouter des balises d’ancrage et à les lier à des éléments de menu dans un widget Menu horizontal manuel. Vous avez également appris à ancrer des éléments sur la page afin d’empêcher leur défilement. Enfin, vous avez découvert comment ajouter des liens aux fichiers pour que les visiteurs puissent les télécharger.

Vous allez également apprendre à regrouper des objets et à utiliser ces groupes pour coller des ensembles de contenu sur les pages. Vous allez également travailler davantage avec le code HTML intégré : cette fois-ci, vous allez ajouter une carte Google interactive à la page de visite. Enfin, vous allez apprendre à apporter la touche finale à votre site par l’ajout d’un Favicon, puis la publication du site d’essai sur les serveurs d’hébergement inclus.

Comme dans InDesign et d’autres logiciels de conception, vous pouvez combiner plusieurs objets au sein d’un groupe pour qu’ils soient traités comme un seul objet. Dans cette section, vous allez créer une conception composée de plusieurs éléments (blocs de texte et images importés), puis apprendre à les regrouper afin de les positionner ou les coller plus facilement comme un seul élément. Procédez comme suit :

1. Dans la vue Plan, double cliquez sur la vignette de la page d’accueil pour l’ouvrir en mode Conception.
2. Choisissez la commande Fichier > Importer. Parcourez l’arborescence pour accéder au dossier des fichiers d’exemples et sélectionnez le fichier panel-open-bottom.png. Cliquez sur Ouvrir pour fermer la boîte de dialogue d’importation, puis cliquez une fois dans la partie inférieure de la page d’accueil (en dessous du widget Composition du cadre lumineux et au-dessus du pied de page) pour importer l’image à la taille réelle.

Le fichier PNG a été défini sur une opacité plus faible, la conception semi-transparente de la fleur permettant ainsi à l’image d’arrière-plan mosaïque d’apparaître au travers.

3. Choisissez la commande Fichier > Importer à nouveau. Cette fois-ci, parcourez l’arborescence pour sélectionner l’image nommée spoon-map.png. Cliquez sur Ouvrir, puis cliquez une fois sur le pétale central pour l’importer.
4. L’image de la cuillère étant sélectionnée, appuyez sur la touche Option (Mac) ou Alt (Windows) et maintenez-la enfoncée pour dupliquer cette image, puis faites-la glisser vers le pétale immédiatement à droite du pétale central. Répétez une nouvelle fois cette action, pour dupliquer l’image de la cuillère centrale et faire glisser la copie vers le pétale de gauche. Utilisez l’outil de sélection pour positionner les trois cuillères, comme illustré dans l’image ci-dessous.

5. A l’aide de l’outil Texte, dessinez un bloc de texte dans le pétale central et saisissez ce qui suit :

Katie’s Café

Noe Valley

123 Elizabeth Street

LUN-VEN 6:00-22:00

SAM-DIM 7:00-22:00

6. Dans le panneau Texte, appliquez les paramètres suivants pour formater le texte :
   • Police : Droid Serif (ou n’importe quelle police avec empattement)
   • Corps de la police : 14
   • Couleur de la police : #222222 (dans la partie 5, vous avez renommé cette couleur katieblack)
   • Alignement de la police : centré
   • Interligne : 120 %

7. Puis, sélectionnez simplement les deux dernières lignes (qui commencent par les jours de la semaine) et définissez la couleur de la police sur rouge (#A6342A).
8. Sélectionnez le bloc de texte à l’aide de l’outil de sélection. Appuyez sur la touche Option (Mac) ou Alt (Windows) et maintenez-la enfoncée pour dupliquer le bloc de texte et le faire glisser vers le pétale situé immédiatement à droite, au-dessus de l’image de la cuillère. Répétez une nouvelle fois cette action, pour dupliquer le bloc de texte central et faire glisser la copie vers le pétale de gauche. Utilisez l’outil de sélection pour positionner les trois blocs de texte de sorte qu’ils soient alignés au-dessus des trois cuillères, comme dans l’image ci-dessous.

9. Basculez vers l’outil Texte. Sélectionnez le texte de l’adresse de gauche et modifiez-le comme suit :

Katie’s Café

Laurel Heights

800 Spruce Street

LUN-VEN 5:00-12:00

SAM-DIM 9:00-13:00

10. Sélectionnez le texte dans l’adresse de droite à l’aide de l’outil Texte et modifiez-le comme suit :

Katie’s Café

Cole Valley

301 Carmel Street

LUN-VEN 7:00-22:00

SAM-DIM 9:00-22:00

Maintenant que la conception est terminée, vous allez sélectionner les éléments et les regrouper.

11. Utilisez l’outil de sélection pour cliquer et faire glisser le pointeur de la souris sur toute la fleur, en veillant à sélectionner l’image de fleur importée, les trois images de cuillère et les trois blocs de texte. Cliquez avec le bouton droit de la souris et choisissez Associer dans le menu qui s’affiche. Si vous préférez, vous pouvez également choisir Objet > Associer.

Notez qu’une fois les objets regroupés, l’indicateur de sélection situé dans l’angle supérieur gauche du panneau de configuration affiche le mot : Groupe.

12. Copiez le groupe sélectionné. Cliquez sur Plan pour revenir à la vue Plan, puis double-cliquez sur la vignette de la page de visite pour l’ouvrir en mode Conception. Choisissez Edition > Coller sur place, pour placer l’ensemble du groupe d’éléments au même emplacement.

Comme vous pouvez le constater à partir de ce petit exemple, les groupes sont utiles lorsque vous avez terminé une conception et que vous souhaitez l’utiliser comme un seul élément, pour la repositionner sur une page ou la copier/coller sur une autre page.

Outre le regroupement, les fonctions de verrouillage vous sembleront également très utiles une fois la conception finalisée. Cliquez avec le bouton droit sur un groupe ou un ensemble d’éléments sélectionné et choisissez Verrouiller dans le menu contextuel qui apparaît pour les verrouiller. (Vous pouvez également choisir Objet > Verrouiller). Le verrouillage évite tout déplacement ou suppression non intentionnelle de l’un des éléments finalisés sur une page, car ceux-ci ne sont plus sélectionnables. Si, par la suite, vous devez mettre à jour les éléments verrouillés, choisissez Objet> Tout déverrouiller sur la page.

Une fois la conception de fleur collée au bas de la page de visite, le contenu de la page est partiellement terminé. Dans la section suivante, vous allez poursuivre l’édition de la page de visite pour ajouter une interface de carte interactive permettant aux clients de localiser le café le plus proche.

Le panneau Espacement permet de profiter de la marge de CSS et des propriétés de gouttière. La marge efface une zone autour du contenu (à l’intérieur de la bordure) d’un élément. La marge est affectée par la couleur d’arrière-plan de l’élément.

Les marges haute, droite, basse et gauche sont modifiables indépendamment à l’aide de propriétés distinctes. Vous pouvez également égaliser toutes les propriétés de marge en choisissant de les modifier uniformément.

1. Dans Adobe Muse, sélectionnez Fenêtre > Espacement pour afficher le panneau Espacement.

2. Spécifiez les valeurs pour les propriétés des marges Gauche, Droite, Haut et Bas. Pour entrer des valeurs différentes, désélectionnez le bouton .

3. Vous pouvez également choisir de spécifier les propriétés des gouttières horizontales et verticales.

Adobe Muse permet d’appliquer aux objets la transformation 2D. Vous pouvez positionner, redimensionner et faire pivoter des objets sur les axes X et Y.

L’option à bascule Largeur 100 % du panneau Transformation permet de placer des objets sur une largeur de 100 %. Vous pouvez également définir des objets extensibles qui s’étendent sur toute la largeur du navigateur et s’adaptent à l’écran de votre ordinateur.

Pour appliquer des transformations à un objet sélectionné, procédez comme suit :

1. Dans Adobe Muse, sélectionnez Fenêtre > Transformation.

2. L’objet étant sélectionné, appliquez l’une des transformations suivantes :
   • Position : saisissez des valeurs X et Y pour placer l’objet à l’emplacement de votre choix sur la page web.
   • Echelle : saisissez des valeurs de largeur et de hauteur pour l’objet. Vous pouvez également choisir de mettre l’objet à l’échelle avec une largeur et une hauteur uniformes en cliquant sur le bouton .
   • Rotation () : saisissez l’angle de rotation de l’objet.
   • Largeur 100 % () : vous pouvez définir l’objet sur une largeur de 100 % pour qu’il s’étende et s’adapte à la largeur du navigateur.