Рейчел Наборс
Рэйчел Наборс — одно из тех относительно редких созданий — талантливый художник и иллюстратор, который все еще может мыслить в коде.
Будучи художником комиксов для gURL.com , прежде чем повернуть направо в веб-разработку, она теперь живет жизнью супергероя , заставляющего говорить, рисовать и рисовать!
На прошлой неделе у меня была возможность пообщаться с Рэйчел о X-Men, антивозрастных кремах, SVG и ее семинаре Future Of Web Design в начале апреля.
Привет, Рэйчел, и большое спасибо, что уделили нам немного времени. Я один из многих, кому понравилась ваша « Бесконечная канва-скринкаст» .
РЕЙЧЕЛ: Привет, Алекс! Спасибо за просмотр Infinite Canvas! У нас очень интересное интервью, как только мой ноутбук возвращается из ремонта;)
SITEPOINT: Вы, кажется, любите комиксы и анимацию на протяжении всей жизни. Какие комиксы и мультфильмы привлекли вас, когда вы росли?
Рейчел: Когда я была маленькой, я смотрела такие шоу, как Tiny Toon Adventures и Animaniacs. Я особенно любил более темные тона сериала, такие как «Горгульи» и «Бэтмен»: анимационный сериал.
Влияет: Сейлор Мун.
Около 10 лет я попал в комиксы из-за мультфильма X-Men. Я не думаю, что мультфильм был особенно хорошо анимирован (или написан), но я влюбился в Rogue, рыжеволосую супергероиню, которая могла летать и взламывать валуны (звучит знакомо?).
Это привело меня в магазины комиксов, покупая комиксы X-Men. Но когда я вошел в подростковый возраст, я хотел больше от историй.
И вот, когда Сейлор Мун ударила по американским берегам. Я был потрясен этой японской героиней в американском драге. Она заставила меня думать, что женщины могут быть звездами своих собственных шоу, с их собственной силой и отношениями, которые находятся в центре внимания, а не на фоне более эпической драмы.
И именно так я попал в японские комиксы, мангу, одержимость, которая поставила меня на путь, по которому я сейчас нахожусь.
SITEPOINT: В веб-разработке обычно существует естественное разделение между дизайнерами и разработчиками. Обычно проектировщик может создать систему меню и дать команду кодеру, как она должна работать.
С типом графического повествования вы немного необычны в том, что обрабатываете как художественные работы, так и компоненты чистого кода. Я чувствую, что тонкий математический контроль над анимацией — например, как бегает кошка или дуга в воздухе — делегировать компетентному программисту сложнее, чем, например, как работает меню.
Поверьте мне, я близок к вопросу .. (смеется)
Итак, будущее мультимедийной анимации на основе Интернета — или мы просто ждем подходящих инструментов или платформы? — И если да, видели ли вы какие-либо инструменты разработки HTML5, которые могли бы заполнить это пространство?
РЕЙЧЕЛ: Отличный вопрос.
Я думаю, что всякий раз, когда в процесс веб-разработки привносятся новые знания, рынок берет их в обоих направлениях: будут специалисты, которые делают только одно, работают либо в крупных компаниях, либо консультируются, а также универсалы, которые добавляют этот навык для списка вещей, которые они могут сделать в команде.
Интерактивный рассказ: Черная кирпичная дорога в Оз
Так что я думаю, что мы увидим оба, и мы увидим различные степени качества от обоих типов.
Я думаю, что подходящие инструменты / платформы еще не готовы, или мы увидим, что учебные сайты заполнены «как использовать * вставить платформу здесь *».
Платформы и инструменты похожи на антивозрастные кремы: их так много, потому что ни один из них не решает проблему, по крайней мере, в случае кода, ни один из них не решает все проблемы на 100% (тогда как с антивозрастными кремами ни один из них не работает как ну, как они утверждают — если вообще).
Каждый год появляются новые имена, поскольку рынок пытается, тестирует, оценивает и продолжает двигаться. Но в отличие от антивозрастных кремов, я думаю, что с помощью кода у нас есть возможность реально решать проблемы под рукой. 🙂
Прямо сейчас все зависит от того, как будут выглядеть будущие рабочие процессы. Раньше люди делали анимацию как нечто, разбитое на фрагменты контента, то, что могло бы находиться в блоке где-то на странице.
Теперь мы наконец изучаем анимацию как неотъемлемую часть любого взаимодействия на странице. Как мы это делаем в адаптивном рабочем процессе? Рабочий процесс прототипирования? Рабочий процесс доступности?
Мы не узнаем, пока не попробуем анимировать все вещи во всех местах, всеми способами для всех людей. Кто-то создаст или усовершенствует инструменты для самого популярного потока, и поэтому экспериментирование очень важно в это время. То, что мы строим сегодня, диктует инструменты завтрашнего дня.
Итак, какие инструменты у нас сегодня? Adobe Edge Animate легко доступен для студентов, изучающих программы Creative Cloud, и для тех, кто знаком с Flash.
Я работал с ним сам, и это замечательное место для людей с небольшим опытом работы с CSS / JS. Я также увидел очень хорошую информацию и услышал отличные отзывы о Hype, который, насколько я понял, предлагает отличную обратную совместимость, производительность и независимость от библиотек, поэтому он должен очень понравиться разработчикам интерфейсных приложений.
У обоих есть инструменты временной шкалы, которые, пока браузеры не встроят такие вещи в свои инструменты разработки (если вообще когда-либо), остаются ПРИЧИНОЙ для работы с такими инструментами. По моему опыту, визуальным креативщикам очень сложно представить сложные временные рамки, связанные со сложной анимацией, и временные шкалы помогают им в этом.
Мне бы хотелось, чтобы появилось особое поколение дизайнеров / разработчиков / аниматоров, которые могут делать все искусство, CSS, JavaScript и т. Д. Вручную.
Кот в Бяккойе: музыкальное видео Рэйчел на HTML5 / CSS3 на Codepen.io.
Эти виды химер выходят за рамки каждого часа, когда они работают.
Но я понимаю, что это не обязательно самая эффективная модель, и нечестно ожидать, что кто-то потратит 5 лет своей жизни на освоение технологий, которые, как мы видели, могут измениться за то же время.
Поэтому я ожидаю, что люди будут специализироваться или использовать инструменты. Но я хочу, чтобы они помнили, что инструмент не определяет их.
Вы — истории и опыт, которые вы создаете, а не тип кода, программного обеспечения или стиля, в котором вы их создаете.
Никогда не позволяйте такому мышлению идти к вам в голову!
SITEPOINT: Ах, мудрые слова. Я помню, как эксперты Macromedia Director перешли на Flash примерно в одно и то же время. У них был длинный пробег, но все должны двигаться вперед и вверх.
Давайте поговорим о вашей технике иллюстрации. Ваша работа часто имеет органическое ощущение «чернил и бумаги». Вы обычно начинаете с реальных медиа, а затем оцифровываете их, или вы так же рады работать с пикселями с самого начала?
Рэйчел Великие комиксы: нет больше мистер «Хороший парень»
Рейчел: Мой стиль отражает мои корни в создании комиксов!
Я делал комиксы для девочек-подростков . Эти годы сообщают обо всем, что я делаю. Даже сайты и опыт, которые я создаю, имеют последовательное чувство к ним. Это очень характерно, как и мой стиль рисования.
Однако сейчас я создаю очень мало артефактов реального мира. Там, где я раньше рисовал и чернил свои работы на доске Бристоля за чертежным столом, теперь я записывал свои линии цифровым способом с помощью планшета Wacom прямо в компьютер.
Это началось как мера экономии времени; Сканирование рисунков добавляет время проекту. Проще пропустить этот шаг и работать напрямую в формате, которым может манипулировать компьютер.
Некоторые функции программного обеспечения, которые я использую, позволяют рисовать прямо в векторном формате, идеально подходящем для создания SVG! Я использую Manga Studio прежде всего потому, что это прекрасная интерпретация моих техник рисования. Он действительно понимает, какие линии вы пытаетесь установить.
Я использую Photoshop для раскрашивания и всего, что должно выглядеть как «естественная среда». Я манипулирую векторами в Illustrator.
Моя единственная жалоба заключается в том, что мне трудно взять такую работу со мной.
Алиса в Videoland Характер Лист-Хипстер Кролик
Независимо от того, насколько я оцифровываю свой рабочий процесс, я не могу избавиться от необходимости в нескольких крупных единицах оборудования: огромном артборде, когда я работаю в аналоговом режиме, или ноутбуке и планшете Wacom, когда я работаю в цифровом режиме.
Даже моему ноутбуку приходится работать с большими файлами изображений. Я завидую программистам, которые могут взять свою работу в дорогу на крошечном MacBook Air! Я не могу даже нарисовать поезд, а тем более самолет! Искусство всегда требует, чтобы я возвращался домой, а я люблю путешествовать.
Это действительно перетягивание каната с моим сердцем: создавать или исследовать?
SitePoint: Что ж, с выбором не похоже, что это два худших варианта, которые вы могли бы иметь!
Но да, я должен признать, что зависть к MacBook Air тоже .. (посмеивается)
Вы говорили о раскадровке на своих выступлениях, что является распространенным методом в других отраслях, но не так распространенным для веб-разработчиков. Используете ли вы специальное приложение для раскадровки при планировании пьес?
Рейчел: Нет, я не использую отдельное приложение для раскадровки, но они существуют! Я с удовольствием нарисую свою раскадровку в альбомах для рисования и сфотографирую их (рабочий процесс, который МОГУТ взять в дорогу!) Или перетяну их в Manga Studio .
SitePoint: А как насчет форматов файлов: можете ли вы увидеть, как Canvas, SVG или что-то еще становится основным способом предоставления такого рода веб-анимации, или пока у нас есть пиксели?
Рейчел: Ну, прежде всего, Canvas IS пикселей.
Это как тег изображения, пиксели которого вы можете перезаписывать снова и снова, как цифровой рисунок-эскиз. Но это не имеет смысловой ценности! Кошмар доступности!
SVG ограничивается векторами, и многие цифровые художники не используют векторы, потому что они не могут создавать живописные эффекты без значительного увеличения размера файла. Я думаю, что анимация на основе CSS и JS будет иметь место в сообществе, пока люди хотят иметь доступный контент и семантическую ценность.
Линдси и Марта: Рэйчел Наборс
API веб-анимации объединит их в общий язык. Я надеюсь, что эта спецификация получит больше поддержки в течение следующего года и будет способствовать обсуждению этого вопроса.
Это три разные вещи, и сообщество разбито вокруг них.
Разработчики Flash будут чувствовать себя наиболее комфортно с векторным форматом SVG.
Разработчики игр HTML5 наслаждаются простотой использования Canvas с их многочисленными библиотеками создания игр, которые согласовывают обработку спрайтов с обнаружением столкновений.
И тогда дизайнеры и фронтенд-разработчики с твердым основанием HTML / CSS будут склоняться к анимации CSS / JS. Даже я справился только с этой одной точкой треугольника, и у меня возникли проблемы с поиском времени для освоения остальных трех.
Но нам очень важно знать их сильные стороны.
Пока не появится API / инструмент / рабочий процесс, который использует их все, а поддержка и производительность браузера будут достаточно сильными, чтобы поддерживать их все, трудно оправдать освоение каждого из них.
Мой совет — освоите инструмент, который вам нужен для проекта. В мобильной среде с плоским дизайном вам может понадобиться только специализироваться на SVG.
В играх, холст. Узнайте достаточно о них всех, чтобы позвонить, и не бойтесь радостно поиграть с ними вне работы.
Мне нравится, как такие сайты, как CodePen (у меня есть профиль на codepen.io/rachelnabors ), побуждают нас играть и делиться друг с другом нашими экспериментами.
SitePoint: Да, я иногда задумываюсь над тем, сколько трюков мы потеряли людям, которые не потрудились сделать демонстрацию, пока Codepen, CSSDeck и Dabblet не сделали это настолько простым?
Вы признаете себя CSS-ботаником, но я заметил, что сейчас вы чаще говорите о JavaScript. CSS по-прежнему привлекает вас или JS завладела вами?
RACHEL:
Totes Legit от Рейчел Нэборс
Я люблю CSS, но я также чувствую, что достигаю 90% мастерства. Эти последние 10% не приведут меня туда, куда я хочу, в то время как JavaScript, с другой стороны, необходим, чтобы поднять мою CSS-анимацию на следующий уровень.
Это также необходимо для управления SVG и Canvas анимацией, которые я хочу освоить и помочь другим освоить. Вот почему я лично делаю обход JavaScript.
Это также имеет смысл для бизнеса.
Я вижу долгосрочную выгоду в обмене тем, что я узнал. Моей новой компании, Tin Magpie , понадобятся творческие решатели проблем и рассказчики, чтобы помочь создавать и поддерживать истории будущего.
Я хочу помочь пополнить кадровый резерв, сделав эти методы более обучаемыми. Ссоры из-за труднодоступных веб-разработчиков не будут толкать сеть вперед. Образование, которое помогает многим людям экспериментировать и вместе создавать волю.
Бесконечный Холст Screencast
Это была одна из причин, по которой я запустил « Бесконечный экранный холст» (infinitecanvasscreencast.com): чтобы облегчить перекрестное опыление дизайнеров, которые хотят создавать взаимодействия, и разработчиков, которые хотят общаться.
Но на более высоком уровне я специально преподаю JavaScript, потому что многие дизайнеры и специализированные HTML / CSS-исполнители сказали мне, что я помог им справиться с этим.
Я чувствую, что если бы я не предоставил этот вал большему языку, я бы оставил много потенциальных коллег-веб-аниматоров и экспериментаторов, чтобы они бились головой о стены, как я это делал многие годы.
Если мои учения и метафоры о DOM могут помочь им перейти на следующий уровень и создать сеть, в которой я хочу жить и работать, это стоит того.
Я хочу поделиться с ними своими моментами ах-ха, пока они у меня.
Я хочу оставить эту лестницу для других, чтобы преодолеть то же самое препятствие. Это небольшая вещь, которую я могу сделать, чтобы почтить всех хороших людей, которые помогли мне в моем собственном путешествии по программированию.
Рахиль Великая
И я не симулирую здесь смирение. Каждый раз, когда я стою перед толпой или кто-то протягивает мне руку с чем-то, с чем я борюсь, я испытываю глубокое чувство благодарности.
И люди, которые заставляют меня чувствовать себя таким образом, заставили бы меня заплатить эту услугу вперед, а не послать им необычный подарок благодарности.
SitePoint: Что мы можем ожидать от вашего выступления FOWD?
РЕЙЧЕЛ: В FOWD я поделюсь всей теорией анимации, которую я выучил за последние 10 лет, в компактных, вкусных, иллюстрированных укусах.
Участники могут ожидать увидеть примеры из реальной жизни о том, как анимация улучшает интерфейсы и пользовательский опыт, и я вооружу их пониманием того, как интегрировать эти методы и людей в свои собственные процессы.
SitePoint: Вкусные укусы. Это звучит весело!
В любом случае, большое спасибо за ваше время, и мы надеемся, что вы когда-нибудь отправитесь в Австралию — возможно, в Web Directions.
РЕЙЧЕЛ: Надеюсь, что так! Это было приятно. Спасибо за эту возможность поговорить с вашей аудиторией!
Рэйчел присоединяется к Гарри Робертсу, Полу Боагу и Саре Парментер и кавалькаде удивительных умников в Future Of Web Design (FOWD) в Лондоне с 7 по 9 апреля .
Пока я пишу это, есть еще небольшое количество билетов, но не откладывайте.