Share
Dans ce didacticiel, je vais rapidement vous montrer comment créer un site Web à l'aide d'Adobe Muse CC. Entre autres choses, nous allons:
Téléchargez la vidéo ou abonnez-vous à Tuts + Web Design sur YouTube
Salut! Je m'appelle Michael Chaize. Je suis un évangéliste de Creative Cloud pour Adobe. Dans ce tutoriel, je vais vous montrer comment créer rapidement un site Web avec Adobe Muse CC..
La première fois que vous lancez Adobe Muse, nous obtenons cet écran de démarrage et vous pouvez dire que je veux créer un nouveau site.
Et puis vous définissez les dimensions de vos pages. Si vous souhaitez, en tant que disposition initiale, cibler les utilisateurs du bureau, de la tablette ou du téléphone et définir les marges de la page. Je vais donc cliquer sur D'accord, et je vais découvrir l'espace de travail du plan avec toutes mes pages.
Pour le moment, je n'ai qu'une page d'accueil, mais ici, je peux dire que j'aurai aussi besoin d'une page de produits et peut-être d'une page sur. Et dans les produits, j'obtiendrai le produit A, et au même niveau le produit B. Vous pouvez ainsi très rapidement créer la structure de votre site Web..
Vous avez également des pages maîtres. Ainsi, chaque fois que vous ajoutez un élément de conception dans l'en-tête ou le pied de page de la page maître, ce sera sur toutes vos pages. Pour mon en-tête, je vais simplement créer un rectangle en arrière-plan. Peut-être le remplir d'une couleur sombre.
Et je veux ajouter un logo. Donc, ceci est une image, vous pouvez directement glisser et déposer des images depuis votre disque. Ok, alors laissez-moi glisser et déposer un fichier PNG et le placer. Vous voyez que les guides intelligents alignent automatiquement vos éléments sur les autres éléments de la scène..
Maintenant, si je reviens au plan général de mon site Web, je vois que l'en-tête apparaît sur toutes les pages, car il fait partie de la page maître. Ok, maintenant je veux peut-être ajouter un menu de navigation pour naviguer à travers les pages.
C'est donc ici que vous utiliserez le widgets bibliothèque. Ceci est une bibliothèque de widgets interactifs. Vous obtenez des boutons, des composants tels que l'affichage de la boîte à lumière, des formulaires, des menus, des panneaux, des jeux de lumière. Dans ce cas, nous allons utiliser un menu horizontal et peut-être le placer dans l'en-tête..
Il obtient automatiquement la structure définie dans le plan. J'ai donc déjà trois pages dans le menu de navigation. Accueil, Des produits, et Sur. En fait, il s’agit d’un widget dynamique. Par conséquent, si j’ajoute une autre page que je nommerai Contact et si je reviens à ma page maître, je dispose déjà du bouton de contact..
Si vous cliquez sur l'icône bleue, vous obtiendrez les paramètres pour les widgets. Peut-être souhaitez-vous également afficher les pages de sous-niveau. Donc je dirais, toutes les pages et puis vous pouvez coiffer.
Pour sélectionner une police de jeu Web, vous aurez les polices classiques ici, mais vous pouvez également décider d'ajouter des polices Web provenant de kits de types. Il parcourra automatiquement le catalogue des polices gratuites disponibles sur typekit. Et vous pouvez par exemple dire que vous voulez utiliser le acteur police, vous cliquez sur OK, et il sera ajouté à la liste des polices.
Et vous pouvez le sélectionner directement ici. Voici comment vous créez votre menu, puis si vous souhaitez ajouter un paragraphe de texte. Cela ne devrait pas être sur la page maître mais plutôt sur la page d'accueil. Il suffit de définir un bloc et de dire Bienvenue sur mon site web.
Encore une fois, je vais simplement sélectionner le acteur police, peut-être augmenter la taille du texte, et on y va.
Ensuite, à droite, je vais ajouter un autre widget interactif. Peut-être un diaporama. Donc, vous avez différents types de diaporamas, celui de base, fondre en plein écran, la boîte à lumière.
Jouons avec le diaporama de base qui affichera une image par défaut ici. Mais chaque fois que vous ajoutez un widget, vous aurez cette icône bleue, et c’est là que vous avez les paramètres et vous pouvez dire Je veux ajouter mes propres images.
Il redimensionnera automatiquement les images. Et puis vous pouvez définir la légende, vous pouvez naviguer pour vérifier toutes les images et vous avez également différentes transitions. Donc, par défaut, les fondus sont fondus, mais vous pouvez également choisir d’avoir les diapositives horizontales..
Donc, ceci est ma page d'accueil, peut-être que nous pouvons ajouter quelque chose sur la page À propos, bien sûr, vous pouvez copier des éléments collés d'une page à une autre. Donc, si je choisis d'afficher toutes mes pages avec la disposition des tuiles, je peux copier coller certains éléments.
Et vous pouvez également ajouter une animation, alors laissez-moi ajouter une image. Et vous avez ce mouvement de défilement. Il s’agit donc d’un panneau très puissant dans lequel vous pouvez dire que vous souhaitez ajouter l’effet d’analyse de parallaxe. Donc, si je vérifie Motion ici, j'ai ici la position clé, ce qui signifie que lorsque vous faites défiler la page vers le bas et atteignez cette position clé auparavant, je souhaite obtenir un comportement spécifique..
Alors peut-être que quelque chose vient de la droite à cette vitesse. Et après ça, je vais, disons que je ne veux pas que ça bouge, alors je veux que ça bouge à la même vitesse que la page. Donc, juste un. Vous pouvez également jouer avec l'opacité pour ajouter des positions clés si vous voulez que votre objet apparaisse puis disparaisse..
Je vais ajouter un autre bloc de texte. Ajoutez le bouton. Juste pour augmenter la dimension de ma page pour montrer les effets. Donc, si je veux prévisualiser cette page dans le navigateur, je peux choisir de sauvegarder le fichier, Aperçu de la page dans le navigateur ou directement en cliquant sur le nouveau bouton. Aperçu bouton que nous avons lancé directement dans Adobe Muse et, alors que je fais défiler l'écran vers le bas, je vois mon bâtiment.
Cela apparaît à droite. Ça s'arrête, puis ça disparaît. C’est donc exactement l’effet que je voulais définir dans ma conception grâce au panneau Effets de défilement..
Maintenant, si je veux partager ce site avec mon client pour obtenir des commentaires, vous avez le Publier bouton.
Vous devez juste dire Publier, puis vous tapez un nom. Je clique sur D'accord, et il utilisera Adobe Business Catalyst, une plate-forme d'hébergement disponible pour tous les membres de Creative Cloud, et publiera votre site Web sur cette URL afin que vous puissiez le partager avec votre client..
C'est ici. J'ai ma première page. Produit A, produit B. Si je clique sur la page A propos de, et si je fais défiler l'écran vers le bas, l'effet est directement affiché dans mon navigateur. Et je peux copier-coller cette URL et la partager avec mes clients ou mes collègues.
Adobe Muse CC cible les concepteurs qui souhaitent concevoir des pages Web sans codage..
Tout le monde peut l'utiliser et devenir très créatif. Vous pouvez visiter muse.adobe.com pour télécharger et essayer Adobe Muse. Je vous encourage également à consulter la section Site du jour pour consulter les sites Web magnifiques publiés avec Adobe Muse. Pour votre information, l'année dernière en 2013, plus de 500 000 sites Web ont été créés et publiés avec Adobe Muse..
En outre, si vous souhaitez en savoir plus sur Adobe Muse, restez à l'affût sur tutsplus.com et consultez la catégorie Adobe Muse pour obtenir de nouveaux didacticiels et vidéos et apprendre à créer des sites Web incroyables..
Création de Črtomir Just
Accentsconagua