Сетка для создания сайта photoshop
При создании дизайна сайтов в Adobe Photoshop не обойтись без использования какой-либо системы сеток. Можно создать сетку самостоятельно, используя направляющие, либо воспользоваться уже готовым, проверенным решением - готовой сеткой Bootstrap в формате PSD. Не смотя на то, что дефолтные размеры Bootstrap сетки несколько стандартизируют дизайн, данный вариант успешно используют в своей работе огромное количество веб-дизайнеров по всему миру. Кроме того, такая стандартизация позволяет максимально быстро выполнять HTML верстку созданного макета, что неминуемо приводит к ускорению работы над проектом в условиях разработки сайтов на потоке или создания шаблонов.
Шаг 8: Делаем фон для области Callout
Так как мы назвали компанию « blue grid », добавим фон для секции Callout в стиле решетки. Для этого будем использовать технологию, схожую с той, которой пользовались, добавляя горизонтальные линии.
Для начала создаем документ размерами 25px на 25px. Снова удаляем фон, делая документ прозрачным, и рисуем одиночную линию шириной в 1px вдоль нижней части и еще одну в верхней части.
Завершаем этот шаг, присваивая этому документу вид шаблона путем Edit > Define Pattern :
Шаг 16: Подвал
Добавьте кнопку подтверждения ввода подобным же образом, но используя инструмент Rounded Rectangle Tool(U) , затем добавьте Inner shadow к созданным элементам, установите значения параметра opacity в 30%, а size и spread в "0" и distance в 10px.
Шаг 3: приступаем к дизайну
Теперь, когда у нас настроен шаблон, мы можем приступить непосредственно к дизайну.
Мы разделим страницу на пять секций:
- Header;
- Callout;
- Content – Left;
- Content – Right;
- Footer.
Шаг 1: Создаем новый документ
Полезные направляющие
Если вы работаете напрямую из файла 960 Template , направляющие уже созданы, и их необходимо только отобразить через меню View > Show > Guides :
Шаг 13: Содержимое – левая область
Шаг 11: Добавляем слайд-шоу
Это фон к слайдшоу:
Далее вам понадобится некий фиктивный контент для размещения в слайд-шоу. Я использовал скриншот моего блога. Размер меняем под размер области слайд-шоу с помощью меню Select> Modify> Contract 10px , выбрав инверсию, как ранее, далее delete :
Шаг 10: Добавляем содержимое в область Callout
Под этим местом сделаем небольшое вводное предложение шрифтом 17pt и поместим его в левой части области:
Параметры стандартной Bootstrap сетки в PSD формате:
- Общая ширина рабочей области: 1920px;
- Ширина контейнера с отступами: 1170px;
- Ширина колонки без отступов: 68px;
- Ширина отступа (Gutter): 15px;
- Система сетки: 12-ти колоночная.
Расстояние между колонками и некоторые размеры могут иметь погрешность +/- 1px в связи с тем, что некоторые нечетные величины не могут быть поделены поровну. Но это некритично в масштабах разработки PSD макета.
Шаг 18: Проверьте выравнивание и баланс всей страницы
Используя сетку и направляющие, проверьте, что все выровнено и сбалансировано. Если нет - подстройте:
Сохраняем документ как шаблон
Вы можете сохранить этот документ в качестве шаблона и использовать по мере необходимости. Это сэкономит вам кучу времени.
Высоту холста всегда можно изменить под свои нужды. И опять же, со временем вы, вероятно, отдадите предпочтение полноценной системе с дополнительными направляющими.
Шаг 19: Расслабьтесь. Финиш!
Надеюсь, вы получили понимание того, как можно работать с системой сеток, а также как настроить базовую систему самостоятельно.
Я настоятельно рекомендую вам экспериментировать с этими системами до тех пор, пока работа с ними не станет вашей второй натурой. Со временем, система сеток значительно облегчит вам вашу работу в качестве дизайнера!
Начнем с макета страницы, а затем перейдем к разработке ее отдельных элементов. Результатом будет современный макет веб-страницы, готовый к верстке:
Его ключевыми особенностями являются горизонтальные полосы для разделения контента, красочный заголовок, портфолио, двухрядный основной макет и подвал со ссылками:
Перед тем, как создать сайт в Фотошопе , лучше сделать наброски основных контуров на бумаге:
Проектирование макета также помогает разработать структуру и получить представление о лучших позициях для ключевых элементов дизайна:
Создавая новый документ в Adobe Photoshop , я делаю макет размером, соответствующим распространенному широкоформатному монитору, чтобы дать хорошее представление общего вида сайта:
Отмерьте направляющими ширину в 960 пикселей в центре документа и создайте базовую сетку для размещения элементов страницы:
Начнем создание дизайна сайта в Photoshop с заголовка. Сделайте выделение по всей ширине документа и залейте его белым цветом. Дважды щелкните на слое, чтобы открыть стили слоя и добавьте « Наложение градиента » ( Gradient Overlay ) с вертикальным переходом от серого цвета к белому:
Далее нарисуем область основного заголовка, где будет размещен избранный материал. На новом слое сделайте выделение, затем примените к нему стиль « Наложение градиента » с двумя цветами. Также добавьте неброскую внутреннюю тень, чтобы придать эскизу глубины:
Выделив область заголовка с маской, нажмите CTRL+SHIFT+C , чтобы скопировать совмещенные данные, а затем вставьте их на новый слой. Перейдите на вкладку Фильтр > Шум > Добавить шум , чтобы создать простую текстуру, затем установите режим наложения « Умножение » и снизьте прозрачность до подходящего значения:
Далее продолжаем делать сайт в Фотошоп , вставив логотип компании и расположив его в сетке. Добавьте стиль « Наложение градиента » с настройками, соответствующими цветам заголовка, затем создайте мягкую внутреннюю тень:
Используйте инструмент « Текст » для создания меню главной навигации, задайте средне-серый цвет для шрифта, а для активной ссылки используйте немного более темный оттенок:
Заголовок – это отличное место, чтобы представить сайт. С ярким фоном он привлекает основное внимание пользователя. Используйте это пространство, чтобы поместить привлекательный вступительный заголовок с индивидуальным шрифтом, который соответствует имиджу компании:
Продолжайте детализировать вводный контент, но на этот раз используйте семейства шрифта Arial или Helvetica , чтобы текст можно было поместить в html без замены изображений:
Перед тем, как сделать сайт в Фотошопе до конца, расположите изображение ноутбука посередине. Это хорошо согласуется с образом выдуманной компании, и создает отличное тематическое пространство для отображения примеров работ на экране компьютера:
Подчеркните эту область радиальным градиентом, исходящим из-за компьютера. Этот дополнительный штрих поможет возвысить элемент над страницей:
Под основным заголовком создайте другое выделение и заполните его бело-серым градиентом:
Разделите среднюю часть страницы на две колонки с направляющими, привязанными к линиям сетки. Слева у нас будет главная панель контента, а правая будет содержать тонкую боковую панель. Используйте инструмент « Текст », чтобы добавить текст для примера:
Ниже область основного контента может содержать место для отображения последних записей блога. Разделите этот столбец еще на две колонки и набросайте примеры записей. Ссылки заголовков должны расцениваться пользователями как кликабельные, поэтому измените их цвет, чтобы дать визуальную подсказку:
При создании сайта с нуля в Фотошопе и верстке используем инструмент « Прямоугольник со скругленными углами », чтобы нарисовать прямоугольник на боковой панели. Первоначальный цвет не имеет значения, так как мы будем менять его стиль в следующем шаге:
Дважды щелкните по слою и добавьте ряд стилей слоя, в том числе серо-белый градиент, тонкую серую обводку и мягкую внутреннюю тень:
Используйте эту боковую панель, чтобы разработать секцию Featured Project ( Рекомендуемый проект ). Ее элементы могут включать в себя небольшие снимки и отрывки текста:
Нарисуйте еще один прямоугольник, чтобы использовать его как кнопку. Добавьте пару стилей слоя, таких как « Наложение градиента » и « Обводка », чтобы стиль кнопки соответствовал общей серой теме:
Создайте короткую и содержательную надпись для кнопки, побуждающую пользователя пройтись по сайту, чтобы посмотреть будущие проекты:
Обозначьте конец контента, нарисовав на экране область подвала. Заполните это пространство светло-серым цветом, чтобы отличить его от области основного контента:
Создание сайта в Photoshop продолжим с рисования круглой маски и заполнения ее радиальным градиентом от черного до прозрачного. Нажмите Ctrl+T , чтобы трансформировать выделение, сожмите и растяните созданную область для формирования длинного, похожего на тень изображения:
Расположите тень по центру экрана, затем удалите лишнее пространство над подвалом. В результате получится тонкая тень, которая « приподнимает » главную страницу, добавив дизайну немного деталей:
Подвал является отличным местом для отображения второстепенных элементов страницы. Например, формы для авторизации пользователей. Доработайте дизайн с помощью инструмента « Текст », а затем нарисуйте пару полей для ввода. Дополните поля мягкой внутренней тенью:
Добавьте контактную информацию в нижний правый угол. Так эти данные будут всегда под рукой у пользователей. Выделите наиболее важные аспекты с помощью размера и большей толщины или цвета:
Итоговый дизайн сайта в Фотошопе искусно сочетает все необходимые элементы на странице, которые выравнены по базовой сетке. В результате мы получили структурированный макет с разными оттенками серого цвета. Такая цветовая гамма используется для подчеркивания предметных областей и важного контента.
Правила работы с PSD сеткой Bootstrap
Существуют определенные правила работы с Bootstrap сеткой. Некоторые начинающие веб-дизайнеры не учитывают в своей работе эти правила, в результате чего возникает непонимание между верстальщиком и дизайнером, в случае, если над проектом работает команда. Bootstrap сетка в PSD формате для создания дизайна сайта разрабатывалась основываясь на "физических" свойствах сетки CSS фреймворка Bootstrap и дизайнер должен придерживаться определенных правил для исключения излишних коллизий в процессе разработки.
1. Крайние поля служат исключительно для отступов на малых разрешениях и не могут быть использованы для размещения каких-либо элементов дизайна или контента сайта.
2. Вы можете использовать любое количество одиночных колонок для визуализации различных блоков сайта.
3. После разделения макета на колонки и блоки, промежутки (Gutters) между ними не могут быть использованы для размещения каких-либо элементов дизайна или контента сайта.
4. Не бойтесь выходить за рамки сетки. Если вы решили сделать какую-то нестандартную секцию или блок - реализуйте вашу идею вне рамок Bootstrap сетки, если это необходимо. Но постарайтесь обеспечить ваше решение какой-либо системой, например, придерживайтесь центра макета или частично используйте возможности Bootstrap сетки, соблюдайте кратность элементов или придерживайтесь любой другой логической системы при создании нестандартного блока. Так вы значительно облегчите работу верстальщика, если над проектом трудится команда разработчиков. Вам скажут спасибо.
Последний пункт очень важен, так как многие начинающие веб-дизайнеры боятся выходить за рамки Bootstrap сетки и дизайн, в большинстве случаев, получается довольно однообразный и скучный. Помните, что направляющие Bootstrap сетки необходимы вам только для разметки блоков сайта, которые необходимо упорядочить в соответствии с системой сеток, это может быть разделение макета на базовые логические части - сайдбар + контент, определение элементов блока, таких, как айтемы карусели, секции новостей и так далее. В остальном, не стоит ограничиваться рамками сетки и делать визуализацию только по направляющим. Однако если вы создаете дизайн определенной секции или блока в соответствии с системой Bootstrap сетки, обязательно придерживайтесь правил из пунктов 1,2,3 выше.
Всем привет, дорогие друзья! Сегодня мы рассмотрим создание сетки Bootstrap для Figma – одного из популярнейших UI-инструментов в настоящее время.
Сетка Bootstrap уже прочно вошла в стек инструментов для коммерческой разработки – она позволяет эффективно и быстро разрабатывать адаптивные сайты, значительно сокращает и оптимизирует время разработки на этапе Дизайн to Front-end. У нас уже были уроки по созданию сетки Bootstrap для различных графических программ, таких, как Photoshop, Adobe XD, Gimp, Inkscape и т.д. Ознакомиться с сопутствующими уроками и материалами:
Настраивается сетка в Figma довольно быстро, я рекомендую настраивать ее для каждого отдельного проекта. На странице урока вы также найдете документ Figma с сетками, которые мы сегодня создадим и сможете использовать их в качестве наглядного примера. В конце урока я покажу, как это сделать.
Итак, для начала создадим новый документ. Обычно я создаю документ для нового проекта с паттерном "Desktop":
Здесь у нас создается фрейм шириной 1440 пикселей. Это среднее универсальное значение. Конечно-же можно сделать макет шире или наоборот уже, но, в целом, начинать создание дизайна можно именно с такой ширины макета. Как я говорил ранее, сетка в Figma настраивается довольно-таки быстро и просто. Однако, что касается сетки Bootstrap, здесь есть подводные камни. Давайте разберемся подробнее.
На панели справа найдем "Layout grid" и добавим сетку со следующими параметрами:
Сетка Bootstrap с настройками по умолчанию имеет общую ширину 1140 пикселей на больших разрешениях (Extra large, см. документацию), но при создании сетки в Figma следует учитывать тот факт, что CSS-сетка имеет дополнительные отступы слева и справа по 15px, а в программе этих отступов нет, можно указывать только общее значение Gutter между колонками. Соответственно, ширина сетки в Figma будет иметь общую ширину 1100px (1140px - 15px - 15px) . Размер одной ячейки в этом случае рассчитывается следующим образом. Во-первых, у нас есть 12 промежутков по 30px (11 по 30px в самой сетке и 15px + 15px по бокам). Общая ширина всех отступов сетки составляет 12 * 30 = 360px . Теперь вычтем из общей ширины сетки Bootstrap в CSS ширину всех отступов: 1140px - 360px = 780px . Это общая ширина всех колонок без промежутков. Далее делим общую ширину всех колонок на 12 и получаем ширину одной колонки в системе сеток Bootstrap на самых больших разрешениях: 780px / 12 = 65px .
Обратите внимание в "Type" мы указали "Center" – это значит, что мы без проблем сможем в дальнейшем управлять шириной макета. Например, если макет в результате окажется слишком широким, мы сможем его обрезать. И наоборот, если понадобится увеличить ширину макета, это также можно будет сделать без опасения, что нарисованный в системе сеток контент разъедется и дизайн придется переделывать.
Кроме 12-ти колоночной системы сеток Bootstrap, я также использую и горизонтальную разметку для соблюдения вертикального ритма. Давайте добавим еще одну сетку (Rows) и зададим следующие значения:
Здесь мы указываем "Count" - "Auto" для того, чтобы вся доступная область выбранного фрейма заполнялась сеткой. Для того, чтобы сетка не была такой контрастной и не мешала работе над дизайном, я обычно прибираю значение непрозрачности цвета "Color" до 5%.
Обратите внимание, что "Type" мы можем указать как "Center" или "Top" – это самые популярные параметры горизонтальной сетки для веб-дизайна в Figma. Однако, я рекомендую использовать именно "Top", чтобы в процессе работы, если понадобится сделать макет выше, сетка не съехала и дизайн не пришлось переделывать.
В качестве "Gutter" и "Height" мы указали 10px. Это адекватный вертикальный ритм для большинства проектов, однако вы можете использовать более популярное значение 8px для этих двух параметров. Экспериментируйте.
Внимание! Здесь, стоит добавить, что если вы используете в работе стартер OptimizedHTML 5, то здесь уже определен наиболее оптимальный вертикальный ритм для дефолтного размера текста в 16px (line-height: 1.65). Эти значения являются результатом моего опыта работа над различными сайтами и являются наиболее адекватными для практически любого проекта.
Если вы планируете в дальнейшем использовать стартер OptimizedHTML 5 или общий межстрочный интервал в CSS line-height: 1.65 и дефолтный размер шрифта проекта 16px, то при создании дизайна следует устанавливать значения "Gutter" и "Height" для горизонтальной сетки в 13px:
На панели справа найдем секцию "Frame" в Figma, укажем высоту макета 3500 (H) и перейдем к созданию сетки для следующего разрешения.
При создании Bootstrap-сеток в Figma и других графических редакторах для других разрешений следует учитывать, что если для самого большого разрешения ширина фрейма свободная и может меняться, то на остальных разрешениях, которые меньше, ширина фреймов должна быть привязана к соответствующим значениям из документации Bootstrap (см. Bootstrap Grid options):
Соответственно, общая ширина фрейма для следующего разрешения составит 992px (Large):
Ширина одной Bootstrap-колонки для данного разрешения, при условии, что будет отражено 12 колонок, составит 50px. Остальные параметры Bootstrap-сетки такие-же, как у предыдущего фрейма:
Горизонтальная сетка (вертикальный ритм) для этого и последующих разрешений будет иметь те же параметры, что и у первого макета (см. скачанный файл Figma).
Отлично! Переходим к созданию сетки для следующего разрешения. Создаем новый фрейм (по документации Bootstrap ширина 768px). В данном фрейме можно также отобразить 12 колонок. Зачастую, на таком разрешении адаптивный контент еще не "схлопывается", контент максимально вытягивается по высоте. Однако, в зависимости от задач, вы можете указать и другое количество колонок. Ширина одной колонки на таком разрешении составит 30px, если количество колонок указано 12. остальные параметры – как у предыдущих макетов.
Следующий размер фрейма 576px. На таком разрешении целесообразнее отобразить 6 колонок. Ширина одной колонки 60px. Остальные параметры и горизонтальная сетка как у предыдущих макетов.
И последний фрейм сделаем шириной 320px, отобразим 2 колонки, ширина колонки 130px. Остальные параметры как у предыдущих макетов. 320px – это минимальное разрешение в веб-дизайне, так как в настоящее время уже нет устройств, способных отобразить современный веб-контент меньше этого разрешения. Обычно на таком разрешении весь контент вытягивается в длинную ленту, однако иногда бывают случаи, когда необходимо разделить дизайн на колонки и на таком маленьком разрешении. Так как отступы в любом случае одинаковые по краям, можно сделать разлиновку на 2 колонки для того, чтобы в случае необходимости у нас была возможность воспользоваться колоночной системой.
Для того, чтобы воспользоваться созданной в данном уроке системой сеток в Figma, Скачайте архив с документом Figma, распакуйте и перетащите файл в список проектов Figma (Drafts). У вас появится новый документ "Bootstrap-Figma". Откройте его.
Для того, чтобы включить или отключить сетки в Figma, воспользуйтесь горячими клавишами Ctrl + Shift + 4 .
Любой из фреймов документа "Bootstrap-Figma" вы можете выделить, скопировать Ctrl + C и вставить Ctrl + V в новый проект и использовать в своей работе.
Нашел вот такую картинку
как я понимаю это 12 колонная сетка наложенная на дизайн сайта.
Вот еще один дизайн скачанный,
здесь тоже 12 колонок если включить направляющие их видно. Там где цифры, я подписал колонки. Я не пойму что за области слева и справа там где знаки вопроса? Если ширина сайта это 12 колонок и отступы между ними, кстати отступы слева первый и справа последний они меньше за остальные.
Так же как разделить колонки, указал на скриншоте, задать 6 или 7 колонок заголовку? там буква "Е" заходит на начало 7 колонки. То же касается остальных подобных случаев.
И что делать если дизайн без подобной сетки? У кого то было такое на практике? Может есть шаблон 12 колонной сетки который накладывается на дизайн сайта, если таковой сетки нет?
Получается даже если в сайте 12 колонок, но могут отличаться отступы между ними и ширина колонок в зависимости от разрешения, например 960px или 1200px, и нужно каждый раз новая сетка? Может есть генератор? Полностью готовые сетки не предлагайте, я пока учусь свои создавать.
- Вопрос задан более трёх лет назад
- 8924 просмотра
1. Выше указали плагин для Фотошопа, расставляющий сетку.
2. Вообще, я эту сетку расставлял сам за пару минут. Выставить в настройках Фотошопа сетку (настройки этой сетки Edit - Preferences - Guides, grid and slices, а сама сетка включается по Ctrl +') по 8рх (это значение для удобства, ну и просто я люблю делать именно так под 960; можно посчитать другие значения исходя из целей) и делишь направляющими на нужное количество колонок (6, 8, 12 и т.п.) кратное модулю в 8рх. Потом рисуешь вертикальные полупрозрачные прямоугольники и расставляешь как надо. Все, сетка готова.
Соответственно, для другой ширины окна придется делать новый макет с новой шириной колонок (если подразумевается изменение их ширины). На моей практике для верстальщика достаточно макета под минимальную и под максимальную ширину. Дальше он сам.
Готовые не предлагать, но я на всякий случай оставлю это здесь:
3.Если лень настраивать самому, то гуглите "XXX grid psd", где ХХХ — это ширина макета и/или указание других особенностей (например, бутстрап).
Пример запроса
4. Сайты типа 960.gs на которых готовая сетка под ширину 960рх. На главной можно просто скачать готовые шаблоны с нанесенной сеткой. Собственно, по запросу в поисковике можно скачать такие же шаблоны под разную ширину макета.
Моя понять как правильно верстать, раньше верстал на глаз, но если использовать сетку и знать расстояния отступов и т.д. то это получается просто перенос psd в html. Этого я и хочу добиться. Что бы не выдумывать отступов и размеров которых нет в макете.
Артур Черешнюк: 1. Изначально сетка создавалась всегда вручную, потом появились плагины и автоматические сервисы. Как было сделано в каждом конкретном скаченном шаблоне известно одному автору шаблона))
2. Оба варианта на скриншоте это сетки, просто в одном варианте показаны только окрашеные столбцы, а во втором направляющие. Не исключено что в первом макете можно включить напрявляющие, а на втором в одном из слоев есть дополнительно столбцы (не раз встречал такое, да и сам использую оба варианта). Если нужны именно сетки без дизайна, то просто гуглите конкретно их. Если же нужен дизайн с сеткой, то тут уже как повезет (предположу что в платных шаблонах сетка есть гарантированно).
3. Сервис сломали) У меня тоже самое выдает, благо подобных есть немало и можно попробовать другой.
4. Макет в ширину имеет Н колонок, у каждой из них есть отступы У (т.е. расстояние между колонками получается 2*У). Чтобы контент не прилипал друг к другу в соседних колонках. Собственно, колонка это модульная единица и контент на странице располагается исходя из этого. Важно понимать что сначала располагается контент красиво и понятно, а уже потом ищется решение для сетки. Хотя чаще дизайнер сначала рисует сетку, а потом пытается впихнуть в нее контент))
Вообще очень разумное решение. Я никогда не понимал людей, которые получают утвержденный дизайн-макет, а верстают как хотят, игнорируя все отступы, форматирование текстов и т.п. Макет всегда должен быть пиксель-в-пиксель как в исходнике. Если проблемы — обсуждение с клиентом и дизайнером о внесении корректировок, но никак не самовольное изменение. Есть даже плагины, которые расставляют в макете расстояния в пикселях между элементами для наглядности.
В этом уроке мы разработаем дизайн веб-страницы, используя 960 Grid System . Вы увидите, как работая с этой системой можно рационализировать процесс веб-разработки и как пользоваться системой сетки:
Шаг 6: Добавляем меню
Меню. Чтобы сохранить простой и строгий вид, мы будем использовать текст в основе меню. Выбираем для меню шрифт 18pt Arial .
Шаг 12: Секция содержимого
Для начала добавим легкий градиент в этой секции. Сначала используйте Rectangular Marquee Tool , чтобы выбрать область для размещения контента, затем - Gradient Tool (G) .
Шаг 9: Добавляем фон для секции Callout
Создайте новый слой поверх слоя Callout и заполните его созданным на шаге 8 паттерном с помощью меню Edit > Fill :
Поверните этот слой на 15 градусов, примените к нему наложение белого цвета и поместите его над секцией callout . Затем создайте новый слой и объедините его с белым решетчатым слоем. Дайте ему имя:
Примените режим наложения Soft Light к этому слою. Выберите область callout также с помощью инструмента Rectangular Marquee Tool или клавишей CTRL + клик мышкой на слое.
Затем выберите Rectangular Marquee Tool правым кликом мыши (CTRL + клик мышкой) и выберите select inverse и затем Delete . Эти действия уберут всю сетку, которая не находится в области блока callout :
Следующее, что мы должны сделать - убедиться в том, что решетчатый участок распространяется только на область рабочей зоны шириной в 960px. Используйте View > Show > Guides , затем добавьте маску слоя к решетчатому слою:
Выберите маску слоя, щелкнув по ней, затем, используя инструмент Gradient Tool (G) , выберите градиент от черного к прозрачному.
Мы собираемся использовать данный способ для того, чтобы уничтожить сетку, которая располагается за переделами области в 960px.
Убедитесь, что тип градиента - Linear , и он установлен от черного к прозрачному. Начинайте от края и перетаскивайте градиент к началу решетки.
Повторяйте это до тех пор, пока не будете удовлетворены результатом. Заметьте, что маска слоя показывает черный градиент вокруг наружных граней:
Шаг 5: Вставляем лого
Далее вставляем лого в левый верхний угол, равняем его по второму столбцу сетки, оставляя отступ в 40px. Для этого проекта я использовал лого, основанное на шрифте 50 pt Century Gothic .
Я уменьшил внутреннюю непрозрачность до 25%, поставил значения Distance равное 2px , Choke равное 0% и Size - 5px:
Шаг 2: Добавляем сетку
В сети доступно множество систем для создания сеток, а также примеров по созданию своих собственных систем. Цель данного руководства состоит в том, чтобы облегчить создание системы на первоначальных этапах.
Все это поможет провести рабочий процесс на одном дыхании, и прекрасно подходит для создания прототипов ваших макетов.
Для начала скачайте 960 grid system . После этого распакуйте 960 Grid System Натана
Смита в папку с шаблонами. Открываем 12 столбцовый макет 960 grid в Adobe Photoshop :
Теперь нам нужно создать базовую сетку. Базовая сетка поможет с промежутками между элементами и высотой линий. Создадим новый документ 24 на 24 пикселя, удалим фон, нарисуем линию, толщиной 1 px в нижней части документа.
Мы определим этот документ как шаблон: Edit > Define Pattern и присвоим ему запоминающееся название:
Далее возвращаетесь к нашему документу и создаете новый слой. Заполняете этот слой шаблоном, Edit> Fill . Так мы создадим базовую сетку:
И наконец, мы выделим нашу рабочую область, используя направляющие. Создаем новую направляющую View > New Guide , выбираем вертикальный тип и создаем направляющие в точках 360px, 840px и 1320px.
Мы выбрали именно эти точки, потому как при ширине рабочей области в 960px, между точками 360px и 1320px - центральная 840px.
Шаг 14: Добавляем список услуг
Повторяйте этот шаг для добавления данных:
Шаг 4: Добавляем заголовок (Header)
Мы начнем с верха страницы и будем двигаться к низу, потому заголовок будет первым элементом, с которым мы работаем.
Эта область будет использоваться под лого и панель меню:
Параметры стандартной Bootstrap сетки в PSD формате:
- Общая ширина рабочей области: 1920px;
- Ширина контейнера с отступами: 1170px;
- Ширина колонки без отступов: 68px;
- Ширина отступа (Gutter): 15px;
- Система сетки: 12-ти колоночная.
Расстояние между колонками и некоторые размеры могут иметь погрешность +/- 1px в связи с тем, что некоторые нечетные величины не могут быть поделены поровну. Но это некритично в масштабах разработки PSD макета.
Шаг 7: Добавляем Callout
Я назвал эту секцию Выкладка потому как на самом деле это именно то, что она делает — выкладывает информацию о странице.
Мы добавим градиент в этой секции. Двойной клик для вызова Layer Style Panel и выбор Gradient Overlay . Тип окрашивания выставляем равным transparent overlay и меняем blend mode на overlay , уменьшаем opacity до 30%:
Шаг 17: Подвал – правая часть
Читайте также: