Alors que Photoshop est principalement conçu pour modifier et améliorer vos photos et créer des graphiques , vous pouvez utiliser " l'outil de découpage" du programme et "Enregistrer pour le Web et les périphériques " options pour créer des pages web à partir de votre PSD fichiers image. Utilisez l'outil Tranche à couper (ou « tranche »), le PSD en sections. Chaque tranche devient un élément de bande séparé, tel qu'un bouton ou champ de texte. Photoshop place chaque tranche dans sa propre table HTML. Vous pouvez ensuite ajouter des liens hypertextes ou d'autres balises HTML pour les différentes tranches et exporter le PSD vers une page web HTML. Choses que vous devez
Adobe Photoshop CS3 ou tard
Afficher plus Instructions
Création d' une page Web dans Photoshop
1
Démarrer une nouvelle image PSD dans Photoshop avec les dimensions que vous voulez pour votre page web , comme ceci: Cliquez sur «Fichier » dans la barre de menu et choisissez "Nouveau " pour afficher la boîte de dialogue Nouveau. Tapez la largeur de la page (en pixels) dans le champ " Largeur" et la hauteur (en pixels) dans le champ " Hauteur" .
2
Tapez " 96 " dans le champ "Résolution" et cliquez sur "OK". Cela crée une toile vierge pour votre page web .
3
Créer des graphiques de bannières et boutons en haut de la page. Vous pouvez importer des images existantes et de les placer où vous le souhaitez ou utilisez les graphiques de Photoshop et d'outils de texte pour créer et mise en page de la bannière.
4
Sélectionnez l'outil " Slice " ( cinquième bouton du haut de la Boîte à outils ) . Si l'outil Slice n'est pas affiché , cliquez et maintenez le bouton et choisissez " outil de découpage" du fly-out .
5
Faites glisser le curseur de la souris sur le premier bouton ou une zone dans le bandeau où vous voulez créer un lien. Photoshop crée une boîte , ou « tranche », autour de l'objet et le place dans un tableau. Lorsque vous exportez la page, vos tranches présentent comme des objets distincts dans les tableaux HTML individuels.
6
cliquez-droit sur la tranche et choisir " Modifier les options de tranche" du menu déroulant pour ouvrir les options de tranche boîte de dialogue . Utilisez cette boîte de dialogue pour définir les propriétés de votre bouton. Par exemple, tapez le lien URL dans le champ " URL" . Accédez à la page cible du navigateur, d'autres étiquettes , et ainsi de suite . Cliquez sur « OK ».
7
Répétez ces étapes pour créer des boutons et options d'édition de tranche pour chaque zone que vous voulez faire cliquable.
8
Utilisez l'outil Tranche à définir une zone sur la page où vous voulez placer une zone de texte . Cliquez à droite sur la tranche et choisir " Modifier les options de tranche" dans le menu déroulant.
9
Cliquez sur le " type de tranche " déroulant et choisissez " Pas d'image ". Le " texte affiché dans la cellule" champ s'affiche . Vous pouvez taper votre texte dans ce champ ou le copier-coller à partir d'un traitement de texte. Lorsque vous avez terminé , cliquez sur « OK ».
10
Cliquez sur le " type de tranche " déroulant et choisissez " Pas d'image . " Le " texte affiché dans le champ de cellule" est affiché. Vous pouvez taper votre texte dans ce domaine ou copier-coller à partir d'un traitement de texte Lorsque vous avez terminé , cliquez sur " OK "
Note: . . ce champ prend en charge les balises HTML plus . Par exemple, pour faire un peu de l'italique de texte , il suffit de placer le texte entre les " votre texte " tags. Utilisez "
" pour créer des sauts de paragraphe , et ainsi de suite .
Notez également que le texte dans ce tableau ne s'affiche pas à l'intérieur de Photoshop --- vous ne pouvez pas le voir jusqu'à ce que vous exportez la page.
11
Continuer ajout et la définition des tranches pour le texte, images , graphiques, et ainsi de suite , jusqu'à la fin de la présentation.
12
Cliquez sur «Fichier» dans la barre de menus et choisissez "Enregistrer pour le Web et les périphériques . " Cela ouvre la Enregistrer pour le Web et la boîte de dialogue Périphériques . Utilisez cette boîte de dialogue pour contrôler la couleur de fond, la compression d'image et de qualité, et ainsi de suite .
13
Cliquez sur le bouton «Enregistrer» pour nommer et exporter la page Web .
< Br >