Artisteer

Обзор Artisteer (часть 2). Создание Joomla шаблонов

  • Тип – программа, создающая шаблоны сайтов.

 

 

Если Вы читали мою предыдущую статью «Обзор Artisteer (часть 1). Шаблоны Joomla 1.5», то наверняка поняли, что Artisteer позволяет создавать весьма неплохие шаблоны сайтов без знания специальных языков программирования, а при помощи понятных графических инструментов. В этой части обзора Artisteer я продолжу рассмотрение его инструментов.

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

Цвет и шрифты

Вкладка Цвета и шрифты (рисунок ниже) содержит инструменты для настройки общей цветовой схемы сайта и шрифтов. Инструменты разделены на три группы.

  1. Цвета.
  2. Тона.
  3. Шрифты.

Имеются в наличии кнопки Предложить цвет и Предложить шрифты. Они служат для генерации цветовых схем и наборов шрифтов для шаблона.

Artisteer 3

В Artisteer 3 Standard Edition есть двенадцать групп цветовых схем. В каждой группе несколько подгрупп. В каждой подгруппе, приблизительно, от одной до двадцати трёх схем. Для каждой схемы около десяти различных тонов

  1. Новый. Включает в себя 9 подгрупп.
  2. Яркий. Включает в себя 6 подгрупп.
  3. Контрастный. Включает в себя 8 подгрупп.
  4. Тёмный. Включает в себя 6 подгрупп.
  5. Светлый. Включает в себя 2 подгруппы.
  6. Монохромные тона. Включает в себя 8 подгрупп.
  7. Пастельный. Включает в себя 8 подгрупп.
  8. Голубой. Включает в себя 5 подгрупп.
  9. Зелёный. Включает в себя 8 подгрупп.
  10. Оранжевый. Включает в себя 2 подгруппы.
  11. Красный. Включает в себя 6 подгрупп.
  12. Жёлтый. Включает в себя 2 подгруппы.

Итого, по моим скромным подсчётам, Вам предлагается от 700 до 16100 сбалансированных цветовых схем. Вы можете задать цвета самостоятельно, воспользовавшись инструментом Выбор цвета (рисунок ниже) Artisteer 3.0.

Artisteer 3.0

У данного инструмента есть возможность не только указать цвет в виде набора чисел для трёх каналов цвета, но и указать оттенок, яркость, насыщенность. Вы сможете ввести кодовое значение цвета, например 99D3E3. При необходимости, с помощью инструмента Пипетки, узнать числовые параметры любого цвета на шаблоне.

Инструмент Набор шрифтов содержит сочетания семейств шрифтов для текста и заголовков сайта. Есть возможность редактировать, создавать и удалять наборы. В Artisteer 3.0.0.41778 Standard Edition предустановлено десять наборов шрифтов (Классический, Популярный, Простой, Формальный и так далее).

Инструмент Стили (рисунок ниже) содержит восемь предустановленных стилей (Классический, Простой, Мелкий и так далее) для шрифтов сайта (для заголовков разного уровня, кнопок, ссылок, текста, цитат и так далее) и возможность редактировать, создавать и удалять стили. Это доступно для всех шаблонов. Даже для Blogger темы.

Blogger темы

На рисунке ниже показано окно выбора редактируемого элемента стиля. Шаблоны Joomla 2.5 будут использовать эти настройки.

Шаблоны Joomla 2.5 - выбор редактируемого элемента стиля

После выбора Вам будет предложен достаточно мощный инструмент для редактирования параметров шрифта (рисунок ниже).

Редактирование параметров шрифта

Инструмент размер шрифтов позволяет Вам изменить размер всех шрифтов на сайте, указав нужный процент. От 50% до 200% от текущего размера.

Макет

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

  1. Макет дизайна.
  2. Макет листа.
  3. Макет содержимого.
  4. Блоки.

На этой вкладке, как и на других, есть кнопка автоматической генерации элемента Предложить макет.

Панель инструментов Макет

Перед тем, как приступить к созданию шаблона, желательно определиться, каким его хотелось бы видеть. Посмотреть на понравившиеся и не понравившиеся аналоги в сети. И, что совсем не мало важно определиться с количеством, расположением и относительными размерами колонок сайта. Определиться с модульной сеткой. Artisteer 3.0.0.41778 Standard Edition позволяет создавать шаблоны сайтов с фиксированной и «резиновой» шириной. Этот принципиальный момент необходимо решить заранее. Так же необходимо приблизительно знать какие модули будут выводиться на сайте (Главное меню, Опросы, Вертикальное меню, Регистрация и так далее).

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

  1. Базовый.
  2. Фиксированный.
  3. Выступающий.
  4. Широкий.
  5. Прозрачный.
  6. Наложение.

Ниже я приведу по одному примеру макета для каждой группы. Они идут в порядке следования в списке выше (это шаблоны Joomla 1.7).

Шаблоны Joomla 1.7

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

Макеты нижнего колонтитула

Есть возможность настроить поле до меню или нижнего колонтитула.

Для настроек листа Вам доступен одноимённый инструмент (рисунок ниже). Он разделён на три вкладки.

  1. Макет.
  2. Стиль.
  3. Тень.

Значения фиксированной ширины шаблона сайта доступны в диапазоне от 200 до 1500 пикселей. Или о 20 до 100% в случае резинового дизайна шаблона.

Инструмент Лист

Artisteer 3.0.0.41778 Standard Edition позволяет создавать одно, двух и трёх колоночные шаблоны сайтов. Для настройки ширины колонок Вам доступен инструмент Настройки макета (рисунок ниже).

Инструмент Настройки макета

Ширину колонок можно задавать в пикселях или процентах. Причём, ширину одной колонки можно задать в пикселях, а второй - в процентах.

Уже в шаблоне Artisteer 3.0.0.41778 Standard Edition даёт возможность расположить бедующие модули сайта в том порядке, в котором они предполагаются размещаться в дальнейшем. Это не значит, что Вы не сможете их поставить в другом порядке. Это очень удобно. Вы можете показать (посмотреть) как будет выглядеть шаблон на сайте, даже без сайта.

Из модулей доступны следующие:

  1. Главное меню.
  2. Опросы.
  3. Вертикальное меню.
  4. Ключевые понятия.
  5. Сейчас на сайте.
  6. Форма регистрации.
  7. Реклама.

Доступно шесть вариантов расположения модуля (рисунок ниже).

Варианты расположения модуля

На рисунке ниже я приведу пример шаблона со всеми включёнными модулями и резиновым дизайном. Это Joomla шаблоны. Но, например, Blogger темы и DotNetNuke шаблоны будут выглядеть аналогично.

Резиновый дизайн

Фон

Панель инструментов Фон (рисунок ниже) разделена на три группы.

  1. Фон.
  2. Текстура или изображение.
  3. Световой эффект

Инструмент Фон

Как в случае с другими панелями, на этой также есть кнопка автоматической генерации.

В качестве фона можно задать сплошной цвет, градиент, изображение, текстуру и наложение блика. В Artisteer 3.0.0.41778 Standard Edition доступно двадцать три градиента (рисунок ниже).

Градиенты Artisteer 3.0.0.41778 Standard Edition

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

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

Блик

Можно изменять прозрачность блика (от 0 до 100 процентов) и масштаб (от 10 до 130 процентов). В Artisteer 3.0.0.41778 Standard Edition предустановлено двенадцать групп бликов (рисунок ниже).

  1. Классический.
  2. По центру.
  3. Абстрактный.
  4. Современный.
  5. Круги.
  6. Фигуры.
  7. Экстравагантный.
  8. Угол.
  9. Природные.
  10. Ажурный.
  11. Цветочный.
  12. Гранж.

Блики Artisteer 3.0.0.41778 Standard Edition

Всего до 300 бликов и возможность установки своей. Artisteer 3.0.0.41778 Standard Edition поддерживает в качестве графического файла блика такие форматы как GIF, PNG, JPG, JPEG.

Для текстуры доступны опции режима смешивания (нормальный, мягкий свет, перекрытие), прозрачность, вес цвета, насыщенность цвета, контрастность и инвертирование. Можно задавать повторение текстуры по горизонтали, по вертикали, заливкой или не повторять. Вы можете отразить или развернуть текстуру, а так же изменить её масштаб. В Artisteer 3.0.0.41778 Standard Edition предустановлено девять групп текстур (рисунок ниже).

  1. Новый.
  2. Цветные.
  3. Цветы.
  4. Инвертированный.
  5. Линии.
  6. Природные
  7. Орнаментальные.
  8. Точечные.
  9. Силуэт.

Текстуры Artisteer 3.0.0.41778 Standard Edition

Всего до 300 текстур и возможность установки своей. Artisteer 3.0.0.41778 Standard Edition поддерживает в качестве графического файла текстуры такие форматы как GIF, PNG, JPG, JPEG.

Для градиента можно задать высоту (от 1 до 1200 пикселей) и контрастность (от -100 до 100 процентов).

Шаблоны Joomla 1.7, после установки на сайт и при наличии специальных расширений, могут отображать различный фон для различных страниц.

Лист

Лист – это и есть «рабочая» область сайта, то, что находится на фоне. Панель инструментов Лист (рисунок ниже) содержит одноимённую область с инструментами и кнопку автоматической генерации элемента.

Панель инструментов Лист

Доступно восемнадцать шаблонов обводок листа (рисунок ниже).

Шаблоны обводки листа

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

Вы можете задать скругление (от 0 до 200 пикселей), обводку (от 0 до 20 пикселей) и тень листа. Для тени доступны параметры смены размера (от 0 до 50 пикселей), прозрачности (от 0 до 100 процентов), расстояния (от 0 до 60 пикселей) и угла.

Лист можно сделать прозрачным (от 0 до 100 процентов) или задать ему цвет.

Верхний колонтитул

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

  1. Макет.
  2. Фон.
  3. Фоновое изображение.
  4. Фото объект.
  5. Flash.
  6. Заголовок.
  7. Стили заглавия.

Панель инструментов Верхний колонтитул

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

Варианты расположения колонтитула

Длина может быть по ширине листа или по ширине страницы. Высота колонтитула может быть от 50 до 500 пикселей.

В Artisteer 3.0.0.41778 Standard Edition есть возможность вставки в верхний колонтитул поля под текстовый блок (рисунок ниже) произвольного содержимого. Можно задать ему цвет, прозрачность и положение (слева или справа).

Блок верхнего колонтитула

Верхнему колонтитулу можно задать цвет и прозрачность. Применить скругление краёв и тень (похоже на инструменты с панели инструментов Лист).

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

Настройки текстуры

В Artisteer 3.0.0.41778 Standard Edition текстуры для верхнего колонтитула разделены на несколько групп. Всего около 300 текстур и возможность установки своей. В качестве графического файла текстуры поддерживаются такие форматы как GIF, PNG, JPG, JPEG. Есть возможность установки градиента с указанием контрастности и угла поворота. Доступные по умолчанию в Artisteer 3.0.0.41778 Standard Edition градиенты показаны на рисунке ниже. Всего их около сорока пяти.

Градиенты Artisteer 3.0.0.41778 Standard Edition

Ещё есть возможность установить блик на верхний колонтитул. В Artisteer 3.0.0.41778 Standard Edition блики разделены на несколько групп (рисунок ниже). Всего их около 130 штук. Есть возможность загружать свои.

Блики Artisteer 3.0.0.41778 Standard Edition

Также можно в качестве фона для верхнего колонтитула использовать изображение. В качестве графического файла для фона поддерживаются такие форматы как GIF, PNG, JPG, JPEG. Можно задать ему прозрачность, степень сжатия (только для PNG и JPEG) и размытие. При вставке фонового изображения из файла в проект Artisteer, Вы сможете выполнить кадрирование необходимой части (рисунок ниже), а затем, при необходимости, выбрать выравнивание изображения внутри колонтитула (по левому краю, по центу, по правому краю).

Кадрирование

Можно вставить логотип из файла (GIF, PNG, JPG, JPEG), задать ему свечение (от 0 до 100 процентов), задать прозрачность свечения (от 0 до 100 процентов), выбрать его расположение, выровнять (по левому краю, по центру, по правому краю), задать перекрашивание в оттенки серого или выполнить команду отражения по вертикали.

Для анимирования верхнего колонтитула в Artisteer 3 предусмотрена поддержка флэш анимации (SWF). В программе уже предустановлено двенадцать анимационных объекта и есть возможность загрузки своих. На рисунке ниже показаны опции, доступные для настройки анимированных объектов.

Настройки анимированных объектов

Однако, следует учесть тот факт, что флэш анимация требует, чтобы у пользователя был установлен специальный плагин в браузере. Так же это увеличит время загрузки Вашего сайта. А некоторые пользователи вообще предпочитают блокировать флэш анимацию. Так что перед размещением информативного содержимого во флэш анимации следует подумать и обязательно продублировать его. Также рекомендую настроить статическое изображение верхнего колонтитула так, как если бы анимации не было. Это даст возможность сохранить внешний вид Вашего сайта, если у пользователя не отобразится SWF файл.

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

Название сайта

Вы можете настроить гарнитуру, стиль, размер и другие параметры шрифта (рисунок ниже).

Параметры шрифта

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

Положения надписей на колонтитуле

При желании, необходимости и умении Вы всегда сможете внести поправки в код Вашего шаблона, созданного в Artisteer. Это позволить воплотит в жизнь гораздо больше дизайнерских идей, чем при помощи стандартных инструментов программы.

Могу сказать, что шаблоны Joomla 1.7 создаются в Artisteer 3.0 буквально за считанные минуты. Да и вообще, шаблоны сайтов и Blogger темы переходят из разряда «большой проблемы» в приятное развлечение. К сожалению не приходилось создавать DotNetNuke шаблоны.

В следующей статье «Обзор Artisteer (часть 3). Создание Wordpress шаблонов» я рассмотрю оставшиеся панели инструментов Artisteer. Среди которых Меню, Статьи, Боковая панель, Вертикальное меню, Кнопки, Нижний колонтитул.

Похожие материалы
Автор статьи – Хорошевский Алексей

Хорошевский Алексей Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

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

 

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