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

Question

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

I would like to get the positions of each layer to automatically generate a css file by placing each icon.

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

How can I do this?

Answer 1

The Paint.NET can handle PSD files. With the DLL Photoshop.dll, I managed to manipulate the PSD file:

using PhotoshopFile;

One problem is that transparent layers don’t exactly take up the space I need, so to get around it and have dynamic sizes I 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
            )
        );
    });

This way I can map layers to CSS, no matter if the file contains different icon sizes.

This project on Github.

Answer 2

There is a possibility to extract the CSS from a Native Illustrator CC file (Last Version of the Software to date) including it serves for other project elements such as buttons, banners etc.

How to extract CSS from an Adobe Illustrator CC file

This will not solve your problem at the moment since the Project has already been done in Photoshop (I prefer it to assemble my Layouts) but it is worth taking a look at the subject.

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

Interesting link about aqruivo . SVG

Answer 3

Window --> Info

Use guidelines for making Sprite separations, the info window tells you mouse or selection positions. 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’ve helped.