Share
Dans ce didacticiel, je vais vous montrer comment créer un bouton dans Photoshop et l'utiliser, avec tous ses différents états, dans un projet Adobe Muse. Une fois que nous avons conçu et importé nos ressources Photoshop dans Adobe Muse, nous verrons ce qui se passera si nous souhaitons mettre à jour le fichier PSD ultérieurement..
Téléchargez la vidéo ou abonnez-vous à Tuts + Web Design sur Youtube.
Bienvenue dans ce tutoriel sur Adobe Muse. La vidéo ci-dessus montre comment créer un bouton dans Photoshop et le placer dans Adobe Muse..
Un bouton dans Adobe Muse a quatre états. Donc, si vous placez un rectangle ici dans Adobe Muse, vous savez que par défaut, vous avez quatre états
Pour créer un bouton, dessinez un rectangle puis remplissez-le avec une couleur ou un dégradé, ou ajoutez une image en arrière-plan.
C’est génial, mais vous voudrez parfois tout concevoir dans Adobe Photoshop et pouvoir importer les états à partir de là..
Ouvrez Photoshop et créez une forme vectorielle. un bouton vert normal. Portez-la comme vous le souhaitez, avec des coins arrondis, une bordure, etc. Je veux créer quatre états, je vais donc commencer par nommer cette première couche Bouton normal.
Ensuite, je dupliquerai le calque. Ce calque sera mon état survolé..
Dans ce cas, nous allons simplement changer la couleur pour la rendre plus claire..
Répétez le processus pour les quatre états dont vous avez besoin, puis enregistrez le fichier sous ButtonGreen.psd..
Maintenant, dans Adobe Muse, si je veux utiliser ce dessin sans exporter les calques dans des fichiers PNG, je peux le faire directement. Fichier> Placer le bouton Photoshop, Sélectionnez ButtonGreen.psd, puis, il analysera tous les calques disponibles dans le fichier Photoshop..
Attribuez chaque couche à un état de bouton, puis placez-la sur la scène et redimensionnez-la si nécessaire.
Ensuite, en utilisant l’outil Texte, nous pouvons ajouter une étiquette (par exemple, SUBSCRIBE)..
Si vous le visualisez maintenant dans le navigateur, vous verrez que nous avons quatre états. Lorsque nous survolons, et lorsque nous cliquons, cela changera l'état du bouton.
Maintenant, que se passe-t-il si je modifie ou modifie ma conception dans Photoshop?
Par exemple, dans Photoshop, changeons la couleur de l'état normal. Nous allons en faire un bouton bleu, puis enregistrer le fichier PSD. Si nous revenons maintenant à Adobe Muse, il n'y a aucun changement visible, mais si nous ouvrons le * Panneau des actifs *, un message d'avertissement apparaît.
Cela indiquera que l'actif a changé depuis l'importation des données. Vous pouvez donc cliquer avec le bouton droit de la souris et simplement indiquer que vous souhaitez mettre à jour l'actif..
Cela montre qu'il est plus facile que jamais de travailler avec des ressources entre Adobe Photoshop et Adobe Muse. J'espère que vous avez apprécié ce petit conseil!
Pour plus de détails sur Adobe Muse, consultez mon cours gratuit. Conception et publication de sites Web avec Adobe Muse.
Accentsconagua