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:

 
$ abeamer create hello --width 800 --height 600

Where width and height are the resulting image size of each frame.

  • Copy the hello/abeamer.ini and hello/abeamer to your project folder.

  • Add abeamer required files to your html file:

The link files are:

<link href="abeamer/css/vendor/normalize.css" rel="stylesheet">
<link href="abeamer/css/abeamer.min.css" rel="stylesheet">
<link href="css/main.min.css?81177970" rel="stylesheet">

Script files are:

<script src="abeamer/js/vendor/core.min.js"></script>
<script src="abeamer/jshttps://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="abeamer/js/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="abeamer/messages/messages-en.js"></script>
<script src="abeamer/js/abeamer.min.js"></script>
  • Wrap the body of your website with:
<div class="abeamer-story" id=story>
  <div class="abeamer-scene" id=scene1>
      <!-- my website html -->
  </div>
</div>
  • Add to the top of your scss file:
@import "./../abeamer.ini";
body,
html,
.abeamer-story,
.abeamer-scene {
  width: $abeamer-width + px;
  height: $abeamer-height + px;
}

This assumes that your scss file is in a project sub folder.

  • Add your options as an animation:
$(window).on("load", () => {

  const story = ABeamer.createStory(/*FPS:*/1);

  const bkgColors = [];
  // the following loop, will create define 20 shades of grey.
  // for different colors, just replace the loop with the colors you need on
  // bgkColors
  for (let i = 0; i < 20; i++) {
    const c = 255 - i * 10;
    bkgColors.push(`rgb(${c}, ${c}, ${c})`);
  }

  const scene1 = story.scenes[0];
  scene1
    .addAnimations([{
      selector: '#main-page',
      duration: `${bkgColors.length}s`,
      props: [
        {
          prop: 'background-color',
          valueText: bkgColors,
        },
      ],
    }]);

  story.render(story.bestPlaySpeed());
});

This example was written in TypeScript but you can use JavaScript, although using TypeScript is advisable.
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:

$ abeamer render . --url (my-file-url)

You can try this example on codepen.

And you can render it without downloading, using:

$ abeamer render --dp --url http://www.abeamer.com/files/by-date/2018/08/test-website-colors --width 500 --height 1000

And the output will look like this:

Website with white background
Website with light gray background
Website with dark gray background