Рубрики
Без рубрики

Сделайте свой собственный (интерактивный) графический роман

Будучи ребенком, я был завожен в 2000 году рекламных комиксов. У него были нелинейные повествования, непочтительный юмор, … Tagged с WebDev, JavaScript, CSS, Design.

Будучи ребенком, я был заводил 2000 AD Comics . У него были нелинейные повествования, непочтительный юмор, контркультурные убеждения и фантастические истории. У него были некоторые исключительные писатели и художники, такие как Алан Мур, Дейв Гиббонс и Грант Моррисон, которые будут создавать знаковые графические романы.

Я не мог сформулировать то, что было так хорошо в комиксах в то время, но я просто знал, что это было похоже на ничто, и я, казалось, был единственным, кто «получил это». Я всегда хотел создать что -то подобное, но никогда не делал. Самым дальним, что я получил, это нарисовать некоторых персонажей.

Если вы не знакомы с 2000 г. н.э., вот несколько обложек, чтобы дать вам приблизительную идею. Персонажи и истории охватывают много жанров и имеют очень разные тона от комедии до ужаса, так что не судите по этим обложкам! 😉

Вы можете увидеть эволюцию стиля. Сырья шутки остались.

В частности, Артур Рэнсон сделал несколько потрясающих произведений искусства, которые я нашел очаровательным.

Когда вы становитесь старше, трудно удержать эти творческие торговые точки. Я перестал читать комиксы. Я перестал рисовать. Это не соответствовало моей профессиональной жизни. Поскольку у меня не было никого, чтобы поделиться интересом, это как бы стало антиобщественным хобби. Итак, это медленно исчезло из моей жизни.

В глубине души я сказал, что вернусь к графическим романам. Я найду время для собственных произведений искусства. Я подумал, что смогу сделать несколько цифровых произведений позже, если бы это было касается, связанной с моей дневной работой, это может быть «практика». Этого никогда не было. Моя дневная работа стала архитектурой и развитием бэкэнд, а не на чем -либо в сфере графического дизайна. Ноль касания!

Я нашел свой путь к графическим романам намного позже. Я начал читать их на своем эридоре. Некоторые из них отлично смотрятся на экране EINK. Я снова начал рисовать. Это заставляет меня изучать SVG. Я начал делать какую-то фронтальную разработку и приступил к изучению анимации в CSS и JavaScript, и был удивлен тем, сколько возможно в браузере. Это был постепенный процесс, но, наконец, у меня были навыки, чтобы попробовать что -то в Интернете! И по иронии судьбы, потребовалась глобальная пандемия, вероятно, самый антисоциальный период в недавней истории, чтобы дать мне время, чтобы сделать это!

Интернет-графический роман

Я хотел попробовать что -нибудь новое. Я подумал, что смогу сделать скрещенную (Mongrel) для Интернета-давайте назовем это «веб-графическим романом микроэффективного действия». 🤨

Я хотел попробовать 2 веща, в частности, я хотел добавить краткую анимацию (микроэффективность) на каждую панель (заполняйте пустые биты, которые, как я представляю, происходят) и автоматически прокручиваясь, чтобы пройти через каждую панель в определенном темпе. Это моя первая попытка, основанная на странице из города греха Фрэнка Миллера.

Вы можете играть с Демо на моем сайте. Нажатие на страницу перезагружает последовательность.

Процесс

Первоначально я создал каждую панель как отдельную SVG (масштабируемая векторная графика) в Чернил Анкет Я измерил пространство каждой панели, чтобы их объединить было бы более или менее копией и вставкой позже.

Я использовал GSAP для анимации и работал над анимацией для каждой панели отдельно. Объединить временные рамки в сценарии простое, но вы должны внести несколько настройки, чтобы скрыть панели, пока они не будут показаны. Чистый результат – один SVG и одна временная шкала в сценарии.

Это последняя панель с анимацией CSS (повторно ее, если вы ее пропустили). Это простая анимация, и это всего лишь 2 секунды минимального действия. Это создает более захватывающий повествование, когда он сочетается с более насыщенными панелями.

Мне потребовалось и выключение, чтобы завершить страницу от 2 до 3 дней. Использование маскировки для текстовых эффектов «вздрагивания» было самой трудоемкой частью. Я не был уверен, что это сработает так, как я хотел, поэтому мне пришлось экспериментировать. Глядя на это снова теперь со свежими глазами, я хотел бы настроить его больше! Я думаю, что ничего не делается, это просто заброшено. 😅

Я считаю, что я мог бы сделать полноразмерный графический роман таким образом менее чем за 2 МБ!

Чтобы распространять графический роман в качестве файла, это просто сжатый архив изображений (например, файл ZIP), названный в качестве файла .cbr или .cbz. Вы можете увидеть пример этого на скриншоте ниже, где я открыл комикс в 2000 году в приложении «Менеджер архива».

Вы можете экспортировать SVG как PNG или JPG и добавить его в архив файла вместе с остальными вашими страницами, чтобы создать свой собственный графический роман. Просто убедитесь, что ваши изображения названы в соответствии с их последовательности, они следует за обычной алфавитной сортировкой, например, Image001.png, image002.png..etc.

Нет обязательства создавать ваши изображения в качестве векторной графики (SVG), вы можете создавать изображения в виде растровых изображений в Photoshop или что -то в этом роде, если хотите. Преимущество создания векторных изображений состоит в том, что он дает вам больше вариантов, если вы хотите стилизовать его для Интернета или анимировать их.

Что вы думаете?

Мне нравится результат. С возможностью контролировать скорость автоматической прокрутки, я хотел бы прочитать историю таким образом. Это дало бы мне повод, чтобы дважды пройти историю, это почти все равно, что снять режиссер фильма. Если вы хотите прочитать его как обычный комикс, вы можете отключить анимацию и автоматическую прокрутку. Это ваше шоу.

Если вы читаете графические романы на цифровом устройстве, мне было бы интересно услышать ваши мысли! Вы бы прочитали графический роман таким образом?

Вывод

Учитывая мои ограниченные художественные способности, создавая что -то похожее на город грехов с его смелым, гештальт -стилем было бы легче всего осуществить. Теперь мне просто нужна моя собственная история!

Может быть, я могу сделать рассказ из 20 страниц. Для завершения работы может потребоваться 8 недель, но это будет полноценным проектом, чтобы работать на неполный рабочий день на более длительный срок! 😅 Надеюсь, ко мне придет какое -то вдохновение! 💡 🙏

В любом случае, моя 8-летняя я гордится мной. 👦

Оригинал: “https://dev.to/robole/a-microaction-graphic-novel-concept-1a9g”