Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de Muse CC 2015

Ajouter des images

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Ajoutez des images à votre site et examinez les différents types d'images que vous pouvez insérer sur vos pages Muse.

Transcription

Il me reste quelques images à placer pour terminer ce gabarit. Nous allons donc voir ensemble comment on peut placer des images sur un document Muse. Alors vous allez voir que c'est pas très compliqué, il me suffit de me rendre dans le menu Fichier, et de prendre la commande Importer Commande D, le raccourci clavier, si vous êtes sur Mac ou Contrôle D si vous êtes sur Windows. Alors je vais activer cette commande d'importation, et puis il y a cette boite qui s'ouvre dans laquelle je vais bien sûr devoir choisir le ou les fichiers que je désire importer. Alors avant de les importer, vous dire que cette commande d'importation est vraiment très flexible et très pratique puisqu'elle me permet d'importer regardez non seulement des images, mais aussi plein d'autre type de choses, des supports, des images Photoshop, des widgets HTML que l'on aurait développé à l'extérieur de Muse, du texte, des animations, des images vectorielles, bref, il y a plein, plein de choses que je peux importer comme ça dans mon site, grâce à cette unique commande d'importation. Alors le fichier qui m'intéresse dans ce cas-ci, et bien c'est un fichier qui s'appelle ici LogoEcole.ai alors l’extension c'est .ai donc c'est un fichier au format Adobe Illustrator, attention si vous utilisez une ancienne version de Muse, la capacité d'importer des fichiers au format Adobe Illustrator directement ici dans Muse est une nouveauté de Muse 2005.2 donc si vous utilisez une ancienne version, ne vous étonnez pas de voir que ces fichiers ne peuvent pas être importés de cette manière. Alors je vais ouvrir ici ce fichier vous constatez c'est un peu comme dans In Design, que le curseur ici change, et l'image est chargée dans ce curseur il me suffit de placer mon curseur là où je veux insérer l'image donc là ici au coin des deux guides, et de cliquer pour procéder à l'insertion de cette image. Alors vous constatez que cette image est beaucoup trop grande donc je vais réduire sa taille, là attention, il y a une petite subtilité dans Muse, d'habitude dans les autres logiciels si vous voulez redimensionner une image sans changer les proportions entre la hauteur et la largeur de cette image et bien vous devez utiliser une poignée de coin et puis surtout pendant le redimensionnement vous devez enfoncer la touche Majuscule du clavier. Et bien ici dans muse, vous devez utiliser une poignée de coin également, mais vous ne devez pas utiliser la touche Majuscule du clavier, vous voyez que naturellement alors les proportions de votre image sont quand même respectées. Attention que si vous utilisez la touche Majuscule, et bien c'est à ce moment là que vous perdrez les proportions donc c'est l'inverse de ce que vous avez probablement l'habitude d'utiliser dans les autres logiciels, faites attention à cela. Alors l'image que je viens d'insérer ici, c'est une image d'Illustrator donc au format ai et bien quand je vais publier mon site, c'est à dire en toute fin de travail quand je vais demander à Muse d'exporter tout ça en HTML, CSS, Java Script, et bien cette image sera convertie au format svg. Le svg, cela signifie scalable vector graphic, donc un graphisme vectoriel, mais ce qui est surtout intéressant c'est le mot scalable, c'est à dire que je peux changer la taille de cette image sans compromettre sa qualité. Alors on va faire une petite expérience si vous le voulez bien, je vais prendre ici cette image, et je vais considérablement augmenter sa taille et regarder ici le C du mot chemin qui du coup est complètement pixelisé on a vraiment perdu sa qualité, je vais lâcher le bouton de ma souris, regardez Muse va tout simplement recalculer cette image pour sa nouvelle taille et vous voyez alors le C de chemin qui reprend toute sa qualité, et donc finalement cette image ne va perdre aucune qualité quelle que soit sa taille, et bien ça c'est la particularité d'une image au format svg, alors c'est particulièrement intéressant d'utiliser ce type d'image dans un site réactif, qui doit s'adapter à la taille de l'écran sur lequel il est lu. Alors autre façon d'insérer des images, autres petites subtilités, je vais retourner dans Fichier, Importer, et cette fois-ci je vais importer plusieurs images en une fois. Alors je vais prendre l'image Facebook ici qui est également un fichier au format Adobe Illustrator, je vais utiliser sur Mac la touche Commande ou sur Windows la touche Contrôle pour ajouter deux autres fichiers à ma sélection, vous voyez que je sélectionne ici Facebook, Instagram et Twitter, j'ouvre ces 3 images en une fois, et là vous voyez que mon curseur est chargé avec l'image Facebook et puis surtout vous constatez qu'il y a un petit 3 entre parenthèses et bien ce petit 3, signifie que j'ai 3 images qui sont pour le moment chargées à l'intérieur de mon curseur, je peux d'ailleurs utiliser les touches du clavier, les flèches du clavier pour circuler entre ces 3 images, je vais donc choisir laquelle des 3 je vais intégrer en premier dans mon document. Donc ici, c'est l'image Facebook qui apparaît, ça veut dire que si je clique, c'est cette image là qui sera intégré au document, à l’endroit où je clique donc allons y, je clique ici pour intégrer l'image Facebook, voilà. Du coup c'est l'image Instagram qui se charge qui était la 2nde image dans mon curseur, et vous voyez que c'est plus un 3 que j'ai entre parenthèses mais un 2, ça signifie que j'ai maintenant que deux images qui sont chargées dans mon curseur, avec les flèches de mon clavier, donc c'est l'image Instagram et l'image Twitter qui sont ici, je vais cliquer pour intégrer l'image Instagram là voila, et voici le logo de Twitter. Voila donc j'ai inséré 4 images dans ce gabarit au format Adobe Illustrator donc 4 images qui seront converties au format svg quand je publierai ce site, 4 images dont la qualité ne dépend absolument pas de la résolution ou de la taille. Alors au niveau de ces 3 images pour les réseaux sociaux ici dans le fond dans mon pied de page, et bien plus tard dans le cours nous verrons comment on peut aligner ces images et correctement les placer au pixel près les une par rapport aux autres, mais nous verrons ça plus tard dans cette formation.

L'essentiel de Muse CC 2015

Créez des sites web riches et dynamiques sans aucune compétence en programmation avec Muse. Gérez les plans et les calques, mettez en place une navigation entre vos pages, etc.

3h50 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :21 juil. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !