Дизайн-комплект для разработки шаблонов лендингов

716

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

Папка Вase Complect из набора для разработки шаблонов лендингов

В этой папке лежит базовая версия пакета для разработки шаблонов лендингов.
Design Complect Dark.psd — файл с тёмным бекграундом, все блоки адаптированы под тёмный цвет фона

Design Complect Light.psd — файл со светлым бэкграундом, все блоки адаптированы под светлый тон фона

Blank page Bootstrap Grid.psd — файл-шаблон с размеченной сеткой под фрейморк Bootstrap. Используйте его как базу для начала разработки любого макета, не обязательно Landing Page.

Вообще настойчиво рекомендую ознакомиться с этим фреймворком:
http://bootstrap-ru.com/ — о фреймворке на русском
http://getbootstrap.com/ — о фреймоворке на английском

Design Complect Colors.aco — файл для панели Swatches в Photohop. Он включает в себя все цвета, которые используются для типовых элементов дизайн-комплекта.

Папка Addons

В этой папке находятся дополнительные блоки и элементы для разработки макетов landing pages.

Clients.psd — блоки вывода списка клиентов.

Contacts.psd — блоки вывода карты с контактами компании.

Flat Icons.psd — набор из 60 иконок в стиле flat на базе Awesome Font, в двух цветах.

Forms.psd — набор форм call-to-action и счетчиков для обозначения дедлайнов акций.

Prices.psd — дополнительный вариант вывода таблицы цен.

Product Guarantee and Scheme.psd — дополнительные блоки описания схемы заказа и гарантий для продуктовых лендингов и инфо-продуктов.

Sertificate.psd — блок вывода сертификатов и лицензий. Можно так же использовать для вывода отзывов клиентов (если они отсканированы).

Team.psd — вывод команды компании.

Папка Fonts

Содержит 3 шрифта, необходимых для работы с комплектом

Ubuntu
https://www.google.com/fonts/specimen/Ubuntu

Roboto
http://www.google.com/fonts/specimen/Roboto

Font Awesome
http://fontawesome.io
Шрифт «Font Awesome» является шрифтом иконок. Все иконки в одном списке можно увидеть на этой странице
http://fontawesome.io/cheatsheet/

Как пользоваться шрифтом бесплатных иконок?

1. Устанавливаешь шрифт, который лежит в архиве font­awesome-4.0.3.zip

2. Находишь нужную иконку на этой странице http://fontawesome.io/cheatsheet/

3. Выделяешь и копируешь иконку (только иконку без текста справа от ней) так, как если бы это был текст

instr1

4. В фотошопе создаешь новый текстовый слой и вставляешь скопированный символ. Получится что-то вроде этого

instr2

5. Выделяешь наш символ, в панели шрифов находишь установленный ранее FontAwesome и получаешь иконку

instr3

Иконку можно трансформировать в Shape или оставить как есть. Инструкция по подключению шрифта для HTML-верстки есть на сайте Font Awesome http://fontawesome.io/get-started/

Сервис автоматической верстки PSD2HTML.COM

Сервис русскоязычный, расположен по этой ссылке http://psd2htmlconverter.com/ru/
Вся документация описана на этой странице, там всё более чем понятно http://psd2htmlconverter.com/ru/documentation/
Основные моменты, которые нужно соблюдать
— Группируй слои, собирай верную структуру документа
— Сливай изображения в один слой
— Сервис не умеет верстать изображения 100% в ширину
— Сервис не понимает нестандартные шрифты. Поэтому перед отправкой на верстку все шрифты в макете можно заменить на Arial, а затем после верстки подключить нужный шрифт.

Папка LP Samples

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

 

Использую для заработка:

Подборки по теме:

ОСТАВЬТЕ ОТВЕТ

Ввведите свой комментарий
Введите ваше имя

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

If you agree to these terms, please click here.