Тревин – старший директор по развитию бизнеса компании WebFX. Он работал над более чем 450 маркетинговыми кампаниями и занимается созданием веб-сайтов более 20 лет. Его работы были отмечены Search Engine Land, USA Today, Fast Company и Inc.
Вы можете щелкнуть изображение ниже, чтобы увидеть окончательный результат в полном размере.
| Ссылка для скачивания | Тип< /td> | Автор |
| Система сетки 960 | PSD | Натан Смит |
| Source Sans Pro | Шрифт | Paul D. Hunt |
| Значки импрессионистов | Значки | Designmodo |
| Невис | Шрифт | Ten by Twenty |
| Bebas Neue | Шрифт | Dharma Type |
< /таблица>
Шаг 1. Базовая настройка документа Photoshop
Для этой целевой страницы мы будем использовать сетку. Мы можем использовать популярную систему сетки 960. Это поможет нам легче согласовывать элементы веб-дизайна.
Загрузите ZIP-файл 960 Grid System с официального сайта проекта, извлеките его содержимое, а затем откройте PSD-файл Photoshop с 12 столбцами.
Файл называется 960_grid_12_col.psd. Файл находится в папке templates\photoshop.
Давайте изменим ширину и высоту холста PSD, чтобы у нас было немного больше места для работы. Выберите Изображение > Размер холста и установите для параметра Width значение 1200 пикселей, а для параметра Hвосемь — значение 1330 пикселей.
Оставьте примерно 245 пикселей от верхнего края макета для основного изображения заголовка.
Переименуйте слой, например, в «база».
Шаг 2. Изображение в шапке
Найдите любую большую фотографию, которую вы хотели бы использовать в качестве фона для заголовка нашей целевой страницы. Убедитесь, что выбранная вами фотография имеет размеры не менее 1200 пикселей в ширину и 245 пикселей в высоту. Возможно, вы сможете найти фотографию на веб-сайте с бесплатными фотографиями.
Поместите изображение вверху холста.
Мы придадим фотографии эффект размытия. Есть несколько способов сделать это, но мы остановимся на самом простом: перейдите в раздел Фильтр > Размытие > Фильтр Гаусса. Установить. параметр Радиус на 4,0 пикселя.
Шаг 3. Верхняя панель навигации
Используйте инструмент "Прямоугольник" (M), чтобы создать горизонтальную прямоугольную полосу на самом верхнем краю холста высотой 20 пикселей, охватывающую всю ширину холста.
Установите для слоя Непрозрачность 25 % — так мы получим полупрозрачную полосу вверху.
Переключитесь на инструмент Horizontal Type Tool (T).
Мы будем использовать шрифт Source Sans Pro, который можно бесплатно загрузить с сайта Google Web Fonts.
На панели параметров вы можете настроить инструмент Horizontal Type Tool таким образом, чтобы:
Используйте инструмент Horizontal Type Tool, чтобы записать номер телефона и вымышленный адрес электронной почты или любой текст, который вы хотите использовать.
Я также буду использовать несколько симпатичных значков, которые я взял из набора значков Impressionist UI. Вы также можете использовать бесплатный набор значков, так что действуйте и делайте то, что вам подходит.
После того, как текст и значки будут в правильном порядке, примените к ним эффект слоя Drop Shadow.
Вот предварительный просмотр нашей работы:
Шаг 4. Логотип в форме ленты
Откройте направляющие Photoshop, встроенные в PSD-файл 960 Grid System, выбрав Просмотр > Показать > Направляющие. Эти направляющие помогут нам выровнять элементы на холсте, в том числе логотип в форме зеленой ленты, который мы создадим на этом этапе.
Мы немного стилизуем нашу основу логотипа в форме ленты.
Мы сделаем это с помощью стиля слоя — одной из самых мощных и популярных функций Photoshop.
Начните с добавления светового эффекта слоя Внутренняя тень с Непрозрачностью, установленной на 35%.
Мы также добавим немного глубины основе логотипа, применив эффект слоя Bevel and Emboss. Установите параметр Непрозрачность на 0 % для параметра Режим выделения (поскольку нам не нужен эффект выделения) и установите параметр Непрозрачность для параметр Режим затенения на 15%.
Мы также добавим к фигуре мягкий эффект слоя Gradient Overlay. Мне нравится, как установка Режима наложения на Мягкий свет и использование Непрозрачности около 50% выглядит для этой конкретной формы.
Затем мы воспользуемся эффектом слоя Pattern Overlay, чтобы применить интересный узор к основе логотипа. Я нашел и установил шаблон Photoshop, чтобы использовать его для нашего логотипа (прочитайте Photoshop Patterns: Ultimate Guide от Design Instruct, чтобы узнать больше о шаблонах Photoshop), но выберите любой шаблон, который вам нравится, если он имеет интересную форму и ненавязчив.
Я установил для параметра Непрозрачность эффекта слоя Наложение узора значение 5%.
Теперь введите текст поверх основы логотипа с помощью инструмента «Горизонтальный текст».
Я использовал бесплатный шрифт Nevis с стилем шрифта, установленным на Жирный, и размером шрифта, установленным на 36 пикселей, чтобы написать две буквы — «DM».
После этого я применил к текстовому слою эффект Тень.
Шаг 5. Заголовки в шапке
Для написания заголовков я использую шрифт Source Sans Pro с стилем шрифта, установленным на Жирный. В большом заголовке используется размер шрифта 24 пт, а в заголовке меньшего размера под большим заголовком используется размер шрифта 18 пт.
Я применил к заголовкам эффект слоя Тень.
Шаг 6. Графика с кругами
Давайте создадим графическое изображение кругов под заголовками. Он состоит из двух кругов одинакового размера и большего в центре, соединенных линией шириной 5 пикселей.
Используйте инструмент "Эллипс", чтобы создать круги, а затем инструмент "Линия" с параметром Толщина, установленным на 5 пикселей, чтобы создать линию шириной 5 пикселей, проходящую через них.
Используя шрифт Bebas Neue, я поместил несколько случайных текстов и расположил их по центру внутри каждого круга. Увеличьте размер шрифта в среднем круге примерно на +10pt.
Шаг 7. Основная кнопка призыва к действию
Под изображением кругов мы создадим веб-кнопку с призывом к действию.
Затем создайте фигуру шириной около 7 пикселей и высотой 35 пикселей.
Примените к фигуре эффект слоя Тень.
Также примените к фигуре эффект слоя Внутренняя тень. Установите для параметра Расстояние значение 1 пиксель, а для параметра Непрозрачность — значение 30%.
Добавьте эффект слоя Bevel and Emboss к кнопке призыва к действию.
Он должен быть едва заметен, чтобы не переборщить с этим популярным дизайнерским эффектом. Однако мне очень нравится придавать веб-кнопкам некоторую глубину, и для этого хорошо подходит Bevel and Emboss. Чтобы сделать эффект едва заметным и тонким, установите для параметра Непрозрачность для параметра Режим выделения значение 0 % и установите Непрозрачность для параметра Теневой режим до 7%.
Добавим к кнопке эффект слоя Gradient Overlay. Установите Режим наложения на Мягкий свет и Непрозрачность на 60%.
Далее добавим кнопке текстуру шума.
Для этого существуют различные техники, но я остановлюсь на одной из самых простых: создании пользовательского шаблона в Photoshop. Я описал процесс ниже:
- Создайте новый документ Photoshop (любого размера)
- Создайте новый слой и удалите фоновый слой по умолчанию.
- Перейдите в меню Выделить > Все (при этом вокруг холста будет выделена область выделения), чтобы выделить весь холст.
- Выберите Редактировать > Заполнить, чтобы заполнить слой.
- Отмените выбор, выбрав Выбрать > Отменить выбор
- Примените к слою очень заметный фильтр "Шум", выбрав Фильтр > Шум > Добавить шум
- Снова выберите весь холст (Выделить > Все)
- Выберите Правка > ОформитьопределитьШаблон и сохранить шаблон.
Теперь вы создали собственный шаблон Photoshop.
Затем вернитесь к основному документу Photoshop и примените к веб-кнопке эффект слоя Pattern Overlay, используя только что созданный шаблон Photoshop.
Давайте применим к этой веб-кнопке эффект слоя Обводка. Мы дадим ему темно-зеленую обводку. Верхняя часть обводки вокруг нашей кнопки будет едва видна из-за фона, но вы можете заметить тонкую обводку в центре и в нижней части.
Теперь мы создадим небольшую фигуру, которая будет разделителем между значком и текстом кнопки.
Чтобы создать это, используйте инструмент "Линия", чтобы создать вертикальную линию высотой около 10 пикселей. Примените эффект слоя Градиент Наложение к вертикальной линии.
Используйте тот же шрифт, который мы использовали в текстах заголовков (Невис), чтобы напечатать текст на веб-кнопке. Я просто записал фразу «Загрузить сейчас».
Шаг 8. Значок облака (для основной кнопки призыва к действию)
Хорошо, теперь мы создадим значок облака. Вы можете пропустить этот шаг, если хотите использовать готовый значок из набора значков.
Создать значок облака относительно просто, и мы сейчас этим займемся.
Сначала с помощью инструмента "Элипс" создайте от 4 до 5 кругов. Удерживая нажатой клавишу Shift, рисуйте круги, чтобы в итоге у вас была только одна фигура и один слой вместо 4–5 фигур, разделенных на 4–5 слоев.
Теперь установите для параметра Заливка слоя значка облака значение 0 % — это можно сделать на панели «Слои».
После этого примените к слою эффект слоя Обводка, чтобы придать значку облака темно-зеленую обводку толщиной 2 пикселя.
Шаг 9. Лента рядом с основной кнопкой призыва к действию
Следуя той же технике, которую мы использовали для создания основы логотипа, создайте светло-зеленую фигуру и поместите ее за нашей кнопкой.
Уменьшите параметр Непрозрачность светло-зеленой формы, чтобы часть фоновой фотографии просвечивала.
Введите какой-нибудь текст поверх него. Я набрал «100% бесплатно».
Шаг 10. Раздел «Избранное»
Давайте поработаем над разделом «Избранное».
Используйте инструмент "Прямоугольник" (U), чтобы создать фигуру шириной 220 пикселей и высотой 214 пикселей.
Используйте значок из любого набора значков и поместите его вверху по центру прямоугольника.
Продублируйте вышеуказанную группу 3 раза, чтобы в итоге получилось 4 из них. Единственное изменение, которое мы внесем в оставшиеся 3 копии, — это используемые значки и текст заголовка.
Используйте шрифт Nevis с стилем шрифта, установленным на Жирный и размером шрифта 18pt, и напишите предложение. Используемый серый цвет такой же, как и для абзацев на предыдущих шагах.
И зеленый цвет совпадает с цветом нижних полос.
Уделите особое внимание последней части («Свяжитесь с нами»), потому что это будет гиперссылка. На панели «Символ» (если вы не можете найти панель «Символ», выберите Окно > Персонаж), используйте параметр подчеркивание, чтобы поместить подчеркивание под надписью «Свяжитесь с нами». текст.
Примените к тексту эффект слоя Тень.
Используйте тот же серый цвет, напишите абзац текста и поместите его под текст заголовка. Возьмите значок кошелька (мой я получил из пользовательского интерфейса Impressionist) из выбранного вами набора значков и придайте ему тот же цвет, что и для других значков.
Затем примените к слою эффект Drop Shadow зеленого цвета, как показано на следующем изображении.
Шаг 11. Нижний колонтитул
Используйте инструмент Horizontal Type Tool (T) и тот же шрифт, что и раньше, чтобы ввести текст заголовка, как показано на следующем изображении.
Мы разделим нижний колонтитул на три части, и у каждой части будет заголовок. Как показано ниже, заголовок первого раздела — «Подробнее о нас». Мы применим эффект слоя Тень к текстам заголовков с Непрозрачностью, установленной на 1%.
Используйте инструмент "Линия" (U), чтобы создать простую серую линию, которая будет разделительной линией для каждой секции.
Следующим разделом нижнего колонтитула нашего веб-дизайна будет раздел «Информационный бюллетень». Создайте поле ввода текста информационного бюллетеня с помощью инструмента «Прямоугольник со скругленными углами» (U) с Радиусом 3 пикселя.
Используйте инструмент Horizontal Type Tool (T), чтобы ввести текст в форму.
Наш последний раздел в нижнем колонтитуле — это раздел «Свяжитесь с нами». Это довольно просто создать, особенно если вы дошли до этого момента. Это очень похоже на другие шаги, за исключением значков (которые я взял из набора пользовательского интерфейса Impressionist) и немного более темного цвета текста для текстов электронной почты, местоположения и номера телефона.
Краткий обзор урока
В этом руководстве по веб-дизайну мы создали простой и удобный макет целевой страницы с помощью Photoshop. Мы использовали множество популярных методов для создания различных компонентов дизайна.
Факторы, улучшающие дизайн целевой страницы Photoshop
Индивидуальный дизайн
У всех наших клиентов есть индивидуальные требования. Мы начинаем с отправки брифа, который помогает нам понять видение, цели, целевую аудиторию и бренд в целом. Мы решили создать собственный каркас в Balsamiq, который затем продемонстрируем клиенту через Notable. Как только клиент доволен структурой, мы начинаем макет страницы в Photoshop.
Почему Photoshop?
Photoshop по-прежнему остается одним из лучших инструментов для работы с UI/UX. Хотя у нас есть опыт работы с Adobe XD и Sketch. Мы используем Photoshop, потому что файлы Photoshop (PSD) легко совместимы в Windows/MacOS. Мы работаем с разработчиками внутри компании и по всему миру. Предоставляя графические файлы и файлы дизайна в формате PSD, мы поддерживаем большинство сообщества.
Облако Adobe
С помощью Adobe Cloud мы можем обмениваться ресурсами, дизайном и образцами цветов с нашей командой дизайнеров. Когда все находится в облаке, проще управлять активами и при необходимости работать удаленно.
Почему бы не создавать дизайн прямо в Unbounce?
Хотя в Unbounce есть отличный редактор, простой в использовании и достаточно мощный для создания великолепных дизайнов. Мы считаем, что проще сначала все спроектировать в Photoshop, так как это дает нам полную свободу и упрощает сотрудничество с нашими клиентами на ранней стадии.
Просто нужны файлы дизайна
Если у вас есть собственная команда разработчиков и вам просто нужно разработать целевые страницы, это не проблема. Мы можем доставить PSD-файлы Photoshop вместе с инструкциями, включая используемые шрифты и стоковые изображения. Учтите, что вам нужен дизайн только тогда, когда вы обратитесь к нам.
Целевая страница имеет множество применений. От помощи в продвижении вашего последнего лид-магнита, привлечения людей к регистрации на ваш вебинар или продвижения вашего продукта или услуги; ваша целевая страница может решить успех или провал вашего запуска.
Вы можете найти множество шаблонов целевых страниц в Интернете, и в этом обзоре мы собрали лучшие бесплатные веб-шаблоны целевых страниц, которые вы можете использовать, чтобы быстро создать и запустить целевую страницу.
Неограниченное количество загрузок: шаблоны веб-сайтов, макеты мобильных приложений, наборы каркасов и наборы значков для Photoshop.
Mountain — Целевая страница стартапа (Envato Elements)
Первый шаблон в списке будет идеальным выбором для целевой страницы стартапа. Он имеет минималистичный дизайн и поставляется с четырьмя различными вариантами баннеров, а шаблон включает файлы Photoshop и HTML.
Maker — бесплатный шаблон целевой страницы в формате PSD
The Maker – это бесплатный шаблон целевой страницы Photoshop с темным и современным дизайном. Вы можете легко настроить цвета и шрифты в соответствии с вашим брендом.
Набор пользовательского интерфейса целевой страницы в Берлине (Envato Elements)
Набор пользовательского интерфейса целевой страницы в Берлине имеет чистый и уникальный дизайн. Он использует модный стиль материала и включает в себя десятки элементов дизайна и набор из 6 целевых страниц, которые ускорят процесс проектирования.
Несколько PSD-шаблонов целевых страниц
Рассмотрите этот пакет шаблонов, если вам нужны разнообразные шаблоны целевых страниц. Шаблон включает в себя несколько файлов Photoshop, которые хорошо организованы, и вы найдете шаблоны целевых страниц для продуктов, услуг, вебинаров, стартапов и многого другого.
Lander — многоцелевые HTML-шаблоны целевой страницы (Envato Elements)
Lander — это блочный HTML-шаблон целевой страницы с простым, минималистичным и современным дизайном. Блоки в этих шаблонах позволяют создавать неограниченное количество комбинаций контента, что приводит к неограниченному количеству целевых страниц.
Веб-шаблон целевой страницы инвестиций в формате PSD
Рассмотрите шаблон инвестиционной целевой страницы, если вам нужна целевая страница, предназначенная для продажи курса или программы членства. Этот шаблон отличается уникальным дизайном, полностью редактируемым в Photoshop.
Престиж — шаблон целевой страницы (Envato Elements)
Попробуйте шаблон Prestige, если вам нужен универсальный шаблон целевой страницы с чистым и современным дизайном. Шаблон очень легко настроить, и его можно использовать для продвижения веб-приложений, мобильных приложений и всех видов маркетинговых и стартап-сайтов.
Бесплатная целевая страница для туристического сайта
Этот простой и понятный шаблон целевой страницы идеально подходит, если вы хотите объявить о запуске своего нового веб-сайта. Шаблон включает файлы Photoshop, которые легко редактировать.
Moto — многоцелевой шаблон целевой страницы (Envato Elements)
Шаблон Moto имеет 12 различных версий и может использоваться для любого типа целевой страницы. Вы можете легко отредактировать файлы HTML и CSS, чтобы настроить этот шаблон и отразить в нем свой бренд.
Бесплатный PSD-шаблон целевой страницы для консультанта по недвижимости
Агенты и агентства по недвижимости могут использовать этот бесплатный шаблон целевой страницы, разработанный в Adobe Photoshop. Шаблон имеет красочный, но профессиональный дизайн.
Посадка бесплатного комплекта пользовательского интерфейса в формате PSD
Этот бесплатный набор целевых страниц можно использовать как в Photoshop, так и в Sketch. Он включает в себя десятки компонентов, которые помогут вам создать запоминающуюся целевую страницу. Шаблоны легко настраиваются и содержат более 80 макетов.
Coeus — HTML-шаблон целевой страницы криптовалюты (Envato Elements)
Coeus — это полный и универсальный шаблон целевой страницы, который идеально подходит для креативного агентства, приложения для работы с криптовалютой или целевой страницы веб-сайта. Этот шаблон целевой страницы представлен в светлом и темном макете и был создан с помощью BootStrap.
Концепция целевой страницы Upto — бесплатный веб-шаблон
Целевая страница Upto — это полностью редактируемый шаблон целевой страницы в Adobe Photoshop. Он имеет чистый и современный дизайн и может использоваться для объявления о запуске вашего стартапа.
Бесплатные шаблоны целевых страниц DuckPack
Этот творческий шаблон целевой страницы был разработан в Photoshop и включает в себя несколько файлов, которые можно использовать в качестве отправной точки при разработке дизайна целевой страницы. Шаблон отличается великолепными полноразмерными изображениями и современной типографикой.
Meetup – бесплатная целевая страница мероприятия в формате PSD
Если вам нужен шаблон целевой страницы, который поможет привлечь внимание к вашему запуску, тогда шаблон Meetup — это то, что вам нужно. Этот шаблон поставляется с красивым таймером обратного отсчета, чтобы вы могли создать шумиху и заинтересовать людей своим запуском.
Бесплатный шаблон целевой страницы мобильного приложения
Этот шаблон целевой страницы бесплатного мобильного приложения имеет чистый и современный дизайн. Это полностью редактируемый шаблон PSD. Вы можете использовать его для создания целевых страниц для стартапов и веб-приложений, компаний SaaS, продуктов и многого другого.
Независимо от того, какой тип целевой страницы вам нужно создать, в Интернете нет недостатка в качественных шаблонах целевых страниц. Используйте этот обзор в качестве отправной точки для вдохновения вашей целевой страницы или загрузите один из шаблонов, чтобы начать работу над дизайном вашей целевой страницы.
Узнайте, как создать чистый и профессиональный шаблон целевой страницы с помощью Adobe Photoshop. Мы будем использовать различные методы и приемы для разработки этой целевой страницы, которую можно использовать для различных компаний, которым нужен профессиональный шаблон.
Окончательный результат
Ресурсы
<р>1. Сначала создайте новый документ в фотошопе со следующими настройками:
<р>2. Затем нажмите CTRL+R, чтобы поднять линейку вокруг холста, и протяните 2 горизонтальные линии, расположив их по краям, как показано ниже. Перейдите в «Изображение» > «Размер холста» и установите указанные ниже параметры, чтобы увеличить ширину. Линии, которые вы перетащили, будут направляющими для сохранения функций веб-сайта.
<р>3. Выберите инструмент «Прямоугольник» и нарисуйте 2 фигуры, как показано ниже, для разделов заголовка и ползунка.
<р>4. Удерживая нажатой клавишу CTRL, щелкните миниатюру слоя ползунка, чтобы вызвать выделение вокруг фигуры. Создайте новый слой и нарисуйте немного белого сверху, как показано ниже, используя кисть с мягким краем. Установите непрозрачность слоя на 20%, это придаст ему приятный нежный оттенок.
<р>5. В заголовке напишите название целевой страницы, загрузите значки и перетащите их в раздел заголовка, как показано ниже.
<р>6. Затем в разделе ползунка напишите текст с помощью текстового инструмента.
<р>7. Теперь для кнопки выберите инструмент «Прямоугольник со скругленными углами» и нарисуйте кнопку нужного размера. Дважды щелкните слой, чтобы перейти к параметрам наложения, и установите параметры ниже:
<р>8. Затем напишите название кнопки, используя шрифт ниже. Дублируйте кнопку, если вам нужна вторая.
<р>9. Загрузите ноутбук Apple и откройте его в Photoshop. Чтобы уменьшить его, нажмите CTRL+T и перетащите верхний угол вниз, удерживая нажатой клавишу Shift.
<р>10. Дублируйте ноутбук, перетащив его на значок нового слоя. На дублированном ноутбуке нажмите CTRL+T и переверните ноутбук, как показано ниже. Сотрите часть ноутбука, которая находится за пределами области ползунка, с помощью ластика с мягким краем и установите непрозрачность на 34%. Это создаст хорошее отражение для нашего ноутбука.
Затем с помощью инструмента «Прямоугольник» нарисуйте белую фигуру, закрывающую экран ноутбука. Если вы хотите изображение на ноутбуке, поместите его прямо над белой фигурой, щелкните правой кнопкой мыши слой и нажмите «Создать обтравочную маску». Это обрежет ваше изображение до формы белого прямоугольника.
<р>11. С помощью инструмента «Прямоугольник» нарисуйте следующие 2 цвета для фона.
<р>12. Â Затем выберите значок по вашему выбору из значков Jigsoar и поместите его в область содержимого. Â Используя приведенный ниже шрифт, запишите часть содержания.
<р>13. Удерживая нажатой клавишу CTRL, выберите все слои с текстом и значком из предыдущего шага и перетащите их на значок нового слоя, чтобы дублировать еще 2 области содержимого, как показано ниже, при изменении каждого значка.
<р>14. Используя шрифт ниже, напишите заголовок. Затем возьмите инструмент «Прямоугольник» и нарисуйте миниатюру формы по вашему выбору. Дважды щелкните слой, чтобы перейти к параметрам наложения и обведите границу.
<р>15. Затем выберите Pen Tool и создайте форму, как показано ниже, для тени, используя темно-серый цвет. Перейдите в «Фильтр» > «Размытие» > «Размытие по Гауссу» и установите значение 7.4. Â Установите непрозрачность на 60%, чтобы закончить тень. Затем перейдите к значкам Jigsoar и перетащите значок увеличительного стекла на холст.
<р>16. Выберите все слои миниатюр (как в шаге 13) и продублируйте их, чтобы завершить раздел галереи.
<р>17. Напишите заголовок, используя тот же шрифт, что и раздел галереи. Используя любой шрифт, который вам нравится, напишите большую кавычку, используя светло-серый цвет. Используя шрифт ниже, напишите несколько примеров отзывов.
<р>18. Наконец, для секции нижнего колонтитула нарисуйте нижний колонтитул с помощью инструмента «Прямоугольник», сделайте его того же цвета, что и верхний колонтитул. Разместите информацию об авторских правах и те же значки социальных сетей, что и в заголовке.
Читайте также:
