Znajdź wszystkie czcionki użyte w pliku programu Photoshop

Mam to .psd(plik Photoshop) i próbuję przekonwertować go na HTML i CSS.

Jedyne, czego nie mogę określić, to, jakiej czcionki użyli w .psd

Jak mogę dowiedzieć się, jakie czcionki zostały użyte w pliku Photoshop?

Zależy od tego, jak chcesz wyodrębnić informacje.

Na sekcję lub obszar tekstowy

Wybierz narzędzie Tekst ( ikona T z serifami) i kliknij obszar tekstowy, aby go edytować. Pokaże, jaka czcionka jest używana w oknie postaci.

Przegląd wszystkich używanych czcionek

1. Zapisz lub wyeksportuj dokument obrazowy jako plik PDF
2. Otwórz wersję PDF w Adobe Reader
3. Wybierz Plik → Właściwości → Czcionki

Spowoduje to wyświetlenie wszystkich czcionek możliwych do osadzenia używanych w pliku PSD, pod warunkiem, że można je osadzić.

Brakujące czcionki

W narzędziu Znak przejdź do listy rozwijanej wyboru czcionek. Na końcu listy znajdują się czcionki używane w obrazie, których brakuje w systemie. Zazwyczaj będą wyszarzone.

Obrazy rastrowe

Jeśli zobaczysz jakieś zrasteryzowane obrazy, których potrzebujesz od strony czcionki, najlepiej wyeksportuj tylko tę sekcję jako wyraźny, samodzielny obraz i użyj usługi, takiej jak Czcionka, aby określić czcionkę.

Zapisz ten skrypt jako nowy plik w folderze Photoshop> Ustawienia wstępne> Skrypty. Nadaj mu dowolną nazwę, na przykład „Wykryj fonty.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.',);
}

Format pliku PSD jest dokumentowany przez Adobe - możesz przeczytać, jak przechowuje informacje o czcionce.

Następnie możesz sprawdzić zrzut heksadecymalny pliku i użyć specyfikacji formatu pliku, aby znaleźć czcionki.

Alternatywnie nazwy czcionek powinny być widoczne w wynikach stringsnarzędzia znalezionego w systemach Linux / Unix.

W rzeczywistości jest to bardzo łatwe przy użyciu skryptów PS, które mogą iterować warstwy PSD i pobierać dane warstwy tekstowej.

Ostatnio eksperymentowałem ze skryptem opartym na JavaScript, aby nakładać informacje o czcionkach bezpośrednio na kompozycje dostarczane do programistów. Nie jest skończony, ale jeśli nadal jest zainteresowanie (widzę, że jest dość stary), mogę zainstalować szybką i brudną wersję, która po prostu wyskakuje z czcionek używanych w oknie.

AKTUALIZACJA: Stworzyłem szorstką, ale działającą, „lite” wersję skryptu, który tworzę. Zapraszamy do współpracy - https://github.com/davidklaw/completer . Dla tych, którzy nie znają skryptów, po prostu weź plik skryptu i umieść go w folderze PS Presets / Scripts, a będzie on dostępny w menu Plik -> Skrypty.

Szybki i łatwy sposób na znalezienie brakujących czcionek

1. Windows -> Znak Małe pole znaków wyświetli informacje o czcionkach.

2. Wybierz listę nazw czcionek i przewiń w dół do końca.

3. Na końcu listy czcionek pojawi się lista brakujących czcionek w jasnoszarym kolorze.

Od: http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/

Jeśli tekst został już zrasteryzowany, najłatwiejszym sposobem byłoby wykadrowanie obszaru czcionką, którą chcesz zidentyfikować, zapisanie jako plik .png i przesłanie go do WhatTheFont , gdzie powinien być w stanie powiedzieć ci, co to jest, chyba że jest niejasny lub wykonany na zamówienie.

Identifont to kolejna strona, z której możesz skorzystać, gdzie opisujesz cechy kroju pisma.

Zrobiłbym krótki tekst, którego potrzebujesz (najlepiej powiększony) i użyłem WhatTheFont, aby uzyskać domysły. (Czy czcionka nie powinna być wyświetlana po otwarciu PSD i zaznaczeniu odpowiedniego tekstu?)

I oczywiście, jeśli nie jest to czcionka bezpieczna dla sieci, musisz znaleźć odpowiedni sposób na jej zastąpienie lub zapewnienie zapasowego stosu.

Użyj Creative Cloud Extract

Wyświetla listę wszystkich używanych czcionek (między innymi przydatnych rzeczy).

Na podstawie oryginalnej odpowiedzi Davida (DetectFonts.jsx) zmodyfikowałem skrypt, aby naprawić problem zgłoszony przez Drew w komentarzach: Znajdź wszystkie czcionki użyte w pliku Photoshopa .

Postępuj zgodnie z oryginalnymi instrukcjami, ale zamiast tego użyj tego skryptu - jedyną różnicą jest kilka zerowych kontroli (przypuszczalnie albo różnica w wersji Photoshopa, albo coś wspólnego z brakującymi danymi na temat określonych typów obiektów, prawdopodobnie projektanta lub systemu operacyjnego)

Prześlę również żądanie ściągnięcia na 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.');
}

Otwórz Photoshop. Przejdź do Windows »Postać . Pojawi się małe pudełko. Wystarczy wybrać warstwę tekstową, a pole pokaże rodzinę czcionek, rozmiar i tak dalej.

Użyj narzędzia online, aby uzyskać czcionki pliku psd

http://psdfonts.com/

Deweloper zapytał mnie prawie tak samo, jak potrzebujesz. Wymyśliłem edytowanie prostego skryptu, aby wyeksportować właściwości warstwy (tekst, nazwę czcionki, rozmiar czcionki, kolor czcionki), których potrzebujesz podczas programowania, do pojedynczego pliku txt (powinien działać na komputerze z systemem Windows).

Po prostu zapisz to jak „ExportTexts.js” i wstaw do Adobe Photoshop> Ustawienia wstępne> Skrypty.

Następnie uruchom (lub uruchom ponownie) Photoshop i uruchom skrypt (Plik -> Skrypty -> ExportTexts). Upewnij się również, że nie rozgrupowałeś wszystkich warstw, zanim to zrobisz. Wyeksportowany plik powinien znajdować się w tym samym katalogu, co plik 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

Istnieje bezpłatny program Photoshop Extension / Panel, który może wykonać tę pracę za Ciebie, darmowy wykrywacz czcionek Photoshop ( http://www.layerhero.com/photoshop-font-detector/ ), a jeśli chcesz zbierać / kopiować pliki czcionek z systemu folder, wypróbuj program Photoshop Art Packer ( http://www.layerhero.com/photoshop-art-packer/ )

Na karcie Warstwy dostępna jest opcja, która pozwala filtrować wszystkie warstwy, aby wyświetlać tylko czcionki. Musisz wybrać każdą warstwę, aby je zobaczyć i jest to przydatne tylko wtedy, gdy potrzebujesz na nich szybkiego spojrzenia

Mam nadzieję, że to pomoże komuś trzy lata później.

Chciałem poznać czcionki dokumentów wraz z ich stylami, rozmiarami, kolorami, formatowaniem itp. Na potrzeby tworzenia stron internetowych i celów CSS, więc oto, co wymyśliłem:

1. Kliknij ikonę „T” w panelu Warstwy, aby filtrować / wyświetlać tylko warstwy tekstowe
2. Shift + lewy przycisk myszy najwyższą warstwę tekstową w palecie Warstwy
3. Przewiń do końca palety Warstwy i Shift + kliknij lewym przyciskiem myszy dolną warstwę tekstową
4. Kliknij prawym przyciskiem myszy wybrane warstwy na palecie Warstwy i wybierz „Duplikuj warstwy”
5. W obszarze Dokument docelowy wybierz Nowy
6. Przejdź do nowego dokumentu, który powinien zawierać wszystkie warstwy tekstu
7. Zaznacz ponownie wszystkie warstwy tekstu (patrz krok 2 i 3)
8. Kliknij ikonę folderu u dołu palety Warstwy, aby połączyć wszystkie warstwy tekstowe w jedną grupę
9. Zmień tryb mieszania grupy (menu rozwijane na palecie warstw) na „Normalny”
10. Kliknij nową grupę prawym przyciskiem myszy
11. Wybierz „Kopiuj CSS”
12. Wklej do dokumentu i sformatuj listę stylów według potrzeb!

Aby uzyskać informacje o czcionkach z pliku PSD, możesz użyć narzędzi online, jeśli nie możesz lub nie chcesz używać Photoshopa (lub jeśli wolisz używać Gimp, który rasteryzuje czcionki PSD).

Na przykład możesz wypróbować ten internetowy ekstraktor czcionek HTML5 PSD „Pobierz czcionki PSD”.

Jest to ekstraktor informacji o czcionkach PSD oparty na psd.js projektu Melitingice Github , który nie wymaga przesyłania plików, działa lokalnie na stronie przeglądarki