|
Avant Photoshop CS3, concepteurs de sites Web créés à l'aide des boutons de renversement Photoshop et Image Ready , qui étaient auparavant conditionnés ensemble . Adobe a cessé d'utiliser Image Ready lorsqu'elle a acheté Dreamweaver de Macromedia , en supposant que les concepteurs Web peuvent utiliser ce programme spécialisé avec Photoshop pour créer leurs renversements . Vous créez les boutons de renversement dans Photoshop de la même façon . Ensuite, vous pouvez utiliser Dreamweaver , d'autres éditeurs de sites Web ou d'un éditeur de texte pour créer le code de retournement. Apprenez à créer des boutons de renversement dans Photoshop CS3. Choses que vous devez
Web éditeur
Afficher plus Instructions
1 Ouvrez un nouveau document qui est la bonne taille pour vos boutons . Cela peut être de la taille du site ou de la taille de la bannière bouton. Cliquez sur "Fichier > Nouveau" et entrez la taille dans les cases correspondantes .
2 créer le premier bouton tel qu'il apparaîtra quand elle n'est pas sélectionnée . Sélectionnez l'outil de forme correcte de la " Palette d'outils " et de tirer sur le bouton. Ensuite , sélectionnez l'outil "Type" et entrez le texte à l'intérieur du bouton.
3 appliquer les effets souhaités au bouton ou texte. Adobe a fourni plusieurs façons pour vous d'appliquer des effets . Pour appliquer vos propres effets personnalisés , sélectionnez le calque de la palette «Calque» . Ensuite , sélectionnez l'effet souhaité dans la case "FX" déroulante qui se trouve sur le bas de la "couche" palette.Photoshop CS3 fournit styles Web prédéfinis conçus spécifiquement pour les boutons web . Si la palette «Styles» n'est pas visible, sélectionnez "Windows > Styles ». Dans le menu déroulant du bas " Styles ", sélectionnez " Styles Web. " Assurez-vous que la couche de bouton est sélectionné et choisir la couche désirée dans la palette "Styles " .
4 Créer les boutons restants . Maintenez enfoncée la touche "Control" pour sélectionner le texte et le bouton . Faites un clic droit dans la palette «Calque» et sélectionnez « Dupliquer le calque . " Déplacer les couches copiées vers l'emplacement du bouton Suivant. Changez le texte pour le nom du nouveau bouton . Répétez cette étape pour créer tous les boutons .
5 Couper les boutons. Sélectionnez l' outil " Slice " et tracer un cadre autour de chaque bouton . Double -cliquez sur chaque bouton pour ajouter des options de tranche . Assurez-vous que le "Image" est sélectionné dans la "Type Slice " zone de liste déroulante . Entrez un nom qui décrit le bouton éteint , comme « [ touche ] _off . " Entrez les informations relatives au site dans les cases restantes .
6 Sélectionnez "Fichier> Enregistrer pour le Web ... " Appuyez sur le bouton «Enregistrer» . Dans le "Enregistrer optimisé " boîte de dialogue , sélectionnez l'emplacement de vos images . Créer un nouveau dossier appelé «Off». Si vous avez entré les informations pour le site, changer le " Format " à " HTML et images . " Cliquez sur « OK ».
7 Sélectionnez "Windows > Calque Comp. " Créer une nouvelle composition de calques en sélectionnant le bouton " créer une nouvelle couche Comp " . Nommez quelque chose qui décrit l'ensemble actuel des boutons tels que "Off".
8 Modifier les boutons pour appliquer l'état de renversement. Appliquer les styles, de couleurs ou des effets aux boutons actuels . Créer un autre échantillon de calque et nommez "On". Répétez l'étape 7 pour enregistrer les boutons dans un nouveau dossier nommé "On". Ouvrez le dossier contenant ces touches et les renommer afin de refléter l'état "on".
9 créer le code de renversement dans un éditeur web. Utilisez Dreamweaver, un autre éditeur Web ou un éditeur de texte pour créer le code de renversement. Voici le code JavaScript pour le bouton d'accueil dans ce tutoriel : 
|
