Генераторы модульных сеток PSD и CSS

Генераторы модульных сеток PSD и CSS

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

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

Как это работает? Очень просто. Дизайнер указывает параметры для генерации заранее утвержденной всей командой разработчиков сетки. Далее скачивает изображение с отрисованными столбцами в формате PNG или PSD, и по полученным линиям выстраивает дизайн сайта. Верстальщик же, имея заранее готовый фреймворк, уже начинает верстать. Все это значительно ускоряет работу над сайтом как для дизайнера, так и для верстальщика.

Если говорить о верстке по модульной сетке, то для этого уже создано множество css фреймворков. Наиболее распространенный — это Bootstrap. Если же проект не на Bootstrap, то некоторые из предложенных инструментов способны генерировать вместе с изображением сетки еще и целый свой фреймворк с зашитыми в него кастомизированными параметрами, которые были указаны на первом этапе.

Итак. К вашему вниманию набор инструментов для создания модульных сеток PSD и CSS, которые значительно облегчат создание сайта.

Responsify.it

Простой и удобный инструмент для создания адаптивной сетки. Генерирует как PNG файл для разработки дизайна, так и css стили для верстальщика. Большим плюсом данного сервиса является то, что можно сразу посмотреть готовый результат. Внизу есть переключатель разрешений экрана. С его помощью можно увидеть, как перестраиваются колонки сайта на разных устройствах.

Grid Calculator

Мой любимый инструмент для создания модульных сеток, которым я регулярно пользуюсь. Это некий калькулятор, который мгновенно проинформирует, какой будет ширина колонки при определенных параметрах модульной сетки.Это очень удобно и полезно. Grid Calculator позволяет генерировать модульные сетки в формате PNG, векторные изображения и паттерны для Photoshop JSX

Modular Grid Pattern

Хороший генератор изображений с модульными сетками в формате PSD и PNG. Основным его отличием от большинства конкурентов является то, что он умеет выстраивать не только колонки, но еще и горизонтальные линии. Для определенных задач будет полезным инструментом. Например, облегчит работу в нудной отрисовке таблиц с данными при разработке дизайна сайта.

Gridulator

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

Grid Designer

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

Подготовительный этап

Итак, создайте где угодно (хоть на Рабочем столе, хоть в отдельной папке) файл index.html. В этот же каталог добавьте директорию images. Она будет содержать все картинки, используемые в шаблоне и на странице. Так как графические элементы мы вырезали заблаговременно, сразу скопируем их в папку images и дадим такие названия:

• back_all — подложка сайта.
• header_top — фон шапки.
• big_pic — логотип.
• title — фон заголовков левой панели.
• footer — заливка низа сайта.
• 1mini — первое фото для основной части страницы.
• 2mini — второе фото.

В папке со страницей index.html создайте файл styles.css — в нём будут размещены таблицы стилей шаблона.

Блокнот для редактирования кода использовать не рекомендуется. Гораздо лучше для этой цели подходит редактор Notepad++. Это подсвечивающая синтаксис разных языков (HTML и CSS — в том числе) программа, заниматься разработкой в которой гораздо удобней, чем в простых редакторах текстовых документов.

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

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

Шаг2 – Быстрая предварительная разметка

Первое, что мы сделаем — это полная разметка HTML с некоторой частью CSS для того, чтобы просто удостовериться, что у нас есть солидная основа. Мы можем также проверить её в основных браузерах (IE7, IE6, Firefox, Safari) только, чтобы удостовериться, что мы находимся на твердой опоре. Нет ничего хуже, чем возвращаться полностью к началу, чтобы устранить проблемы совместимости браузеров. Намного лучше сделать это заранее.

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

Дизайн центрирован. Это сразу говорит нам, что мы должны обернуть его в контейнер и затем центрировать этот контейнер.

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

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

Шрифты

Пройдемся по всем слоям с текстом и посмотрим, какой шрифт там основной, встречается чаще других — это PlayfairDisplay Regular. В дальнейшем, название этого шрифта, мы пропишем для всего документа, в тег body. Таким образом, оптимизируя CSS код, не прописывая его каждый раз в тех селекторах, где применяется именно этот шрифт.

Откуда взять названия всех шрифтов, используемых в макете, если они не установлены на вашем компьютере и Photoshop у себя в слоях ставит желтые треугольники?

Нужно выбрать слой с текстом во вкладке Слои, выбрать на панели инструмент Горизонтальный текст и на верхней панели вы увидите название, начертание, толщину и размер шрифта.

Находим все названия шрифтов, у нас их три.

• PlayfairDisplay Regular
• PlayfairDisplay BoldItalic
• Raleway Bold

По названиям находим нужные шрифты через Google и скачиваем их на компьютер. Затем через сервис onlinefontconverter.com конвертируем шрифты из ttf формата в woff/woff2 формат. Создадим папку fonts и положим их туда.

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

@font-face <
font-family: «PlayfairDisplay-Regular»;
src: url(«../fonts/PlayfairDisplay-Regular.woff2») format(«woff2»), url(«../fonts/PlayfairDisplay-Regular.woff») format(«woff»);
>

@font-face <
font-family: «PlayfairDisplay-BoldItalic»;
src: url(«../fonts/PlayfairDisplay-BoldItalic.woff2») format(«woff2»), url(«../fonts/PlayfairDisplay-BoldItalic.woff») format(«woff»);
>

@font-face <
font-family: «Raleway-Bold»;
src: url(«../fonts/Raleway-Bold.woff2») format(«woff2»), url(«../fonts/Raleway-Bold.woff») format(«woff»);
>

5. Таск-менеджер | Сборщик проектов | Менеджер задач | Ваш личный раб

Вот она рыба мечты. Вот кто настоящий волшебник. Этот комплекс программ для верстки сайтов, реально закроет множество задач верстки сайта и разработки проекта в целом. Gulp, Webpack, — это сборщик проекта для продакшена, здесь минифицируются и объединяются файлы, — HTML, CSS, Javascript. Оптимизируются и ужимаются изображения, так же можно jpeg, jpg, png, переделать в современный формат изображений, — WebP, что даст хороший прирост по скорости заргрузки страниц.
Здесь тоже есть большие боссы:

• Grunt
• Gulp
• WebPack

Сам использую Gulp. Grunt немного по медленнее, и на тот момент когда я начинал изучать Таск-менеджеры, был на пике Gulp.
Ну и WebPack тоже сильный инструмент, но моё мнение что он больше подходит для SPA проектов, или можно сказать сборщик javascript файлов с поддержкой современных версий ECMAScript.

Gulp который я настроил, закрывает задачи на моих проектах

• Расставляет префиксы CSS для всех браузеров
• Минимизирует CSS удаляя пробелы, и переносы
• Создает файлы .map указывая номер строк браузеру для того что бы дебажить изначальный код
• Группирует медиа запросы(что бы не повторялись для разных элементов DOM в одной ширине)
• Преобразует препроцессорный код в обычный CSS
• Минимизирует изображения
• Уродует и минимизирует код JavaScript
• Объединяет все файлы CSS в один(уменьшая количество обращений к серверу)
• Минимизирует файлы HTML
• Отслеживает изменения в редактируемых файлах и самостоятельно обновляет браузер во время верстки
• Конфигурирует файл Smart-Grid

Так же дома на всех устройствах в одной сети я могу посмотреть в реальном времени как выглядит то что я верстаю.
Моя сборка Gulp и WebPack

Online Photoshop — это онлайн сервис. Он не умеет открывать файлы PSD но… это отличная альтернатива фотошопу для редактирования ваших изображений прямо в браузере.

Не мог оставить данный сервис без внимания, так как в любом случае он полезен. Сервис бесплатный. Открываете его, загружаете изображение и редактируете его. С «полной функциональностью» Adobe Photoshop конечно не сравнить, но все же.

На этом у меня всё! Кому было полезно — поделитесь ссылкой на этот пост со своими друзьями. Спасибо что дочитали до конца.