Как в фотошопе сделать сетку бутстрап (bootstrap grid)

Работа с графической , PSD, аватары, макеты, баннеры, шаблоны, и т.д.

Модератор: MoreHack

Ответить
Аватара пользователя
MoreHack
КУРАТОР ПРОЕКТА
Сообщения: 192
Зарегистрирован: 27 мар 2018, 18:36
Контактная информация:

29 мар 2018, 03:44

Здравствуй дорогой друг! Если ты начинающий веб-дизайнер и в твои обязанности входит отрисовка макетов сайта, то тебе как воздух необходима сетка бутстрап. Это нужно в первую очередь для правильного макетирования. Если хочешь, можешь посмотреть видео урок ниже, под сами видео уроком находится статься в текстовом виде, там несколько подробнее всё описано! Зато на видео всё куда нагляднее. Кстати, подписывайся на наш канал на ютубе.

Ссылка на видео: https://www.youtube.com/embed/nayrs_jR7y0

Изображение
И так, тебе интересна статья в текстовом виде? Это хорошо!

Как создать сетку бутстрап в фотошое

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

Изображение

Bootstrap (также известен как Twitter Bootstrap) — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

Сетка бутстрап — основной инструмент адаптивной вёрстки с использованием Twitter Bootstrap.
Изображение
Что из себя представляет сетка для вёрстке — отдельная тема, для нас же важно знать как выглядит сетка бутстрап в фотошопе. Как это сделать? Взгляните на скриншот ниже.

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

Без имени-1

Значение всех элементов — тема отдельной статьи, тема же это: как сделать сетку бустрап в фотошопе. Окей, у Вас два пути:

1) Скачать готовый PSD исходник, с готовой сеткой. Включать и выключать её можно при помощи сочетания клавиш +

2) Более гибкий способ, он позволяет создавать сетку бутстрап легко и играючи, нажимаю на одну клавишу. Для этого нам понадобиться экшен. Что такое экшен мы уже знаем, но на всякий случай напомню — это набор заранее записанных действий, которые при необходимости можно повторить нажав всего одну кнопку.

Скачать нужный нам экшен можно по ссылке качается всё это дело архивом, нам нужен файл, который находится по пути: \960-Grid-System-master\app_plugins\photoshop

путь-до-экшена-сетки-бутстрап

Далее, этот файл необходимо просто перенести в фотошоп, в окошко «Операции», если оно у Вас закрыто, нажмите предварительно +

В результате у Вас получиться следующее:

экшены для сетки бустрап Здесь уже установлены все экшены, для того чтоб построить сетку, просто выберите нужный вам типа (12 колонок, 16 колонок, 24 колонки) и нажмите на кнопочку «Плей». Всё! Сетка построится сама!

Статью подготовил Amba специально для thesitebook.ru.

Если вы хотите использовать наши материалы — пожалуйста, у нас всё для людей, но мы были бы очень признательны, если вы оставите маленькую ссылочку на наш сайт, или на эту статью у себя. Заранее спасибо!
Ответить

Вернуться в «Графика & Adobe»