Photoshop 파일에 사용 된 모든 글꼴 찾기

나는 이것을 .psd(Photoshop 파일) 가지고 있으며 HTML 및 CSS로 변환하려고합니다.

내가 결정할 수없는 것은 그들이 사용한 글꼴입니다. .psd

Photoshop 파일에서 어떤 글꼴이 사용되었는지 어떻게 알 수 있습니까?

정보 추출 방법에 따라 다릅니다.

섹션 또는 텍스트 영역 당

텍스트 도구 ( 세리프가있는 T 아이콘)를 선택하고 텍스트 영역을 클릭하여 편집하십시오. 문자 창에서 어떤 글꼴이 사용되고 있는지 보여줍니다.

한눈에 사용되는 모든 글꼴

1. 이미지 문서를 PDF로 저장 또는 내보내기
2. Adobe Reader에서 PDF 버전을 엽니 다
3. 파일 → 속성 → 글꼴을 선택하십시오.

이 것 사용되는 모든 임베드 폰트 목록 당신이 그들을 포함 할 수 있습니다 제공, PSD 파일에 있습니다.

누락 된 글꼴

문자 도구에서 글꼴 선택 드롭 다운으로 이동하십시오. 목록의 끝에는 이미지에서 사용되지만 시스템에서 누락 된 글꼴이 있습니다. 이들은 일반적으로 회색으로 표시됩니다.

래스터 화 된 이미지

서체가 필요한 래스터 화 된 이미지가 보이면 해당 섹션 만 선명한 독립형 이미지로 내보내고 서체 정의 와 같은 서비스를 사용 하여 서체 를 결정하는 것이 가장 좋습니다 .

이 스크립트를 Photoshop> 사전 설정> 스크립트 폴더에 새 파일로 저장하십시오. "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.',);
}

PSD 파일 형식은 문서화 된 Adobe에서 - 그것은 글꼴 정보를 저장하는 방법 당신이 읽을 수 있습니다.

그런 다음 파일의 16 진 덤프를 검사하고 파일 형식 스펙을 사용하여 글꼴을 찾을 수 있습니다.

또는 stringsLinux / Unix 시스템에 있는 유틸리티 의 출력에 글꼴 이름이 표시되어야 합니다.

PS 스크립트를 사용하면 PSD 레이어를 반복하고 텍스트 레이어 데이터를 가져올 수 있습니다.

최근에 JavaScript 기반 스크립트를 실험하여 개발자에게 제공되는 구성 요소에 글꼴 정보를 직접 오버레이했습니다. 아직 끝나지 않았지만 여전히 관심이 있다면 (이것은 꽤 오래된 것입니다) 창에 사용 된 글꼴을 팝업하는 빠르고 더러운 버전을 넣을 수 있습니다.

업데이트 : 나는 개발중인 스크립트의 거칠지 만 작동하는 "lite"버전을 모았습니다. https://github.com/davidklaw/completer 에 기고 하십시오 . 스크립트에 익숙하지 않은 사용자는 스크립트 파일을 가져 와서 PS Presets / Scripts 폴더에 넣고 File-> Scripts에서 사용할 수 있습니다.

빠진 글꼴을 찾는 빠르고 쉬운 방법

1. Windows-> 문자 작은 문자 상자에 글꼴 정보가 표시됩니다.

2. 글꼴 이름 드롭 다운을 선택하고 끝까지 아래로 스크롤하십시오.

3. 글꼴 목록 끝에 누락 된 글꼴 목록이 밝은 회색으로 표시됩니다.

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

텍스트가 이미 래스터 화 된 경우 쉽게 식별 할 수있는 서체를 사용하여 영역을 자르고 .png로 저장 한 후 WhatTheFont에 업로드하여 텍스트가 무엇인지 알 수 있어야합니다. 모호하거나 맞춤형입니다.

Identifont 는 서체의 특성을 설명하는 또 다른 사이트입니다.

필요한 텍스트를 찍어 (바람직하게 확대), WhatTheFont 를 사용 하여 추측합니다. (PSD를 열고 해당 텍스트를 선택할 때 서체가 보이지 않습니까?)

물론 웹에 안전한 글꼴이 아닌 경우이를 대체하거나 대체 스택을 제공하는 적절한 방법을 찾아야합니다.

사용 크리에이티브 클라우드 추출

사용 된 모든 글꼴이 나열됩니다 (다른 편리한 것들 중에서).

David의 원래 답변 (DetectFonts.jsx)을 기반으로 다음과 같은 주석에서 Drew가보고 한 문제를 해결하도록 스크립트를 수정했습니다 . Photoshop 파일에 사용 된 모든 글꼴 찾기 .

원래 지침을 따르되 대신이 스크립트 본문을 사용하십시오. 차이점은 몇 가지 null 확인입니다 (아마도 Photoshop 버전 차이 또는 디자이너 또는 운영 체제 별 특정 개체 유형의 데이터 누락과 관련이있을 수 있음).

또한 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.');
}

Photoshop을 엽니 다. Windows»Character로 이동하십시오 . 작은 상자가 나타납니다. 텍스트 레이어를 선택하면 상자에 글꼴 패밀리, 크기 등이 표시됩니다.

온라인 도구를 사용하여 psd 파일의 글꼴 가져 오기

http://psdfonts.com/

개발자는 당신이 필요로하는 것과 거의 같은 생각을했습니다. 개발 할 때 필요한 레이어 속성 (텍스트, 글꼴 이름, 글꼴 크기, 글꼴 색상)을 단일 txt 파일 (Windows 시스템에서 작동해야 함)로 내보내는 간단한 스크립트 편집을 생각해 냈습니다.

"ExportTexts.js"와 같이 저장하고 Adobe Photoshop> Presets> Scripts에 넣으십시오.

그런 다음 Photoshop을 실행 (또는 다시 시작)하고 스크립트 (파일-> 스크립트-> ExportTexts)를 실행하십시오. 또한이 작업을 수행하기 전에 모든 레이어의 그룹을 해제했는지 확인하십시오. 내 보낸 파일은 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

이 작업을 수행 할 수있는 무료 Photoshop Extension / Panel이 있으며 Free Photoshop Font Detector ( http://www.layerhero.com/photoshop-font-detector/ ) 및 시스템에서 글꼴 파일을 수집 / 복사하려는 경우 폴더에서 Photoshop Art Packer ( http://www.layerhero.com/photoshop-art-packer/ )를 사용해보십시오.

레이어 탭에는 글꼴 만 표시하도록 모든 레이어를 필터링 할 수있는 옵션이 있습니다. 실제로 보려면 각 레이어를 선택해야하며 한 눈에보기가 필요한 경우에만 유용합니다

이것이 요청 된 후 3 년 동안 누군가를 돕기를 바랍니다.

웹 개발 및 CSS 목적을 위해 문서 글꼴과 스타일, 크기, 색상, 서식 등을 알고 싶었습니다.

1. 레이어 패널에서 "T"아이콘을 클릭하여 텍스트 레이어 만 필터링 /보기
2. 레이어 팔레트에서 맨 위 텍스트 레이어를 Shift + 왼쪽 클릭
3. 레이어 팔레트의 맨 아래로 스크롤하고 맨 아래 텍스트 레이어를 Shift + 왼쪽 클릭
4. 레이어 팔레트에서 선택한 레이어를 마우스 오른쪽 버튼으로 클릭하고 "중복 레이어"를 선택하십시오
5. 대상 문서에서 새로 만들기를 선택하십시오.
6. 모든 텍스트 레이어가 포함 된 새 문서로 이동
7. 모든 텍스트 레이어를 다시 선택하십시오 (2 단계 및 3 단계 참조).
8. 레이어 팔레트의 하단에있는 폴더 아이콘을 클릭하여 모든 텍스트 레이어를 하나의 그룹으로 만듭니다
9. 그룹의 혼합 모드 (레이어 팔레트의 드롭 다운)를 "정상"으로 변경하십시오.
10. 새 그룹을 마우스 오른쪽 버튼으로 클릭하십시오
11. "CSS 복사"를 선택하십시오
12. 문서에 붙여넣고 필요에 따라 스타일 목록을 형식화하십시오!

글꼴 정보를 PSD 파일로 가져 오려면 Photoshop을 사용할 수 없거나 사용하지 않을 경우 (또는 Gimp 사용을 선호하는 경우 PSD 글꼴을 래스터 화) 온라인 도구를 사용할 수 있습니다.

예를 들어이 html5 PSD 글꼴 온라인 추출기 "Get PSD Fonts"를 사용해 볼 수 있습니다 .

Melitingice Github 프로젝트 psd.js 를 기반으로하는 PSD 글꼴 정보 추출기 이며 파일을 업로드 할 필요가 없으며 브라우저 페이지에서 로컬로 작업합니다.