Tuesday, 22 September 2015

How to make an Electricomic - Part 2



Continuing the How to make an Electricomic guide. If you've worked through the previous guide you should now have a copy of the Electricomics Generator on your computer and an example folder that contains all the files that makes up your first Electricomic.

The app is fairly self-explanatory but I'll run through the basics of creating pages, adding images and publishing your comic.

If you haven't already, fire up the Electricomics Generator, select 'Open Project', and browse to your folder (our example one is electricomic.elcxproject) and click OK. You'll be facing a screen that looks like this.



The main content area of the screen contains your first Electricomic page. We know it's the first page because the box below has a handy '1' inside of it. Nice. To create a new page, simply click the big green button in the bottom right corner. Do that now and you'll see more pages appear next to the first, all numbered. You can name the pages in the space provided for ease of reference, delete unwanted pages with the red dustbin button, or change the order of the pages by grabbing the slider arrows and dragging and dropping them in place.

What's a page?
An Electricomic is read using a series of finger taps in your iPad. When a reader opens a new comic they will be presented with page 1. By tapping the screen, they will move on to page 2, then page 3, and so on. Using this simple concept you can take your reader on a journey of fingery digital comic book ecstasy.

Each page needs to contain at least one image (otherwise it would be blank page, obvs) although you can have as many images as you want on a single page. To add an image to a page, simply click the 'Add Image' button, select the image you want from your computer, then click the 'Upload' that'll magically appear below Add Image button.

By clicking 'Upload' 3 things will happen:

  • The image will be added to the page canvas
  • An info box will appear in the image section containing that image's properties
  • The image will be added to the images folder in your Electricomic project folder


Looking at the image on the page canvas, you can drag and drop it in place and re-size using the handle in the bottom right corner of the image. Alternatively, you can directly adjust the image's properties in the image info box.

1) Slidey arrow for moving image up and down this list
2) Preview of the image
3) I guess this is for adding a reference name but it's currently not working for me
4) The width of the image
5) The height of the image
6) Positioning - Number of pixels from the left hand edge of the page
7) Positioning - Number of pixels from the top edge of the page
8) z-index refers to the images vertical positioning. Images are placed on the canvas in layers. Picture a cake (mmmmm, cake). Imagine yourself directly above it looking down. An image with a z-index of 1 is the bottom layer of the cake, z-index 2 is the next layer up (the cream, the cream), z-index 3 a layer of sponge, and so on. If an image with a z-index of 3 is the full size of the canvas, you won't see the 2 layers below it. This is the law of cake and z-indexes.
9) Reset the image's properties
10 Delete the image

It's then simply a matter of adding and positioning images on however many pages you need. You can preview how your work will appear anytime by clicking 'View Comic Preview' in the main menu.

Don't forget to enter relevant information in the Settings & Metadata boxes on the left hand side of the screen.

Finally, for the cherry on the cake, you'll need to add a cover image to your project folder. Make a 250x350 pixel .PNG named 'cover' and drop it in to the project folder. This image will appear in the Electricomics app as your cover.



When all this is done and you're ready to rock simply click 'Generate' in the main menu and a .elcx file will be created in the main Electricomics Generator folder. High fives all round. You've only gone and made an Electricomic, check your bad self.

Now, you now need to upload this file to a web server and share the URL of the file so people can read it via the Electricomics iPad App


How to read an Electricomic

1) Open up the Electricomics app on your iPad.

2)  Press the Electricomics E in the top left corner.

3) Select the download option.

4) Press the plus sign.

5) Enter the URL of an Electricomic eg.
    http://www.backfromthedepths.co.uk/MirrorMirror.elcxproject.elcx

6) Click the Open button

7) Enjoy.