[Adobe Illustrator/Muse] Comment utiliser le format SVG

Par -


Pourquoi enregistrer vos logos ou icônes avec le format SVG (Supports pour graphiques vectoriels évolutifs. ) à la place du PNG ou JPG? Il se trouve que ce format est très léger et indépendant de la résolution, c'est à dire que vos icônes ou logos peuvent être mis à n'importe quelle dimension, cela n'affectera pas le temps de chargement ou la résolution de celui-ci dans votre site. 
Ce tutoriel va vous apprendre  comment enregistrer vos graphiques au format SVG à l'aide d'Adobe Illustrator, et comment l'utiliser dans Adobe Muse. 
Pour cela nous allons utiliser ce pack "Round Flat Icons" de Freepik.com, biensûr à vous de choisir les icônes que vous voulez prendre. 
ENREGISTRER LES GRAPHIQUES EN SVG

  1.   Dans Adobe Illustrator CC 2017, sélectionnez l'icône entière (vous pouvez les regrouper pour gagner du temps) et faites-la glisser vers la fenêtre d'exportation d'actifs.
  2.   Dans les options format, choisissez SVG. Cliquez sur Exporter et choisissez l'emplacement.



Pour les anciennes versions d'Adobe illustrator:

Sélectionnez l'icône entière -> Cliquez avec le bouton droit de la souris -> Exporter la sélection

Une fenêtre s'ouvrira. Choisissez l'emplacement et modifiez le format pour SVG. Cliquez sur Exporter et c'est fait.



UTILISEZ SVG DANS ADOBE MUSE

     Faites glisser l'élément SVG dans Muse. Vous pouvez faire glisser plus d'un élément à la fois. Vous remarquerez que la flèche de la souris comporte un nombre lorsque vous faites glisser plus d'un élément.




2. Cliquez sur la toile blanche pour placer le SVG, puis faites glisser pour redimensionner l'élément SVG.
L'un des avantages de l'utilisation de ce format dans Adobe Muse est que vous pouvez le redimensionner.





Il s'agit d'un tutoriel de base utilisant des icônes svg. Vous pouvez enregistrer des graphiques dans svg et les utiliser comme arrière-plans ou diaporamas. 

Voici le tutoriel pour plus d'information :


Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

5 Conseils utiles pour vous améliorer sur Adobe Muse

Par -
Image
Dans cette publication, vous trouverez des informations très utiles pour une meilleure expérience de conception avec Adobe Muse . Soit vous êtes un débutant, soit vous utilisez Muse depuis un moment, vous souhaitez concevoir rapidement et résoudre des problèmes rapidement. Voici ce que nous considérons comme des conseils utiles pour les utilisateurs Adobe Muse: Dans ce post vous trouverez quelques informations utiles qui vous permettront de mieux vous familiariser avec Adobe Muse et de mieux savoir l'utiliser, et ainsi résoudre rapidement vos problèmes et donc concevoir rapidement sans bâtons dans les roues. Voici les conseils considérés comme utiles pour les utilisateurs Adobe Muse:  Liens d'ancrage Qu'est ce qu'un lien d'ancrage ? C'est un lien sur un page qui vous dirige vers un endroit spécifique de la page.  Vous devez toujours placer vos liens d'ancrage à un endroit spécifique c'est à dire la zone grise. Si vous les placez sur
Lire la suite

Comment convertir les polices en polices web et les utiliser avec des widgets

Par -
Image
 Il faut savoir que Adobe Muse exporte des polices d'image qui n'ont aucune ressource. Mais il existe des alternatives comme les widgets et notamment Animated Typing Widget   et qui vous permet d'utiliser n'importe quelle police web même celles de TypeKit.  Au moment du téléchargement d'une police vous ne pouvez avoir qu'un format TTF , et c'est là le problème car dans Adobe Muse , vous avez besoin de 3 formats soit SVG ; WOFF et EOT . Il y'a plusieurs convertisseurs de polices en ligne comme transfonter.org que nous allons utiliser pour ce tutoriel.  1. Choisissez votre police et téléchargez là. Pour ce tutoriel le nom de la police est Ginebra. Dans format, sélectionnez les formats EOT, WOFF, WOFF2 , et SVG Convertissez votre police et téléchargez-la. Vous allez avoir un dossier avec tous les formats sélectionnés. 2. Maintenant dans Adobe Muse allez dans FICHIER =>  Ajoutez / supprimez des polices Web , à ce moment là u
Lire la suite

[Adobe Muse] Menu hamburger avec Lightbox et effets de textes

Par -
Image
Personnalisez votre propre menu hamburger  avec l'effet Lightbox grâce aux widgets intégrés de Adobe Muse. Pour ce tutoriel le seul widget qui va nous être utile est " Lightbox Display " que vous trouverez dans votre bibliothèque Widget, dans le dossier Composition. L'outil de texte sera aussi utiliser pour formater le texte dans différents états  (Normal, Passerelle, Souris vers le bas et Actif). Il sera différent en fonction du type de texte que vous voulais utiliser. Si c'est une police non standard Muse va l'exporter en tant qu'image. Si vous voulez avoir le même effet que dans ce tutoriel, je vous recommande d'utiliser une police standard ou de convertir votre police en une police web. Pour savoir comment faire regardez ici   1. Ouvrez votre bibliothèque de widgets et faite glisser le widget Lightbox display.  Supprimez tous les déclencheurs sauf un. Supprimez tous les autres éléments, barres latérales, textes... Vous avez juste beso
Lire la suite