Воскресенье, 19.11.2017, 02:09
Приветствую Вас Гость | RSS
Меню сайта

Категории раздела
Для авторов [13]
Мастер-класс [19]

Наш опрос
Оцените мой сайт
Всего ответов: 205

Twitter

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Форма входа

Социальные сети

Программы для чтения epub

Главная » Статьи » Статьи » Для авторов

Вставляем иллюстрации в ePub

 Наш проект Book on the Move (Книга в движении) занимается изданием современной поэзии и короткой прозы. Как отмечают многие специалисты – качественное форматирование стихотворных текстов является не самой простой задачей в электронных книгах. Видимо, чтобы ещё больше усложнить себе задачу, мы впали в "ересь" illustrated books publishing (издание иллюстрированных книг). Существует мнение, что иллюстрации очень важны в детских книгах, а взрослых людей незачем баловать. Лично я готов при случае подискутировать на эту тему, а пока поделюсь просто информацией о том, как делаю я.

– И какая польза от книг, в которых нет картинок и разговоров? – подумала Алиса.
Приключения Алисы в стране чудес, Люис Кэррол, 1865

 

  Добавление иллюстраций в ePub 

Что необходимо помнить? В названиях файлов иллюстраций не должно быть пробелов, кириллических букв. Многие специалисты рекомендуют давать осмысленные названия для файлов изображений (так будет легче ориентироваться).

Не рекомендуются слишком маленькие изображения, т.к.,  на небольших экранах (например, смартфоны) картинка будет совсем мелкой.  В некоторых программах чтения есть тенденция показывать даже небольшие изображения на всю ширину страницы, и это приводит к значительным искажениям, размытости и пикселизации.  Все подготовленные иллюстрации желательно поместить в отдельную папку, проверить их "вес" и размеры.

 

Спецификация ePub описывает допустимые форматы изображений:

image/jpeg

image/gif

image/png

image/svg+xml

Давайте сориентируемся с концепцией.

Любое цветное и качественное изображение на экранах черно-белых ридеров с e-ink дисплеем (8-16 градаций серого) – будет смотреться достаточно невзрачно. Значит ли это, что иллюстрации не нужно особо подготавливать? Нет, есть люди, читающие книги на планшетах, цветных ридерах. У планшетов уже сейчас есть высококачественные дисплеи с высоким разрешением (скептикам рекомендуется пообщаться с iPad, полистать фотографии). Вывод – планка требований к иллюстрациям должна быть на уровне хорошего качества. (Представьте себе гипотетическую ситуацию: на шикарном дисплее книга с "хреновыми" картинками. Даже закроешь такую книгу – осадок останется).

Еще одна особенность. Обычно книги читают в портретной ориентации экрана. Возьмём за основу абстрактный экран шириной 600 и высотой 800 пикселей. Особенности форматирования стилей в книге epub диктуют, чтобы изображения подгонялись под 100% ширину экрана. Тогда иллюстрация 600х800 будет демонстрироваться на весь экран, что смотрится достаточно приятно. Стоит ли подбирать все изображения в портретной ориентации? Вовсе нет. Рисунок может быть  шириной 1200 и высотой 600 пикселей, он будет масштабирован на 100% ширины экрана. Будем уменьшать размеры?

Нет. Открою небольшой секрет – электронную книгу можно читать и повернув экран в ориентацию landscape (альбомная ориентация, хотя мне больше нравится термин "ландшафт"). Это возможно на многих ридерах, на планшетах. И вот тут, внимание, иллюстрация снова будет масштабирована на всю ширину экрана.

Более того, на планшетах есть возможность увеличить любое изображение, рассмотреть детали.  Я это проверял в нескольких программах – очень приятная функция. (UPD: на "большом" компьютере или ноутбуке Вы можете посмотреть всплывающие полноразмерные иллюстрации в эталонной программе Azardi при двойном клике по изображению. Подробнее см. здесь:  http://goo.gl/VvN2G )

Какие выводы? Да, есть ограничения: "вес" изображения не должен быть более 200-250 кб (иначе процессор устаревших ридеров может не справиться с перелистыванием такой странички).  Ну и собственно размеры изображений не стоит брать с большим запасом. Минимум 768x1024 (ширина – высота) диктуется увеличением разрешения более современных устройств для чтения. И практически все разработчики подчеркивают, что для иллюстраций в электронной книге не требуется того высокого качества, которое требуется для цветной печати (это важно!). Ограничения Apple на иллюстрации (не более 2 млн.пикселей), и это не относится к файлу обложки (т.е. встроенная обложка может и превышать данные параметры).

При использовании фотографий для иллюстраций  безусловно рекомендован формат jpeg. Для уменьшения "веса" изображения есть 2 способа: уменьшение размера (ресайзинг) и снижение качества изображения по сравнению с исходным файлом. Подробнее описано в статье Подготовка иллюстраций Считается, что при хорошем исходном качестве файла (яркость, контрастность, мало посторонних шумов и т.п.), уменьшение качества изображения до 72-75% визуально отличить на мониторе очень трудно. Я использую оба способа. Да, обычному пользователю вовсе не нужно виртуозное владение фотошопом. Есть много бесплатных графических редакторов (можно я не буду перечислять и давать здесь ссылки?). В FastStone Image Viewer можно посмотреть: после какого-то редактирования, уменьшения физических размеров и проч. надо сохранить файл. При этом можно сохранить в 100% качестве (файл будет достаточно большой). Уменьшение качества до 90%  уменьшает "вес" файла примерно в 2 раза...
 
 

Некоторые авторы рекомендуют на иллюстрациях чуть повышать резкость. Я думаю, что подход к изображениям должен быть индивидуальным и + тесты. (Я иногда использую "нерезкую маску" – unsharp mask. Для скриншотов с текстом иногда чуть увеличиваю резкость). Надо пробовать разные варианты. Доработка иллюстраций необходима, так как именно за счёт иллюстраций увеличивается общий вес книги.

Для скриншотов с текстом, таблиц более подходит формат png.

В таблице стилей CSS должно быть прописано правило по форматированию изображений.

Пример:

.imgDiv
{
text-align: center;
width: 100%;
}

.imgDiv , img
{
max-width:100%;
margin-bottom:5px;
}

Правила в CSS можно записывать и в одну строчку: .imgDiv {text-align: center; width: 100%;}

В коде страницы изображение заключают внутри тега <div>.

 

Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

 

Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки. 

 

<body>

   <div class="imgDiv"> 

          <img alt="Untitled"  src="../Images/Untitled223a.jpg" /> 

   </div>

</body> 

 
Вооружившись этим набором знаний уже можно вставить иллюстрацию внутрь книги в программе Sigil. Для этого на панели есть специальная кнопка Insert Files (ранее она называлась Insert Images). При вставке иллюстрации сейчас в редакторе автоматически заполняется значение alt="" (это важно). Пояснение о рисунке можно сделать и более осмысленное, на русском языке. Значимо для системы Voice Over Text  голосовое машинное чтение (простите мне, эту штуку я не тестировал, но давайте следовать рекомендациям).

 

 
 
Так как внешний вид редактора Sigil немного изменился с момента публикации статьи, записал скринкаст заново. (Если мешает фоновая музыка, её можно просто выключить) 
 
 
  Должен сразу сказать, что впечатывать код вручную быстро надоедает. В редакторе есть функция Clips (заготовки форматирования кода и ещё много чего  подробнее можно прочитать в статье Tips & Tricks  мелкие советы и хитрости формата ePub ). Вот там в "Clip Editor" я заготовил клип с названием imgDiv. Действие при применении: записывается текст <div class="imgDiv">\1</div> где \1 означает любой текст. После выделения записи о вставленном рисунке я нажимаю на "клип" и он выделенный фрагмент кода вписывает в контейнер <div>. Другой способ: выписать в блокнот заготовки, которые часто используются в правке кода и пользоваться обычным copy - paste (ранее я именно так и делал). 
  Есть ли ещё какие-то особенности? Увы, да. 
 
small_cat
  Многие авторы помнят, как красиво выглядит обтекание картинки текстом (слева или справа). Да, на странице сайта или в файле PDF можно предполагать, что всё будет хорошо. К сожалению, подобное лёгкое украшение может привести к непредсказуемому внешнему виду странички на различных ридерах, вплоть до полной "каши", т.к. невозможно заранее предсказать ширину экрана, на котором вашу книгу будут читать. 
  Потому, большинство экспертов по разработке электронных книг рекомендуют размещать картинки отдельно от текста, иногда даже на отдельной страничке (вставляя разрывы страниц до и после изображения).
 
  И ещё особенность. Если текст, например, стихотворения, занимает 2/3 пространства страницы, и далее сразу же разместить иллюстрацию  часть программ чтения "вытесняет" иллюстрацию на следующую страницу, но может случиться и большая "неприятность"  изображение может получиться разрезанным. Или будет катастрофически уменьшено. Это оставляет неприятный осадок при чтении.
 
  Опытным путем лично я пришел к выводу, что не стоит помещать даже небольшие иллюстрации после названия стихотворения, перед текстом. На некоторых устройствах может возникнуть ситуация, что после рисунка на странице может остаться только первая строчка (или три строки от катрена).  Это тоже неприятно. И давайте подумаем, что автор хочет донести до читателя  свой текст или рисунок и текст к нему?
 
В новой версии Sigil (уже с версии 0.6.0) появилась очень приятная особенность: при просмотре иллюстраций в папке Images появилась возможность просмотра и редактирования изображения во внешней программе. Под каждой иллюстрацией можно увидеть свойства файла.
 
 
Думаю, будет правильно здесь же чуть прокомментировать вопрос "где брать иллюстрации?"
Есть несколько простых рекомендаций, чтобы Ваша книга была легальной и не нарушала авторских прав художников, фотографов и дизайнеров.
1. Сотрудничество со знакомым художником, фотографом, дизайнером.
2. Получение разрешения от автора изображения на использование его работ в Вашей книге.
3. Использование собственных иллюстраций (рисунков или фотографий).
4. Использование изображений из Public Domain (общественное достояние). К примеру, Jason Matthews ( http://ru.scribd.com/doc....or-Free ) приводит перечень сайтов, где можно свободно брать изображения:
 
 
Я уже писал в Алгоритме работы (ссылка), что при создании книги формата ePub желательно в Sigil перенести чистый текст без обложки и иллюстраций + пометки, где вставлять нужное изображение в виде (pict001), (pict002) и т.п. Все иллюстрации желательно поместить в отдельную папку, так будет проще оптом добавить все изображения в Sigil.
 
 
 
Снова повторю: в названиях файлов изображений недопустимы пробелы, кириллица (!). Можно давать осмысленные названия: window01.jpg, lady_in_red.jpeg
 
О встраивании в книгу обложки будет рассказано в отдельной публикации.
_________________
 

  Вставляем Обложку в электронную книгу ePub

 
 
  QR-code ссылка на данную статью
   
 
  Укороченная ссылка на статью: http://goo.gl/QyRtw
 
 
  •  
  •  
  •  
Категория: Для авторов | Добавил: docking_the_mad_dog (07.11.2012)
Просмотров: 7724 | Комментарии: 13 | Теги: how-to, Мастер-класс, tutorial, вставка иллюстраций, epub, Sigil, дизайн книг | Рейтинг: 0.0/0
Всего комментариев: 13
13  
Между прочим, Николай уже за эту проблему тут, на этом ресурсе касался, описывал.
Нужно обязательно учитывать момент, что электронная верстка, не бумажная, тут в принципе нельзя жестко привязать местоположение многого. Из-за особенностей отображения книг на РАЗНЫХ ридерах.
Этим приходиться жертвовать.
Кстати, с ридерами от сони я сам столкнулся несколько раз.
У них как правило, сколько вытянутый экран. ВОЗМОЖНО отсюда и проблема...

11  
Здравствуйте!
Большое спасибо за полезную статью! Только берусь за создание электронных книг, совсем новичок.
Несколько раз всё перечитал и пересмотрел видео, но уже больше часа провёл пытаясь разобраться в проблеме: необходимо, чтобы картинки в книге были во весь экран. Вроде бы делаю всё так как нужно, прописываю тэг <div>, добавляю файл css - но на ридере картинки всё равно маленькие, далеко не во весь экран. Не подскажете, где я ошибаюсь?
Файл epub (1,6 Мб) выложил по ссылке: https://dl.dropboxusercontent.com/u/32838060/_del/ver_16.epub
Буду премного благодарен!!

12  
Здравствуйте. Пока по ссылке страничка не найдена. Перепроверьте пожалуйста.

5  
Большое спасибо Вам, за то, что откликнулись на проблему. До сих пор
решить её не смог. Вот ссылка на файл https://drive.google.com/open?id=0B3-CzKsZCQOUTnZOWFQxUUdyb1U&authuser=0
Он большой 22 мБ. При просмотре на читалке Sony PRS T3 правая граница
рисунков, расположенных горизонтально уходит за экран. Буду очень
благодарен за помощь.

0
6  
По ссылке доступ на скачивание файла ограничен.

0
7  
Прошу прощения. Новая сслка 
https://drive.google.com/file/d/0B3-CzKsZCQOUTnZOWFQxUUdyb1U/view?usp=sharing

0
8  
Исправил, что увидел. Но там вам еще много дорабатывать и вычитывать.
Файл стал 8 Мб (за счет правильной обработки картинок)

Забрать можно здесь. https://drive.google.com/open?id....huser=0
Никакие физические размеры иллюстраций в рх в <head> дописывать нельзя.

9  
Большое Вам спасибо. Скачиваю и буду разбираться. Но я рассчитывал на подсказку, как исправлять такие ошибки. В планах у меня сделать учебники по большинству предметов для сына, теперь уже на следующий год. Может Вы смогли бы рассказать как сделать "правильную обработку картинок"? Спасибо.

10  
"Подготовка иллюстраций" вынес в отд. статью http://goo.gl/js2aSe
Встраивание иллюстраций описано в статье, под которой мы с вами общаемся.
В таблице стилей CSS должно быть прописано правило по форматированию изображений.
Пример:
    .imgDiv
    {
    text-align: center;
    width: 100%;
    }

    .imgDiv , img
    {
    max-width:100%;
    margin-bottom:5px;
    }
Далее в режиме "просмотра Кода" вставляется <div class="imgDiv"> </div> (это можно просто копировать из Блокнота).
Внутри этого тега вставляется рисунок.
 Проще, чем объяснил сейчас - у меня уже не получится.

3  
Пробую создать учебники для своего сына. Есть исходники в виде файлов PDF, созданные сканированием страниц. Я их распознал в FineReader. После сохранения FineReader-ом в формате епаб всё нормально получается, только иллюстрациии, которые должны быть на всю страницу не помещаются, обрезается где-то четвёртая часть с правой стороны при открытии на ридере Sony PRS T3. На другом реадере 7-дюймовом всё нормально отображается. Не подскажете как исправить? К сожалению мне трудно даётся синтаксис программы Sigil.

4  
К сожалению, не знаю точно, в чем проблема. Желательно отгрузить ePub куда-то в облако и дать сюда ссылку.

1  
Жаль, что нельзя сделать обтекание картинки, это гораздо привлекательнее смотрится.

2  
Сделать обтекание картинки можно. Но на некоторых ридерах всё форматирование может рухнуть (не отобразиться) и получится изрядная каша перед глазами.

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту

Мы в соцсетях
facebook twittwer youtubeподпискаПодпишитесь на рассылку

Друзья сайта
МЕГАЛИТ. Евразийский журнальный портал.
Электронный журнал «Точка ZRения»
 Book on the Move – независимые издатели электронных книг
 Материалы для самостоятельного изучения английского языка:словари, видеоуроки, книги,программы Ирина Бебнева на сервере Стихи.ру Читать Book on the Move


Новости сайта
[16.12.2016]
[Современная поэзия]
Яков Рабинер. Мой Сатирикон
(0)
[10.07.2016]
[Современная проза]
Яков Рабинер. Бодлер
(0)
[05.05.2016]
[Современная поэзия]
Яков Рабинер. Глубокая провинция души
(0)
[07.02.2016]
[Современная поэзия]
Яков Рабинер. Фрески.
(0)
[26.12.2015]
[Docking the Mad Dog представляет]
Иван Храмовник - Коварство и кавай
(0)
[06.12.2015]
[Современная поэзия]
Светлана Чернышова. От Японского до Эвксинского.+
(1)
[04.10.2015]
[Самиздат]
Наталья По. Я не знала еще...
(0)
[13.09.2015]
[Учебная литература]
Яков Рабинер. Крещендо
(0)
[24.05.2015]
[Современная проза]
Ангелина Злобина. Странная моя птица - 2-е издание
(0)
[10.05.2015]
[Учебная литература]
Якоа Рабинер. Пушкин и Лермонтов. Заметки на полях биографий
(0)



Поддержи проект
Книги для наших авторов мы создаем бесплатно. Однако вы можете поддержать проект, оказав ему некоторую материальную помощь.


Copyright Book on the Move © 2017Создать бесплатный сайт с uCoz