Tutoriel : Découper des Images avec PhotoShop CS6 | PSD en HTML

Introduction

Tranchage est un outil facile à utiliser, et dans ce tutoriel rapide, nous allons pour découper une image et exporter les tranches et le HTML dans DreamWeaver.

Créer notre Image

Tout d'abord, il faut ouvrir Adobe Photoshop et de créer notre image.

Temps de tranche

Nous sommes ensuite de sélectionner l'outil tranche, cliquez et maintenez. Il y a aussi 2 outils de tranche, outil section consiste à créer de nouvelles tranches et outil Sélection de tranche est d'éditer et de transformer les tranches créées. Vous voudrez en arrière entre eux. Suivez l'exemple pour créer vos tranches et vérifiez l'image suivante.

Exportation de tranches de l'Image et HTML

Nous sommes heureux avec nos tranches et nous sommes maintenant prêts à exporter, c'est aussi quelque chose je ne pas figurer dehors aussi vite que je voulais mais assurez-vous que vous sélectionnez enregistrer pour le web...que cela vous donnera les fonctions pour enregistrer chaque tranche dans sa propre image et également exporter le code HTML hors de lui trop dans une table.


Cette nouvelle fenêtre est votre nouvel ami est pour trancher, j'ai ajouté 2 flèches à cet exemple. Flèche gauche marquée ouverte en HTML va trancher et prévisualiser vos tranches dans un navigateur par défaut et moins il sera le code source HTML. Cela Ouvrez ou copiez dans dreamweaver, puis retour à photoshop et cliquez sur Enregistrer qui exporte vos tranches dans un dossier sélectionné. Ma suggestion serait de sites web est racine: / images /


Félicitations vous avez juste tranché le modèle.

Lorsque vous faites beaucoup de tranches vous allez rencontrez des fois où vous avez fait une erreur, toutes les tranches doivent être précis par le pixel. Lorsque vous vérifiez votre code HTML si vos images ne sont pas une mise en page propre et il ya des entretoises, vous avez mal alignés quelque chose quelque part. Meilleur conseil est de garder les tranches dans un alignement parfait et si nécessaire utiliser plusieurs tables.

Pour continuer l'installation...

** Remarque : si votre dossier /image/ a un autre dossier /image/ dedans signifie vous manuellement fait le dossier et est allé et enregistré dedans, sélectionnez la racine de votre répertoire afin de gagner du temps et de garder les choses propres.

Ouvrir Dreamweaver et définir votre répertoire de travail jusqu'à la racine de l'endroit où votre travail, ouvrir votre index dans root:/index.html ajouter "align = center" à la table pour obtenir dans le milieu, puis cliquez sur mode création. Vous pouvez voir les dépenses de votre modèle et aller de gauche à droite-cliquez sur l'ordre de vos images et à l'aide de la fonction drag and drop pour le fichier de répertoire.


Une fois tous les 3 images ont été adressées à chaque image dans le code HTML, vous pouvez affecter un lien hypertexte pour les images de fond 2 et utilisez-les comme liens dans d'autres sections du site web.

Conclusion

De ce point, vous devriez avoir une compréhension claire de la façon de prendre un PSD en HTML, n'oubliez pas que trancher que prennent l'habituer à obtenir des résultats parfaits. Mais une fois que vous trouverez les règles de ce qui se passe où vous pouvez faire quelques grands modèles dans Photoshop et facilement rendent dans un site web pour un client.