PSD 파일의 데이터를 HTML로 옮기는 것이 번거로움

비주얼 디자이너가 만든 PSD 파일을 바탕으로 마크 업 엔지니어가 HTML을 만들 수 있다고 생각합니다. 그 때 Photoshop의 데이터를 HTML에 반영시키는 것이 귀찮다고 생각했습니다.

텍스트 레이어의 문자열을 반영하는 경우

예를 들어 텍스트 레이어에 정의된 문자열을 복사하여 HTML에 붙여넣을 수 있습니다.

문제점

copipe 실패의 위험

제대로 복사할 수 있다고 생각해도 일부 빠져 있는 일이 있을지도 모릅니다.

수정이 있었을 때의 번거로움

수정이 있었을 때는, 또 코피페를 할 필요가 있습니다.

해결책

프로그래밍을 사용하여 텍스트 레이어의 문자열을 검색할 수 없는지 생각했습니다.

Photoshop Generator

Photoshop CC에서는 Generator를 사용할 수 있습니다. 이것은 Generator는 Node.js 서버이며 Photoshop 작업을 모니터링하면서 Photoshop의 기본 기능에 액세스 할 수 있습니다.

Generator 도입

도입 방법은 아래를 참조하십시오.
・참고
Node.js+Photoshop: Generator 설계 및 사용법

PSD 파일 준비

레이어 이름
텍스트


layerHoge
hoge

layerFuga
fuga

layerPiyo
piyo


위와 같은 PSD 파일을 준비해 보았습니다.
이번은 그룹을 사용한 중첩 구조에는 대응하고 있지 않습니다 w그룹을 만들면 움직이지 않습니다.

TextLayer 찾기

Generator를 사용하여 텍스트 레이어를 찾아보세요.

참고 자료

우선 아래의 참고 페이지에서, 「generator-getting-started-master」를 git 혹은 zip으로 다운로드해, ​​플러그인의 사용법을 어지럽히 이해해 보세요.
Script Your First Adobe Generator Plugin For Photoshop

모든 레이어 정보 얻기

main.js

function requestEntireDocument(documentId) {
    if (!documentId) {
        console.log("Determining the current document ID");
    }

    _generator.getDocumentInfo(documentId).then(
        function (document) {
            // console.log("Received complete document:", stringify(document));
            jsonParse(stringify(document));
        },
        function (err) {
            console.error("[Tutorial] Error in getDocumentInfo:", err);
        }
    ).done();
}

"generator-getting-started-master"를 보면 "_generator.getDocumentInfo"에서 모든 레이어 정보를 JSON으로 출력하고 있음을 알 수 있습니다. 직접 정의한 jsonParse 함수에 전달합니다.

json 만들기

function jsonParse(jsonString){
    var obj = JSON.parse(jsonString);
    var layers = obj.layers;
    var textLayers = {};
    var textLayerData = {};
    var fs = require("fs");

    for(var i = 0;i < layers.length;i++){
        var layer = layers[i];
        //find textLayer
        if(layer.type == "textLayer"){
            //set textLayer name and textKey
            var textObj = {};
            textObj["text"] = layer.text.textKey; 
            textLayers[layer.name] = textObj;
        }
    }

    textLayerData["textLayerData"] = textLayers;

    fs.writeFile("./test/plugins/naoyaTest/config.json", JSON.stringify(textLayerData, null, '    '));
}

"./test/plugins/naoyaTest/config.json"일단 플러그인 바로 아래에 json을 저장해 보겠습니다.

· 모든 소스
htps : // 기 st. 기주 b. 이 m/아버지/118에 fc572122에 b51b462

{
    "textLayerData": {
        "layerHoge": {
            "text": "hoge"
        },
        "layerFuga": {
            "text": "fuga"
        },
        "layerPiyo": {
            "text": "piyo"
        }
    }
}

위와 같은 json을 저장할 수있었습니다.

Jade에서 json 사용

이번에는 템플릿 엔진 Jade를 사용하여 얻은 JSON 데이터를 출력해 보겠습니다.

gulpfile.js 설정

gulpfile.js

var gulp = require('gulp');
var jadeTest = require('jade');
var jade = require('gulp-jade');
var data = require("gulp-data");

var paths = {
    jadeFile:"./app/jade/*.jade",
    json:"./app/config/test.json"
};

gulp.task('jade', function() {
  return gulp.src(paths.jadeFile)
    .pipe(data(function(file) {
      return require(paths.json);
    }))
    .pipe(
        jade({
            pretty: true//not minifiy
        })
    )
    .pipe(gulp.dest('app'));
});

gulp.task('watch', function() {
  gulp.watch(paths.jadeFile, ['jade']);
});

gulp.task('default', ['watch']);

gulp-data를 사용하여 json을 가져 와서 jade에 전달합니다.

・참고
htps //w w. 음 pmjs. 코 m / Pac 카게 / gu lp

jade로 json 데이터 출력

index.jade

p #{textLayerData.layerHoge.text}
p #{textLayerData.layerFuga.text}
p #{textLayerData.layerPiyo.text}

jade에서는 그대로 json에 액세스할 수 있는 상태가 되어 있으므로, 닷으로 연결해 출력합니다.

index.html

<p>hoge</p>
<p>fuga</p>
<p>piyo</p>

텍스트 레이어의 문자열을 출력할 수 있었습니다.

요약

작성을 마치고 소감을 말합니다. 장점, 단점을 올려 보겠습니다.

장점

코피 페미스 해결

js로 텍스트 레이어의 내용을 얻기 때문에 복사 페미스가 사라졌습니다.

파일 업데이트가 쉽습니다.

비주얼 디자이너가 PSD 파일을 편집한 후 Generator를 사용하여 json을 업데이트합니다. 그것을 git에 push하고, 마크 업 엔지니어가 pull하면 텍스트가 업데이트됩니다.

단점

레이어에 명명 규칙 필요

비주얼 디자이너에게 미리 레이어 이름 규칙을 알려야 합니다. 예를 들어 일본어가 아니라 영어로 명명해야 합니다.

중첩 구조를 지원하지 않음

샘플 PSD 파일은 그룹을 사용한 중첩을 지원할 수 없습니다. 치명적입니다 w 실천에는 아직 사용할 수 있을 것 같지 않습니다. . . .