Step 1. Продумывание дизайна
Перед тем, как начать делать что-то, желательно продумать это самое что-то, если не в плане наполнения как такового, то хотя бы в плане структуры. Ответьте себе самому на вопросы:
♦ Какова должна быть атмосфера? (праздничная, мрачная, легкая, etc)
♦ Какова основная идея дизайна (обычный с кем-то или чем-то на шапке, форум в виде книги/девайса, главная страница как каталог папок, страница тем - как каталог файлов, а сообщения как документ в ворде?
♦ Какие цвета лучше всего подойдут под реализацию двух вышеназванных пунктов?
♦ Будет ли что-то меняться в зависимости от группы пользователя/времени суток/текущего местоположения пользователя на сайте?

Примерно на этом месте у человека, находящегося на стадии "я хочу сам сделать дизайн" должна сложиться в голове более-менее цельная картинка того, что он хочет получить на выходе. Здесь очень важно вспомнить, что далеко не у каждого пользователя разрешение экрана, браузер, диагональ и тип устройства совпадает с таковыми у дизайнера. У Вас разрешение 1366х768? Отлично, скорее всего, только что Вы придумали дизайн, который будет обрезаться или смотреться пустым у обладателей видеокарт, позволяющих ставить разрешение в 1920х1080. Возможные способы решения будут рассказаны ниже, но об этом крайне важно помнить.

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

Step 2. Создание макета
Учить работать с фотошопом не буду, ибо не умею просто расскажу основные принципы того, как можно сделать макет:
1. Старайтесь работать с файлом хотя бы 1920 в ширину: сейчас это самое широкое из распространенных разрешений. Соответственно, сразу будет видно, насколько дизайн кажется пусто-печальным для обладателей таких видеокарт.
2. В макете желательно продумать внешний вид
♦ иконок
♦ цитаты
♦ кода
♦ оформления форумов на главной странице
♦ таблицы
♦ профиля
♦ тела сообщения, если планируется что-то наподобие "прикручу-ка я к первому посту один фон, а к последнему другой"
♦ категорий
♦ стрелок
3. Говорят, поначалу необходимо продумать структуру: обозначить разноцветными прямоугольниками различные цветовые блоки
что-то типа этого, только с нормальными размерами. По мне, такой подход расхолаживает: когда оказывается, что чисто цветной блок "тоже неплохо смотрится", придумывать что-то оригинальное на некоторые блоки становится сложнее. Хотя поначалу это полезно - помогает не забыть о том, что ты хотел сделать и что вообще надо покрыть. К тому же создает некоторое впечатление о том, что ты получишь на выходе, пусть и чисто цветовое
4. Очень настоятельно советую завести невидимую группу "текстуры" и сливать туда все бесшовные текстуры, которые будут использоваться. Я знаю немало людей, которые не сохраняют все текстуры подряд, а потом оказывается, что предыдущая была лучше. Еще больше я знаю людей, которые зальют все бесшовкой и сольют все слои с ней, а потом будут час вырезать повторяющийся кусок из полотна.
5. Крайне рекомендую группировать слои по их принадлежности к логическому блоку (профиль, иконки, форум, фон, таблица, etc). Такие макеты гораздо удобнее нарезать и ставить на коды - просто отключать остальные группы, не выискивая в тонне слоев, какие нужны на этом элементе, а какие не очень
6. Если есть элементы, которые "логически заполняют весь экран без повторений" - пожалуйста, умоляю, сделайте так, чтобы на краях этого элемента не было "отчетливо оторванного" элемента (наподобие половины лица). Всегда найдутся люди с разрешением больше рабочего (некоторые даже с телевизоров сидят). Видеть они будут четко обрезанный кусок с половиной лица, продолжающийся фоном, возможно, контрастным. Согласитесь, неприятное зрелище. Есть, конечно, вариант растянуть это на весь экран принудительно, но когда картинка увеличивается в два раза - она уже становится жутко мыльной.
7. Если вы заботитесь о своих пользователях и хотите по возможности сделать шапку, например, не png, а jpg, можно создать вертикальную направляющую посередине и заполнять фон текстурой от нее, совместив центры (текстуру надо прижать к верхнему краю). Тогда шапку можно будет вырезать вместе с фоном и впоследствии совместить с фоном так, что стыка не будет.

Step 3. Нарезка макета
Текстуры лучше оставлять текстурами, (в смысле, не обрезая и не дублируя): с одной стороны, если понадобится где-нибудь еще сделать такой фон, то найти полное изображение не составит труда, с другой стороны, будет быстрее грузиться, чем дублированное изображение.
Всякие мелкие иконки, категории и прочие мелкие детали, которые можно привязать фоном к блокам ровно по размеру(!), особенно если они в схожей цветовой гамме, лучше слить в один файл: это уменьшает количество запросов к серверу, плюс грамотно скомпанованный файл весит меньше, чем куча маленьких иконок (в этой куче иконок содержится и куча информации о них)
Все, у чего нет прозрачности, имеет смысл сохранять в jpg. Отличить jpg с 100% качества от png-24 довольно сложно, а вес у jpg будет меньше почти в полтора раза
Всякие фоны под таблицы и шапки с высокой долей вероятности придется вырезать единым куском. Ну и черт бы с ним
Если есть большая шапка с анимированной деталью (как, например, в этом дизайне), есть смысл вырезать все без анимации, а мелкий кусочек сделать отдельной gif-картинкой, которую потом аккуратно вставить каким-нибудь блоком
Старайтесь вырезать фоны под логические блоки, не захватывая лишнего и ничего не обрезая. Помните, что у некоторых из них, например, у цитаты и профиля, нефиксированная высота, соответственно, надо либо сделать плавный переход в цвет, либо сделать в фоне повторяющуюся часть, чтобы замостить блок ею.

Step 4. Верстка дизайна
Перво-наперво, надо посмотреть на структуру страниц того сервиса, под который делается дизайн. Делается это через просмотр кода страницы или инспектирование элемента/просмотр кода элемента/прочие разновидности встроенных инструментов разработчика (их использование описано здесь). После чего прикидываем, что к чему будем цеплять.
Для первого раза можно просто взять стандартный дизайн, появляющийся в окнах при создании сервиса, и начать издеваться над ним.
Мне лично легче полностью удалить второе окно, в котором прописаны все цвета и стили, и цеплять все в первое окно, к структуре. Во-первых, если пригорит ставить скрипт смены стиля, то долго собирать в файл не придется, во-вторых, почти не надо думать, откуда что приехало. В этом случае сразу можно удалить строку  @import url(style_cs.css), заодно и число запросов к серверу сократим

Пара слов о синтаксисе css
Почти все правила css выглядят так:
selector {
    attribute: value;
    attribute: value;
}
Здесь selector - селектор, показывающий, к чему относится правило (может быть класс, идентификатор, просто название какого-то тега), attribute - свойство, значение которого мы задаем (позиционирование, выравнивание, отступы, фоны, анимация, прочее)
Подробнее про построение селекторов можно прочитать здесь.
Очень часто у элемента, имеющего идентификатор, не прописан класс, тогда-то и пригождается возможность писать ID-селекторы.
В случае, если для одного элемента находится более одного правила, применяется более специфичное правило (о специфичности здесь), если специфичность одинакова, будет применено самое последнее правило.
Attention: hover довольно криво работает на телефонах, в этом случае есть смысл сразу прикрутить изменения стиля скриптом.
Все фоны, которые по смыслу не являются фоном какого-либо блока, скидываем на body. Здесь имеет смысл почитать про свойство background. Сразу скажу, что чем раньше прописан фон, тем выше в плане слоев он будет лежать. Однако лично я умею нормально цеплять на body только те фоны, которые позиционированны относительно области просмотра (всего документа). То, что должно быть "справа от форума, но впритык к нему" приходится скидывать на блок с абсолютным позиционированием такие дела.
Кстати, позиционирование элементов - это следующее, что вам стоит прочитать, равно как и padding, margin и display. Про display:flex есть интересная статья на хабре, и по виду он пригоден для создания таблиц без использования медиа-запросов (о них чуть ниже).
Маленькие хинты: если надо сделать фиксированные отступы от границ для резинового элемента, то с относительным позиционированием можно использовать margin. В случае абсолютного позиционирования сработает комбинирование top, left, right и bottom. Если же пытаться отцентрировать относительно позиционированный элемент при помощи margin: auto, то это не сработает как минимум для айфонов: у них margin: auto означает "прижать к верхнему левому краю".
Если есть что-то, к чему надо прикрутить бесшовный фон, заканчивающийся сверху и снизу чем-нибудь png-шным (в смысле, с прозрачностью), то есть смысл обернуть блок другим блоком, засунуть png в него, прописать margin для внутреннего блока, чтобы его фон не перекрывал эти png и поставить бесшовку уж на внутренний блок

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

Step 5. Мобильная версия
На предыдущем шаге мы сделали хорошо пользователям компьютеров. Теперь надо сделать то же самое с мобильными.
Самый простой вариант - поставить в head мета-тег <meta name="viewport" content="width=цифра"> с шириной, покрывающей занятую область на экране и оставить так.
Это заставит пользователей бесконечно скроллить и материться, но это рабочий вариант, по крайней мере, не позволяющий половине контента уйти куда-то далеко.
Второй вариант - активно использовать flex-разметку. На некоторых сервисах (привет, майбб) это довольно нетривиальный подход, вызывающий много боли и негодования. Поначалу так точно
Третий вариант - сделать отдельный дизайн "чисто на цветах" для мобильных и сверстать его. Тогда мы ставим <meta name="viewport" content="width=device-width, initial-scale=1"> и верстаем резиновый дизайн под мобильные устройства. После чего заключаем исходный дизайн, например, в @media screen and (min-width=769px){}, новый в @media screen and (max-width=768px){} и наслаждаемся результатом Подробнее об этих и им подобных волшебных строках можно прочитать здесь
В любом случае, при разработке мобильной версии крайне поможет эмулятор мобильных браузеров, вшитый почти в каждый браузер в инструменты разработчика (смотри здесь)

6. Советы по mybb
1. Помните, что перед тем, как начать делать что-то скриптами, можно попробовать прикрутить это на чистом css, например, у mybb каждая категория имеет свой идентификатор, у тех постов, у которых автор онлайн, прикручен класс online, у ссылок в меню навигации есть идентификаторы, а у пользовательских ссылок - классы. Пользуйтесь ими, а уже потом доделывайте то, что не получилось сделать на чистых каскадках, скриптами. С большой вероятностью обладатели малопроизводительных динозавров скажут вам "спасибо"
2. Если что-то некуда повесить или хочется вставить текст куда-то за пределы форума или что угодно еще - создаем div-блок, прикручиваем ему нужное позиционирование и вставляем все туда. Желательно просто назначить ему класс/идентификатор, а все, что связано со стилем, слить в стиль - меньше заморочек при подключении смены стиля кнопками
3. Чтобы не особо заморачиваться с мобильным дизайном, можно просто придерживаться следующих правил:
- если надо поднять меню, то поднимаем его за счет отрицательного margin у соседа сверху
- все таблицы и прочие неукрашательные блоки только в объявлении
Тогда можно взять стандартный мобильный дизайн, чуток откорректировать при помощи медиа-запросов в основном стиле и получить более-менее рабочую мобильную версию вроде такой

Отредактировано Emerael (2017-05-27 01:30:00)