Category Archives: publishing

Making an 8-page 7″x4.25″ captioned photo book with Org Mode and LaTeX

Here’s another technique that makes a simple photo book. I wanted to
make an 8-page book that could be printed 4 pages to a 8.5″x14″ sheet
(duplex, flip along the short edge), with a final page size of
7″x4.25″.

Sample with my own photos:

out.jpg

Prerequisites

  • ImageMagick
  • Texlive (probably)
  • latex-beamer
  • Org Mode and Emacs

Process

We can define the labels and their captions in a named table like this:

Let’s Go for a Walk  
   
Caption for photo 1 placeholder.png
Caption for photo 2 placeholder.png
Caption for photo 3 placeholder.png
Caption for photo 4 placeholder.png
Caption for photo 5 placeholder.png
   

Note that the first page is row #1 this time, instead of starting with
the last page.

Then we generate the LaTeX code with some Emacs Lisp, like so:

#+begin_src emacs-lisp :var pages=story :results value latex :exports results
(mapconcat (lambda (row) (format "\\graphicframe{%s}{%s}" (cadr row) (org-export-string-as (car row) 'latex t))) pages "\n")
#+end_src

I put that in a subtree for easier exporting with C-c C-e C-s l b (org-export-dispatch, subtree, LaTeX, Beamer).

Story

Process

  • Set up Org Mode export to Beamer
    (eval-after-load "ox-latex"
      ;; update the list of LaTeX classes and associated header (encoding, etc.)
      ;; and structure
      '(add-to-list 'org-latex-classes
                    `("beamer"
                      ,(concat "\\documentclass[presentation]{beamer}\n"
                               "[DEFAULT-PACKAGES]"
                               "[PACKAGES]"
                               "[EXTRA]\n")
                      ("\\section{%s}" . "\\section*{%s}")
                      ("\\subsection{%s}" . "\\subsection*{%s}")
                      ("\\subsubsection{%s}" . "\\subsubsection*{%s}"))))
    
  • Set up the header.tex

    This file gets included in the LaTeX file for the children’s book.
    Tweak it to change the appearance. In this example, I use black serif
    text text on the left side of a picture, both occupying roughly half
    of the page. I also experimented with using a different font this time, which you might need to install (for me, I did apt-get install texlive-fonts-extra).

    \geometry{paperwidth=7in,paperheight=4.25in,left=0.5in,right=0.5in}
    \beamertemplatenavigationsymbolsempty
    \usepackage{etoolbox}
    \usepackage[T1]{fontenc}
    \usepackage{Alegreya}
    \usefonttheme{serif}
    \setbeamercolor{normal text}{fg=black,bg=white}
    \setbeamercolor{structure}{fg=black,bg=white}
    %% \setbeamertemplate{frametitle}
    %% {
    %%   \begin{center}
    %%   \noindent
    %%   \insertframetitle
    %%   \end{center}
    %% }
    \newcommand{\graphicframe}[2] {
       {
       %% \if #1\empty 
       %% \usebackgroundtemplate{}
       %% \fi
       \ifstrempty{#1}{
       \begin{frame}[plain]
         \begin{center}
         \noindent
         \textbf{\huge{#2}}
         \end{center}
       \end{frame}
       }{
       \begin{frame}[plain]
          \begin{columns}
          \begin{column}{0.48\textwidth}
          \huge{#2}
          \end{column}
          \begin{column}{0.48\textwidth}
          \includegraphics[height=\textheight,width=\textwidth,keepaspectratio=true]{#1}
          \end{column}
          \end{columns}
       \end{frame}
       }
       }
    }
    \usepackage[noframe]{showframe}
    \renewcommand{\maketitle}{}
    
  • Create the PDF
    pdflatex index.tex
    
  • Create one PNG per page
    mkdir pages
    convert -density 300 index.pdf -quality 100 pages/page%d.png
    
  • Create the 4-up imposition

    The diagram at https://pressnostress.com/iw/howto/booklets/1.html was helpful.

    montage \( page4.png -rotate 180 \) \( page3.png -rotate 180 \) page7.png page0.png -tile 2x2 -mode Concatenate front.png
    montage \( page2.png -rotate 180 \) \( page5.png -rotate 180 \) page1.png page6.png -tile 2x2 -mode Concatenate back.png
    convert front.png back.png -density 300 ../print.pdf
    

Other notes

Placeholder image from https://en.wikipedia.org/wiki/File:Portrait_placeholder.png – public domain.

Using Org Mode, LaTeX, Beamer, and Medibang Paint to make a children’s book

Story

  • It’s time to make a smoothie!
  • I pour blueberries into the blender.
  • Mama adds hemp seeds.
  • I add spinach.
  • Mama blends it all with some water.
  • I peel and add a banana.
  • I add some yogurt.
  • Mama blends it again.
  • Yum yum!

Thumbnails

spread0.png spread1.png spread2.png spread3.png spread4.png spread5.png

Process

  • Prerequisites

    • ImageMagick
    • Texlive (probably)
    • latex-beamer
    • Org Mode and Emacs
  • Set up Org Mode export to Beamer

    (eval-after-load "ox-latex"
      ;; update the list of LaTeX classes and associated header (encoding, etc.)
      ;; and structure
      '(add-to-list 'org-latex-classes
                    `("beamer"
                      ,(concat "\\documentclass[presentation]{beamer}\n"
                               "[DEFAULT-PACKAGES]"
                               "[PACKAGES]"
                               "[EXTRA]\n")
                      ("\\section{%s}" . "\\section*{%s}")
                      ("\\subsection{%s}" . "\\subsection*{%s}")
                      ("\\subsubsection{%s}" . "\\subsubsection*{%s}"))))
    

  • Set up image directories

    mkdir text-pages blank-spreads drawn drawn-pages
    

    text-pages Will contain one image per page of just the plain text.
    blank-spreads Will contain text spreads ready for drawing
    drawn Export one image per spread (without the text layers) from your drawing program
    drawn-pages Will contain one image per page combining text and drawing
  • Tweak the header.tex

    This file gets included in the LaTeX file for the children’s book. Tweak it to change the appearance. In this example, I use black serif text at the bottom of the page.

    \geometry{paperwidth=7in,paperheight=8.5in,left=0.5in,top=0.5in,right=0.5in,bottom=0.5in}
    \setbeamercolor{normal text}{fg=black,bg=white}
    \setbeamercolor{structure}{fg=black,bg=white}
    \usefonttheme{serif}
    \setbeamertemplate{frametitle}
    {
      \begin{center}
      \vspace{0.7\textheight}                    
      \noindent
      \insertframetitle
      \end{center}
    }
    \usepackage[noframe]{showframe}
    \renewcommand{\maketitle}{}
    

  • Write the story

    I used Org Mode to make it easy to write the story.

    Some considerations:

    • Because we’re printing this as a saddle-stitched booklet, the number of lines should be a multiple of four. Sixteen is probably a good maximum.
    • The first heading is actually for the last page.
    • The second heading is for the cover page.
    • The third heading is for the first inner page, the fourth heading is for the second inner page, and so on.
    #+OPTIONS:   TeX:t LaTeX:t skip:nil d:nil todo:t pri:nil tags:not-in-toc author:nil date:nil
    #+OPTIONS: H:1
    #+startup: beamer
    #+LaTeX_CLASS: beamer
    #+LaTeX_CLASS_OPTIONS: [20pt]
    #+BEAMER_FRAME_LEVEL: 1
    #+LATEX_HEADER: \input{header.tex}
    #+PROPERTY: header-args :var pages=12
    
    * Story
    
    ** 
    ** 
    ** 
    ** It's time to make a smoothie!
    ** I pour blueberries into the blender.
    ** Mama adds hemp seeds.
    ** I add spinach.
    ** Mama blends it all with some water.
    ** I peel and add a banana.
    ** I add some yogurt. 
    ** Mama blends it again.
    ** Yum yum!
    

  • Make the tex, PDF, page PNGs, and spread PNGs

    1. Go to the subtree for the story and use M-x org-export-dispatch (C-c C-e) with the subtree option (C-s) to export it as a Beamer file (option l b).
    2. Use pdflatex to convert the .tex to PDF.

      pdflatex index.tex
      

    3. Create one PNG per text page with:

      convert -density 300 index.pdf -quality 100 text-pages/page%02d.png
      

    4. Create spreads to draw on with:

      montage text-pages/page*.png -tile 2x1 -mode Concatenate blank-spreads/spread%d.png
      

    5. Optionally, create a layered PSD with:

      convert blank-spreads/spread*.png \( -clone 1,0 -background white -flatten -alpha off \) -reverse spreads-for-drawing.psd
      

  • Draw

    I imported the PNG layers into MediBang Paint on a Samsung Note 8 Android phone, and then:

    • imported photos
    • traced them
    • painted and shaded them
    • hid the text layers
    • exported one PNG per spread to QuickPic, renamed them, and uploaded them to Dropbox, because I couldn’t figure out how to export to Dropbox directly

    Layer folders were handy for organizing spread-related images. I couldn’t seem to move all of the layers in a layer folder together on Android, but the iPad was able to do so. If I didn’t have the iPad handy, I combined the layers by exporting a PNG and then importeing it back into MediBang Paint.

    This was a decent setup that allowed me to draw and paint even when I was in bed nursing A- and waiting for her to fall asleep. I held the phone with one hand and rotated the canvas as needed so that it was easier for me to draw lines with my right. Because of the awkward position and the small screen size, the lines are not as smooth as I might like, but the important thing is that they’re there. Whee! =)

    It turns out to be possible to use the free MediBang Pro drawing program under Wine on Linux to import the PSD and save it to the cloud. I was also sometimes able to switch to drawing with iPad Pro with Pencil, but it was harder to find time to do that because that usually made A- want to draw too.

    Anyway, after I drew and exported the PNGs, the next step was to…

  • Convert the drawn spreads back to pages and combine them with the text

    Here’s some code that combines the drawing and the text. Keeping the drawing and the text separate until this stage (instead of exporting the PNGs with the text) makes it easier to change the text later by recreating the text PNGs and running this step.

    (defun my/combine-spread-drawing-and-text (page num-pages)
      (let ((gravity (if (= (% page 2) 1) "West" "East"))
            (spread (/ (% page num-pages) 2)))
        (shell-command
          (format 
           (concat "convert \\( "
                   "drawn/spread%d.png -gravity %s "
                   "-chop 50%%x0 +repage \\) "
                   "text-pages/page%02d.png -compose darken "
                   "-composite drawn-pages/page%02d.png")
           spread gravity page page))))
    
    (cl-loop for i from 0 to (1- pages) do
             (my/combine-spread-drawing-and-text i pages))
    

  • Create print spreads for saddle-stitching

    This code pairs up the drawn pages into a PDF that can be printed duplex. Make sure to choose the option to flip along the short edge. I hard-coded the page orders for 4-, 8-, 12-, and 16-page booklets.

    (let* ((page-order
            '((0 1 2 3)   ; hard-coded page sequences
              (0 1 2 7 6 3 4 5)
              (0 1 2 11 10 3 4 9 8 5 6 7)
              (0 1 2 15 14 3 4 13 12 5 6 11 10 7 8 9)))
           (sequence
            (mapconcat (lambda (d) (format "drawn-pages/page%02d.png" d))
                       (elt page-order (1- (/ pages 4))) " ")))
      (shell-command
       (format
        "montage %s -tile 2x1 -mode Concatenate print-duplex-short-edge-flip.pdf"
        sequence)))
    

  • Print and bind

    After printing and folding the book, I used tape to make the book hold together. Tada!

  • Create on-screen PDF for reading

    A little bit of manipulation so that the last page is in the right place:

    (shell-command
      (format "convert %s onscreen.pdf" 
        (mapconcat 'identity (cl-loop for i from 1 to pages 
          collect (format "drawn-pages/page%02d.png" (% i pages))) " ")))
    

  • Create thumbnails of spreads

    (cl-loop
     for i from 0 to (1- (/ pages 2)) do 
     (shell-command
      (format 
       (concat "convert "
               "\\( blank-spreads/spread%d.png "
               "drawn/spread%d.png "
               "-compose darken "
               "-resize %dx -flatten \\) "
               "\\( +clone -background black -shadow 50x1+%d+%d \\) "
               "+swap -compose src-over -composite "
               "thumbnails/spread%d.png")
       i i width shadow shadow i)))
    

  • Ideas for next steps

    • Better thumbnails for easy previews
    • PDF for online reading
    • More layout possibilities (photos, verses, etc.)
    • Smaller books:

      • crop marks on a full-page print, or
      • the right imposition rules to print more pages on a sheet

Making books for A-

A- loves being read to. She picks up new words and ideas from the books we read, requests both favourites and new books again and again, and can identify objects in photographs and drawings. I borrowed a few children’s books from the library in case reading about upcoming changes or challenges helps her understand. The books were okay, but didn’t quite fit the words we use or the way we like to handle things. So this week, I decided to make my own books for A-, especially since there are few books that cover things like microphthalmia.

The first book I made was about night weaning, since we might have to do that in preparation for dental surgery under anaesthesia. I sketched it using ZoomNotes on my iPad, exported the SVG, tinkered with it in Inkscape, exported PNGs, combined the PNGs with ImageMagick, and created a 12-page PDF with 7″x8.5″ pages. That let me print the book out on legal-size paper (8.5″x14″), 2 pages per sheet, duplex printing set to flip on the short side, using this page order:
12, 1, 2, 11, 10, 3, 4, 9, 8, 5, 6, 7. I folded each sheet in half. Instead of hand-sewing the binding, I just taped the pages together. And just like that, I had a book that I could page through properly: “No More Nursing, Time to Sleep.”

I read the new book to A-. She asked me to reread it several times. She pointed to the book and said, “A-!” She pointed to the stick figure for me and said, “Mama!” Success!

The next thing I wanted to try was printing in colour. We recently replaced our printer with an HP M277dw colour laser printer that could print duplex, so I was looking forward to giving that a try. I wanted to make a book about the conformer in A-‘s little eye. This time, I drew the pages of the book using layers in Medibang Paint. I drew on the bus home from Riverdale Farm, working around a sleeping A- snuggled in my carrier. I exported each layer as a PNG, used ImageMagick to convert pairs of pages into what I needed to print (page order: 8, 1, 2, 7, 6, 3, 4, 5), combined those into a PDF. I couldn’t figure out how to get the HP app to properly scale the document and print in duplex, but printing from Linux worked fine. I quickly had another book in my hands: “My Conformer.”

She’s starting to echo phrases from the to books, and it’s been only a few days. Wow!

I’m working on a third book now. Time for something fun: “Let’s Make a Smoothie,” since she enjoys making and drinking them. She already knows all the words, so this is more about enjoyment. This time, I’m going to make a workflow that lets me draw on two-page spreads. I don’t have any wide drawings planned yet, but it could be handy for later. I made an Inkscape template to help me keep margins in mind. I learned how to use Medibang Paint’s folders to organize all the layers, and I’m getting the hang of digitally tracing and painting the photos I took.

I’m looking forward to making even more books and refining my workflow along the way. Here are a few things I want to try:

  • Flat colour
  • Painting
  • Programmatically adding text
  • Printing photos
  • Two-page drawing
  • Parametric templates
  • Smaller format by cutting
  • Programmatically adding photos
  • Heavier-weight paper
  • Board book replacement
  • Printing at Staples or similar
  • Print-on-demand book
  • Handstitching
  • Binding with a cover
  • Smaller format by folding and gluing
  • Mobile workflow
  • Vector drawing

And a few quick ideas for possible next books:

  • Potty Time
  • Brushing Teeth
  • Feelings
  • When I Feel Nervous
  • When I Feel Sad
  • Going to Sleep at the Dentist
  • My Life
  • My Day
  • Going Out
  • At Home
  • I Can…
  • I Can Draw
  • Waiting
  • Try Again
  • Dressing Up
  • Alimango sa Dagat
  • Leron Leron Sinta

Org Mode publishing workflow for Sketched Books collection

I want to publish things in chunks that are bigger and more logical than blog posts, so I’ve been experimenting with my ZIP/PDF/EPUB/MOBI workflow.

Org Mode, Calibre, and Vagrant are terrific tools. Org Mode lets me write easy-to-modify source that I can export to different formats, like HTML and LaTeX (with the Beamer package), which lets me use PdfLatex to convert to PDF. Calibre converts HTML to EPUB and MOBI. Since tools can be difficult to set up on Windows, I use Vagrant to set up a virtual machine running Linux and I share my working directory with it.

multiple-cursors was so useful when I was wrangling the directory listing into the right format for Org. I’m glad I learned how to use it!

Here’s a Makefile I put together that simplifies the process for me:

all: index.html sketched-books.epub sketched-books.mobi ebook.pdf sketched-books.zip

clean:
	rm -f *.dvi *.log *.nav *.out *.tex *.snm *.toc

distclean: clean
	rm -f Sketched\ Books.zip index.html *.epub *.pdf *.mobi

Sketched\ Books.zip: *.png index.html
	(cd ..; zip sketched-books/sketched-books.zip sketched-books/* -i *.css -i *.png -i *.html)

index.html: index.org
	emacs --batch -l build.el index.org -f org-html-export-to-html --kill
	cp index.html index.tmp
	sed -e "s/org-ul/org-ul small-block-grid-3/" -e 's/div id="content"/div id="content" class="columns"/' -e 's/class="status"/class="status columns"/' index.tmp > index.html
	rm -f index.html~ index.tmp

ebook.html: ebook.org
	emacs --batch -l build.el ebook.org -f org-html-export-to-html --kill

cover-base.png:
	montage *Sketched*.png -geometry -30-30 -thumbnail x400 -tile 6x5 cover.png

sketched-books.epub: ebook.html
	ebook-convert ebook.html sketched-books.epub --cover cover.png --authors "Sacha Chua" --language "English"

sketched-books.mobi: ebook.html
	ebook-convert ebook.html sketched-books.mobi --cover cover.png --authors "Sacha Chua" --language "English"

ebook.tex: ebook.org
	emacs --batch -l build.el ebook.org -f org-beamer-export-to-latex --kill

ebook.pdf: ebook.tex
	pdflatex ebook.tex
	cp ebook.pdf sketched-books.pdf
	rm ebook.pdf

And here’s a very simple build.el:

(require 'package)
(package-initialize)
(require 'ox-beamer)
(setq org-html-validation-link nil)
(setq org-export-with-section-numbers nil)
(setq backup-directory-alist '(("." . nil)))

This assumes I’ve already set up the environment by installing the latest Org from MELPA.

You can check out the index.org and ebook.org I use, too.

I’m not quite sure about the MOBI output yet. I have to test it on a Kindle, or in the app on my tablet. Most of the things display fine on my computer, though. Hooray!

Neat, huh? I want to get into the habit of making and also making it easy for me to update these things. You can check out the results at http://sketchedbooks.com/collection .

Someday I might even figure out how to use the Gumroad API to publish updated resources automatically. Wouldn’t that be neat? In the meantime, I’ll just have to replace them myself.

I like giving people the ability to choose which files to download. If I get annoyed with replacing multiple files, though, I might change this to one large ZIP that has the images, PDF, EPUB, and MOBI.

View the source on Github

Sketchnotes 2013 in print, yay!

Summary: You can now grab a print copy of Sketchnotes 2013 for $30 + shipping from CreateSpace.

2014-03-24 Sketchnotes 2013 in print, yay #publishing #packaging #createspace

2014-03-24 Sketchnotes 2013 in print, yay #publishing #packaging #createspace

I like organizing my sketches into collections so that people can flip through them easily. It’s a good archive too, just in case I lose files. I put together a PDF of my sketchnotes from 2012, and I recently put together one for my sketchnotes from 2013. For added flexibility, I started with a ZIP and shared Dropbox folder for Sketchnotes 2013.

Paul Klipp suggested that I look into CreateSpace as a way of making a paper version. CreateSpace is a print-on-demand publisher, so we can order copies one by one instead of stashing inventory. Paper is easier to flip through during casual moments, and it might be a good alternative. Besides, it’s handy as a personal backup, too. A lot of the sketchnotes are me thinking through stuff, so I’m not sure how useful they’ll be to other people, but you can check it out online for free to see anything is useful. =)

2014-03-24 17.15.56 2014-03-24 17.16.12

It turns out that CreateSpace’s pricing–even considering the cost of shipping–is cheaper than what it would take for me to get color prints at the local print shops, and the results are neatly bound and professional. My proof arrived today, and it looks decent. I had reduced my landscape sketches to a little less than half their size so that I could fit them two to a page. That makes reading easier because you don’t have to turn the page sideways. I was worried that the letters wouldn’t be readable, but they turned out fine. =D

End result: I can “back up” my sketches in a much more compact space, and you can get your own copy if you want. For comparison, here’s the stack of sketchbook pages I drew on and scanned.

2014-03-24 18.22.06

Sketchnotes 2013 ($30 + shipping)

Geekier details: LaTeX

I wanted to make a PDF collection, but I didn’t want to work with a gigantic Microsoft Word or Powerpoint file. I’d done that before with Stories From My Twenties and Sketchnotes 2012, and that was not fun. Anyway, I had folders of images to combine. At first, I tried using ImageMagick to tile the images into pairs and pad them with margins. That was pretty cool. Adobe Acrobat Standard allowed me to import the images and add page numbers. I created my own table of contents using Microsoft Excel, pasted that into Microsoft Word, and tweaked the numbers until they were correct. It was a tedious and error-prone process.

Marcin Borkowski suggested using LaTeX instead. It’s been years since I used LaTeX. I remember doing some of my papers in it, and they always looked so much better than anything I put together in Microsoft Word or OpenOffice. I didn’t want to deal with the potential hassle of setting up LaTeX under Windows or Cygwin. I’d gotten more used to using Vagrant and VirtualBox to run Linux-based virtual machines that shared folders with my Windows installation, and upgrading to a 1 TB drive meant that I had plenty of space.

One of the advantages of working with LaTeX is that it’s text-based and therefore easy to work with in Emacs. I wanted to break up the different sections into their own files. I started with a small category. That way, I could easily recompile a section of the PDF in order to figure out the right approach.

Because I was using Windows to look at the PDF, I often got annoyed by the preview pane file-locking that prevented me from deleting the file. I turned the preview pane off in Explorer and opened the PDF whenever I wanted to check it.

After looking up how to include images in LaTeX, I listed all the image files, redirected the output into a file, and used a keyboard macro to set up \includegraphics commands.

It’s a good thing I did that, because some of the files were facing the wrong way, and many of them were the wrong size. So I learned how to resize and rotate images like this:

\includegraphics[height=\textwidth,angle=90]{Business/2013-02-26 Creating value with social collaboration platforms}

A couple of notes:

  • \includegraphics displays filenames with spaces, which wasn’t what I wanted. Adding \usepackage{grffile} fixed it.
  • \includegraphics can’t deal with special characters like #. To be safe, I used M-x dired‘s editable mode (C-x C-q) to get rid of all the keywords I added to each filename for classification.

Since I had a lot of these commands, I figured it would be worth learning how to define my own command for them. LaTeX is like Emacs. You can define your own commands or override existing ones. This is great for making your code more manageable. For example, if I include the following definitions in my document preamble:

\newcommand{\sketch}[3][height=4.5in,width=\textwidth,keepaspectratio]{
  \addcontentsline{toc}{section}{#3}
  \includegraphics[#1]{#2/#3}\\
}
\newcommand{\sketchcw}[2]{
  \sketch[height=\textwidth,angle=270]{#1}{#2}
}
\newcommand{\sketchccw}[2]{
  \sketch[height=\textwidth,angle=90]{#1}{#2}
}

… that gave me new commands that I can use like this:

\sketchcw{Business}{2013-02-26 Creating value with social collaboration platforms}
\sketchccw{Business}{2013-03-04 New opportunities}
\sketch{Business}{2013-03-04 Sketchnotes of events}

I also wanted to include a table of contents that listed all the images, but I didn’t want to display captions since they would duplicate the title that’s already in the sketchnotes. At first, I tried to use captions and labels, but I found out that you can use \addcontentsline to adds lines to the table of contents without displaying anything in the text.

After I set up and successfully compiled a few files, I worked on creating a main document that combined everything. The subfiles package was straightforward to use.

The trickiest part was getting the chapter table of contents sorted out. In addition to having a main table of contents, I like having chapter-based tables of contents because that way, the list is closer to what you’re looking up. I eventually figured out how to use minitoc after much confusion with left-over minitoc data and chapters that were out of order. I ended up creating a Makefile to clean out all the auxiliary files and run pdflatex three or four times.

Here’s one of my early sketches trying to figure this out, back when I was using ImageMagick and Adobe Acrobat…

2014-02-27 How can I make it easy to print collections of my sketches #packaging #sharing

2014-02-27 How can I make it easy to print collections of my sketches #packaging #sharing

It’s great to be a geek!