How can I manipulate a PSD file to get the position of the layers?

3

I'm working on a project where we have a .psd (Photoshop) file called "sprites" that contains all the site's icons.

I'd like to be able to get the positions of each layer to be able to automatically generate a css file by positioning each icon.

Is there anything ready that can help me? Or would I have to implement this?

How can I do this?

    
asked by anonymous 24.12.2013 / 19:06

3 answers

3

Paint.NET can handle PSD files. With the DLL PhotoShop.dll , I was able to manipulate the PSD file:

using PhotoshopFile;

One problem is that transparent layers do not exactly fill the space I need, so to get around this and have dynamic sizes I've inserted the icon size into the layer name ( 32x32-Nome da layer ). This way I can easily work with different sizes in the same file.

PsdFile ps = new PsdFile();
ps.Load(file);

// ordeno as layers pela posição
ps.Layers.OrderBy(l => l.Rect.X).ThenBy(l => l.Rect.Y)
    .ToList()
    .ForEach(l =>
    {
        // Separo o nome da layer to tamanho
        var nameTokens = l.Name.Split(new char[] { '-' }, 2);

        // o primeiro fragmento contém "largura x altura"
        var sizeTokens = nameTokens[0].Split('x');

        var size = new Size(Convert.ToInt32(sizeTokens[0]), Convert.ToInt32(sizeTokens[1]));
        var name = nameTokens[1]; // o segundo fragmento contém o nome

        var x = l.Rect.X - Math.Round((size.Width - l.Rect.Width) / 2.0, MidpointRounding.AwayFromZero);
        var y = l.Rect.Y - Math.Round((size.Height - l.Rect.Height) / 2.0, MidpointRounding.AwayFromZero);

        // gero o CSS para saida, output é uma StringBuilder
        output.AppendText(
            String.Format(".{0} {{ width: {1}px; height: {2}px; background-position: {3}px {4}px; }}{5}",
                name,
                size.Width,
                size.Height,
                x,
                y,
                Environment.NewLine
            )
        );
    });

In this way I can map layers to CSS, regardless of whether the file contains different icon sizes.

This project on Github .

    
27.12.2013 / 22:48
-2

There is a possibility of extracting CSS from an Illustrator CC Native File (up to the moment), it also serves other project elements such as buttons, banners, etc.

Extracting CSS from an Adobe Illustrator CC file

This is not going to solve your problem at the moment since the Project has already been done in Photoshop (I prefer it to set up my Layouts) but it's worth studying.

Remembering the advantage of using Illustrator icons is also to generate them in .SVG so as not to lose quality on mobile device, when the user zooms in on the page or uses the tweezers to enlarge the screen as well.

interesting link on .svg

    
30.01.2014 / 12:31
-3

Window - > Info

Use guidelines to make the sprite separations, the info window tells you the positions of the mouse or the selection. The rest is math.

Best:

Open in Fireworks and work with slices, in the properties window you can see the info you need.

I hope I have helped.

    
27.12.2013 / 19:24