Old 6th October 2005, 17:10   #1
rpeterclark
Major Dude
(Reviewer)
 
rpeterclark's Avatar
 
Join Date: Aug 2002
Location: South Florida
Posts: 1,388
CS_PSDtoWAL - Photoshop CS script

I wrote this script to help me with a skin that has a crazy amount of layers and I think some of you will find it useful. At first I was looking for the old PSDtoWAL application (which doesn't seem to be around anymore), but I knew I was going to have a lot of groups to deal with and I didn't think that app handled that anyway.

The gist of the script is that it will loop through the layers of a PSD file, copy and save each layer cropped down to it's minimum dimensions and generate the necessary XML stuff to put it all back together. It's been thoroughly tested with PS CS2, but only casually tested with PS CS.

Here's some additional details:
  • The script will generate it's output in the same directory as the PSD with a folder name [PSD file name]_output.
  • The script will skip Layer and LayerSet objects that are hidden. This is useful for being able to keep stuff in your PSD (reference layers, maps, etc) that you don't want inserted into the generated skin file.
  • The script will only process normal Layer objects and LayerSet objects, meaning that it will not process text layers, adjustment layers, vector layers etc. Anything other than normal layers should be rasterized/flattened.
  • The script will not process Layer Styles, you'll need to flatten layer style effects in order to have them included.
  • LayerSet objects are output as <group> and <groupdef> elements, it will recursively go through nested LayerSet objects.
  • The script uses Layer object names for XML element names and file names, make sure they do not contain characters that would cause this to fail.

The way I personally use it is to take the PSD, crop it down to the skin dimensions, appropriately arrange/group/divide the layers in a way that I want them to appear in the skin, make sure all of the layer names are how I want them to appear and then run the script. I then move the generated files to their appropriate location and use several search & replaces to adjust the XML. You'll notice that the generated XML prefixes layers and groups with "container.layout." which is a personal preference in the way that I code skins and makes for easy searching & replacing later, if you don't like that, it's easy to remove in the script.

To run a script in PS, make sure the document you want to process has focus, then simply go to File > Scripts > Browse. You'll have to adjust the extension drop-down to see .js files (I kept it as .js in order to be compatible with PS CS). Better yet, record an Action of you selecting the script and assign it a function key. To test the results you can just drop the output folder into the Winamp skins folder and load it up, you should end up with a nice WAL equivalent of your PSD file.

Let me know if you have any questions or problems! Enjoy!
Attached Files
File Type: zip cs_psdtowal.zip (1.5 KB, 409 views)
rpeterclark is offline   Reply With Quote
Old 6th October 2005, 17:39   #2
leechbite
Major Dude
 
leechbite's Avatar
 
Join Date: Sep 2003
Location: Canada
Posts: 635
Send a message via Yahoo to leechbite
sounds like an awesome tool RPC. now i just wish i had PS CS. im using a very old version of PS.
leechbite is offline   Reply With Quote
Old 6th October 2005, 20:18   #3
SLoB
Major Dude
 
SLoB's Avatar
 
Join Date: Jul 2003
Location: UK
Posts: 1,316
cool idea RPC , i got ps cs, cant afford to keep buying the upgrades, not sure wot cs2 has that i need that cs cant cope with
but i'll check it out on that version, i havnt even tried to run psd2wal on cs, was doing them by hand again, altho i have been putting a lot of buttons on the same image and not seperate
SLoB is offline   Reply With Quote
Old 6th October 2005, 23:06   #4
skryingbreath
Post initializing...
 
skryingbreath's Avatar
 
Join Date: Sep 2005
Posts: 3,065
cool script
Thanks for putting this together ^_^
skryingbreath is offline   Reply With Quote
Old 6th October 2005, 23:27   #5
QuadHeliX
Major Dude
 
QuadHeliX's Avatar
 
Join Date: Jan 2003
Location: Washington State
Posts: 1,133
great I will try it out on my next skin with alot of layers.

BTW i still only use your Gamma Worker its still king of the hill. 1000+color themes
QuadHeliX is offline   Reply With Quote
Old 7th October 2005, 10:08   #6
Plague
f(caffeine){
return wasabi;
}
(Forum King)
 
Plague's Avatar
 
Join Date: Jul 2001
Location: Sweden
Posts: 3,984
awesome!

I'm always using psd2wal (the original version, before the colorbug) when I code skins, but it really need an update, to handle layersets and skip unwanted stuff, etc..
So this should be just what I needed..

I'll try it out the next time I code a skin.. about the same time as we all have flying cars..

j/k
Plague is offline   Reply With Quote
Old 7th October 2005, 12:47   #7
rpeterclark
Major Dude
(Reviewer)
 
rpeterclark's Avatar
 
Join Date: Aug 2002
Location: South Florida
Posts: 1,388
Heh, you mean you aren't all putting together skins this very instant?! Slackers!!
rpeterclark is offline   Reply With Quote
Old 7th October 2005, 15:53   #8
hammerhead
The Shark
(Forum King)
 
hammerhead's Avatar
 
Join Date: Jul 2002
Posts: 2,537
Send a message via AIM to hammerhead
I'll definetly try this..
hammerhead is offline   Reply With Quote
Old 16th October 2005, 09:53   #9
hammerhead
The Shark
(Forum King)
 
hammerhead's Avatar
 
Join Date: Jul 2002
Posts: 2,537
Send a message via AIM to hammerhead
It works fairly well, a great time saver

My only advice would be to include alpha tags for opacities. Also, sometimes images are not trimmed fully.
hammerhead is offline   Reply With Quote
Old 16th October 2005, 10:21   #10
rohan_pwln
Major Dude
 
rohan_pwln's Avatar
 
Join Date: Aug 2002
Location: 18 inches from hell
Posts: 736
Here's a feature suggestion:

If the word 'button' is found in the layer name, it will be written in XML as '<button id="button".../>' rather than '<layer id="layer"../>'

My MAKI contribs.: STONE
My WebSite My Blog My Skins: fnk 32 Rioport v1 Sienna Burning Steel
My Saying: Eat healthy, Stay fit... Die Anyway
rohan_pwln is offline   Reply With Quote
Old 18th October 2005, 17:15   #11
rpeterclark
Major Dude
(Reviewer)
 
rpeterclark's Avatar
 
Join Date: Aug 2002
Location: South Florida
Posts: 1,388
Cool, thanks for the suggestions guys, I may develop this script further. @hammerhead, the script itself does not actually trim any layers, it copies the contents of each layer and uses the boundaries that Photoshop provides for the output image, so if the output image does not appear fully trimmed then it is because the cooresponding layer has some stray pixels, possibly even off the canvas. When I first encountered that problem, I selected the entire canvas and cropped the file which eliminates the off-canvas pixels.

I have an update to the script for hose who are interested. I has a few changes:
  • The script will not output duplicate <groupdef> or <bitmap> elements anymore, which can occur if you have multiple layers/layerset objects with the same name. This is useful if you have repeated elements in your PSD because it will now instance the first <groupdef> declaration and save you some cleanup afterwards.
  • The script will now output relatively positioned layer/layerset objects by using a special layer name syntax, will explain this below.

You can now use a special syntax in the layer/layerset name in order to trigger relative positioning and to append any other attribute/value to an element. It's probably easiest to learn by example, let's say you have a layer in Photoshop with the following name:
bg.main.bottomleft|relaty;resize:bottomleft;sysregion

The script would output a layer element like this:
<layer id="container.bg.main.bottomleft" image="container.layout.bg.main.bottomleft" x="0" y="-19" relaty="1" w="19" h="19" resize="bottomleft" sysregion="1" />

When the script detects any relative positioning attributes in a layer name, it uses relative coordinates for positioning and adjusts the <layout> tag to support resizing. Attributes that do not have a value specified default to "1".

I'll attach an example PSD in the next post. By running the PSD through this updated script, you'll end up with a resizable skin suitable for component frames.
Attached Files
File Type: zip cs_psdtowal.zip (2.5 KB, 356 views)
rpeterclark is offline   Reply With Quote
Old 18th October 2005, 17:19   #12
rpeterclark
Major Dude
(Reviewer)
 
rpeterclark's Avatar
 
Join Date: Aug 2002
Location: South Florida
Posts: 1,388
Run this example PSD through the script and you'll have a fully-functional resizable skin.
Attached Files
File Type: zip cs_psdtowal_example.zip (23.8 KB, 374 views)
rpeterclark is offline   Reply With Quote
Old 19th October 2005, 09:19   #13
Bizzeh
Forum Pirate
Beta Team
 
Bizzeh's Avatar
 
Join Date: Oct 2001
Posts: 2,032
doesnt seem to be around anymore? search psd2wal, second link down is http://forums.winamp.com/showthread....hlight=psd2wal
Bizzeh is offline   Reply With Quote
Old 19th October 2005, 13:03   #14
rpeterclark
Major Dude
(Reviewer)
 
rpeterclark's Avatar
 
Join Date: Aug 2002
Location: South Florida
Posts: 1,388
Ah, I had been searching for PSDtoWAL, rather than PSD2WAL. Oh well, I guess I'm glad I didn't find it otherwise I might not have written this script, which is much more useful anyway.
rpeterclark is offline   Reply With Quote
Old 7th November 2005, 21:33   #15
maxrabelo
Junior Member
 
Join Date: Nov 2005
Location: jkghkj
Posts: 6
Thanks Mr Jones, but at moment I didn't can make any skin... I don't understand all of you are write, because i'm not understand English very well...
Any people here write in portuguese?
Thanks for all, and I'm continuing trying.
maxrabelo is offline   Reply With Quote
Old 6th September 2006, 12:44   #16
Dregnought
Junior Member
 
Join Date: Sep 2006
Posts: 23
Send a message via ICQ to Dregnought Send a message via AIM to Dregnought Send a message via Yahoo to Dregnought
Quote:
The script will not process Layer Styles, you'll need to flatten layer style effects in order to have them included.
Uhh... how do I do that?
I found if I grouped each layer into a smart object then rasterised that it would work.. problem is that on some layers it just doesnt work.
Dregnought is offline   Reply With Quote
Old 6th September 2006, 13:56   #17
rpeterclark
Major Dude
(Reviewer)
 
rpeterclark's Avatar
 
Join Date: Aug 2002
Location: South Florida
Posts: 1,388
I find the easiest way to rasterize a layer with styles on it is to create a new blank layer above it (Ctrl-Shift-N), select both layers and then merge layers (Ctrl-E). The only catch with flattening styles is it won't work well on layers that use some non-normal blend modes (Burn, Dodge, Hard Light, etc). When I'm working on files that I know will be seperated like this, I specificlally avoid blend modes for this reason.
rpeterclark is offline   Reply With Quote
Old 6th September 2006, 18:16   #18
Dregnought
Junior Member
 
Join Date: Sep 2006
Posts: 23
Send a message via ICQ to Dregnought Send a message via AIM to Dregnought Send a message via Yahoo to Dregnought
ok... now im told that :P

well the 2 layers that do have it luckily the edge is a stroke edge.. so its a very fine edge with no shadow.. so what i'll do is flattern the image, (on a backup of course) cut them out... paste them onto the orignal.
Dregnought is offline   Reply With Quote
Reply
Go Back   Winamp & Shoutcast Forums > Skinning and Design > Modern Skins

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump