Using The Info Panel In Photoshop

Well-Known Member

This was a very helpful thing I just discovered when trying to build a "Slider" animation for my web site. I figured I would share it with you, if you are working in Photoshop and trying to recreate your designs in other platforms, such as within a Wordpress slider animation.

I have a Wordpress site with the commercial plugin LayerSlider WP installed. It's a great plugin and you can easily add new layers to it an animate them with ease. It's also very "drag and drop" too which makes things even easier, but you can also enter in specific coordinates for an element if you want to as well.

The problem I had was that I designed the graphical elements of the slider in Photoshop, and was going to export all the different pieces of it as separate PNG graphics, but I wasn't sure how I would re-assemble everything in the LayerSlider WP plugin to be positioned precisely as it is in my Photoshop design.

This is where the Info panel in Photoshop came into play. To be honest, I had seldom used this, but today it totally came in handy. When you select a layer in Photoshop and have the Info panel enabled, it will show you the exact X and Y coordinate for that element. One important tip, if you have a layer (or group, or group of layers selected) and you are not seeing any coordinates for some reason, convert the whole thing to a SmartObject and they should appear. So from there, all you need to do is import the element into LayerSlider WP, then enter in the same coordinates. No need to "eyeball" everything and hope it's all lined up properly.

Also, it's important to make sure your Photoshop document is the same size as the dimensions set for your slider, so the coordinates match up. At the very least it should be the same width.