Bootstrap сетка, PSD
При создании дизайна сайтов в Adobe Photoshop не обойтись без использования какой-либо системы сеток. Можно создать сетку самостоятельно, используя направляющие, либо воспользоваться уже готовым, проверенным решением — готовой сеткой Bootstrap в формате PSD. Не смотя на то, что дефолтные размеры Bootstrap сетки несколько стандартизируют дизайн, данный вариант успешно используют в своей работе огромное количество веб-дизайнеров по всему миру. Кроме того, такая стандартизация позволяет максимально быстро выполнять HTML верстку созданного макета, что неминуемо приводит к ускорению работы над проектом в условиях разработки сайтов на потоке или создания шаблонов.
Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
Параметры стандартной Bootstrap сетки в PSD формате:
- Общая ширина рабочей области: 1920px;
- Ширина контейнера с отступами: 1170px;
- Ширина колонки без отступов: 68px;
- Ширина отступа (Gutter): 15px;
- Система сетки: 12-ти колоночная.
Расстояние между колонками и некоторые размеры могут иметь погрешность +/- 1px в связи с тем, что некоторые нечетные величины не могут быть поделены поровну. Но это некритично в масштабах разработки PSD макета.
Правила работы с PSD сеткой Bootstrap
Существуют определенные правила работы с Bootstrap сеткой. Некоторые начинающие веб-дизайнеры не учитывают в своей работе эти правила, в результате чего возникает непонимание между верстальщиком и дизайнером, в случае, если над проектом работает команда. Bootstrap сетка в PSD формате для создания дизайна сайта разрабатывалась основываясь на «физических» свойствах сетки CSS фреймворка Bootstrap и дизайнер должен придерживаться определенных правил для исключения излишних коллизий в процессе разработки.
1. Крайние поля служат исключительно для отступов на малых разрешениях и не могут быть использованы для размещения каких-либо элементов дизайна или контента сайта.
2. Вы можете использовать любое количество одиночных колонок для визуализации различных блоков сайта.
3. После разделения макета на колонки и блоки, промежутки (Gutters) между ними не могут быть использованы для размещения каких-либо элементов дизайна или контента сайта.
4. Не бойтесь выходить за рамки сетки. Если вы решили сделать какую-то нестандартную секцию или блок — реализуйте вашу идею вне рамок Bootstrap сетки, если это необходимо. Но постарайтесь обеспечить ваше решение какой-либо системой, например, придерживайтесь центра макета или частично используйте возможности Bootstrap сетки, соблюдайте кратность элементов или придерживайтесь любой другой логической системы при создании нестандартного блока. Так вы значительно облегчите работу верстальщика, если над проектом трудится команда разработчиков. Вам скажут спасибо.
Последний пункт очень важен, так как многие начинающие веб-дизайнеры боятся выходить за рамки Bootstrap сетки и дизайн, в большинстве случаев, получается довольно однообразный и скучный. Помните, что направляющие Bootstrap сетки необходимы вам только для разметки блоков сайта, которые необходимо упорядочить в соответствии с системой сеток, это может быть разделение макета на базовые логические части — сайдбар + контент, определение элементов блока, таких, как айтемы карусели, секции новостей и так далее. В остальном, не стоит ограничиваться рамками сетки и делать визуализацию только по направляющим. Однако если вы создаете дизайн определенной секции или блока в соответствии с системой Bootstrap сетки, обязательно придерживайтесь правил из пунктов 1,2,3 выше.
Премиум уроки от WebDesign Master
Другие уроки по теме «Инструменты»
Модульная сетка в Photoshop
При создании макета сайта важно точное размещение его элементов относительно друг друга. Для этого удобно использовать вспомогательные возможности программы Photoshop: использование модульной сетки, линеек и направляющих. В этой статье рассмотрим применение линеек и модульной сетки в Photoshop.
Чтобы в окне программы появились линейки, нужно выполнить команды: Просмотр — Линейки (Ctrl + R). В скобках указаны сочетания клавиш, дублирующих эту команду. Линейки могут быть проградуированы в различных единицах: пикс., см, мм, дюйм… Чтобы настроить единицы, открываем окно настроек: Редактирование — Установки — Единицы измерения и линейки
Но гораздо удобнее это сделать другим способом. Нужно просто щелкнуть правой кнопкой мыши (ПКМ) на линейке и из контекстного меню выбрать нужные единицы.
При создании макета web-страницы лучше всего размеры измерять в пикселях.
Теперь о модульной сетке в Photoshop. Чтобы ее показать, выполним команды: Просмотр — Показать — Сетку (Ctrl + ‘).
Шаг сетки можно настраивать: Редактирование — Установки — Направляющие, Сетка и Фрагменты
Используя сетку, вы можете размещать отдельные блоки вашего макета точно по линиям.
Еще одна маленькая, но очень удобная особенность программы Photoshop. Если вы работаете с сеткой и рисуете прямоугольные фигуры, то курсор как бы «прилипает» к линиям сетки. Это дает возможность делать блоки с точными размерами. Впрочем, эту привязку можно отключить:
И еще одна тонкость. По умолчанию, начало координат находится в левом верхнем углу листа. Но мы можем его передвинуть в любую удобную нам точку. Для этого поставьте указатель мыши в квадратик, в котором соединяются линейки, и протащите его в нужную точку.
Чтобы вернуть начало координат в исходную точку, сделайте двойной щелчок в этом же квадратике.
Теперь вы можете использовать модульную сетку в Photoshop в своей работе над макетом сайта.
А как сделать, чтобы сайт приносил доход, вы сможете узнать, вступив в ПКП.
Bubble Sky
Пузырчатое небо ждет вас в новой Bubble Sky. Да, это красиво, но все же не так уж практично. Все эти пузырики мешают свету падать на землю, что затрудняет жизнь людей днем. Вам нужно будет постараться избавиться от всех пузырей. Как? Просто стреляйте шариком так, чтобы соприкоснулось три или более шариков. Лишь после этого они смогут лопнуть. Очистим небо, вперед!
Как нарисовать красивую таблицу в фотошопе
Доброго дня всем посетителям сайта pixelbox.ru!
В предыдущих уроках мы говорили о Сетке в фотошопе и направляющих. Эти знания вам пригодятся, чтобы нарисовать таблицу в Photoshop.
Нарисовать таблицу можно при помощи разных программ — Power Point, Excel, Word и т.п. Но в случае, если таблица содержит в себе изображения, лучшим вариантом будет программа Adobe Photoshop. Огромное количество инструментов и функций этого графического редактора позволяют создавать таблицы, которые можно сделать различного размера,типа и цвета, не ограничивая фантазию рамками стандартов.
В уроке вы научитесь:
- Создавать эскиз таблицы при помощи Направляющих и Сетки
- Рисовать таблицу с помощью инструмента Линия
- Добавлять в таблицу текст и изображения
Подготавливаем таблицу, расставляем направляющие
Давайте создадим таблицу с породами собак.
Переходим в меню Просмотр — Линейки (View — Rulers) и включаем Линейки.
Снова переходим в меню Просмотр для отображения Направляющих (Просмотр — Показать — Направляющие
Для большего удобства можно включить Сетку в фотошопе. Сделать это можно, перейдя в меню Просмотр — Показать — Сетку (View-Show-Grid) либо же нажать сочетание клавиш Ctrl + “ («Э» в русской раскладке клавиатуры):
Переходим в меню Редактирование — Установки — Направляющие, сетка и фрагменты (Edit- Preferences — Guides, Grid & Slices) либо нажимаем сочетание клавиш Ctrl+K и Ctrl+8.
Настраиваем Сетку:
Я изменила настройки на следующие, поменяв только частоту расположения линий на 200 пикселей:
При помощи Направляющих «чертим» набросок нашей будущей таблицы. Чтобы добавить Направляющую, при любом активном инструменте подведите мышь к Линейке (горизонтальной или вертикальной, это зависит от того, какая направляющая нужна), щелкните левой клавишей мышки по линейке и вытащите Направляющую. Перетаскиваем ее в нужное место и отпускаем клавишу мышки.
Совет: чтобы направляющие «прилипали» к линиям сетки и было проще их расставлять, не забудьте включить функцию «Привязка к…» Более подробно об этом в уроке о сетках.
Чтобы изменить положение уже добавленной направляющей, активируйте инструмент Перемещение (Move Tool) клавишей V на клавиатеру и перетащите Направляющую.
Вот какой эскиз таблицы получился в итоге:
«Ну все, готово» с облегчением выдохнете вы. Нет, пока не все. Направляющие и Сетка будут видны только в документах в формате PSD или TIFF, если же сохранить изображение в форматах jpg, png, gif – все нарисованные ранее линии не будут видимы.
Рисуем таблицу в фотошопе
Чтобы нарисовать видимые линии таблицы, активируем инструмент Линия (Line Tool):
В верхней панели настроек инструмента изменяем цвет
Вот какая таблица у нас получилась в итоге:
Добавляем в таблицу текст и картинки
Осталось только при помощи инструмента Текст (Type Tool) (можно активировать клавишей T)написать текст и вставить картинки.
При необходимости снова используем Направляющие, чтобы ровно расположить текст и картинки.
Чтобы добавить картинки, перейдите в меню Файл — Поместить (File-Place) и поочередно выберите изображения с собаками.
Трансформируйте картинки (Ctrl + T) и расположите в документе, при необходимости измените их размер, как это сделать показано в уроке «Как изменить размер слоя». Результат:Отключить направляющие и таблицу в фотошопе, чтобы они не мешали обзору таблицы.
В уроке вы узнали, как можно легко и качественно создавать таблицы в фотошоп. Возможно, теперь вы не будете использовать другие программы для создания таблиц, ведь в фотошопе это можно сделать красиво и быстро.
Adobe Photoshop 7.0 или более поздние версии Вы можете в программе Photoshop создать перспективную сетку, которая поможет вам согласовывать перспективу импортированных рисунков и изображений с перспективой фонового изображения. Эта техника особенно полезна в случае изображений, которые содержат четкие линии перспективы. Для того чтобы создать сетку, нарисуйте контуры, которые определяют точки схода и линию горизонта изображения. Затем нарисуйте линии сетки для позиционирования и определения размеров импортированного художественного изображения. Как только будет создана сетка, вы деформируете импортированное изображение, чтобы совместить его с линиями сетки. Пусть вас не тревожит, если направляющие выходят за пределы изображения: инструмент «Перо» отображает внешнюю часть изображения в режиме Full Screen (Полноэкранный).
|
Генераторы модульных сеток PSD и CSS / Полезное в сети / Постовой
На сегодняшний день ни один разработчик при создании дизайна адаптивного сайта или его верстке не может обойтись без модульной сетки с колонками, по которым выстраивается блочная структура сайта. Сетки используют как бывалые дизайнеры, так и начинающие. Последним просто необходимо брать на вооружение данную подборку с онлайн-инструментами для создания модульных сеток PSD и CSS, так как они значительно облегчат работу над созданием сайта и сделают его более правильным с технической точки зрения, особенно если речь идет о каком-то информационном ресурсе, например, новостном сайте, блоге или портале, где основной упор идет на качественную подачу информации.
Есть мнение, что подобные инструменты для создания сеток применимы только при создании адаптивного сайта. Однако если отталкиваться от личного опыта, можно поспорить с этим. На данный момент я использую сетки при создании 99% проектов, включая неадаптивные сайты. Более того. На основе сеток я делаю множество других задач, например, баннеры или подобные малевалки.
Как это работает? Очень просто. Дизайнер указывает параметры для генерации заранее утвержденной всей командой разработчиков сетки. Далее скачивает изображение с отрисованными столбцами в формате PNG или PSD, и по полученным линиям выстраивает дизайн сайта. Верстальщик же, имея заранее готовый фреймворк, уже начинает верстать. Все это значительно ускоряет работу над сайтом как для дизайнера, так и для верстальщика.
Если говорить о верстке по модульной сетке, то для этого уже создано множество css фреймворков. Наиболее распространенный — это Bootstrap. Если же проект не на Bootstrap, то некоторые из предложенных инструментов способны генерировать вместе с изображением сетки еще и целый свой фреймворк с зашитыми в него кастомизированными параметрами, которые были указаны на первом этапе.
Итак. К вашему вниманию набор инструментов для создания модульных сеток PSD и CSS, которые значительно облегчат создание сайта.
Смотрите также:
Лучшие инструменты для тестирования адаптивной верстки
Responsify.it
Простой и удобный инструмент для создания адаптивной сетки. Генерирует как PNG файл для разработки дизайна, так и css стили для верстальщика. Большим плюсом данного сервиса является то, что можно сразу посмотреть готовый результат. Внизу есть переключатель разрешений экрана. С его помощью можно увидеть, как перестраиваются колонки сайта на разных устройствах.Grid Calculator
Мой любимый инструмент для создания модульных сеток, которым я регулярно пользуюсь. Это некий калькулятор, который мгновенно проинформирует, какой будет ширина колонки при определенных параметрах модульной сетки.Это очень удобно и полезно. Grid Calculator позволяет генерировать модульные сетки в формате PNG, векторные изображения и паттерны для Photoshop JSXModular Grid Pattern
Хороший генератор изображений с модульными сетками в формате PSD и PNG. Основным его отличием от большинства конкурентов является то, что он умеет выстраивать не только колонки, но еще и горизонтальные линии. Для определенных задач будет полезным инструментом. Например, облегчит работу в нудной отрисовке таблиц с данными при разработке дизайна сайта.Gridulator
Калькулятор модульных сеток, который рассчитывает на основе общей ширины макета и количества колонок все возможные варианты (с круглыми числами) ширины колонки и расстояния между колонками. Можно посмотреть результат визуально, а также скачать сетку в формате PNG.Grid Designer
Простой и понятный конструктор модульных сеток. Основная особенность — позволяет объединять ячейки. Умеет генерировать стили CSS и структуру HTML — каркас будущего сайта. Помимо конструктора модульных сеток, данный инструмент оснащен визуальным редактором типографики, стили которой будут выгружены в конечный результат вместе с настройками сетки.Как сделать и убрать сетку в Photoshop
Приветствуем вас, дорогие читатели и ученики. Сегодня мы хотим поговорить о таком инструменте фотошопа, как пиксельная сетка. Мы постараемся рассказать вам, что это такое, для чего она применяется, а также как ее можно включить и выключить.
Что представляет собой пиксельная сетка в фотошопе
Пиксельная сетка – это особая функция фотошопа, которая предназначается профессиональным дизайнерам, чтобы создавать максимально точные эскизы. Собственно говоря, основная задача этого инструмента – помогать редактору сохранять пропорции части картинки на большом увеличении. Т.е., вы сможете с точностью до пикселя располагать различные объекты, на фото, рисовать их правильно, в нужных размерах и пропорциях и т.д.
Также – вы должны знать, что сетка не будет отображаться, если вы сохраните картинки в форматах jpg, png, gif, а также при печати. Ну а если вы пользуетесь форматами PSD или TIFF – то при передаче файла – получающий сможет обнаружить эту сетку. Поэтому мы и расскажем вам, как ее включать и выключать.
Как создать и удалить сетку в фотошопе
Для примера – мы возьмем обычную картинку в нужном формате. Как видите – ничего не видно и никакой сетки нет. Все дело в том, что она появляется после того, как вы воспользуетесь увеличением, не менее х500.
Чтобы вы нагляднее поняли, о чем идет речь – давайте мы приблизим нашу бабочку из примера в 500 раз. Как видите – сетка появилась.
Если она мешает вам работать, если она вам не нужна – просто найдите в верхнем меню пункт «просмотр». Он откроет вам еще одно меню. Там – выбирайте «показать», откроется еще одна табличка с командами. И там – вы должны найти пункт «пиксельная сетка».
Если при увеличении у вас появилась сетка, и вам ее нужно убрать – то просто уберите галочку, стоящую возле этой команды. Если же наоборот, вам нужна пиксельная сетка для работы – то откройте этот пункт и поставьте галочку. Все – просто.
На этом наш урок подходит к концу. Спасибо, что воспользовались им именно у нас, всем удачи и до новых встреч.
Дизайн цветовой сеткив Photoshop
Как создать дизайн цветной сетки
Шаг 1. Создайте новый документ Photoshop
Начнем с создания нового документа для сетки. Подойдите к меню File в строке меню в верхней части экрана и выберите New :
Перейдите в Файл> Создать.
Откроется диалоговое окно Photoshop New Document . Я собираюсь создать квадратный документ, введя 1000 пикселей для Width и Height .Конечно, вы можете ввести любые размеры, которые вам нужны, но эффект, как правило, работает лучше всего, если вы придерживаетесь квадратной формы. Для этого урока я оставлю значение Resolution равным 72 пикселя / дюйм , что нормально, если вы создаете этот эффект для Интернета. Если вы планируете распечатать окончательный результат, вам нужно создать документ большего размера и установить разрешение 240 пикселей / дюйм или выше. Когда вы закончите, нажмите OK, чтобы закрыть диалоговое окно. На вашем экране появится новый документ:
Диалоговое окно «Новый документ».
Шаг 2: Показать линейки
Подойдите к меню View вверху экрана и выберите Rulers или нажмите Ctrl + R (Win) / Command + R (Mac), чтобы быстро включить линейки с помощью сочетания клавиш :
Откройте «Просмотр»> «Линейки».
Шаг 3. Измените тип измерения линейки на процент
Отображает линейки Photoshop в верхней и левой части документа. В зависимости от того, для какого типа измерения установлены ваши линейки в настройках Photoshop, они, вероятно, будут отображать пиксели или дюймы.Переместите курсор мыши на линейки вверху или влево, затем Щелкните правой кнопкой мыши (Win) / , удерживая клавишу Control, щелкните (Mac) внутри линейки и выберите процентов из списка. Вы увидите, что линейки меняются на процентное приращение:
Щелкните правой кнопкой мыши (Win) / щелкните, удерживая клавишу Control (Mac), внутри линейки и выберите «Процент» из списка.
Шаг 4: вытяните горизонтальные и вертикальные направляющие с шагом 10 процентов
Причина, по которой мы включили линейки, заключалась в том, чтобы мы могли легко добавить в наш документ направляющие с равным интервалом, которые затем стали нашими линиями сетки.Давайте сначала добавим вертикальные направляющие. Щелкните внутри линейки слева от документа и, удерживая кнопку мыши, вытяните первую направляющую. Используйте верхнюю линейку, чтобы разместить направляющую на отметке 10% (отпустите кнопку мыши, чтобы разместить направляющую):
Щелкните внутри левой линейки и растяните вертикальную направляющую до отметки 10%.
Сделайте то же самое, чтобы добавить направляющую через каждые 10% (20%, 30%, 40% и т. Д.), Вплоть до отметки 90%. Ваш документ должен теперь отображаться разделенным на 10 вертикальных столбцов с равным интервалом:
Направляющие делят документ на 10 вертикальных столбцов.
Затем выполните те же действия, чтобы добавить горизонтальные направляющие. Щелкните внутри верхней линейки и, удерживая кнопку мыши, вытяните горизонтальную направляющую. С помощью левой линейки поместите направляющую на отметку 10%. Продолжайте вытягивать горизонтальные направляющие с шагом 10% (20%, 30%, 40%, как и раньше) до отметки 90%. Когда вы закончите, у вас должно быть одинаковое количество горизонтальных и вертикальных направляющих, разделяющих документ на сетку квадратов:
Направляющие делят документ на сетку квадратов.
Установив направляющие, нажмите на клавиатуре Ctrl + R (Win) / Command + R (Mac), чтобы скрыть линейки, поскольку они нам больше не нужны.
Шаг 5. Добавьте новый пустой слой и назовите его «Сетка»
Удерживая нажатой клавишу Alt (Win) / Option (Mac), щелкните значок New Layer в нижней части панели слоев:
Удерживая нажатой клавишу «Alt» (Win) / «Option» (Mac), щелкните значок «Новый слой».
Обычно Photoshop просто добавляет новый пустой слой, но, удерживая Alt (Win) / Option (Mac) при щелчке значка «Новый слой», мы говорим ему сначала открыть диалоговое окно New Layer , что дает нам возможность дать имя новому слою перед его добавлением.Назовите слой «Сетка», затем нажмите OK:
.Назовите новый слой «Сетка».
Новый пустой слой появится на панели «Слои» над фоновым слоем:
Photoshop добавляет новый слой и называет его «Сетка».
Шаг 6. Создайте выделение из направляющих
Мы разделили наш документ на сетку с помощью направляющих Photoshop, но направляющие предназначены только для наглядности. Они не принесут нам никакой реальной пользы, если мы каким-то образом не преобразуем их в настоящую пиксельную сетку, и мы можем легко это сделать, используя пару редко используемых инструментов выделения Photoshop — Инструменты выделения одной строки и одного столбца.
Щелкните инструмент Rectangular Marquee Tool в верхней части панели инструментов и удерживайте кнопку мыши в течение секунды или двух, пока не появится небольшое всплывающее меню, показывающее другие инструменты, вложенные сзади, затем выберите инструмент Single. Row Marquee Tool из списка:
Щелкните и удерживайте значок инструмента Rectangular Marquee Tool, затем выберите инструмент Single Row Marquee Tool.
Как следует из названия, инструмент Single Row Marquee Tool выберет одну горизонтальную строку пикселей в документе.Чтобы использовать этот инструмент, нам просто нужно щелкнуть в любом месте документа, и Photoshop автоматически выберет пиксель, на который мы щелкнули, а также все остальные пиксели в этой строке слева направо. Мы собираемся использовать этот инструмент, чтобы преобразовать горизонтальные линии сетки в серию контуров выделения. Сначала переместите курсор прямо над верхней горизонтальной линией сетки (той, которую вы поместили на отметке 10%) и щелкните. Вы увидите контур выделения толщиной 1 пиксель вдоль направляющей:
Щелкните в любом месте первой горизонтальной направляющей, чтобы добавить контур выделения вокруг нее.
Удерживая нажатой клавишу Shift , щелкните следующую горизонтальную направляющую под ней. Это добавит в документ второй контур выделения. Продолжайте удерживать нажатой клавишу Shift и нажимать на все горизонтальные направляющие, пока не появится контур выделения вдоль каждой из них. Всего вы должны увидеть 9 строк контура выделения. Убедитесь, что вы удерживаете нажатой клавишу Shift при нажатии на каждую новую направляющую, иначе вы просто замените предыдущий контур выделения новым:
Удерживая Shift, щелкните каждую горизонтальную направляющую, чтобы добавить контур выделения вокруг каждой из них.
Теперь нам нужно сделать то же самое с вертикальными направляющими, что означает, что нам нужно переключиться на инструмент Single Column Marquee Tool. Щелкните инструмент Single Row Marquee Tool на панели инструментов (он появится там, где значок Rectangular Marquee Tool появился ранее) и удерживайте кнопку мыши, пока не появится всплывающее меню, затем выберите Single Column Marquee Tool из список:
Щелкните и удерживайте значок инструмента «Однорядная область», затем выберите инструмент «Область в одну колонку».
Мы хотим, чтобы наши вертикальные контуры выделения были добавлены к уже имеющимся горизонтальным контурам выделения, поэтому еще раз удерживайте нажатой клавишу Shift , затем щелкайте каждую из вертикальных направляющих в документе, пока все они не будут выделены. Когда вы закончите, у вас должны появиться контуры выделения вдоль каждой направляющей, по горизонтали и вертикали:
Сетка горизонтальных и вертикальных контуров выделения.
Шаг 7: Залейте выделение черным
Перейдите в меню Edit вверху экрана и выберите Fill :
Перейдите в Edit> Fill.
Когда появится диалоговое окно «Заливка», установите для параметра Использовать вверху значение Черный , затем нажмите «ОК», чтобы закрыть диалоговое окно:
Измените параметр «Использовать» на «Черный», затем нажмите «ОК».
При этом выделение закрашивается черным, хотя это может быть трудно увидеть из-за направляющих и контуров выделения на пути, поэтому перейдите к меню Select в верхней части экрана и выберите Deselect , которое удалит контуры выбора:
Выберите «Выбрать»> «Отменить выбор».
Затем, чтобы отключить направляющие, перейдите в меню View , выберите Show , а затем выберите Guides . Сначала вы увидите галочку слева от слова «Руководства», которая сообщает нам, что направляющие в настоящее время видны. Щелчок по направляющим снимает галочку и отключает направляющие:
Выберите «Просмотр»> «Показать»> «Направляющие».
После удаления контуров и направляющих выделения мы видим нашу черную сетку на слое Grid:
Появятся черные линии сетки.
Шаг 8. Откройте фотографию, которую хотите использовать с эффектом
Откройте фотографию, которую вы будете использовать, с эффектом сетки. Вот мое изображение:
Откройте фото.
Если вы используете Photoshop CS3 или более раннюю версию, фотография автоматически откроется в собственном плавающем окне документа. Если вы используете Photoshop CS4 или CS5, в зависимости от того, как у вас все настроено в настройках Photoshop, фотография может открываться в документе с вкладками. В этом случае, чтобы упростить следующий шаг, перейдите в меню Window вверху экрана, выберите Arrange , а затем выберите Float All в Windows (только CS4 и CS5):
В Windows выберите «Окно»> «Упорядочить»> «Переместить все» (только для Photoshop CS4 и CS5).
Шаг 9. Перетащите фотографию в сетку. Документ
Щелкните в любом месте окна документа сетки, чтобы сделать его активным, затем щелкните фоновый слой на панели «Слои», чтобы выбрать его. Таким образом, когда мы перетаскиваем фотографию в документ, как мы сейчас сделаем, фотография появится на отдельном слое между слоями Background и Grid:
Выделив окно документа сетки, щелкните фоновый слой на панели «Слои».
Теперь щелкните в любом месте окна документа фотографии, чтобы сделать его активным, и выберите Move Tool на панели инструментов:
Возьмите инструмент «Перемещение» в верхней части панели «Инструменты».
Удерживайте нажатой клавишу Shift , затем щелкните инструментом «Перемещение» внутри окна документа фотографии и перетащите фотографию в окно документа сетки:
Выбрав инструмент «Перемещение», удерживая нажатой клавишу «Shift», перетащите фотографию в сетку документа.
Отпустите кнопку мыши, затем отпустите клавишу Shift, и фотография появится в центре окна документа сетки. На этом этапе вы можете закрыть документ с фотографией, поскольку он нам больше не нужен:
Удерживание клавиши Shift — это то, что центрирует фотографию внутри документа при перетаскивании.
Обратите внимание, что перед фотографией появляется сетка. Это потому, что, если мы посмотрим на панель Layers, мы увидим, что фотография была размещена на отдельном слое под слоем Grid, как мы и хотели:
Photoshop поместил фотографию на новый слой прямо над активным слоем, поэтому сначала мы выбрали фоновый слой.
Шаг 10: Измените размер фотографии, если необходимо, с помощью Free Transform
Если вам нужно изменить размер фотографии внутри документа сетки, перейдите в меню Edit вверху экрана и выберите Free Transform :
Перейдите в Edit> Free Transform.
Это помещает ограничивающую рамку «Свободное преобразование» и обрабатывает изображение. Если вы не видите ручки, потому что края фотографии выходят за пределы видимой области в окне документа, перейдите в меню View и выберите Fit on Screen :
Выберите «Просмотр»> «По размеру экрана».
Photoshop мгновенно уменьшит изображение настолько, чтобы все, включая ручки Free Transform, поместилось в окне документа. Чтобы изменить размер фотографии, удерживайте нажатой клавишу Shift , затем щелкните любой из четырех угловых маркеров и перетащите их.Удерживая нажатой клавишу Shift при перетаскивании, вы сохраните исходное соотношение сторон изображения, чтобы случайно не исказить его внешний вид. Если вы хотите изменить размер фотографии от центра, а не от угла, удерживайте Shift + Alt (Win) / Shift + Option (Mac) при перетаскивании любого из угловых маркеров. Если вам нужно переместить изображение внутри документа, просто щелкните в любом месте внутри ограничительной рамки «Свободное преобразование» и перетащите его на место. Когда вы закончите, нажмите Enter (Win) / Return (Mac), чтобы принять изменение и выйти из команды Free Transform:
Перетащите любой из угловых маркеров, чтобы изменить размер изображения с помощью Free Transform.
Если вы увеличили масштаб изображения мгновение назад с помощью команды «По размеру экрана» и хотите снова увеличить масштаб, когда вы закончили изменять размер изображения, вернитесь в меню View и выберите Actual Pixels (см. Учебник по масштабированию и панорамированию в Photoshop для получения дополнительной информации по увеличению и уменьшению масштаба документов):
Перейдите в раздел «Просмотр»> «Фактические пиксели».
Шаг 11: Выберите слой сетки
На этом вся начальная тяжелая работа сделана. Мы создали нашу сетку, мы перетащили нашу фотографию в документ сетки, изменили размер и переместили фотографию на место.Мы готовы повеселиться, раскрашивая сетку! Во-первых, нам нужно выбрать слой Grid, поэтому щелкните его на панели Layers, чтобы выбрать его:
Щелкните слой сетки, чтобы сделать его активным.
Шаг 12: Выберите инструмент Magic Wand Tool
Чтобы раскрасить сетку, нам нужен способ выделения отдельных квадратов, и мы можем сделать это с помощью Photoshop Magic Wand Tool . Выберите его на панели инструментов. Если вы используете Photoshop CS2 или более раннюю версию, вы можете просто щелкнуть значок Magic Wand.Для Photoshop CS3 и более поздних версий щелкните инструмент Quick Selection Tool , затем удерживайте кнопку мыши нажатой, пока не появится всплывающее меню, и выберите в меню Magic Wand:
В Photoshop CS3 и выше Волшебная палочка скрывается за инструментом быстрого выбора.
Шаг 13: Выберите квадраты внешних краев
Чтобы выбрать квадрат в сетке, убедитесь, что у вас выбран слой «Сетка» на панели «Слои», затем просто щелкните внутри квадрата Волшебной палочкой.Контур выделения появится вокруг внешних краев квадрата. Чтобы затем добавить дополнительные квадраты к выделению, удерживайте нажатой клавишу Shift и щелкните внутри нужных квадратов. Каждый новый квадрат, внутри которого вы щелкаете, будет выбран и добавлен к ранее выбранным квадратам. Начнем с выделения всех квадратов по внешнему краю сетки. Сначала щелкните внутри квадрата в верхнем левом углу сетки. Вокруг него появится контур выделения:
Щелкните внутри верхнего левого квадрата в сетке с помощью инструмента Magic Wand Tool, чтобы выбрать его.
Удерживая нажатой клавишу Shift , продолжайте щелкать внутри каждого квадрата по внешним краям сетки, чтобы добавить их все в выделение:
Теперь вокруг всех квадратов внешних краев выделены контуры.
Я собираюсь добавить еще несколько квадратов к своему выделению, снова удерживая нажатой клавишу Shift и щелкая внутри них, чтобы добавить их к ранее выбранным квадратам. Чтобы было легче увидеть, какие квадраты я выделил, я раскрасил их желтым цветом (это не часть эффекта, это просто для облегчения просмотра квадратов, которые я выделил на скриншоте):
Мои изначально выбранные квадраты.
Шаг 14. Добавьте новый слой ниже слоя сетки
Залейте эти исходные квадраты белым цветом, который создаст границу для эффекта. Удерживая нажатой клавишу Ctrl (Win) / Command (Mac), щелкните значок New Layer в нижней части панели слоев:
Удерживая Ctrl (Win) / Command (Mac), щелкните значок «Новый слой».
Обычно Photoshop добавляет новые слои непосредственно над текущим выбранным слоем, но, удерживая клавишу Ctrl (Win) / Command (Mac) при нажатии значка «Новый слой», слой добавляется на ниже текущего выбранного слоя.На панели «Слои» мы видим, что теперь у нас есть новый пустой слой между фотографией на слое 1 и слоем сетки:
Новый слой появляется ниже, а не выше слоя сетки.
Шаг 15: Залейте выделенные квадраты белым
Поднимитесь в меню Edit вверху экрана и снова выберите команду Fill . На этот раз, когда появится диалоговое окно «Заливка», измените параметр Использовать на Белый . Когда закончите, нажмите ОК:
Установите для параметра «Использование» значение «Белый».
Photoshop заполняет выбранные квадраты белым цветом. Снимите выделение с квадратов, перейдя в меню Select и выбрав Deselect , или просто нажмите Ctrl + D (Win) / Command + D (Mac), чтобы отменить выбор с помощью сочетания клавиш:
Вокруг изображения появляется рамка из белых квадратов.
Шаг 16: Выберите слой сетки
Давайте выберем несколько разных квадратов для раскрашивания. Во-первых, нам нужно, чтобы на панели Layers был активен слой Grid , поэтому щелкните по нему, чтобы выбрать.Помните, что вам всегда нужно выбрать слой Grid, прежде чем вы сможете выбрать любые квадраты:
Щелкните слой сетки, чтобы выбрать его.
Шаг 17: Выберите разные квадраты
Теперь, когда слой сетки активен, щелкните внутри начального квадрата, чтобы выбрать его, затем, удерживая нажатой клавишу Shift , щелкните внутри других квадратов, чтобы добавить их к ранее выбранным квадратам. Если вы передумали и хотите удалить квадрат из выделения, удерживайте нажатой клавишу Alt (Win) / Option (Mac) и щелкните внутри квадрата, чтобы отменить выбор.Здесь я снова выделил квадраты желтым цветом, чтобы их было легче увидеть на скриншоте:
Удерживая Shift, щелкните внутри нескольких разных квадратов, чтобы выбрать их.
Шаг 18: Выберите слой с фотографиями
Щелкните слой фотографии (Layer 1) на панели Layers, чтобы выбрать его:
Выберите слой с фотографией на панели «Слои».
Шаг 19: Раскрасьте квадраты с помощью корректирующего слоя оттенка / насыщенности
Щелкните значок New Adjustment Layer в нижней части панели слоев:
Щелкните значок «Новый корректирующий слой».
Выберите Hue / Saturation из появившегося списка корректирующих слоев:
Выберите оттенок / насыщенность из списка.
Если вы используете Photoshop CS4 или CS5, элементы управления и параметры для корректирующего слоя «Цветовой тон / насыщенность» появятся внутри панели настроек . В CS3 и ранее откроется отдельное диалоговое окно «Цветовой тон / насыщенность». Сначала выберите опцию Colorize , установив соответствующий флажок. Затем выберите цвет, которым хотите раскрасить выделенные квадраты, перетащив ползунок Hue .Для этих квадратов я собираюсь оставить ползунок оттенка полностью влево (его положение по умолчанию), который выбирает красный . Конечно, вы можете выбрать любой понравившийся вам цвет. Чтобы увеличить насыщенность цвета, перетащите ползунок Saturation вправо. Я собираюсь установить значение насыщенности 55 . Следите за своим документом, перетаскивая ползунки для предварительного просмотра результатов. Для пользователей Photoshop CS3 и более ранних версий: нажмите OK, когда закончите, чтобы закрыть диалоговое окно:
Щелкните параметр «Раскрасить», затем выберите цвет с помощью ползунков «Оттенок» и «Насыщенность».
Шаг 20. Измените режим наложения для корректирующего слоя на Color
.Если мы посмотрим на панель «Слои», мы увидим корректирующий слой, расположенный прямо над слоем фотографии. Убедитесь, что он выбран (выделен синим), затем перейдите к опции Blend Mode в верхней части панели Layers и измените его режим наложения с Normal (режим по умолчанию) на Color . Это гарантирует, что мы меняем только цвета изображения, а не значения яркости:
Измените режим наложения корректирующего слоя «Цветовой тон / насыщенность» на «Цвет».
Вот мой документ после раскрашивания некоторых квадратов красным:
К эффекту добавлено несколько красных квадратов.
Шаг 21: выберите и раскрасьте больше квадратов
Повторите шаги 16-20, чтобы выделить и раскрасить больше квадратов. Сначала выберите слой сетки на панели слоев, затем щелкните внутри квадрата, чтобы выбрать его с помощью Magic Wand. Удерживая Shift , щелкните внутри других квадратов, чтобы добавить их к выделению. Щелкните слой фото на панели слоев, чтобы выбрать его, затем щелкните значок New Adjustment Layer и выберите Hue / Saturation .Выберите опцию Colorize , затем выберите цвет с помощью ползунка Hue и уровень насыщенности с помощью ползунка Saturation . Щелкните OK, чтобы закрыть диалоговое окно (CS3 и ранее). Наконец, измените режим наложения нового корректирующего слоя на Color .
Вы также можете использовать корректирующий слой Hue / Saturation, чтобы полностью обесцветить некоторых квадратов, оставив их черно-белыми. Для этого выберите несколько квадратов, затем добавьте корректирующий слой Hue / Saturation, как обычно, но вместо того, чтобы выбирать цвет с помощью ползунка Hue, просто перетащите ползунок Saturation до упора влево, что удалит все цвет (также не нужно выбирать опцию Colorize):
Удалите весь цвет с некоторых квадратов, перетащив ползунок «Насыщенность» до упора влево.
Вот мой эффект после раскрашивания большего количества квадратов дополнительными корректирующими слоями Hue / Saturation. Если вы хотите использовать те же цвета, что и я, для синего я установил оттенок на 200, насыщенность на 30. Для зеленого оттенок был установлен на 120, насыщенность 25. Для пурпурного оттенок был 289, насыщенность 35. И поскольку я просто Как уже упоминалось, для черного и белого квадратов насыщенность была установлена на -100 путем перетаскивания ползунка до упора влево:
Эффект раскрашенной сетки.
Шаг 22: попробуйте другой цветовой режим для некоторых корректирующих слоев
Единственная проблема, с которой я столкнулся с моим результатом, заключается в том, что он на самом деле не выглядит таким ярким и красочным, как я надеялся.Один из способов изменить это — изменить режим наложения для некоторых корректирующих слоев. Если мы посмотрим на панель «Слои», то увидим все корректирующие слои, которые я использовал для раскрашивания квадратов. Всего их пять, включая тот, который я использовал для черно-белого эффекта:
Для эффекта использовались пять корректирующих слоев.
Чтобы сделать изображение более интересным, попробуйте изменить режим наложения для некоторых корректирующих слоев на какой-нибудь другой, кроме цвета. Для этого просто щелкните корректирующий слой на панели «Слои», чтобы выбрать его, затем измените режим наложения в верхней части панели «Слои».Например, я думаю, что красный цвет на моем изображении выглядит немного тусклым, поэтому я нажимаю на верхний корректирующий слой оттенка / насыщенности на панели слоев, чтобы выбрать его (так как это тот, который я использовал для добавления красного), затем Я изменю его режим наложения с Цветного на Экран :
Выбираем красный корректирующий слой «Оттенок / насыщенность», затем меняем его режим наложения на «Экран».
Режим наложения Screen делает изображение ярче, но также имеет тенденцию к снижению насыщенности цвета, поэтому для компенсации с выбранным красным корректирующим слоем Hue / Saturation я вернусь на панель настроек и увеличу значение Saturation для красного до 70 (для пользователей Photoshop CS3 и более ранних версий: щелкните миниатюру корректирующего слоя на панели «Слои», чтобы повторно открыть диалоговое окно «Цветовой тон / насыщенность» и внести какие-либо изменения, затем нажмите «ОК», чтобы закрыть диалоговое окно):
Для изменения режима наложения может потребоваться настройка уровня насыщенности цвета.
Вот мое изображение после изменения режима наложения красного на Screen и увеличения его насыщенности цвета. Обратите внимание, что красные квадраты теперь стали ярче:
Screen — популярный режим наложения, который обычно используется для быстрого увеличения яркости изображений.
Я сделаю то же самое с пурпурным корректирующим слоем оттенка / насыщенности, сначала щелкнув по нему, чтобы выбрать его на панели слоев, затем изменил его режим наложения на экран и увеличил его насыщенность цвета до 55 на панели настроек (или в диалоговом окне). box в CS3 и ранее).Другие режимы наложения, которые могут дать вам хорошие результаты, включают Умножение (для более темного цвета), а также Перекрытие, которое даст вам более высокий контрастный эффект, но также может изменить внешний вид самого цвета. Вот мой эффект с красным и фиолетовым квадратами, установленными в режиме наложения экрана:
Различные режимы наложения дадут вам разные эффекты. Screen, Multiply и Overlay — хорошие варианты.
Шаг 23. Измените цвет линий сетки на белый
В качестве последнего шага для создания эффекта давайте изменим внешний вид самих линий сетки, сначала изменив их цвет с черного на белый.Щелкните слой сетки на панели слоев, чтобы выбрать его, затем щелкните значок Lock Transparent Pixels сразу под параметром режима наложения (это первый из четырех значков в строке):
Щелкните значок «Заблокировать прозрачные пиксели».
Шаг 24: Залейте линии сетки белым цветом
Если на слое сетки выбран параметр «Заблокировать прозрачные пиксели», все, что мы делаем со слоем, будет влиять только на сами пиксели. Это не повлияет на прозрачные области.Таким образом, если мы заполним слой, скажем, белым цветом (как мы собираемся сделать), только линии сетки будут заполнены белым. Прозрачные области слоя останутся прозрачными.
Перейдите в меню Edit и снова выберите Fill . Когда появится диалоговое окно «Заливка», для параметра « Использовать » уже должно быть установлено значение Белый , поскольку это то, что мы установили в последний раз, поэтому просто нажмите «ОК», чтобы закрыть диалоговое окно. Photoshop заполнит линии сетки белым цветом:
Photoshop заполняет слой белым цветом, но затрагивает только линии сетки.
Шаг 25: Добавьте стиль слоя «Обводка»
Если вы хотите увеличить толщину линий сетки, щелкните значок Layer Styles в нижней части панели Layers:
Щелкните значок «Стили слоя».
Выберите Stroke из появившегося списка стилей слоя:
Выберите Stroke из списка.
Откроется диалоговое окно Photoshop Layer Style , в котором в среднем столбце указаны параметры обводки. Щелкните образец цвета рядом со словом Color , чтобы открыть палитру цветов .Выберите белый цвет в палитре цветов, затем щелкните OK, чтобы закрыть его. Теперь, когда белый цвет является цветом обводки, оставьте Позиция установленным на Снаружи и отрегулируйте ширину обводки, перетащив ползунок Размер , не сводя глаз с документа, чтобы оценить результат. Я собираюсь установить размер обводки на 2 пикселей (пикселей):
Измените цвет обводки на белый, затем отрегулируйте ее ширину с помощью ползунка «Размер».
Щелкните OK, чтобы закрыть диалоговое окно Layer Style, и все готово! Вот мой последний эффект цветовой сетки:
Окончательный результат.
Как создать сетку в Photoshop — Smashing Magazine
Создание сетки обычно является одним из самых первых дел, которые вы делаете при запуске дизайнерской композиции. В конце концов, он обеспечивает базовую структуру, на которой будет лежать остальная часть вашего дизайна. В этой статье мы расскажем о двух различных методах эффективного построения сетки. Эти методы позволяют быстро и эффективно формировать сетку, чтобы вы могли уделять больше времени проектированию.
Метод 1
Первый метод использует GuideGuide от Cameron McEfee для создания вертикальных столбцов.Инструкции по его установке можно найти на странице GuideGuide. Также есть видеоурок по его использованию, подготовленный Расселом Брауном из Adobe.
Настройте сетку за 5 секунд
- Определите поля, количество столбцов и ширину желоба. Затем нажмите «Создать направляющие».
- Если холст для вашей дизайнерской композиции широк, произведите быстрые математические вычисления, чтобы длина полей позволяла ограничить сетку вашими 960 пикселями. Например, если ширина холста составляет 1200 пикселей, то левое и правое поля будут составлять по 120 пикселей каждое.
Пример 12 столбцов с 20-пиксельными промежутками и полями, установленными на 120 пикселей.
Таким же образом можно установить базовую сетку, но в итоге у вас будет много направляющих. Лучшим вариантом может быть метод, представленный в видеоролике Method & Craft Майком Пресиусом…
Расширяемая базовая сетка Method & Craft
Вот краткое описание шагов по настройке расширяемой базовой сетки.
- Установите значение базовой линии сетки, затем создайте шаблон узора.Базовая сетка определяется интерлиньяжем (или высотой строки) основного текста. Например, если основная копия вашего дизайна установлена в 13-пунктах Helvetica, с интерлиньяжем в 18 пунктов, тогда вы должны настроить сетку базовой линии 18 пикселей.
- Создайте файл Photoshop, равный высоте вашей базовой сетки, заполните нижний пиксель и оставьте оставшиеся пиксели прозрачными. В этом случае размеры вашего холста будут составлять 1 пиксель в ширину и 18 пикселей в высоту.
- «Выбрать все», а затем сохраните это как новый узор.Вы можете сделать это, перейдя в Edit → Define Pattern…
- Перейдите в Adjustment Layer → Pattern и выберите только что созданный шаблон сетки.
- Отрегулируйте непрозрачность по желанию.
Пример метода 1 со столбцами и базовой сеткой вместе.
Преимущества
- Вы получаете дополнительную базовую сетку, которую можно использовать независимо от сетки вертикальных столбцов. Базовая сетка может создавать визуальный беспорядок, когда накладывается поверх дизайнерской композиции.С помощью этого метода его можно просто включить при необходимости.
- Если вы предпочитаете использовать направляющие для своей сетки, это лучшее решение.
- Вы можете скрыть и показать сетку с помощью простого ярлыка.
Недостатки
- Использование вертикальных направляющих для отметки других элементов в документе может быть затруднено, поскольку вы можете спутать их с сеткой.
- По сравнению со способом 2, ваши параметры сетки не такие конкретные или исчерпывающие (например, установка высоты горизонтального модуля).
- Линии сетки определяются математически и не обязательно совпадают с пиксельной сеткой. Это означает, что в некоторых случаях ваши направляющие могут падать неравномерно и в конечном итоге располагаться посередине реальных пикселей.
- Этот метод требует двух отдельных процессов для создания вертикальной и базовой сетки по сравнению с одним подходящим методом.
Method 2
Modular Grid Pattern — это универсальное сеточное решение. Инструмент создает вертикальную столбчатую сетку и базовую сетку как один узор.Есть два способа использовать модульную сетку:
Application Panel Помимо Photoshop, это также работает с Fireworks, GIMP и Microsoft Expression Design. Обратите внимание, что у вас должна быть последняя версия программного обеспечения (Adobe CS5 или эквивалент одного из других приложений) и подключение к Интернету, чтобы эта панель работала. При этом, если вы уже создали шаблон и сохранили его в своей библиотеке, вы сможете получить к нему доступ, не нуждаясь ни в чем другом.
Веб-приложение Это работает в Chrome, Firefox, Safari и Opera. Веб-приложение позволяет создавать сетку и загружать ее прямо из браузера во всех форматах.
Какой бы способ вы ни выбрали, просто выберите ширину модуля, ширину желоба и номер базовой линии, а Modular Grid Pattern сделает все остальное. Вы также можете указать высоту для горизонтального модуля.
Преимущества
- Это быстрый способ получить все; универсальный слой.
- У вас есть возможность загрузить файл шаблона Photoshop, PNG или маску прозрачности.
- Вы можете пометить выкройки и поместить их в папку, чтобы вы могли вернуться к сетке практически без какой-либо настройки.
- Освобождает ваше руководство для использования в других целях.
- Вы можете указать высоту вертикального модуля, чтобы установить общий вертикальный ритм.
- Сетка может быть наложена с разной степенью непрозрачности, чтобы сделать ее менее отвлекающей при разработке.
- Поддерживает приложения, отличные от Photoshop.
Недостатки
- Если ваш холст широкий, то создание сетки в виде узора заставит ее простираться по всей странице, что может раздражать и затруднять просмотр границ содержимого. Это можно исправить двумя способами:
- Примените маску слоя, чтобы ограничить сетку только основной областью содержимого.
- Нарисуйте прямоугольник размером с область основного содержимого (например, 960 × 1200 пикселей) и примените сетку в качестве стиля слоя с заполнением, установленным на 0% в этом случае.
- Этот метод заставляет вас выбирать базовую сетку, не позволяя вам просто создавать вертикальные столбчатые модули.
- Это требует, чтобы вы вручную скрывали и отображали слой сетки без использования сочетания клавиш.
Заключительные мысли
Мы надеемся, что эти методы повысят эффективность и точность построения сетки. В конце концов, способ настройки сетки будет зависеть от вашего рабочего процесса. Оцените свои потребности, а затем выберите наиболее подходящий для них метод.Любой метод требует минимальной настройки, но может сэкономить много времени и нервов.
Дополнительные ресурсы
(al)линий сетки PNG изображений | Векторные и PSD файлы
вектор черный квадрат линия сетки сетки
1200 * 1200
желтая линия простая рамка границы текстуры линии сетки
1500 * 1500
вектор вертикальные черные линии перспективы сетки
8347 * 8351
бумага для заметок с белой сеткой
1200 * 1200
белая сетка мультфильм png материал
2000 * 2000
размеры значка векторных приложений линия сетки развития
1200 * 1200
перспективная сетка линии
1200 * 1200
линий сетки
1200 * 1200
линий сетки блокнота
2244 * 2244
вектор фиолетовые косые плетеные линии сетки
1501 * 1501
значок размеры развертка линия сетки
1200 * 1200
геометрическая линия сетки дат глобус
1200 * 1200
цветных линий сетки
1024 * 1536
векторных синих квадратных линий сетки перспективы
1501 * 1501
иллюстрации линии интеллектуальной сетки
2000 * 2000
синий квадрат линии сетки перспектива
2000 * 2000
вектор красные квадратные линии сетки
1200 * 1501
желтый фон линий сетки
1024 * 1536
простой фон сетка линия визитная карточка квадрат
1200 * 1200
небольшой свежий фон линии сетки визитная карточка
1200 * 1200
фон линии сетки
1024 * 1536
Премиум серый фон линии сетки визитная карточка
1200 * 1200
визитная карточка с нерегулярной сеткой
1200 * 1200
желтая сетка линия фон дизайн визитной карточки
1200 * 1200
маяк логотип сетка шаблон линии современный дизайн
1200 * 1200
красочные геометрические линии сетки фон дизайн визитной карточки
1200 * 1200
простая линия сетки фон визитная карточка
1200 * 1200
фиолетовый акварель сетка фон линия визитная карточка
1200 * 1200
розовый фон геометрическая сетка фон визитная карточка
1200 * 1200
визитка сетка линия простой темный зеленый
1200 * 1200
свежий фон линии сетки визитная карточка
1200 * 1200
простой маленький свежий фон линии сетки визитная карточка
1200 * 1200
черный бизнес линия сетки визитная карточка
1200 * 1200
Griddify, крошечная панель Photoshop для направляющих и сеток
Griddify крошечный и быстрый.Он помогает вам составлять пользовательские сеточные системы, вертикальный ритм и делать множество других вещей с помощью направляющих в Photoshop.
Посмотрите краткое руководство, чтобы узнать, как это работает:
Загрузите и установите (Photoshop CC)
- Загрузите и установите ZXPInstaller. Это поможет вам легко установить Griddify и другие расширения Adobe.
- Загрузите Griddify, разархивируйте его и установите Griddify-CC.zxp с помощью ZXPInstaller.
- После установки перезапустите Photoshop CC. Вы можете найти панель в меню «Окно» в разделе «Расширения».
- Если у вас возникли проблемы с установкой Griddify с помощью ZXPInstaller, попробуйте установить его вручную.
Загрузите и установите (Photoshop CS6)
- Загрузите версию Griddify для CS6 здесь и извлеките zip-файл.
- Скопируйте папку «GriddifyCS6» в папку, где вы установили Photoshop в «Программных файлах», в разделе «Плагины / панели».
- Перезапустите Photoshop CS6, и, надеюсь, вы увидите панель в меню «Окно» в разделе «Расширения».
Водосточные желоба разделительные
Я добавил еще одну функцию в Griddify после записи видео, так что она не демонстрируется там. По сути, функция «Разделить» теперь принимает более одного числа, и эти дополнительные числа будут использоваться в качестве промежутков. Таким образом, если вы скажете «3 10», документ разделится на 3 части и на каждом из них появятся промежутки по 10 пикселей.Спасибо @xdividr за предложение этой функции!
Проблемы с Photoshop CS6
Панели HTML в Photoshop CS6 работают не так хорошо, как в Photoshop CC, потому что CC использует встроенную версию Chromium для рендеринга HTML-контента, а CS6 использует Flash, который значительно менее стабилен. Таким образом, панель будет выглядеть и действовать немного иначе, чем та, которую я показал вам в демо.
А как насчет CS4 / 5?
Чтобы Griddify работал с CS4 / 5, его HTML-код должен быть заключен в приложение Flex.В настоящее время для этого нет никаких усилий, но PR более чем приветствуются: & rpar;
Исходный код
Griddify распространяется бесплатно и с открытым исходным кодом. Проект размещен на github.
Bootstrap 4 Grid PSD
, Александр Рехштайнер — Последнее обновление
Многие веб-сайты Bootstrap начинают свою жизнь как макеты в Photoshop. При разработке для Bootstrap, полезно иметь целевые размеры столбцов, доступные в той или иной форме, поэтому объекты и текст легко выравнивается по сетке.Для Bootstrap 3 существует множество хороших шаблонов, но для грядущий Bootstrap 4 пока что не так много. Вот почему я создал этот PSD-файл Bootstrap 4 Grid в качестве основы. чтобы быстро создать макет темы или веб-сайта. Вот быстрый обзор включенных мною функций. Для более подробного изложения см. Ниже.
Характеристики
- Артборды для размеров окна просмотра xl, lg, md и sm
- Фигурные объекты для колонн и водостоков
- Помощники по размеру экрана для стандартных размеров экрана
- Тестовые изображения, отображаемые в реальном браузере
- Слои с тегами # для облегчения изменения стиля
- Направляющие по границам колонны
- На основе Bootstrap 4
- Версия без артборда для xl, которая должна работать в более старых версиях PS
Этот файл Photoshop бесплатный (как в бесплатном пиве).
Подробная информация о характеристиках
Артборды
артбордов были недавно представлены в Photoshop CC и очень полезно, если вы хотите создать макет своего сайта для экранов различных размеров. Я добавил монтажные области для всех точек останова Bootstrap, кроме xs. Причина отсутствия артборда для xs в том, что на xs (или размер экрана <576 пикселей), ширина контейнера устанавливается автоматически, поэтому столбцы будет разного размера в зависимости от ширины области просмотра.
Формы для колонн и желобов
На самом деле главная особенность любого Bootstrap PSD Grid.Колонны и желоба
реализованы вертикальными столбцами с точными размерами, которые Bootstrap позже будет использовать, когда CSS
используются такие классы, как col-md-5 .
Помощники по размеру экрана
При разработке веб-сайта также может быть полезно знать, какая область вашего дизайна будет видна сразу. Вот почему я включил прямоугольные формы с точными размерами большинства часто используемые разрешения экрана.
Тестовые изображения, обработанные в браузере
Чтобы столбцы точно соответствовали тому, что будет эффективно отображаться в браузере, PSD-файл содержит тестовые визуализации для каждого размера экрана из реального браузера.
# -слои с тегами
Вот изящный чит Photoshop, который я недавно узнал: Чтобы изменить цвет (или другие атрибуты формы) многих объектов, разбросанных по файлу, дайте им # теги и используйте функцию поиска по имени. Измените один из них, а затем используйте «Копировать / вставить атрибуты формы» из контекстного меню, чтобы изменить все остальные в так же. В этом файле есть связанные объекты, помеченные значимым образом, поэтому цвета и другие атрибуты можно легко изменить.
Сетка1440px — шаблон PSD с 8, 9 и 12 столбцами.
Информация в соответствии с разделом 5 TMG:
Sebastian Wiercinski
Ludwigstraße 15
23554 Lübeck
Контакты
Электронная почта: seb [et] stianw [punkt] de
Заявление об ограничении ответственности
Ответственность за содержание
Содержание наших страниц было создано с особой тщательностью. Однако мы не можем гарантировать точность, полноту или актуальность содержания.В соответствии с законодательными положениями мы также несем ответственность за собственное содержание этих веб-страниц. В этом контексте обратите внимание, что мы, соответственно, не обязаны отслеживать только переданную или сохраненную информацию третьих лиц или расследовать обстоятельства, указывающие на незаконную деятельность. Это не влияет на наши обязательства по удалению или блокированию использования информации в соответствии с общеприменимыми законами в соответствии с §§ 8–10 Закона о средствах массовой информации (TMG).
Ответственность за ссылки
Ответственность за содержание внешних ссылок (на веб-страницы третьих лиц) лежит исключительно на операторах связанных страниц.На момент размещения ссылок нам не было очевидных нарушений. Если нам станет известно о каком-либо правонарушении, мы немедленно удалим соответствующую ссылку.
Авторские права
Наши веб-страницы и их содержимое защищены законом об авторском праве Германии. Если иное прямо не разрешено законом (§ 44a и последующие статьи закона об авторском праве), любая форма использования, воспроизведения или обработки работ, подлежащих защите авторских прав на наших веб-страницах, требует предварительного согласия соответствующего правообладателя.Индивидуальное воспроизведение произведения разрешено только для личного использования, поэтому оно не должно прямо или косвенно использоваться для получения дохода. Несанкционированное использование работ, защищенных авторским правом, наказуемо (§ 106 закона об авторском праве).
.