Comment créer un site Web réactif avec Adobe Muse

Par -




Après avoir fait votre conception web vous allez commencer à ajuster certains éléments de votre espace de travaille et à ajouter des points d'arrêt. Dans ce tutoriel vous allez apprendre à faire un site web réactif avec des points d'arrêt fixes. On va adapter tous les éléments du modèle pour chaque point d'arrêt. Vous pouvez voir le fonctionnement en réduisant votre navigateur. 


 Pour cela vous n'avez qu'à suivre toutes les étapes du tutoriel afin de créer un site responsive avec Adobe Muse. Vous avez la possibilité d'ajouter les mêmes points d'arrêt que dans le tutoriel ou l'adapter avec votre projet et ajouter autant de points d'arrêt que nécessaire. L'élément qui peut être intéressant à ajouter est un menu mobile. Vous avez soit la possibilité d'utiliser des widgets dans la bibliothèque des widgets intégrée à Muse ou acheter des widgets dans des sites tiers comme celui ci. 

Vous pouvez télécharger le modèle utilisé dans ce tutoriel c'est à dire le modèle Hexal ici. Vous pouvez l'avoir gratuitement soit pour une utilisation personnelle ou commerciale.
Pour ce qui est du meni élégant vous pouvez l'avoir ici

Et enfin voici la vidéo tutoriel :







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