{"id":1955,"date":"2022-08-13T16:44:48","date_gmt":"2022-08-13T14:44:48","guid":{"rendered":"http:\/\/www.phreekz.de\/wordpress\/?p=1955"},"modified":"2022-08-13T16:44:48","modified_gmt":"2022-08-13T14:44:48","slug":"ps-photoshop-css-html-aus-ebenen","status":"publish","type":"post","link":"https:\/\/www.phreekz.de\/wordpress\/2022\/08\/ps-photoshop-css-html-aus-ebenen\/","title":{"rendered":"[ps] Photoshop css\/html aus Ebenen"},"content":{"rendered":"\n<p>Manchmal m\u00f6chte ich schnell mal etwas in Photoshop scribblen, zB in Architekturpl\u00e4nen, und dann auf ner Webseite bereitstellen. Schnell noch mit etwas JS fl\u00fcssig gemacht, Daten einblenden etc pp. Daf\u00fcr dann f\u00fcr alle Layer die CSS-Daten einzeln auslesen und copy\/pasten, N\u00f6\u00f6 Danke. Also mir schnell mal sowas geschrieben. Layer als png speichern, ab in img Ordner, dann css und html-Schnippsel aus dem css_easy Script r\u00fcberkopiert.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*\n * collect and merge css\n * for all layers\n * -----------------------\n * August 2022 - @phreekz\n * -- v0.1 - initial version\n *\/\n \n#target photoshop\n \n \/\/ init\nvar scriptName={en:\"css easy\",de:\"css easy\"};\napp.bringToFront();\nvar doc = app.activeDocument;\nvar layerName = \"\";\nvar sc = \".ps{ position:absolute; }\\r\\n.desc{color:#000;background-color:#fff;}\\r\\n\";\nvar sh = \"\";\nvar curLayer\n\nvar tmp =0;\n\/\/var folder = Folder.selectDialog(\"Select a folder to save the css\");\n\ngoThroughLayers (doc);\nvar w = outputWindow(sc,sh);\n$.writeln(w.show());\n\nfunction goThroughLayers(parentLayer){\n    for(var i=0;i&lt;parentLayer.layers.length;i++){\n        curLayer = parentLayer.layers&#91;i];\n        doc.activeLayer = curLayer;\n        if(curLayer.typename =='LayerSet'){goThroughLayers (curLayer)}\n        else{\n            if(curLayer.kind = LayerKind.NORMAL){\n\t\t\t\tlayerName = curLayer.name;\n\t\t\t\tvar X = curLayer.bounds&#91;0].as(\"px\");\n\t\t\t\tvar Y = curLayer.bounds&#91;1].as(\"px\");\n\t\t\t\tvar Wt = curLayer.bounds&#91;2].as(\"px\")-X;\n\t\t\t\tvar Ht = curLayer.bounds&#91;3].as(\"px\")-Y;\n\t\t\t\tsc += \"#\"+layerName+\" {\";\n\t\t\t\tsc += \"\\r\\n\\tbackground-image: url('img\/\"+curLayer.name+\".png');\";\n\t\t\t\tsc += \"\\r\\n\\tposition: absolute;\";\n\t\t\t\tsc += \"\\r\\n\\tleft: \"+X+\"px;\\n\\ttop: \"+Y+\"px;\";\n\t\t\t\tsc += \"\\r\\n\\twidth: \"+Wt+\"px;\\n\\theight:\"+Ht+\"px;\";\n\t\t\t\tsc += \"\\r\\n\\t}\\r\\n\";\n\t\t\t\tsh += \"&lt;div class='ps' id='\"+layerName+\"'>&lt;p class='desc'>\"+layerName+\"&lt;\/p>&lt;\/div>\\r\\n\";\n            }\n        }\n    }\n}\n\nfunction outputWindow(scss,shtml){\n\tvar w = new Window('dialog', 'css easy result');\n\tvar c = w.add('edittext',&#91;10,10,600,300], scss, {multiline:true});\n\tvar h = w.add('edittext',&#91;10,320,600,620], shtml, {multiline:true});\n\tvar b = w.add('button', undefined, 'OK', {name:'ok'});\n\treturn w\n}<\/code><\/pre>\n\n\n\n<p>Diesen Code in eine &lt;blablabla>.jsx Datei abgeworfen. Entweder in den Script-Ordner reinkopiert oder per &#8222;Durchsuchen..&#8220; zum Script verweisen. Wem&#8217;s hilft. Gerne geschehen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>schnell mal sowas f\u00fcr Photoshop geschrieben. .. css und html-Schnippsel aus dem css_easy Script r\u00fcberkopiert.<\/p>\n","protected":false},"author":1,"featured_media":1957,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[137,29],"tags":[422,423,128,126,127],"class_list":["post-1955","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-foto-ebb","category-pc-leben-und-leiden","tag-css","tag-html","tag-jsx","tag-photoshop","tag-scripting","entry"],"_links":{"self":[{"href":"https:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/posts\/1955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/comments?post=1955"}],"version-history":[{"count":1,"href":"https:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/posts\/1955\/revisions"}],"predecessor-version":[{"id":1958,"href":"https:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/posts\/1955\/revisions\/1958"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/media\/1957"}],"wp:attachment":[{"href":"https:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/media?parent=1955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/categories?post=1955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/tags?post=1955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}