Photoshop ou Fireworks? C'est la question qui a jeté toutes sortes de concepteurs et développeurs dans un débat houleux. Aujourd'hui, nous allons utiliser les deux applications pour créer un graphique Web simple.
Ce tutoriel s'adresse à tous les concepteurs qui ne songeraient jamais à abandonner Photoshop et qui ne connaissent presque rien de Fireworks. Je vais vous montrer comment utiliser vos graphiques Photoshop et ajouter des fonctionnalités interactives via Fireworks.
L'interactivité devrait affecter la conception
Il y a beaucoup de designers qui s'en tiennent à des maquettes de conception front-end. En d’autres termes, ils lancent Photoshop, effacent l’aspect général d’un site Web et le transmettent ensuite aux développeurs.
Beaucoup soutiennent que chaque concepteur devrait savoir comment coder, mais ce débat n'a aucune pertinence pour notre sujet d'aujourd'hui. Le fait est que j’ai vu des bureaux de conception dans des entreprises partout aux États-Unis qui fonctionnent avec deux équipes distinctes: les personnes qui conçoivent dans Photoshop et les personnes qui donnent vie à ces dessins dans le navigateur.
Cet article est pour l'ancien. Vous êtes un concepteur qui ne connaît pas un peu le code, mais vous savez que votre équipe de développeurs encourage les conceptions dynamiques et interactives. Vous souhaitez construire vos compositions avec ces objectifs en tête, mais vous ne pouvez finalement faire que de vagues suggestions et espérer que les développeurs partagent votre vision.
Une autre situation courante est la nécessité de créer rapidement une maquette en direct que vous pouvez montrer à un client. Vous êtes peut-être parfaitement capable de transformer votre travail Photoshop en un site Web conforme aux normes, mais vous voulez vous assurer que votre client est satisfait avant de poursuivre.
Dans tous les cas, Adobe Fireworks est l'outil idéal à ajouter à votre flux de travail pour accomplir ce que vous voulez. À l'aide de Fireworks, vous pouvez créer une interaction directement dans vos conceptions et les prévisualiser comme s'il s'agissait d'une page dynamique.
Pourquoi des feux d'artifice?
Les concepteurs de sites Web commencent à se rendre compte que Fireworks est un outil vraiment formidable pour la conception de sites Web. Il ya même un débat qui fait rage actuellement sur le point de savoir si les concepteurs Web devraient même ouvrir Photoshop quand ils peuvent créer un site entier dans Fireworks.
En dépit de ces arguments, je me rends compte que la communauté des concepteurs de sites Web vit pour la plupart dans Photoshop. Même si je suis assez nouveau dans Fireworks, je suis donc beaucoup plus enclin à créer un logiciel de composition rapide dans Photoshop. Pour cette raison, ce tutoriel va vous montrer que vous pouvez utiliser les deux ensemble de manière synergique. Nous allons créer un graphique de base dans Photoshop où vous êtes à l'aise, puis le transférer dans Fireworks pour le rendre plus vivant.
Créer un bouton dans Photoshop
Au lieu de faire de votre premier projet Fireworks une maquette complète du site Web, essayez de commencer par quelque chose de petit. Le résultat sera une transition beaucoup moins pénible d'une application à l'autre. Aujourd'hui, nous allons commencer votre formation Fireworks par un simple bouton graphique.
Comme je l'ai mentionné ci-dessus, puisque vous êtes habitué à l'outil de Photoshop, nous allons commencer par là. Vous pouvez facilement créer cet objet entier dans Fireworks (le flux de travail serait même assez similaire), mais pour l’instant, je souhaite me concentrer sur l’idée que vous n’avez pas nécessairement à abandonner votre application graphique préférée.
Créez un nouveau document Photoshop (n'importe quelle taille convient à ce test) et créez un rectangle vectoriel comme celui ci-dessous. J'ai rempli le bouton avec # 005da5.
Ensuite, accédez aux styles de calque et ajoutez une légère superposition de dégradé et une ombre interne. Juste assez pour que le bouton paraisse moins plat.
À partir de là, dupliquez le calque de forme vectorielle avec votre bouton et supprimez les points situés le long du bord inférieur à l’aide de l’outil de sélection directe (A). Ensuite, déplacez les points le long du bord, remplissez le calque de blanc et réduisez l'opacité de sorte que l'effet ressemble à l'image ci-dessous.
Enfin, ajoutez quelques mots et vous êtes prêt à partir. J'ai utilisé une police sans-empattement en gras avec une ombre intérieure, les paramètres sont indiqués ci-dessous.
Maintenant, nous avons notre bouton Photoshop brillant horriblement cliché. À partir de là, nous souhaitons avoir un aperçu de l’interactivité. Par exemple, supposons que nous voulions montrer un simple effet de survol. Photoshop n'est pas nécessairement la meilleure façon de s'y prendre et nous n'avons besoin de rien d'aussi intense que Dreamweaver. Où est donc le juste milieu? Feu d'artifice à la rescousse!
Importation dans Fireworks
Avant d'importer ce document dans Fireworks, assurez-vous que votre PSD est bien nettoyé. Nommez tous vos calques, regroupez-les si nécessaire, etc. Cela facilitera grandement le suivi de la route. Notre petit bouton n’ayant que quelques couches, j’ai simplement tout nommé et enregistré le fichier PSD dans mon dossier de projet.
Lancez Fireworks et ouvrez le fichier PSD que vous venez de sauvegarder. Vous n'avez pas besoin d'exporter / importer de quelque manière que ce soit, utilisez simplement l'ancienne commande Open. Cela vous donnera quelques options avec lesquelles vous pouvez jouer (je les ai laissées toutes seules), assurez-vous simplement de sélectionner l'option permettant de conserver le caractère modifiable de la couche par rapport à son apparence.
À partir de là, il est important de rechercher ce que Fireworks transférera et ne transférera pas correctement. Comme vous pouvez le voir dans l'image ci-dessous, mes formes vectorielles, mon texte et mes couleurs se sont très bien déroulés, mais l'opacité du calque sur mon surbrillance est de 100%. C'est un peu agaçant, mais il est assez facile de ramener cela à 10%.
En dehors de cela, mon petit fichier a parfaitement survécu à l'importation. Comme vous pouvez le voir ci-dessous, chacune de mes couches est restée intacte et même mes effets de couche sont toujours modifiables.
Notez que les effets de calque apparaissent dans la palette Propriétés et ont une interface très différente de celle de Photoshop. Cependant, les mêmes effets de base et contrôles sont présents.
Ajout d'un nouvel état
Pour ajouter de l’interactivité à notre bouton, nous devrons utiliser deux fonctionnalités de Fireworks avec lesquelles vous êtes peut-être familier ou pas: Tranches et États.
Les états ressemblent un peu à Photoshop Layer Comps, mais sont davantage axés sur les modifications effectives qu'un objet est censé subir. Donc, pour notre bouton, nous voulons que l'apparence change lorsque l'utilisateur la survole. Pour ce faire, nous allons créer plusieurs états afin de refléter les différentes itérations de boutons.
Pour ce faire, accédez à la palette Etats et dupliquez l’état actuel. Puis nommez l'état d'origine? Normal? ou? Défaut? et nommer le nouvel état? Survol?
A partir de là, accédez à la palette Propriétés et modifiez la couleur de remplissage du bouton en rouge. Encore une fois, c'est assez différent de ce que vous voyez dans Photoshop, mais le processus est explicite. Cliquez sur l'échantillon, choisissez une nouvelle couleur et vous êtes prêt.
Nous avons maintenant deux états différents avec lesquels travailler: un bouton rouge et un bouton bleu. En utilisant des tranches, nous pouvons lier ces états à une action de survol sans aucun code.
Ajout d'une tranche
Les tranches Fireworks fonctionnent de manière très similaire à celles de Photoshop. Seulement lorsqu'elles sont associées à des états, vous disposez de fonctionnalités presque similaires à celles de Dreamweaver.
Pour ajouter une tranche, saisissez l'outil de sélection et cliquez avec le bouton droit de la souris sur le bouton bleu (assurez-vous de ne pas cliquer sur la surbrillance). À partir de là, sélectionnez l’option de menu? Insérer une tranche rectangulaire? pour créer une tranche de la même taille que notre bouton.
Après cela, une superposition de couleur devrait apparaître sur le bouton. Regardez à nouveau dans la palette Propriétés pour rechercher des options pour la compression de fichier de la tranche, j'ai choisi «JPEG - Meilleure qualité». Ici, vous pouvez également ajouter un lien et du texte alternatif.
Mise en œuvre de l'effet de survol
Remarquez le petit cercle au centre du bouton dans la capture d'écran ci-dessus. En cliquant dessus, vous obtiendrez une liste d'actions. À partir de là, il vous suffit de sélectionner? Ajouter un comportement de basculement simple? et cela changera automatiquement l'état du bouton lorsque vous passez la souris sur l'image.
Cela fait, vous ne remarquerez aucune différence dans votre document. Pour voir l'effet en action, cliquez sur le bouton Aperçu situé en haut de la fenêtre. Cela vous permettra d'interagir avec le bouton comme s'il s'agissait d'un navigateur Web.
Exporter le bouton dans un navigateur
Désormais, si vous souhaitez montrer votre création à quelqu'un d'autre, vous voudrez probablement la faire sortir de Fireworks. Une façon de procéder consiste à exporter votre fichier sous forme de page Web. Une fois dans Fichier> Exporter, choisissez l’option? HTML et images? montrer dans l'image ci-dessous.
Notez que si vous créez un site complet avec plusieurs pages, vous devez sélectionner l'option "Toutes les pages". option, mais pour ce petit test, nous n'avons besoin que de la page actuelle. Le résultat devrait être un dossier d'images et un? Htm? ou? html? fichier que vous pouvez télécharger sur un serveur et partager en ligne. Notez que lorsque vous l'ouvrez dans le navigateur, l'effet de survol et le lien que vous avez insérés fonctionnent exactement comme sur un vrai site Web, ce qui en fait un excellent outil pour créer très rapidement des compositions Web.
Pas prêt pour la production
Si vous êtes un non-programmeur qui pense tout à coup qu'il a frappé de l'or, attendez une minute. Malheureusement, la sortie ici est bonne à regarder, mais nulle part près de quelque chose que vous voudriez publier sur un site réel. Le résultat de notre simple petit projet a été tout un fouillis de JavaScript alors qu’en réalité, un élément Web aussi simple ne nécessite que quelques lignes de code HTML et CSS.
Fireworks n'est pas destiné à être un constructeur de site WYSIWYG à part entière. Par conséquent, la sortie Web en direct n'est tout simplement pas à la hauteur et ne doit être utilisée qu'à des fins de prévisualisation.
Conclusion
Pour résumer, Photoshop est un outil formidable pour la création d’images, mais s’agissant de la création et de la prévisualisation de l’interaction, les résultats sont courts. Dans ces cas, Fireworks vous fournit un ensemble d’outils beaucoup plus puissant.
Ce didacticiel est destiné aux débutants absolus de Fireworks et gratte à peine la surface des outils Web et des fonctionnalités mis à votre disposition. Nous y reviendrons bientôt avec un examen plus approfondi de la manière d'utiliser Fireworks pour créer des sites Web complets et impressionnants.