Often when you are creating a website, you or your client aren’t sure about the colors or sizes of elements.
When there are only a few options, you can just fine-tune them using a photo editor during the initial phase, but in other times, you would like to have a draft of the website but with different color options, in order to choose which colors look better for those elements on the screen.
If you need show those multiple website draft versions to your client by sending them by email or to put them in the cloud, in order for the client to make a decision about which colors he would prefer, you are stuck in taking one screenshot per option.
Taking screenshots not only is a tedious process but it also limits you to your computer screen resolution. This is where ABeamer can help you to reduce dramatically the time you take to create one image per option, whenever the option is a color, a font-size, an element size, position, rotation, or its texts.
If have ABeamer already installed, it will only take you a few minutes to get the job done.
Just follow the following steps:
If ABeamer isn’t install, read here how to install it.
Create a hello project:
height are the resulting image size of each frame.
hello/abeamerto your project folder.
Add abeamer required files to your html file:
The link files are:
Script files are:
- Wrap the body of your website with:
- Add to the top of your
This assumes that your
scss file is in a project sub folder.
- Add your options as an animation:
In this example, it assumes you have an element with
main-page id and it will generate one PNG file per gray background color of the defined list.
If you open this page in the browser, it will change the background color of
main-page every second, sliding from white to darker gray colors.
But if you render it on the server, it will render immediately each frame without any delays.
To generate the PNG images, just run the abeamer command from your project folder:
You can try this example on codepen.
And you can render it without downloading, using:
And the output will look like this: