Dans le panneau Outils, cliquez sur l’outil Cadre rectangulaire ou l’outil Cadre ellipse.
Apprenez à organiser, gérer et transformer différents objets dans Adobe Muse. Lisez la suite pour savoir comment optimiser des images pour 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.
Dans le panneau Outils, cliquez sur l’outil Cadre rectangulaire ou l’outil Cadre ellipse.
Cliquez sur l’outil Cadre d’image puis faites glisser la souris pour le positionner dans le projet.
Vous pouvez continuer à cliquer et définir plusieurs cadres d’image dans le projet. Vous pouvez également redimensionner et déplacer des cadres d’image en fonction de vos besoins de conception.
Vous pouvez remplir le cadre de couleur ou y placer une image. Pour placer une image, déplacez une image sur le cadre. L’image se redimensionne pour s’insérer dans le cadre.
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 :
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.
Dans le panneau Outils, sélectionnez l’outil Rectangle ou Ellipse.
Déplacez la forme rectangulaire ou elliptique pour la positionner dans le projet Adobe Muse.
Vous pouvez remplir les formes de graphiques, de texte ou de couleur.
Pour définir les propriétés d’ajustement d’objet, choisissez le rectangle ou l’ellipse, puis cliquez sur Objet > Ajustement.
Vous pouvez choisir l’une des options d’ajustement suivantes :
Choisissez Fichier > Importer un bouton Photoshop. Dans la boîte de dialogue d’importation de Photoshop qui s’affiche, localisez le fichier PSD. Cliquez sur Sélectionner (Mac) ou Ouvrir (Windows) pour choisir le fichier.
La boîte de dialogue Options d’importation Photoshop s’affiche. Prenez un moment pour examiner comment les paramètres sont appliqués. Vous pouvez utiliser les menus pour spécifier le calque du fichier Photoshop qui sera affiché comme l’état normal du bouton (l’apparence du bouton au chargement de la page), l’état Survol (l’apparence du bouton lorsque les visiteurs font passer leur curseur au-dessus de celui-ci), et l’état Clic (l’apparence du bouton lorsque les visiteurs cliquent dessus). Les trois menus d’état affichent les noms des calques de Photoshop, et les vignettes affichées illustrent l’apparence que chaque calque sélectionné prendra.
Dans cet exemple, les calques de Photoshop ont déjà été correctement classés pour afficher les états du bouton. Il est inutile de modifier les paramètres de menu. Cliquez sur OK pour accepter les états tels qu’ils sont organisés par défaut.
Cliquez une fois dans la zone supérieure droite de l’en-tête de la page Gabarit A pour importer le fichier Photoshop à sa taille d’origine.
Cliquez sur le lien d’aperçu pour utiliser l’émulateur de rendu basé sur WebKit. Vérifiez l’affichage de la page Gabarit A. Lorsque vous affichez la page pour la première fois, l’état normal du bouton apparaît. Si vous placez le curseur sur le bouton, l’aspect change légèrement (la couleur de l’écoulement marron devient plus claire), et si vous cliquez sur le bouton, le texte blanc devient marron clair tant que vous appuyez sur le bouton de la souris et que vous le maintenez enfoncé.
Cliquez sur Conception pour revenir à l’édition de la page Gabarit A en mode Conception.
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 :
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 :
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.
Katie’s Café
Noe Valley
123 Elizabeth Street
LUN-VEN 6:00-22:00
SAM-DIM 7:00-22:00
Katie’s Café
Laurel Heights
800 Spruce Street
LUN-VEN 5:00-12:00
SAM-DIM 9:00-13:00
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.
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.
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.
Dans la vue Plan, double-cliquez sur la vignette MasterFlash pour l’ouvrir en vue Conception. Notez que puisque que vous avez précédemment dupliqué le gabarit A-Master, l’image statique du logo est toujours présente. Le recours à l’image statique est utile pour que l’emplacement gardé corresponde au rectangle d’animation. Veillez cependant à bien supprimer cette image statique du logo une fois que vous aurez incorporé l’élément multimédia.
Choisissez Fichier > Importer. Dans la boîte de dialogue d’importation, naviguez jusqu’au dossier Kevins_Koffee_Kart et sélectionnez le fichier nommé logo.swf.
Placez ce fichier SWF dans le coin supérieur gauche en prenant soin de faire correspondre l’emplacement du fichier image existant.
Une fois que vous avez aligné avec le logo statique antérieur la nouvelle fenêtre SWF que vous venez d’importer, supprimez le logo statique en le sélectionnant et en appuyant sur la touche Suppr.
Pour voir comment le site entier s’affiche une fois les nouvelles modifications apportées à la page d’accueil, choisissez Fichier > Prévisualiser le site dans le navigateur pour tester l’affichage du logo sur différentes pages. Sans publier le site, vous pouvez travailler localement sur votre ordinateur, puis prévisualiser le site dans un navigateur et cliquer sur toutes les pages dans la navigation du site. Vous remarquerez que l’animation (fichier SWF) s’affiche une fois, puis s’arrête sur la page d’accueil. Si vous cliquez sur d’autres pages, seul le logo statique s’affiche.
Si vous choisissez la commande Fichier > Prévisualiser la page dans le navigateur, la nouvelle fenêtre du navigateur se charge plus rapidement pour afficher la page d’accueil, mais le navigateur ne prévisualise que la page active (la page d’accueil). Choisissez cette option si vous souhaitez vérifier une seule page du site et non le site web entier.
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.
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 :
Accéder à votre compte