Share
La dernière version de Photoshop propose de nouvelles fonctionnalités qui ne manqueront pas d’attirer l’attention des concepteurs Web. Vous pouvez maintenant convertir la forme et le style d'un calque en CSS en un seul clic. Dans cet article, nous expliquerons comment cela fonctionne. Nous allons jeter un coup d'oeil!
Je suis très enthousiaste à propos de cette nouvelle fonctionnalité de Photoshop que nous allons examiner. La possibilité de convertir des styles de calque Photoshop en CSS existe depuis un certain temps grâce à des outils tiers, mais jamais à l’origine de manière native. Les développeurs Web sont constamment chargés de convertir les illustrations Photoshop en conceptions dynamiques basées sur CSS3. En fonction de la complexité de l'objet, cela peut prendre un certain temps.
Ne serait-il pas intéressant que Photoshop puisse effectuer la conversion pour vous? Bonne nouvelle: maintenant c'est possible. Voyons voir comment ça fonctionne.
Pour commencer, essayons de convertir un bouton de base dans Photoshop. Comme vous pouvez le constater, j’ai commencé avec un simple rectangle aux angles arrondis, puis j’ai ajouté quelques styles de calque. Tout d'abord, j'ai utilisé l'incrustation en dégradé. Ensuite, je vais utiliser un jeu d’ombres interne pour superposer et mettre une belle surbrillance en haut. Enfin, j'ai créé une ombre portée subtile.
Maintenant que nous avons une bonne idée de la manière dont le bouton est construit dans Photoshop, convertissons-le en CSS. Il y a deux façons de s'y prendre. La première consiste à sélectionner le calque et à aller à Calque> Copier CSS dans la barre de menu. L’autre méthode consiste à cliquer avec le bouton droit de la souris sur le calque et à sélectionner l’option "Copier le CSS" dans le menu qui apparaît. Cela copiera le code CSS dans notre presse-papier afin que nous puissions l'insérer dans notre éditeur de code préféré..
Avant d’aller vérifier cela, notez que j’ai nommé mon calque "bouton" en minuscule. Ceci est important car cela sera converti en un nom de classe dans notre code final.
Si nous sautons sur un éditeur de code, nous pouvons essayer notre code de bouton pour voir si cela a fonctionné. Premièrement, je vais créer un div dans mon HTML et lui donner une classe de "bouton". Maintenant, je vais passer au CSS et coller simplement le code que Photoshop a placé dans mon presse-papiers.
.bouton
border-radius: 10px;
image d'arrière-plan: -moz-linear-gradient (90deg, rgb (42, 46, 53) 0%, rgb (104, 110, 118) 100%);
image d'arrière-plan: -webkit-linear-gradient (90deg, rgb (42, 46, 53) 0%, rgb (104, 110, 118) 100%);
box-shadow: 0px 5px 4px 0px rgb (0, 0, 0);
position: absolue;
à gauche: 249px;
en haut: 245px;
largeur: 300px;
hauteur: 100px;
z-index: 2;
Comme vous pouvez le constater, un assez gros morceau de code a été écrit pour nous. Il semble que la forme et la couleur soient bien en place dans notre version de Photoshop, mais tout n’a pas été copié avec succès..
Pour commencer, l'ombre portée est à pleine opacité malgré l'opacité réduite de notre version de Photoshop. Je me serais attendu à ce que Photoshop utilise RGBa pour obtenir cet effet. En plus des problèmes d'ombre portée, notre ombre intérieure a tout simplement été ignorée..
Malgré tout, nous sommes bien partis. Photoshop nous a permis d'économiser un peu de code et a même fait des efforts supplémentaires pour inclure des préfixes de navigateur afin d'assurer une compatibilité maximale..
Juste à des fins de comparaison, comparons la nouvelle fonctionnalité intégrée de copie CSS de Photoshop à un plugin gratuit appelé Photoshop, appelé CSS3Ps, qui promet essentiellement les mêmes fonctionnalités..
Encore une fois, je vais sélectionner ma couche, mais cette fois-ci, je clique sur le plugin CSS3Ps. Cela lance une page Web sur laquelle je dois attendre une vingtaine d'années pour voir mes résultats. C’est certes super agaçant, mais une fois que les résultats apparaissent, ils sont en réalité meilleurs que la fonction Photoshop intégrée..
Comme vous pouvez le constater, la mise en surbrillance supérieure et l’opacité réduite de l’ombre de la boîte sont présentes dans cette version. Pour aller encore plus loin, vous pouvez obtenir vos résultats dans Sass, une option géniale que j'aimerais voir à l'avenir avec Photoshop..
Pour obtenir cette mise à jour, les clients peuvent suivre les instructions suivantes..
Vous n'utilisez pas le Creative Cloud? Vous pouvez vous abonner à Creative Cloud et accéder à toutes ces mises à jour, ainsi qu'au reste de la Suite Creative pour seulement 49,99 $ / mois..
Accentsconagua