Создание правильного макета Чтобы создать красивый и качественный шаблон его нужно первым делом нарисовать в фотошопе, но мало его просто нарисовать, нужно это сделать правильно, да и про то как правильно (уж сори за тавтологию) распихать слои по папкам тоже не нужно забывать. Наверняка все кто рисовал макет будущего шаблона, неуделяли должного внимания его папковой структуре и ровному расположению его элементов, то есть элементы нужно выравнивать не на глаз, хотя я сначала именно так и делал, а с помощью специальных направляющих, образующих сетку. Вообще рисовать нужно так чтобы потом можно было легко и удобно сверстать, тот кто верстает макеты, всегда нарисует его правильно ибо знает чего нужно избегать в графических изысках.
Сетка Начнём попорядку а именно с выравнивания элементов, то есть построения сетки. Перед её использование лучше активировать вид линейки (если конечно он уже не активирован), нажимаем CTRL+R теперь у нас есть вид линейки, нажимаем два раза на шкалу и выбираем пиксели, так в построении макета будет удобней. Для создания сетки вы можете нажать на шкале и держа вести направляющую в нужное направление, направляющие сетки будут "прилипать" к элементу выбранному в панели слоёв и наоборот, элемент будет прилипать к сетке, для более точного построения можно нажать (просмотреть -> новая направляющая).
Всё по папкам Элементы выровнены, теперь для облегчения жизни верстальщика (ну или вас самих), нужно распихать все слои по полочкам и дать им имена, не стоит этим пренебрегать, иначе сами же запутаетесь. Выделяется три основных папки, это header body и footer, в них вложены остальные папки, такие как меню, блоки, вид материалов и т.д. Каждый графический элемент должен находиться в своём "Домике" , то есть к примеру рисуем поиск, создаём папку кнопка и папку форма ввода, в папке кнопка создаём ещё папки с кнопкой при наведении, активной кнопкой и т.д.
Мелочи. Теперь о мелочах в макете. Зачастую весь дизайн может измениться при добавлении какой либо мелочи. Некоторые совсем их не прорисовывают, макет должен быть максимально приближен к конечному результатату. Обязательно отображайте цвета ссылок, как обычные ссылки, так и ссылки при наведении, ведь легче подобрать цвета в фотошопе чем уже потом подбирать их при вёрстке. Также используйте различные иконки, не умеете рисовать сами, подберите чтонить из интернета, но не переусердствуйте, в противном случает всё испортите и будет свалка.
Юзабилити. Про эту часть можно былобы написать ещё не одну статью, так как тема обширная и имеет свои подводные камни затрагивающие различные аспекты. Для начала что означает само понятие юзабилити в зарисовки макетов и вообще в сайтостроении, простыми словами это удобство расположения, использования элементов на странице. В понятие юзабили входят психологические факторы и факторы подсознания пользователя. То есть например если использовать яркие цвета фона то становиться неприятно находиться на сайте и пользователь немного попортя своё зрение уйдёт и больше не вернётся, аналогично с текстом на фоне картинки, так как фон отвлекает и заставляет пользователя напрягать глаза, или нестандартное расположение привычных элементов, таких как к примеру меню навигации, её отсутствие может смутить пользователя.
Шрифт Основной шрифт текста везде это Verdana ставим в фотошопе на 11px и метод сглаживания "нет", но в тексте вы можете использовать любой из стандартных шрифтов, главное чтобы он реализовывал ваши дизайнерские задумки. Посмотреть стандартные шрифты можно тут . Не нужно делать шрифт слишком большой, эта одна из основных ошибок неопытных дизайнеров.
Это основные моменты про которых я хотел рассказать, дальше необходим лишь полёт вашей фантазии для создания красивого макета. Удачи!
