Я покажу как с помощью программы фотошоп можно нарисовать свой простенький , а может и не простенький(все зависит от фантазии художника) дизайн для чата
Вариант 1:
1.Создаем новый файл, размер файла завиит опять же от вашего рисунка , он должен полностью вместить все содержание вашего дизайна
2.Перед нами чистый лист) начинаем вырисовывать, подготавливать каждый элемент дизайна.Начинаем с банера и меню, отмечаем общую высоту при помощи направляющей
3. В этом примере я использовала фигуру прямоуголника и стиль, рисуем общий фон банера и меню
4.При помощи кисточек( вы можете использовать другие инструменты фотошопа, нет границ, все зависит опять же от вашей фантазии)и стиля начинаем украшать банер
5.Точно также украшаем фон сообщений , я считаю удобным рисовать все сразу, а не по частям, т.к в этом случае мы можем оценить общий вид дизайна чата
6.Задаем общий стиль дизайну
7.Точно также рисуем список посетителей и другие элементы дизайна.После чего устанавливаем направляющие,по которым будем резать дизайн
Также рисуем кнопки, навигацию
Когда все элементы вырисованы, подготовлены, скаладываем их в папочку и приступаем к настройке дизайна в админке чата в разделе Дизайны
Советую всем дизайнерам сохранять все элементы дизайна в формате pcd , формат в котром можно делать изменения
P.S. Если у кого то возникнут вопросы по уроку прошу задавать их тут
Вариант 2
Пример рисования дизайна для чата, когда используется одна общая картинка на баннер,меню и фрейм сообщений( непростой пример, когда картинка находится справа фрейма(требует расчёт при разных разрешениях монитора) и инструкция по установке файлов в админке) в картинках.
1) Шаг1: Создаёт новое изображение в фотошопе
2) Шаг2: Создаём новый слой, выделяем область заданного размера ( баннер + меню в вашем чате в пикселях, например 90рх баннер + 30рх меню = 120рх -выделенная область по ширине, длинну указываем 1680
3) Шаг3: Делаем разметку под разные разрешения монитора на слое1. В выделенной области рисуем горизонтальную линию по самому низу, далее выбираем выделение заданного размера 1024 на 120, применяем и отмечаем край границы справа вертикально, точно также делаем для разрешения монитора 1280рх. Результат:
4) Шаг4: Создаём новый Слой2. Слой 1 перетащите вверх,чтобы он всегда был вверху (для видимости разметки). На новом слое2 делаем выделение 1680 на 120рх и заливаем какими-нибуть цветом, градиентом, фоном, как угодно вашей фантазии. Я выбрала градиент
5) Шаг5: Рисуете баннер,меню и общую картинку( на фрейм сообщений), не забывайте: а)создали новый слой -применили кисточки(нарисовали завитушки, например) б) создали новый слой - поместили на него картинки нужны вам и так далее.
Обратите внимание на разметку как показано на рисунке ниже -главная картинка не должна пересекать линий ограничения по разрешению монитора иначе картинка не вся будет видна в том или ином разрешении. Постарайтесь уместить примерно так как дано на образце .
Важное замечание: учтите, что у вас ещё есть фрейм *Кто в чате* по моему мнению, картинку фрейма сообщений всёже стоит умещать только в этом фрейме, иначе, если эту картинку разрезать на два фрейма (сообщений и кто в чате) то скролл образует *дырку* на картинке и это смотрится некрасиво (на мой взгляд)))
6) Шаг6: Итак -вы нарисовали всё что вы хотели сверху и в центре вашего чата, Соедините все слои, кроме слоя1 (разметки) Layer - Merge visible и выделите область равную 1680рх по длинне и ширине вашего баннера и меню вместе т.е. 120рх в нашем случае
7) Шаг7: Скопируйте выделенную область -новый файл -вставить ( Edit Copy- File New-Edit Paste), затем измените область выделения в длину 1680 и ширину равную ширине вашего баннера ( например 90рх) и снова -скопировать -новый файл-вставить и сохранить как Web ( размеры файла не должны превышать 50кб) Картинка для вашего баннера готова.
8) Шаг8: Тоже самое делаем и для меню -возвращаемся к картинке с баннером и меню вместе, меняем область выделения на 1680 в длинну и ширину равную вашему меню в чате ( например 30рх в нашем случае) выделить-скопировать-новый файл-вставить -сохранить как Web. Картинка меню готова.
9) Шаг9: Возвращаемся к файлу, где мы соединяли все слои картинок нашего чата и удаляем область по ширине равную баннеру и меню вместе т.е. 120рх.
10) Шаг10: Выделяем оставшуюся область с картинкой чётко соблюдая верхний край. Копировать-новыйфайл-вставить-сохранить как Web( не забывайте контролировать размер файла -не более 50кб) Картинки для баннера,меню и основного фрейма сообщений -готовы.
11) Шаг11: Рисуем картинку для нашей навигации( Настроек) в чате
12) Шаг12: Соединяем все слои, выделяем область, которая будет заголовком настроек(навигации) -копировать-новый файл-вставить-сохранить как Web. 
14) Шаг14: В принципе основные картинки мы нарисовали, фрейм ввода сообщений обычно узкий 30-40рх и оформляется без картинок, картинки на фрейм Информация и Кто в чате рисуются на ваш вкус согласно размерам ваших фреймов. Далее покажу инструкции по правильной установке баннера,меню, основной картинки ,а также Навигации в админке чата. Делаем настройки для нашего баннера.
15) Шаг15: Делаем настройки для меню. Если у вас фрейм меню к примеру 35рх, а кнопки 20рх в ширину, вы можете *прижать * кнопки книзу фрейма меню. Делается это так: в настройках Меню в отступе укажите отступ сверху 15рх (к примеру, если фрейм меню равен 35рх,а кнопки 20рх) тогда кнопки будут в самом низу фрейма меню.
16) Шаг16: Настройка окна сообщений для единой общей *фоновой* картинки. Обратите внимание,что все три картинки(баннер, меню и картинка на фрейме сообщений) прижаты к левому краю и зафиксированы, таким образом при различных разрешених монитора все три фрейма будут увеличиваться в картинках с правой стороны, левая будет неподвижна.
17) Шаг17: Настройки Навиции. Обратите внимание на отступы, вальируя значениями можно добиться того, чтобы картинка была видна и сверху и снизу, обычно снизу делается более большой отступ.
18) Шаг18: Настройка Заголовка Навигации. Обязательно укажите ширину вашей картинки-заголовка Навигации
В принципе это основные элементы нарисовки и установки сложного диза в чат.
Удачи вам!
