960 grid system как установить на фотошоп
Обновлено: 07.07.2024
В этом уроке мы разработаем дизайн веб-страницы, используя 960 Grid System . Вы увидите, как работая с этой системой можно рационализировать процесс веб-разработки и как пользоваться системой сетки:
Шаг 1: Создаем новый документ
Шаг 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.
Полезные направляющие
Если вы работаете напрямую из файла 960 Template , направляющие уже созданы, и их необходимо только отобразить через меню View > Show > Guides :
Сохраняем документ как шаблон
Вы можете сохранить этот документ в качестве шаблона и использовать по мере необходимости. Это сэкономит вам кучу времени.
Высоту холста всегда можно изменить под свои нужды. И опять же, со временем вы, вероятно, отдадите предпочтение полноценной системе с дополнительными направляющими.
Шаг 3: приступаем к дизайну
Теперь, когда у нас настроен шаблон, мы можем приступить непосредственно к дизайну.
Мы разделим страницу на пять секций:
- Header;
- Callout;
- Content – Left;
- Content – Right;
- Footer.
Шаг 4: Добавляем заголовок (Header)
Мы начнем с верха страницы и будем двигаться к низу, потому заголовок будет первым элементом, с которым мы работаем.
Эта область будет использоваться под лого и панель меню:
Шаг 5: Вставляем лого
Далее вставляем лого в левый верхний угол, равняем его по второму столбцу сетки, оставляя отступ в 40px. Для этого проекта я использовал лого, основанное на шрифте 50 pt Century Gothic .
Шаг 6: Добавляем меню
Меню. Чтобы сохранить простой и строгий вид, мы будем использовать текст в основе меню. Выбираем для меню шрифт 18pt Arial .
Шаг 7: Добавляем Callout
Я назвал эту секцию Выкладка потому как на самом деле это именно то, что она делает — выкладывает информацию о странице.
Мы добавим градиент в этой секции. Двойной клик для вызова Layer Style Panel и выбор Gradient Overlay . Тип окрашивания выставляем равным transparent overlay и меняем blend mode на overlay , уменьшаем opacity до 30%:
Шаг 8: Делаем фон для области Callout
Так как мы назвали компанию « blue grid », добавим фон для секции Callout в стиле решетки. Для этого будем использовать технологию, схожую с той, которой пользовались, добавляя горизонтальные линии.
Для начала создаем документ размерами 25px на 25px. Снова удаляем фон, делая документ прозрачным, и рисуем одиночную линию шириной в 1px вдоль нижней части и еще одну в верхней части.
Завершаем этот шаг, присваивая этому документу вид шаблона путем Edit > Define Pattern :
Шаг 9: Добавляем фон для секции Callout
Создайте новый слой поверх слоя Callout и заполните его созданным на шаге 8 паттерном с помощью меню Edit > Fill :
Поверните этот слой на 15 градусов, примените к нему наложение белого цвета и поместите его над секцией callout . Затем создайте новый слой и объедините его с белым решетчатым слоем. Дайте ему имя:
Примените режим наложения Soft Light к этому слою. Выберите область callout также с помощью инструмента Rectangular Marquee Tool или клавишей CTRL + клик мышкой на слое.
Затем выберите Rectangular Marquee Tool правым кликом мыши (CTRL + клик мышкой) и выберите select inverse и затем Delete . Эти действия уберут всю сетку, которая не находится в области блока callout :
Выберите маску слоя, щелкнув по ней, затем, используя инструмент Gradient Tool (G) , выберите градиент от черного к прозрачному.
Мы собираемся использовать данный способ для того, чтобы уничтожить сетку, которая располагается за переделами области в 960px.
Повторяйте это до тех пор, пока не будете удовлетворены результатом. Заметьте, что маска слоя показывает черный градиент вокруг наружных граней:
Шаг 10: Добавляем содержимое в область Callout
Под этим местом сделаем небольшое вводное предложение шрифтом 17pt и поместим его в левой части области:
Шаг 11: Добавляем слайд-шоу
Это фон к слайдшоу:
Далее вам понадобится некий фиктивный контент для размещения в слайд-шоу. Я использовал скриншот моего блога. Размер меняем под размер области слайд-шоу с помощью меню Select> Modify> Contract 10px , выбрав инверсию, как ранее, далее delete :
Шаг 12: Секция содержимого
Шаг 13: Содержимое – левая область
Шаг 14: Добавляем список услуг
Повторяйте этот шаг для добавления данных:
Шаг 16: Подвал
Шаг 17: Подвал – правая часть
Шаг 18: Проверьте выравнивание и баланс всей страницы
Шаг 19: Расслабьтесь. Финиш!
Надеюсь, вы получили понимание того, как можно работать с системой сеток, а также как настроить базовую систему самостоятельно.
Я настоятельно рекомендую вам экспериментировать с этими системами до тех пор, пока работа с ними не станет вашей второй натурой. Со временем, система сеток значительно облегчит вам вашу работу в качестве дизайнера!
Этот урок Фотошопа о том, как создать профессиональный веб-дизайн. Спроектировать свой сайт правильно, от начала до конца, гармонично расположить все элементы, подобрать цвета и оттенки.
Категория: Дизайн
Сложность: Высокая
Дата: 05.02.2013
Обновлено: 13.06.2015
Шаг 1. 960 Grid System
Посетим сайт 900.gs. Это система сеток и направляющих, с помощью нее, мы сможем с точностью и правильно расположить наши объекты на холсте, и на равном расстоянии друг от друга.
скачать сетчатый шаблон.
Как только вы скачаете файл, разархивируйте его и откройте файл «960_grid_12_col.psd». , можете найти его здесь 960_download - Templates - Photoshop. Это прекрасная правильная сетка.
Открыв сетку вы увидите точные размеры пикселя на сетке, с 60 px широкими колоннами и 10 px по обеим сторонам (и 20 px между колоннами). Если не видите направляющих можете нажать Ctrl+R.
Как только мы будем начинать работать, они будут нам очень мешаться, поэтому можно будет их отключить View - Extras (Просмотр - Вспомогательные элементы), или просто нажать Ctrl+H.
Расширим полотно (Ctrl+Alt+C) от 1400 px до 1340 px. Оставляем фоновый слой, остальное можно удалить, двойным щелчком по фоновому слою, чтобы разблокировать его, и назовем его «BG».
Сохраним этот файл (Ctrl+S), под именем «my_web_tut01.psd», и в папку «my web tut». Можете сохранять множество копии, с разным количеством колонок.
Шаг 2. Работаем с Grid Part I
Мы имеем холст, теперь нам нужно сделать в фоном режиме поверх сетку.
Перетащите направляющую с линейки до 120 px - это будет нижняя граница заголовка пространства.
И еще две направляющих с линейки 130 px и 140 px. Ширина пространства между заголовками и содержанием, как между колонками!
Используем Rectangle Tool (Инструмент «Прямоугольник» / Клавиша «U»), чтобы нарисовать прямоугольник в области заголовка. Цвет черный, нажмем D чтобы сбросить цвета наверняка. Рисуем прямоугольник, как показано ниже, и называем его «Header BG».
Шаг 3. Работаем Grid Part II
Пришло время начать блокировать сетку. Конструкция состоит из трех колонок:
левая охватывает - три столбца
середина - семь столбца
правая - два столбца
Передвижение объектов осуществляется Shift + и стрелочки или Move Tool (Инструмент «Перемещение» / Клавиша «V»). Каждый слой выбранный будет двигаться на 10 px.
В конструкции будут присутствовать закругленные углы у основных форм и блоков.
Не забываем что шрифты, градиенты, цвета тоже играют немаловажную роль.
Есть многие сайты которые не используют закругленные углы. Взгляните на Psdtuts+, каждый уголок резкий и четкий и прямой.
Дополнительные материалы можно найти здесь.
Выберем Rounded Rectangle Tool (Инструмент «Прямоугольник со скругленными углами» / Клавиша «U») и поставим радиус закругления углов на 8 px. Рисуем боксы на правой и левой колонке сверху.
Шаг 4. Типографика
Работаем с текстом, размещаем в середине. Используем шрифт Rockwell или другой slab-serif с 40 pt с 48 pt (ведущая высота линии).
Добавим другой текст смотрим ниже, и ставим Verdana на 12 pt с 20 pt (ведущей линией).
Также добавим пару заголовков, Verdana Bold на 17 pt с 30 pt (ведущей линией).
Теперь когда мы имеем специфику, можно поговорить о типографии. Одно общее правило которое соблюдают все веб сообщества в мире, это использование двух шрифтовой системы на сайте.
Наши шрифты : Rockwell и Verdana;
Поэтому все надписи со шрифтом Rockwell должны будут быть представлены изображениями, если сайт будет в стандартах XHTML/CSS.
Это значит две вещи, загруженность низкая, и безопасность шрифтов.
И второе, к тексту можно добавлять тени и стили и эффекты.
Существует одно последнее,которое может или не может распространяться на ваш дизайн и это с учетом любых будущих Search Engine Optimization (SEO).
Все тексты которые будут являться картинками, не буду сканированы Google ботами.
Следующим пунктом в типографии, а также веб-дизайна в целом, является последовательность, согласованность. Если вы используете шрифт Rockwell на кнопку, используйте его для всех кнопок! Если вы сделаете некоторые ссылки розовыми, все ссылки розовые и должны быть.
Шаг 5. Цвета
Черно белые цвета это скукота. Цвета этого шаблона воодушевили нас Hash One Wordpress theme.
Я покажу вам как создать палитру цветов. Выберите Rectangle Tool (Инструмент «Прямоугольник» / Клавиша «U»), и рисуйте ровные квадраты небольшие, и заполняйте их цветами которые будите использовать.
Цветовую композицию можно подобрать здесь а также соответствие всех оттенков.
Цвета шаблона нашего:
Убираем ниши прямоугольники в папку, и называем ее «Swatches» (Образцы). Создаем папки «Header», «Left Sidebar», «Main Content» и «Right Sidebar». Кликните по иконке, чтобы придать ей отличительный цвет (это понадобиться в дальнейшем, распределите цвета как ниже)..
Шаг 6. Градиенты Part I
Градиенты могут намного улучшить дизайн сайта, сайт не будет плоским, скажем так придадим ему «вебдванольности», как сейчас можно это говорить.
Дважды щелкаем по «Header BG», и выбираем Gradient Overlay (Наложение градиента). Открываем Gradient Editor (Редактирование градиента). Удалим стандартные Swatches (Образцы), кроме первых двух - фона и переднего плана для прозрачной.
Теперь создаем градиент от темного серого к середине серого и нажмите New (Новый) чтобы добавить его к Presets (Наборы).
Продолжаем также, пока не получим восемь новых цветов. Потом сохраняем пресет, в папку «Assets».
Помещаем в корневой каталог для данного проекта.
Для «Headers BG», используем градиент в середине, темно-серых оттенков.
Шаг 7. Градиенты Part II
Для «BG» слоя, понадобиться создать несколько более сложных градиентов.
Будет фактически два градиента в «BG» градиенте.
Заметьте, небольшая часть градиента, будет иметь тот же цвет? Это будет цвет фона вашего HTML файла и позволит веб-странице, градиенту вверху находится вверху а градиенту внизу находиться внизу.
Шаг 8. Работаем с Illustrator Part I
Будем создавать различные элементы и лого.
Открываем новый файл в Illustrator ( в реальных проектах не начинайте дизайн пока не имеет логотип, и представление о фирме). В лого можете использовать и третий шрифт, но здесь используем Rockwell. Сохраняем в папку «Assets», там где и градиент.
Перетаскиваем в Photoshop, просто выделяем весь логотип в Illustrator, и тащим его в Photoshop, он переместится как Смарт-объект (который можно будет в случае чего отредактировать в Illustrator).
Создадим папку «Logo», и поместим его туда.
И разместим внутри папки «Headers».
Шаг 9. Эффекты
После размещения логотипа, нам нужно применить к нему стиль.
Добавим тень. Поставим режим наложения на Multiply (Умножение) - 100%. Будьте уверены что используете Global Light (Глобальное освещение) и поставьте 120 Degrees (Градусы), с 1 px Distance (Дистанция), 0% Spread (Размах), и 1 px Size (Размер). Включен Global Light (Глобальное освещение). И помните - последовательность, согласованность, последовательность!
Задержав Alt и перетащив слой, мы можем перетащить его с теми же стилями.
Или обычно скопировать стили, и вставить или применить к другому слою.
Шаг 10. Графика
Выберите «Header BG» слой. Откройте эффекты и добавьте 1 px черные границы, режим установлен на Inside (Внутри). Далее, придать ему внешний Glow (Свечение), режим смешивания Multiply (Умножение), Opacity (Непрозрачность) - 40%, Color (Цвет) - Black (Черный), и Size (Размер) 9 px.
Вернемся в Illustrator, и создадим творческую форму, которая будет использоваться для заднего фона.
Перетащим в ФШ, режим смешивания на Screen (Экран) и Opacity (Непрозрачность) - 2-10%.
Создаем черный круг с помощью Ellipse Tool (Инструмент «Эллипс» / Клавиша «U»), открываем эффекты слоя и добавляем белую границу. Закрываем эффекты, и ставим режим наложенияГ на Screen (Экран), меняйте ширину границы, редактировав эффекты слоя.
Потратьте время и поэкспериментируйте с различными прозрачностями и композициями.
Шаг 11. Маски
Выберем все формы и поместим их в папку выше слоя «Header BG» . Ctrl+клик на векторную маску (серого бокса) «Header BG» увидите выбранный заголовок на холсте. Теперь, выберите папку, которую вы только что создали и нажмите на маленькую кнопку в нижней части окна слоев называемых «Add Layer Mask» (Добавить слой-маску).
Рассмотрим, что мы собрали простые фигуры в один слой, и удалили из области наклеивания. Но потом вы хотели бы изменить некоторые части из состава или границы на одном из кругов - маски слоев позволяют вернуться, и вносить изменения.
Шаг 12. Графика Part I
У меня нет почти опыта в брендинге. Но я попытаюсь объяснить вам на словах что это такое.
Бренд это все о компании, о том что потребитель чувствует - это эмоции, воспоминания, звуки, краски, опыт и т.д.
Но, вы не можете построить бренд, вы можете помочь ему развиваться в виде потребителей путем постоянного предоставления визуального вида компании.
Посмотрим и вспомним что нам говорили об этой компании, он хотел сделать цвета игривыми и веселыми, но сетка, дает сама собой серьезность и профессионализм.
Конечно, нет, каждая компания должна быть уникальной, и каждый сайт иметь дифференцированную ауру.
Шаг 13. Работаем с Background
Скрываем все кроме слоя «BG». На фоне этого конструкция представляет собой целый округленный прямоугольник. Белый закругленный прямоугольник имеет радиус 8 px.
Работайте с изображениями, добавляйте элементы, найдите правильно решение, не нагруженное, легкое, и в то же время правильное в композиционном плане.
Шаг 14. Ссылки, функции меню
Блок в серо-светлых тонах, само меню имеет закругления, выглядит красиво и стильно.
Хорошо продуманный дизайн - это продуманные кнопки ссылки, как они будут выглядеть и как они будут функционировать.
Если вы хотите хорошее сочетание, то вы должны найти оптимальный вариант, и хорошее меню.
Если кнопки имеют сложную графику, можно использовать их как картинки.
Шаг 15. Пиксельные шрифты
Теперь, изучим закругленные углы из выпадающего меню. Белый фон на самом деле строится из трех округленных угловых прямоугольника.
Шаг 16. Эффекты текста
Все тексты были организованы в иерархии важности и внимания.
Самый большой размер шрифта и цвет темный (смотрится: высокая контрастность) зарезервирован для заголовка. Помните, что все цвета из Swatches (Образцы) - последовательны, согласованны, последовательны.
Шаг 17. Стили Sidebars
Когда мы организовали все боковые боксы, мы можем начать их стилизацию.
Добавим яркий градиент, используя Line Tool (Инструмент «Линия» / Клавиша «U»), нарисуем полоску горизонтальную. Применим к боксу яркую падающую тень.
Нарисуем Rectangle Tool (Инструмент «Прямоугольник» / Клавиша «U»), выше всех форм, и добавим Gradient Overlay (Наложение градиента), розоватый, и 1 px Stroke (Обводка), и зальем градиентом горизонтальным от Pink (Розовый) к White (Белый).
Затем зададим название фонового слоя в слой маски в виде боковой панели окна.
Повторим эти действия для всех боксов. Смотрите ниже.
Шаг 18. Работаем с Illustrator Part II
Создаем графические элементы в нижней части шаблона.
Режим цвета как обычно CMYK, зайдем в Image - Mode - RGB Color (Редактирование - Режим - RGB), и поменяем на RGB.
Потому что вся веб-графика, в режиме RGB.
Вернемся в Photoshop, выберем в Swatches (Образцы) - темно серый, розовый и голубой - перетащить их в Illustrator. Используем инструмент Eyedropper Tool (Инструмент «Пипетка» / Клавиша «I») в Illustrator. После всего, перетащим наш элемент назад, можно применить стили.
Шаг 19. Графика Part II
Вы можете увидеть, как цвета располагаются в градиенте, увидеть резкий разрыв между светлыми и темными оттенками теней. Имейте в виду, что есть несколько путей для достижения этой цели, в том числе с использованием белого прямоугольника и маски слоя.
Шаг 20. Кнопки
Самое сложное для меня это создание пользовательских кнопок, они так сказать должны соответствовать веб 2.0 стандартам.
Во первых, кнопки Rockwell кроме кнопки входа в силу своего небольшого размера - Rockwell не работает хорошо на таких малых размерах.
Основные стили для кнопки это граница, падающая тень, четкие границы в градиентах, или наоборот расплывчатые.
Шаг 21. Убираем сетку
Самое важное чтобы весь дизайн был по сетке, все объекты выстраивались по сете, все позиции по сетке.
Сетка залог хорошего дизайна, размещения объектов, расстояния между ними.
Шаг 22
Дизайн должен подходить как минимум к разрешению монитора 1024 x 768 рх. Должен быть прост для верстки, и натяжения на различные CMS системы.
Я хочу дать исчерпывающее описание замечательному фреймворку для построения модульных сеток 960gs. Недавно где-то в комментариях сказали, что 960gs сложнее в понимании, чем blueprint, что меня удивило. Я не хочу заниматься сравнением этих фреймворком, хотя бы потому, что они выступают в разных весовых категориях, однако, для построения модульной сетки ничего легче и проще в понимании, чем 960gs я не видела.
960gs получил свое название из-за выбора Натаном Смитом (Nathan Smith), автором фреймворка, полной ширины контейнеров по-умолчанию в 960 пикселей. Однако, 960 px – совсем не железное ограничение.
Все элементы 960gs описаны как классы для css. Очевидно, использовать их следует как <тег >.
В данной статье я буду использовать код фреймворка с официального сайта, 960.gs/css/960.css. Для чтения и понимания статьи этот код смотреть совсем не обязательно, в конце повествования я остановлюсь на способах получения css-кода подробнее.
В примерах, в качестве элементов разметки, я буду использовать дивы, а, для удобства – называть такие дивы по имени их 960gs-класса. К примеру, див с классом .container_12 я буду называть элементом container. Надеюсь, эта небольшая вольность найдет понимание в глазах гуру от верстки.
Так же, при описании параметров элементов фреймворка, я буду описывать только параметры оригинального css-кода. Разумеется, верстальщик волен менять их или дополнять новыми свойствами так, как ему будет нужно.
При переводе, элемент grid получил название «ячейка», что несколько далеко от дословного «сетка», зато звучит не так уродливо и гораздо ближе к реальному назначению. Сравните: «поместить три сетки в одну строку» и «поместить три ячейки в одну строку».
Надеюсь с шероховатостями покончено, поэтому перехожу непосредственно к теме данной статьи.
Container
Контейнер – корневой элемент разметки 960gs, задающий параметры для модульной сетки. «Корневой элемент» — означает, что только дочерние по отношению к нему элементы фреймворка будут участвовать в формировании модульной сетки, «задающий параметры» — означает, что все элементы фреймворка, что находятся внутри контейнера, подчиняются его параметрам единообразным образом.
Контейнер с 12 колонками может выглядеть так:
Контейнер задает следующие параметры для модульной сетки:
Все остальное оставлено на волю дизайнера.
На одной странице могут находиться сразу сколько угодно контейнеров как с одинаковыми параметрами, так и с разными (очевидно, у дизайнера должны быть очень веские причины использовать несколько разных модульных сеток на одной странице).
Несколько контейнеров удобно использовать, к примеру для того, что бы разделить страницу на области на шапки/основного содержимого/подвала (header/content/footer).
Вложенные контейнеры в рамках идеологии 960gs являются абсурдом (представьте себе вложенные <body> в html), однако путем манипуляций с отступам в css вложить контейнеры друг в друга возможно. Вот только зачем?
- Ширина колонки: 60px
- Кол-во колонок: 12
- Ширина канавки: 20px
- Ширина контейнера = (60*12) + (20 * 11) + (20/2 * 2) = 960px
На этапе разработки удобно использовать в качестве background-image контейнера картинку-сетку, взять которую можно, например, на официальном сайте (про это будет написано немного дальше). Правда, только для стандартных 12 и 16 колоночных макетов.
Grid – один из двух базовых элементов разметки, предназначенный для расположения html-элеменов на модульной сетке контейнера. Ячейка (grid), всегда ориентирует свое содержимое в горизонтальной плоскости по отношению к контейнеру. Одна ячейка может занимать как одну колонку модульной сетки, так и все сразу, названия классов отражают данное свойство: для ячейки, занимающей одну колонку, класс будет иметь имя grid_1, для ячейки в две колонки – grid_2, для пятиколоночной ячейки — grid_5 и т.д. Следоватльно, в общем виде мы можем представить класс, как grid_X, где X – необходимая нам ширина ячейки в колонках модульной сетки. Рассмотрим пример с сетками grid_1, grid_6 и grid_12 соответственно:
Одна ячейка вполне себе может соседствовать с другими ячейками по горизонтали, при условии, что они все вместе покрывают колонок не более, чем есть в контейнере:
Агрессивные верстальщики могут с негодованием переименовать в коде фреймворка все упоминания grid_ на, к примеру, cell_, что, на мой взгляд, ближе к истине, а так же более наглядно.
Clear
Вероятно, все, кто читал предшествующий код заметили, что в нем появился новый элемент:
Clear – второй базовый элемент разметки 960gs. Что бы понять, что же делает clear, рассмотрим следующую ситуацию: я попытаюсь переписать последний пример, не используя clear, для удобства добавив контейнеру красный ободок.
Хм, контейнер не растянулся дочерними ячейками, а остался худеньким и одиноким. Следовательно, первая задача clear – растягивать родительский контейнер до ожидаемых размеров. Теперь, предлагаю посмотреть внимательно на первый пример из раздела grid, в котором каждая ячейка единолично занимает всю строчку. Из этого примера логично сделать вывод, что вторая задача clear – завершать текущую строку, независимо от того, сколько в ней осталось свободных колонок.
Из этих двух правил следует хорошая привычка при работе с 960gs всегда завершать любую строку с помощью clear, даже если эта строка последняя или единственная в контейнере.
Не секрет, что дивы с классом clear используются верстальщиками относительно часто. Для того, что бы избежать возможных конфликтов между кодом всего сайта и кодом 960gs в будущем, вероятно, верстальщику следует либо переименовать в коде css файла фреймворка класс clear на какой-нибудь другой (к примеру, на clr), либо уточнить его, (например, .container_12 .clear). Всё же, по моему мнению, переименование в случае вероятных конфликтов – более подходящий способ.
Далее я перечислю все дополнительные классы для элемента grid. Дополнительные они потому, что существуют только как добавочные классы к основному классу grid_X. К примеру,
Alpha и Omega
Иногда встречаются ситуации, когда необходимо вложить в одну ячейку несколько других. Как пример: нам нужны две очень длинные сплошные ячейки по бокам, в высоту занимающие 10 строк, и по одной ячейке в середине, на каждой из десяти строк.
В таких случаях следует использовать классы alpha и omega. Суть проста – если в ячейку мы вкладываем несколько других ячеек, то у первой вкладываемой ячейки нужно поставить класс alpha, а у последней, очевидно, omega.
Кстати, пример является одним из редких случаев необходимости использования тега <br>.
Если нужно вложить только одну ячейку, достаточно использовать только класс alpha, без omega.
Prefix, Suffix, Push и Pull
Эти четыре дополнительных класса, по сути, являются более абстрактной заменой padding-left, padding-right, left и right соответственно. Стоит отметить, что пользоваться этими классами гораздо удобнее, чем вычислять нужные отступы в уме или на калькуляторе.
Все они имеют названия классов, сходные с названиям классов ячеек: имякласса_X, где Х – количество столбцов модульной сетки.
Рассмотрим простой пример:
А теперь применим к каждой из ячеек со стишком классы prefix_1, suffix_1, push_1 и pull_1 соответственно:
На сим позвольте откланяться, желаю интересных и сложных вам проектов в новом году!
- PSD шаблон: 960 Grid System
- Текстура: текстура ржавчины
- Текстура: поцарапанный металл
- Photo: Sunset
- Photo: Sunflower
- Photo: Baby Boy
- Photo: Bokeh
- Шрифт: ITC AvantGarde
- Шрифт: Helvetica
Шаг 1: Настройка документа Photoshop
Создайте новый слой в Photoshop (Ctrl / Cmd + N) с размерами 1200 × 910px.
Шаг 2: Включаем 960 Grid System
При работе над макетам нам понадобится сетка. Мы будем использывать 16-ти колонную сетку 960 Grid System . Для этого из их веб-сайта скачиваем бесплатный PSD шаблон.
После того как вы закончили загрузку PSD шаблона, откроваем PSD в фотошопе и перетаскиваем его на наш холст. Сетка должна быть размещена на верхнем слое, так как по нее будем выравнивать остальные элементы.
Шаг 3: Фон макета
Выбераем Gradient Tool (G) ( Градиент) и установите опцию Radial Gradient (Радиальный градиент). В центре холста создаем градиент.
Градиент выглядит немного простым, поэтому давайте добавим текстуру к нему. Перейти к Filter > Convert for Smart Filter (Фильтр> Преобразовать для смарт-фильтров).
Теперь давайте добавим немного шума, выбрав Filter> Noise> Add Nois (Фильтр>Шум>Добавить шум).
Добавляем больше свечения в верхней части нашего фона. Берем Brush Tool (B) (Кисть) и устанавливаем опцию Master Diameter (Главный диаметр) около 700px; также меняем цвет переднего плана на белый.
Создаем новый слой поверх нашего градиента и нажимаем на холсте один раз, чтобы применить кисти.
Измените режим смешивания этого слоя на Overlay (Перекрытие) и установите его непрозрачность до 34%.
Скачиваем текстуру ржавчины и открываем ее. Перетаскиваем изображение на наш холст и делаем его немного меньше, чем холст Transform (Ctrl / Cmd + T) (Редактировать > Трансформация).
Активируем инструмент Eraser Tool (E) (Ластик).
Используем обычную круглую мягкую кисть и немного стираем бока нижней области с помощью Eraser Tool (E). Кроме того, вы можете использовать маски слоя, если не хотите, чтобы изменения были постоянными.
Измените режим наложения текстуры ржавчины на Overlay (Перекрытие) и непрозрачность до 16%.
Далее открываем металлическую текстуру, также перетаскиваем эту текстуру на холст и немного стираем с боков и снизу. Устанавливаем режим смешивания этого слоя на Multiply (Умножение) и непрозрачность 15%.
Шаг 4: Добавление название сайта
Шаг 5: Создание меню навигации
Создайте новый слой. Используйте инструмент Horizontal Type Tool (T) (Горизонтальный текст) и введите текст с параметрами, которые представлены ниже на картинках.
Теперь переходим к дизайну кнопок, при наведении на них. Выберите Rounded Rectangle Tool (U) (Прямоугольник с закругленными краями). Установите в настройках инструмента опцию Shape Layers (Слой фигуры) и Radius (Радиус) 30px.
Под слоем с текстом "Home" нарисуйте прямоугольник.
К прямоугольнику с закругленными краями применяем Color Overlay (Наложение цвета) и Inner Shadow (Внутренняя тень) в диалоговом окне Layer Style (Стиль слоя).
Изменяем прозрачность слоя с прямоугольником с закругленными углами до 30%.
В панели Layers ( Слои) выбираем слой с прямоугольником и нажимаем на нем, при этом зажав кнопку Ctrl / Cmd. Этим создаем область выделения вокруг прямоугольника.
На новом слое, перейдите в меню Edit> Stroke (Редактирование t> Обводка).
Изменяем режим наложения слоя на Overlay и установливаем его непрозрачность до 18%.
Шаг 6: Добавляем раздел для фотографий
Измените режим смешивания слоя этого прямоугольника на Soft Light (Мягкий свет).
Пришло время размещать наши фотографии. Открываем фото Sunset и перетаскиваем его в наш макет. С помощью Free Transform ( Свободное трансформирование) делаем его нужных размеров.
Временно скрываем слой с фото. Создаем прямоугольное выделение, с помощью инструмента Rectangular Marquee Tool (M) (Прямоугольная область).
На скрытом слое с фотографией нажимаем Add vector mask (Добавить векторную маску), создавая маску выбранной области. Теперь слой с фотографией делаем видимым. Можно заметить, что, если все сделано правильно, все части изображения, что лежат за пределами маскированной области, будут скрыты.
Шаг 7: Создаем кнопки управления фотографиями
Под группой слоями фотографии для организации создаем группу и называем ее «Стрелка». Внутри группы создаем новый слой.
Выберите Ellipse Tool (U) (Эллипс) и нарисуйте круг на левой стороне слайд-шоу.
Так должен выглядеть наш макет на данном этапе.
Нам нужно будет удалить ненужные тени круга. Чтобы сделать это сначало выбираем Layer> Rasterize> Shape (Слой> Растрировать> Фигуру). После его выбираем Rectangular Marquee Tool (M), выделяем область с тенью и нажимаем «Удалить».
Теперь создайте стрелки для нашей кнопки. На новом слое выберите Rounded Rectangle Tool (U) (Прямоугольник с закругленными краями), а затем установить в его параметры опцию Shape Layers и радиус 30px. Чем больше радиус, тем более круглые края у нас получаться.
Для создания нижней части стрелки, дублируем эту форму, нажав Edit> Transform Path> Flip Horizontal (Редактирование > Трансформирование контура > Отразить по горизонтали).
Выберите два слоя стрелок на панели слоев и перейдите к Edit> Transform> Rotate, поверните стрелку -90 O .
Обьеденяем два слоя в один и дублируем его.
Теперь создадим стрелку вправо. Выбираем группу «Стрелка» и дублируем ее. Выбираем Edit> Transform> Flip Horizontal (Перевернуть по горизонтали) и перемещаем на правую сторону.
Должно получиться следующее:
Шаг 8: Создание маленьких фотографий
Делаем слой сетки видимым. Используя Rectangular Marquee Tool (M), нарисуйте выделение шириной приблизительно 4 с половиной колонок ниже основной фотографии.
Открываем фото подсолнечника . Поместите его на холст, а затем изменяем его размер до 80% от первоначального размера.
Временно скрываем слой с фото. Создаем прямоугольное выделение, с помощью инструмента Rectangular Marquee Tool (M) (Прямоугольная область). На скрытом слое с фотографией нажимаем Add vector mask (Добавить векторную маску), создавая маску выбранной области. Теперь слой с фотографией делаем видимым. Это сделает видимой только выделенную часть подсолнечника.
Добавьте текст ниже изображения. Он будет служить описанием к фото.
Повторите те же шаги, чтобы добавить еще 2 миниатюры фотографий (можно использовать Baby и Bokeh изображения либо некоторые из ваших собственных фотографий).
Шаг 9: Делаем нижний колонтитул
Используйте инструмент Horizontal Type Tool (T), чтобы добавить свой текст нижнего колонтитула.
Мы успешно создали элегантный макет сайта с фотографиями! Мы использовали различные приемы и методы, что распространены в развивающихся макетах сайтов, включая использование инструментов выделения, применяя наложение текстур и фильтров, настроек режимов смешивания слоев, и так далее.
Я помню тот первый раз, когда скачал файлы CSS 960 Grid. Первый вопрос был такой: ну и как с помощью всего этого сверстать страницу. Однако всё оказалось довольно таки просто.
Эта статья предназначена для дизайнеров и веб-разработчиков, которые интересуются сеточными CSS системами.
Сегодня мы сконцентрируем наше внимание на системе 960 Grid. После прочтения данной статьи вам уже не будет составлять никакого труда, чтобы разобраться в других CSS фрэймворках, т.к. все они работают по одному и тому же принципу.
Перед тем, как перейти к специфике системы 960 Grid, я хочу разъяснить что такое дизайн основанный на сетке. В принципе в этой системе нет ничего нового, т.к. она основана на старом и добром "выравнивании"
Итак, расслабляем мозги и начинаем впитывать информацию. Рассмотрим несколько макетов страниц:
Как вы видите на данном рисунке изображены исключительно прямоугольные фигуры. Вы конечно же узнали в них различные блоки ваших сайтов. Идём дальше.
На данный момент не было цели создать что-то логическое. Перед вами просто набор фигур, расположенных в хаотическом порядке. Как вы можете заметить, хаос тоже обладает какой-то своей красотой. Он присутствует везде, в природе, в искусстве, дизайне.
Фишка заключается в том, что сетка приносит некоторое логическое содержание в этот хаос и ставит всё на свои места. Это кому-то может не понравиться, но сетки очень важны и эффективны для современного дизайна и совсем не загоняют вас в рамки. Вы по прежнему сможете творить всё, что вздумается.
960 Grid и подобные ей системы, позволяют быстро создать вёрстку основанную на сетке. Данный результат достигается при помощи протестированных на кроссбраузерность пресетов ширины страницы, куда вы помещаете свой код.
До CSS3 было довольно таки геморройно создать множество колонок на своей странице и чтобы они смотрелись одинаково во всех браузерах. Ну и конечно надо было запачкаться в математических расчётах.
К примеру, у вас есть контейнер шириной 1000px и вы хотите разделить его на три колонки. При подсчёте вы выясняли, что вам понадобится 333px на одну колонку. Потом начинались заморочки с отступами, потому что если мы хотели добавить внешний отступ в 10 пикселей, то это значило, что нам надо отнять 20 пикселей у каждой колонки. В итоге у нас получались 3 колонки по 313px что в сумме давало 999px, но никак не 1000px.
А что если вам надо сделать ниже ещё 4 колонки? Всё сначала! Вам надо отнять 80px от ширины родительского контейнера. Остаётся 920px, которые мы делим на 4 колонки шириной 230px.
В конце концов, вы хотите добавить блок меню, который будет занимать 1/4 страницы. Вам надо разделить родительский контейнер на 2: один 250px, другой 750px. Далее опять отнять компенсирующую длину в 40px из-за отступов, и получить колонки шириной 730px и 250px
Многие дизайнеры сталкивались с этим. Это конечно не высшая математика, но на всё это уходит время и нервы. Представьте, что к всему вышеперечисленному надо добавить ещё и рамку в 1px (и всё по новой).
Где же тот кто нас спасёт от всего этого сумасшествия? Вот он - Nathan Smith, создатель 960 Grid.
Данная система - это прекрасное решение для тех, кто не имеет ничего против сайтов шириной 960px.
Почему только 960? Во-первых, т.к. данная ширина позволяется сделать n-ое количество пропорциональных сегментов из которых будет состоять страница. Во-вторых, данная длина "удовлетворяет" подавляющее большинство экранных расширений.
Система 960 Grid может быть представлена нам в 2х начальных вариантах, состоящая из 12 или 16 колонок (Но так же есть и 24 колоночная система - но эт для извращенцев).
В 12 колоночной системе первая ячейка имеет 60px, а все последующие 80.
Так что вы можете делать колонки шириной: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 и 940 пикселей.
Соответственно в 16 колоночной версии, первая будет составлять 40px, а все последующие 60px.
Это значит, что ширина колонки может быть следующей: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 пикселей.
На изображениях представленных выше, вы видите большие и маленькие прямоугольники тёмного цвета, которые представляют собой контейнеры.
Для того, чтобы создать такой контейнер необходимо блоку присвоить соответствующий класс и всё!
Названия данных классов очень просты и говорят сами за себя. Например grid_1 - представляет самую короткую ширину, а grid_12 - самую длинную (в 12 колоночной системе).
Теперь, глядя на этот рисунок вы будете видеть не тёмные прямоугольники, а CSS классы:
Как я уже упомянул ранее названия классов говорят сами за себя. Однако запомните, что в 12 колоночной системе на одну строку не может быть больше 12 одно колоночных элементов и т.д. Так что в какой-то степени считать всё-таки надо будет. Но теперь намного легче). В системе с 16 колонками всё то же самое.
К примеру, если у вас 12 колоночная система и вы хотите создать 3 блока текста, следующие друг за другом, то вам этим трём блокам необходимо задать класс grid_4, что в сумме даст 12 (4+4+4)
Точно такая же логика рассуждения справедлива и к 16 колоночной системе для 4х блоков: 4+4+4+4 = 16.
Теперь внимание: для того, что всё это работало все ваши блоки нужно поместить в один родительский контейнер с классом container_12 или container_16.
Если вы никогда не сталкивались с подобными системами, то я представляю, что сейчас с вами происходит.. Теперь всё можно делать намного легче, быстрее и кроссбраузернее :)
Кроме примитивных классов, которые мы только что с вами видели, система 960 Grid поддерживает ещё несколько полезных фичей, таких к примеру, как перемещение колонки вперёд или назад. Соответственно классы будут push и pull.
Примеры вы можете увидеть на изображении, которое находится ниже. Первая часть изображения состоит из четырёх колонок с классом grid_3.
На второй половине изображения вы можете увидеть результат применения классов push_1 и pull_1.
Помните, что вы можете перемещать колонки столько, сколько вам надо (но в пределах сетки). Если вы хотите переместить колонку на 2 ячейки, то вам надо выставить ей класс push_2 и т.д.
Данная система позволяет разместить элементы на странице.
Представьте, что у вас такая же ситуация, какая на рисунке, расположенном ниже. Блок логотипа стоит на первом месте.
Теперь задача: оставить блог с логотипом на первой позиции, но сделать так, чтобы на странице он отображался в центре.
До перемещения:
Для решения задачи нам надо применить следующие классы:
Результаты не заставят себя долго ждать.
После перемещения:
Если же вам понадобится создать некоторое открытое пространство между блоками, то тут на помощь к вам придут классы prefix и suffix, которые работают практически как push и pull.
К примеру для того, чтобы оставить 1 колонку пустой после блока используйте класс suffix_1 и prefix_1 для пустой колонки до элемента.
В примере выше, вы видите результат применения класса suffix_3 к первому элементу на странице.
Последнее, что вам нужно знать, — это ещё два класса: alpha (первый) и omega (последний), которые должны применяться только если элемент является потомком элемента с одним из вышеперечисленных классов.
Данные классы поставят элементы на соответствующие места - на первое и последнее.
Всё! Теперь вы эксперт в системе 960 Grid.
Вам следует помнить 5 главных идей:
- Используйте для родительского элемента класс container_12 если вы хотите использовать 12-колоночную систему и container_16 если 16 колоночную;
- Используйте классы grid_1, grid_2, grid_3 и т.д. для того, чтобы задать ширину элемента. Помните об ограничениях (grid_4 + grid_2 + grid_6 = 12). В 16 колоночной системе соответственно;
- Используйте классы push и pull для того, чтобы двигать колонки влево или вправо;
- Используйте класса prefix и suffix для создания пустых промежутков между блоками;
- И наконец используйте класс alpha и omega для перемещения колонки на первую или последнюю позицию;
Это ещё не всё! В комплекте с этим замечательным CSS фрэймворком идут так же не менее полезные интернет ресурсы.
Fluid 960 Grid System
Это специальный сайт, вёрстка которого была сделана с помощью системы 960 Grid. Тут вы убедитесь в том, что на этой системе можно делать страницы любой сложности.
The 1KB CSS Grid
Этот сайт предназначен для тех, кого не устраивают стандартные размеры данной системы и он хочет немного другие. Выставляйте свои опции, сайт сформирует для вас новый файл 960 Grid и пользуйтесь на здоровье!
Variable Grid System
То же самое, что и прошлый ресурс, только визуально всё понятнее
Grid-Based Design Gallery
Если вы сомневаетесь в возможностях системы 960 Grid, то советую вам просмотреть галерею сайтов, которые были сделаны на данной системе
Typogridphy
Ещё один CSS фрэймворк, основанный на 960 Grid, предназначенный для оформления текстов
Tiny Fluid Grid
Комбинация ресурса 2 и 3
Несмотря на всю гибкость данной системы у неё есть некоторые ограничения. Всё это не значит, что всем нам нужно переходить на сеточные системы. Это может помешать творчеству разработчиков. Но если у вас нет особых требований, то целесообразнее использовать такую систему.
Как я уже говорил, помимо данной системы, существуют и другие со своими специфическими особенностями. Мы о них ещё поговорим, а пока я бы хотел узнать ваше мнение обо всём вышеизложенном. Спасибо за внимание!
5 последних уроков рубрики "CSS"
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Читайте также: