ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте
Стать модераторомОтзывы

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Гайды, уроки, подборки по вебдизайну » Гайд: Как сделать дизайн форума/сайта? Все о создании своего дизайна.


Гайд: Как сделать дизайн форума/сайта? Все о создании своего дизайна.

Сообщений 1 страница 5 из 5

1

О статье
Старую версию статьи вы могли видеть у нас на форуме: Как сделать дизайн форума? Все о создании стиля на примере Mybb форума
К сожалению, со временем некоторая информация потеряла актуальность, к тому же были потеряны картинки.

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

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

Если вы хотите поддержать и смотивировать меня на скорейшее создание этого опуса, вы можете ЗАДОНАТИТЬ на кофе, шоколадку и нормальный микрофон (для видосов).

PS: За копирование статьи на другие ресурсы БЕЗ ссылки на источник откушу жопу! Будьте людьми, в благодарность за труд хотя бы не копипастите это без ссылки!


Оглавление

Начало разработки дизайна

Создание макета

Верстка макета

Photoshop для новичков

+3

2

Начало разработки дизайна
Как запланировать проект дизайна, какие ошибки допускают новички.

Самые важные задачи дизайна
Основная проблема новичков в сфере вебдизайна - концентрация на стандартных шаблонах, попытки понатащить к себе лишнее и ненужное (увиденное на других сайтах), а также желание срочно продумать цветовую гамму (а не шаблон).
Проблема возникает потому, что в голове новичка "дизайн" - это "красота сайта". На самом деле "дизайн" - это прежде всего ЮЗАБИЛИТИ: то есть удобный ИНТЕРФЕЙС для работы с сайтом/форумом.

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

Для начала дизайнеру нужно определиться со следующим:
1. какой контент содержат страницы и как лучше его разместить
Это касается стандартного функционала движка. Например, в интернет-магазине есть вывод товаров, категории товаров, контент на странице товара, корзина и т.д. На форуме есть список категорий, список топиков, сообщения на странице топика, профиль пользователя и т.д.
Всё это можно и НУЖНО изменить "под себя" - в этом и есть первостепенная задача СВОЕГО дизайна: чтобы форум стал удобнее для нужд конкретной аудитории.

2. какой дополнительный контент должны содержать страницы и как лучше его разместить
Это касается не стандартного функционала движка, а вашего встроенного: что НУЖНО будет выводить на сайте или форуме, какие виджеты будут необходимы и полезны, что из этого стоит разместить только на главной, а что - на каждой странице, и т.д.
Это делается на этапе продумывания дизайна, чтобы потом не было проблемы "куда же это засунуть" и не тащить к себе как сорока все прикольное и блестящее, а только реально нужное.

3. какая стилистика шаблона больше подходит для вашей тематики и как это скажется на юзабилити
Это касается уже больше всяких творческих "красивостей", однако на этом этапе мы думаем о них не как о чем-то красивом, цветном и офигенном, а как о ФУНКЦИИ, которую оно должно выполнять в дизайне.
Например, стоит ли пихать в шапку форума сисястую эльфийку? понравится ли это аудитории сайта, привлекательно ли это для пользователей? а подходит ли это под нашу тематику сайта? а какого размера должна быть эльфийка, чтобы шапка не была слишком большой? а если нам нужно, чтобы помещались не только сиськи эльфийки, но и попа, что нам лучше сделать: уменьшить ее или сделать эту эльфийку не в шапке, а на фоне, чтоб её попа как-нибудь сбоку торчала и не увеличивала высоту шапки?
Все наши творческие изыски нужно продумать как абстрактные элементы, и для каждого придумать функцию, которую они выполняют в дизайне.
Такой ход мысли также научит вас не просто копировать чьи-то дизайн-решения, а самому продумывать: где вам нужна рамочка, а где не нужна, что от чего стоит отделить, как лучше расположить элементы на странице, чтобы это было не только красиво, но и читабельно.

Наверх к оглавлению


Примеры продумывания шаблонов

Интернет-магазин игровых услуг.
В обычном интернет-магазине правильно было бы сделать картинки товаров, чтобы на странице пользователь мог раскрыть картинки товара или покрутить объект в зд, оценив со всех сторон дизайн телевизора/смартфона/труселей (или что он там покупает).
Но что лучше сделать, если наш "товар" - это услуга по прохождению какого-то контента из онлайн-игры? "Убийство Архимонда" в картинках изобразить можно, но это было бы странно.
Интересное дизайн-решение: интегрировать фоновую картинку вместо стандартной картинки товара:

Дизайн для проекта ForumD.ru или MyBB Bright Flat.
На обычном форуме для общения сам шаблон дизайна может быть стандартным. Но что, если наш проект - это скорее "блог", чем форум? Например, на главной форума нужны длинные описания разделов и много ссылок для быстрого перехода, на страницах списка тем нужно выделять заголовки топика, а на страницах топиков важен контент (статья), а не куча полей профиля пользователя.
Дизайн-решение: переписываем полностью форумные таблицы в блоки - так, чтоб они соответствовали формату блогов, а не форума.

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

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

Вот так (текстурой) можно отделять строки таблицы, если страдаешь нелюбовью к линиям в таблицах

Вот так ровно и аккуратно можно оформить список тем, если страдаешь нелюбовью к линиям в таблицах

Вот приблизительно так (блоками-окантовками) можно разместить разделы форума на главной, отказавшись от колонок таблицы, которые висят в пустоте

Наверх к оглавлению


Зачем нужен дизайн? Как придумать дизайн для сайта?

Наверх к оглавлению


Как придумать свой шаблон?
Как можно прийти к хорошему дизайну? Для этого нужно для начала закрыть все понравившиеся сайты и думать только своей головой. Делается свой собственный дизайн поэтапно, ориентируясь на СВОЮ аудиторию, а не путем выдирания и нагромождения трендов с других форумов/сайтов.
Важно понимать, что в принципе что-то где-то подсмотреть, приметить и применить к своему дизайну - это не плохо. Плохо будет, если это будет делаться непродуманно, хаотично и без оглядки на СВОЮ тематику, СВОЮ аудиторию.

Этап 1. Составляем список нужного и ненужного.
Считайте этот этап подготовкой ТехЗадания (брифа) по дизайну для самого себя. Этот этап позволит учесть все особенности вашего движка, весь дополнительный контент и все технические фичи, которые понадобятся на сайте.
Итак, форумы/сайты конкурентов мы закрываем и открываем чистый лист для заметок. На нем надо разместить:

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

  • Весь дополнительный контент, который нужно встраивать на сайте
    Это касается всяких слайдеров, галерей картинок, текстов и дополнительных меню

  • Все нужные и НЕ нужные элементы движка
    Вы уже настроили функционал движка так, как вам нужно, а теперь необходимо изучить "голый" (без дизайна или со стандартным дизайном) движок и выписать всё, что вам необходимо отображать, а что - скрыть

Причем составлять эти списки лучше ПОСТРАНИЧНО. Отдельно решаем, что у нас размешается в шапке, подвале (или, например, сайдбаре) на каждой странице, а потом разбираем движок на "кусочки паззла": что у нас есть на главной, что оттуда надо убрать и что туда надо добавить; что у нас есть на странице "портфолио", что оттуда надо убрать и что туда надо добавить - и так со всеми основными страницами.
Даже на сложных движках (например, форумных) это выручает при разработке макета. В противном случае и получается, что нарисуешь какую-нибудь красивую окантовку для поста и профиля, а на этапе верстки встает вопрос: куда пихать дату поста, рейтинг и голосовалку за пост? "ой, чет оно же никуда не влазит, ладно пусть висит где-то как попало" :D . Возможно, дизайны, где названия и описания разделов в красивой окантовке, а все остальные данные висят в круговерти пустоты, именно так и появились.

Этап 2. Продумываем общий схематический дизайн шаблона.
Прежде, чем открывать фотошоп или искать самую красивую сисястую эльфийку, которая идеально впишется в ваш дизайн, необходимо взять чистый лист бумаги и схематично от руки нарисовать как вы видите ваш будущий дизайн.
Желательно - постранично. Можно это делать поэтапно, особенно, если работаете со сложносоставным движком с кучей разных страниц типа интернет-магазина или форума. На примере форумов: сначала нарисовали себе главную и приступили к макету, а список тем, посты, профили и прочее будем подрисовывать отдельно, когда до них дойдет дело.
Однако хотя бы общим концептом надо озаботиться СРАЗУ.

Вот примеры моих каракулей при продумывании разных дизайнов:

Сообщения на странице топика для ФД

Идея

Воплощение

https://forumupload.ru/uploads/0007/e3/f7/2/734292.jpg

https://forumupload.ru/uploads/0007/e3/f7/2/721507.jpg

Необычное меню для форума

Идея

Воплощение

https://forumupload.ru/uploads/0007/e3/f7/2/333594.jpg

https://forumupload.ru/uploads/0007/e3/f7/2/451853.jpg

Невоплощенное (лендинг для ФД и идея ролевого дизайна)

https://forumupload.ru/uploads/0007/e3/f7/2/343402.jpg

https://forumupload.ru/uploads/0007/e3/f7/2/946037.jpg

Как вы видите, каракули не должны быть хоть сколько-то красивыми, разборчивыми или понятными хоть кому-то, кроме вас.
Это ваши личные заметки по дизайну, которые помогают держать в голове контент, который есть на странице, а также определиться приблизительно с формой объектов и количеством графики.

Только после этих этапов можно приступать к макету. А прорисовка макета будет буквальным продолжением этих этапов.

Что важно: хочу вдохновить и успокоить новичков, которые не берутся продумывать нестандартный шаблон просто из боязни не осилить верстку.
Ваша фантазия относительно шаблона может быть ограничена только фактором УДОБСТВА для пользователей. То есть вы на этапе подготовки должны знать, что ЛЮБОЙ стандартный элемент движка можно куда-нибудь подвинуть, в любое место вставить красивые рамочки, в любое место добавить какой-нибудь свой контент или блок для картинок. Даже проблемы с технически ограниченными движками типа mybb, wix, ucoz и т.д. (где нет доступа в html-код) решаемы (хоть и через жопу).
Решить свои проблемы с воплощением дизайна можно на нашем форуме или других подобных ресурсах, задавая нужные вопросы и демонстрируя свои макеты. Так что отсутствие навыков при желании научиться делать дизайн круто, индивидуально и правильно не должно вас останавливать. Придумывайте сложные вещи, учитесь их исполнять и со временем вы сможете верстать что угодно для какой угодно платформы.

Наверх к оглавлению
[html]<style>.punbb #p138967 {margin-left: 30px;}</style>[/html]

+3

3

Создание макета
Основы разработки дизайна на макете.

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

Как делать макет для дизайна форума/сайта?
Для кого-то это может быть открытием, поэтому на всякий случай сразу обозначим: макет для дизайна форума/сайта рисуется целиком, а не по отдельным частям.
Макет - это второй этап продумывания дизайна, где вы размещаете весь контент сайта, разрисовываете, придаете элементам форму и т.д.
Вот так это выглядит:

Потом макет "нарезается" на отдельные элементы, которые вставляются в код сайта.

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

Делайте ПОЛНЫЕ подробные макеты
Макет - это финальный этап продумывания дизайна (почти окончательный этап), где вы решаете где какой текст должен быть расположен, какого он должен быть размера и какого цвета. Чем подробнее макет, тем меньше проблем с его версткой. Когда вы что-то не вносите на макет потом будете сталкиваться с проблемой "а куда это засунуть".
Представьте, что макет будете верстать не вы и всего что на макете нет, не будет и на сайте - и вот с таким подходом рисуйте ВСЁ. Да, это сложно, это дольше, зато это - профессиональный и правильный подход к дизайну, который убережет вас от многих проблем.

Конечно, макет - это ВАШ рабочий инструмент, и он НЕ обязан содержать каждую внутреннюю страничку и каждую точечку. К тому же, часто бывает, что в процессе верстки некоторые мелочи меняются, переносятся, добавляются. Но это не повод отказаться от подробного макета.
На просторе рынка ролевых дизайнов можно наблюдать вот такие макеты:

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

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

Ошибки новичков в разработке дизайна
Это уже более субъективные вещи, с которыми приходилось сталкиваться. Однако, может быть, они кому-то пригодятся.
Во-первых, при подборе исходников следует учитывать, что не бывает неподходящего цвета. Любую картинку можно перекрасить под ваш дизайн. Некоторые, конечно, "красятся" с трудом, но в любом случае вам следует озадачить себя поиском уроков по колоризации различных элементов в графическом редакторе, а не искать неприменно "красную" эльфийку - это вам поможет в будущем, и, если не умеете, лучше начать этому учиться уже сейчас. Когда подбираете исходники, смотрите на форму, а не на цвет.
Во-вторых, не надо смешивать стили рисовки. Например, анимешный персонаж + компьютерная графика + фото реального человека одновременно в одной шапке смотрятся нелепо. (если только сайт не посвящен кино/комп.играм, но даже в этом случае 2д и 3д объекты рядом никак не смотрятся - надо выбирать: либо засовываем нарисованное, либо реалистичное, либо разграничиваем это как-то отдельно.) То же можно сказать и про элементы дизайна: реалистичная металлическая рамочка не подойдет под дизайн в стиле рисованной графики.
В-третьих, не всегда стоит пихать в дизайн слишком много исходников и графики. Например, в шапке сайта очень органично смотрится ОДИН персонаж, а не десять. Но новички любят понапихать побольше или сделать шапку-коллаж из кучи всего сразу. Другой пример - не каждому форуму/сайту нужен "графонистый" дизайн, состоящий из кучи картинок, мелочей, кнопок и окантовок. Если речь о фентези-ролевой, то это актуально, но если форум больше сконцентрирован на общении или контенте, то вам ни к чему настолько "атмосферный" дизайн и следует быть проще.

Наверх к оглавлению


Советы по работе с макетом

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

1. Используйте папки.
Все слои, которые относятся к определенному элементу, сохраняйте в отдельную папку.
В фотошопе папки создаются на панеле слоёв, а слои в них можно перетаскивать мышкой:

Как вы видите, папка ВНУТРИ папки - это тоже неплохая идея, когда речь идет о большом макете, состоящем из множества элементов.
Что именно объединять?
Во-первых, стоит раскладывать макет на элементы сайта (шапка, подвал, сайдбар, "рамка тела", контент).
Во-вторых, любой элемент который насчитывает с десяток слоёв заслуживает храниться в папке. Нарисовали окантовочку, украшенную кучей листиков, звездочек и блестяшек? Упакуйте все эффекты по папкам: "листья"/"звезды"/"блестяшки".

2. Раскрашивайте папки.
У меня эта привычка не выработалась, но это очень полезное правило. Даже если красить папки от балды, можно лучше в них ориентироваться, т.к. все слои внутри обретают тот же цвет и видно, где закончилась папка:

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

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

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

4. Не склеивайте слои без необходимости.
Ни один дизайнер - не робот. В любой момент можно допустить ошибку: можно что-то криво обрезать, где-то может торчать лишняя тень, можно ошибиться со стилем слоя и т.д. И все это может быть не на поверхности, а зарыто где-то между слоёв. А самое главное - такие косяки иногда выявляются даже не стадии верстки, а когда уже начинаешь пользоваться дизайном и замечаешь, что кое-что кое-где криво.
Поэтому у вас ВСЕГДА должна быть возможность "откатиться", выкопать проблемный слой, в пару кликов решить проблему и перезалить элемент дизайна.

Если вам все же понадобилось что-то склеить в один слой, поступайте одним из двух методов:
  1 способ: скопируйте все слои, которые намереваетесь склеить, вынесете в отдельную папку и сделайте ее невидимой. Таким образом у вас останутся все исходные элементы
  2 способ: сохраните текущий макет с учетом версии. Например "design-1", следующая версия со склеенными слоями будет называться "design-2"

5. Не разводите "клонов".
Вы поймете насколько это важно, когда ваш макет начнет весить гигабайты, а вы будете успевать попить кофе, помыться и выгулять собаку в процессе открытия файла.
Экономьте количество слоёв.
Если вы рисуете дизайн постранично, не надо копировать шапку и подвал для каждой страницы. Создавайте их в виде глобальных блоков, а остальное рисуйте отдельно.
Если вы делаете новую папку элемента на основе копии другой, то удалите все лишние слои, которые могут где-то затеряться в этой копии и не быть использованы в новом элементе - то есть не надо клонировать всякие отключенные "исходники", которые использовались при разработке первоначального элемента.
Вообще старайтесь за собой подчищать и удалять ненужные слои. Сделали элемент (папку) - почистили. Естественно, не надо удалять всё, продолжайте сохранять исходники объединенных слоёв, можно оставлять многое, но от однозначно неиспользуемых слоёв надо избавляться.

Наверх к оглавлению


Что учесть при разработке макета

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

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

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 - не беда, всегда можно посоветоваться, выложить кусок макета, спросить чисто теоретически: можно ли безболезненно пристроить элемент. Используйте для этого наш форум (Техническая поддержка) или другие ресурсы, специализирующиеся на вебдизайне.
Следующие части этой статьи посвещаны верстке макета (т.е. его "нарезке" на элименты) - это укомплектует ваши познания в графической составляющей макетов и поможет принимать более рациональные решения в том числе и при разработке макета.

Наверх к оглавлению

[html]<style>.punbb #p139112 {margin-left: 30px;}</style>[/html]

+4

4

Верстка макета
Правила создания графики для дизайна.

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

Формат графики
Для дизайна ВАЖЕН формат графики, т.к. он влияет и на качество картинок, и главное - на его ВЕС! Ваша задача делать графику в таком формате, чтобы ее вес был минимален.
Для начала изучим, какие бывают картинки и какие из них подходят для дизайна.
Сразу обозначим приоритет использования форматов в вебдизайне: SVG/WEBP > JPEG > PNG > GIF

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

WEBP - это относительно-новый формат, которым сейчас рекомендовано пользоваться. Его суть в том, что он поддерживает высокое качество при меньшем весе картинок. Он заменяет любые стандартные форматы (JPEG, PNG, GIF), при этом:

  • сжимает изображения без потерь на 26% лучше, чем PNG

  • сжимает изображения с потерями лучше, чем JPEG на 25-34%

  • поддерживает прозрачность без потерь при увеличении размера всего лишь на 22%

Формат JPG (49.086 кб)
https://forumupload.ru/uploads/0007/e3/f7/2/175111.jpg

Формат PNG (70.960 кб)
https://forumupload.ru/uploads/0007/e3/f7/2/192518.png

Формат GIF (36.519 кб)
https://forumupload.ru/uploads/0007/e3/f7/2/882419.gif

Формат WebP (37.054 кб)
https://forumupload.ru/uploads/0007/e3/f7/2/170722.webp

На этот формат графики не сложно "пересесть". Для всех графических редакторов, где нет такого формата, можно раздобыть плагины, позволяющие сохранять в WEBP. Так что, если пользуетесь фотошопом, просто озаботьтесь поиском плагина и сохраняйте ВСЁ в этом формате. Главное - не используйте поддержку прозрачности там, где ее не нужно, чтобы картинка весила меньше.

JPG - это формат, который нужно использовать в вебдизайне по МАКСИМУМУ, если вы не хотите пересаживаться на WEBP. Он позволяет занизить качество изображения, уменьшив его вес, так, чтобы человеческий глаз не видел сильной потери качества. Ошибка новичков - просто сохранять в JPG, не пытаясь кликать в ползунки графического редактора, скидывая лишние килобайты веса. Хотя даже если ничего не сжимать, этот формат всё равно легче GiF и PNG при своем качестве картинки, так что именно в нем надо сохраняться, если у элемента нет прозрачности.

PNG - это формат, поддерживающий высокое качество графики и прозрачность. В стандартных редакторах нет никакой возможности сделать этот формат легче, понизив качество, поэтому он НЕ подходит для каждого элемента дизайна. Если вы не хотите пересаживаться на WEBP, использовать PNG можно для элементов с прозрачностью: иконок, логотипов. Ошибка новичков - сохранять все картинки в png, даже если там нет прозрачных элементов.
Вторая распространенная ошибка - использовать PNG для огромных картинок (окантовки, отбрасывающие тень огромные картинки в футере). Например:

"Подвал" ролевого дизайна
https://forumupload.ru/uploads/0007/e3/f7/2/808245.jpg

Использующаяся картинка

https://forumupload.ru/uploads/0007/e3/f7/2/603700.png

Такие огромных PNG картинок в вебдизайне быть не должно. Я и сама по началу из-за неопытности (а позже - из-за лени) частенько делала гигантские png-шапочки или png-окантовочки, но сейчас ответственно заявляю: такие штуки можно и НУЖНО делать только в JPG (а лучше - в WEBP).
PNG - это для маленьких иконочек, рюшечек и логотипов с прозрачностью. Ну, или для клипарта и исходников, а такое в вебдизайне не используется. Если в вашем элементе прозрачность не нужна, используйте JPG (а лучше - в WEBP). Если ваш элемент нуждается в прозрачности, но при этом он огромный, то думайте, как это сделать через JPG.
Вообще всегда и везде старайтесь максимально избегать этого формата. Например, иконки можно сделать в JPG, если они будут стоять на однотонном фоне. Да, и даже если иконки стоят на фоне текстурки, в некоторых случаях можно в фон иконки засунуть ту же текстурку и они будут визуально отображаться без "стыков". Правильный пример использования PNG - это, например, логотип, который "ездит" по фону шапки: если лого должно быть в одном месте, а фоновая картинка подстраивается под размеры экрана, можно вырезать лого отдельно и вставлять в PNG.

GIF - это формат невысокого качества (ограничен на 256 цветов), поддерживающий прозрачность (хреново) и анимацию. Его часто используют новички бездумно, однако он достаточно сложный и требовательный к своему изучению. Я бы рекомендовала от него вообще отказаться - его не должно быть в современном вебдизайне, но т.к. многие новички до сих пор его используют, я подробно расскажу о нем.
Из достоинств: этот формат порой легче JGP и PNG, однако это связано с потерей качества. Если отмотать наверх к картинкам с роботами, вы увидите, что GIF даже легче WebP, однако картинка стала "зернистой" - потеря качества заметна. Так что, он НЕ подходит для любых картинок, где много теней, цветов, световых эффектов и т.д. Однако, если в картинке цветов по минимуму, то, сохранив в GIF, вы получите иногда даже меньше размер, чем у JPG.
Он подходит для маленьких немногоцветных иконочек, смайликов, тоненьких бордюрчиков, рюшечек и т.д. В таких случаях от этого формата можно получить пользу.
При использовании прозрачности GIF делает элементу обводку, например, вот этот смайлик шикарно выглядит на белом фоне: :cool: , и весит вообще не много, однако переключаясь на темную тему форума, вы увидите неровные белые края смайла. Так что, использовать прозрачность можно, но нужно делать это с умом.
Гифки до сих пор востребованы из-за анимации, однако это их свойство уже стоит одной ногой в могиле. Они, конечно, еще некоторое время будут жить в виде смайлов и баннеров, но вы могли заметить, что загружая гифки на все современные соц-сети, они преобразуются в видео-формат. Почему? Потому что видео весит меньше, чем гифка, а качество замечательно. При создании видео-анимаций мы не ограничены количеством цветов, нам не приходится долго подбирать настройки качества, делая анимацию легче и т.д.

Почему надо отказаться от анимации в GIF
В вебдизайне гиф-анимация живет только в руках новичков, которые знают некоторые трюки создания анимации, но не освоили другие современные методы. В старой статье 2012го года я рассказывала про GIF-анимацию, как сделать ее легче, как ее встраивать в дизайн, но сейчас этого просто НЕ БУДЕТ, от нее надо отказываться.
Во-первых, простейшую анимацию можно и нужно делать через CSS. Например, когда какая-нибудь иконка или индикатор мигает, прыгает или меняет свой цвет - реализуемо просто кодом. Картинки для этого нужны, только если прыгать, мигать и менять цвет должен не просто кружочек/квадратик, а какая-нибудь иконочка. И, в отличие от GIF, анимацию через CSS мы можем делать интерактивной: мигать только при наведении курсора, прыгать только при нажатии на элемент и т.д.
Во-вторых, современный HTML поддерживает встроенные видео-элементы и может проигрывать и зацикливать видеофайлы. Поэтому сложную и красивую анимацию надо осваивать в видеоредакторах. Весить будет в разы меньше гифок, а качество будет в разы больше: можно сделать, чтоб по всей шапке сайта горел огонь, мерцали искры, летали феи или даже видео-нарезка отображалась. Весить это счастье будет немного.
Если вас пугает мысль об освоении видеомонтажа, я вам честно заявляю: это сложно настолько же, насколько сложен фотошоп со своими гифками - там тоже не легко добиться эффекта горящего огня, мерцающих искр и т.д., но при этом на выходе получается либо хреновое качество, либо картинка весом в гигабайты, а в видеоредакторе при тех же усилиях вы сможете смонтировать большую шапку с цикличной анимацией и получить хорошее качество.
Про видеомонтаж здесь уроков не будет, но по опыту скажу, что забивая в гугл запросы "как сделать огонь на видео" и "видео футаж - горящий огонь", вы найдете ответы, уроки и дальше с практикой разберетесь. Зато в статье мы разберемся с тем, как вставлять видео-анимацию на сайт и как делать анимацию через CSS, так что, надеюсь, в вашем случае гифки упокоятся с миром и использовать их в вебдизайне вы не будете.

Наверх к оглавлению


Как "нарезать" макет. Правила использования графики в вебдизайне

Итак, изучив форматы, переходим к основным правилам использования графики в вебдизайне.

Чем меньше ВЕС графики, тем лучше
Это и есть основной принцип любой верстки. Наша задача - добиваться того, чтоб картинки занимали килобайты, а не мегабайты. В принципе, почти всё, что будет приведено ниже также является практическими советами о том, как можно сбрасывать "сбрасывать лишний вес" с сайта.
За основу надо взять правило корректного использования форматов - этим вы уже начнете уменьшать вес графики.
К этому же правилу можно отнести оргомные PNG-шапки и PNG-подвалы. Если что-то должно переходить в фон, оно должно вырезаться с фоном и вставляться в фон через jpg - не используйте увесистую графику там, где можно сделать через менее прожорливые картинки и коды.

НЕ используйте картинки (там, где можно без них).
Основная проблема верстки у новичков - постоянное использование фоновых картинок ВЕЗДЕ.
На самом деле основной ваш инструмент - это CSS. Всё, что можно сделать кодом, нужно делать кодом.

Например, не нужно вставлять белый квадратик, если вы хотите покрасить что-то в белый цвет (даже если этот квадратик размером 1px*1px). Вместо этого нужно использовать background: #fff;.
Если приведенный пример вам кажется глупеньким и уж совсем похожим на ошибки полных новичков, то вот еще пример из того, что попадалось на глаза:

https://forumupload.ru/uploads/0007/e3/f7/2/721365.png

В этом дизайне рамка заголовка "All You Need Is Love" сделана картинкой. Текстуру действительно можно вставить картинкой, но серая рамочка спокойно реализуется через свойство border, поэтому в этом случае нужно не вырезать в фотошопе длинную "колбасу" для заголовков, а вставить текстуру и обвести ее серой рамочкой на CSS.

Через CSS можно делать любые рамки, одноцветные и градиентные фоны, тени, формы и т.д. Прежде, чем вырезать что-то в фотошопе (или чем вы там пользуетесь), попробуйте загуглить "CSS Как сделать *название_штуки*" - даже с минимальным опытом и знаниями о CSS можно спокойно найти более рациональные способы что-то обвести, загруглить и покрасить.

Что нельзя сделать через CSS - это рисунки, текстуры. Вот только их и надо вставлять картинками.

Чем меньше размер картинки (ширина, высота), тем лучше.
Вы научились использовать корректный формат графики? Поздравляю! Теперь надо учиться "резать" макет так, чтобы ваша графика не была размером с лошадиную жопу. Ведь чем меньше ширина и высота картинки - тем меньше её вес.

Если фон вашего сайта залит текстурой, не нужно делать картинку 1920*1080px или более. Сайт - это не обои на рабочий стол. Вы вырезаете текстуру и размножаете ее так, чтобы она "заливала" сайт.
Если шапка вашего сайта плавно переходит в текстуру, то вы вырезаете шапку ВМЕСТЕ с текстурой и позиционируете ее на фоне также, чтобы она сливалась с текстурой сайта. Если немножко "поколдовать" с кодами фона и вырезкой шапки, никаких "стыков" на месте текстуры шапки и текстуры фона быть не должно. 

Еще пример можно наблюдать на текущем дизайне этого форума: от лени и нежелания копаться/разбираться вставлены вот такие картинки для перехода фонов:

https://forumstatic.ru/files/0007/e3/f7/53799.jpg

Такое нужно делать без того, чтобы вставлять длиннющую картинку-линию, достаточно вырезать и спозиционировать только "молнии". Ну, или, если всё же лень или существует проблема с селекторами, то достаточно обрезать центральную часть, где есть три "молнии", и ее спозиционировать так, чтобы она накладывалась на переход одного цвета в другой.

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

Например, жуткая проблема, когда начинают разрезать один элемент на "слои" и распихать их по разным селекторам (см. дальше проблема "бутербродов"). Если у вас УЖЕ есть шапка определенного размера, не надо отдельно вырезать фон шапки, отдельно вырезать персонажей и отдельно вырезать какие-либо цветочки, которые на фоне шапки торчат. Вам ни к чему "бутерброды" - всё вместе вырезаете и вставляете на фон.

К этому же пункту относится использование спрайтов. Так уж получается, что 100 иконочек по отдельности будут весить больше, чем, если все эти иконочки засунуть в одну картинку (причем желательно - jpg) и через background-position выбирать какая из них будет отображаться. К тому же это просто удобнее. Вам будет проще поменять ссылку на картинку один раз, а не 100 раз.

Фоны отдельных элементов должны быть обособлены друг от друга.
Обратная проблема - это когда новички лепят прям ВСЁ на одну и ту же картинку.
Например, поверх шапки начинают в эту же картинку приделывать меню сайта, верх окантовки форума и фоновые элементы таблички, которая находится в шапке.
Верстка должна быть "живой", не надо фиксировать намертво элементы, присваивая им строго-определенное место из-за фоновых картинок.
Во-первых, вы дадите себе больше "Свободы" в изменении дизайна, если будете делать более динамичную верстку. Захочется повыше поднять меню и окантовку форума - поднимите, будет шапка поменьше, а меню повыше, делается просто кодом. Если же меню у вас "влипло" на фоне шапки, то простыми CSS кодами эту проблему не решить, и ничего никуда не сдвинуть.
Во-вторых, если вы собираетесь делать какую-никакую мобильную версию, то учиться отделять один элемент от другого просто необходимо. В мобильной версии каждый пиксель форума принимает другой вид, другую высоту. Например, как вы собираетесь расставить на узком экране информацию из "таблички", если приколотили её насмерть к шапке? Придется извращаться, прописывать для нее отдельный фон, делать для мобилок отдельную шапку... Проще основной дизайн сверстать не через ж, а на мобильном просто чуть-чуть подлатать позиционирование.
Отделять фоновые элементы друг от друга надо по принципу функциональности. Шапка и фон - отдельно, меню - отдельно, окантовки форума/сайта - отдельно. Если какой-то элемент уже имеет другую функцию, другое назначение, не надо его фоны впихивать туда, где стоит другой селектор другого элемента.

Итого
Вам предстоит найти и выработать у себя баланс между качеством, размером, количеством и рациональностью. Сразу это не придет, но с практикой будет получаться. Правильная "нарезка" макета сильно упирается именно в знания CSS, поэтому надо стараться больше гуглить и меньше ориентироваться на какие-либо готовые шаблоны.
Не всегда можно догадаться что-то сделать кодом или что-то сократить/объединить, однако если интересоваться этой темой, задавать вопросы и практиковаться, то рано или поздно мозг уже сам начнёт искать нужные селекторы и нужный подход еще на стадии отрисовки, а не "нарезки".

Наверх к оглавлению


Примеры нерациональной верстки

контент в разработке:
проблема "покраски картинкой"
проблема "циганских юбок"
проблема "бутербродов"

Наверх к оглавлению

[html]<style>.punbb #p142207 {margin-left: 30px;}</style>[/html]

+2

5

Photoshop для новичков
Минимальный набор трюков, который пригодится для первого дизайна.

Как уже написано в предыдущей части, созданию графики для дизайна невозможно научиться за "десять простых шагов". Только практика, практика и еще раз практика. Однако здесь я дам несколько простейших уроков в Photoshop для новичков, которые пригодятся для создания дизайна для сайта/форума своими силами. Если вы гуру по фотошопу (или другим редакторам), можете смело пропускать эту часть и приниматься за изучение CSS далее.
Почему именно Photoshop? Просто, потому что он под рукой, и я в нем работаю дольше всего - лучше всего могу рассказать именно о нем.
Я НЕ рекомендую его как лучший графический редактор по работе с макетами. Чисто для справки и расширения кругозора - среди профи, если уж берутся за фирму Adobe, то чаще используют InDesign и Illustrator. Однако в последнее время, вышла масса профессиональных программ с более адекватным интерфейсом, которые являются полными аналогами продуктов Adobe, только работают лучше, быстрее и стоят меньше, так что дизайнеров специализированных фирмах частенько "пересаживают" на другое ПО. Кароче, макет вы можете рисовать хоть в пейнте (если ухитритесь придерживаться в нем правил, которые обозначены в этой статье), только в нем разбирайтесь сами, а я пойду по популистскому пути, тем более, что эта статья ориентирована на новичков, которые только начинают свой путь в дизайне и, скорее всего, именно Photoshop им попадется под руку. :)

Вспомогательные слои, линии, выравнивание

контент в разработке

Наверх к оглавлению


Сохранение графики в разных форматах

контент в разработке

Наверх к оглавлению


Основы колоризации

контент в разработке

Наверх к оглавлению

[html]<style>.punbb #p142315 {margin-left: 30px;}</style>[/html]

+1


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Гайды, уроки, подборки по вебдизайну » Гайд: Как сделать дизайн форума/сайта? Все о создании своего дизайна.