Как сделать в фотошопе лендинг: Разработка дизайна посадочной страницы (Landing Page) в Photoshop для стартапа в сфере путешествий

Как сделать мокап для демонстрации сайта

Привет, друзья. Сегодня поговорим о том, как сделать мокап для демонстрации вашего landing page. Думаю, тем, кто делает посадочные страницы на постоянной основе пригодится экшен для

Photoshop, который в несколько кликов сделает из макета отличный mockup, который даже посредственный дизайн превращает в стильный и презентабельный.

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

UI100Day-01 by Arche阿北

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

Затем, запустите Photoshop и откройте 2 окна «Операции» и «Стили». Если в правом меню их нет, то можно включить. Для этого, в верхнем меню перейдите в «Окно» и поставьте галочки напротив «Стили» и «Операции». Тогда соответствующие иконки появятся на экране.

Теперь раскройте окно «Операции» и нажмите на иконку меню этого окна.

Перед вами откроется контекстное меню, в котором выбираем «Загрузить операцию».

Перейдите в папку «mockap», затем в «[экшн] — Изометрия (горизонтальная)» и выберите файл «Isometric Mock-UP».

Теперь, перейдите в «Стили» и проделайте туже операцию, только добавьте файл стилей.

Далее, как и в прошлый раз, переходим в папку «mockap», затем в «[экшн] — Изометрия (горизонтальная)» и выберите файл «Isometric_MockUP_styles».

Обратите внимание на то, что в папке есть документация в формате PDF.

Настало время для творчества. Но впереди еще несколько нюансов.

1. Экшен работает только с картинками или группами. То есть 1 картинка — 1 слой. или объединяем элементы картинки в группу.
2. Работать можно и с несколькими картинками одновременно, но все они должны быть цельным объектом и располагаться на отдельном слое либо разделены по группам.
3. Документ должен иметь разрешение 72 dpi.

Открывайте картинку в Фотошопе и давайте познакомимся с настройками.

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

Изначально картинка выглядит следующим образом:

Rexchange Currency Exchange Website
by uithemes

С этим изображением и будем работать. Давайте откроем окно экшенов и посмотрим на настройки плагина.

Если все сделали правильно, то у вас должно получиться, примерно, так:

Давайте раскроем настройки горизонтального экшена и разберемся с основными параметрами, которые можно задать. Благо, их не так и много, всего 3.

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

Я выбираю левую сторону. «ONE», «TWO» как раз и означает количество картинок в проекте. Мы договорились, что начнем, пока, только с 1.

Кликните по строке «(ONE) Image — Transform LEFT», а затем по значку «►» в нижней строке. Начнется магия, а на самом деле, работа экшена (записанного порядка действий разных команд).

Добавлю белый фон и в результате получаем такое отображение сайта:

Даже на белом фоне и в уменьшенном виде смотрится достаточно интересно. А если добавим цветной фон?

Как по мне, получилось еще интереснее. А весь процесс занял секунд 15. Вручную такая перспектива делалась бы дольше. 

https://youtu.be/mPgQFPeOny4 Демонстрация работы экшна

Но это не все настройки. Еще есть возможность изменять глубину или высоту элемента. Возьмем несколько иконок для наглядности. А заодно покажу как работать с несколькими изображениями

Создаю проект, в котором 3 слоя. На каждом слое по 1 иконке.

Убедитесь, что находитесь на первом слое и переходите в окно «Операции». Выберите пункт «(THREE) Images — Transform LEFT » и жмите «►».

Давайте теперь увеличим высоту одной из иконок. То есть сделаем цилиндр зеленой иконки чуть больше.

Для этого, убеждаемся, что находитесь на нужном слое и выбираем одну из команд «EXTRUDE ADD (+) «, например, я сделаю глубину на 30 пикселей больше.

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

Как видите, тень теперь стала намного больше и заметнее. Я не говорю, что стало лучше, просто для примера гиперболизировал результат.

Кликнув по иконке смарт-объекта можно отдельно поработать с тенью, изменить цвет, положение и т.д., но это уже детали работы с Photoshop и статья не об этом. Если возникнут вопросы, пишите в комментариях.

Еще есть настройка размытия, но я не нашел ей применения и не буду писать о ней в статье. Если кому-то интересно — попробуйте. Алгоритм работы с настройкой такой же как и выше. 

• Делаем активным нужный слой;
• находим настройку размытия;
• применяем с нужным параметром;

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

Создание дизайна Landing Page для студии разработки сайтов (Урок 2)

Всем привет.

В предыдущем уроке по созданию дизайна Landing Page для студии мы создали прототип сайта, сегодня приступим к его визуализации, то есть будем рисовать дизайн сайта.

Предыдущие уроки:

1. Создание дизайна Landing Page для студии разработки сайтов (Урок 1)
2. Создание дизайна Landing Page для студии разработки сайтов (Урок 2)

Для создания дизайна нам понадобится сетка 960 Grid System, немного модифицированная и расширенная для Bootstrap на 1140 пикселей. Это 12-ти колоночная сетка для Adobe Photoshop, так как рисовать дизайн сайта мы будем именно в этой программе: Скачать сетку

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

Echoes Slab.

Фон первого экрана

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

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

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

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

Далее нарисуем верхнюю полосу меню – это прямоугольник черного цвета, высотой 60 пикс, непрозрачность слоя – 85%:

Логотип

Напишем шрифтом Echoes Slab логотип – MyStudio, размером 24 пикс, белым цветом. Оставив справа от сетки немного место для графического элемента логотипа.

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

Откроем его в Inkscape и векторизируем растр (Объект > Векторизировать растр):

У меня получился такой png патч, можете скачать его, минуя работу в Inkscape:

Экспортируем наш векторизированный бриллиант в png и вставим в наш макет в фотошопе.

Уменьшим до необходимых размеров и наложим красный цвет — #ff3838:

Можно бриллианту добавить красного внешнего свечения цветом #ff0000:

Заголовки

Наш несложный логотип готов, напишем заголовки у первого экрана, см. наш прототип из первого урока. Размер заголовка – 50 пикс, размер подзаголовка – 20 пикс. Цвет заголовка — #ffffff, цвет подзаголовка – возьмем пипеткой с фона и осветлим:

Отлично, но мы забыли меню и телефон из прототипа. Их мы напишем шрифтом Exo 2 Light, его также можно взять на сайте Fonts4Web.ru. Цвет – белый, подчеркивание активного пункта и пункта при наведении мышью сделам красным, взяв цвет из логотипа – простоя однопиксельный прямоугольник. Размер меню – 16 пикс. Меню делаем по сетке – 4, 5, 6, 7 ,8 и 9-я колонки:

И напишем телефон в последних трех колонках сетки, также белым цветом, шрифт Exo 2 Regular, размер 22 пикс. Под телефоном – более мелким шрифтом напишем «Заказать звонок»:

Далее по прототипу у нас слайдер с последними работами. Нарисуем по сетке 4 прямоугольника черного цвета с непрозрачностью 25%. Хоть в прототипе мы нарисовали 3, но в данной сетке можно разместить и 4:

Оставим по одной колонке сетки по краям для навигации по слайдеру.

Заполним элементы слайдера логотипами крутых компаний, я выбрал эти для примера:

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

Добавим навигацию слайдера. Для этого по крайним колонкам разместим стрелки. Их можно взять, например, из шрифта Ruslan Display. Размер стрелок 60 пикс, непрозрачность 25%.

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

Отлично. Можно, конечно еще поработать, сделать что-нибудь интересное, наложить какой-нибудь паттерн на фон шапки, но этого, думаю, будет достаточно.

Результат выполнения урока:

Премиум уроки от WebDesign Master

Создание сайта от А до Я. Комплексный курс

Создание современного интернет-магазина от А до Я

Я — фрилансер! Базовый курс для начинающих

Другие уроки по теме «Веб-дизайн»

• Создание дизайна сайта в Figma на реальном примере. Материалы урока
• Создание Bootstrap-сетки в Figma
• С чего начать работу над дизайном и где брать вдохновение
• Процесс создания дизайна сайта салона красоты. Мастер веб-дизайна #7
• Мастер веб-дизайна #5: Создание дизайна сайта пиццерии
• Как стать крутым веб-дизайнером? Все по полочкам: UI/UX, Wireframing, правила хорошего тона, организация работы, верстка, самообучение

Сделать красивую целевую страницу | Photoshop

Tutorial Preview

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

 

 

Учебные ресурсы

Ссылка для скачивания	Тип	Автор
960 Решетка	ПСД	Натан Смит
Источник Санс Про	Шрифт	Пол Д. Хант
Иконы импрессионистов	Иконки	Дизайнмодо
Невис	Шрифт	Десять на двадцать
Бебас Нойе	Шрифт	Тип Дхармы

Шаг 1: Базовая настройка документа Photoshop

Для этой целевой страницы мы будем полагаться на систему сетки. Мы можем использовать популярную систему сетки 960.

Это поможет нам легче выровнять элементы веб-дизайна.

Загрузите ZIP-файл 960 Grid System с официального сайта проекта, извлеките его содержимое, а затем откройте PSD-файл Photoshop с 12 столбцами. Файл называется 960_grid_12_col.psd. Файл находится в папке templates\photoshop .

Давайте изменим ширину и высоту холста PSD, чтобы у нас было немного больше места для работы. Перейдите в Изображение > Размер холста и установите W idth на 1200 px 9.0080 и H восемь до 133 0px.

Оставьте около 245px от верхней части макета для нашего основного изображения заголовка.

Придайте серый цвет ( #f0f0f0 ) оставшемуся пространству макета.

Это можно сделать разными способами. Мой способ — использовать инструмент «Прямоугольник». Выберите инструмент «Прямоугольник» на панели «Инструменты».

Убедитесь, что на панели параметров выбран параметр Слои формы , и установите значение Цвет Вариант желаемого цвета: #f0f0f0 . Нарисуйте прямоугольник, покрывающий весь холст , за исключением верхних 245 пикселей холста. Переименуйте слой на что-то вроде «база».

Шаг 2: Изображение заголовка

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

Придадим фотографии эффект размытия.

Есть несколько способов сделать это, но мы остановимся на самом простом: Перейдите к Фильтр > Размытие > Фильтр Гаусса. Установите для параметра Радиус значение 4.0px .

Шаг 3: Верхняя панель навигации

Инструментом «Прямоугольник» (M) создайте горизонтальную прямоугольную полосу на самом верхнем краю холста высотой 20 пикселей, занимающую всю ширину. вашего холста.

Задайте слою Непрозрачность из 2 5% — так мы получим полупрозрачную полосу вверху.

Переключитесь на инструмент Horizontal Type Tool (T).

Мы будем использовать шрифт Source Sans Pro, который можно бесплатно загрузить с сайта Google Web Fonts.

На панели параметров вы можете настроить инструмент Horizontal Type Tool следующим образом:

• семейство шрифтов : Source Sans Pro
• стиль шрифта : полужирный
• размер шрифта : 16px
• цвет текста: #aed572 (зеленый цвет)

Используйте инструмент «Горизонтальный текст», чтобы записать номер телефона и вымышленный адрес электронной почты или любой текст, который вы хотели бы использовать.

Я также буду использовать несколько симпатичных иконок, которые я получил из набора иконок Impressionist UI. Вы также можете предпочесть использовать бесплатный набор значков, так что действуйте и делайте то, что вам подходит.

Я установлю для значков белый цвет, #ffffff.

После того, как текст и значки расставлены по порядку, примените к ним эффект слоя Drop Shadow . Шаг 4. Логотип в форме ленты Эти направляющие помогут нам выровнять элементы на холсте, включая логотип в форме зеленой ленты, который мы создадим на этом этапе.

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

Придайте фигуре светло-зеленый цвет (#79b02f).

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

Начните с добавления света 9Эффект слоя 0085 Inner Shadow с непрозрачностью , установленной на 35%.

Мы также добавим немного глубины основе логотипа, применив эффект слоя Bevel and Emboss . Установите параметр Opacity на 0% для параметра Highlight Mode (потому что нам не нужен эффект выделения) и установите параметр Opacity для параметра Shading Mode на 15% .

Мы также добавим к фигуре мягкий эффект слоя Gradient Overlay .

Мне нравится, как установка режима наложения на Soft Light и использование Opacity около 50% выглядит для этой конкретной формы.

Затем мы воспользуемся эффектом слоя Pattern Overlay , чтобы применить интересный узор к основе логотипа. Я нашел и установил шаблон Photoshop для использования в нашем логотипе (прочитайте Photoshop Patterns: Ultimate Guide от Design Instruct, чтобы узнать больше о шаблонах Photoshop), но выберите любой шаблон, который вам нравится, если он имеет интересную форму и ненавязчив.

Вы можете найти множество бесплатных шаблонов Photoshop на этом веб-сайте: thinpatterns.com.

Я установил параметр Opacity эффекта слоя Pattern Overlay на 5% .

Теперь напечатайте текст поверх основы логотипа с помощью Horizontal Type Tool. Я использовал бесплатный шрифт Nevis со стилем шрифта , установленным на Bold , и размером шрифта , установленным на 36px , чтобы написать две буквы — «DM» .

После этого я применил к текстовому слою эффект слоя Drop Shadow .

Шаг 5: Заголовки в заголовке

Я использую шрифт Source Sans Pro со стилем шрифта , установленным на Bold , чтобы написать заголовки.

Большой заголовок использует 24p t размер шрифта , а меньший заголовок под большим заголовком имеет размер 18 pt размер шрифта .

Я применил к заголовкам эффект слоя Drop Shadow .

Шаг 6: Графика с кругами

Давайте создадим графику с кругами, которая находится под заголовками. Он состоит из двух кругов одинакового размера и большего в центре, соединенных линией шириной 5 пикселей.

Используйте инструмент «Эллипс», чтобы создать круги, а затем инструмент «Линия» с параметром Weight , установленным на 5px , чтобы создать линию 5px, которая проходит через них.

Используя шрифт Bebas Neue, я поместил несколько случайных текстов и расположил их по центру внутри каждого круга. Увеличьте размер шрифта в среднем круге примерно на +10pt.

Шаг 7: Основная кнопка призыва к действию

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

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

На панели параметров убедитесь, что Слои формы выбран параметр, параметр Радиус установлен на 3px , а параметр Цвет установлен на светло-зеленый цвет, #96c64f .

Затем создайте фигуру размером примерно 7 пикселей шириной и высотой 35 пикселей .

Придайте фигуре эффект слоя Drop Shadow .

Также придайте фигуре эффект слоя Inner Shadow . Установите Расстояние вариант 1 px и параметр непрозрачность вариант 30%.

Добавьте эффект слоя Bevel and Emboss к кнопке призыва к действию. Он должен быть едва заметен, чтобы не переборщить с этим популярным дизайнерским эффектом.

Тем не менее, мне очень нравится добавлять глубины веб-кнопкам, и Bevel and Emboss отлично подходит для этого. Чтобы сделать эффект едва заметным и едва уловимым, установите для непрозрачность значение 9.0085 Выделите параметр Highlight Mode на 0% и установите Opacity для параметра Shadow Mode на 7%.

Давайте добавим к кнопке эффект слоя Gradient Overlay. Установите Режим наложения на Мягкий свет и Непрозрачность на 60%.

Теперь добавим кнопке текстуру шума.

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

1. Создать новый документ Photoshop (любого размера)
2. Создайте новый слой и удалите фоновый слой по умолчанию
3. Перейдите к Выберите > Все (при этом вокруг холста будет выделена область выделения), чтобы выбрать весь холст
4. Выберите Edit > Fill , чтобы заполнить слой
5. Отмените выбор, перейдя к Выбрать > Отменить выбор
6. Примените очень заметный шумовой фильтр к слою, перейдя на Фильтр > Шум > Добавить шум
7. Снова выберите весь холст ( Select > All )
8. Перейдите к Редактировать > D efine Шаблон и сохраните шаблон

Теперь вы создали собственный шаблон Photoshop.

Затем вернитесь к основному документу Photoshop и примените к веб-кнопке эффект слоя Pattern Overlay , используя только что созданный шаблон Photoshop.

Давайте добавим этой веб-кнопке эффект слоя Stroke . Мы дадим ему темно-зеленую обводку.

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

Теперь мы создадим небольшую фигуру, которая будет разделителем между иконкой и текстом кнопки. Чтобы создать это, используйте инструмент Line Tool, чтобы создать вертикальную линию высотой около 10 px . Применить Градиент Наложение Эффект слоя на вертикальной линии.

Используйте тот же шрифт, который мы использовали в текстах заголовков ( Nevis ), чтобы напечатать текст на веб-кнопке.

Я просто записал фразу, Загрузите сейчас.

Придайте тексту темно-зеленый цвет ( # 4d7500 ) и примените эффект Drop Shadow с цветом тени , установленным на белый ( #ffffff ) и O количество на 30%.

Шаг 8. Значок облака (для основной кнопки призыва к действию)

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

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

Сначала используйте инструмент Elipse Tool, чтобы создать от 4 до 5 кругов. Удерживая нажатой клавишу Shift, рисуйте круги, чтобы в итоге у вас была только одна фигура и один слой вместо 4–5 фигур, разделенных на 4–5 слоев.

Теперь установите параметр Fill слоя значка облака на 0% — вы можете сделать это на панели «Слои».

После этого примените к слою эффект слоя Stroke , чтобы придать значку облака темно-зеленую обводку размером 2 пикселя.

Шаг 9: Форма ленты рядом с основной кнопкой призыва к действию

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

Уменьшить Непрозрачность Параметр светло-зеленой формы, чтобы часть фоновой фотографии была видна.

Введите какой-нибудь текст поверх него.

Я набрал «100% бесплатно».

Шаг 10: Раздел «Избранное»

Давайте поработаем над разделом «Избранное».

Инструментом «Прямоугольник» (U) создайте фигуру шириной 220 пикселей и высотой 214 пикселей .

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

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

Используйте Horizontal Type Tool (T) со шрифтом Source Sans Pro, чтобы придать нашему заголовку темно-серый цвет ( #262626 ) и светло-серый цвет для текста ( #9c9c9c ).

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

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

И зеленый такой же, как цвет нижних полос.

Сделайте акцент на последней части («Свяжитесь с нами»), потому что это будет гиперссылка. На панели «Персонаж» (если вы не можете найти панель «Персонаж», перейдите к пункту 9).0085 Окно > Символ ), используйте параметр подчеркивания , чтобы поместить подчеркивание под текстом «Свяжитесь с нами».

Примените к тексту эффект слоя Drop Shadow .

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

Тогда поставьте 9Эффект слоя 0085 Drop Shadow с зеленым цветом показан на следующем изображении.

Шаг 11: Нижний колонтитул

Инструментом «Прямоугольник» (U) создайте фигуру шириной 1200 пикселей и высотой 280 пикселей . Залейте его светло-серым цветом ( #d0d0d0 ). Это будет фон для нашего футера.

Используйте Horizontal Type Tool (T) и тот же шрифт, что и раньше, чтобы ввести текст заголовка, как на следующем изображении.

Мы разделим нижний колонтитул на три части, и у каждой части будет заголовок. Как показано ниже, заголовок первого раздела — « Подробнее о нас ». Мы применим эффект слоя Drop Shadow к текстам заголовков с Opacity , установленным на 1%.

Используйте тот же шрифт, чтобы написать абзац фиктивного текста. Сделайте этот текст светлее ( #7a7a7a ).

Инструментом «Линия» (U) создайте простую серую линию, которая будет разделительной линией для каждой секции.

Следующим разделом нижнего колонтитула нашего веб-дизайна будет раздел «Информационный бюллетень » .

Создайте поле ввода текста информационного бюллетеня, используя инструмент Rounded Rectangle Tool (U) с радиусом из 3px. Придайте фону бюллетеня очень светло-серый цвет ( #f5f5f5 ). Придайте ему тонкий эффект Drop Shadow . Придайте фигуре очень тонкий эффект слоя 1px Stroke .

Используйте Horizontal Type Tool (T), чтобы ввести текст в форму.

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

Краткое содержание руководства

В этом учебном пособии по веб-дизайну мы создали простой и удобный макет целевой страницы с помощью Photoshop.

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

Вот наш окончательный результат:

Дополнительные ресурсы, связанные с целевыми страницами

• 30 красивых целевых страниц, оптимизированных для преобразования посетителей в пользователей
• Визуальное вдохновение: 30 красивых дизайнов сайтов веб-приложений
• 40 бесплатных загрузок Высококачественные веб-кнопки в формате PSD

Загрузить исходные файлы

• landing_page_photoshop (ZIP, 2,07 МБ)

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

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

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

Необходимые ресурсы

iPhone 4s Vector
Обои Candy Blur
Веб-иконки

Шаг 1. Новый холст

Прежде чем мы начнем работать над нашим дизайном, нам нужно создать новый документ. Перейдите в меню «Файл» > «Создать» или нажмите Ctrl + N, задайте размер холста 1200 x 800 пикселей и нажмите «ОК».

Шаг 2. Заливка фона

Создайте новый слой, чтобы добавить цвет фона. Измените цвет переднего плана на #179b84 и заполните пустой слой.

Шаг 3. Направляющие

Нам нужно создать некоторые направляющие, чтобы отметить, что сюда пойдет наш контент. Чтобы создать свои рекомендации, вам нужно перейти в «Просмотр»> «Новое руководство». Следуйте изображениям ниже, чтобы настроить рекомендации.

Для заголовка:

Для содержания:

Для нижнего колонтитула:

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

Шаг 4. Заголовок

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

Шаг 5 Нижний колонтитул

Затем создайте еще один слой, это будет нижний колонтитул. Теперь, используя тот же цвет на шаге 4, используйте инструмент Rectangular Marquee Tool, чтобы выбрать раздел нижнего колонтитула и заполнить его. 0759

Шаг 6 Основное содержание Обои

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

После того, как он открыт, перейдите в Filter > Pixelate > Crystallize и установите размер ячейки 113, затем нажмите OK.

Убедившись, что цвет переднего плана #2d473f, а цвет фона #179b84, перейдите в меню «Параметры наложения». Установите флажок Gradient Overlay и измените настройки, чтобы они соответствовали тем, что на изображении ниже.

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

Шаг 7 iPhone

Откройте вектор iPhone 4s и вставьте его на холст. Вы заметите, что он большой, поэтому вам нужно будет уменьшить его с помощью инструмента «Трансформация» или Ctrl + T. Переместите iPhone к левой стороне экрана в поле основного содержимого.

Дублируйте iPhone, немного уменьшите его размер и переместите за исходный слой iPhone.

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

Шаг 8 Баннер с лентой

Чтобы начать работу с нашим баннером, нам нужно сначала создать новый слой под нашими двумя iPhone. Затем используйте инструмент Rectangular Marquee Tool, чтобы создать длинный тонкий баннер в середине основного блока содержимого. Заполните его #ffb72d.

Шаг 9Деформация ленты

Мы хотим добавить изгиб нашей ленте, поэтому нам нужно деформировать ее, выбрав Edit > Transform > Warp. Манипулируйте точками, чтобы у вас было что-то похожее на это. Нажмите Enter, чтобы эффекты вступили в силу.

Шаг 10 Заголовок заголовка

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

Шаг 11 Логотип

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

Шаг 12. Кнопки

Успешные целевые страницы имеют кнопки призыва к действию или призывы к действию, поэтому мы собираемся их создать. С помощью инструмента «Прямоугольник со скругленными углами» мы создадим две кнопки под лентой в нашем поле содержимого. Убедитесь, что радиус равен 20px, а одна кнопка имеет #ffb82d, а другая — #2d473f.

Шаг 13 Параметры наложения

Чтобы выделить кнопки, мы добавим к ним эффекты. Откройте меню «Параметры наложения» для одной из кнопок, дважды щелкнув ее или щелкнув правой кнопкой мыши. Установите флажки для Gradient Overlay и Inner Shadow. Измените настройки так, чтобы они соответствовали изображениям ниже.

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

Шаг 14 Веб-иконки

Помимо текста, мы хотим добавить к нашим кнопкам значки. Для этого вам нужно сначала загрузить PSD-файл веб-иконок, а затем открыть его. Мы будем использовать значок «тележка» и значок «телефон». Разместите эти значки слева от кнопки.

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

Шаг 15 Текст кнопки

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

Чтобы придать кнопкам эффектность, я добавил тень.

Шаг 16 Текстовое содержимое

Теперь нам нужно поместить текст в наше меньшее поле содержимого, но сначала нам нужна направляющая, чтобы убедиться, что все ровно. Перейдите в «Вид» > «Новая направляющая», затем установите флажок «Горизонтально» и установите положение 600 пикселей.

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