Я все же смогла сесть за комп, но это только на время футбола, пока брат не отобрал ноут.

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

Самое первое, что надо знать - если верстальщик говорит, что сделанное дизайнером на макете выполнить невозможно - скорее всего так и есть и нужно в корне переделывать. Благодаря тому, что я знаю верстку, я могу еще на стадии проектирования придумывать какие-то фишки, которые точно можно выполнить в дизайне. Ну, а раз уж ты в верстке не сильна, то придется поглядеть на, хотя бы 30-40 различных ролевых(а я чаще захожу на ТОП и прсматриваю страниц 20-30, чтобы уж наверняка), чтобы посмотреть, каким образом делается их стиль. Чаще всего это непрерывная форумная полоса, которая сверху и снизу закрывается картинками, делающими вид, будто форумная полоса красиво завершилась рамочкой и каким-нибудь героем ролевой во всем его великолепии. Еще чаще встречается шапка, находящаяся прямо в "теле" форумной полосы, как сейчас в вашем ВИПовском стиле.
Чтобы посмотреть, как же именно другие ролевые сделали свой стиль - кликай правой кнопкой мыши на всех картинках, выбирай что-нибудь, вроде открыть изображение и смотри их, пытаясь представить, что где и чем закрывается.
_
У меня основной браузер - мозилла. Она очень хорошо настроена у меня благодаря дополнениям, что я в любой момент могу увидеть всю структуру любого макета, проверить любые цвета и все прочее. Скажи, какой у тебя браузер, чтобы я дальше могла тебе объяснять, как он может помочь в работе.
_
Также я работаю в фотошопе. Если ты владеешь чем-то другим, также рассказывай, чтобы я могла хоть как-то сравнивать функции.

Вот, значит, рассказывай, и еще скажи, в какое время ты чаще бываешь в инете, а я попозже постараюсь написать еще.

Опера, это хорошо. В ней заложены хорошие инструменты)

Ладно. Начнем с основ.

Любой макет должен выглядеть так, как будто это уже готовый сайт, пусть и без информации. И рассчитан он должен быть на любое разрешение экрана. Сейчас наиболее распространенное из максимальных - 1920х1080. Ширина в 1920 пикселей, значит будет шириной нашего макета. Из других самых популярных разрешений нужно выбрать еще одно: 1280х1024. 1024 пикселя высоты - максимальный размер. Значит, размер нашего макета 1920х1024 пикселя.
Теперь надо подумать о ширине форумной полосы. Самое маленькое разрешение 800х600 уже практически не используется, поэтому на него можно смело закрывать глаза. Следующее, 1024х768 - уже довольно популярно. Значит форумная полоса и, желательно, шапка, должны быть меньше ширины такого экрана, иначе вся информация не будет влезать. Вообще, шикарным вариантом являются "резиновые" форумы, подстраивающиеся под экран, но на майбе такого все равно не сделать, следовательно пропустим.

Какую взять ширину форумной полосы?
Вот на этом стиле с лисами у меня были проблемы из-за того, что форумная полоса была узкой. Примерно 820 пикселей. С увеличением до 870 пропали любые проблемы с наезжающими друг на друга столбиками, узкими сообщениями и всем прочим. Брать еще шире можно. Но, как помнишь, меньше 1024. А если хочется совсем красоты, то лучше делать меньше 900, чтобы по бокам форума даже пользователи с маленькими экранчиками видели фон форума
Чтобы ровно отмерить это расстояние воспользуйся в фотошопе направляющими.  Рассчитай, на каком месте они должны быть, если ты делаешь форум по центру(вычти из 1920 ширину своего форума и подели эту цифру пополам. Получишь расстояние для первой вертикальной направляющей. Потом прибавь к этой цифре ширину форумной полосы и получишь вторую).
Когда обе направляющие будут на местах, ты получишь представление, в какой части всего огромного макета располагается твой форум.

Итак, давай приступим к первому заданию) Создай файл макета с уже известными тебе параметрами, возьми произвольную ширину форумной полосы и проставь направляющие. Как получится - отписывайся, и перейдем дальше.

Направляющие - вспомогательные линии, которые можно вставить в фотошопе, чтобы что-то отделить и видеть, куда что тебе нужно вставить. Довольно полезная штука. Поставить можно так:

Просмотр - новая направляющая
____
А её и не нужно высчитывать. Я написало число, меньше которого брать нельзя, иначе форум съезжает, и написала максимальное, которое люди смогут увидеть целиком в своем маленьком экранчике. Дальше - твоя фантазия. Возьми число от 870 до 920. Любое четное. Потом создай файл фотошоп с размерами 1920х1024 пикселей. Дальше возьми свое число, вычти его из ширины макета и подели пополам.
Допустим, твоя ширина форума 870. Тогда:
(1920-870)/2=678пикселей. Значит первую направляющую нужно будет задать на этом расстоянии.
678+870=1548пикселей. Это мы от первой направляющей откладываем размер форумной полосы и как бы ограничиваем его рамочкой.

Отлично. Я во вторник, скорее всего, уеду на неделю, поэтому, может, ты сможешь завтра днем появиться?

Направляющие сделаны. Теперь нужно решить, каким будет наш макет. Наверняка ты видела множество вариантов стилей:
-вариант ВИПа, пример 2 - шапка не вылезает за ширину форумной полосы. Фон может быть фиксированным, т.е. не двигаться при прокрутке, или прокручивающимся. Шапка обычно среднего или маленького размера.
-вариант ПКВ,пример 2 - шапка отдельно от форумной полосы и вылезает за её ширину. Фон чаще всего прокручивающийся, но может быть и фиксированным. Размер шапки любой, иногда даже на весь экран (наверняка помнишь пред. стиль ПКВ (серенький такой, со спящим котенком)). Конечно, так издеваться над людьми не надо(растягивая на весь экран). Это же замучаешься перелистывать.
-вариант без шапки, пример 2 - остается только название ролевой, картинки могут быть убраны в таблицу, а весь акцент дизайна чаще(не как здесь) идет на фон.
-очень необычный и редкий вариант разделенной шапки - очень мне нравится, хотя сейчас не смогла найти больше примеров. Шапка двойная, среднего размера. Красиво обыгрывается информация о ролевой.

Продумать, какой выбрать вид, лучше с самого начала, чтобы потом было меньше переделывать.
Предлагаю тебе сделать этот выбор самой

_________________
Когда выбираем вид макета, сразу прикидываем размер шапки. Походи по различным ролевым, у которых стиль такой, как и выбранный тобой макет, погляди, где у них начинается форумная полоса, где как сделана шапка(выведены ли ссылки, как и где выполнена таблица информации), где, на твой взгляд, удобная навигация, а где шапка выглядит слишком большой или перегруженной. Как только погуляешь(я обычно делаю это через РПГ-топ), скинь сюда ссылки наиболее понравившихся вариантов, и мы с тобой их обсудим.

Тут есть интернет... я в шоке О_о
В прошлом году тут даже телефон не ловил, и, вдруг, интернет...

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

Самое показательное свойство хорошего дизайна - он быстро загружается. Вот и из этих пяти "hogwarts is my home" загрузился быстрее всего, следом за ним "Последний рай", "Вампирская академия". У "Виона" сил хватило только на тяжелейшую боковую картинку вкладки-информации, а фона и шапки я так и не застала. Ну и последний форум показал мне только низ золотой рамки, после чего благополучно и замер.
Когда мы делаем стили - мы можем использовать любые картинки. И даже лучше использовать именно качественные тяжелые картинки. Но готовый макет нужно выгружать с помощью пункта "сохранить для вэб". Тогда веса всех картинок будут уживаться. Можно уменьшить вес в половину без видимой потери качества, которую глаз не заметит вовсе, а вот интернет оценит и еще как.

Что можно сказать о вампирской академии.
Коллаж шапки хорош и к нему претензий нет. Но вот высота в 5\6 моего экранчика (его разрешение 1280х800) заставляет тихо страдать, ведь её придется прокручивать каждый раз на каждой странице. Можно было её вполне уменьшить сверху - этот потолок комнаты, где сидят герои, явно не представляет исторической ценности.И еще один прокол: края шапки на высококонтрастных мониторах (такой у меня дома, такой и в этом древненьком ноуте) сразу видны. Т.е. она плохо сливается с фоном и я вижу мало того, что темный фон, так еще и четкие края прямоугольника шапки. Именно поэтому лучше стараться не делать фон шапки в цвет фона всего форума (дело в том, что цвета, которые мы ставим в палитре ФШ и вэб-цвета могут различаться, хоть и называться одинаковыми кодами). Вместо подбора цвета можно вполне сделать плавный переход прозрачности на краях шапки. Тогда она смешается с фоном форума на любом мониторе.
О оформлении рамки форумной полосы сказать нечего. Рамка, как рамка. Мало весит и загрузилась первой из всего стиля. Но вот сам фон форумной полосы, эти непонятные белые царапинки на бежевом фоне хоть и стараются передать старину бумаги, но на деле затрудняют чтение текста на себе.
Оформление категорий и таблицы никакое. Тень, которая не используется больше ни в какой части стиля, вороны, которые мало того, что плохо вырезаны, так еще и зачем-то очень очень далеко убраны от надписей (посмотри на раздел пиара). А в таблице к тому же во вкладки админов стиль аватар ну вообще никак не сооответствует стилю форума. Явно, что кто-то забыл сказать дизайнеру переделать их под новый.
Да еще и ссылки-картинки навигации (форум, юзеры и т.п.) вполне можно было обвести черной обводкой, ибо на такой контрастной шапке читать неприятно.
Запомни: текст любого цвета с черной обводкой читается на любом форуме

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

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

Последний рай.
Говорю об основном стиле. Дополнительный с таким инетом даже загружать не хочу)
Прекрасная шапка, хоть по мне и вместо ТОПов можно было что-нибудь поинтереснее пихнуть. Размер в половину моей высоты также достаточно приятен, что не надо много крутить страницу. Шрифт читаемый и с обводкой. Рамка форумной полосы красивая, но очень уж тяжелая. Фон форумной полосы приятного цвета, без всяких крапинок. Читать текст на таком фоне легко. Таблица также сделана в одном стиле с остальным дизайном.
В общем, дизайн сделан на высоком уровне и вот две вещи, что мне не нравятся - мелкий шрифт в описании разделов, особенно тот, где он курсивом. Ну и конечно же переключатели стилей, которые сперли из вконтакте и которые никакого отношения к стилю основному не имеют. Ну, это уже дело админа, а не дизайнера.

Хогвартс это мой дом.
Дизайн минималистичен во всем, кроме коллажа в шапке. К чему сразу хочется придраться: шрифт. В навигации (форум, юзер..) он какой-то компьютерный, выпуклый, овальный. Во всем остальном форуме это рукописный курсив. Нельзя так делать. Нет единообразия оформления.
Навигация( активные темы и пр.) вообще не прочитать, только догадываться, где и что лежит. Название форума вместо того, чтобы расположить посередине и сделать покрупнее (но нет, дизайнер решил не перекрывать главных героев во всем их великолепии), перенесено в бок, отчего кажется, что Хогвартс дом того-самого злого приведения, а никак не главных героев или же игроков
Фон форумной полосы однотонный, выполнен не картинкой, а просто залит цветом. Прекрасный вариант для дизайна. Если хочется сделать какую-то рамку, то вполне можно пускать форумную полосу однотонной, а рамку делать картинкой с пустотой в середине. Тогда и картинка будет весить меньше. Переход шапка-форумная полоса необычен, но очень уж гол. Можно было туда пихнуть тот самый логотип форума.
Боковые переключатели вниз-вверх к стилю форума никакого отношения не имеют, да и выглядят слишком крупными.
Фон всего форума также однотонный и вместе с однотонной форумной полосой выглядит приятно.

Про последний ничего сказать не могу. Поэтому вот тебе задание, пока я не приеду домой: рассмотреть подробно стиль последнего форума и самостоятельно найти плюсы и минусы. Все расписать. Я же, когда приеду, составлю свой список и мы сравним их.

Это задание долгосрочное, аж до понедельника.
А теперь перейдем к более мелкому и последовательному. Начнем дальше заполнять твой макет. Темой стиля выберем осень.
Подбери цвета, которыми ты будешь оперировать. Оттенки красных, желтых, может каких-то еще. Возьми инструмент прямоугольника и просто создай себе удобную палитру из 5-6 цветов и оттенков, сразу продумав, какие цвета можно сделать фоновыми, какие оставить для текста. Размести её где-нибудь в уголке и размести на одном слое (когда ты будешь ставить прямоугольники, они станут возникать на разных слоях. Нажимай правой кнопкой у названия и объединяй их).
Для чего это нужно: в макетах, где шапка вылезает за форумную прлосу, делать фон форума лучше однотонным или с минимальным количеством цветов, о никак не картинкой. Иначе все вместе будет смотреться невероятно перегружено. Благодаря такой подготовке ты сможешь и найти узорный фон нужных цветов, и просто залить один из нижних слоев одним цветом и выбрать лучшее сочетание для смотрибельности шапки)

Отредактировано Шепот Ветра (15-08-2013 20:16:57)

У меня появился мой ноут и более быстрый интернет, а, значит, занятия станут чаще)

Я прочитала твои замечания к пятому дизайну и теперь оставлю свой отзыв, чтобы нам было что сравнить.
Эмблема сайта нравится. Красивое решение, хотя тексту "the otherwise" для большей читаемости можно было бы увеличить ширину черной окантовки. Тогда вся проблема сливаемости решилась бы в один миг.
Цепи эмблемы, конечно, красивы, но из-за того, что нигде кроме как на аватарах их больше не встретить, кажутся они лишними и несвязанными. А птица...ну пускай будет птица. В конце концов, мы же не знаем их сюжета. Может она у них играет ключевую роль. Нехай сидит.
Большая рамка да...это пипец, вырвиглаз и вообще для слеповатых посетителей. Самое главное, что эта массивная рама абсолютно не вяжется больше ни с чем, выглядит слишком резкой и слишком большой. И если заголовки с не менее огромным шрифтом еще как-то смотрятся, то панель навигации голая, бледная и вообще незаметная, ибо глаз хочет передвинуться вновь и вновь на раму.
Также слишком большой шрифт основного форумного меню, из-за чего все пункты съехались в несколько рядов и к тому же закрыли доп. меню с активными темами и всем прочим.
Боковые переключатели у меня также съехали вне границ экрана, что говорит о том, что дизайнер не обращает ни на какие разрешения экрана, кроме своего, где высота больше, чем у нас.

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

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

Все вышло отлично. Теперь ты наглядно видишь различные варианты однотонного фона, которые придают ту или иную атмосферу. Мне вот очень нравится, как смотрится рыжий фон. Ярко, нарядно. Также хорошо сочетаются 1-2 полосы и 1-3. Если мы надумаем делать фон двухцветным, то такие сочетания будут смотреться очень удачно.

Теперь на время забываем о фоне и форумной полосе и переходим к шапке. Какой сделать её высоту? Какой сделать ширину?

Раз мы делаем макет с большой шапкой, то хорошим вариантом высоты будет 2\3 наиболее популярного разрешения экрана (вспомни этот самый размер и найди высоту шапки, после чего сделай горизонтальную направляющую). Ширина у шапки может быть с ширину самого популярного разрешения (какая там у нас ширина? ), тогда все люди с этим и большими разрешениями увидят красивую шапку, ну а для людей с меньшим разрешением ключевые объекты шапки нужно будет разместить в зоне, ограниченной нашими направляющими.
___
Значит, теперь у нас есть горизонтальная направляющая для шапки. Увы, но в фотошопе нельзя отдельно покрасить нужные направляющие, а нам нужно как-то выделить зону шапки, её ширину, не путая с направляющими форумной полосы.
Я в таком случае просто высчитываю ширину шапки, потом, как мы это делали для форумной полосы, высчитываю пиксели, на которых должна находиться направляющая для шапки, ставлю её, беру инструмент линии и яркий цвет и провожу по новой направляющей до пересечения с горизонтальной направляющей. После инструментом перемещение эта направляющая выводится за пределы макета и самоудаляется. Дальше аналогично для второй границы.
___
Когда проделаешь все эти операции, если можешь, скинь мне свой psd-файл со всеми подписанными слоями и проделанной на данном этапе работой. Я буду любоваться
psd можно загрузить в dr-документы, на яндекс-диск, гугл-документы или куда угодно еще, где я смогу достать.

А теперь внимательно читаем самые первые сообщения про разрешения экранов и запоминаем на всю ближайшую жизнь, как свое имя:

Значит, запоминай разрешения:
640х480 - не используется
800х600 - выходит из употребления
1024х768 - популярно, берем в расчет его ширину.
1280х1024 - еще более популярно, от него можно считать высоту в 2\3.
1366х768(ноутбуки) - популярно
---куча нестандартных экранов большего размера--
1920х1080 - самый популярный из максимальных, обращать внимание на бо`льшие размеры пока смысла нет. На него ориентируем фон всего макета.

Значит, все смысловые элементы, символы форума, персонажи шапки, любые окошечки, пункты меню и все прочее должно быть по ширине не более 1024 пикселей, а вся шапка(допустим малозначимый задний фон) в лучшем случае не должна быть больше 1280 пикселей.
__
Увы, мне что-то не скачать файл. Ты загружала его на яндекс-диск? Там тогда должна была быть спец. ссылка для скачивания для других людей)
Если не получится найти, то можешь просто скинуть мне на почту:

Высшие силы! У меня появился интернет дома! 24 часа в сутки 7 дней в неделю! Бывает же счастье!

Кхем, да, приступим)

Вся основа макета уже создана. Теперь начинается сложнейший, но, в то же время, интереснейший этап - графическое наполнение. К этому моменту у тебя в голове должно быть уже хоть-что нибудь. Какие-то мысли, какие-то идеи. Варианты того, что может быть в шапке и варианты того, как оно может быть в ней скомпоновано. Тяжело, да. Поэтому на этом моменте можно просто открыть интернет и в поиске картинок выбрать тему твоего дизайна. Например "осень", "кошки осень", "осенние листья" и т.п.
Я думаю, что у тебя было время подумать над дальнейшей судьбой макета, посмотреть какие-то варианты дизайнов других ролевых и теперь пришло время перейти непосредственно к творчеству.
Хочешь ли ты сделать фон, обрамленный листьями, или же уходящий в пустоту? Хочешь ли вообще какой-то осознанный фон у шапки или набор ярких пятен и красок? Нужно ли тебе там полчище котов или же ты разместишь там одного? А если разместишь, то что он будет делать: лежать, сидеть, прыгать за листьями? И вообще, шапка будет только изобразительная, или же в ней будут какие-то информационные окошечки?
Сейчас твоя задача нарыть себе в отдельную папку, названную осенним макетом, как можно больше картинок, которые на твой взгляд можно использовать в дизайне. Фото, клипарты, фоны, скрапы...просто всего, на что глаз ляжет. Следующим этапом будет - разместить все это сразу на отдельных слоях на макете и начать двигать в разные стороны и друг под друга, пока они не лягут во что-то осмысленное.
В общем, сейчас у тебя задача - найти и разместить. А я пока буду перебирать свои папки осенних заготовок (у меня громадная коллекция изображений для всех случаев жизни на 23 гигабайта - это все собиралось и копилось на протяжении пяти лет для подобных случаев) и подбирать для тебя наиболее интересные решения.

P.S. А пока можешь заодно по поводу дизайна сказать, что там тебе нужно было, как и когда)