Mini-ats102.ru

ООО “Мультилайн”
3 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как использовать сетки при создании прототипов страниц

Как использовать сетки при создании прототипов страниц

Как использовать сетки при создании прототипов страниц

Дмитрий Дементий Редакция «Текстерры»

Эта статья будет полезна, если вы делаете прототипы сайтов, чтобы донести свои идеи до веб-дизайнеров и разработчиков. Руководство научит вас использовать для прототипирования сетку.

Дисклеймер: если вы сделаете прототип без сетки, ничего страшного не случится. Профессиональный дизайнер или веб-разработчик добавит сетку за вас. Но если вы научитесь работать с сетками, качество прототипов резко вырастет, а вы по-другому посмотрите на страницы сайтов.

Виды модульных сеток

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

Создание второго варианта модульных сеток – нестандартных — под силу только людям, занимающимся веб-дизайном профессионально. В этом случае точно определены лишь ширина колонок и расстояние между отдельными элементами. Модульная сетка в дизайне разного рода новостных ресурсов и интернет-журналов разрабатывается обычно следующим образом:

  1. Создается колонтитул. Здесь должны быть расположены название сайта, навигационное меню, разного рода видеоматериалы.
  2. Страница разбивается на три колонки. При этом две из них имеют одинаковые размеры. Третья колонка делится на две части вертикальной линией. Таким образом, получаются четыре раздела (новостной, фотогалерея, место для рекламы, последние информационные изменения на сайте).

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

Как включить сетку в Фотошопе

Сетка в Фотошопе применяется в разных целях. В основном использование сетки вызвано необходимостью расположить объекты на холсте с высокой точностью.

Этот коротенький урок посвящен тому, как включить и настроить сетку в Фотошопе.

Скачать последнюю версию Photoshop

Включается сетка очень просто.

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

Кроме того, сетку можно вызвать, нажав сочетание горячих клавиш CTRL+’. Результат будет тот же.

Настраивается сетка в меню «Редактирование – Установки – Направляющие, сетка и фрагменты».

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

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

Помогла ли вам эта статья?

Как использовать Сетку

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

Читайте так же:
Где восстанавливающая кисть в фотошопе

Изменим сантиметры на пиксели и выставим шаг в 50 пикселей:

Активируем инструмент Прямоугольное выделение (Rectangular marquee ), горячая клавиша вызова инструмента — M .

Небольшой совет по использованию сетки в фотошопе:

При работе с Сеткой, а также с Направляющими и слоями, желательно включить функцию Привязка . Когда эта функция активна, создаваемые объекты как бы «прилипают» к линиям Сетки (в нашем случае). Чтобы убедиться, что функция включена, перейдите в меню Просмотр — Показать (View — Show ). Если галочка у «Привязка» не включена, щелкните по этому пункту, чтобы ее поставить.


Если же они имеют иной вид, активируйте нужный пункт щелчком по нему либо же нажмите на пункт «Все», во втором случае привязка включится сразу по всем имеющимся пунктам:

Возвращаемся к уроку

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

Есть инструмент, с которым редактировать графику будет гораздо проще. Это сетка. Она помогает при создании изображений и складывании коллажей. По ней можно оценить размер и расстояние, прикинуть, как будут располагаться объекты относительно друг друга, сделать разметку. Сориентироваться, куда поместить ту или иную часть рисунка. Это полезное средство, если уметь им пользоваться. Узнайте, как включить сетку в Фотошопе, как настроить её атрибуты и как её убрать.

Сетка помогает вам более точно и симметрично расставить элементы в композиции

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

В качестве аналогии приведём школьную тетрадь в клетку. В ней строили графики и рисовали геометрические фигуры. На таком листе можно было начертить прямой отрезок без линейки, задать угол в 45 или 90 градусов, не используя транспортира. По ней на глаз определяли, какая длина у стороны прямоугольника, и сколько клеток составляют его площадь. В Фотошопе у таблицы примерно те же функции.

Её можно увидеть только в программе. Она не отобразится при печати. В цифровой версии рисунка клеток тоже не будет. Это не часть изображения, а инструмент для редактирования.

Не стоит путать его и пиксельную сетку. Последнее — это разбиение картинки на точки. Пригодится для детального редактирования. Её также можно включить и настроить.

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

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

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

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

Читайте так же:
Моделирование биоритмов человека в excel

Есть мнение, что подобные инструменты для создания сеток применимы только при создании адаптивного сайта. Однако если отталкиваться от личного опыта, можно поспорить с этим. На данный момент я использую сетки при создании 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 — каркас будущего сайта. Помимо конструктора модульных сеток, данный инструмент оснащен визуальным редактором типографики, стили которой будут выгружены в конечный результат вместе с настройками сетки.

Зачем нужна сетка?

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

Сетка визуализирует пространство и позволяет размещать элементы рисунка симметрично и пропорционально.

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

Как включить сетку

Большинство редакторов оснащены двумя методами включения/выключения часто используемых инструментов или функций. Первый вариант – отыскать в закладках меню, второй – воспользоваться комбинациями клавиш.

Важный момент! Не зависимо от того, какой язык у интерфейса, расположение закладок в меню всегда одинаково. Если изображение в примере инструкции на английском, а работать предстоит с русскоязычной версией – ничего страшного. Достаточно отсчитать соответствующее количество закладок справа налево и вниз в подменю. На крайний случай – воспользоваться Гугл-переводчиком.

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

Вариант 1 – через меню закладок:

  • 9-я закладка слева View (вид);
  • 14-я строка сверху Show (демонстрация);
  • 4-я строка сверху Grid (сетка).

Вариант 2 – через комбинацию клавиш Ctrl+’ (Ctrl и верхний английский апостроф).

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

Как включить направляющие в фотошопе

В фотошопе присутствует 2 вида направляющих – постоянные и временные. Постоянные устанавливает пользователь когда ему надо и куда ему надо. Временные появляются автоматически в моменты, которые программа считает необходимыми, затем они исчезают. Проявление временных направляющих происходит в тот момент, когда одна часть рисунка, при перемещении, становится на один уровень с другой частью. Это удобное свойство, которое упрощает работу.

Функция вкл/выкл как таковая отсутствует. Направляющие вытягиваются из линейки.

  • навести курсор мышки на край линейки;
  • зажать Левую Кнопку Мышки (ЛКМ);
  • тянуть в сторону.

«Выключение» — перетянуть направляющую обратно или выделить и нажать кнопку Delete.

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

Выгнутых линий нет, доступны только прямые.

Горизонтальные линии вытягиваются с верхней или нижней линейки, вертикальные – с левой или правой.

Что делать, если линейки нет?

Как включить линейку

Любой графический редактор содержит в арсенале своих инструментов такое средство, как линейка. Если для рисовки цветочка она не обязательна, то для создания визитки это элемент первой необходимости.

Читайте так же:
Как в ворде проверить знаки препинания

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

Благодаря линейке Фотошоп автоматически центрует элементы.

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

Если линейки не видно – ее надо включить.

  • View или Вид (9я закладка слева);
  • Rulers или линейка (15я строка сверху, сразу после Show).

Либо воспользоваться комбинацией клавиш Ctrl+R (контрол и английская буква R).

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

Как включить лупу в фотошопе

Часто, при работе с мелкими деталями, возникает необходимость увеличивать/приблизить рисунок.

В Фотошопе это можно сделать тремя способами.

Вариант 1-й – через панель инструментов.

На панели инструментов справа присутствует значок увеличительного стекла (Лупа).

  • кликнуть на Лупу;
  • кликать ЛКМ по рисунку до тех пор, пока необходимые габариты не будут достигнуты.

Уменьшение к естественным размерам – зажать Alt и кликать ЛКМ по рисунку.

Удобно, стабильно, наглядно. Единственный минус – если переходить от одного масштаба к другому нужно часто, постоянное кликанье утомляет.

Вариант 2-й – зажатие клавиши.

Масштабирование происходит при комбинации – зажать левый Alt и крутить колесико мышки.

Не существенный минус – левая рука занята.

Вариант 3-й – включить функцию изменения масштаба изображения колесиком мышки.

  • вторая закладка слева Edit или Редактирование;
  • последняя строчка Preferences или Настройки;
  • первая строка General… или Основные;
  • в появившемся окне поставить галочку в 6-й строке снизу Zoom with Scroll Wheel (масштабирование колесиком мышки);
  • Ок.

И тут открывается подводный камень. В некоторых случаях, спустя пару минут, Фотошоп выбивает ошибку и закрывается. Баг наблюдается в версии программы CS6 и не подтвержден в иных версиях. Попытки переубедить редактор, в большинстве случаев, провальные, что приводит к выводу воспользоваться 1м или 2м вариантом масштабирования.

Модульная сетка для web-дизайнеров

В начале, разберемся с понятием, что же такое модульная сетка и для чего она применяется в web-дизайне.

Модульная сетка

Что такое модульная сетка?

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

Читайте так же:
Как в ворде поставить вектор над буквой

Преимущества использования модульной сетки

  1. Ускоряет процесс разработки, т.к. нет необходимости другим разработчикам тратить время на подборку места для блоков в макете дизайнера.
  2. Облегчает позиционирование элементов. Все элементы выравниваются относительно друг друга.
  3. Структурирует и упорядочивает дизайн.
  4. Шаблонизация. У вас вырабатывается единый шаблон, который удобно использовать в новых проектах или модифицировать уже существующий.
  5. Исключение стандартных ошибок. Исчезнут проблемы с неправильными отступами и размерами между блоками и т.п.
  6. Эстетичный вид. Дизайн макета приобретает красивый, аккуратный и удобный для работы вид.
  7. Стандарт. Вы в самом начале макета закладываете стандарт в дизайне, что облегчает дальнейшую разработку для других участников проекта.

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

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

1. 960 Grid System

960 Grid System

Многим известный сайт, позволяющий скачать сетку размером до 960px для большинства популярных графических редакторов: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design.

Вашему вниманию предлагается 2 варианта сеток:

  1. Разделение участков на 12 столбцов по 60px в ширину.
  2. Разделение участков на 16 столбцов по 40px в ширину.

Каждая колонка имеет отступ по 10px слева и справа. В сумме ширина между столбцами составляет 20px. Здесь вы можете посмотреть пример 12-ти и 16-тиколонной сетки.

2. Grid Calculator

Grid Calculator

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

3. Modular Grid Pattern

Плагин модульная сетка

На данном сайте вы можете создать сетки под любые разрешения экрана. Также здесь доступен плагин для модульной сетки в программе Photoshop. Минимальные требования плагина Adobe Photoshop CS5.1.

Для тех кто хочет использовать сетку прямо в Photoshop и программно управлять размерами — еще одно бесплатное и интересное расширение для Photoshop от другого разработчика.

Вот так все просто и без лишней траты времени. Для кого-то это пригодится, кто-то уже использует свои готовые шаблоны. Я думаю не стоит тратить время на рисование сетки, если только для практики. А лучше потратить свое время на что-то полезное и оплачиваемое.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector