Skip to content

How to Use

Goce Mitevski edited this page May 23, 2023 · 17 revisions

Blog Image Generator (BIG) by Keitaro was designed to be very easy to use.

Read along if you'd like to find out more about the existing User Interface controls and all of the available options.

keitaroinc github io_blog-image-generator_

General Information

The Blog Image Generator user interface is split between two main sections:

  • Sidebar - where the user controls are contained
  • Preview - where the user is able to see a live preview of the image that is being prepared.

Headline

The Headline section includes controls for the text content, text Size, text Color, Horizontal and Vertical Position.

keitaroinc github io_blog-image-generator_headline

The headline text can be modified by changing the content of the text input field.

Size, Horizontal Position and Vertical Position controls are represented as range inputs. These can be modified by sliding the range point across the track. Each control is preset to a default value and the value can be changed within a predefined set of values.

The Color control is provided by the browser color control and may vary depending on the operating system or browser used. The Color control is activated on click.

Border

The Border section allows for setting an otter border to the image. The Border sections includes a control for the Border Width and Color.

The Border Width control is represented as a range input. The value can be changed within a predefined set of values.

keitaroinc github io_blog-image-generator_border

The Color control is provided by the browser color control and may vary depending on the operating system or browser used. The Color control is activated on click.

Background

keitaroinc github io_blog-image-generator_background

Background image by Sean Sinclair

Gradient

keitaroinc github io_blog-image-generator_gradient

Icon

todo

Keitaro Logo

todo

Aspect Ratio

todo

Download

todo

Clone this wiki locally