Share
Dans ce didacticiel, je vais vous montrer comment utiliser les polices Web dans vos projets Adobe Muse. Nous couvrirons les options de polices proposées dans le catalogue de polices Web, y compris les polices Web Google et les polices hébergées par vos soins..
Nous verrons également comment Adobe Muse gère le type ne peut pas être rendu avec les polices Web, alors commençons!
Téléchargez la vidéo ou abonnez-vous à Tuts + Web Design sur Youtube.
Bonjour, et bon retour sur Tuts + pour un nouveau tutoriel sur Adobe Muse. Je suis Michael Chaize et je vais vous montrer comment utiliser les polices Web dans vos projets. Ainsi, avec Adobe Muse, vous pouvez sélectionner un bloc de texte et, à l'aide de l'outil Texte, vous pouvez bien sûr définir la police de caractères que vous souhaitez utiliser dans votre conception..
Vous pouvez utiliser les polices Web Safe, qui sont une liste des polices installées par défaut dans tous les navigateurs, mais il s’agit de polices définies par Microsoft en 1996. Vous voudrez peut-être ajouter un peu de plaisir et de créativité à votre conception en utilisant Web. les polices. Ainsi, si vous dites que vous souhaitez ajouter des polices Web, vous pouvez accéder au catalogue de polices Web Adobe Edge..
Il s’agit donc d’un catalogue de polices Web gratuites, qui comprend toutes les polices Web de Google et qui est hébergé par Adobe. Donc, vous pouvez dire, par exemple, que vous voulez utiliser Aladdin, alors vous venez de le vérifier, vous appuyez sur OK, et il va ajouter Aladdin à votre liste de polices.
Maintenant, vous pouvez revenir en arrière et dire que vous voulez utiliser Aladdin. Ainsi, lorsque vous publiez votre page et que vous la vérifiez dans le navigateur, vous pouvez voir que je peux sélectionner le texte. C'est du vrai texte sur le web.
Pourquoi je te dis ça? Parce que si vous voulez utiliser une famille de polices uniquement installée sur votre ordinateur, voici ce qui va arriver. Alors, je sélectionne mon texte et je navigue dans mes polices sur mon ordinateur. Et disons que je veux utiliser Mistral. Vous verrez une nouvelle icône apparaître sur votre écran.
Cela signifie que cette police est installée sur l'ordinateur, ce qui est bien. Mais cela ne signifie pas que vous pouvez l’utiliser sur le Web, ce n’est pas une police Web et vous n’avez peut-être pas de licence pour l’utiliser sur le Web. C'est pourquoi Adobe Muse, lors de la publication de votre page, la convertira en HTML. Il prendra le texte et le convertira en une image. Alors maintenant, je ne peux pas sélectionner le texte, d'accord. C'est une image. Et vous voyez, ce n’est pas clair et, pour, l’optimisation des moteurs de recherche, ce n’est pas bon. Parce que le robot Google ne pourra pas analyser le contenu de ce texte.
Donc, pour plusieurs raisons, ce n'est pas quelque chose que vous voulez faire. Peut-être que cela peut être utile parfois pour un titre. D'accord, vous voulez conserver l'aspect de la police. C'est très bien. Mais il y a tellement de polices Web disponibles sur le Web. Je vais donc vous montrer comment utiliser n'importe quel type de police Web avec une licence appropriée pour le Web..
Ainsi, si vous retournez au menu des polices Web, vous pouvez accéder au catalogue des polices Web Edge. Il y a plus de 500 polices. Je veux dire, c'est beaucoup.
Ou vous pouvez utiliser des polices Web auto-hébergées. Adobe Muse a besoin des fichiers WOFF, EOT ou SVG, qui sont des standards ouverts, permettant de décrire les polices sur le Web pour un navigateur Web. Alors laissez-moi vous montrer ce que vous pouvez faire. Je vais simplement choisir un site Web qui répertorie les polices gratuites à usage commercial, à savoir Font Squirrel.
Ce que j'aime sur Font Squirrel, c'est que vous pouvez facilement filtrer le contenu du catalogue et dire que je veux une police que je puisse installer et utiliser sur mon bureau, mais aussi sur mon site Web..
Donc, je vais vérifier le filtre de police Web ici. Et puis vous pouvez bien sûr choisir une catégorie, une classification. Donc, j'ai besoin de la police Slab Serif et ça a l'air sympa, alors je vais télécharger le fichier.
J'ai donc Gras, Gras-italique, Italique et Régulier, je vais donc installer Régulier sur mon bureau. Je double simplement et installe la police. Maintenant, je peux l’utiliser sur mon site Adobe Muse, mais comme vous pouvez le deviner, il se comportera comme Mistral, donc comme une police système..
Donc, je retourne et sélectionnez Amer. D'accord, je l'ai dans Muse mais cela sera converti en image et ce n'est pas ce que je veux. Je souhaite utiliser Bitter comme police Web. Encore une fois, le problème ici est que, lorsque vous revenez ici, Ajouter des polices Web.
Il attend des fichiers WOFF ou EOT. Donc, sur Font Squirrel, il existe un service gratuit appelé Web Font Generator, que vous pouvez utiliser.
Donc, je vais ajouter les polices. Il va télécharger la police, puis je clique sur Téléchargez votre kit. Et il va créer un nouveau fichier zip pour moi, qui cette fois contiendra des polices web.
D'accord. Donc, ceci est le nouveau dossier, et maintenant j'ai un fichier EOT, SVG, WOFF. Je peux donc l'utiliser dans Adobe Muse. Donc, si nous revenons dans Adobe Muse, je peux maintenant parcourir mon ordinateur et sélectionner ce nouveau dossier contenant les fichiers WOFF, EOT et SVG..
Mais encore une fois, je coche la case, juste pour confirmer que je possède une licence appropriée, je peux l’utiliser sur le Web. Et Adobe Muse fera automatiquement la correspondance avec la police Bitter installée sur mon système. D'accord. C’est donc très important pour Muse, car dans l’application de bureau, je vais utiliser la police système et, une fois sur le Web, utiliser ces polices..
Je publie la page. Nous remarquons que ce texte est d'accord. Voici comment ajouter des polices Web directement dans Adobe Muse. Et nous savons tous que la typographie est essentielle dans la conception Web. Et il y a tellement de polices Web disponibles. Je pense que c'est un excellent ajout.
Pour plus de détails sur Adobe Muse, consultez mon cours gratuit. Conception et publication de sites Web avec Adobe Muse.
Accentsconagua