Subscribe to my mailing list for updates on future projects

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.

Monday 21 September 2015

How to make an Electricomic


I've been dabbling with the new Electricomics Generator, a product still very much in its infancy, and thought it worthy of a 'How To' post so that other comic creators can get involved with this interesting project. I'm going to waffle on for a bit so if you're just after instructions, you can head straight to the Electricomics Guide.

Tales from the Digital Frontier

There's no doubt the comic book industry has changed dramatically over the last few years. Digital comics have proved themselves to be hugely popular, complementing rather than cannibalising traditional print comic book sales, as the industry as a whole enjoys a resurgence in popularity. The indie comics scene is also seeing an explosion of comic creators. It's a great time to be making comics as new digital opportunities mean creators can bypass printing cost, publishing directly to the web for an always hungry audience.

The latest avenue for self-made digital comics appears in the form of the all new Electricomics app. Initially launched at the start of September, and containing stories from the likes of Garth Ennis and Alan Moore, this experimental digital app, financed via a Digital R&D Fund for the Arts, was set up to explore the iPad's impact on digital comics and storytelling.

Electricomics was first announced in May last year. I'm always interested in anything relating to comics and new technology, so this venture got my comic receptors twitching with excitement. The Electricomics team made an appearance at Thought Bubble in November of last year to drum up interest in the project. I attended a panel they put on and spoke to some of the team members at their table. If someone was doing something interesting in digital comics in the UK. I wanted to know about it. Sadly, they didn't really have much to show at the time but it was interesting to hear what they had to say on the subject and learn a bit more about the project.

Several months later and the app itself has just been launched. It includes four stories, each one using a different navigational technique native to the iPad. Check it out for yourself.

I was keen to get my hands on the technology behind the app, so like a good little brown-noser, I let them know:



The following conversation went like this:



Luckily, the app creators Ocasta took my little jibe in the good spirits it was intended. However, I feel I must come good on the conversation, so I hope this little guide below will be of some use to others. I've also include the link to the story I've made using the generator at the bottom of the page.

Electricomics Guide

Last week, the open source code behind Electricomics was made available via Github. To the uninitiated, Github is a collaborative network for code nerds to work together, refining and improving software as a team. Respect to the nerds.

If you've never used Github before you might struggle to understand how to download and start using the Electricomics Generator. Here is a guide for those who need a little help.


1) Visit the Electricomics Github page https://github.com/electricomics

2) As we want to make an Electricomic, we're going to need the Electricomic Generator. Click on the 'generator' link.



3) We're now on the Generator main page. Click the 'releases' tab near the top.



4) Choose one of the available options depending upon your computer.



5) Unzip the folder.




6) Click on the folder and Extract it to your desktop (or wherever you want it)



7) You should now have a folder with all the files you need somewhere on your computer. Go to the folder. Go!

8) Inside the folder is a file called 'Electricomics Generator' click on that to open up the program.

9) You'll be faced with a window that looks like this. This is the canvas on which you will make your Electricomic. Give yourself a pat on the back. You're doing great so far.


10) First off, you'll need to start a New Project. Each Electricomic you make requires a separate folder in which all the relevant files for that project are stored. Click 'New Project' that in the top left corner of the application.

A new window will appear asking you browse somewhere and name your project folder. For simplicity, just choose the folder you unzipped in to earlier and name the project as electricomic. The application will then self-generate a new folder, which includes all the files you need for your new project. In our case the folder will be named electricomic.elcxproject.

You can change the name of the folder if you want but you must include the .elcxproject on the end of the folder's name. The app does not like any spaces in the folder name either so leave them out.

11) Now you simply click 'Open Project' from the main menu in the Electricomics Generator and select the folder you've just made. Congrats you're ready to make an Electricomic.



The guys at Ocasta have done a great job with this application. From here on in, it's pretty straight forward how to use the program...however, that's covered in part 2 of the guide.


In the mean time, there's no better way to learn something than to play with it. Here's a short horror story called Mirror Mirror, which I ran through the generator. In order to read this twisted tale you need to enter this URL in to the Electricomics iPad app downloadable through iTunes

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 the Electricomic:
    http://www.backfromthedepths.co.uk/MirrorMirror.elcxproject.elcx

6) Click the Open button

7) Enjoy.