Muse cc что это за программа

Adobe Muse CC

Тот факт, что в HTML изначально не было разделения на структуру и дизайн, на долгие годы затормозил создание по-настоящему удобных и при этом гибких визуальных редакторов сайтов. Даже такой сильный инструмент, как Adobe Dreamweaver, требует, как минимум, редакции кода, хорошего понимания строения HTML и CSS. И вот после нескольких лет разработки Adobe наконец «выкатывает» совершенно новую программу, позволяющую строить сайты в стиле… InDesign.

Теперь даже дети знают, что InDesign — лучшая и очень удобная программа вёрстки. Об этом информировано также руководство Adobe, которое несколько лет назад выделило из команды разработчиков InDesign особый отдел. Именно он занялся созданием InDesign-подобной программы для веб-разработок. Этим объясняется поразительное сходство «ребёнка с соседом» — подобие Muse и InDesign.

Быстрый старт | 02. Что такое Adobe Muse | Adobe Muse уроки

Логика ясна — знакомый интерфейс, метод действия и даже горячие клавиши помогут пользователям InDesign применить свои навыки в новой программе. Также Adobe с 1999 г. продвигала сам InDesign, который был по сути смесью лучшего из QuarkXPress и Illustrator, приправленной новыми функциями. Таким образом, мы получили хоть пока и простенькое, но удобное в освоении и уже применимое для реальной работы средство построения сайтов. Но, что важно, без необходимости отличать

от .

Планирование

Среда планирования сайта

Интерфейс Muse поделен на пять разделов: Plan, Design, Preview, Publish и Manage — в соответствии с логикой и этапностью разработки. В режиме планирования мы имеем дело с окном, где вверху располагаются страницы, внизу — мастера. Да-да, это прямо как в InDesign: мастера можно присваивать страницам и другим мастерам простым перетаскиванием на миниатюру страницы или другого мастера. Страницы добавляются по бокам от существующих, а также вниз. Получается иерархическая карта сайта.

Разделы Muse

Вы можете задавать модульную сетку с прилипанием к ней объектов за счёт знакомой по другим «адобовским» программам функции Smart Guide. «Умные направляющие» напоминают таковые из InDesign и чрезвычайно полезны в работе. На мастерах можно добавлять, кроме прочего, элементы, которые не будут прокручиваться и смогут находиться ниже или выше прокручиваемых элементов на странице. Кроме того, в режиме планирования можно (в дополнение к основному макету) создавать версии для планшета и смартфона со связанным и синхронизируемым контентом между всеми версиями сайта.

Надо отметить, что проект разработки сайта представляет из себя один файл .muse (и набор графики к нему), содержимое которого при публикации конвертируется на лету в HTML, CSS, JS, PNG с добавлением картинок к файлам для скачивания (ZIP, PDF и т. п.).

Импорт графики

Простым двойным щелчком по миниатюре страницы переходим в режим её редактирования. Переключение между режимами планирования, редактирования, предпросмотра и т. п. происходит также с помощью простых горячих клавиш. Так, сочетание , десятилетиями означавшее печать, здесь присвоено команде Preview.

Предполагается, что дизайн, хотя его можно делать и в самой программе, приносится из Photoshop или Illustrator. Пока поддержка Photoshop реализована лучше, но понятно, что будущее — за векторной графикой. Подобный подход был в свое время реализован в (светлой памяти) Flash Catalyst. Вначале тоже лучше поддерживался Photoshop, но затем была проработана интеграция с Illustrator, который и стал в дальнейшем основным средством графической поддержки Fc.

Кроме использования в Muse обычной нарезки из графических редакторов есть несколько интересных решений. Так, Muse позволяет импортировать файлы PSD-картинкой или по слоям. Идея заключается в том, что дизайнер ставит макет, сделанный в Photoshop, фоновой картинкой.

Потом импортирует этот файл ещё раз по слоям и расставляет их на фоновой картинке, удаляя её после полного восстановления макета в Muse. Такого рода файлы программа будет экспортировать как PNG или JPEG — по собственному усмотрению. Растрирование элементов было опробовано ещё в InDesign для создания ePub и DPS-проектов. Будем надеяться, что в будущих релизах Muse нам позволят управлять выбором формата и параметрами растрирования. А там и создание SD- и HD-контента из одного оригинала не за горами.

Мало того, в Muse совершенно нормально поставить картинку, уменьшить, маскировать, если надо, инструментом Crop, и так оставить. Программа сама создаст из PNG или JPEG изображение финального размера и экранного разрешения. Таким образом, создавая, скажем, галерею изображений, уже не обязательно отдельно возиться с миниатюрами.

Дизайн графических и текстовых элементов

Из собственных инструментов в Muse имеются: прямоугольник, возможность задавать ему и импортированной графике контур, градиент, закруглённые углы, прозрачность, три эффекта. Все перечисленные параметры, а также настройки обтекания объекта и полей вокруг него (padding) можно сохранить как Graphic Style. Прямо как в InDesign или Illustrator — выбрав образец и щёлкнув по кнопке на соответствующей палитре. При изменении объекта, присвоенного к стилю, напротив последнего появляется знак +. Дизайнер может убрать изменения командой Clear Overrides (как в InDesign) или может нажать на стиль с плюсом правой кнопкой мыши и сделать Redefine Style, обновив стиль и изменив характеристики присвоенных ему объектов в масштабе всего сайта.

А ещё к вашим услугам палитры Transform и Align. Куда без них? Последняя функционально практически идентична таковой в Illustrator. Передвижение, вращение объектов, их размеры — всё в пикселях. Пока не реализовано задание относительных величин (процентов или Em).

Зато есть прикрепление объектов к верхнему, нижнему краям браузера и по углам. Можно также задать прозрачность и выбрать эффекты: тень, фаска, свечение и параллакс-прокручивание. Последнее добавлено уже в СС-версии (я начинал работать с программой ещё до эпохи CC) и представляет из себя возможность задать разную скорость передвижения объектов при вертикальном прокручивании страницы. Таким образом, прокручивание основного материала страницы может двигаться с одной скоростью, а, скажем, фоновые элементы с более низкой, создавая что-то вроде стереоскопического эффекта.

Уже реализованы возможности работы с типографикой. Хотя ещё нет таких простых функций, как изменение регистра в прописные, — текст приходится перенабирать или копировать в нужном регистре из InDesign. Muse может работать с тремя типами шрифтов: Web Safe Fonts, Web Fonts и System Fonts.

Web Safe Fonts — список шрифтов, установленных на всех системах. Это то, на что мы полагались от начала эпохи «развитого» интернета.

Web Fonts — подключаемые шрифты. В Muse доступна библиотека бесплатных шрифтов Adobe Edge Web Fonts, включающая в себя и некоторые шрифты из Adobe Typekit и Google Web Fonts. Коммерческие шрифты из библиотеки включенного в Creative Cloud сервиса Adobe Typekit можно также использовать и в Muse, но пока это не стандартная возможность и выполняется с помощью несложной манипуляции с кодом.

System Fonts — остальные установленные шрифты; будут экспортированы как растровый файл.

Ну и, конечно же, текст сохраняется в стилях. Подобно другим «адобовским» программам, имеются два типа стилей: Paragraph и Character Styles. Стиль создается очень просто: делается пример и сохраняется в палитре. Редакция стиля (Redefine Style) делается методом, описанным выше. Из опций стиля есть только список присвоенных ему атрибутов, имя и тэг.

Имена всех типов стилей желательно (хоть и не обязательно) набирать строчными буквами. С пробелами система справится сама, заменив их на дефисы в CSS. В абзацных и символьных стилях есть определённый выбор тегов. Однако, даже если вы ничего не понимаете в HTML, на установках по умолчанию это всё равно будет работать (

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

Интерактивность и виджеты

У каждого объекта (не только у кнопок) может быть четыре состояния: Normal, Rollover, Mouse Down и Active. Можно делать несколько тем оформления ссылок. Внутренние ссылки создаются простым выбором страниц сайта из выпадающего меню, где они представлены в соответствии с иерархией сайта. Также есть возможность легко и просто расставлять якоря и ссылки к ним.

Редакция компонента навигации

Кроме ссылок есть готовые модели навигации. В палитре Widget Library, раздел Menus есть заготовки вертикальной и горизонтальной панелей навигации. Суть этих панелей в том, что они умеют работать с иерархией сайта. Причём дизайнер сам решает, показывать ли только первый уровень или выпадающие меню подразделов. Также можно исключать страницы из навигационного меню.

Упомянутая палитра Widget Library по сути — библиотека готовых интерактивных компонентов: несколько типов слайдшоу, формы (бланк с заполняемыми полями), два типа меню, аккордеон, панель вкладок (Tabbed Panel), презентации, лента новостей и пр. Можно предположить, что Adobe будет не только расширять список, но, возможно, даст подключать сторонние компоненты.

Выбор интерактивнных компонент в палитре Widgets Library

Редакция готового компонента: замена картинок, текстов, изменение относительного местоположения и настроек

Несколько слов по поводу бланков. Набор заполняемых полей требует поддержки сервера. В Muse это решено с помощью сервиса Business Catalyst, доступ к которому получают все, у кого есть абонемент на Creative Cloud (а значит, и Muse). В текущей версии Muse CC электронные заполняемые формы могут быть «завязаны» не только с хостингом Business Catalyst, но и с любым другим хостингом, главное, чтобы хостинг поддерживал PHP.

Внедрение HTML и метаданных

Можно ставить и другие решения для форм. Технически это будет выглядеть как вставка HTML-фрагмента. Сервис, например, Wufoo, на котором вы собрали форму, отдает её в качестве HTML-кода, который вставляется в Muse командой Insert HTML. Этим способом можно принести массу компонентов, которых нет в Muse в готовом виде: виджет карт, YouTube-виджет, код Google Analytics и т. п. В программе везде есть возможность задавать метаданные для элементов и страниц, что помогает SEO-оптимизации.

У Adobe есть ещё одна перспективная разработка — анимационный редактор Edge Animate. Как и Muse — это совершенно новая программа, создающая анимацию и интерактивный контент в формате HTML/CSS/JS визуальным методом, почти или совсем без ручного кодирования. Кроме прочего, она прямо предназначена для работы с Muse. Из Edge анимация экспортируется как файл OAM (Edge Animate Deployment Package) и вставляется в Muse как картинка. Просто, как открыть дверь холодильника!

Предпросмотр и публикация

На любом этапе дизайнер может нажать на панели сверху кнопку Preview и посмотреть, как будет выглядеть страница и весь сайт. Другой вариант — на лету сгенерировать код и открыть сайт или страницу в браузере.

В плане публикации предлагается три варианта: можно сохранить как HTML-код вместе с используемыми изображениями и ресурсами, опубликовать на любой хостинг с помощью прямой загрузки на FTP или использовать для публикации сервис Business Catalyst. Выше сервис Business Catalyst упоминался в связи с формами. Кроме форм и хостинга он предоставляет решение по статистике посещаемости и возможность дать клиенту править тексты и картинки прямо в браузере! Впоследствии дизайнер сможет в Muse синхронизировать отредактированные клиентом данные в Business Catalyst со своим проектом.

Вердикт

Я перестроил свой сайт kletsel.com с помощью Muse. Имеющееся представление о веб-разработке помогло мне сделать более корректное с точки зрения браузера решение. Но в Muse можно легко обойтись и без «подкручивания» — в этом суть и преимущество нового редактора. Все прошлые программы генерации HTML грешили генерацией путанных файлов с массой мусорного кода.

Поэтому я попросил опытного веб-программиста посмотреть, что там нагенерировал Muse. К изумлению публики в моём лице программист отметил, что код на удивление чист и прост и (внимание!) вполне пригоден для последующей редакции человеком. В дополнение к перечисленным возможностям публикации, в Muse есть возможность экспорта сайта как папки со всеми HTML, стилями, скриптами, картинками и пр. Проще говоря, дизайнер теперь сам может оформить и сверстать сайт без обязательных знаний HTML-вёрстки. Не чудо ли?

Прошло лет пятнадцать (а это ничто по сравнению с вечностью) с момента появления Microsoft FrontPage — первого WYSIWYG-редактора сайтов, как дизайнеры получили действительно удобный и простой инструмент веб-разработки. Он позволяет не заниматься тегами, структурой и валидацией, а сконцентрироваться на том, что дизайнеры умеют лучше всего, — дизайне.

Источник: www.publish.ru

Adobe Muse 7.2 Build 232

Adobe Muse — новейшая разработка известной компании Adobe. Программа создана для легкого и быстрого визуального создания полноценных web-сайтов. Знание каких-либо языков программирования для этого совершено не требуется. На данный момент программа является бесплатной, так как находится на стадии бета-тестирования.

Особенности Adobe Muse

Adobe Muse является визуальным редактором, в котором есть четыре основных этапа разработки web-сайта: планирование, выбор и редактирование дизайна, просмотр конечного результата и дальнейшая публикация в интернете. Новое программное обеспечение Adobe Muse применяет современные web-стандарты, в которые входят Html 5 и CSS3, сочетая в себе огромную творческую свободу и большую точность в оформлении страниц.

Присутствует возможность работы с разнообразными виджетами и Html-кодом для разработки интерактивных приложений на сайте. Также в программе можно работать с платформами и библиотеками при добавлении элементов навигации.

Adobe Muse позволяет пользователю делать редактируемые виджеты, например, навигационное меню или простое перетаскивание элементов.

Сложные эффекты наведения, всплывающие подсказки, слайдшоу и другие настраиваемые интерактивные элементы — все это пользователь без особых проблем сможет добавить. Программа Adobe Muse разрешает встраивать шаблоны фрагментов Html-кода из различных источников, в число которых входят такие, как Facebook, Google Maps и YouTube.

Для оценки и тестирования так называемых пробных сайтов Adobe Muse позволяет бесплатно хранить их на серверах Adobe. В дальнейшем, по окончании тестирования, эти сайты можно перенести на платный хостинг Adobe или экспортировать по FTP на компьютер, либо залить на другой платный хостинг.

Источник: apps24.org

Создание сайта в muse

Adobe Muse – профессиональный редактор сайтов для новичков

Приветствую вас, друзья! Сегодня я хочу обратить ваше внимание на интереснейший визуальный редактор Adobe Muse. Может быть, вы считаете, что верстка потрясающе красивых сайтов с анимацией доступна только профессиональным веб-студиям? Это не так! Создание сайта в Adobe Muse – процесс не сложный и к тому же весьма увлекательный.

Об основных преимуществах и отличительных особенностях редактора я расскажу прямо сейчас.

Почему стоит работать в Adobe Muse

Самый существенный плюс программы – вам не нужно знать языки программирования, на которых пишутся сайты. Adobe Muse – в своем роде конструктор. Вы расставляете элементы будущего сайта на нужные места, оформляете их по своему вкусу и публикуете готовую страницу. Сайт готов!

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

Однако он идеально подходит, если вам нужен:

• сайт-визитка или портфолио;
• небольшой интернет-магазин;
• Landing Page;
• корпоративный сайт.

Adobe Muse открывает практически безграничные возможности для воплощения любых дизайнерских фантазий. В отличие от онлайн-конструкторов, где существует ряд ограничений, Muse позволяет придавать элементам разнообразное оформление. Параллакс-эффекты, галереи любых конфигураций, анимированные элементы, выпадающие списки, всплывающие окна – это неполный перечень того, что вы сможете воплотить на своем сайте с помощью редактора от Adobe.

Программа Muse дает немалую свободу действий. Для работы в ней не нужен интернет. Даже если с сетью у вас проблемы, вы не прекращаете работу над сайтом. После того, как страница будет готова, вы получаете свободный код. Что это значит?

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

Еще одна приятная особенность Muse – возможность создавать адаптивные сайты «с нуля» и адаптировать готовые шаблоны под любой размер экрана. Чтобы к вашему сайту положительно относились поисковые системы, мобильная версия должна быть обязательно. Adobe Muse предлагает вам такую опцию.

Как начать работу в Adobe Muse

Не секрет, что все приложения Adobe платные. Конечно, вы можете заглянуть на ближайший торрент, и скачать ломаную версию. Но делать этого не советую, потому что могут возникнуть проблемы с обновлениями, которые выпускаются разработчиками постоянно. К тому же, в процессе работы вы запросто можете столкнуться с «глюками», над которыми проломаете голову дня два, а в итоге обнаружится, что проблема была как раз-таки в «кривой» версии программы. Но вы можете воспользоваться доступными программами для создания веб-сайта.

Подписка на Adobe Muse стоит всего около 900 рублей в месяц. Сумма на самом деле небольшая, с учетом того, что доступ к расширенному функционалу в популярных онлайн-конструкторах стоит дороже.

Интерфейс программы напоминает Photoshop. Так что если вы уже знакомы с продуктами Adobe, разобраться в Muse вам будет несложно. Создаете новый шаблон нужного размера и начинаете заполнять его различными элементами.

Вы можете создавать их «с нуля», вырисовывать каждую кнопочку. А можно воспользоваться набором виджетов, которые предлагает программа: меню, галереи, всплывающие окна, таймеры и проч.

Для Adobe Muse в сети немало виджетов. Они помогают расширить стандартные возможности программы. Это может быть:

• корзина, которая превратит ваш сайт в интернет-магазин;
• онлайн-калькулятор;
• готовые меню самых разнообразных конфигураций (выезжающее боковое меню и многие другие).

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

Чтобы следить за процессом создания сайта, публикуйте работу на хостинге, предоставляемом Adobe. В программе также есть функция «Предпросмотр», которой можно воспользоваться, если доступа к интернету у вас на данный момент нет. Готовый сайт можно выгрузить в HTML (для этого есть специальная кнопка), после чего вы разместите его на любом хостинге.

Все ли так радужно?

Конечно, у программы Adobe Muse есть свои недостатки. Они не слишком существенны, однако я считаю своим долгом упомянуть о них. Тогда ваш выбор программы для создания сайтов будет более объективным. Итак:

1. Отсутствие русскоязычной техподдержки.
2. Требовательность к «железу», особенно если объем сайта превышает 5-10 страниц.
3. «Грязный» код.

Последний фактор, однако же, важен только для профессиональных верстальщиков. Владельцам сайтов «нечитаемый» код не мешает зарабатывать свои кровные. А посетителям дела нет до кода – красивая картинка и удобство намного важнее.

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

P.S. Обратите внимание ! Программа Adobe Muse больше не обновляется производителем. Рекомендую переходить на более современный плагин Элементор.

• Muse программа для создания сайтов
• Веб-дизайн, что это за профессия. Лучшие курсы по веб-дизайну
• Создание 3D обложек для инфопродуктов. Топ сервисов
• Сайт на php – простая разработка сложных сайтов
• Создание сайтов через конструктор LP motor. Готовые шаблоны
• Бесплатные площадки для создания сайтов
• Программы по созданию сайтов для новичков
• Создание веб-дизайна: основы и техника

Источник: asonin.ru

Блог

Действительно, часто заказчика мало интересуют ваши технические возможности — он заказывает у вас сайт под ключ и хочет видеть готовую работу. Он хочет получить не просто макет в psd, а полностью готовый сайт, опубликованный в Интернете. Какой выход?

Можно, конечно, просто посылать таких заказчиков лесом. Или найти себе в пару верстальщика. Если вы с ним сработаетесь — считайте, что вам повезло.

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

Что ни говорите, на контроль верстальщика необходимо тратить много времени и сил, а потом еще отдавать половину гонорара за работу. Как быть?

К счастью для дизайнеров, у которых не складываются отношения с версткой, относительно недавно появилось отличное решение от Adobe — программа Adobe Muse.

Несколько дней назад я записал интервью с дизайнером Данилом Фимушкиным, который специализируется в веб-дизайне и вот уже полгода выполняет свои проекты самостоятельно, без верстальщика.

Предлагаю вашему вниманию нашу беседу. Из нее вы узнаете, как стать веб дизайнером, и быть свободным и финансово независимым .

Источник: creativshik.com