Les concepteurs de sites Web professionnels développent des modèles de sites Web, généralement dans de puissants éditeurs graphiques tels qu'Adobe Photoshop. Le résultat du travail est un fichier avec une image qui, sous cette forme, est fourni au client. Pour utiliser la conception prête à l'emploi, c'est-à-dire pour mettre en page une page Web, vous devez couper le modèle.
Nécessaire
éditeur graphique raster Adobe Photoshop
Instructions
Étape 1
Ouvrez le fichier modèle dans l'éditeur graphique Adobe Photoshop. Sélectionnez Fichier et Ouvrir dans le menu ou appuyez sur la combinaison de touches Ctrl + O. Dans la boîte de dialogue qui apparaît après cela, accédez au répertoire contenant le fichier, sélectionnez-le dans la liste et cliquez sur le bouton "Ouvrir".
Étape 2
Choisissez une échelle pratique pour afficher l'image du modèle. Utilisez l'outil Zoom ou les éléments du menu contextuel. Sélectionnez une échelle qui vous permet de positionner le curseur avec une précision au pixel près. Ceci est nécessaire pour définir avec précision les lignes de référence.
Étape 3
Formez un ensemble de lignes de référence au-dessus de l'image du modèle. Activez l'affichage des règles dans les fenêtres de document si ce n'est déjà fait. Pour ce faire, appuyez sur Ctrl + R ou sélectionnez Affichage et règles dans le menu.
Étape 4
Déplacez le curseur de la souris sur la règle supérieure pour ajouter une ligne de référence horizontale. Appuyez sur la touche gauche et maintenez-la enfoncée. Déplacez le curseur de la souris vers la zone d'image. De même, en utilisant la bonne règle, vous pouvez ajouter des lignes horizontales.
Étape 5
Ajoutez le nombre requis de lignes de référence et positionnez-les le long des limites de la division des régions du modèle. Les lignes doivent passer par tous les endroits où vous souhaitez couper le gabarit. Ils doivent contraindre toutes les images et zones logiques (logo, en-tête du site, menus horizontaux et verticaux, etc.) qui seront présentés sur une page Web.
Étape 6
Activez l'outil Tranche. Son bouton est sur la barre d'outils verticale.
Étape 7
Créez le nombre requis de zones de coupe à l'aide de l'outil Tranche. Choisissez une échelle pratique pour afficher le modèle. Utilisez la souris pour définir les limites des zones. Les lignes directrices ajoutées à la troisième étape fourniront un positionnement précis des limites des objets que vous créez. Ajustez les zones existantes si nécessaire à l'aide de l'outil Slice Select.
Étape 8
Modifiez les propriétés des zones de coupe selon les besoins. Activez l'outil de sélection de tranche. Faites un clic droit sur la zone souhaitée. Dans le menu contextuel, sélectionnez l'élément Modifier les options de tranche. Dans la boîte de dialogue Options de tranche qui apparaît, sélectionnez le type de zone (image, zone vide, tableau), le mode de remplissage du fond, précisez, si nécessaire, le nom, l'URL cible, le contenu de l'attribut alt="Image" et d'autres valeurs. Cliquez sur OK.
Étape 9
Coupez le gabarit. Sélectionnez Fichier et Enregistrer pour le Web et les appareils dans le menu ou appuyez sur Maj + Ctrl + Alt + S. Dans la boîte de dialogue Enregistrer pour le Web et les périphériques, spécifiez le format et les paramètres de compression d'image dans lesquels le modèle sera coupé. Cliquez sur le bouton Enregistrer. La boîte de dialogue Enregistrer l'optimisation sous s'affiche.
Étape 10
Sélectionnez HTML et images (*.html) dans la liste déroulante Type de fichier, et dans le champ Nom de fichier, saisissez le nom du fichier dans lequel le balisage HTML du modèle sera placé. Dans la liste Tranches, sélectionnez Toutes les tranches. Spécifiez le répertoire pour la sortie et cliquez sur le bouton "Enregistrer".
Étape 11
Un fichier HTML sera placé dans le répertoire cible, qui est en fait un modèle de page Web prêt à l'emploi. Le sous-répertoire images contiendra l'ensemble d'images dans lequel le modèle original a été coupé.
