960 grid system как установить на фотошоп
В этом уроке мы разработаем дизайн веб-страницы, используя 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.
Мы выбрали именно эти точки, потому как при ширине рабочей области в 960px, между точками 360px и 1320px - центральная 840px.
Полезные направляющие
Если вы работаете напрямую из файла 960 Template , направляющие уже созданы, и их необходимо только отобразить через меню View > Show > Guides :
Сохраняем документ как шаблон
Вы можете сохранить этот документ в качестве шаблона и использовать по мере необходимости. Это сэкономит вам кучу времени.
Высоту холста всегда можно изменить под свои нужды. И опять же, со временем вы, вероятно, отдадите предпочтение полноценной системе с дополнительными направляющими.
Шаг 3: приступаем к дизайну
Теперь, когда у нас настроен шаблон, мы можем приступить непосредственно к дизайну.
Мы разделим страницу на пять секций:
- Header;
- Callout;
- Content – Left;
- Content – Right;
- Footer.
Шаг 4: Добавляем заголовок (Header)
Мы начнем с верха страницы и будем двигаться к низу, потому заголовок будет первым элементом, с которым мы работаем.
Эта область будет использоваться под лого и панель меню:
Шаг 5: Вставляем лого
Далее вставляем лого в левый верхний угол, равняем его по второму столбцу сетки, оставляя отступ в 40px. Для этого проекта я использовал лого, основанное на шрифте 50 pt Century Gothic .
Я уменьшил внутреннюю непрозрачность до 25%, поставил значения Distance равное 2px , Choke равное 0% и Size - 5px:
Шаг 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 :
Следующее, что мы должны сделать - убедиться в том, что решетчатый участок распространяется только на область рабочей зоны шириной в 960px. Используйте View > Show > Guides , затем добавьте маску слоя к решетчатому слою:
Выберите маску слоя, щелкнув по ней, затем, используя инструмент Gradient Tool (G) , выберите градиент от черного к прозрачному.
Мы собираемся использовать данный способ для того, чтобы уничтожить сетку, которая располагается за переделами области в 960px.
Убедитесь, что тип градиента - Linear , и он установлен от черного к прозрачному. Начинайте от края и перетаскивайте градиент к началу решетки.
Повторяйте это до тех пор, пока не будете удовлетворены результатом. Заметьте, что маска слоя показывает черный градиент вокруг наружных граней:
Шаг 10: Добавляем содержимое в область Callout
Под этим местом сделаем небольшое вводное предложение шрифтом 17pt и поместим его в левой части области:
Шаг 11: Добавляем слайд-шоу
Это фон к слайдшоу:
Далее вам понадобится некий фиктивный контент для размещения в слайд-шоу. Я использовал скриншот моего блога. Размер меняем под размер области слайд-шоу с помощью меню Select> Modify> Contract 10px , выбрав инверсию, как ранее, далее delete :
Шаг 12: Секция содержимого
Для начала добавим легкий градиент в этой секции. Сначала используйте Rectangular Marquee Tool , чтобы выбрать область для размещения контента, затем - Gradient Tool (G) .
Шаг 13: Содержимое – левая область
Шаг 14: Добавляем список услуг
Повторяйте этот шаг для добавления данных:
Шаг 16: Подвал
Добавьте кнопку подтверждения ввода подобным же образом, но используя инструмент Rounded Rectangle Tool(U) , затем добавьте Inner shadow к созданным элементам, установите значения параметра opacity в 30%, а size и spread в "0" и distance в 10px.
Шаг 17: Подвал – правая часть
Шаг 18: Проверьте выравнивание и баланс всей страницы
Используя сетку и направляющие, проверьте, что все выровнено и сбалансировано. Если нет - подстройте:
Шаг 19: Расслабьтесь. Финиш!
Надеюсь, вы получили понимание того, как можно работать с системой сеток, а также как настроить базовую систему самостоятельно.
Я настоятельно рекомендую вам экспериментировать с этими системами до тех пор, пока работа с ними не станет вашей второй натурой. Со временем, система сеток значительно облегчит вам вашу работу в качестве дизайнера!
Когда я впервые столкнулся с 960 Grid System, я был чрезвычайно взволнован тем, как просто с ее помощью можно реализовать сложные макеты.
Однако, так как в то время я был еще относительным новичком в веб-дизайне, когда я скачал файлы, там было столько информации, что очень быстро все это мне стало казаться очень сложным:
При наличии такого количества кодов, разве можно просто создать макет?
Эта статья предназначена для веб-дизайнеров и веб-разработчиков интерфейсов, которые интересуются системами макетов на базе сетки, но не могут в них разобраться.
Мы рассмотрим конкретно 960 Grid System , однако после прочтения этого руководства, вы увидите, что большинство других систем сеток очень похожи, и вам будет проще с ними работать после того, как вы поймете несколько основных принципов.
Дизайн на базе сетки
Прежде чем перейти к специфике 960 Grid System , давайте кратко рассмотрим дизайн на основе сетки в целом. Эта идея, конечно, не возникла с появлением Интернета. На самом деле, она происходит от одного из старейших и фундаментальных принципов проектирования: выравнивания.
Наш мозг привык упрощать вещи, чтобы их легче было понять. Именно поэтому мы стараемся навести порядок в вещах, которые кажутся хаотичными. Поэтому мы и видим изображения лиц в лунных кратерах.
Естественно, чем легче наводится порядок, тем быстрее наш мозг может определить шаблон и двигаться дальше. Сетки настолько организованны и упорядочены, что они практически не требуют дополнительного осмысления с нашей стороны .
Рассмотрим два макета страниц, которые представлены на рисунке ниже:
Хотя оба этих изображения представляют собой просто набор прямоугольников, верхнее изображение кажется нам принципиально лучше, чем то, что расположено ниже. Мы можем мгновенно распознать структуру, принять ее и двигаться дальше.
Нижнее же изображение визуально кажется неупорядоченным. В нем нет четкой закономерности, порядка или цели – оно просто выглядит как набор случайных фигур.
Когда мы смотрим на что-то, наши глаза имеют тенденцию судорожно пытаться за доли секунды найти закономерность, что увеличивает время, необходимое нам, чтобы оценить картину в целом.
Любопытно, что случайные вещи все равно могут быть красивыми. Случайные элементы, безусловно, могут выглядеть красиво на природе, в искусстве, и даже в дизайне, но им не место в логической организации информации.
Дело в том, что сетки являются одним из самых простых и мощных способов создать порядок на странице. Они могут казаться холодными и жесткими, но помните, что они являются очень эффективными и действенными, к тому же они могут быть достаточно гибкими, если вы не боитесь, что ваше воображение увязнет во всех элементах, необходимых для организации структуры.
Зачем нужна система сеток?
960 Grid System – как и другие подобные инструменты – обеспечивает быстрый и простой способ создания макетов на основе сетки с помощью CSS. Это делается путем предоставления протестированных на совместимость с браузерами и оптимизированных предустановленных размеров столбцов, в которых вы можете размещать контент.
До CSS3, не так то и просто было разбить веб-страницу на столбцы, не прибегая к утомительным математическим вычислениям.
Например, если у вас есть контейнер шириной в 1000 пикселей, и вы хотите разделить его на три столбца, то это будет 333 и 1/3 пикселя на столбец (не лучшее число). Кроме того, столбцы должны быть разделены, иначе их содержимое сольется – значит нужно добавить отступ.
Если к этому добавить отступ в 10 пикселей с каждой стороны каждого столбца, мы должны дополнительно вычесть по 20 пикселей от ширины каждого столбца. Это дает нам 3 столбца примерно по 313 пикселей в ширину и с отступом в 10 пикселей с каждой стороны (даже в этом случае получается 999 пикселей, а не 1000).
Хотите создать 4 столбца чуть ниже? Тогда вы должны начать весь процесс подсчетов с начала и вычесть 80 пикселей отступа от 1000 пикселей общей ширины, а затем 920 пикселей разделить на 4, чтобы получить ширину столбцов в 230 пикселей.
Наконец, если вы хотите добавить боковую панель, которая будет иметь ширину в одну треть ширины страницы, вы должны создать столбец в 750 пикселей для контента и еще один в 250 пикселей для боковой панели, затем вычесть 40 пикселей отступа, чтобы получить ширину одного столбца 730 пикселей и 230 пикселей – ширину другого.
Уже запутались?
Как и многие веб-дизайнеры до вас. Это, конечно, не высшая математика, но это и не то, что вы хотите делать снова и снова, каждый раз, когда беретесь за новый проект.
Решение? Найти кого-то другого, кто разберется с этими сумасшедшими вычислениями ширины столбцов, забьет их в CSS-документ и позволит вам скачать его бесплатно. (Этим человеком оказался Натан Смит , создатель 960 Grid System ).
960 Grid System
960 Grid System – это простой способ создавать макеты сайтов с использованием сетки, которая имеет ширину 960 пикселей:
Причина, почему в качестве базовой ширины выбраны 960 пикселей, заключается в том, что число 960 дает возможность для создания большого количества вариантов разбивки на столбцы и отступы, используя при этом только целые числа. И эти варианты прекрасно вписываются в большинство расширений экранов.
960 GS выпускается в двух основных вариантах: сетка с 12 столбцами и сетка с 16 столбцами (возможно подключение 24-разрядной версии, для тех, кому нужен экстремальный контроль дизайна).
В версии из 12 столбцов, самый узкий столбец имеет ширину 60 пикселей. Ширина каждого следующего столбца увеличивается на 80 пикселей.
Таким образом, доступные размеры ширины столбцов составляют: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 и 940 пикселей:
В 16-разрядной версии самый узкий столбец имеет ширину 40 пикселей, и каждый следующий столбец становится шире на 60 пикселей.
Таким образом, доступные размеры ширины столбцов составляют: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 пикселей:
Сессии CSS классов
Когда вы смотрите на приведенные выше диаграммы, то каждую из темно-синих горизонтальных полос можно рассматривать в 960 Grid System , как класс CSS.
Чтобы создать объект в структуре вашей страницы, ширина которого соответствует ширине одного из этих блоков, нужно просто присвоить ему в div надлежащий класс – вот и все!
Классы имеют показательные названия в соответствии с их размерами сgrid_1 - самый узкий класс CSS, grid_12 – самый широкий (в версии с 16 столбцами самый широкий класс – grid_16 ).
Таким образом, еще раз взгляните на приводимое раньше изображение, но на этот раз думайте о разных размерах ширины столбцов, как о классах CSS:
Эта система названий позволяет невероятно просто за считанные секунды составлять сложные макеты. Для того чтобы заполнить всю ширину страницы используется хитрая уловка. Суть ее заключается в том, что сумма номеров выбранных классов должна равняться 12 в 12-разрядной версии и 16 в 16-разрядной версии.
Например, в версии с 12 столбцами, если у вас есть 3 блока текста, которые вы хотите разместить бок о бок в 3 столбца, просто присвойте класс grid_4 каждому из них, что в сумме составит 12 (4+4+4=12):
Аналогично, присвоив класс CSS grid_4 в версии с 16 столбцами, можно легко создать макет из 4 столбцов (4+4+4+4=16):
Чтобы быть уверенными, что вы использовали соответствующие классы, не забудьте разместить элементы 12-разрядной версии внутри div с классом container_12, а классы 16-разрядной версии внутри div с классом container_16 .
Если вы никогда до этого не работали с 960 GS, я рассчитываю, что прямо сейчас у вас вырвется восклицание на манер « Вот оно как! », которое будет относиться к тому, насколько просто манипулировать макетом с помощью этой системы.
Push Me, Pull Me
960 Grid System позволяет независимо перемещать элементы, перетаскивая их вдоль горизонтального края. Это достигается с помощью классов CSS push и pull .
Рассмотрим два примера, приведенные на рисунке ниже. Первый пример является макетом, состоящим из 4 столбцов, использующим только класс grid_3 .
А во втором варианте, я потянул первый столбец и поставил его на место последнего, в результате чего столбцы сместились на одну позицию, относительно того, как они обычно располагаются в макете:
Имейте в виду, что вы можете перетаскивать блоки куда угодно. Если бы я захотел перетащить элемент из двух столбцов, я бы реализовал класс push_2 , и так далее.
Система push/pull глубоко затрагивает структуру страницы в HTML-документе.
Например, представьте, что в приведенном ниже примере мы вводим имя сайта в логотипе и помещаем его в первый элемент на странице.
Логотип является одним из важнейших элементов сайта, и вы хотели бы, чтобы он присутствовал в качестве первого пункта HTML-разметки. В тоже время, чтобы визуально он выводился в центре страницы.
Чтобы визуально расположить элемент логотипа между двумя текстовыми столбцами, вы должны использовать следующий HTML-код:
В результате выводимый макет будет выглядеть следующим образом:
Несмотря на то, что логотип стоит в начале разметки, визуально он будет располагаться в центре страницы.
Полностью пустые пространства
Вы будете часто сталкиваться с ситуацией, когда вам нужно создать в макете пустое пространство (негативное пространство - это отличный инструмент управления дизайном).
Чтобы достичь этого, для блоков div применяются классы prefix и suffix . Их реализация очень похожа на реализацию классов push и pull.
Например, чтобы оставить пустое пространство, которое будет по ширине равно одному столбцу, используйте перед элементом класс prefix_1 или после элемента класс suffix_1 :
Как видите, в приведенном выше примере используется класс suffix_3 , чтобы создать после него пустое пространство шириной в три столбца.
Начало и конец
И в заключении я хочу дать вам немного информации о классах alpha (" первый ") и omega (" последний "), которые должны применяться к любым элементам сетки, которые являются дочерними для других сеток.
Очевидно, что класс alpha будет применяться к первому дочернему элементу, а класс omega к последнему.
По существу, эти классы задают границы зоны, в которой вы можете размещать модули сетки внутри других модулей.
Подводя итоги
Получив эти новые знания, теперь вы должны чувствовать себя экспертом 960 Grid System .
Базовые принципы системы включают в себя всего 5 концепций, которые вы должны помнить:
- используйте класс container_12 для версии системы с 12 столбцами и container_16 для версии с 16 столбцами;
- используйте классы grid_1 , grid_2 , grid_3 и т.д., чтобы установить ширину столбцов. Если вы хотите заполнить горизонтально всю ширину страницы, убедитесь, что сумма номеров классов равняется 12 или 16 соответственно ( grid_4 + grid_2 + grid_6 = 12);
- используйте классы push и pull , чтобы самостоятельно размещать элементы на странице, независимо от их положения в документе разметки;
- используйте классы prefix и suffix , чтобы создавать пустые пространства в макете;
- используйте классы alpha и omega , чтобы установить границы для любых вложенных элементов сетки.
В 960 Grid System используется также сброс CSS. Это опциональный файл, в основе которого лежит популярный набор сброса CSS Эрика Мейера . Если он вам понравится, используйте его. Если нет, отправьте его в корзину!
Ресурсы 960 Grid System
Теперь, когда вы являетесь экспертом веб-дизайна на основе сетки и 960 Grid System , вот несколько инструментов и ресурсов, с которыми вы можете ознакомиться, чтобы еще больше разобраться в этой теме.
Fluid 960 Grid System
Замечательная адаптивная версия 960 GS ! Плавающие веб-макеты позволяют скорректировать структуру, чтобы она соответствовала странице. В них применяются некоторые действительно сложные коды, но если вы используете эту систему, она будет делать всю тяжелую работу за вас:
The 1KB CSS Grid
Чрезвычайно простая система сеток, элементарная и легкая для понимания. Она имеет много возможностей для настройки, но по умолчанию использует базу в 960 пикселей:
Variable Grid System
Простой и гибкий конструктор CSS сеток на базе 960 Grid System :
Grid-Based Design Gallery
Если вы скептически относитесь к 960 Grid System и к тому, что дизайн на основе сетки может предложить вам как веб-дизайнеру, ознакомьтесь с этой галереей макетов. Как видите, приложив немного фантазии и изобретательности, вы получаете просто безграничные возможности:
Typogridphy
Цитата с официального сайта: « Typogridphy – CSS фреймворк, разработанный, чтобы предоставить веб-дизайнерам и разработчикам интерфейсов возможность быстро создавать привлекательные сеточные макеты типографского качества »:
Tiny Fluid Grid
Это конструктор сеток для адаптивной версии описанной выше системы 1KB Grid System :
За рамки сетки
Стоит признать, даже со всеми возможностями, предлагаемыми сеточными системами наподобие 960 GS , до сих пор существует ряд ограничений. Никто не говорит, что все веб-сайты должны создаваться на основе сетки – это приведет к застою творчества и отсутствию развития новых макетов страниц.
Кроме того, поэкспериментировав с 960 GS , вы увидите, что существует множество способов выйти за рамки системы, что заставит вас переосмыслить свои проекты.
960 Grid System - и другие подобные ей системы – лишь обеспечивают прочную основу тех многих случаев, когда, создавая сайт, вы не стремитесь придумывать какой-либо революционный дизайн, а просто хотите передать информацию понятно и логично, в таком виде, с которым знакомо большое количество пользователей.
Ваши мысли по поводу сеточных систем?
Оставьте свой комментарий и расскажите нам, какую сеточную систему вы предпочитаете, а также была ли вам полезна приведенная нами информация. Какие преимущества вы видите в сеточных системах, какие недостатки? Поделитесь своими мыслями с нами.
Этот урок Фотошопа о том, как создать профессиональный веб-дизайн. Спроектировать свой сайт правильно, от начала до конца, гармонично расположить все элементы, подобрать цвета и оттенки.
Категория: Дизайн
Сложность: Высокая
Дата: 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 системы.
Для начала скачайте шаблон 960 Grid System. Откройте 960_download\templates\photoshop\960_grid_12_col.psd Нажмите Ctrl+Shift+C чтобы изменить размер холста.
Шаг 2. Создание шапки сайта
Создайте новую направляющую (Просмотр > Новая направляющая (View > New Guide)), Положение (Position) установите на 150px, Ориентация (Orientation) - горизонтальная. Повторите этот шаг и создайте ещё две направляющие с положением в 5 и 100 пикселей.
Внутри папки Header создайте новый слой и назовите его "header_top".
С помощью инструмента Прямоугольная область (Rectangular Marquee Tool) создайте выделение 5px в высоту, залейте чёрным цветом и добавьте к слою 1 пиксельную светлую тень.
Создайте новый слой и назовите его "header_bg". Возьмите инструмент Прямоугольная область (Rectangular Marquee Tool) и создайте выделение, как показано на скриншоте ниже.
Откройте окно Стили слоя (Layer Style) и активируйте Внутреннюю тень (Inner Shadow) со следующими параметрами:
Шаг 3. Создание логотипа
Внутри папки Header создайте новую папку "Logo". Возьмите инструмент Текст (Text Tool) и добавьте название сайта и слоган используя параметры со скриншота ниже.
Откройте Стили слоя (Layer Style) и активируйте Тень (Drop Shadow).
Возьмите инструмент Произвольная фигура (Custom Shape Tool) и следуйте подсказкам на скриншоте ниже.
К фигуре добавьте следующие стили:
Тень (Drop Shadow)
Градиент (Gradient Overlay)
Шаг 4. Создание навигации
Внутри папки Header создайте новую папку и назовите её "navigation". С помощью инструмента Текст (Text Tool) добавьте категории, используя параметры указанные на скриншоте ниже.
Дублируйте текстовый слой. Измените цвет оригинального текстового слоя на чёрный и переместите на 1px вверх.
Теперь нам нужно создать эффект для активной категории. Под слоём с категориями создайте новый слой, выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), радиус 10pх, и создайте прямоугольник. В панели слоёв уменьшите Заливку (Fill) до 0%.
Примените следующие стили слоя:
Тень (Drop Shadow)
Внутренняя тень (Inner Shadow)
Наложение градиента (Gradient Overlay)
Шаг 5. Создание поля поиска и хлебных крошек
Внутри папки Header, над слоём header_bg создайте новый слой и назовите его bg. Выберите инструмент Прямоугольная область (Rectangle Marquee Tool), создайте выделение как показано на скриншоте ниже и залейте его каким-нибудь цветом.
Затем добавьте стили слоя используя параметры указанные ниже:
Тень (Drop Shadow)
Внутреннее свечение (Inner Glow)
Наложение градиента (Gradient Overlay)
Обводка (Stroke)
Внутри папки Header создайте папку Search. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), радиус 10px, и создайте прямоугольник как на скриншоте ниже.
Добавьте стили слоя:
Тень (Drop Shadow)
Внутренняя тень (Inner Shadow)
Выберите инструмент Текст (Text Tool) и добавьте какой-нибудь текст в поисковое поле.
Теперь откройте набор соц. иконок и поместите их возле поиска.
Шаг 6. Создание слайд-шоу
Внутри папки Slideshow создайте новый слой и назовите его slide_bg. Создайте новую направляющую, для этого перейдите в Просмотр > Новая направляющая (View > New guide), Положение (Position) установите на 430px, Ориентация (Orientation) горизонтальная. Создайте выделение как на скриншоте ниже и залейте каким-нибудь цветом.
Добавьте следующие стили слоя:
Тень (Drop Shadow)
Наложение узора (Pattern Overlay)
Обводка (Stroke)
Над слоём slide_bg создайте новый слой и назовите его highlights. Выберите инструмент Перо (Pen Tool), нарисуйте фигуру как на скриншоте ниже и создайте выделение.
Залейте выделение белым цветом, измените режим наложения на Мягкий свет (Soft Light) и уменьшите Непрозрачность (Opacity) до 50%
Теперь нужно добавить какой-нибудь текст внутрь нашего слайд-шоу. Выберите инструмент Текст (Text Tool) и, следуя подсказкам на скриншоте ниже, добавьте свой текст.
Шаг 7. Добавление кнопки «Читать далее»
Внутри папки slideshow создайте папку read_more. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), радиус 10px, создайте прямоугольник и поместите как на скриншоте ниже.
Заливку (Fill) слоя уменьшите до 0%. Добавьте следующие стили слоя:
Тень (Drop Shadow)
Внутренняя тень (Inner Shadow)
Наложение градиента (Gradient Overlay)
Загрузите выделение для слоя, который мы только что создали. Перейдите в Выделение > Модификация > Сжать (Select > Modify > Contract), введите 5px и залейте выделение любым цветом.
Добавьте следующие стили слоя:
Тень (Drop Shadow)
Внутреннее свечение (Inner Glow)
Наложение градиента (Gradient Overlay)
Обводка (Stroke)
С помощью инструмента Текст (Text Tool) добавьте надпись «Читать далее» на кнопку и залейте тёмным цветом. Дублируйте текстовый слой, измените цвет текста на белый и сместите на 1px вниз.
Шаг 8. Добавление изображения в слайд-шоу
Выберите инструмент Прямоугольник (Rectangle Tool), создайте прямоугольник и поместите как на скриншоте ниже.
Уменьшите Заливку (Fill) до 0% и добавьте следующие стили слоя:
Тень (Drop Shadow)
Обводка (Stroke)
Я поместил изображение над слоем с прямоугольником. Таким образом у Вас должно получиться что-то вроде этого:
Шаг 9. Добавление переключателей слайдов
Создайте внутри папки Slideshow новую папку и назовите её prev_next. Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом в 10px. Создайте фигуру как показано на скриншоте ниже и переименуйте слой на "prev".
Уменьшите Заливку (Fill) до 0% и добавьте следующие стили:
Тень (Drop Shadow)
Внутренняя тень (Inner Shadow)
Наложение градиента (Gradient Overlay)
Дублируйте слой prev и переименуйте его на next. Отразите его по горизонтали и разместите в противоположной стороне.
Создайте ещё одну папку и назовите её Identifier. Внутри этой папки создайте слой и переименуйте его на inactive. Выберите инструмент Эллипс (Ellipse Tool), создайте несколько круглых фигур, залейте их чёрным цветом и разместите как на скриншоте ниже.
Добавьте им те же стили что и у кнопок prev_next.
Загрузите выделение для первой фигуры, перейдите в Выделение > Модификация > Сжать (Select > Modify > Contract) и введите 5px. Создайте новый слой, назовите его active, и залейте выделение каким-нибудь цветом.
Добавьте следующие стили:
Тень (Drop Shadow)
Внутреннее свечение (Inner Glow)
Наложение градиента (Gradient Overlay)
Шаг 9. Добавление контента
Внутри папки services создайте новый слой. Возьмите инструмент Текст (Text Tool) и добавьте заголовок используя параметры на скриншоте ниже.
Теперь давайте добавим разделитель. Выберите инструмент Линия (Line Tool), ширина 1px. Создайте две линии и разместите их как на скриншоте ниже.
Создайте новую папку и назовите её service1. Выберите инструмент Текст (Text Tool) и добавьте заголовок используя параметры указанные на скриншоте ниже. Откройте набор иконок, который Вы скачали в начале урока, и добавьте иконку возле заголовка.
Дублируйте несколько раз группу. Разместите их так же как на скриншоте ниже. В каждой группе измените иконку.
Шаг 10. Добавление блока «О нас»
Внутри папки about us создайте новый слой. С помощью инструмента Текст (Text Tool) добавьте заголовок. Дублируйте слой с разделителем, который мы создали в предыдущем шаге, и переместите его под заголовок.
Также добавьте какую-нибудь информацию о себе, используя параметры указанные на скриншоте ниже.
Перейдите в окно Стили слоя и добавьте следующие стили:
Тень (Drop Shadow)
Обводка (Stroke)
Шаг 11. Добавление последних записей из Твиттера
Внутри папки latest tweets создайте новый слой и с помощью инструмента Текст (Text Tool) добавьте какой-нибудь текст. С помощью инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) создайте прямоугольник и поместите его под какой-нибудь записью.
Для слоя с прямоугольником добавьте следующие стили слоя:
Тень (Drop Shadow)
Шаг 12. Создание футера
В папке footer создайте новый слой и назовите его footer_bg. Создайте выделение как на скриншоте ниже и залейте его каким-нибудь цветом.
Добавьте стили слоя:
Внутреннее свечение (Inner Glow)
Наложение градиента (Gradient Overlay)
Обводка (Stroke)
Возьмите инструмент Текст (Text Tool) и добавьте в центре футера свои копирайты.
В этом уроке мы будем использовать 960 Grid System. Скачайте и разархивируйте архив. Откройте файл “960_grid_12_col.psd” в Фотошопе (вы найдете его внутри папки "photoshop", которая находится в папке "templates").
После того как откроете .psd файл в Фотошопе Вы увидите 12 красных полос. Эту сетку мы и будем использовать в течении всего урока. Вы можете скрыть эту сетку кликнув по иконке глаза у слоя "12 Col Grid".
В течении урока Вам нужно будет создавать фигуры с определенными размерами. Поэтому откройте Инфо панель (Окно > Инфо (Window > Info)) и теперь когда будете создавать фигуру Вы сможете видеть в инфо панели её точную ширину и высоту.
Также .psd файл содержит направляющие. Чтобы скрыть их, перейдите в меню Просмотр > Показать > Направляющие (View > Show > Guides), или нажмите клавиши Ctrl + ;. Обычно я скрываю красные полосы и активирую направляющие только тогда, когда они мне нужны.
Теперь, когда мы разобрались с основами использования 960 Grid System, мы можем начинать создавать наш макет. Давайте начнём!
Шаг 1. Настройка документа
Откройте файл “960_grid_12_col.psd” в Фотошопе. Перейдите в меню Изображение > Размер холста (Image > Canvas Size) и измените ширину на 1200px, а высоту на 2400px.
Шаг 2. Создание фона шапки сайта
Шаг 3
Шаг 4. Создание треугольного узора
Сейчас мы создадим узор, который будем использовать в шапке сайта. Создайте новый документ 20х8px. Увеличьте изображение, выберите инструмент Перо (Pen Tool) и создайте чёрный треугольник. Скройте фоновый слой. Перейдите в меню Редактирование > Определить узор (Edit > Define Pattern), назовите как-нибудь узор и нажмите OK. Закройте этот документ.
Шаг 5. Применение узора
Инструментом Прямоугольник (Rectangle Tool) создайте фигуру 1200х10px. Установите Заливку (Fill) слоя на 0%. Назовите слой “top pattern”. Дважды кликните по слою, чтобы открыть окно Стили слоя и используйте параметры из скриншота ниже.
Шаг 6. Изменение цвета узора
Шаг 7. Дублирование слоя с узором
Шаг 8. Создание текстуры для шапки
Нам нужно чтобы текстура была только в области шапки. Для этого зажмите клавишу Ctrl и кликните по иконкам слоёв “header bg” и “bottom pattern”. Убедитесь что слой “texture” активен и перейдите в меню Слой > Слой-маска > Показать выделенную область (Layer > Layer Mask > Reveal Selection).
Перейдите в меню Фильтр > Шум > Добавить шум (Filter > Noise > Add Noise) и используйте параметры из скриншота ниже. Затем перейдите в Фильтр > Эскиз > Мокрая бумага (Filter > Sketch > Water Paper). Измените режим наложения на Мягкий свет (Soft Light).
Шаг 9. Добавление логотипа
Шаг 10. Создание навигационной панели
Создайте новую группу и назовите её “navigation”. Выберите инструмент Текст (Type Tool) и добавьте свои пункты меню. Я использовал белый цвет и шрифт Univers Light Condensed размером 18pt. Для лучшего расположения пунктов меню используйте направляющие. Добавьте стиль Тень (Drop Shadow) используя параметры из скриншота ниже.
Скачайте набор иконок и выберите иконки для Вашего меню. Откройте эти иконки в Фотошопе и разместите их над меню, как показано на скриншоте ниже.
Шаг 11. Создание активного элемента меню
Шаг 12. Создание диагонального узора
Создайте новый документ 4х4px. Увеличьте его, выберите инструмент Прямоугольное выделение (Rectangular Marquee Tool), зажмите клавишу Shift и создайте четыре квадратных выделения. Создайте новый слой и залейте выделение чёрным цветом. Уберите выделение. Скройте фоновый слой и перейдите в меню Редактирование > Определить узор. Закройте документ.
Шаг 13. Создание слайдера
Шаг 14
Создайте ещё один прямоугольник 980х330px белого цвета. Назовите этот слой “image_holder” и расположите прямоугольник в центре предыдущего. В этой области будут показываться изображения. Откройте какое-нибудь изображение в Фотошопе и переместите его в свой документ, поверх слоя “image_holder”. Назовите этот слой “image”, правый клик по нему и выберите Создать обтравочную маску (Create Clipping Mask).
Шаг 15. Создание переключателей
Дублируйте группу “right arrow” и перейдите в меню Редактирование > Трансформирование > Отразить по горизонтали (Edit > Transform > Flip Horizontal). Переименуйте группу на “left arrow” и переместите её в левую часть слайдера.
Шаг 16. Создание ленты для заголовка
Сейчас мы создадим ленту для заголовка. Позже мы будем использовать такие ленты и в других областях нашего шаблона.
Шаг 17. Добавление тени к ленте
Над слоём "bg" создайте новый слой и назовите его “shadows”. Правый клик по слою и выберите Создать обтравочную маску (Create Clipping Mask).
Выберите инструмент Кисть (Brush Tool) и мягкой, чёрной кистью с Непрозрачностью (Оpacity) 60% добавьте тени на ленту. Измените цвет кисти на белый и добавьте блики. Установите режим наложения для слоя на Мягкий свет (Soft Light) и уменьшите Непрозрачность (Opacity) до 70%.
Выберите инструмент Текст (Type Tool) и на ленте напишите слово “Featured”. Я использовал белый цвет и шрифт Univers Ultra Condensed. Добавьте тень к текстовому слою используя параметры из скриншота ниже.
Шаг 19
Выберите инструмент Линия (Line Tool) толщиной 1px и создайте чёрную горизонтальную линию шириной в 10px. Поместите эту линию в верхний левый угол ленты.
Дублируйте линию и передвиньте вправо. Повторяйте это действие до тех пор, пока не дойдете до правого угла. Поместите все слои с линиями в группу и назовите её “top”. Поместите группу внутрь ещё одной и назовите её “dashed lines”.
Дублируйте группу “top” и передвиньте вниз ленты. Переименуйте группу на “bottom”. Установите режим наложения для группы “dashed lines” на Мягкий свет (Soft Light), Непрозрачность (Opacity) уменьшите до 50%.
Шаг 20
Возьмите инструмент Прямоугольная область (Rectangular Marquee Tool) и создайте выделение, как на скриншоте ниже. Создайте новый слой и чёрной мягкой кистью добавьте тень в левой части ленты. Уберите выделение (Ctrl+D). Назовите этот слой “shadow” и уменьшите Непрозрачность (Opacity) до 50%.
Шаг 21. Создание фона для контента
Создайте новую группу и назовите её “content bg”. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру 1000х1670px. Высота зависит от того, как Вы будете выравнивать элементы в шаблоне. Если Вам нужна другая высота у фонового слоя, Вы сможете изменить её, после того, как добавите контент.
Преобразуйте слой в смарт-объект. Перейдите в меню Фильтр > Шум > Добавить шум (Filter > Noise > Add Noise) и используйте параметры указанные ниже.
Шаг 22. Создание белых треугольных узоров
Создайте новый документ 20х10px. Увеличьте его и возьмите инструмент Перо (Pen Tool). Создайте белую треугольную фигуру, как на скриншоте ниже. Скройте фоновый слой и перейдите в меню Редактирование > Определить узор (Edit > Define Pattern).
Перейдите в меню Редактирование > Трансформирование > Отразить по вертикали (Edit > Transform > Flip Vertical) и инструментом Перемещение (Move Tool) переместите фигуру в нижнюю часть документа. Сохраните этот узор и закройте документ.
Шаг 23. Применение треугольных узоров
Инструментом Прямоугольник (Rectangle Tool) создайте фигуру 1000х10px и разместите её в верхней части области контента. Назовите этот слой “top triangles” и уменьшите Заливку (Fill) до 0%. Откройте окно Стили слоя и примените узор, который Вы создали в предыдущем шаге.
Дублируйте этот слой и переместите фигуру вниз. Назовите слой “bottom triangles” и измените узор.
Шаг 24. Создание области “Services”
Шаг 25. Добавление описания сервисов
Шаг 26
Шаг 27
Инструментом Текст (Type Tool) добавьте какой-нибудь контент, как на скриншоте ниже.
Шаг 28. Создание кнопки “Read More”
Инструментом Текст (Type Tool) напишите “Read More »” на своей кнопке. Я использовал белый цвет и шрифт Univers Light Condensed размером 16pt. Добавьте тень к слою используя параметры на скриншоте ниже.
Шаг 29
Дублируйте группу “web design” три раза. Активируйте направляющие и разместите элементы так же, как на скриншоте ниже. Инструментом Текст (Type Tool) измените названия сервисов.
Шаг 30. Создание области "Portfolio"
Следующие разделы шаблона будет легче создать, т.к. мы будем просто копировать элементы созданные в предыдущих шагах и немного редактировать их.
Шаг 31. Создание области “About”
Шаг 32. Создание области “Blog”
Шаг 33. Создание сайдбара
Возьмите инструмент Прямоугольник (Rectangle Tool) и создайте фигуру 300х5px и поместите её под 1px линией. Назовите этот слой “diagonal lines” и уменьшите Заливку (Fill) до 0%. Добавьте стиль Наложение узора (Pattern Overlay) со следующими параметрами:
Ниже создайте ещё один список, тем же способом, что и категории.
Шаг 34. Добавление разделителей между областями контента
Дублируйте этот слой и разместите его между областью “portfolio” и “blog”.
Шаг 35. Создание футера
Читайте также: