Новинки IT-индустрии, обзоры и тесты компьютеров и комплектующих
- ПК и комплектующие
- Настольные ПК и моноблоки
- Портативные ПК
- Серверы
- Материнские платы
- Корпуса
- Блоки питания
- Оперативная память
- Процессоры
- Графические адаптеры
- Жесткие диски и SSD
- Оптические приводы и носители
- Звуковые карты
- ТВ-тюнеры
- Контроллеры
- Системы охлаждения ПК
- Моддинг
- Аксессуары для ноутбуков
- Периферия
- Принтеры, сканеры, МФУ
- Мониторы и проекторы
- Устройства ввода
- Внешние накопители
- Акустические системы, гарнитуры, наушники
- ИБП
- Веб-камеры
- KVM-оборудование
- Цифровой дом
- Сетевые медиаплееры
- HTPC и мини-компьютеры
- ТВ и системы домашнего кинотеатра
- Технология DLNA
- Средства управления домашней техникой
- Гаджеты
- Планшеты
- Смартфоны
- Электронные ридеры
- Портативные медиаплееры
- GPS-навигаторы и трекеры
- Носимые гаджеты
- Автомобильные информационно-развлекательные системы
- Зарядные устройства
- Аксессуары для мобильных устройств
- Фото и видео
- Цифровые фотоаппараты и оптика
- Видеокамеры
- Фотоаксессуары
- Обработка фотографий
- Монтаж видео
- Программы и утилиты
- Операционные системы
- Средства разработки
- Офисные программы
- Средства тестирования, мониторинга и диагностики
- Полезные утилиты
- Графические редакторы
- Средства 3D-моделирования
- Мир интернет
- Веб-браузеры
- Поисковые системы
- Социальные сети
- «Облачные» сервисы
- Сервисы для обмена сообщениями и конференц-связи
- Разработка веб-сайтов
- Мобильный интернет
- Полезные инструменты
- Безопасность
- Средства защиты от вредоносного ПО
- Средства управления доступом
- Защита данных
- Сети и телекоммуникации
- Проводные сети
- Беспроводные сети
- Сетевая инфраструктура
- Сотовая связь
- IP-телефония
- NAS-накопители
- Средства управления сетями
- Средства удаленного доступа
- Корпоративные решения
- Системная интеграция
- Проекты в области образования
- Электронный документооборот
- «Облачные» сервисы для бизнеса
- Технологии виртуализации
Наш канал на Youtube
Архив изданий
| 1999 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 2000 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 2001 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 2002 | 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | 10 | 11 | 12 | |
| 2003 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 2004 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 2005 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 2006 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 2007 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 2008 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 2009 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | |
| 2010 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 2011 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 2012 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 2013 | 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
- О нас
- Размещение рекламы
- Контакты
Популярные статьи
Моноблок HP 205 G4 22 AiO — одно из лучших решений для офисной и удаленной работы
В настоящем обзоре мы рассмотрим модель моноблока от компании HP, которая является признанным лидером в производстве компьютеров как для домашнего использования, так и для офисов.
Моноблок HP 205 G4 22 — модель нового семейства, которая построена на базе процессоров AMD последнего поколения и отличается неплохой производительностью вкупе с привлекательной ценой
Logitech G PRO X Superlight — легкая беспроводная мышь для профессиональных киберспортсменов
Швейцарская компания Logitech G представила беспроводную игровую мышь Logitech G PRO X Superlight. Новинка предназначена для профессиональных киберспортсменов, а слово Superlight в ее названии указывает на малый вес этой модели, который не превышает 63 г. Это почти на четверть меньше по сравнению с анонсированным пару лет тому назад манипулятором Logitech G PRO Wireless
Материнская плата для домашнего майнинга ASRock h210 Pro BTC+
Как показало недавнее исследование Кембриджского университета — количество людей, которые пользуются сегодня криптовалютами, приближается к размеру населения небольшой страны и это только начало, мир меняется. Поэтому компания ASRock разработала и выпустила в продажу весьма необычную материнскую плату — h210 PRO BTC+, которую мы и рассмотрим в этом обзоре
Верхняя панель клавиатуры Rapoo Ralemo Pre 5 Fabric Edition обтянута тканью
Компания Rapoo анонсировала в Китае беспроводную клавиатуру Ralemo Pre 5 Fabric Edition.
Новинка выполнена в формате TKL (без секции цифровых клавиш) и привлекает внимание оригинальным дизайном. Одна из отличительных особенностей этой модели — верхняя панель, обтянутая тканью с меланжевым рисунком
Изогнутый экран монитора MSI Optix MAG301 CR2 обеспечит максимальное погружение в игру
Линейку компьютерных мониторов MSI пополнила модель Optix MAG301 CR2, адресованная любителям игр. Она оборудована ЖК-панелью типа VA со сверхширокоформатным (21:9) экраном изогнутой формы (радиус закругления — 1,5 м). Его размер — 29,5 дюйма по диагонали, разрешение — 2560×1080 пикселов
Комплект SilverStone MS12 позволяет превратить SSD типоразмера M.2 2280 в портативный накопитель
Каталог продукции компании SilverStone пополнил комплект MS12. Он позволяет создать портативный накопитель на базе стандартного SSD типоразмера M.2 2280 с интерфейсом PCI Express
SSD-накопители ADATA XPG Spectrix S20G сочетают производительность с эффектным дизайном
Компания ADATA Technology анонсировала твердотельные накопители серии XPG Spectrix S20G.
Они предназначены для оснащения игровых ПК и, как утверждают их создатели, сочетают высокую производительность и эффектный внешний вид
Видеокарта ASUS GeForce RTX 3070 Turbo оснащена системой охлаждения с одним центробежным вентилятором
Линейку видеоадаптеров ASUS на базе графических процессоров NVIDIA пополнила модель GeForce RTX 3070 Turbo (заводской индекс TURBO-RTX3070-8G), предназначенная для оснащения игровых ПК. Одной из особенностей новинки является конструкция системы охлаждения
КомпьютерПресс используетAdobe Illustrator для веб-дизайнера 3) Линии и сетки
Владимир Никишин Владимир НикишинБлог
В Illustrator’е можно рисовать прямые, дуги, прямоугольные и полярные сетки.
Содержание серии
Материалы цикла представляют собой мои личные конспекты. Нет времени превращать их в полноценные обучающие статьи, и поэтому свободное отношение к слову может расстроить граммар-наци.
Также не исключено, что использование каких-то картинок нарушит авторские права. Это нехорошо, но давно не помню, где и что брал… Я предупредил.
- Введение
- 💾 Файлы, монтажные области
- 🗓 Cлои
- 🗜 Трансформация объектов
- Перемещение, выравнивание и распределение объектов
- 🎼 Линии и сетки
- ➰ Контуры
- 🖋 Перо и инструмент «Кривизна» (Curvature)
- 👱♀️ Правила красивых контуров
- ✍️ Обводка
- 🎨 Цвет, заливка
- 🔶 Фигуры
- 🔠 Текст
- 🏰 Векторная графика: техники рисунка
- 💪 Shape Builder Tool (Создание фигур) — ⇧M
- ✏️ Рисование фигур линиями и инструментом быстрой заливки
- ❤️ «Оформление» (Appearance) — палитра и раздел палитры «Свойства»
- 📐 Направляющие и линейки
- 🚶🏻♂️ Переходы (Blend)
- 🎁 Перспектива
- 🎩 Cтили графики
- 🔣 Символы
- 🏀 Сетчатые объекты (meshes)
- 👩 Ресницы, брови, волосы
- 🖌 Кисти и ластик
- ☀️ Распределение объектов по кругу
- 🦊 Советы и хитрости
- 🛠 Инструменты+
- ⌨️ Горячие клавиши
- 🖨 Печать
🔵 Общее
- Клик одним из инструментов группы линий в свободной области, открывает настройки инструмента по умолчанию.
- Рисование любой линии или фигуры с нажатой тильдой ~ — клонирование этой линии или фигуры.
- Центр фигур. Панель Attributes ➜ Показать центр. В дугах будет показан центр эллипса, по которому строился контур.
🔵 Дуги (Arc)
Горячие клавиши Arc
- F — развернуть направление арки.
- Стрелки вверх-вниз — увеличить/уменьшить изгиб арки. По умолчанию изгиб (slope) равен 50. Также его можно изменить перед вычерчиванием, вызвав диалог арки, кликнув инструментом на свободной области.
🔵 Инструменты Rectangle Grid
Чаще всего используется для создания пользовательских направляющих.
Количество колонок и строк будет на единицу больше количества разделителей в диалоге настроек. В примере, будет начерчена сетка 6×6.
Горячие клавиши
- Стрелки вверх-вниз — увеличить/уменьшить количество строк.
- Стрелки вправо-влево — увеличить/уменьшить количество колонок.
🔵 Инструмент Polar Grid
Также чаще всего используется для создания пользовательских направляющих.
По направляющим созданным с помощью Polar Grid удобнее рисовать спирали.
Полярные сетки можно рисовать, как с радиальными разделителями, так и чистыми окружностями. Убрать разделители можно в диалоге или стрелками на клавиатуре.
Горячие клавиши
- Стрелки вверх-вниз — увеличить/уменьшить количество концентрических кругов.
- Стрелки вправо-влево — увеличить/уменьшить количество радиальных разделителей.
🔵 Спираль
Кликнуть инструментом по свободной области, чтобы открыть диалог настроек и задать исходные.
Decay (распад) — плотность витков внутри спирали. Чем выше процент, тем плотнее. 100% — витки сливаются во внешней окружности. Поэтому в большинстве случаев значение выбирается в диапазоне 70-90%.
Сегменты — это количество арок, из которых собирается спираль.
Спирали лучше рисовать по полярной сетке, экспериментальным способом подбирая количество сегментов и распад.
Горячие клавиши
- Стрелки вверх-вниз — увеличить/уменьшить количество витков.
- ⌘ — увеличить/уменьшить распад.
- R — поменять направление.
Illustrator
Комментарии
Создание сетки в Adobe Illustrator для использования в PowerPoint • obsidianlearning.com
Что касается визуальной привлекательности, то о переполненных слайдах PowerPoint можно сказать немногое. Гармонично размещенный контент побуждает взгляд естественным образом перемещаться по графическим элементам, повышая как интерес, так и удержание. В этой статье Рик Кэррут описывает пошаговый метод создания сетки в Adobe Illustrator, которую можно использовать в PPT.
1. Создайте монтажную область
Начните с создания нового файла в Adobe Illustrator. Обязательно введите размеры монтажной области, соответствующие размерам вашей будущей презентации PPT. Параметры по умолчанию для PPT: 4:3 (10×7,5) и 16:9 (10×5,63). В этом примере я буду использовать 4:3 (10×7,5). Создав новый файл в соответствии с этими спецификациями, нажмите «Создать».
2. Закройте монтажную область
Выберите инструмент «Прямоугольник» на панели инструментов. Кроме того, вы можете использовать горячую клавишу (M). С помощью инструмента «Прямоугольник» покройте монтажную область заливкой по вашему выбору. Я не рекомендую использовать белый или серый цвет, похожий на тот, что окружает монтажную область, так как это может привести к некоторой путанице в последующих шагах. После того, как вы закроете монтажную область, выберите прямоугольник, который вы только что создали.
3. Разделить на сетку
Выделив прямоугольник, перейдите к «Объект» в строке меню и наведите курсор на «Путь» в раскрывающемся меню. При наведении появится новое меню. Выберите «Разделить на сетку». Появится новое окно с различными параметрами сетки, которые вы можете выбрать, чтобы построить сетку, которая наилучшим образом соответствует вашим потребностям.
4. Задайте параметры сетки
Вот где все самое интересное.
Параметры создания строк находятся в левой части окна, а параметры создания столбцов — в правой части окна. В большинстве случаев вам понадобится только одна строка, поэтому мы оставим этот раздел в покое или введем «1» в поле «Строка», если его еще нет. В разделе столбцов справа введите количество столбцов, которое вы хотите для вашей сетки. Для целей этого примера я буду использовать три, но вы можете выбрать столько, сколько хотите. Два столбца, вероятно, являются хорошим выбором по умолчанию для большинства основных презентаций. Далее мы рассмотрим ширину столбца. Этот параметр автоматически заполняется количеством столбцов, которые вы выбрали для ввода, и не учитывает интервалы между столбцами. Это приводит нас к следующему варианту «Желоб». Промежуток — это пространство между столбцами, которое дает пространство между различными частями контента (например, текстом, изображениями и т. д.). Выбор хорошего размера поля действительно зависит от длины строки, размера шрифта, интерлиньяжа (промежутка между строками текста) и других свойств шрифта и абзаца.
Хорошее общее правило состоит в том, чтобы размер желоба был немного больше или примерно в два раза больше размера интерлиньяжа. На самом деле нет правильного или неправильного размера, но вы не хотите, чтобы он был слишком тонким или слишком широким; в любом случае зритель может легко отвлечься или повлиять на естественный ход презентации. Я выберу «0,1». Эта спецификация ни в коем случае не является номером по умолчанию, так что не стесняйтесь экспериментировать. После того, как вы выбрали размер желоба, поля «Ширина» и «Всего» автоматически обновляются с этой информацией. Другим вариантом является флажок, который позволяет вам делать направляющие из вашего выбора, но мы будем использовать другой метод, чтобы сделать это на шаге 5. Нажмите «ОК».
5. Создание направляющих
После того, как вы нажмете «ОК», вы увидите, что прямоугольник, который вы нарисовали ранее, был разделен на сетку. Выберите сетку и щелкните правой кнопкой мыши.
Появится выпадающее меню; выберите опцию «Создать направляющие». Это удалит заполненные цветом столбцы, используемые для создания сетки, и заменит их более традиционными направляющими, чем те, которые были бы созданы, если бы вы установили флажок «Добавить направляющие» в окне параметров «Разделить в сетку». Вы можете перетаскивать направляющие с линеек, чтобы они выходили за пределы монтажной области, если это вам удобнее.
6. Настроить сетку
Сетка на месте, но нужно сделать еще пару вещей, прежде чем поместить ее в PPT. Во-первых, отделите ваши столбцы от желобов и снова используйте «Инструмент «Прямоугольник», чтобы заполнить ваши столбцы/область содержимого другим цветом — мне нравится синий. После того, как ваши столбцы/области контента заполнены, вы захотите уменьшить непрозрачность цвета, чтобы вы могли видеть свой контент при использовании сетки в качестве подложки. Сохранение цвета заливки столбца со 100% непрозрачностью может затруднить настройку и просмотр содержимого при разработке презентации.
Выберите столбцы/область содержимого (все) и перейдите на верхнюю «Панель объектов» в Illustrator. Выберите «Непрозрачность» и установите его примерно на 30%.
7. Сохранить сетку
Последний шаг в Illustrator — сохранить сетку как изображение и импортировать ее в PPT, как любое другое изображение. Выберите «Файл» в строке меню и наведите указатель мыши на «Экспорт». Появится выпадающее меню; выберите «Экспортировать как» в этом меню, а затем выберите место сохранения и тип файла. Тип файла .png или .jpg является хорошим вариантом.
8. Добавьте сетку в PPT
Теперь вы можете вставить изображение сетки в образец слайдов презентации PPT. Изображение сетки должно быть точно правильного размера, без необходимости масштабирования. Вам нужно расположить изображение сетки в самом конце образца слайдов, чтобы весь ваш контент располагался поверх подложки. В образце слайдов щелкните изображение правой кнопкой мыши. Появится меню с опцией «Отправить на задний план» — выберите эту опцию.
При создании презентации в обычном режиме вы сможете свободно размещать содержимое в подложке. Далее мы… отпразднуем, потому что вы все сделали! После того, как вы разместили свой контент в пределах сетки, найдите минутку, чтобы полюбоваться прекрасно организованной презентацией.
Чтобы упростить вам задачу, я создал подложку в виде сетки, которую можно поместить в презентацию PPT для вашего использования. С помощью этой сетки вы сможете быстро начать компоновку презентации с 1–6 колонками. Имейте в виду, что желоба, возможно, придется отрегулировать, чтобы они соответствовали содержанию вашей конкретной презентации. Для этого вы можете уменьшить ширину текстовых полей по мере необходимости, чтобы создать одинаковый интервал между столбцами.
Улучшение дизайна сетки с помощью GuideGuide, плагина для Photoshop и Illustrator — Smashing Magazine
- 10 минут чтения
- Графика, Инструменты, Иллюстратор, фотошоп, Рабочий процесс
- Поделиться в Твиттере, LinkedIn
Об авторе
Кэмерон МакЭфи — креативный директор и дизайнер с левым полушарием мозга.
Вечно неудовлетворенный инструментами, доступными дизайнерам и разработчикам, он проводит свои дни…
Больше о
Cameron ↬
Почти пять лет назад я имел честь написать в журнале Smashing Magazine статью о моей панели Photoshop GuideGuide.
С тех пор оно добилось бешеного успеха как самое устанавливаемое стороннее расширение Photoshop, и я очень горжусь этим достижением. За это время я добавил несколько мощных функций и совсем недавно расширил их до Illustrator. В этом посте вы узнаете, как GuideGuide может изменить способ использования направляющих в Photoshop и Illustrator.
Если вы один из тех, кто уже использует GuideGuide, читайте дальше. Вы можете обнаружить некоторые нетрадиционные способы использования, которые не сразу бросаются в глаза. Я представлю обзор основных функций, а затем приведу несколько примеров передовых и необычных способов их использования, чтобы сделать вас более эффективным дизайнером.
Дополнительная литература на SmashingMag:
- 40 отличных учебных пособий по Adobe Illustrator
- Live Trace от Illustrator: Sketch To Vector
- Лучший способ дизайна для Retina в Photoshop
- Этикет Photoshop для ответов ive Web Design
Пока я Этот пост будет посвящен Illustrator, почти все применимо и к Photoshop.
. Обратите внимание, что на момент публикации в журнале Smashing Magazine GuideGuide был бесплатным расширением. Теперь он стоит 10 долларов (вы можете прочитать, почему я решил сделать это), и он поддерживает Photoshop и Illustrator CC+. Чтобы испытать это на себе, вы можете загрузить специальную пробную версию GuideGuide от Smashing Magazine. Он полностью функционален для первых 90 раз вы используете его для добавления руководств.
Системные требования
В этом руководстве используется GuideGuide 4, который поддерживает Photoshop и Illustrator CC и более поздние версии. Если у вас есть Photoshop CS5 или CS6, вы все равно можете бесплатно скачать GuideGuide 3, который работает, но в нем отсутствуют некоторые функции, упомянутые в этой статье. Старые версии Illustrator не поддерживаются.
Установка расширений Adobe известна своей непредсказуемостью. Я сделал все возможное, чтобы упростить процесс с помощью прилагаемого установщика и документации, но если у вас возникнут проблемы, вы всегда можете обратиться ко мне за поддержкой.
Основы
Сетки — одна из основ дизайна, независимо от того, какие инструменты вы используете. Статья Криса Браукмюллера, хотя и немного устарела, представляет собой отличный краткий обзор сеток в Интернете, а статья Создание и разрушение сетки заслуживает места на каждой книжной полке по дизайну. Многие художники и дизайнеры сетовали на то, что Photoshop и Illustrator страдают от отсутствия функций сетки. GuideGuide заполняет этот пробел, автоматически выполняя сложные математические операции, необходимые для создания сеток, облегчая вашу жизнь при проектировании.
Я написал этот пост, используя дюймы для измерения, но GuideGuide работает со всеми типами измерений, поддерживаемыми Illustrator и Photoshop.
A Basic Grid
Представьте, что вы готовите документ размером 11 × 8,5 дюймов для брошюры, сложенной втрое, с полями 0,5 дюйма, полем под обрез 0,125 дюйма и базовой сеткой. Как только вы станете экспертом GuideGuide, вы сможете создать эту сетку одним действием; однако я собираюсь разбить его на этапы, чтобы проиллюстрировать некоторые функции GuideGuide.
При открытом только что созданном документе первое, что нужно сделать, это добавить столбцы. По умолчанию GuideGuide будет использовать выбранную монтажную область в качестве эталона. Введите 3 в поле количества столбцов и нажмите «Добавить направляющие».
Далее мы добавим поля для каждого столбца. GuideGuide может использовать выбранный объект в качестве ссылки; Итак, создайте прямоугольник размером с один из столбцов, выберите его, добавьте .5in в каждое из полей поля, а затем нажмите «Добавить направляющие». Повторите этот процесс для каждого столбца и пока оставьте фигуры в документе.
Ранее я упоминал, что мы собираемся добавить в документ направляющие для выпуска под обрез. В этом примере мы не хотим использовать встроенную настройку выпуска за обрез. GuideGuide поддерживает отрицательные значения в полях формы, что позволит вам создавать руководства вне контекста. Отмените выбор любых фигур, которые вы выбрали, затем введите -0,125in в поля поля и нажмите «Добавить направляющие».
Теперь, когда у нас есть направляющие под обрез, мы можем расширить монтажную область, чтобы они поместились.
Далее мы добавим среднюю направляющую для каждого столбца. Если вы оставили формы столбцов в документе, как я предложил, выберите первую фигуру и используйте вертикальную кнопку быстрого доступа «Средняя точка» в нижней части панели. Повторите это для каждого столбца.
(Показать большую версию)Если вам нравится поддерживать чистоту и порядок, стоит отметить, что GuideGuide добавляет направляющие к активному слою (только Illustrator поддерживает направляющие для конкретных слоев). Если вы планируете заранее, вы можете создать разные части вашей сетки на отдельных слоях, чтобы вы могли независимо включать и выключать их по мере необходимости.
Например, давайте добавим базовую сетку. Создайте новый слой с именем «Базовая сетка» и выберите его. Введите 16pts в поле высоты строки. Если оставить поле количества строк пустым, GuideGuide будет автоматически заполнять экран строками до тех пор, пока не закончится место.
Добавляя направляющие к выбранному слою «Базовая сетка», вы можете включать и выключать их отдельно от основной сетки, переключая видимость слоя.
Приступая к делу
Теперь, когда мы рассмотрели простые и оперативные функции, давайте углубимся в некоторые способы использования GuideGuide, которые являются сверхмощными, но требуют небольшого обдумывания.
Обозначение сетки
Если вы заполните некоторые значения на вкладке «Форма», а затем щелкните вкладку «Пользовательский», вы найдете что-то, что немного похоже на язык программирования. Это обозначение сетки , язык, который вы можете использовать на вкладке «Пользовательские» (и в определенной степени на вкладке «Форма»), чтобы сообщить GuideGuide о ваших сетках. На самом деле, каждая функция работает с использованием нотации сетки под капотом.
Вот краткое введение. Наиболее важной частью обозначения сетки является символ вертикальной черты | .
Он говорит GuideGuide «поместить здесь руководство». Далее следует команда , , в которой говорится «переместиться на это расстояние». Если вы соберете их вместе, GuideGuide будет читать их слева направо, интерпретируя это как «Добавить руководство, переместиться, добавить руководство, переместиться, добавить руководство». Вы можете прочитать все о нотации сетки в документации, в том числе о командах, которые помогают в вычислениях, таких как переменные и заполняют .
А пока я покажу вам одну из самых важных команд записи сетки, подстановочный знак ~ . GuideGuide поровну делит любое пространство, не учитываемое в сетке, между каждым подстановочным знаком. На практике именно так GuideGuide рассчитывает ширину столбцов и строк. Например, | ~ | ~ | ~ | будет сеткой из трех столбцов.
Вам может быть интересно, если форма GuideGuide уже может делать все это, зачем беспокоиться? Рассмотрим распространенный шаблон веб-дизайна, заключающийся в сочетании иконок с абзацами.
Визуализируйте этот узор по оси x. Есть немного места для поля страницы, ширины значка, другого поля, ширины абзаца и поля перед следующим экземпляром этого шаблона.
Если вы разрабатываете адаптивный веб-сайт таким образом, вы, вероятно, знаете ширину значка, но не абзаца. Вот где подстановочный знак полезен. В этом примере поля документа составляют 40 пикселей, ширина значка — 60 пикселей, расстояние между абзацами — 10 пикселей, а ширина столбцов неизвестна, но должна быть равна друг другу. Это можно выразить в виде сетки следующим образом:
| 40 пикселей | 60 пикселей | 10 пикселей | ~ | 40 пикселей | 60 пикселей | 10 пикселей | ~ | 40 пикселей | 60 пикселей | 10 пикселей | ~ | 40 пикселей |
GuideGuide суммирует команды, имеющие явное значение, и вычитает их из ширины доступного пространства. Затем он разделяет оставшуюся область между подстановочными знаками. Результат будет выглядеть следующим образом:
(Просмотреть увеличенную версию)Нотация сетки в полях
Нотация сетки в ее необработанном виде мощна, но вам часто понадобится удобство формы сетки с небольшим количеством этой мощности.
Например, что, если вы хотите, чтобы ваши желоба имели среднюю точку? Легкий! Просто используйте обозначение сетки. Чтобы создать 40-пиксельную полосу со средней точкой, добавьте 20px | 20px в поле Gutter-Width.
GuideGuide поддерживает базовые обозначения в любом поле, которое позволяет вводить измерения. Возвращаясь к предыдущему примеру, вы можете создать тот же эффект с помощью формы и обозначения сетки:
(Просмотреть увеличенную версию)Обозначение сетки очень полезно и является отличным способом создания и совместного использования сложных сеток, таких как пресет. сетки на основе Bootstrap, созданные Кристофором Уилсоном.
Странные руководства
Благодаря сочетанию формы и сетки GuideGuide может делать практически все. Возвращаясь к нашему первоначальному примеру брошюры втрое, вся сетка, которую я создал в несколько шагов, на самом деле может быть сделана с помощью одного.
(Просмотреть большую версию) Можно даже сохранить сетку в качестве предустановки, чтобы повторно использовать или поделиться с кем-то.
Золотое сечение
Несмотря на то, что GuideGuide предназначен для того, чтобы избавить вас от вычислений, в некоторых сетках можно использовать небольшие математические вычисления, например, в сетке 3 × 3, направляющие в центре которой указывают на золотое сечение. Я избегаю заниматься математикой, когда могу, поэтому быстрый поиск подсказал мне, что золотое сечение, выраженное в процентах, равно 9.0119 38,2% и 61,8% . Я также знаю, что вычитание одного значения из 100% даст мне другое; Итак, если я наберу 38,2% для каждого поля, вуаля! Сетка золотого сечения.
Последовательность Фибоначчи
Чтобы донести до меня мысль о том, что вы можете делать практически все, как насчет сетки, основанной на последовательности Фибоначчи? Я собираюсь построить сетку на процентах, а значения Фибоначчи ниже 100 % составляют 1 %, 1 %, 2 %, 3 %, 5 %, 8 %, 13 %, 21 %, 34 %, 55 %, 89 %.%.
Нам не нужны два гида на 1%; мы можем оставить второй 1%.
Хотя это кажется довольно простым, мы должны внести коррективы, чтобы сетка была точной. Каждая команда указывает GuideGuide переместиться; таким образом, координаты каждого гида представляют собой сумму всех команд, данных до этой точки. Например, чтобы выразить 8% в последовательности, вы должны использовать 3% , что равно 8% минус сумма всех значений перед ним. Смущенный? Это нормально. Если вы попробуете это несколько раз, у вас все получится.
После внесения всех корректировок эта строка обозначения сетки даст вам сетку Фибоначчи:
| 1% | 1% | 1% | 2% | 3% | 5% | 8% | 13% | 21% | 34% | ( vl )
Вы можете вставить это в форму «Пользовательский», или, если вы посмотрите на пресеты на вкладке «Сохраненные», вы увидите, что это один из значений по умолчанию.
(Просмотреть большую версию)Волнуетесь?
Надеюсь, это руководство GuideGuide оказалось полезным для вас.
