L'une des techniques les plus «chaudes» sur le Web aujourd'hui est le défilement parallaxe. Nous sommes tous allés sur les sites où vous faites pivoter la molette de la souris et où le contenu de la page se déplace de haut en bas ou à travers la page lorsque vous faites pivoter la molette de la souris.
Pour les débutants en conception Web et en conception graphique, cette technique peut être extrêmement difficile à atteindre en raison de la quantité de CSS requise.
Si cela vous décrit, il y a un certain nombre d'applications qui ne peuvent que plaire aux graphistes. Ils utilisent essentiellement une approche de mise en page familière pour les pages Web, ce qui signifie qu'il n'y a pas beaucoup, le cas échéant, de codage. Adobe Muse est une application qui a pris de l'ampleur.
Le travail effectué par les graphistes professionnels utilisant Muse est assez étonnant et vous pouvez voir un échantillon de ce que vous pouvez faire en visitant Muse. Site du jour . Bien que les pros du web aient tendance à considérer Muse comme une sorte de «jouet à remonter», les concepteurs l'utilisent également pour créer des prototypes Web et mobiles qui seront finalement transmis aux développeurs de leur équipe.
Une technique incroyablement facile à réaliser avec Muse est le défilement de la parallaxe et, si vous souhaitez voir la version terminée de l’exercice. Lorsque vous faites rouler la molette de la souris, le texte semble se déplacer vers le haut ou le bas de la page et les images changent.
Commençons.
01 sur 07Créer une page Web
Lorsque vous lancez Muse, cliquez sur le bouton Nouveau site lien. Cela ouvrira la Nouvelles propriétés du site. Ce projet sera conçu pour une application de bureau et vous pourrez le sélectionner dans le Mise en page initiale menu déroulant. Vous pouvez également définir les valeurs du nombre de colonnes, de la largeur de la gouttière, des marges et du remplissage. Dans ce cas, cela ne nous préoccupait pas vraiment et nous avons simplement cliqué D'accord.
Formater la page
Lorsque vous définissez les propriétés du site et cliquez sur D'accord vous avez été emmené à ce qu'on appelle Plan vue. Il y a un Accueil page en haut et un La page principale au bas de la fenêtre. Nous n'avions besoin que d'une page. Pour accéder à la vue Conception, nous avons double-cliqué sur la page d'accueil qui a ouvert l'interface.
À gauche, quelques outils de base et à droite, divers panneaux permettant de manipuler le contenu de la page. En haut, vous trouverez les propriétés pouvant être appliquées à la page ou à tout élément sélectionné sur la page. Dans ce cas, nous voulions avoir un fond noir. Pour ce faire, cliquez sur le bouton Remplissage du navigateur puce de couleur et a choisi le noir dans le sélecteur de couleurs.
03 de 07Ajouter du texte à la page
L'étape suivante consiste à ajouter du texte à la page. Nous avons choisi le Outil texte et a dessiné une zone de texte. Nous avons saisi le mot «Bienvenue» et, dans les propriétés, définissez le texte sur Arial, 120 pixels en blanc. Centre aligné.
Nous sommes ensuite passés à l’outil de sélection, cliqué sur la zone de texte et défini sa Position Y à 168 pixels du haut. La zone de texte étant toujours sélectionnée, nous avons ouvert le Aligner le panneau et aligné la zone de texte au centre.
Enfin, avec la zone de texte sélectionnée, nous avons maintenu la Option / Alt et Décalage clés et fait quatre copies de la zone de texte. Nous avons changé le texte et la position Y de chaque copie en:
- À, 871
- Graphiques, 1621
- Logiciels, 2371
Vous remarquerez que lorsque vous définissez l'emplacement de chaque zone de texte, la page est redimensionnée pour s'adapter à l'emplacement du texte.
04 de 07Ajouter une image
L'étape suivante consiste à insérer des images entre les blocs de texte.
La première étape consiste à sélectionner le Outil Rectangle et dessinez notre boîte qui s’étend d’un côté à l’autre de la page. Avec le rectangle sélectionné, nous définissons sa hauteur à 250 pixels et son Position Y à 425 pixels. Il est prévu de toujours les réduire ou les réduire à la largeur de la page afin de les adapter à la fenêtre de visualisation du navigateur de l'utilisateur. Pour ce faire, nous avons cliqué sur le bouton 100% largeur bouton dans les propriétés. Cela grise la valeur X et garantit que l'image correspond toujours à 100% de la largeur de la fenêtre d'affichage dans un navigateur.
05 de 07Ajouter des images à des espaces réservés pour images
Avec le rectangle sélectionné, nous avons cliqué sur le bouton Remplir le lien - pas la puce de couleur - et cliqué sur le Iencre de mage ajouter une image au rectangle. dans le Raccord région, nous avons sélectionné Échelle pour s'adapter et cliqué sur le poignée centrale dans le Position zone pour s’assurer que l’image est redimensionnée à partir du centre de l’image.
Ensuite, nous avons utilisé le Option / Alt-Maj-glisser Pour créer une copie de l’image entre les deux premiers blocs de texte, ouvrez le panneau Remplissage et permutez l’image. Nous l'avons également fait pour les deux images restantes.
Avec les images en place, il est temps d'ajouter le mouvement.
06 de 07Ajouter le défilement de la parallaxe
Il existe différentes manières d’ajouter le défilement de la parallaxe dans Adobe Muse. Nous allons vous montrer un moyen simple de le faire.
Avec le panneau Remplissage ouvert, cliquez sur le bouton Onglet de défilement et, quand il s'ouvre, cliquez sur le bouton Motion case à cocher.
Vous verrez des valeurs pour Initiale et Motion finale. Celles-ci déterminent la vitesse à laquelle l'image se déplace par rapport à la molette de défilement. Par exemple, une valeur de 1,5 déplace l'image 1,5 fois plus vite que la roue. Nous avons utilisé une valeur de 0 pour verrouiller les images en place.
le Flèches horizontales et verticales déterminer la direction de la motion.Si la valeur est 0, les images ne bougeront pas, quelle que soit la flèche sur laquelle vous cliquez.
La valeur moyenne – Position clé - indique le point où les images commencent à bouger. La ligne au-dessus de l'image commence, pour cette image, à 325 pixels du haut de la page. Lorsque le défilement atteint cette valeur, l'image commence à se déplacer. Vous pouvez modifier cette valeur en la modifiant dans la boîte de dialogue ou en cliquant et en faisant glisser le point situé en haut de la ligne vers le haut ou le bas.
Répétez cette opération pour les autres images de la page.
07 de 07Test du navigateur
À ce stade, nous étions finis. La première chose que nous avons faite, pour des raisons évidentes, a été de sélectionner Fichier> Enregistrer le site. Pour tester le navigateur, nous avons simplement sélectionné Fichier> Aperçu dans le navigateur. Cela a ouvert le navigateur par défaut de notre ordinateur et, lorsque la page a été ouverte, nous avons commencé à faire défiler.
