Создание макета
Основы разработки дизайна на макете.
В качестве предисловия к этой части важно сказать, что конкретно в этом гайде будут только трюки по работе в фотошопе для новичков и общие советы по работе с макетами, которые сделают вашу жизнь проще.
Сама разработка макета - это дело скилла конкретного дизайнера в конкретном графическом редакторе. Нет какого-то универсального курса из комплекта уроков, который научит рисовать любые макеты с нуля. Дизайн в графических редакторах - это практика. Необходимо ставить задачи, искать пути их решения, гуглить уроки и т.д.
Лично я когда-то давно зарегистрировала этот форум именно с этой целью. Идеей было получать бесплатные заказы, чтоб на практике учиться делать что-то в ФШ. Вы можете тоже поискать себе подобный источник практики, либо же просто выполнять уроки по работе с графическими редакторами один за другим.
Перечислять здесь миллион уроков по работе в фотошопе, увы, нет никакого смысла. Во-первых, фотошоп - это не единственный подходящий для разработки дизайна редактор. Если быть честным, то во многих случаях он самый неподходящий. 
Во-вторых, уроков, которые я смогу из себя выдавить, все равно не хватит для специфического дизайна - невозможно предусмотреть все дизайнерские изыскания. Зато мы поговорим о работе в ФШ конкретно со спецификой макетов, а не красивых картинок.
Как делать макет для дизайна форума/сайта?
Для кого-то это может быть открытием, поэтому на всякий случай сразу обозначим: макет для дизайна форума/сайта рисуется целиком, а не по отдельным частям.
Макет - это второй этап продумывания дизайна, где вы размещаете весь контент сайта, разрисовываете, придаете элементам форму и т.д.
Вот так это выглядит:
Потом макет "нарезается" на отдельные элементы, которые вставляются в код сайта.
Не рисуйте элементы дизайна отдельно
Вы можете нарисовать что-то сложносоставное отдельно. Например, логотипы надо разрабатывать отдельно в широком формате: они могут использоваться для рекламы, для печати и т.д., а на макет вставлятся мини-лого, так что, будет проблемой, если лого делать на макете маленьким, а потом думать как его перерисовать в большом формате. Или, например, если в шапке используется что-либо нарисованное из миллиона слоев и эффектов, можно заняться этим отдельно, а на макет перекинуть уже готовую версию элемента.
Но в целом рисовать отдельно шапку, отдельно иконки и отдельно окантовки - это НЕ нормально. Как минимум макет дизайна должен дать вам полную картину о том, что с чем сочетается стилистически, везде ли одинаковые оттенки и цвета и т.д.
Делайте ПОЛНЫЕ подробные макеты
Макет - это финальный этап продумывания дизайна (почти окончательный этап), где вы решаете где какой текст должен быть расположен, какого он должен быть размера и какого цвета. Чем подробнее макет, тем меньше проблем с его версткой. Когда вы что-то не вносите на макет потом будете сталкиваться с проблемой "а куда это засунуть".
Представьте, что макет будете верстать не вы и всего что на макете нет, не будет и на сайте - и вот с таким подходом рисуйте ВСЁ. Да, это сложно, это дольше, зато это - профессиональный и правильный подход к дизайну, который убережет вас от многих проблем.
Конечно, макет - это ВАШ рабочий инструмент, и он НЕ обязан содержать каждую внутреннюю страничку и каждую точечку. К тому же, часто бывает, что в процессе верстки некоторые мелочи меняются, переносятся, добавляются. Но это не повод отказаться от подробного макета.
На просторе рынка ролевых дизайнов можно наблюдать вот такие макеты:
Как заготовка - это нормально.
Как образец, чтобы показать заказчику цветовую гамму - это нормально.
Как финальная версия перед версткой - это НЕ нормально.
Если вы будете брать пример с таких макетов, вы по факту лишите свой дизайн точной продуманности (о которой мы говорили в предыдущей части). Такие макеты отлично годятся для вставки новой цветовой гаммы и картинок в стыренный где-то шаблон, но для разработки индивидуального дизайна, который удобен пользователям и несет в себе цель сделать адекватное отображение элементов сайта - нет.
Продумывайте верстку при разработке макета
Другая проблема дизайнеров - это отрисовка невероятной красоты, которую потом либо нереально вкорячить, либо реально, но очень тяжело.
К сожалению, проблема встречается даже у профессиональных дизайнеров и лечится только с практикой. Когда дизайнер вообще не прикасается к верстке, у него наблюдается много косяков при разработке.
Здесь я выдам несколько основных советов для начинающих, которые упростят вам жизнь.
Во-первых, учитывайте разрешения экрана. Если рисуете фиксированный дизайн, нанесите на макет основные слои разрешений - тогда станет видно, как будет обрезаться ваша супер-симпотичная шапочка, помещаются ли элементы форума на узком экране и т.д.
Во-вторых, когда рисуете всякие детальки, окантовки и т.д., учитывайте, что потом это всё надо как-то "нарезать" и куда-то вставить. Если пользуетесь готовым движком, отвлекитесь и посмотрите в код, подумайте, каким способом это надо будет засовывать.
Подробнее мы вернемся к этому вопросу в части Что учесть при разработке макета
Ошибки новичков в разработке дизайна
Это уже более субъективные вещи, с которыми приходилось сталкиваться. Однако, может быть, они кому-то пригодятся.
Во-первых, при подборе исходников следует учитывать, что не бывает неподходящего цвета. Любую картинку можно перекрасить под ваш дизайн. Некоторые, конечно, "красятся" с трудом, но в любом случае вам следует озадачить себя поиском уроков по колоризации различных элементов в графическом редакторе, а не искать неприменно "красную" эльфийку - это вам поможет в будущем, и, если не умеете, лучше начать этому учиться уже сейчас. Когда подбираете исходники, смотрите на форму, а не на цвет.
Во-вторых, не надо смешивать стили рисовки. Например, анимешный персонаж + компьютерная графика + фото реального человека одновременно в одной шапке смотрятся нелепо. (если только сайт не посвящен кино/комп.играм, но даже в этом случае 2д и 3д объекты рядом никак не смотрятся - надо выбирать: либо засовываем нарисованное, либо реалистичное, либо разграничиваем это как-то отдельно.) То же можно сказать и про элементы дизайна: реалистичная металлическая рамочка не подойдет под дизайн в стиле рисованной графики.
В-третьих, не всегда стоит пихать в дизайн слишком много исходников и графики. Например, в шапке сайта очень органично смотрится ОДИН персонаж, а не десять. Но новички любят понапихать побольше или сделать шапку-коллаж из кучи всего сразу. Другой пример - не каждому форуму/сайту нужен "графонистый" дизайн, состоящий из кучи картинок, мелочей, кнопок и окантовок. Если речь о фентези-ролевой, то это актуально, но если форум больше сконцентрирован на общении или контенте, то вам ни к чему настолько "атмосферный" дизайн и следует быть проще.
Наверх к оглавлению
Советы по работе с макетом
При профессиональной работе с макетами просто необходимо следовать этим простым правилами, иначе ваш макет превратится с кашу, где даже вы не сможете разобраться.
В данном гайде я привожу примеры и терминологию из Photoshop, но подобный инструментарий есть в любом адекватном редакторе.
1. Используйте папки.
Все слои, которые относятся к определенному элементу, сохраняйте в отдельную папку.
В фотошопе папки создаются на панеле слоёв, а слои в них можно перетаскивать мышкой:
Как вы видите, папка ВНУТРИ папки - это тоже неплохая идея, когда речь идет о большом макете, состоящем из множества элементов.
Что именно объединять?
Во-первых, стоит раскладывать макет на элементы сайта (шапка, подвал, сайдбар, "рамка тела", контент).
Во-вторых, любой элемент который насчитывает с десяток слоёв заслуживает храниться в папке. Нарисовали окантовочку, украшенную кучей листиков, звездочек и блестяшек? Упакуйте все эффекты по папкам: "листья"/"звезды"/"блестяшки".
2. Раскрашивайте папки.
У меня эта привычка не выработалась, но это очень полезное правило. Даже если красить папки от балды, можно лучше в них ориентироваться, т.к. все слои внутри обретают тот же цвет и видно, где закончилась папка:
Чтоб покрасить папку в фотошопе сделайте правый клик по ней и в выпадающем меню в самом конце будет перечисление цветов.
А если сможете выработать для себя ассоциации элементов с цветом папки, то ваша работа в редакторе станет в разы лучше.
3. Давайте название слоям и папкам.
Не обязательно это делать прям со всеми элементами, но желательно. Чем больше всего обретет названия, тем лучше.
Папку лучше проименовать заранее, а слои - уже по завершению работы над элементом. По окончании создания элемента, не забудьте удалить или вынести в отдельную папку все неиспользованные слои.
Называть папки и элементы лучше на английском.
Во-первых, названия получаются гораздо короче. Во-вторых, не будет проблем, если вы передадите макет на доработку кому-либо - проще разобраться в английском языке, чем в наименованиях типа "штучка справа".
4. Не склеивайте слои без необходимости.
Ни один дизайнер - не робот. В любой момент можно допустить ошибку: можно что-то криво обрезать, где-то может торчать лишняя тень, можно ошибиться со стилем слоя и т.д. И все это может быть не на поверхности, а зарыто где-то между слоёв. А самое главное - такие косяки иногда выявляются даже не стадии верстки, а когда уже начинаешь пользоваться дизайном и замечаешь, что кое-что кое-где криво.
Поэтому у вас ВСЕГДА должна быть возможность "откатиться", выкопать проблемный слой, в пару кликов решить проблему и перезалить элемент дизайна.
Если вам все же понадобилось что-то склеить в один слой, поступайте одним из двух методов:
1 способ: скопируйте все слои, которые намереваетесь склеить, вынесете в отдельную папку и сделайте ее невидимой. Таким образом у вас останутся все исходные элементы
2 способ: сохраните текущий макет с учетом версии. Например "design-1", следующая версия со склеенными слоями будет называться "design-2"
5. Не разводите "клонов".
Вы поймете насколько это важно, когда ваш макет начнет весить гигабайты, а вы будете успевать попить кофе, помыться и выгулять собаку в процессе открытия файла.
Экономьте количество слоёв.
Если вы рисуете дизайн постранично, не надо копировать шапку и подвал для каждой страницы. Создавайте их в виде глобальных блоков, а остальное рисуйте отдельно.
Если вы делаете новую папку элемента на основе копии другой, то удалите все лишние слои, которые могут где-то затеряться в этой копии и не быть использованы в новом элементе - то есть не надо клонировать всякие отключенные "исходники", которые использовались при разработке первоначального элемента.
Вообще старайтесь за собой подчищать и удалять ненужные слои. Сделали элемент (папку) - почистили. Естественно, не надо удалять всё, продолжайте сохранять исходники объединенных слоёв, можно оставлять многое, но от однозначно неиспользуемых слоёв надо избавляться.
Наверх к оглавлению
Что учесть при разработке макета
В отличие от какой-либо графической работы по картинкам, аватаркам и арту, макеты - это другая вселенная. При разработке необходимо держать в голове не только неописуемую красоту, но и функциональную часть: как это будет выглядеть на экране, как это будет "нарезаться" на элементы и как это сверстать.
Разрешения экрана
На просторах интернета МАССА дизайнов, которые сделаны без учета разрешений экрана.
Во-первых, надо запомнить: ваш монитор и то, что вы видите на экране, не является истинной в последней инстанции! У других пользователей разрешение экрана другое: оно может быть больше вашего или меньше. Ваша задача - учитывать это еще при создании макета, а не только при верстке.
Когда я говорю о других разрешениях экрана, я не имею в виду обязательную адаптацию макета под мобильные и планшеты, пока речь идет сугубо о дизайне для ПК - и на нем тоже лажают часто и серьезно.
Например, можно наблюдать резкие "обрезания" фонов:
При разрешении 1500+ обрывалась шапка
| 
при разрешении 1400+ обрывался фон
|
1400-1500 ни в коем случае не является каким-либо стандартом. Есть еще люди с мониторами шириной 1600px и 1920px. А бывают и ребята, которые покупают огромные моники с разрешением в 2560 или даже 3840. Не обязательно, чтоб картинка заполняла всю ширину монитора в 3850px, но нужно, чтоб она не обрывалась даже на таком широком дисплее. Если вы работаете с маленького монитора, вы должны рисовать макеты как минимум на 1920 в ширину и делать фон таким, чтобы он либо мог растягиваться на любую ширину, либо красиво переходил в цвет, а не резко обрывался.
Такой же ошибкой является, когда дизайнер, напротив, пользуется огромным монитором и считает, что шапки и фоновые элементы размером, например, в 1300 пикселей - это отличная ширина. Да, с монитора в 1920 и выше такая ширина выглядит отлично, но бывают пользователи с разрешением 1280 и 1024 - при фиксированном дизайне у таких ребят будет неудобный горизонтальный скролл.
Если вы хотите делать широкие дизайны, вы должны делать их с учетом адаптивности: чтобы можно было их делать не фиксированными, а "резиновыми" и подстроить под разрешение экрана. Если же вы делаете фиксированный дизайн, ориентируйтесь на пользователей ПК с самым низким разрешением: 1024 - максимальная ширина для "туловища" и шапок (хотя бывают нетбуки с меньшим разрешением, но черт с ними, пусть они считаются уже "мобильными").
Также вам необходимо вспоминать о разрешениях экрана, когда вы вставляете какую-нибудь сисястую эльфиечку на фон. Вы должны видеть и понимать, как эта эльфиечка будет "обрезаться" в зависимости от ширины экрана - исходя из этого будет понятно, как ее лучше размещать. Если об этом не подумать, то легко может получится так, что на узком мониторе люди не видят эльфийку, а у них просто чья-то сиська сбоку торчит.
Я рекомендую прямо на макет наносить вспомогательные слои или "линейки", обозначающие форматы разрешения экрана и регулярно с ними сверяться в ходе работы. Если вы используете Photoshop, то в следующей части Photoshop для новичков можете посмотреть, как это делается. У других редакторов также есть схожий инструментарий.
Выравнивание элементов
Следующие проблемы с макетами - это кривые макеты.
В принципе, макет - это ваш рабочий инструмент, и он действительно может содержать несоответствия в размерах и неточности (которые легко правятся на стадии верстки) или на нем вообще может отсутствовать часть контента (которую вы и без макета знаете, как и куда пристроить).
Но надо понимать, где в макете можно действовать по принципу "и так сойдет", а какие вещи вам аукнутся на стадии верстки. Например, размеры заголовков и шрифтов правятся легким движением руки в коде сайта. Также в большинстве случаев не составит труда, например, поправить отступы элементов друг от друга. А вот когда у вас справа рамочка в 6 пикселей, а слева в 7 пикселей, это может обернутся тем, что при верстке внутренних элементов вы без калькулятора не обойдетесь.
Основные фоновые элементы у вас должны быть ровными и симметричными.
Во-первых, НЕ делайте элементов с нечетной шириной. Например: 803px - это плохо, сделайте 804 или 802. За счет этого будет проще считать отступы внутреннего содержимого и верстать.
Во-вторых, соблюдайте симметрию. Глазу не видна разница в 1 пиксель, но код это увидит и заставит танцевать шаманские танцы с бубном. Это важно, если вы хотите освоить адаптивную верстку. Во избежание проблем с несимметричностью и кривизной, старайтесь при создании похожих элементов, делать копии предыдущего, а не создавать новый, и из этой копии дорабатывать элемент.
Также вам пригодится освоить приемы по выравниванию элементов относительно друг друга. Когда я делала свои первые фиксированные кривые дизайны, очень часто моя шапка получалась шире/уже с одной из сторон и не состыковывалась с "туловищем". Чтоб у вас такого не было, используйте и вспомогательные слои, и инструменты программы, которые могут сами поставить вам элементы справа/слева/по центру. Если вы используете Photoshop, то в следующей части Photoshop для новичков можете посмотреть, как это делается. У других редакторов также есть схожий инструментарий.
Верстка макета и код движка
Мы уже вкратце прошлись в начале этой главы по вопросу, что очень важно в разработке макета держать в голове свой шаблон и то, как вы собираете его верстать. Здесь я попытаюсь подробнее объяснить, о чем идет речь.
Один из ярких примеров: я часто наблюдала ситуацию, что дизайнер нарисовал прекрасную окантовочку, у который НЕТ повторяющейся области - она цельная. На самом деле любые окантовки должны состоять из нижней части, верхней и повторяющегося по вертикали фона:
Рисуйте окантовки прямо на макете так, чтоб их можно было разделить на эти части.
А еще когда рисуете двойную окантовку следите, чтоб ее можно было "разрезать" на одинаковой высоте. Например:
Паттерн на фоне повторяется без швов на этой высоте, "зубчики" окантовки размножены ровно настолько, чтоб примыкать к повторению "бордюра". Зачем всё это нужно? В следующей части мы поговорим о форматах графики, но помимо этого следует учесть, что вы не напасётесь селекторов для вставки всяких "подюбников" отдельными картинками. А я очень часто при верстке чужих макетов сталкивалась с тем, что каждый подобный элемент окантовки имеет разную высоту и необходимо перерисовывать половину макета. Чтоб вас не постигала беда с возможными дорисовками и доделками на стадии верстки, старайтесь делать такие вещи заранее.
На этих примерах вы можете видеть, что в разработке макета должны участвовать как ваши знания о css, так и ваши знания о его верстке. В этой статье мы поговорим подробно и о том, и о том, а на данный момент необходимо усвоить несколько советов.
Во-первых, иногда проще - это лучше. Всем хочется нарисовать невероятную красоту, но если эта красота приведет вас к тому, что придется делать гигансткие png-картинки для верстки или делать дизайн неудобным для пользователей, лучше остановиться, подумать и найти более филигранное и рациональное дизайнерское решение.
Во-вторых, думайте о коде. Как можно нарезать этот элемент и куда его можно засунуть. Если у вас не хватает знаний в CSS - не беда, всегда можно посоветоваться, выложить кусок макета, спросить чисто теоретически: можно ли безболезненно пристроить элемент. Используйте для этого наш форум (Техническая поддержка) или другие ресурсы, специализирующиеся на вебдизайне.
Следующие части этой статьи посвещаны верстке макета (т.е. его "нарезке" на элeменты) - это укомплектует ваши познания в графической составляющей макетов и поможет принимать более рациональные решения в том числе и при разработке макета.
Наверх к оглавлению
. Возможно, дизайны, где названия и описания разделов в красивой окантовке, а все остальные данные висят в круговерти пустоты, именно так и появились.
, и весит вообще не много, однако переключаясь на темную тему форума, вы увидите неровные белые края смайла. Так что, использовать прозрачность можно, но нужно делать это с умом.
