So, it seems most of us are having some difficulties with getting our images to align properly with this awesome Layerslider plugin. I’ve put together a short tutorial on how to align your images so that when your page is loaded it will look proper in any screen resolution. Most of the settings you should probably know so I am only going to show you how to make your images for an awesome slideshow.

*There is an update to this post on another way to work in adjusting your images for the Layerslider. Both ways will work nicely but the latter will save some disk space and help with image loading time. Have fun!

1. Create a virtual slideshow in photoshop based on a 940px width ratio and which ever height you want to use. I used a 400px for my height in this case but you can use whatever looks best to you.

2. Once you’ve created your virtual slider we need to save each image to coincide with the 50% setting in the “Left” column of the layerslider settings. This will keep all of your images aligned properly for all screen resolutions. Before we get started, create a new layer and leave it for now. We will use this layer later on.

3. Slicing up your virtual slideshow to create the real thing.
Since my slide only has one image which aligns left i am going to use alt + left click on my Laptop layer to view only that image. Now, for me, I like to keep the size of my images to the lowest possible kb just for loading purposes so I am going to trim off all of the transparent pixels. If you’d like to do the same, go ahead and choose Image > Trim and make sure the “transparent pixels” is selected. Now you should have only your image ready to save without any of the transparent pixels showing except for the few that are in your actual image.

Now we need to create the other images.
At this point you are looking at your image with the removed pixels. We want to get back to your slider layout so for me I use command + Z to undo my transparent pixel removal until I back to the full scope of my layout. Alt + left click your layer and you should be looking at your original concept.
4. Alt + left click the next layer you need.

Again, I don’t want all these transparent pixels so I am going to use the same method as before except this time I don’t want to remove the transparent pixels on the left so uncheck that radio button when using the trim tool.

Your image should now look like the one below.

Do this for all of your images that do not align completely left in your slider.

Now, when you have all of your slider images in your slider using the div Type and HTML Style width:940px; & Left 50%, all will be aligned perfectly. You will just need to align the vertical movement which I suggest you do before you assign the 50% value to your settings as this setting will change as you move the image around.

Hope this helps someone. There is probably a better way to do this but this is what I was able to sort out.