Обзоры расширений Joomla

 

 

В предыдущей статье «Обзор TemplateToaster Professional. Программа для создания шаблонов» мы кратко ознакомились с основными возможностями приложения и рассмотрели его глобальные настройки. Теперь перейдём к инструментам. Все они разделены на тринадцать вкладок и представляют уже знакомые по интерфейсу Microsoft Office «ленты». Отмечу, что набор инструментов и вкладок зависти от того, для какой CMS создаёте шаблон, и какие параметры задаёте на тех или иных вкладках. Например, вкладка Модули не будет отображаться до тех пор, пока не активирует на вкладке Начало, в инструменте Боковые панели, хотя бы одну боковую панель.

Начало

TemplateToaster Professional – альтернатива Artisteer не только по назначению, но и по организации интерфейса (рисунок ниже).

TemplateToaster

На первой вкладке Начало (рисунок ниже) собраны базовые инструменты по настройке общих параметров шаблона. Все инструменты разделены на «области»

Начало

Область Предложить идеи, инструмент Предложить дизайн. При нажатии на этот инструмент TemplateToaster Professional будет генерировать шаблоны. Если честно, то я не пользуюсь данной функцией ни в Artisteer ни тут. Так как результат, мягко говоря, не очень (рисунок ниже). Отмечу, что подобный инструмент есть на всех вкладках. Но если на него нажимать, например, на вкладке Тело сайта, будет генерироваться только фон шаблона. Не станем его рассматривать в дальнейшем.

TemplateToaster Professional

Область Темы, инструмент Цвета. При помощи данного инструмента (рисунок ниже) Вы сможете задать общую цветовую схему шаблона сайта. Доступно сто цветовых сочетаний.

TemplateToaster 4.2

Нажав на Настройка цветовой схемы можно создать свою схему (рисунок ниже).

  • Цвет 1. Цвет фона контента.
  • Цвет 2. Цвет меню.
  • Цвет 3. Цвет текста.

Генератор шаблонов

Нажав на Больше цветов, в любом из спадающем списке выбора цветов (рисунок выше), можно перейти в окно Выбор цвета (рисунок ниже). Здесь программа для создания шаблонов сайтов предлагает очень удобный набор опций и инструментов для ввода цвета. При помощи «пипетки» можно узнать цвет в любой области окна программы. В столбце sRGB можно задать цвет (0-255) при помощи «смеси» основных цветов (аббревиатура английских слов Red (красный), Green (зелёный), Blue (синий)) и гамма-коррекции. При помощи гамма-корреляции можно осветлить цвет. В столбце ScRGB также можно задавать различные значения для каналов, как и в sRGB, но от 0 до 1 с шагом в 0.000000001.

Аналогично заданию цвета в цветовых пространствах sRGB и ScRGB можно ввести код цвета в строку Hex-, это будет аналог ввода цвета по каналам Red (красный), Green (зелёный), Blue (синий) и при помощи ползунка Прозрачность задать прозрачность цвета. Это будет аналог гамма-коррекции.

Выбор цвета

Область Темы, инструмент Шаблоны. TemplateToaster Professional 4.2 позволяет Вам прямо из окна программы загрузить для редактирования уже готовые шаблоны с сервера разработчика (рисунок ниже).

Программа для создания шаблонов сайтов

Нажав на Больше шаблонов, Вы сможете просмотреть полный список доступных шаблонов сайтов (рисунок ниже).

Альтернатива Artisteer

Область Макет, инструмент Макет. Под макетом стоит понимать наличие или отсутствие тех или иных областей сайта (хэдэр, футэр, меню и так далее) и их взаимное расположение (рисунок ниже). На данный момент в TemplateToaster доступно двенадцать макетов. Из их названий и миниатюр видно, какие области шаблона будут доступны, как они будут располагаться.

Макет

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

Напомню, что от данной настройки зависит не только наличие и расположение боковых панелей сайта, но и отображение вкладок с инструментами настроек этих панелей в интерфейсе TemplateToaster Professional.

Область Тип. В данной области собраны кнопки со значками тех CMS, в которые может быть экспортирован шаблон. А именно: Joomla, WordPress, Magento, Drupal, e107 и можно экспортировать как статический сайт (HTML).

Отмечу, что для разных CMS доступны разные инструменты редактирования и даже панели инструментов.

Область Типография, инструмент Текст. Данный инструмент (рисунок ниже) позволяет Вам выбрать и настроить внешний вид текстов на сайте. Причём, это «глобальные» настройки шрифта. Для каждого отдельного элемента: заголовков, хлебных крошек, блоков, ссылок и так далее можно будет указать свои собственные настройки.

Текст

  • System Fonts. Можно указать шрифт из тех, которые уже есть на компьютере. Обратите внимание, что не все шрифты поддерживают русский и украинский языки.
  • Стиль шрифта. Можно задать начертание шрифта (жирный, курсив и так далее).
  • Размер шрифта. Можно указать кегль шрифта в пунктах.
  • Шрифты Google. TemplateToaster позволяет Вам использовать шрифты из сервиса «Шрифты Google». Можно выбрать шрифт из спадающего списка или, нажав на кнопку Google Fonts, перейти к выбору шрифта на сайте сервиса (рисунок ниже). Скопируйте название понравившегося шрифта в поле Enter Font Name. Из спадающего списка Script выберите алфавит того языка, на котором будет Ваш сайт. Для русского и украинского, например, это «Cirillyc» (Кириллица). В примере указана «Cirillyc-Ext» (Cyrillic Extended) кириллица расширенная.
  • Costom Fonts. Вы можете задать произвольный шрифт из доступных у Вас на компьютере. Файл формата TTF или OTF. При этом файл шрифта будет внедрён в шаблон. Если у пользователя не будет этого шрифта на компьютере, он будет загружен вместе с сайтом (если это разрешено в браузере пользователя).

Шрифты Google

  • Font color. Цвет шрифта. Доступны те же параметры, что и для инструмента Цвет в области Темы.
  • Выравнивание шрифта. Можно задать выравнивание по левому, правому краю, по центру или по ширине.
  • Отступ. Отступ первой строки. Абзацный отступ в пикселях.
  • Underline Style. Задаёт подчёркивание текста.
  • Зачеркнуть. Делает текст зачёркнутым.

На вкладке Эффекты (рисунок ниже) Вы можете задать эффект тени для шрифта. В верхней области окна доступны готовые «стили». В нижней есть ряд настроек для изменения существующих «стилей» или тонкой настройки с нуля.

  • Цвет. Цвет тени.
  • Размытие. Размытие (прозрачность) тени.
  • Угол. Угол отклонения тени от шрифта.
  • Дистанция. Расстояние от шрифта до тени.

Эффекты

Область Типография, инструмент Текст. Данный инструмент аналогичен вышерассмотренному инструменту Текст, но относится к заголовкам 1-6 уровней. По сути, при помощи этого инструмента можно задать общие настройки для H1-H6, а потом изменить для каждого из уровней какие-то тонкости. Например, начертание, размер, цвет и так далее.

Область Типография, инструмент Complete. В данном инструменте (рисунок ниже), генератор шаблонов предоставляет Вам задать особые настройки шрифта для более чем восьмидесяти элементов: заголовки H1-H6, контент, кнопки, нумерация страниц (пагинация) и так далее.

Шрифты сайта

На рисунке выше показано, что набор инструментов (опций) аналогичен инструменту Текст. Как видите, альтернатива Artisteer обладает достаточно большим количеством настроек касательно шрифтов.

В TemplateToaster 4.2 есть очень интересный инструмент – Закладка (рисунок ниже). Расположен он в одноимённой области. Этот инструмент позволяет делать некие «снимки» текущего состояния настроек шаблона. Например, сделали закладку, изменили шрифты, если не понравилось, то выбрали из закладок сохранённый вариант и всё восстановилось. Это своего рода аналог отмены действия. Отмечу, что на каждой вкладке есть возможность создания закладок именно для настроек, которые размещены на текущей вкладке.

Закладки

Тело сайта

На данной вкладки (рисунок ниже) расположены инструменты, которые помогут настроить фон сайта.

Тело сайта

На рисунке ниже голубыми прямоугольниками обведен фон страницы.

Фон страницы

Область Задний фон, инструмент Цвет. Задаёт цвет фона. Аналогичен инструменту Цвет в области Темы на вкладке Начало, рассмотренного выше.

Область Задний фон, инструмент Градиент. При помощи данного инструмента, генератор шаблонов позволяет Вам задать в качестве фона градиент. Доступно тридцать пять готовых вариантов градиента.

Градиент

Нажав на Ещё можно перейти к настройкам градиента (рисунок ниже). В верхней части, переключаясь между опциями Сплошной, Градиент и Изображение, можно перейти к расширенным настройкам того или иного инструмента из области Задний фон. Под этими опциями в области Прессеты доступны градиенты «по умолчанию». Можно выбрать один из них и при помощи инструментов ниже изменить его вид. Или с помощью тех же инструментов создать новый градиент.

  • Gradient Type. Тип градиента. Доступен линейный или радиальный. Под этими двумя переключателями есть ползунки, смещающие границы градиента. Можно добавлять или удалять (нажав правой кнопкой мыши на ползунок) ползунки. При двойном щелчке левой клавишей мыши на ползунок перед Вами откроется рассмотренное ранее окно выбора цвета.
  • Настройки. Под областью Gradient Type расположена область в которой можно указать угол поворота градиента, его цвет и смещение. Смещение – это своего рода граница окончания области градиента. Хотя при помощи крайнего правого ползунка в области Gradient Type можно сделать то же самое.

Настройки градиента

Область Задний фон, инструмент Изображение. Из спадающего списка можно выбрать одну из доступных по умолчанию в TemplateToaster 4.2 картинок. Или можно перейти в расширенные настройки (рисунок ниже), нажав на Ещё.

Изображение

Там доступны следующие опции:

  • Выбрать с компьютера. Генератор шаблонов позволяет Вам задать любое изображение формата JPEG, JPG, PNG, BMP в качестве фона сайта. Отмечу, что при добавлении фонового изображения Вы сможете его отредактировать. Редактор рассмотрен ниже в статье.
  • Повторить. Можно продублировать фоновое изображение по оси Х и\или Y. При помощи этого можно указать одну маленькую картинку и как плитку распространить её на весь фон сайта независимо от разрешения экрана монитора.
  • Растянуть. Можно задать растягивание фонового изображения, если область просмотра больше, чем область просмотра сайта. Доступны такие опции: Нет, Заливка (изображение растягивается по всей области экрана без сохранения пропорций), Равномерно, Заполнить (изображение растягивается по всей области экрана с сохранением пропорций).
  • Выравнивание по горизонтали. Положение изображения по горизонтали (Влево, Центр, Справа).
  • Вертикальное выравнивание. Положение изображения по вертикали (Верх, Центр, Вниз).
  • Прозрачность. При помощи данной опции Вы можете задавать степень прозрачности фонового изображения.

Область Эффекты, инструменты Текстура и Эффекты. В качестве фонового изображения можно задать текстуру (рисунок ниже).

Текстура

Рассмотрим её настройки (рисунок ниже), разделённые на две вкладки Текстура и Спецэффекты.

  • Повторить. Позволяет повторить изображение по оси X и\или Y.
  • Прозрачность. Уровень прозрачности текстуры.

На вкладке Спецэффекты Вы можете добавить к текстуре дополнительное изображение и настроить его прозрачность.

Эффекты текстуры

В области Тип можно задать, каким будет фон сайта: Фиксированный или Прокрутка. Пример фиксированного фона Вы можете видеть на моём сайте. Если прокручивать страницу вниз, фоновое изображение всегда будет оставаться одинаковым. Это очень удобно, например, для тех случаев, когда в качестве фона задана фотография или изображение, которое нельзя повторить по вертикали.

Редактор изображений TemplateToaster

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

Редактор изображений TemplateToaster

Он одинаков для всех случаев импорта растровой графики в TemplateToaster Professional. Можно условно разделить на три области (слева на право).

  1. Инструменты.
  2. Предпросомтр изображения.
  3. Параметры инструментов.

У некоторых инструментов есть свои параметры.

Изменить размер. Изменяет размер изображения по ширине и высоте без обрезки изображения. Можно задать размер в пикселях или указать в процентах от исходного размера.

Изменить размер холста (рисунок ниже). Позволяет изменить размер изображения в пикселях. В отличие от предыдущего инструмента изменяет саму область (холст) изображения. Если задать значение ширины\высоты меньше, чем исходное, края рисунка будут обрезаны. Больше - появится пустое пространство с цветом, который Вы задали в опции Задний фон. При помощи радиокнопок Отступ изображения можно задавать сторону, относительно которой будет изменяться размер холста изображения. На рисунке ниже показано, что изменение размеров будет равномерно по ширине и высоте.

Изменить размер холста

Инструменты Повернуть на 90, 180, 270 поворачивают изображение на указанное количество градусов по часовой стрелке.

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

Скругление углов

Отразить горизонтально, Отразить вертикально – отражает изображение по горизонтали или вертикали соответственно.

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

Обрезка изображения

В TemplateToaster Вы сможете изменить тон изображения при помощи одноимённого инструмента (рисунок ниже).

Изменить тон

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

Насыщенность

Для изменения яркости и контрастности предназначен инструмент Контраст (рисунок ниже).

Контраст

Также генератор шаблонов позволяет Вам инвертировать цвета на изображении при помощи одноимённого инструмента. Например, всё чёрное сделать белым, а белое – чёрным.

Инструменты Резкость и Размытие позволяют увеличить резкость или размытие изображения при помощи перетаскивания ползунка (рисунок ниже).

Резкость и Размытие

Как видите, TemplateToaster 4.2 обладает достаточно приличным набором инструментов для быстрого редактирования растровых изображений без использования GIMP, Photoshop и других сложных программных средств.

В следующей статье «Обзор TemplateToaster. Генератор CSS шаблонов» мы продолжим рассмотрение альтернативы Artisteer и каснёмся настроек таких элементов шаблона сайта как страница, хэдэр (шапка или верхний колонтитул сайта), меню и так далее.

 

Полезные ссылки: