Приветствую всех менеджеров Легиона! Не так давно, ко мне обратился один из менеджеров, с просьбой объяснить, как создавать стиль для своего клуба через «генератор стилей». Недолго думая, я согласился ему помочь. Времени у меня не так много, но с подобным вопросом могут обратиться ко мне не один менеджер, а в связи с этим я решил написать «FAQ по созданию стилей при помощи "Генератора стилей"!

   Что нам необходимо для создания своего стиля?

   1) Программа Adobe Photoshop или схожая программа для создания изображений определенного размера.

2) Открыть сам "Генератора стилей".

                     Для чего нам нужна программа Adobe Photoshop?

   В программе  Adobe Photoshop необходимо сделать следующих размеров изображения:

1) Задний фон стиля – размер изображения 1600 на 1200 пикселей.

2) Шапку сайта – размер изображения 1000 на 152 пикселя.

3) Фон панели иконок – размер изображения 202 на 25 пикселей.

4) Фон пунктов верхнего меню – размер изображения 97 на 22 пикселя.

5) Фон пунктов верхнего меню при наведений – размер 97 на 22 пикселя.

6) Фон шапок блоков левого столбца  - размер 200 на 23 пикселя.

7) Фон шапки центрального контента – размер 780 на 30 пикселей.

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

   Как скачивать и устанавливать программу Adobe Photoshop я не буду рассказывать – это можно посмотреть в интернете. Предлагаю, открыть программу и сделать следующие действия:

   1) В левом углу нажать «Файл» (рисунок 1).  

   Затем нажать «Создать» (рисунок 2),

   Заполняем размеры «ширина» - 1600 (при создании «заднего фона стиля»), «высота» - 1200. (рисунок 3).

   Нажимаем «ОК».

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

   В итоге получаем следующее (рисунок 5).

   Необходимо, подогнать изображение и закрыть весь размер выбранным рисунком и нажать "Enter" (рисунок 6).

   Нажимаем в левом верхнем меню программы "файл" (рисунок 7).

   Выбираем "Сохранить как...", в открывшемся окне изменяем "тип файлов" с "Photoshop (*.PSD;*.PDD)" на "PNG(*.PNG;*.PNS)" (рисунок 8).

   Выбираем слева в меню «Рабочий стол» и нажимаем сохранить.

   Далее, следует перейти, например, в социальную сеть «Вконтакте» или на «Яндекс фото» чтобы загрузить данное изображение.

   Я покажу вам, как загрузил в социальной сети «Вконтакте». Открываем свою страницу «Вконтакте» и нажимаем «фотографии». Затем "Добавить фотографии" (рисунок 9).

   В следующей рамке нажимаем "рабочий стол" и находим ранее сохраненное изображение "1) Задний фон стиля – размер изображения 1600 на 1200 пикселей."

   Нажимаем "Открыть". После загрузки изображения следует нажать на данное изображение. Выбираем "Еще" и нажимаем "Открыть оригинал" (рисунок 11).

   Выделяем ссылку и нажимаем на правую кнопку мыши, нажимаем «копировать» (рисунок 12).

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

Начинаем работу с «Генератором стилей»!

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

   Первое, что мы видим – это страницу Легиона, но это не совсем так. Данная страница нам лишь имитирует страницу в Легионе, но находиться совершенно в другом месте. Данная страница помогает нам создать код, при помощи легких и простых действий (рисунок 13). 

   Следующий наш шаг – это выбор, который следует сделать из двух возможных вариантов шаблона: «Спартак» или «Стандартный – КТ Кубок Полтавы» (рисунок 14)! 

   Я буду рассматривать вариант «Спартак». В чем существенное различие этих двух вариантов шаблона? – Разница основная в шапке. В «Спартаке» - шапка имеет размер 1000 на 152. А в «Стандартном – КТ Кубок Полтавы» - шаблон имеет размер - 786x150px! Хотя, и в том и в этом шаблоне его можно изменить при помощи «Тип шапки» (рисунок 15). 

   «Тип шапки» я выбираю - «на всю ширину сайта». Так как в этом случае размер шапки 1000 на 152 пикселя, а именно такого размера мы делали «шапку» в программе   Adobe Photoshop. 

   Далее, рекомендую вам соблюдать очередность заполнения всех полей. По этому, у нас по очередности идет заполнение «Параметры границ шапки и логотипа» (рисунок 16). 

   Я выбрал синий цвет, так как стиль будет в основном в синем цвете. 

Следующий шаг у нас будет «Шапка сайта». Значит, нам нужна ссылка на изображение №2 (рисунок 17).

   Остается, вставить ссылку в соответствующее окно в «Генератор стилей» (рисунок 18).

   Посмотреть полученный результат можно, нажав в самом низу страницы «Сгенерировать» (рисунок 19).

   Следующий пункт «Логотип» - его мы пропускаем. Далее переходим к разделу «Верхнее меню и панель иконок».

   «Фон панели иконок» (рисунок 19). 

   Также следует вставить ссылку на изображение, которое было в нашем пункте под №3.