Depuis l'arrivée de la version CS6, Adobe a implémenté dans Photoshop une option très utile pour mettre en page et développer des conceptions Web. L'opération est très simple et surtout rapide. Grâce à l'application, nous pourrons générer des feuilles de style en cascade en prenant comme référence nos formes et nos calques de texte. La procédure est aussi simple que de développer notre maquette, de copier la version de code de nos éléments et de la coller sur notre feuille.
C'est une très bonne option notamment parce qu'elle nous permet de voir l'évolution de notre design en termes visuels et en temps réel. Voici quelques conseils pour utiliser cette option et obtenir le performance maximale:
Essayez d'être précis
Pour obtenir un résultat professionnel, il est recommandé de prendre en compte les mesures et proportions de votre site. Définissez les valeurs Largeur et Hauteur du modèle que vous concevez et appliquez-les à votre maquette. Lorsque vous copiez le code CSS, nous placerons chaque élément en prenant comme référence la distance en pixels entre chaque élément et les bords du canevas. Tenez également compte des tailles et des raisons hiérarchiques que vous allez inclure dans votre conception, y compris l'alignement de chaque élément et l'espacement entre chacun d'eux pour offrir une lisibilité maximale à vos utilisateurs.
L'utilisation de guides et les règles de l'interface vous aideront à construire un modèle soigné et propre avec tous ses éléments parfaitement alignés.
Configurer toutes les caractéristiques de chaque élément
La possibilité de copier le code CSS nous donne la possibilité de concevoir notre site avec une grande précision à partir de l'utilisation de calques de formulaire et de texte. Le contenu de chaque calque sera copié dans le Presse-papiers et nous pouvons le coller rapidement dans notre feuille de style. À partir des calques de forme, capturez les valeurs des paramètres suivants:
- Taille
- Position
- Couleur de trait
- Couleur de remplissage (y compris les dégradés)
- Ombre parallèle
À partir des couches de texte, nous pouvons capturer les valeurs suivantes:
- Famille de polices
- Taille de police
- Épaisseur de la police
- Hauteur de la ligne
- Souligné
- Barré
- Exposant
- Indice
- Alignement du texte
Gardez cela à l'esprit et définissez chacune de ces valeurs pour fournir le style que vous recherchez.
Travailler avec des groupes de calques
Cette fonction traduit notre travail organisé en deux types de classes, une pour chaque groupe qui regroupe des couches de formes ou de texte et une classe pour chaque couche de l'un de ces types. Chaque classe de groupe représentera un élément div parent qui contiendra des éléments div enfants qui correspondront aux calques insérés dans chaque groupe. De cette manière, les valeurs supérieure et gauche des conteneurs enfants seront définies en référence au conteneur parent. Vous devez garder à l'esprit que cette option n'est pas disponible avec les objets intelligents et qu'elle ne sera pas applicable à plusieurs calques simultanément à moins qu'ils ne soient groupés.
Étapes à suivre pour convertir
Une fois que vous avez fait votre maquette, que vous avez personnalisé chaque élément et que vous les avez regroupés par groupes, il ne vous restera plus qu'à suivre les étapes suivantes:
- Accédez au panneau des calques et choisissez l'une de ces deux options:
- Cliquez avec le bouton droit sur une forme ou un calque de texte ou un groupe de calques et choisissez Copier CSS dans le menu contextuel.
- Sélectionnez une forme ou un calque de texte ou un groupe de calques, puis choisissez l'option Copier CSS dans le menu du panneau Calques.
-
Collez le code dans votre document de feuille de style et appliquez-le à vos pages via html5.
