tutorial – d_s_t

AO3 doesn’t make it as easy as Wattpad does to add graphics to your fanfic, but it is still possible to achieve a look like this!

What you’ll need to do first is get a Flickr account. AO3 says they support other sites as well, but Flickr is the only one that’s recommended. Luckily, you can get one for free, and I found it pretty easy to set up. Just be sure to set your settings properly so that the graphics you upload as public (the only way to let AO3 access them) can’t be randomly taken by other people on Flickr. I set mine like this:

After you have a Flickr account with graphics uploaded to it, you’ll need to go to your photostream, click on the graphic you want, and then click the little arrow that says “Share Photo”.

After that, you’ll want to go to the part that says “Embed”.

Copy the code and go to the chapter where you want to add the graphic. Switch to the HTML view if you’re not already on it and paste the code right in.

By default, this code will link back to Flickr if anyone clicks on it. If you don’t want that (I didn’t), just delete all the code except for the parts that look like this:

To align the graphic in the center, simply add this code around it:

You can also change the width and height, but be careful to change them both the same way so your graphics don’t get distorted. For example, if I wanted my graphic to be twice as small, I would divide both the width and height by 2 and change the numbers to 360 and 127 or 128. I also recommend making graphics smaller rather than larger because increasing the size of graphics can make them blurry.

So, this works great for chapter banners, but any former Wattpaders out there might be wondering if there’s anything to be done about the fact that AO3 doesn’t have book covers. What can you do with this beautiful piece of art that you made/asked someone else to make just for your book?

Well, it’s not a perfect solution because AO3 also doesn’t allow the kind of coding I would need to make it look really nice, but you can achieve a look like this relatively easily.

How can you do this? Well, as it turns out, AO3 allows limited code in the summary field even though it doesn’t have a toggle between Rich Text and HTML there. This does mean that you’ll have to rely on previewing your first chapter in order to test it out, but if you copy this code exactly and replace my link, image sizing, book title, and description text with yours, it should turn out just like mine.

<img src=”https://live.staticflickr.com/65535/48445529792_f34d96b42f_b.jpg” width=”218″ height=”341″ alt=”Pokemon Rewritten” align=”left” />What if the Pokémon anime had been written differently? [and so on with the rest of your description]

For a master technique, use photo editing software to add some blank space on the right side of your cover. This will actually put some space between your cover and the text (sadly the only way I could find to do that). So it is a bit of extra work, but if you do it right, the payoff is something that looks like this!

Pokemon Rewritten Cover Sample with Padding and Credits

Also notice that I credited the artists who created my beautiful graphics here. I believe it’s extremely important for artists to get proper credit for their work. I also believe it’s extremely important not to steal fanart without permission. In this case, the images used are official ones from the anime, otherwise I would credit the artist or photographer of the original image as well and note that they were used with permission. You can also do this in a separate chapter, but I think it’s nice to have it in a place that readers will definitely see.

As you might be able to tell from that last screen shot, AO3 also lets you create links so that when readers click on the artist’s name it directs them right to the artist’s profile or graphics book no matter what site they come from. You can do this by using the following code:

<a href=”[insert link here]”>[Insert artist name here]</a>

Putting all of this together, you should be able to create a beautiful new AO3 fic. Best of luck and happy graphics adding!

Tag Archives: tutorial

How to Add Graphics to your AO3 Fic