Как сделать лендинг в фотошопе
Как создать прототип Landing Page в фотошопе
Хотите брать за текст фиксированную сумму от 2000 рублей? Создавайте прототипы. Как это делать? Сейчас научу.
Умение создавать прототипы продающих страниц гарантированно повышает цену вашего текста. Работа получается более наглядной и убедительной. Сегодня я рассажу вам, как сделать прототип для Landing Page в одном из самых популярных графических редакторов.
Прототипы создаются не только для сайтов, но и для листовок, продающих писем, коммерческих предложений и даже ресторанных меню.
Чем полезен прототип
Для вас:
Для клиента:
Как вы уже поняли, прототип имеет целый вагон преимуществ. Итак, давайте сделаем его.
Этап№1: Ставим фотошоп
Я пользуюсь версией Photoshop CC 2014. Вы можете скачать программу с официального сайта Adobe, оплатив лицензию. Или схитрить. В сети есть множество способов обойти защиту продукта, и установить фотошоп на компьютер без покупки прав.
Поищите установочник фотошопа на торрентах. Обычно вместе с ним дается подробное руководство по установке этой замечательной программы. И да, я вам ничего не говорил.
Этап№2: Создаем новый документ
Чему будет посвящен наш новый лендинг? Давайте прорекламируем бордель и назовем его, пожалуй, «Клубника». Думаю, получится весело. Погнали.
Представим, что текст уже написан и ждет своего часа. Открываем фотошоп. Чаще всего попадается англоязычная версия, но к ней достаточно быстро привыкаешь, поэтому не стоит пугаться.
Жмем в левом верхнем углу кнопочку File и выбираем New (новый документ).
Создаем новый файл
Затем появляется блок с параметрами документа. Здесь указываем Name – имя и размеры в пикселях – width 1000 px (ширина); height 4000 px (высота). Цвет фона документа background contents – выбираем белый white. Нажимаем OK.
Задаем размеры и цвет фона (лучше белый)
Появляется новый документ.
Новый пустой документ создан
Переносим его в рабочую зону.
Переносим документ в рабочую зону
Если слои спрятаны, то откроем их: window (окно), а затем layers (слои). Ещё проще – F7.
Включаем отображение инструмента «Слои»
Этап№3: Заголовок и цветовая схема
Сейчас нам нужна шапка документа, значит, немного увеличим его сочетанием клавиш Ctrl + (для уменьшения используем Ctrl —).
Изменяем масштаб с помощью Ctrl + или Ctrl —
Можно перемещаться по площади документа с помощью колесика мыши, но это не слишком удобно. Зажмите пробел и левой кнопкой перетаскивайте документ в нужную сторону.
Создадим новый слой вручную либо сочетанием Shift+Ctrl+N.
Создаем новый слой
Перед каждой новой операцией создавайте новый слой и подписывайте созданные объекты. Это облегчит работу. Чтобы подписать объект кликните по его названию два раза, а затем переименуйте.
Назовем слой, чтобы его было легко найти
Сделаем блок для заголовка с помощью инструмента прямоугольник.
Создаем объект «Прямоугольник»
Выбираем прямоугольник и редактируем параметры:
Убираем основной цвет fill.
Убираем основной цвет (Fill)
Выбираем цвет обводки Stroke. Что касается цветовой схемы (обводки и прямоугольников) – выбирайте подходящие цвета, например, желтый и серый. Используйте только оттенки этих цветов во всех своих прототипах. Таким образом, ваш стиль будет прослеживаться в каждой работе. Здесь я выберу оранжевый.
Задаем цвет обводки (Stroke)
Ставим толщину обводки 4px.
Указываем толщину рамки
Рисуем сам прямоугольник
Выбираем инструмент текст (клавиша T). Жмем на область прямоугольника и вставляем или вписываем руками текст заголовка. Редактируем по размеру. Вы можете прописать текст уже на новом слое сверху и подогнать под размер прямоугольника.
Выбираем инструмент «Текст»
Ставим размер текста 48px.
Задаем нужный размер текста
Редактируем заголовок. Выделяйте части текста, которые нужно изменить, выбирайте нужный размер и стиль.
Пишем и редактируем заголовок
Создаем новый слой Shift+Ctrl+N. Рисуем блоки, где будут размещены фотографии нашего «продукта» (серые прямоугольники).
Указываем, где нужно разместить фотографии
Нам понадобятся три одинаковых прямоугольника, поэтому копируем ещё два. Нажмите клавишу V, чтобы сбросить режим «Прямоугольник». Наведите мышь на фигуру, зажмите Alt и левой кнопкой мыши уводите готовую копию вправо.
Копируем прямоугольники
Выравниваем фигуры и подписываем с помощью инструмента текст.
Добавляем надписи на новые объекты
Пользуясь теми же инструментами, добавляем ещё несколько деталей: меню, лого и т.д. Далее поколдуйте самостоятельно, когда сделаете всё необходимое, сохраните проект в формате PSD, чтобы можно было в любое время отредактировать его (File, Save As сохранить как или командой Shift+Ctrl+S). Конечный вариант (который отправляем клиенту) сохраним в PDF.
Начало прототипа готово
Как двигать сразу несколько объектов
Зажимаем Ctrl и выбираем объекты.
Кликаем по объектам с зажатой клавишей Ctrl
Нажимаем клавишу V, двигаем объекты в нужном направлении.
Перемещаем выделенные объекты
Сочетание Ctrl+Z отменит любое ваше действие, например, перемещение.
Как группировать объекты
Зажимаем Ctrl, выделяем объекты, нажимаем сочетание Ctrl+G – объекты перемещаются в папку.
Выделяем нужные объекты и нажимаем Ctrl + G
Меняем название папки
Меняем название папки,в которой лежат объекты
Выделив папку, вы можете перемещать все объекты группы одновременно.
Если вы хотите изменить размеры объекта или группы объектов, то пользуйтесь сочетанием Ctrl+T. Чтобы увеличение было пропорциональным, зажмите клавишу Shift.
Как добавить свои комментарии к прототипу
Создадим новый слой. Для комментариев воспользуемся прямоугольниками с красной обводкой и серым фоном. Определим для них отельную группу.
Пишем комментарии для дизайнера или заказчика
Чтобы сохранить прототип без комментариев, просто отключите их видимость – нажмите на «глаз» слева от значка группы.
Отключаем отображение комментариев
Так же можно отключать отображение всех остальных объектов и групп.
Размеры составляющих прототипа, а также их расположение могут быть совершенно разными. Здесь нет каких-то стандартов и ограничений, ведь каждый проект имеет уникальную структуру в зависимости от назначения.
Как вывести фигуру или текст на передний план
К примеру, если вы хотите что-то написать сверху прямоугольника, то нужно сделать так, чтобы текст располагался выше него в списке. Это делается просто.
Прямоугольник закрывает текст
Наводим на изображение текста в списке и зажатой левой кнопкой мыши перетаскиваем его наверх, вот так:
Перетаскиваем слой на позицию повыше
Теперь текст отображается поверх прямоугольника
Оставляю вам ссылку на psd-файл с сегодняшним уроком для более детального изучения.
Как только вы научитесь создавать прототипы, ценник ваших текстов заметно вырастет. А потому не тратьте драгоценное время – сделайте свой первый прототип прямо сейчас.
Если у вас остались вопросы по созданию прототипов в adobe Photoshop, то пишите их в комментариях к статье. Постараюсь всем ответить.
Разработка дизайна посадочной страницы (Landing Page) в Photoshop для стартапа в сфере путешествий
В этом руководстве я буду использовать Photoshop CS6 для создания простого, где не будет ничего лишнего, макета посадочной страницы для вымышленного стартапа из сферы туризма. Во время работы мы рассмотрим процесс создания сетки макета с помощью направляющих, принципы стилизации текста, в сочетании с большим количеством свободного пространства и создания контента для нашего сайта с очень ясным и качественным содержанием. В конце работы наш PSD файл будет готов перейти в руки умелых разработчиков для его вёрстки.
Материалы урока.
Во время прохождения этого урока вам понадобятся следующие материалы:
Подготовка документа
Шаг 1
Для начала создадим новый документ File (Файл) > New (Создать) используя настройки, показанные ниже:
Убедитесь, что для поля Resolution (Разрешение) установлено значение 72 pixels/inch (пиксель/дюйм)
Шаг 2
Теперь давайте установим несколько направляющих, чтобы наш макет имел достаточно свободного пространства и выглядел сбалансированным. Я редко пользуюсь готовыми сетками, но установка нескольких направляющих обеспечивает пиксельную точность при создании макета и помогает установить ширину для нашего макета веб-сайта. Разделяя рабочую область на две части вертикальной направляющей, мы получаем центр для нашей композиции. В верхней панели меню пройдите в View (Просмотр) > New guide (Новая направляющая) и установите нескольконаправляющих. Обычно в качестве ширины сайта я использую значение в 1000px и добавляю направляющие от краёв макета, создавая таким образом достаточное пространство для творчества.
Примечание: значения для направляющих для нашего макета: 200рх, 260рх, 700рх, 1140рх, и 1200рх.
Совет: Также вы можете воспользоваться плагином GuideGuide что выполнять эту работу еще быстрее.
Шаг 3
Мы будем соблюдать организованный порядок внутри нашего рабочего документа, поэтому давайте создадим несколько групп для наших слоёв и назовем их Header, Features, Social Proof, Final CTA и Footer. Придерживаясь этого Photoshop этикета вы будете иметь организованно сложенный и легкий для навигации список ваших слоев. Чтобы создать группы слоёв пройдите в Layer (Слой) > New (Новый) > Group (Группа) и дайте новым группам вышеупомянутые названия. Для более быстрого создания групп просто нажмите на эту иконку:
Дизайн области Header (хедера)
Хедер является очень важной частью каждого сайта так как информация на нём даёт возможность убедить нового посетителя, что ваш сайт заслуживает внимания и остаться на нём. Дизайнеру необходимо использовать впечатляющие изображения с ясным содержанием, с возможностью совершить какое-либо действие посетителем (кнопки, формы и проч.)
Шаг 1
На клавиатуре примените сочетание клавиш Ctrl+T (CMD+T для Mac), включив режим трансформации, и измените размер фото так как вам необходимо.
Совет: удерживайте клавишу Shift что сохранять пропорции изображения.
Шаг 2
Теперь нам нужно добавить новый слой с тёмным прозрачным цветом чтобы затемнить яркие части изображения, чтобы на её фоне, в будущем размещенный текст легко различался. Создайте новый слой над слоем с изображением и, также, сделайте его обтравочной маской. После этого выполните заливку данного слоя тёмным цветом и измените значение Opacity (непрозрачность) до 20%, так мы полностью сохраняем видимость изображения.
Шаг 3
Давайте разместим в верхней части сайта простой логотип, являющийся обычным текстом. Давайте разместим в верхней части сайта простой логотип, являющийся обычным текстом. На панели инструментов выберите Horizontal Type Tool (T) и напишите название вашего стартапа, разместив его в левом верхнем углу сайта. Убедитесь чтобы ваш логотип был читаемым и имел вокруг себя достаточно свободного места. Размещение логотипа в этой части сайта является самой распространенной практикой в web-дизайне и там его ожидают увидеть сами посетители.
Я использовал шрифт Aller для логотипа и шрифт Open Sans для пунктов меню.
Шаг 4
Теперь давайте займемся основным описанием сайта, его слоганом. Вам всегда необходимо придерживаться правила для размера слогана в одно или два предложения, чтобы он был коротким и легкочитаемым. Я использовал шрифт Open Sans размером в 32px для написания слогана, делая акцент на «you travel» используя жирное начертание.
Вторая строчка слогана является более мелкой, так мы даём понять посетителям, что она имеет второстепенное значение и сначала они прочтут первый, основной слоган. Для этого текста я применил увеличенное межбуквенное расстояние и написание в верхнем регистре.
Отмечу, что я разместил наш слоган там, где он будет смотреться контрастно и легко воспринимаемым посетителями сайта.
Шаг 5
Напишите простой призыв к действию (call to action), который могут совершить ваши посетители. В моем случае это предложение для посетителей оформить подписку на новости. Для этого я использовал шрифт PT Serif (Italic) размером в 14px.
Шаг 6
Создадим простую email форму которая позволит нашим посетителям внести в неё их email адреса и подписаться на рассылку. Создайте новую группу слоев и назовите её Email form. Используйте инструмент Rounded Rectangle Tool (U) с загруглением в 3px, что создать простую белую (#FFFFFF) область для ввода текста.
Шаг 7
Добавьте подпись внутри формы для посетителей чтобы они могли понять куда нужно вводить email адрес и создайте призывающую к действию кнопку. Я использовал шрифт Open Sans (Semibold) размером в 13px серого цвета #bdbdbd для текста внутри формы и шрифт Open Sans (Bold) размером 13px белого цвета (#FFFFFF) для текста кнопки. Используйте бросающийся в глаза цвет для вашей кнопки, чтобы выделить её и привлечь внимание посетителя.
Дизайн раздела о преимуществах.
Это важная часть сайта, расположенная сразу после хедера. Если посетителя сайта заинтересовала информация из хедера он непременно будет прокручивать страницу вниз чтобы ознакомиться с деталями нашего предложения.
Шаг 1
Сверните группу слоев Header, нажав на маленькую стрелку возле названия группы. Теперь нам необходимо создать задний фон для области, где будет размещен весь контент нашего сайта. Я использовал инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами) (U) с радиусом в 5px и цветом #ffffff
Разместите ваш новый слой с изображенной фигурой над слоем с основным бэкграундом нашего макета.
Шаг 2
В группу Features добавьте несколько слоёв и напишите об особенностях вашего стартапа. В моём случае этот блок состоит из главного заголовка и двумя колонками особенностей, в которых расположен подзаголовок и небольшое описание.
Когда вы пишите привлекательное описание для вашего стартапа, старайтесь чтобы ваш текст был легко усваиваемым и не слишком длинным. Используйте различную толщину шрифта, его размер и цвет, чтобы создать визуальную и смысловую иерархию вашего текста. Очень важно делать достаточное количество отступов между словами. Для моего текста я использовал шрифт Open Sans темно-серого #545454 и светло-серого #a2a2a2 цвета.
Дизайн раздела с отзывами.
Шаг 1
Теперь разработаем дизайн для второй области нашего макета, которая должна помочь посетителям нашего сайта составить своё мнение о нас и принять верное решение. Мы изобразим данную область как две колонки с отзывами.
Шаг 2
Сверните группу слоёв Features и разверните группу слоёв Social Proof. Дайте разделу ключевой заголовок, используя те же размеры, что использовали до этого. Ключевым фактором в достижении аккуратного и привлекательного дизайна является последовательность, поэтому примененные ранее цвета и размеры применяйте для последующих аналогичных элементов.
Для нашего раздела я использовал два фиктивных отзыва от двух фиктивных людей. Для абзаца в кавычках я использовал шрифт PT Serif, для остального текст использовался ранее упомянутый Open Sans с различными значениями толщины и размерами шрифта.
Шаг 3
Как вы можете заметить, я оставил немного места перед именами наших фиктивных пользователей. Используйте сервис User Inter Faces чтобы скачать пару аватарок. После этого, на панели инструментов выберите Elipse Tool (U) и удерживая клавишу Shift изобразите ровный круг. После этого скопируйте и вставьте изображение с аватаркой над слоем с кругом и сделайте его Clipping Mask (Обтравочной маской), как делали это до этого.
Сделайте внутри группы слоёв Social Proof еще две подгруппы и разместите в них слои, соответствующие каждому отзыву, чтобы было легче ориентироваться в них.
Дизайн области финального призыва к действию
В соответствии с рекомендациями от GoodUI следует всегда повторять на странице свой главный призыв к действию, к которому вы хотите склонить своих посетителей, так посетитель, кто не может принять решение после просмотра первой страницы, может совершить это действие после просмотра остальной информации, не возвращаясь к самому потолку сайта.
Шаг 1
Давайте визуально отделим предыдущий раздел от нового раздела, используя аналогичный способ, что и в описании выше. На панели слоёв найдите слой слой с нашей линией-разделителем, выберите его и просто нажмите ctrl+j (CMD+j для Mac) чтобы скопировать его и после этого переместите нашу линию ниже под отзывы, отставит достаточно места сверху.
После этого, напишите основной заголовок для создаваемой области и небольшой подзаголовок-описание дающий больше разъяснительной информации. Как вы можете видеть, я использовал точно такие же стили для текста, которыеиспользовал для оформления предыдущей секции. Придерживайтесь того же принципа для оформления своего макета.
Шаг 2
На панели слоев откройте группу Header, найдите в ней подгруппу со слоями для формы подписки на рассылку и скопируйте её, переместив в группу Final CTA. Разместим форму под заголовком и немного модифицируем её, добавив зеленую обводку вокруг области для ввода email.
Для этого выберите слой с областью для ввода email адреса, нажмите правую кнопку мыши и выберите Blending Options (Параметры наложения). для параметра Stroke (Обводка) задайте следующие значения. Цвет я использовал такой: #51a200
Дизайн футера
Мы закончили разработку дизайна для финального призыва к действию, на панели слоев сверните группу Final CTA и раскройте группу Footer. Завершая работу над нашим макетом, давайте добавим несколько ссылок на внутренние страницы нашего сайта и под ними напишем обычный текст о копирайте. Для написания ссылок я использовал шрифт Open Sans (Semibold).
Обратите внимание на то, что текст футера размещен за пределами заднего фона для основного контента, чтобы выделить его на общем фоне. Убедитесь, чтобы отступы сверху и снизу были одинаковыми, чтобы всё выглядело аккуратно и сбалансировано.
И вот мы закончили работу над нашим макетом. Примите мои поздравления.
Заключение
В этом руководстве я продемонстрировал вам процесс создания очень простого и аккуратного макета для сайта путешествий в формате посадочной страницы, включающую в себя несколько ключевых разделов, которые привлекают внимание посетителя и побуждаютего к действию.
На выходе мы получили гармоничный и легкий дизайн макета с сильным фокусом на изображении в верхней части сайта и аккуратным и ясным текстом в теле макета. Если у вас какие-либо вопросы или советы, пожалуйста, оставляйте их в разделе с комментариями.
Дополнительные материалы
Если вы новичок в области разработки дизайна для посадочных страниц, мы рекомендуем несколько обзорных статей, которые помогут тебе быстро улучшить свои навыки:
Если вам необходима помощь в создании вашего дизайна для посадочной страницы, воспользуйтесь потрясающей коллекцией Envato Studio, в которой вы можете найти для себя что-то полезное. Вы также можете взглянуть на коллекцию шаблонов посадочных страниц в Envato Market