J'ai ceci .psd(fichier Photoshop) et j'essaye de le convertir en HTML et CSS.
La seule chose que je ne peux pas déterminer, c'est quelle police ils ont utilisée dans le .psd
Comment savoir quelles polices ont été utilisées dans le fichier Photoshop?
Réponses:
Cela dépend de la façon dont vous voulez extraire les informations.
Sélectionnez l'outil Texte ( icône T avec empreintes) et cliquez sur la zone de texte pour le modifier. Il montrera quelle police est utilisée dans la fenêtre Caractère.
Ceci listera toutes les polices incorporables utilisées dans le fichier PSD, à condition que vous puissiez les incorporer.
Dans l'outil Caractère, accédez au menu déroulant de sélection de police. À la fin de la liste se trouvent les polices utilisées dans l’image mais absentes de votre système. Celles-ci seront généralement grisées.
Si vous voyez des images pixellisées dont vous avez besoin de la police, vous feriez mieux d’exporter uniquement cette section, en tant qu’image claire et autonome, et d’utiliser un service tel que What the Font pour déterminer la police.
Enregistrez ce script en tant que nouveau fichier dans votre dossier Photoshop> Paramètres prédéfinis> Scripts. Nommez-le comme vous voulez, par exemple "Detect Fonts.jsx"
var p = new ActionReference();
function arrayUnique(a){
var t = []
i = a.length;
while(i--) {
var f = false,
n = t.length;
while (n--) {
if(a[i] === t[n]) {
f = true;
}
}
if(!f) {
t.push(a[i]);
}
}
return t;
}
function findFonts() {
p.putEnumerated( charIDToTypeID('Dcmn'), charIDToTypeID('Ordn'), charIDToTypeID('Trgt') );
var c = executeActionGet(p).getInteger(charIDToTypeID('NmbL'))+1,
fonts = [];
while(c--) {
var r = new ActionReference(),
descLayer,
layerStyles,
countStyles;
r.putIndex( charIDToTypeID( 'Lyr ' ), c );
try {
descLayer = executeActionGet(r);
} catch (e) {
continue;
}
if(!descLayer.hasKey(stringIDToTypeID( 'textKey' ))) continue;
layerStyles = descLayer.getObjectValue(stringIDToTypeID('textKey')).getList(stringIDToTypeID('textStyleRange'));
countStyles = layerStyles.count;
while(countStyles--) {
var n = layerStyles.getObjectValue(countStyles).getObjectValue(stringIDToTypeID('textStyle')).getString(stringIDToTypeID('fontPostScriptName'));
fonts.push(n);
}
}
return arrayUnique(fonts).sort();
}
if (documents.length) {
var d = findFonts();
alert(d.length +' fonts found\n'+d.join('\n'));
} else {
alert('No fonts used in the active document.',);
}
Le format de fichier PSD est documenté par Adobe. Vous pouvez lire comment il stocke les informations relatives aux polices.
Vous pouvez ensuite examiner un fichier hexadécimal du fichier et utiliser la spécification de format de fichier pour rechercher les polices.
Sinon, les noms de police doivent être visibles dans la sortie de l' stringsutilitaire disponible sur les systèmes Linux / Unix.
Cela est en fait très facile à faire en utilisant des scripts PS, qui peuvent parcourir les couches de votre PSD et extraire des données de couche de texte.
Récemment, j'ai expérimenté un script basé sur JavaScript pour superposer des informations de police directement sur des compositions livrées aux développeurs. Ce n'est pas fini mais s'il y a toujours un intérêt (je vois que c'est assez vieux), je peux mettre en place une version rapide et sale qui affiche simplement les polices utilisées dans une fenêtre.
UPDATE: J'ai mis au point une version "allégée" du script que je suis en train de développer. N'hésitez pas à contribuer - https://github.com/davidklaw/completer . Pour ceux qui ne sont pas familiarisés avec les scripts, prenez simplement le fichier de script et placez-le dans votre dossier PS Presets / Scripts. Il sera disponible sous Fichier -> Scripts.
Un moyen rapide et facile de rechercher les polices manquantes
Windows -> Caractère Une petite boîte de caractères s'affichera avec des informations sur les polices.
Sélectionnez le nom de police déroulant et faites défiler jusqu'à la fin.
Vous remarquerez la liste des polices manquantes en gris clair à la fin de la liste.
De: http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/
Si le texte a déjà été pixellisé, le moyen le plus simple consiste à rogner la zone avec la police de caractères à identifier, à l'enregistrer au format .png et à le télécharger sur WhatTheFont , où il devrait pouvoir vous indiquer de quoi il s'agit, à moins que est obscure ou sur mesure.
Identifont est un autre site que vous pouvez utiliser, dans lequel vous décrivez les caractéristiques de la police de caractères.
Je voudrais prendre un cliché du texte dont vous avez besoin (de préférence zoomé ) et utiliser WhatTheFont pour obtenir des suppositions. (Le caractère ne devrait-il pas être affiché lorsque vous ouvrez le fichier PSD et sélectionnez le texte correspondant?)
Et bien sûr, si ce n'est pas une police Web sécurisée, vous devrez trouver un moyen approprié de la remplacer ou de créer une pile de secours.
Utiliser Creative Cloud Extract
Il listera toutes les polices utilisées (entre autres choses utiles).
Sur la base de la réponse originale de David (DetectFonts.jsx), j'ai modifié le script pour résoudre le problème signalé par Drew dans les commentaires: Recherchez toutes les polices utilisées dans un fichier Photoshop .
Suivez les instructions d'origine, mais utilisez plutôt ce corps de script - la seule différence est quelques vérifications nulles (vraisemblablement une différence de version de Photoshop ou quelque chose à voir avec des données manquantes sur des types d'objet particuliers, probablement propres au concepteur ou au système d'exploitation)
Je vais également soumettre une demande d'extraction à l' adresse https://github.com/dcondrey/DetectFontsinPSD.
var p = new ActionReference();
function arrayUnique(a) {
var t = []
i = a.length;
while (i--) {
var f = false,
n = t.length;
while (n--) {
if (a[i] === t[n]) {
f = true;
}
}
if (!f) {
t.push(a[i]);
}
}
return t;
}
function findFonts() {
p.putEnumerated(charIDToTypeID('Dcmn'), charIDToTypeID('Ordn'), charIDToTypeID('Trgt'));
var c = executeActionGet(p).getInteger(charIDToTypeID('NmbL')) + 1,
fonts = [];
while (c--) {
var r = new ActionReference(),
descLayer,
layerStyles,
countStyles;
r.putIndex(charIDToTypeID('Lyr '), c);
try {
descLayer = executeActionGet(r);
} catch (e) {
continue;
}
if (!descLayer.hasKey(stringIDToTypeID('textKey'))) continue;
layerStyles = descLayer.getObjectValue(stringIDToTypeID('textKey')).getList(stringIDToTypeID('textStyleRange'));
if(!layerStyles) continue;
countStyles = layerStyles.count;
while (countStyles--) {
var textStyle = layerStyles.getObjectValue(countStyles).getObjectValue(stringIDToTypeID('textStyle'));
if(!textStyle || !textStyle.hasKey(stringIDToTypeID('fontPostScriptName'))) continue;
var n = textStyle.getString(stringIDToTypeID('fontPostScriptName'));
fonts.push(n);
}
}
return arrayUnique(fonts).sort();
}
if (documents.length) {
var d = findFonts();
alert(d.length + ' fonts found\n' + d.join('\n'));
} else {
alert('No fonts used in the active document.');
}
Utiliser un outil en ligne pour obtenir les polices du fichier psd
Le développeur m'a demandé presque le même penser que vous aviez besoin. Je suis venu avec l'édition de script simple, pour exporter les propriétés de calque (texte, nom de police, taille de police, couleur de police) dont vous avez besoin lors du développement, dans un seul fichier txt (devrait fonctionner sur une machine Windows).
Sauvegardez simplement ceci comme "ExportTexts.js" et mettez-le dans Adobe Photoshop> Préréglages> Scripts.
Après cela, exécutez (ou redémarrez) Photoshop et exécutez le script (Fichier -> Scripts -> ExportTexts). Assurez-vous également de dissocier toutes les couches avant de procéder. Le fichier exporté doit se trouver dans le même répertoire que le fichier psd.
if (documents.length > 0)
{
var docRef = activeDocument;
CurrentFolder = activeDocument.path;
var outputFile = new File(CurrentFolder + "/" + activeDocument.name + "fonts.txt" );
outputFile.open("w");
for (var i = docRef.layers.length-1 ; i >=0 ; i--)
{
docRef.activeLa`enter preformatted text here`yer = docRef.layers[i]
if (docRef.activeLayer.kind == LayerKind.TEXT)
{
outputFile.write(
docRef.activeLayer.textItem.contents + "\n" +
docRef.activeLayer.textItem.font +"," +
docRef.activeLayer.textItem.size +"," +
docRef.activeLayer.textItem.color.rgb.hexValue + "\n\n\n");
}
}
outputFile.close();
alert("Finished");
}
else
{
alert("You must have at least one open document to run this script!");
}
docRef = null
Il existe une extension / un panneau Photoshop gratuit qui peut effectuer ce travail pour vous, un détecteur de polices Photoshop gratuit ( http://www.layerhero.com/photoshop-font-detector/ ), et si vous souhaitez collecter / copier des fichiers de polices à partir du système. dossier, essayez Photoshop Art Packer ( http://www.layerhero.com/photoshop-art-packer/ )
L'onglet Calques contient une option qui vous permet de filtrer tous les calques pour afficher uniquement les polices. Vous devez sélectionner chaque couche pour les voir et cela n’est utile que si vous avez besoin d’y jeter un coup d’œil
J'espère que cela aidera quelqu'un trois ans après la demande.
Je souhaitais connaître les polices de document ainsi que leurs styles, tailles, couleurs, formatage, etc. à des fins de développement Web et de CSS, voici donc ce que je propose:
Pour obtenir les informations sur les polices sous forme de fichier PSD, vous pouvez utiliser des outils en ligne si vous ne pouvez ou ne souhaitez pas utiliser Photoshop (ou si vous préférez utiliser Gimp, les polices PSD sont pixellisées).
Par exemple, vous pouvez essayer cet extracteur de police en ligne html5 PSD "Get PSD Fonts".
Il s'agit d'un extracteur d'informations sur les polices PSD basé sur le projet psd.js Melitingice Github qui ne nécessite pas de téléchargement de fichiers, mais qui fonctionne localement dans la page de votre navigateur.