Xara Web Designer 12 Premium. Где у него кнопка.

Если вы знаете способы лучше, проще, правильнее - пишите. Исправлю.

1. Примеры работ в редакторах Xara (просто посмотреть)

Рабочая модель персонажа
https://youtu.be/XSDnP3SBiQA
https://youtu.be/LZRPwDDV6js
https://youtu.be/fojfMVt3T6k
(Xara Designer pro, Photo & Graphics Designer, Web Designer)

Дизайн буклета
https://youtu.be/WEQh91l-Fo4
(Xara Designer pro, Photo & Graphics Designer)

Портретная ретушь
https://youtu.be/8s6FGXf1fmc
(Xara Designer pro, Photo & Graphics Designer)

Удаление фона.
https://youtu.be/mM1TdS2z0m0
(Photo & Graphics Designer и Xara Designer pro)

Анимация
https://youtu.be/bogf7w_8Sdw
(Xara Designer pro, Photo & Graphics Designer, Web Designer)

Векторная графика.

https://youtu.be/EB9kqa5rZpo

Анимация

https://youtu.be/16toWczEEpk

Всякое разное:

https://youtu.be/CGRuOPj-1Rs

2. Каталог контента (Content Catalogue), интеграция с Pixabay

(Версии программы начиная с 12)

- Нажатие на сочетание клавиш Ctrl+Shift+Alt+K (File - New from Content catalogue ) вызывает окно онлайн каталога.
- Поиск в онлайн каталоге интегрирован с банком изображений Pixabay (банк изображений, которые можно изменять, распространять и использовать даже в коммерческих целях совершенно бесплатно, не запрашивая для этих действий дополнительного разрешения)
изображения и векторы из Pixabay отображаются в разделах Stock Photos и Stock Illustrations

Неожиданно обнаружил там свою фотку, сделанную на телелефон...

3. Фавикон сайта (Favicon)

Favicon (сокр. от англ. FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. (Википедия)

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

Это важная вещь, поэтому давайте попробуем сделать.

Требования к Favicon:

Цитата: Чтобы фавиконка отображалась в результатах поиска, необходимо разместить картинку (файл favicon.ico) размером 16×16 пикселей в корневом каталоге сайта. Предпочтительный формат пиктограммы сайта — ICO, но возможны и другие форматы: GIF, JPEG, PNG и BMP
(Яндекс: https://yandex.ru/support/webmaster/search-results/favicon.xml)

1. Выбираем ГОТОВОЕ изображение (16 на 16 пикселей) (Рисуем, сохраняем, затем импортируем в проект сайта)

2. Выносим за границу видимой области сайта (возможно, способ идиотский, но у меня работает, там иконку не видно, она никому не помешает, и исправно появляется там, где ей и надо быть.)









3. Выделяем обьект, нажимаем: Apply, remove or inspect names of objects - это значит Применить, удалить или проверить названия объектов, или нажимаем правой кнопкой мыши на обьект и выбираем в выпадающем меню пункт Names



В графе "Apply name" пишем: favicon



Нажимаем Add. Выходим.

4. Предварительный просмотр сайта покажет, что favicon отображается.



Важно:
- Если вы меняли favicon во время создания сайта, то новая иконка станет видна только если почистить историю браузера (иначе он будет показывать старый вариант)
- Если меняли favicon на уже работающем сайте, то в результатах поисковика новая иконка отобразится не скоро.
- Иконку нужно повторить на всех страницах сайта.

4. Стикеры и "резиновые" объекты (Web Sticky/Stretch)

Нажимаем на нужный объект правой кнопкой мыши -> выбираем Web Sticky/Stretch -> ...

в появившемся небольшом окошке можно закрепить объект в определённом месте:

Sticky - обьект будет всегда висеть в одной и той же позиции независимо от прокрутки

Stick at top - при прокрутке его нельзя будет утянуть за край видимой области, если с самого начала был сверху, то там и будет висеть, или же прокрутится до верха страницы и останется там

В нижней части меню можно указать, что обьект необходимо растянуть, а так же указать как именно




https://youtu.be/AckwgWTSIEA

https://youtu.be/rbBN7sGtOc8

5. Создание покадровой анимации (Animation)

В программе можно делать простую анимацию, с последующим экспортом в gif или swf
Это будет покадровая анимация.
(пример: кадр за кадром, вытаскивал изображение из за края видимой области и передвигал его вправо)

1. Создаём новую анимацию, выбрав соответствующий пункт в меню файл. (в настройках страницы можно указать размер в пикселях, в противном случае будет вариант "по умолчанию")
File -> New -> Animation (или жмём быстрые клавиши: Shift+ctrl+N)

2. Вот то, что должно появиться вместо обычных страниц и слоёв:

После того как в основном окне нарисуете (или соберёте из чего то готового) первый кадр, здесь можно будет создать следующий кадр:

- копируем первый: Copy, а затем изменяем его нужным образом.
- или создаём новый, пустой: New

Здесь же, в настройках (Properties...), можно увеличить, или уменьшить время показа кадра, и изменить другие его настройки.

3. Просматриваем что получилось Preview

4. Сохраняем результат в общепринятых форматах (gif или swf). Просматриваем обычным браузером.

6. Веб-анимация (Web Animation)

https://youtu.be/ZLPg5AXDqM8

Эта функция позволяет задать анимацию объектов на веб-странице:
- при наведении курсра мыши на объект (можно выбрать эффект из списка, показать всплывающий текст, или вплывающий слой с изображением, или анимацией)
- при клике на объект (выбрать эффект из списка)
- при прокрутке страницы (анимация появления в видимой области браузера, анимация при прокрутке страницы)

Кликаем на объект правой кнопкой мыши и в выпадающем меню выбираем "Web Animation"

Анимация прокрутки Parallax (Parallax Scroll Animation Effect)
Это когда фон стоит неподвижно, а эдементы страницы прокручиваются в несколько слоёв с разной скоростью. Главные помедленнее, остальные быстрее:

https://youtu.be/jttxz4MHJMY

7. Создание веб презентаций (Presentation)

Программа позволяет создавать презентации, в том числе интерактивные, тесты, обучающие курсы, и другие подобные объекты, которые будет можно просматривать в обычном браузере. (предпочтительнее те, которые имеют полноэкранный режим)
Все они будут являться вариантами обычных HTML документов. (проще говоря, это будет вебсайт, который тихонько лежит у вас в папке, и при этом прекрасно работает)
Чем отличается от стандартного сайта? - управление. Листание страниц и переходы к новому шагу осуществляются с клавиатуры (стрелками), ну и можно сделать кликабельные элементы на странице, тогда уже и мышка идёт в ход.
Страница презентации соответствует экрану своим размером, поэтому прокрутка отсутствует.

Лирическое отступление:
Почему не мелкософт, или любая другая подобная программа?
Потому, что графический редактор имеет больше возможностей для работы именно с изображениями, а значит и вероятность сделать что-нибудь оригинальное, намного выше.
Если вы отродясь не использовали ничего кроме стандартных MS шаблонов, то вам это не надо.
Никто не умаляет достоинств PowerPoint, но попробуйте хоть паршивую гифку в нём сделать...)
Так что если речь заходит о креативе, можно и попробовать.

Недостатки редактора:
- не нашёл способа сделать более сложную структуру презентации (например при определённых действиях пропускать слайд)
- Gif файлы нельзя вертеть: ни отразить зеркально по вертикальной, или горизонтальной оси, ни повернуть. (А вот Pover point такие возможности предоставляет уже давно)
- затруднено встраивание видео и музыки. (ограничения по формату, применение web анимации к встроенному видео ограничено, поворот виджета тоже невозможен)

8. Редактирование динамического виджета (wydget)

На примере Zaccordion 3 Slideshow.

1. Выбираем виджет в каталоге: или в локальном (где библиотеки), или в онлайн каталоге.
2. Импортируем в проект (два раза кликнуть мышкой, или нажать import)
3. Для редактирования кликаем на появившийся виджет (или на ссылку edit во всплывающей подсказке)
4. В отдельной вкладке, виджет откроется для редактирования:


5. Вот эта штука нужна чтобы изменять свойства виджета:


Если менять значения в соответствующих окошках, виджет изменит своё поведение на странице (про цвет не написал. надо разобраться сначала)

6. Меняем изображения на нужные (просто перетаскиваем то, что нужно, на нужное место), меняем тексты.
7. Предварительно просматриваем в браузере.
8. Сохраняем. (При нажатии на иконку дискеты вкладка редактирования закроется, и вы вернётесь в свой проект. Виджет в нём будет изменён)


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

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

9. Встраивание аудиофайлов

Редактор позволяет встраивать в WEB страницы музыку.
Для этого нужно:

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

внешний вид виджета:

10. Встраивание видеофайлов

Программа позволяет встраивать видеофайлы на web страницы.
Для этого нужно:

- Иметь готовый видеофайл. (MP4)
- Перетянуть видеофайл в окно программы, или воспользоваться функцией "импорт"
- Выбрать как именно файл будет воспроизведён в появившемся диалоге. (автоматически, или по клику)
- Разместить виджет на странице. (виджет можно растягивать и сжимать по горизонтали и вертикали)
- Вназвании файла допустимы только английские буквы, символы ( № #, _-/?&... и т.п.) должны быть исключены.

Примечание: Формат видео должен быть распознаваем программой.
Для тестов я брал MP4 видео которое скачал с You Toube
Видеоредактор MAGIX Video deluxe 2017, при выборе формата "MPEG-4", так же выдаёт пригодные для работы файлы.

Вид виджета при просмотре страницы (левый по умолчанию, правый уже после начала воспроизведения на паузе):

11. Заливка обьектов

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

Кроме этого возможен вариант Растровой заливки.
Для этого
1. Импортируем любое изображение в проект (перетащить в окно проекта, а затем просто стереть из рабочей области чтоб не мешалось)
2. После того как он появится в библиотеке изображений проекта его можно будет использовать
3. Выделяем нужный обьект, правой кнопкой мыши жмём на изображение в библиотеке, и в выпадающем меню выбираем "Apply as fill" - использовать как заливку
4. При необходимости можно подвинуть заливку, чтобы под обьектом появилась нужная часть изображения
5. Программе всё равно какие обьекты, во сколько слоёв и как заливать.

12. Всплывающий слой.

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

Пример: ХОЧУ ЧТОБЫ ПРИ КЛИКЕ НА СОЛНЫШКО ПОЯВЛЯЛИСЬ ВЕТКИ БАМБУКА!

1. Делаем два слоя:

- основной (тот который виден пользователю изначально) и размещаем на нём солнышко
(по умолчанию этот слой уже есть. В программе основной слой называется "MouseOff" хотя можно создать и другой)
- всплывающий (тот который появится после клика) размещаем на нём ветки.
(на скриншоте он у меня с названием "laier vspl")

2. Задаём web свойства:

- Выбираем солнышко, жмём на него правой кнопкой мышки и указываем, что при нажатии должен появиться всплывающий слой "laier vspl" на котором у нас ветки.


3. Там же в настройках указываем:

- как именно должен появиться всплывающий слой (я выбрал вылет снизу)
- как быстро он должен появляться (выбираем время в секундах)

Применяем изменения (Apply) и смотрим в браузере как получилось.

если бы редактор был переведён на русский язык, окошко web свойств выглядело бы так:

13. Анимация элементов на web странице

анимация элемента при:

- появлении/прокрутке
- наведении указатея мыши
- щелчке

(отдельно рассматривается анимация эффектов перехода на страницу сайта или web презентации о них позже)

14. Переключить вид интерфейса

ctrl + shift + alt + s
(так выглядели более ранние версии программы)

[Tetragromaton]

Спасибо за гайд !)