Первый взгляд на Avocode



    Доброго времени суток, Хабр!

    Так уж завелось, что подавляющее большинство веб-дизайнеров создают макеты сайтов в Adobe Photoshop. И каждый раз, мы, бедные верстальщики, испытываем на себе все минусы и проблемы PS. И нам всегда приходилось с ними мириться, либо использовать всяческие плагины костыли, и сторонние приложения костыли. Даже новомодный и перспективный Sketch создан, в первую очередь, для создания макетов, а не для извлечения информации для верстки.

    Но темные времена прошли, и тучи начинают рассеиваться над миром фронтенд-разработчиков. Итак, встречайте: Avocode!

    Avocode – это продукт от компании Source, созданный специально для измученных верстальщиков. Сами Source называют его “Мост между дизайнерами и разработчиками”. Работать это будет так: дизайнер нарисовал макет, кликнул по кнопке в плагине, и макет улетел прямо в Avocode к верстальщику.

    Проект сейчас находится в статусе private beta, и еще очень сырой, но он уже обладает достаточным количеством фич, о которых я сейчас и расскажу.

    (Некоторые изображения кликабельны)



    Последняя бета (0.4.0) вышла 23 июля 2014. В ней добавили одну из самых главных фич: экспорт в SVG.

    Avocode 0.4.0 Beta Changelog:

    • Добавлена возможность экспорта векторных слоёв в SVG
    • Улучшена поддержка текстовых слоёв – underline, uppercase, smallcaps, line through.
    • Баг фиксы, улучшения UI


    Известные баги и недостающий функционал:

    • Автоматические апдейты еще не работают
    • Пока что не достаточно хороший UX панели экспорта
    • Не оттестирован функционал “двойного клика по слою”
    • Нет поддержки SASS
    • Нет Windows / Linux версий
    • Selection by dragging


    Новые беты Avocode выходят каждые 14 дней.

    На данный момент, чтобы импортировать дизайн-макет, нужно иметь PS, с установленным плагином Avocode. В будущем планируется возможность импортировать макеты другими способами: Dropbox, Layervault, либо прямо с жесткого диска.





    Открываем любимый макет в PS (ребята обещают поддержку Sketch в будущем), вызываем окно плагина, логинимся с аккаунтом Source (да, да, почти все действия завязаны на этот аккаунт), и клацаем по кнопке Sync To Avocode.



    Начинается загрузка всех слоёв на их сервера, и вот, наш макет доступен в Avocode, и мы можем выбрать его из списка, и… он крэшится, и мы понимаем что Avocode – это веб-приложение, написанное на JS, и запущенное в WebKit.



    В общем, другой макет мне все-таки удалось благополучно открыть в Avocode.



    Рабочее пространство поделено на 3 части: панель слоёв (слева), область с нашим макетом, и мульти-панель (справа) с 4 вкладками (инспектор, библиотека, проекты, и справка). Левая панель сворачивается. Также (пока) доступны 4 инструмента: выбор, линейка, пипетка, рука.

    Панель слоёв довольно проста, в ней отображаются все слои в макете, есть возможность скрыть слой, и контекстное меню. Под этой панелью располагаются инструменты. Если панель слоёв скрыть, панель инструментов останется слева по центру.




    В правой панели, в первой вкладке располагается замечательный инспектор.
    Тут можно скопировать текст одним кликом, увидеть размеры, скопировать стили (CSS либо LESS, SASS пока нет). Также есть возможность быстрого экспорта изображения, хоть SVG, хоть JPG, хоть PNG.
    Умный и удобный colorpicker, который умеет запоминать цвета, тоже присутствует.





    Еще Avocode очень хорошо справляется с экспортом SVG, и даже генерирует HTML для изображений (крайне бесполезная фича).







    Также можно экспортировать сразу все изображения, в 1 клик.



    Тоже самое и с цветовой схемой.



    Еще в Avocode есть Command Palette, позаимствованная у Sublime Text, и, я так понял, будет возможность устанавливать сторонние расширения.



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

    Что касаемо оплаты, скорее всего это будет месячная подписка.

    Если я что-либо пропустил, пишите вопросы в комментариях, с удовольствием на них отвечу, и дополню обзор.

    Source обещали Public Beta @ Summer 2014, так что совсем скоро, вы сможете сами пощупать его.

    UPD: Вышла новая бета (0.5.0). Появилась поддержка SASS.
    Метки:
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 68
    • 0
      По-моему, Adobe Muse ничем не уступает этому Avocode.
      • 0
        Эм… а как в Muse открыть и использовать PSD? Вижу только Place, который просто кидает файл картинкой.
        • 0
          Команда Place может кидать картинкой целый файл или отдельный слой. Можно выбрать все слои, если зажать CTRL.
      • +5
        Есть еще Project Parfait от Adobe.
        • +2
          Вот-вот, интересно сравнение обоих продуктов. Project Parfait вполне себе бесплатен и уже какое-то время доступен всем и каждому.
          • 0
            Первое, что меня отпугнуло в Parfait – это «SCSS + Bourbon». Почему именно Bourbon? Я его не использую. Я использую Compass. Тот же CSSHat от Source генерирует SCSS + Compass, и скорее всего так будет и в Avocode.
            В бесплатности Parfait можно усомниться, т.к. это beta, и делать её платной нет смысла. И зная эдоби, цена будет достойной.
            А вообще, конкуренция – залог развития.
            • 0
              А почему Source выбрал Compass? Я вот его не использую.
          • +6
            На случай если приживётся, то сразу в копилку правильного произношения хочу хабрасообществу вложить:

            Parfait — слово французского произношения, означает «идеально» или «превосходно». По-французски читается как «парфЭ» с ударением на последний слог. По-английски звучит немного иначе — «пАфэй» www.oxforddictionaries.com/definition/english/parfait

            Полагаю, что английский вариант победит, хотя мне больше по-душе французский.

            И да, парфэ это ещё такая вкусняшка, вроде замороженного алкогольного гоголь-моголя en.wikipedia.org/wiki/Parfait
          • 0
            Ламерский вопрос задам. Особенно стыдно спрашивать, потому что сам созданием сайтов занимаюсь и неплохо на этом зарабатываю.

            А зачем сначала делать дизайн в фотошопе, если потом его оттуда еще вытаскивать как-то надо? Разве не проще сразу верстать в каком-нибудь WYSIWYG типа Dreamweaver'а статику, а потом ее уже обрабатывать?
            • 0
              На всякий — поясняю вопрос. Я понимаю, потому что дизайнеры работают в фотошопе. Но отчего так сложилось?

              Вроде бы людям, делающим концепты для веба, должно быть не сложно обучиться и простенькому хтмль (выдергивать из которого стили куда удобней) — в конце концов, такие знания полезны, чтобы дизайн задачам сайта соответствовал…
              • +4
                Вы мыслите как программист, а не как дизайнер =)
                У меня вот лично тоже дизайн в коде обычно получается — и все такое простое, минималистичное и топорное. А у дизайнера вдохновение — он накладывает один за другим слои с различными красивостями, экспериментирует с цветами. Попросту говоря творит не заморачиваясь с кодом.
                А верстальщик потом все это дело с матюгами отражает в HTML/CSS да так чтобы все это не разъезжалось и работало. Главное это дизайнеру помнить основные принципы подготовки макета (хотя бы даже ilovepsd.ru/) чтобы вертсальщик хотя бы на этапе разбора макета это все красиво нарезал и разложил по полочкам.
                • 0
                  Наверное. Хотя все-таки скорее как рекламщик. Я соображаю, что нужно, чтобы развести мою целевуху на бабки/звонки/время на сайте, четко представляю в башке — и перевожу в код. А вдохновение… Если вдруг просчитался и не понравился результат — поменять цвет в CSS просто, а для картинок PS есть...=)))
                • +1
                  Если бы в дримвивере было также просто рисовать интерфейсы как в графредакторах, то все дизайнеры уже давно бы забыли фотошопы, скетчи, корелы и т.п.
                  • +1
                    Наверное, не так сформулировал. Фотошоп я тоже простой в освоении программой не назову. Но вопрос, наверное, не в том, что проще дизайнерам, а что эффективней… Вернее, отчего конвейерное разделение на дизайнера-верстальщика-кодера считается эффективным, и действительно ли оно таково.

                    P.S. Кто-то дизайнит в кореле? Мда. Бесконечно далек я от народа, получается…
                    • +1
                      Мне кажется фотошоп стал стандартом от малограмотности и популярности. Но очевидно, что его время проходит и будущее за средствами типа webflow.com. Только туда бы добавить ещё графредактор, чтобы можно было рисовать графику непосредственно в макете. В общем нужно скрестить иллюстратор с дримвивером и будет хорошо :)

                      P.S. Кто-то наверное дизайнит. Релизят же его до сих пор :)
                      • 0
                        Corel заточен под печать.
                        • +2
                          и под виндос. его макеты, насколько мне известно, невозможно открыть ничем, кроме его самого и сомнительных программ-конвертеров, которых трудно даже запустить установить
                          • 0
                            ой не говори, корел – это боль
                            • +1
                              Это я так кастую людей, которые знают что-то рабочее для этой задачи.
                              • 0
                                Я, как любитель Крела, может что-то подскажу? :) В чем проблема главная? Последние версии сохраняют, и в PDF отлично, и в EPS. Даже в AI.

                                Для веба он точно не заточен. Как и иллюстратор по большей части. Не хочу разводить холивары, но Корел вполне годная программа, а некоторые фишки в люстре появляются намного позже (я про Live Corners).
                                • +1
                                  Сохранять-то он может, да вот никто этого не делает. И когда мне присылают более чем стометровый документ CDR, я развожу руками и не делаю ничего, кроме просьбы прислать в чём-либо другом. Потому что только формат Corel невозможно открыть ни в чём, кроме него, что уже должно быть тревожным звоночком: а почему CDR нигде, кроме Corel, не открывается?
                                  • 0
                                    Ну если никто не сохраняет, то это как бы не проблема программы, а проблемы «дизайнеров», которые не делают этого. Поэтому у типографий есть требования к форматам. Вот PSD в гимпе тоже тяжело открыть, и верстальщики на линуксе от этого страдают иногда.

                                    Для меня Иллюстратор — боль. Часто вылетает при этом может похерить сохраненный файл, автосейва нет (хотя даже в ФШ уже есть), работа со шрифтами ужасно неудобная. Это всё моё имхо.
                                    • 0
                                      Потому что нужно всегда использовать универсальные форматы. Я ни разу не сохранял в .ai, всегда в PDF. Например. Photoshop так не умеет вообще, максимум – TIFF со слоями.
                                      И ты обещал не устраивать священную войну.
                                      • 0
                                        eps – подходящий формат
                                        • 0
                                          И как, хорошо выводит? Ничего не теряется?
                                    • 0
                                      И как насчет этого сервиса — cdr2ai
                                      • 0
                                        Потому что он не ест больше 50 МБ.
                                        • 0
                                          А там на 100 мб что? Многостраничный буклет? Такое лучше вообще в Индизайне делать.
                                          • 0
                                            В последний раз был именно буклет, из которого мне было предложено взять логотип.
                                            • 0
                                              Т.е. ради одного логитипа скинули весь буклет? Это видимо скинул заказчик? Ибо адекватный дизайнер такую фигню делать не будет.

                                              Я, например, отдаю заказчику целый пак логотипов во всех форматах. Агитирую еще выкладывать себе на сайт, чтобы кому понадобится мог быстро скачать.

                                              Тоже иногда приходилось перегонять ПДФки или люстру в корел, для нормальной работы. Там тоже не все гладко. Те же эффекты или наложение слоев всегда бьются. Это я к тому что многие ругаются на эффекты корела.
                                              • 0
                                                Конечно же, заказчик. И хорошо, что хоть это у них осталось, потому что чаще приходится обрисовывать по растру.
                                                • 0
                                                  О, это больная тема. Очень не хватает нашего аналога Brands of the World
                                                  • 0
                                                    Знаков мелких контор всё равно нигде нет.
                                                    • 0
                                                      У меня была мысль делать наш аналог такого сайта, где дизайнеры смогут выложить и логотипы мелких контор, и всякая символика областей и городов. Конечно, часть гербов и флагов есть в википедии, но очень мало.

                                                      И у мелких контор исходников может даже и не быть. Часто говорят «да возьмите логотип с сайта».

                                                      Может сделать и распространять манифест, в котором призвать компании и студии размещать в публичном доступе логотипы в векторном виде? На сайте компании или на сайте студии/фрилансера, которые разрабытвали логотип? А если есть, то размещать весь брендбук.

                                                      Помню, заказчик отказывался присылать брендбук ссылаясь на корпоративную тайну… facepalm.jpg
                                                      • 0
                                                        Вот из-за этого все проблемы. А манифест написать можно, я поддерживаю.
                                      • 0
                                        Работаю (под печать) в кореле, в 95% отдаю ПДФ, 5% если хотят исходники. Я думал так все (большинство) делают, особенно после того что несколько лет назад многие типухи кореловские макеты не брали вообще.
                                        • 0
                                          Ты большой молодец. К сожалению, специфика формата CDR и привязка к виндос делает меня ненавидеть всё, что с этим связано.
                                          • 0
                                            Формат AI тоже совсем не универсальный, не знаю как там с линуксом, но то, что он требователен к версии люстры также доставляет проблем. Но, стоп, прекращаем извечный холивар.
                              • 0
                                Фотошоп тоже не под вебдизайн заточен.
                              • +4
                                Когда я вижу в заголовке очередного инструмента “Without Code”, все мои шаблонизаторы, pre- и post-processor'ы, framework'и и библиотеки плачут горькими слезами вместе со своими создателями.
                                • 0
                                  Не, будущее было и остается за Notepad++=))) В смысле — визуальные редакторы, как бы круты не были, умеют только то, что в них заложено. Чтобы сделать что-то необычное и привлекающее взгляд — все равно нужно в код лезть, хоть в дримвивере, хоть в блокноте=)
                                  • 0
                                    Благодарю за ссылку на Webflow!
                                    От себя добавлю лишь список на alternativeTo – из хороших там в основном про Bootstrap, но всё же.
                            • 0
                              «Нет Windows / Linux версий» — очень жаль. остаёться только ждать, пока же это только многообещающий проект…
                              • +1
                                Для видно и Linux нет очень многих инструментов дизайнеров-разработчиков, взять хотя бы тот же Sketch.
                                • 0
                                  Под Linux и Винду запилили. Пользуюсь уж несколько недель, полет нормальный
                                • +1
                                  А еще есть Fireworks…
                                  • 0
                                    …которого уже нет
                                    • +3
                                      И это замечательно.
                                      • 0
                                        Весьма многообещающий был инструмент. Illustrator после него немного не подходит для рисования UI.
                                  • 0
                                    Есть еще такой софт — macaw.co
                                    Мы у себя пробовали бетку — вполне нормально. Ждем развития программы.
                                    • 0
                                      Ну, это, опять-таки, не более, чем продвинутый создатель прототипов. Замена Sketch.
                                      • 0
                                        Почему? Там на выходе готовый хтмл можно получить. И они обещают серьезно двигаться именно в этом направлении.
                                        • 0
                                          Потому что попробуй поддерживать взрослый сайт на голом HTML, CSS и JS, я на тебя посмотрю.
                                          • 0
                                            К чему вообще этот комментарий? macaw и другой подобный софт и не должен на выходе давать «взрослый сайт». Он должен помогать ускорить самую рутинную часть работы верстальщика — нарезку PSD макетов на базовые блоки. А Вы в кучу свалили еще и JS, который чаще всего пишут фронт-енд программеры, а не верстальщики.
                                            • 0
                                              в наше время фронт-енд программист = верстальщик
                                              • 0
                                                В какое «ваше» время? Верстка всегда была одной из самой низкооплачиваемой и простой работой по фронт-енду, можно сказать — начальным этапом. Поэтому даже многие дизайнеры сами режут свои макеты до сих пор. А писать качественный JS — это совсем другого уровня работа, посмотрите на вакансии и заработные платы верстальщиков и полноценных фронт-енд программеров.
                                                • 0
                                                  В наше время, хорошая верстка – это уже совсем не тривиальная задача. Зайдите на кодпен.
                                                  • 0
                                                    Вот когда она дешёвая и простая, тогда можно и “export HTML”. Но это не является web-разработкой. Это халтура.
                                                • 0
                                                  Сама фраза “нарезать PSD” звучит ужасно. Вы имеете в виду разрезать слои на картинки?
                                                  • +1
                                                    Разрешите поделиться одним способом нарезки (при условии, что в слоях файла можно разобраться):
                                                    Смарт-объекты
                                                    image
                                                    • 0
                                                      Спрячьте это скорее, чтоб никто не увидел. 5 лет назад так можно было делать. Сейчас – ни в коем случае. Тут ~10 строк CSS.
                                                      • 0
                                                        При чём здесь CSS? Это универсальный способ вырезания всего. Иконки, фоны, кнопки, которые в цсс нельзя повторить. Подчеркиваю — любой слой или группу слоёв.
                                                        • 0
                                                          Растром должен быть только контент. Все элементы интерфейса должны быть в векторе (CSS, SVG, IconFonts).
                                                          • 0
                                                            Выше уже писали, при большом количестве svg браузер нещадно тормозит. У иконочных шрифтов рендеринг ужасный в мелких размерах (явные лесенки), вплоть до того, что иконка перестает считываться. Пока не появятся десктопные ретина-дисплеи в массовом количестве, имхо, не стоит делать иконочные шрифты.

                                                            Я не против CSS, что им можно сделать, то им и нужно делать. Но такие штуки в векторе не сделаешь.
                                                            Типичный тизер
                                                            image
                                                            • 0
                                                              А это содержимое, а не оформление. Такое и не надо в векторе на страницу.
                                                          • 0
                                                            Чаще всего содержимое, которое нельзя повторить в CSS/SVG, является излишне усложнённым. На крайний случай можно PNG+@2x в ::before поместить (например, листики-цветочки-монетки какие-нибудь).
                                                  • 0
                                                    Когда я вижу в заголовке очередного инструмента “Without Code”, все мои шаблонизаторы, pre- и post-processor'ы, framework'и и библиотеки плачут горькими слезами вместе со своими создателями.
                                              • 0
                                                Есть один инвайт на закрытую бету, дали при покупке, готов поделиться.

                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.