Как делать макеты в фотошопе. Рисуем основные блоки. Текст с приветствием

Зачем устанавливать сразу две системы на сайт? Неужели не хватит одной? Не хватит. В идеале не хватит даже двух. В чем особенности каждой из них?

«Яндекс.Метрика»

• Наличие инструмента WebVisor, который записывает видео посещения пользователем сайта. Можно посмотреть увлекательный фильм про то, как пользователи, например, пытаются найти товар. В Google Analytics такого нет.

• Пользователи «Яндекс.Метрики» отмечают более качественную визуализацию: графики и диаграммы оформлены в подходящем формате для презентаций. Полезно для маркетологов при подготовке отчетов.

• Тепловая карта кликов по страницам. Отличная штука, когда нужно понять, куда кликают пользователи. Также полезно для аргументации: очень просто доказать коллегам, что эту кнопку никто не видит, а этот баннер привлекает слишком много внимания.

Google Analytics

• E-commerce. Настраивается удобнее, чем в «Метрике», передает больше параметров. Есть расширенный E-commerce, с помощью которого можно творить чудеса оптимизации.

Управление репутаций бренда

ORM – один из самых быстро растущих сегментов digital-рынка. Стань экспертом в области управления репутацией вместе с новым курсом Skillbox и Sidorin.Lab (агентством №1 по профильному рейтингу Рувард).

3 месяца онлайн-обучения, работа с наставником, дипломная работа, трудоустройство для лучших в группе. Следующий поток обучения стартует уже 15 марта . Cossa рекомендует!

• Удобная система оповещений. Упал трафик на 20%? Конверсия подскочила в 2 раза? Google пришлет оповещения сразу на почту.

• Есть представления, которые позволяют делить данные по исполнителям: давать сеошникам для анализа только SEO-трафик, а контекстникам - только трафик рекламных кампаний. Очень полезная функция для тех, кто взаимодействует с несколькими подрядчиками и не хочет разглашать слишком много информации.

• Относительно простая интеграция с CRM. Measurement protocol позволяет интегрировать Google Analytics с чем угодно. Можно, например, подтягивать в него статус доставленных товаров; товаров, которые вернули; подтвержденных заказов и т. д. Особенно полезно тем, для кого онлайн-конверсия - первый шаг офлайн-продажи.

Словарь веб-аналитика

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

Просмотры страниц - посещения одной страницы. Сеанс и просмотр страницы почему-то часто путают, поэтому обратите внимание - это принципиально разные понятия.

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

В этом сеансе у Страницы 1 - 2 просмотра и только 1 уникальный просмотр

Входы - количество посещений вашего сайта, начавшихся с указанной страницы.

Процент выходов - процент выходов с сайта, выполненных с указанной страницы. Снова рассмотрим схему, чтобы было понятнее.

У фиолетового сеанса 3 просмотра страницы. У оранжевого сеанса 2 просмотра страницы

У страницы 1: 2 просмотра и 1 выход (закончился оранжевый сеанс) - 50% выходов

У страницы 3: 1 просмотр и 1 выход (закончился фиолетовый сеанс) - 100% выходов

Показатель отказов - это процент посещений, в ходе которых было открыто не более одной страницы, т. е. при которых посетитель покидает сайт со страницы входа. При этом посетитель не совершает никаких отслеживаемых целевых действий. Смотрим рисунок.

Смотрим еще один.

В первом случае это отказ: за сеанс была просмотрена всего одна страница. Во втором случае не отказ: было просмотрено 2 страницы. Этим отказ отличается от выхода. Не бывает отказа без выхода, но бывает выход без отказа.

Что полезно иметь в виду про показатель отказов:

1. Это не процент выходов.

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

Источник - последний ресурс, который посетил пользователь, прежде чем перейти к вашему контенту: поисковая система (например, Google) или сайт (example.com).

Канал - тип источника, например:

• organic - обычный поиск;
• cpc - поисковая реклама с оплатой за клик;
• referral - переход с веб-сайта;
• direct - прямой вход (клик из закладок или переход из адресной строки браузера).

Больше примеров источник/ каналов:

• yandex / cpc - переход по рекламе из «Яндекса»;
• (direct) / (none) - прямой заход на сайт;
• google / organic - переход из поиска Google;
• example.com / referral - переход по ссылке с сайта example.com.

Связка источник / канал формируется на основе utm-меток ссылки, эти данные можно менять. Например, если вы хотите отслеживать трафик с email-рассылок, нужно прописать в ссылке utm_source=email.

Базовые отчеты: что смотреть, как делать выводы

Как открыть Analytics и сразу определить, какие на сайте проблемы? По большому счету никак: чтобы определить, какие на сайте проблемы, потребуется серьезное исследование с тестированиями. Но можно сделать некоторые выводы и на основе стандартных отчетов.

Два самых важных отчета, которые мы рассмотрим - «Источники трафика» и «Поведение». По первому можно быстро оценить количество каналов и источников трафика, их качество. По второму - посмотреть, насколько хорошо сайт выполняет свою сайтовую функцию: какие страницы работают хорошо, какие отпугивают клиентов и т. д.

Отчеты «Источники трафика»

Вкладка «Источники трафика» > Вкладка «Весь трафик» > Вкладка «Источник/канал»

В данном разделе показывается качество трафика по каналам. Обычно всех интересуют 4 типа трафика:

• Для оценки контекста: google / cpc и yandex / cpc
• Для оценки SEO: google / organic и yandex / organic

Чтобы посмотреть трафик по выбранному каналу, необходимо поставить фильтр:

Обычно фильтр работает в таком виде, как на скриншотах. Если нет - уточните у подрядчика, что прописано в utm_medium и utm_source трафика, который он приводит. Да, можно прямо так и спросить: «Что прописано в utm_medium и utm_source трафика, который вы приводите». Ответ вводим вместо cpc или organic и получаем данные по этому трафику.

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

В таблице есть фраза «если конверсия низкая». Конверсию при настроенных целях смотрим здесь:

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

Отчеты «Поведение»

В отчетах по поведению будем смотреть, как отрабатывают страницы нашего сайта.

Вкладка «Поведение» > Меню «Контент сайта»:

• «Все страницы» - данные по пользовательским показателям по всем страницам сайта;
• «Анализ посещаемости» - то же самое, но страницы по папочкам (по структуре);
• «Страницы входа» - какую страницу открывают первой;
• «Страницы выхода» - какую страницу смотрят перед выходом с сайта.

Чтобы посмотреть статистику по выбранной странице, необходимо поставить фильтр.

В фильтр ставим кусочек URL интересующей страницы после доменного имени сайта.

Например:

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

Сегменты

Помимо общей информации, можно посмотреть качество трафика по отдельным сегментам (SEO-трафик, трафик с контекста, с рассылки и т. д.).

В этом нам помогут стандартные сегменты:

Скоро выйдет вторая часть этого материала, в которой я рассмотрю базовые настройки Google Analytics. Как понять, что-то важное не настроено? Как самому настроить некоторые цели и зачем это нужно.

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

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

Из чего состоит макет?

Подавляющее большинство веб-страниц состоит из:

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

Как создать?

Придумайте и продумайте структуру. Не лишним будет отрисовать её на листе бумаги или в самом Photoshop.

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

Определитесь, растягивающимся или фиксированным будет ваш дизайн. Шаблон фиксированного размера на всех экранах выглядит одинаково, «резиновый» же, меняя размеры, подстраивается под устройство. Если дизайн «резиновый», то необходимо определиться, чем будет заполняться фон сайта.

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

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

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

Чтобы включить линейки, либо нажмите сочетание клавиш Ctrl+R , либо выполните команду Просмотр -> Линейки главного меню программы.

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

В итоге ваш шаблон должен быть разграничен.

1. Нарисуйте макет. Добавьте графику, линии, кнопки и прочие элементы. Здесь всё индивидуально, а инструменты для работы мы рассматривали на протяжении .

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

Как разрезать

Уже готовый макет необходимо разрезать «на кусочки», чтобы использовать его элементы в дизайне сайта, часть которого будет реализована через HTML, часть - через CSS, а часть - при помощи как раз тех самых картинок, на которые макет будет разрезан. Помните об этом, когда захотите оставить несколько картинок с белым фоном, текст страницы или названия ссылок - оставлять нужно только то, что будет браться из графических файлов и не будет реализовано другими средствами.

Итак, макет готов и открыт. Будем разрезать.

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

1. Подгоните вытянутые из линеек направляющие под структурные элементы сайта. В принципе, макет можно разрезать и по ним, но в таком случае может получиться не совсем так, как нужно, поэтому будем использовать другое средство.
2. Выберите инструмент Раскройка. Он расположен на палитре в группе Рамка.

1. Чтобы отрезать кусок макета, подведите указатель к месту, откуда хотите начать, и делайте всё так, будто выделяете прямоугольную область. Вырезанная часть будет пронумерована. Синий цвет номера означает, что фрагмент активен и его можно редактировать. Части, которые программа предполагает, что вы будете разрезать, имеют номера на сером фоне. Отрезанный фрагмент выделен и имеет маркеры, благодаря которым его размер и положение можно корректировать.

1. Аналогичным образом сделайте следующий разрез, и так до тех пор, пока работа не будет завершена.
2. Когда всё сделано, сохраните результат. Для этого выполните команду Файл -> Экспортировать -> Сохранить для Web (старая версия), проверьте настройки (выберите формат, качество и т. д.), нажмите Сохранить и укажите папку, в которой будет создан каталог графических файлов.

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

Макет создан, разрезан и полностью готов.

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

Как сделать макет (мокап) флаера в фотошопе (Photoshop)

Перед тем, как приступить к работе, давайте посмотрим на примеры макетов флаеров, которые мы создавали в Adobe Photoshop .

Создание макета флаера в Photoshop — Техника

Создание макета флаера в Photoshop — Техника

1. Самое главное — продумайте, для чего вы собираетесь создавать макет (мокап ) в фотошопе: для визитной карточки, брошюры, листовки, флаера или для чего-то еще. В рамках данной статьи мы разработаем макет флаера. Создайте новый документ с размером A4 , нажмите «ОК ».

Новый документ

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

Формат A4

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

Формат A4

4. Сделайте слой Placeholder меньшим, примените эффект «Тень »:

• Режим смешивания – Нормальный;
• Непрозрачность — 100%;
• Угол — -45 градусов;
• Расстояние — 85 пикселей;
• Размер — 130 пикселей.

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

Создание макета флаера в Photoshop — Техника

5. Хорошо. Теперь согните нижний правый угол переднего слоя. Для этого выберите слой и нажмите Ctrl + T , будет активирован инструмент «Трансформация ». Далее нужно будет выбрать параметр «Деформация », размещенный в правой части меню параметров.

Параметр Деформация — Техника

Создание макета флаера в Photoshop

6. Теперь попробуйте сделать небольшую тень согнутого угла, используйте для этого инструмент «Кисть ». Затем продублируйте каждый слой и нажмите Ctrl + T , кликните по каждой копии слоя правой кнопкой мыши и выберите пункт «Отразить по вертикали », чтобы перевернуть ее. После этого переместите каждую копию ниже оригинального слоя, чтобы создать его отражение.

Отражение

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

Создание макета флаера в Photoshop — Техника

8. Теперь дважды кликните по любому из верхних слоев, в результате чего откроется новый документ. Разместите флаер в этом документе и нажмите Crtl + s , чтобы сохранить его, и вернитесь в основной документ. Вау! Попробуйте поэкспериментировать с тенями и бликами. Теперь вы знаете, как делать самые разнообразные макеты (мокапы ) в фотошопе.

Создание макета флаера в Photoshop — Техника

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

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

Ресурсы урока:

1. Набор иконок (wefunction.com)
   Альтернативный набор иконок
2. Иконка Twitter (iconeden.com)
3. Шрифт Bebas (dafont.com)

Шаг 1. Mockup

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

Шаг 2. Создаем документ.

Мы будем создавать макет сайта шириной в 960 пикселов. Для этого, создайте новый документ размером 1200х1500 пикселов. Разрешение 72 пиксела.

Так, как макет сайта будет шириной в 960 пикселов, нам нужно определить эту область, добавив направляющие. Выделите весь документ (Ctrl+A).

Перейдите в меню Выделение - Трансформировать выделенную область (Select > Transform Selection). На панели свойств в верхней части экрана установите значение ширины 960 пикселов. Это и будет рабочая область макета.

Установите направляющие точно по границам выделения.

Нам нужно создать отступ между краями рабочей области макета и областью контента, который мы добавим позже. При активном выделении документа, снова перейдите в меню Выделение - Трансформировать выделенную область (Select > Transform Selection). Уменьшите выделение по ширине до 920 пикселов. Это означает, что с каждой стороны макета будет отступ в 20 пикселов, в итоге всего это 40 пикселов.

Установите направляющие по новому выделению:

Шаг 3. Создаем шапку сайта.

Переходим к созданию шапки сайта. Создайте выделение высотой в 465 пикселов в верхней части макета.

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

К шапке добавим градиентную заливку через стиль слоя Наложение градиента (Gradient Overlay). Создайте градиент из двух цветов.

Теперь шапка будет выглядеть так:

К шапке теперь нужно добавить подсветку. Создайте новый слой (Ctrl + Alt + Shift + N) и выберите мягкую кисть размером 600 пикселов. Выберите цвет #19535a и кистью кликните один раз в верхней центральной части шапки.

Создайте на шапке выделение в 110 пикселов.

Нажмите клавишу Delete , чтобы удалить выделенную часть.

Слой с подсветкой сожмите по вертикали (Ctrl + T) .

Нужно убедиться, что световое пятно на шапке находится ровно по центру. Для этого, сделайте активными слои с шапкой и подсветкой и выберите инструмент Перемещение (Move Tool) (V). На панели свойств в верхней части экрана нажмите кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Создайте новый слой (Shift + Ctrl + N) и нарисуйте инструментом Карандаш (Pencil Tool) точку, размером в 1 пиксел. Для рисования используйте цвет #01bfd2.

Сгладим края этого слоя, используя градиентную маску. Выберите инструмент Градиент (Gradient Tool) и создайте градиент, как показано ниже:

Примените новый слой с маской, которую залейте только что созданным градиентом.

Шаг 4. Создаем узор

Теперь создадим простой узор, который добавим к шапке. Инструментом Карандаш (Pencil Tool) размером в 2 пиксела нарисуйте две точки, как показано на рисунке. Отключите на время видимость фонового слоя (кликните по иконке глаза около фонового слоя) и создайте узор (Редактирование - Определить узор) (Edit > Define Pattern):

Создайте новый слой (Shift + Ctrl + N) и поместите его под слой с подсветкой. Выделите область, к которой Вы хотите применить узор и откройте окно Выполнить заливку (Fill) (Shift + F5). Нажмите ОК.

После добавления текстуры шапка выглядит так:

Сделайте плавный переход от узора к шапке: к слою с узором добавьте маску и мягкой кистью белого цвета (#ffffff) с непрозрачностью 60% пройдитесь по маске.

Результат:

Шаг 5. Добавляем логотип

Переходим к добавлению логотипа. Выберите мягкую кисть с цветом #19535a и нарисуйте пятно.

Напишите текст:

К слою с логотипом добавьте стиль слоя Тень (Drop Shadow).

Шаг 6. Навигация

Добавьте текст для навигации.

Нарисуйте кнопку навигации, используя инструмент (Rectangular Marquee Tool). Залейте выделение любым цветом и уменьшите параметр Заливка до нуля.

К слою с кнопкой добавьте стиль Наложение градиента (Gradient Overlay).

Шаг 7. Слайдер для контента

Создайте выделение размером 580х295 пикселов.

Залейте выделение любым оттенком серого.

Поместите изображение. Закрепите его со слоем, который создали ранее.

Теперь к слайдеру добавим эффект. Создайте новый слой (Shift + Ctrl + N) , выберите Кисть (Brush Tool) с диаметром 400 пикселов. Откройте палитру Кисть (F5) и установите те параметры, которые показаны на скриншоте:

Выберите черный цвет (#000000) и нарисуйте пятно:

Для смягчения краев примените фильтр Размытие по Гауссу (Gaussian Blur).

Выделите нижнюю половину тени и удалите (Delete) .

Поместите слой с тенью над слайдером:

Сожмите слой с тенью за средний маркер (Ctrl + T) , а затем снова отцентрируйте слой с тенью: выделите оба слоя и в панели свойств нажмите на кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Дублируйте слой с тенью (Ctrl + J) и поместите дубликат на нижний край слайдера.

Нарисуйте кнопки на слайдере, используя инструмент Прямоугольная область выделения (Rectangular Marqee Tool) . Залейте кнопки черным цветом (#000000).

Уменьшите непрозрачность слоя с кнопками до 50%.

Добавьте фигуру стрелки на кнопки слайдера:

На нижней части слайдера нарисуйте полосу и залейте ее черным цветом (#000000).

Уменьшите непрозрачность слоя с полосой до 50%.

На эту полосу добавьте описание Вашего проекта:

Шаг 8. Добавляем текст с приветствием

Напишите текст с приветствием:

Шаг 9. Завершаем работу над шапкой сайта

Мы почти закончили работу над шапкой сайта. Добавьте еле заметную тень при помощи инструмента Кисть (Brush Tool).

Оставьте между тенью и заголовком пропуск в 1 пиксел.

Создайте новый слой под слоем с шапкой (Shift + Ctrl + N) и примените к нему градиент.

Шаг 10. Добавляем кнопки для слайдера

Нарисуйте кнопки смены слайдов.

К одной кнопке добавьте стиль слоя Внутренняя тень (Inner Shadow), а затем дублируйте слой с кнопкой нужное количество раз (Ctrl + J) .

Шаг 12. Создаем разделитель для контента

Инструментом Карандаш (Pencil Tool) и нарисуйте светло-серую (#aaaaaa) линию шириной в 1 пиксел.

Добавьте к слою с линией маску и при помощи градиента сделайте плавный переход на краях.

Создадим полноценный макет дизайна сайта в Фотошопе . Начнем с макета страницы, а затем перейдем к разработке ее отдельных элементов. Результатом будет современный макет веб-страницы, готовый к верстке:

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

Перед тем, как создать сайт в Фотошопе , лучше сделать наброски основных контуров на бумаге:

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

Создавая новый документ в Adobe Photoshop , я делаю макет размером, соответствующим распространенному широкоформатному монитору, чтобы дать хорошее представление общего вида сайта:

Отмерьте направляющими ширину в 960 пикселей в центре документа и создайте базовую сетку для размещения элементов страницы:

Начнем создание дизайна сайта в Photoshop с заголовка. Сделайте выделение по всей ширине документа и залейте его белым цветом. Дважды щелкните на слое, чтобы открыть стили слоя и добавьте «Наложение градиента » (Gradient Overlay ) с вертикальным переходом от серого цвета к белому:

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

Выделив область заголовка с маской, нажмите CTRL+SHIFT+C , чтобы скопировать совмещенные данные, а затем вставьте их на новый слой. Перейдите на вкладку Фильтр > Шум > Добавить шум , чтобы создать простую текстуру, затем установите режим наложения «Умножение » и снизьте прозрачность до подходящего значения:

Далее продолжаем делать сайт в Фотошоп , вставив логотип компании и расположив его в сетке. Добавьте стиль «Наложение градиента » с настройками, соответствующими цветам заголовка, затем создайте мягкую внутреннюю тень:

Используйте инструмент «Текст » для создания меню главной навигации, задайте средне-серый цвет для шрифта, а для активной ссылки используйте немного более темный оттенок:

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

Продолжайте детализировать вводный контент, но на этот раз используйте семейства шрифта Arial или Helvetica , чтобы текст можно было поместить в html без замены изображений:

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

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

Под основным заголовком создайте другое выделение и заполните его бело-серым градиентом:

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

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

При создании сайта с нуля в Фотошопе и верстке используем инструмент «Прямоугольник со скругленными углами », чтобы нарисовать прямоугольник на боковой панели. Первоначальный цвет не имеет значения, так как мы будем менять его стиль в следующем шаге:

Дважды щелкните по слою и добавьте ряд стилей слоя, в том числе серо-белый градиент, тонкую серую обводку и мягкую внутреннюю тень:

Используйте эту боковую панель, чтобы разработать секцию Featured Project (Рекомендуемый проект ). Ее элементы могут включать в себя небольшие снимки и отрывки текста:

Нарисуйте еще один прямоугольник, чтобы использовать его как кнопку. Добавьте пару стилей слоя, таких как «Наложение градиента » и «Обводка », чтобы стиль кнопки соответствовал общей серой теме:

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

Обозначьте конец контента, нарисовав на экране область подвала. Заполните это пространство светло-серым цветом, чтобы отличить его от области основного контента:

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

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

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