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

Правило № 8. Техническое заданиеСкопировать ссылку

Перед тем как приступить к созданию макета, обязательно прочтите техническое задание: что будет на этом сайте, как он должен работать, какую именно интерактивность иметь… Если же в вашей компании экономят на техническом писателе, попытайтесь хотя бы в устной форме ознакомиться с требованиями к сайту. А то очень часто случается ситуация, когда дизайнер нарисовал красивый макет, верстальщик его заверстал, а потом оказывается, что, к примеру, настоящая флэшка, которая должна быть центральным элементом сайта, шире нарисованной на 10 пикселов. Сколько времени и сил впустую! А ещё кошмарнее, когда дизайнер не понимает, что возможно реализовать при помощи веб-технологий, а что нельзя. И в результате на свет появляются блоки с аудио-плеером, в которых по ходу прослушивания радиопередачи должен плавно пролистываться текст этой самой передачи! Нет, это, конечно, реализуемо, но такие задачи должны осмысленно закладываться в планируемое время разработки, чего обычно не происходит.

Требования к созданию макета сайта

Визуальные блоки располагаются симметрично

Представьте страницу сайта, мысленно проведите ровно посередине вертикальную линию. Блоки, расположенные слева и справа от линии, необходимо распределять равномерно.

Речь не о зеркальном отображении по размеру и расположению. Просто в целом не должно создаваться впечатление визуального перегруза на одной из сторон.

Прописываются все параметры

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

Описывается изменение элементов на разных этапах их использования

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

Блоки и иные элементы размещаются по сетке

Сетка помогает в создании макета сайта. Благодаря использованию сетки верстальщикам и дизайнерам проще выполнять свою работу, не допуская ошибок.

Повторяющиеся элементы собираются в одном файле

К примеру, какие-то иконки, буллеты, разделы меню и т. п. При создании макета сайта повторы располагаются в одном слое.

Шрифты желательно брать стандартные

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

Использовать направляющие для выравнивания объектов

В процессе создания макета сайта сохраняйте направления. Для последующих шагов по разработке сайта это необходимо.

Указывать цвет фона и ширину отступов от краев экрана

Размер страниц сайта должен быть таким, чтобы они корректно отображались на стандартных экранах. Цвет подложки указывается обязательно.

Все элементы располагать на отдельных слоях

Слои должны быть отделены друг от друга и подписаны. Это позволит любой слой удалять либо вносить в него изменения, не затрагивая другие. Удаляйте сразу скрытые слои или те, в которых ничего нет.

Нужно создать макет сайта, удобный для работы программиста

Зачем создавать макет сайта?

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

1. Заказчик может спроектировать будущий сайт. Разработкой макета часто занимается заказчик: так проще донести, каким он видит свой будущий сайт. Хорошо, что создать макет может даже не дизайнер или человек без опыта.
2. Создав макет, вы поймете как можно улучшить дизайн. Вы можете получить ценные отзывы до того, как начнется разработка сайта. Предоставить качественный макета сайта — отличный способ убедить заказчика в том, что вы точно движетесь в правильном направлении.
3. Он поможет выявить ошибки проектирования на ранней стадии. С помощью макета сайта вы сможете проанализировать, действительно ли ваш дизайн работает или нет, как с функциональной точки зрения, так и с эстетической. Вы можете изменять и улучшать до тех пор, пока вы не достигнете цели.
4. Макет — хороший способ улучшить общение с командой. Макет устранит проблему в коммуникации между разными людьми в команде (если созданием макета и разработкой сайта занимается не один человек). Полноценный макет сайта с рекомендациями по дизайну и общей структуре помогает разработчикам сразу приступить к превращению макета в полноценный сайт.

Какие бывают прототипы

Готовые прототипы сайтов делят на:

• статические — моментальный «снимок» страницы, где видно функции и основные блоки, но взаимодействовать с ними нельзя;
• динамические — интерактивная модель, прототип веб-сайта с кликабельными элементами.

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

Важно, что вы тратите время на визуализацию вашей идеи в целом, а не на проработку деталей. 

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

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

Эскиз от руки 

Эскиз — это набросок структуры сайта на бумаге или на маркерной доске. Это быстрое прототипирование сайта, при котором вы прорабатываете только крупные блоки и можете легко менять структуру. На этом этапе проще всего зарисовывать новые идеи, стирать элементы, менять их местами. Если обсуждаете прототип в офисе, удобно пользоваться маркерной доской. Создать макет сайта с командой онлайн можно в программе Balsamiq либо аналогичной ей. Онлайн скетч сайта удобно комментировать, править и обсуждать с заказчиком.

Статичный недетализированный макет

Когда структура сайта готова, приступайте к основным элементам. Определите:

1. где будет располагаться каждый объект страницы;
2. какого размера он будет;
3. как элементы будут сочетаться между собой. 

На этом этапе недостаточно нарисовать структуру сайта — ее нужно дополнить разметкой блоков, создать каркас сайта. С таким уровнем детализации будет проще оценить объем работ и количество людей на проекте.

Статичный детализированный прототип

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

Важно, чтобы контент был готов к моменту, когда вы начнете расставлять цветовые акценты и создавать настроение сайта

Интерактивная детализированная модель сайта

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

Прототип сайта на конструкторе

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

Используйте 190 готовых шаблонов нашего конструктора для вашего сайта!

Тестировать 30 дней бесплатно

Шаг 8: Создание маленьких фотографий

Делаем слой сетки видимым. Используя Rectangular Marquee Tool (M), нарисуйте выделение шириной приблизительно 4 с половиной колонок ниже основной фотографии.

Залейте его черным цветом (# 000000). Измените режим смешивания на Soft Light (Мягкий свет).

Открываем фото подсолнечника.  Поместите его на холст, а затем изменяем его размер до 80% от  первоначального размера.

Временно скрываем слой с фото. Создаем прямоугольное выделение, с помощью инструмента Rectangular Marquee Tool (M) (Прямоугольная область). На скрытом слое с фотографией нажимаем Add vector mask (Добавить векторную маску), создавая маску выбранной области. Теперь слой с фотографией делаем видимым. Это сделает видимой только выделенную часть подсолнечника.

Теперь создайте надпись для нашей маленькой фотографии. Используя Rectangular Marquee Tool (M), создайте выделение в нижней части фото и заполнить его  темно-коричневым цветом (# 261103). Измените непрозрачность этого слоя до 85%.

Используя инструмент Horizontal Type Tool (T), добавить надпись к нему (например, «природа»). Я использовал шрифт Helvetica с желтым цветом текста (# ffbf47).

Добавьте текст ниже изображения. Он будет служить описанием к фото.

Повторите те же шаги, чтобы добавить еще 2 миниатюры фотографий (можно использовать Baby и Bokeh изображения либо  некоторые из ваших собственных фотографий).

Начните с текста

Я имею в виду не только текстовые блоки. Текст везде: в меню, на кнопках, подписи к полям, подсказки в полях, подписи к картинкам, заголовки. Текст — основа вашей вёрстки. Если вы оставите параметры текста на потом, можете попасть в ловушку.

Взгляните на эти две кнопки:

Кнопки с разным интерлиньяжем

У них одинаковый шрифт, рамки и отступы. Почему они разной высоты? У них разный интерлиньяж (межстрочное расстояние, ). Если вы сначала добавите блоку отступы, а потом назначите , блок вдруг станет «не по макету», и придётся снова работать над отступами.

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

Стоит ли задавать однострочным блокам? Конечно! В разных браузерах значения по умолчанию могут быть разными, поэтому всегда выставляйте .

Как узнать параметры текста в Фотошопе

Как узнать, каким шрифтом набран текст, какого он размера и начертания? Выберите инструмент «Text» (нажмите латинскую на клавиатуре) и кликните на текст, который вас интересует. Текст выделится рамкой, а в верхней панели покажутся параметры этого текста:

Здесь видно шрифт — «Open Sans», начертание — «Regular» и размер — 18px. Если у вас не установлен шрифт из макета, то Фотошоп при клике заменит шрифт на похожий. Будьте внимательны. Перед этим он покажет предупреждение, мол, шрифта такого-то нет:

Этот шрифт из предупреждения и используйте. Если вы нажмёте «Отмену», параметры шрифта всё равно отобразятся, и шрифт не изменится. Если вы нажали «ОК» и шрифт поменялся, верните тексту прежний вид: снимите выделение, нажав , и отмените действие по ( в Mac OS).

Про межстрочное расстояние вам расскажет иконка папки на панели текста:

Она откроет окошко с параметрами текста, там и написан интерлиньяж:

Бывает, что вместо числа там написано «Auto». Как тогда узнать ? Просто измерьте от верха строчных одной строки до верха строчных следующей. Или от низа, как вам удобнее. Это и будет :

Межстрочное расстояние

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

Основные элементы макета

Рассмотрим основные элементы дизайн-макета сайта. 

Стиль

Во многом от этого будет зависеть, останется ли пользователь на сайте или уйдет. Сайт должен привлекать целевую аудиторию и соответствовать тематике.

Логотип

От логотипа во многом зависит успех компании. Логотип должен выглядеть заметно, но не отпугивать.

Структура

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

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

Элементы призыва к действию

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

Разновидности прототипов и задачи, которые они решают

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

Low-fidelity

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

• Создание прототипа сайта осуществляется вручную или с помощью графических редакторов. 
• С помощью Low-fidelity заказчик узнает общий функционал сайта, без визуализации контента. 
• Плюс такого формата в скорости создания: даже при большом количестве блоков на прототипирование сайта уходит несколько дней. Он нужен в первую очередь для оценки юзабилити будущих страниц. 

Пример макета сайта в виде скетча:

1. High-fidelity. Более функциональные прототипы лендингов или многостраничных сайтов. Позволяют представить заказчику полную визуализацию всех страниц. Схематичные квадраты заменяются на полноценные блоки с изображениями и ориентировочным контентом. Особенности:

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

Пример прототипа сайта High-fidelity, созданного в Figma:

Несмотря на то, что создание макетов сайтов занимает время (в среднем от 1 до 10 дней), оно ускоряет процесс разработки. Предварительная визуализация будущего проекта позволяет избежать ошибок и постоянных правок со стороны заказчика. Это облегчает работу back-end программистов и дизайнеров.

Задачи, которые решают прототипы:

• Ускоряют создание сайтов, т.к. у разработчиков появляется четкий план действий.
•  Облегчают взаимодействие между заказчиком и исполнителе. Клиенту проще выражать свои пожелания, проект-менеджерам формировать задачи сотрудникам.
• Позволяют реализовывать сложные и нетривиальные проекты.
• Заказчик сразу получает итоговую стоимость проекта (без последующих наценок) и сроки его реализации.

Приветствуем новых покупателей

Мы начнем наш дизайн с привлекательной верхней зоны, чтобы захватить внимание посетителя и сразу рассказать, о чем этот сайт

Шаг 1

Создайте новую группу под названием «Navigation», добавьте новую горизонтальную направляющую на 130px. Здесь будет размещен наш логотип, меню навигации и поиск. Разместите логотип слева. Если у вас его нет, просто создайте прямоугольник, а на нем напишите название сайта.

Шаг 2

Теперь напишите названия ссылок меню. Еще на этапе планирования вы должны знать, что необходимо включить в навигацию для максимального удобства посетителя. Используйте инструмент Горизонтальный текст (Horizontal Type Tool), чтобы написать названия пунктов. Разместите их рядом с логотипом, оставив достаточно свободного места.

Шаг 4

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

При помощи инструмента Прямоугольник (Rectangle Tool) нарисуйте прямоугольник размером 1400x700px (цвет не имеет значения). Разместите его прямо под навигацией (помните горизонтальную направляющую на 130px? Она как раз для этой фигуры). Затем перетяните выбранное изображение, разместив его над слоем с прямоугольником.

После этого зажмите клавишу Alt и подведите курсор к линии между слоями на панели Слоев (Layers panel). Когда вы увидите небольшую стрелку, указывающую вниз, кликните мышкой. Это создаст Обтравочную маску (Clipping Mask). Таким образом, изображение будет видно только в зоне прямоугольника.

Нажмите Ctrl + T, чтобы изменить размер изображения. При этом удерживайте нажатой клавишу Shift. Так вы сохраните пропорции во время редактирования.

Шаг 5

Чтобы наше изображение привлекало больше внимания, давайте добавим градиент, переходящий от прозрачного вверху до черного внизу. Выберите инструмент Градиент (Gradient Tool), затем настройте его так, чтобы цвет переходил от черного #000000 до прозрачного. После этого, удерживая нажатой клавишу Shift, перетяните мышку от низа до середины изображения. Затем применитеОбтравочную маску (Clipping Mask) и сократите Непрозрачность (Opacity) слоя до 50%. Переименуйте слой, назвав его «Shadow» для более простой идентификации в дальнейшем.

Шаг 6

Теперь пришло время для мощного заголовка, который привлечет внимание посетителя и заставит его узнать больше. Используйте крупный, жирный Source Sans Pro для короткого заголовка

Я выбрал Source Sans Pro (Black) размером 70px с трекингом (tracking) 160.

Шаг 7

Мы завладели вниманием посетителя, теперь нам нужно дополнительное сообщение и, что еще важнее, призыв к действию (часто называемый Call To Action — CTA). Я использовал Source Serif Pro (Regular) размером 28px для подзаголовка, а для CTA кнопки взял цвет блока поиска, чтобы сохранить общий стиль

Обратите внимание на расстояние, которое я использую. Всегда оставляйте достаточно места вокруг элементов

Благодаря этому они воспринимаются быстрее и выглядят более организовано. Также можно заметить, что текстовые слои размещены ближе друг к другу. Это сделано согласно в соответствии с принципами гештальтпсихологии.

«Согласно с законом близости, предметы, размещенные рядом друг с другом кажутся частью одной группы».

Создание и подготовка файла проекта

Для начала нужно открыть фотошоп, кликнуть в левом верхнем меню программы “Файл > Создать”. И настроить новый файл следующим образом:

1. Дать имя своему макету, у меня на примере “mysite“
2. Ширину рекомендую выбрать в зависимости от разрешения монитора минус 20px. У меня разрешение 1440х900px. А высоту сделать 1200px, при необходимости в будущем можно будет ее увеличить.
3. Единицы измерения установи в “Пикселях“. Разрешение “72” Пиксели/дюйм.
4. Жми “OK”. И сохраняй его как psd “Файл > Сохранить как…” в нужной папке.

Создай новый слой и сделай его активным. Выбери инструмент “Прямоугольник“,  установи в параметрах инструмента значение “Пиксели”  и создайте прямоугольник размером 1000х1200px (его заливка будет зависеть от того, какой цвет фона выбран основным).

Теперь слой с прямоугольником нужно разместить по центру холста. и установить направляющие по краям. Направляющие имеют полезное свойство прилипать к границам активного слоя.

Теперь нужно установить отступы внутри прямоугольника и поставить направляющие. Для этого я пользуюсь инструментом для выделения “Прямоугольная область“. А именно создаю выделенную область нужного размера, перетаскиваю ее в нужное мне место и тяну направляющую пока она ни прилипает к краю выделенной области. Обычно я устанавливаю отступы 15-20px.

Получится вот так:

Все первоначальная настройка макета окончена.

Сохрани, то что получилось “Файл -> Сохранить для Web -> PNG-24”

Теперь открой в проводнике или файловом менеджере папку с сохраненным файлом:

1. Правый клик на файле
2. В контекстном меню “Открыть с помощью”
3. Выбери браузер которым пользуетесь (у меня hrome).
4. После того как изображение откроется наведи на него курсор, он сменится на лупу с плюсиком
5. Кликни один раз для отображения изображения в полный размер.

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

Правило № 1. Макет сайта — в PSDСкопировать ссылку

Некоторые дизайнеры почему-то очень любят использовать для создания макетов Adobe Illustrator. Это очень крутая программа, но предназначение у неё совершенно иное, для верстальщика ее инструменты неудобны. В результате всё равно приходится экспортировать макет в Photoshop, что частенько сопровождается массой ошибок. Ещё одна модная нынче фишка — Fireworks. Да, это уже гораздо лучше, чем Иллюстратор, но всё равно плохо, потому что традиционно верстальщики учатся работать с Photoshop, и когда дизайнер присылает им файл в формате PNG, они просто-таки не знают, что с ним делать. Про макеты в JPG и прочих подобных форматах я вообще молчу. Да, такое тоже бывает! Фактически, формат PSD уже стал неким негласным стандартом для макетов сайтов. Так что если вы любите рисовать макеты в нестандартной программе — не поленитесь, сделайте экспорт в PSD и проверьте, чтобы ничего не сломалось. Верстальщик будет вам благодарен.

Необходимость макета сайта

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

Нередко случается, что дизайнер справился с макетом, отлично все прорисовал, но после верстки появляются проблемы:

• возникли отступы там, где их быть не должно;

• часть элементов просто исчезла;

• текст выползает из области контента.

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

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

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

• План маркетинга компании: увеличиваем прибыль компании в 2 раза
• KPI для отдела продаж: как рассчитать и внедрить
• Как получить в 3 раза больше клиентов в 2 раза дешевле

Графический редактор в процессе работы над макетом позволяет дизайнеру вносить любые изменения (выбирать шрифты, размеры и цвета кнопок и т. п.).

Резиновый (гибкий) макет сайта

Резиновый (гибкий) макет сайта — это макет, который изменяется в зависимости от ширины рабочей области окна (вкладки) браузера. Потребность в такой разметке возникла, когда у многих пользователей появились мониторы, имеющие диагональ 19″, 21″ и больше.

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

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

Пример верстки первого макета:

  <style>
  body {
    margin: 0;
  }
  .aside {
    float: left;
    width: 250px;
  }
  .main {
    margin-left: 250px;
  }
  </style>

  <div class="container">
    <aside class="aside">
      ASIDE
    </aside>
    <main class="main">
      MAIN
    </main>
  </div>
  

Пример верстки второго макета:

<style>
body {
  margin: 0;
}
.aside {
  float: left;
  width: 25%;
}
.main {
  margin-left: 25%;
}
</style>

<div class="container">
  <aside class="aside">
    ASIDE
  </aside>
  <main class="main">
    MAIN
  </main>
</div>

После десктопов начали появляться и другие электронные устройства. В настоящее время просматривать сайты можно с помощью смартфонов (размер экрана от 3″ до 6″), планшетов (от 7″ до 10″), ноутбуков (10″ и выше), десктопов (19″ и выше) и TV (32″ и выше).

Резиновый (гибкий) макет нельзя спроектировать так, чтобы он оптимально отображался на всех этих устройствах, т.к. он рассчитан на определённый диапазон или класс устройств.

Чтобы было понятно, выполним расчёты на примере вышеприведённого резинового макета. А именно вычислим ширину блоков (1 и 2), которые они будут иметь на смартфоне с горизонтальным разрешением 320рх. В первом варианте: 1 блок — 250рх, 2 блок — 70рх. Во втором: 1 блок — 80рх, 2 блок — 240рх.

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

Шаг 5: Создание меню навигации

Создайте новый слой. Используйте инструмент Horizontal Type Tool (T) (Горизонтальный текст) и введите текст с параметрами, которые представлены ниже на картинках. 

Теперь переходим к дизайну кнопок, при наведении на них.  Выберите Rounded Rectangle Tool (U)  (Прямоугольник с закругленными краями). Установите в настройках инструмента опцию Shape Layers (Слой фигуры) и Radius (Радиус) 30px.

Под слоем с текстом «Home» нарисуйте прямоугольник.

К прямоугольнику с закругленными краями применяем Color Overlay (Наложение цвета) и Inner Shadow (Внутренняя тень) в диалоговом окне Layer Style (Стиль слоя).

Для Color Overlay установите желтый цвет (# f9a81f).

Inner Shadow (Внутренняя тень). Установите черный цвет внутренней тени (# 000000).

Изменяем прозрачность слоя с прямоугольником с закругленными углами  до 30%.

В панели Layers ( Слои) выбираем слой с  прямоугольником и нажимаем на нем, при этом зажав кнопку  Ctrl / Cmd. Этим создаем область выделения вокруг прямоугольника.

На новом слое, перейдите в меню Edit> Stroke  (Редактирование t> Обводка).

Изменяем режим наложения слоя на Overlay и установливаем его непрозрачность до 18%.

Шаг 6: Добавляем раздел для фотографий

Включите слой с сеткой. Используя Rectangular Marquee Tool (M) (Прямоугольная область), нарисуйте прямоугольное выделение ниже  пунктов навигации, а затем заполните (Shift + F5) выделение черным цветом (# 000000). Убедитесь, что ширина прямоугольника занимает 14 колонок сетки макета.

Измените режим смешивания  слоя этого прямоугольника на Soft Light  (Мягкий свет).

Пришло время размещать наши фотографии. Открываем фото Sunset и перетаскиваем его в наш макет. С помощью Free Transform ( Свободное трансформирование) делаем его нужных размеров.

Временно скрываем слой с фото. Создаем прямоугольное выделение, с помощью инструмента Rectangular Marquee Tool (M) (Прямоугольная область).

На скрытом слое с фотографией нажимаем Add vector mask (Добавить векторную маску), создавая маску выбранной области. Теперь слой с фотографией делаем видимым. Можно заметить, что, если все сделано правильно, все части изображения, что лежат за пределами маскированной области, будут скрыты.

Создание дизайна левого меню сайта

Честно говоря это меню сделано в том же стиле и мало отличается от предыдущего по методу его создания поэтому весь процесс описывать не буду

Однако хочу заострить внимание на следующих моментах:

1. Разделение места при создании дизайна вопрос больной и требует особого внимания. Я для себя решил, что левое меню не должно быть больше 250 px так как большая ширина съедает место у контента. Однако все зависит от конкретного макета
2. Отступы между блоками не следует делать меньше 10 px. На мой взгляд оптимальными значениями являются 10px, 15px, 20px
3. Что бы сделать пунктирную линию в фотошопе прочитайте соответствующую статью
4. Создавая пункты меню я не делал для каждого пункта отдельный текстовый слой. Можно это сделать в одном слое начиная каждый пункт с новой строки (через ентер), а потом просто отрегулировать меж строчный интервал в окне “Символ”

Я использовал 14 размер и стандартный для Windows шрифт “Verdana”

Получилось вот такое меню:

Правило № 7. ШрифтыСкопировать ссылку

О шрифтах нужно сказать отдельно. Почему-то каждый дизайнер, купивший на Горбушке диск с двумя тысячами бесплатных шрифтов, считает своим долгом тут же эти шрифты засунуть куда только можно. Я даже не знаю, может быть, это последствия непросвещённости? Что ж, просвещаю: на компьютере пользователя, который зайдёт на ваш сайт, в 99% случаев есть только системные шрифты, и в 99.9% — это стандартные шрифты Windows. Поэтому, как ни старайся, милый сердцу маковода Lucida Grande увидит, дай бог, 1% пользователей, а все остальные всё равно увидят Arial. Конечно, в небольших объёмах оригинальные шрифты более чем уместны: это касается логотипов, статичных заголовков и прочих подобных вещей. Но фигачить напропалую весь текст на сайте каким-нибудь Neo Sans Pro, а потом ругаться, что всё не так, как на макете — подвергать себя опасности быть укушенным взбесившимся верстальщиком.

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