Адаптивный дизайн сайта как сделать в фотошопе
Резиновая верстка позволяет представить весь контент в удобном для чтения на любых устройствах или размерах экранов виде.
Большинство дизайнеров использует для этого макеты с плавающей сеткой, так как с их помощью проще работать с различными типами устройств.
В этой статье мы рассмотрим плавающие сетки и их значение в адаптивном дизайне.
Что такое макеты с плавающей сеткой?
Сначала нужно понять, что такое плавающие сетки. Лучшее определение жидкости дано в Википедии:
Жидкость представляет собой вещество, которое постоянно изменяется (смещается) при приложении к нему усилия.
В веб-дизайне, плавающей жидкостью будет наш дизайн или макет, а усилием - размер экрана или устройство пользователя. Независимо от того, каковы эти устройства или размер экрана, компоненты в плавающей конструкции будут смещаться, и приспосабливаться к среде пользователя.
Важность плавающих сеток
Для определенных видов устройств мы должны задать ширину и высоту вручную. Так как при резиновой верстке сайта плавающие сетки смещаются в пределах размеров родительского контейнера, ограничительные параметры нужны для различных размеров экрана и устройств.
Мы не можем ориентироваться на определенные устройства. Преимущество плавающей сетки заключается в том, что мы можем задать максимальную ширину, и она будет работать на больших экранах с помощью параметров, заданных в процентах.
Как работают плавающие сетки
Для резиновой верстки CSS с фиксированной сеткой раньше использовали 960-пиксельную систему сеток. Адаптивность макета достигалась за счет использования различных размеров в пикселях для различных размеров экрана. Теперь настало время для создания макетов на основе процентных соотношений, которые известны как плавающие макеты.
В плавающих сетках мы определяем для конструкции максимальный размер макета. При этом сетка делится на определенное количество столбцов. Затем мы создаем каждый элемент с пропорциональными шириной и высотой, а не на основе размеров в пикселях. Всякий раз, когда изменяется устройство или размер экрана, ширина и высота элемента регулируется пропорционально размерам родительского контейнера.
Перейдем к более глубокому рассмотрению плавающих сеток, чтобы получить представление о том, как работают плавающие макеты.
Системы и генераторы плавающих сеток
Создать плавающую сетку не так просто, для этого потребуется время и усилия. Поэтому разумно было бы выбрать в качестве основы для дизайна макета CSS-фреймворк сеток или генератор сеток.
Ниже приведен список бесплатных CSS систем и генераторов сеток для резиновой верстки на div :
- Variable Grid System ;
- Fluid Grids Calculator ;
- Fluid Grid by Bootstrap .
Большинство CSS-фреймворков сеток содержат встроенные интеллектуальные функции и были проверены во многих браузерах. Целью данного руководства является дать вам полное понимание создания адаптивной верстки и резиновой с помощью плавающих сеток.
Следовательно, было бы разумно создать плавающую сетку, на примере которой вы смогли бы понять принципы ее работы.
Я использую Variable Grid System , чтобы сгенерировать плавающую сетку в соответствии с установленными требованиями. Перейдите к демо-версии и измените значения переменных. Я буду использовать следующие значения:
- Ширина столбца – 60;
- Количество столбцов – 12;
- Ширина отступа – 20.
После этого скачайте плавающую версию файла CSS . Теперь откройте его в текстовом редакторе по своему усмотрению и найдите строку Grid >> 12 Columns . Приведенный ниже код представляет собой содержимое раздела Grid >> 12 Columns :
container_12 - это главный контейнер. Каждый элемент нашего дизайна должен находиться внутри контейнера с классом container_12 . На основе процентных соотношений устанавливаются классы .grid_1 , .grid_2 … .grid_n . Плавающие сетки строятся с использованием столбцов, которые рассматриваются, как плавающие столбцы. Когда изменяется размер экрана, ширина этих столбцов будет регулироваться пропорционально размерам родительского контейнера.
В нашей сетке есть 12 плавающих столбцов. Рассмотрим, как столбцы располагаются в макете резиновой верстки ( пример ):
Код для данного раздела приводится ниже. Для получения дополнительной информации вы можете посмотреть загруженные файлы:
Каждый набор компонентов содержится внутри элемента с классом container_12 . Внутри контейнера мы можем использовать для создания плавающего столбца с определенной шириной класс grid_n . С помощью класса grid_1 мы можем получить столбец в 1/12 ширины исходной сетки, с помощью grid_2 - в 2/12 .
Вы можете загрузить демо-версию и изменить размер окна браузера, чтобы увидеть сетки с плавающими столбцами в действии.
Вложенные плавающие столбцы
Если вы используете в html верстку резиновую с помощью CSS-фреймворков , то создавать сетки с плавающими столбцами несложно. Но не все проекты будут настолько простыми, как приведенный выше макет. Возможно, вам потребуется создать столбцы и строки внутри других элементов. Столбцы, содержащиеся в родительском столбце, называются вложенными столбцами. Давайте посмотрим, как создать вложенные плавающие столбцы с помощью файла CSS , который мы сгенерировали ранее.
Приведенный выше макет содержит две строки. Первая строка разделена на две секции из шести столбцов, и каждая из двух секций снова разделена на четыре секции из трех столбцов.
Аналогично вторая строка разделена на три секции из четырех столбцов, и каждая из трех секций также разделена на три секции из четырех столбцов. Таким образом, в сетках создаются вложенные столбцы. Давайте рассмотрим код приведенного выше макета:
Сначала мы создаем основные контейнеры и столбцы, как мы это делали в предыдущем разделе. Внутри столбца нам нужно создать еще один контейнер с классом container_12 для вложенных столбцов. Теперь мы получаем еще 12 столбцов внутри основных шести. Затем двенадцать подстолбцов можно разделять по необходимости.
Конструкция в основе плавающей сетки
Большинство начинающих дизайнеров думает, что использование CSS-фреймворка сделает макет адаптивным. К сожалению, создать резиновую верстку не так просто. Плавающие сетки будут адаптироваться к изменению окна браузера или устройства. Если вы тщательно не спланируете дизайн, у пользователей будут проблемы при просмотре контента на небольших устройствах.
Рассмотрим приведенный ниже экран:
Таким образом, плавающая сетка, рассмотренная в предыдущих разделах, будет отображаться на маленьких экранах. Это только столбцы сетки без соответствующих данных. Даже в этом случае число 1 не отображается надлежащим образом. Когда дело дойдет до вывода контента, это будет полный беспорядок. В этом случае нам нужно настроить ширину столбцов.
Вы можете использовать медиа-запросы CSS , чтобы настроить ширину столбцов для разных размеров экрана в резиновой верстке сайта. В приведенном выше сценарии можно удвоить ширину столбца и получить 6 столбцов вместо 12, чтобы обеспечить лучшую читаемость контента. Поэтому в адаптивных конструкциях не все зависит от плавающей сетки.
Тестирование плавающих сеток
Теперь, когда мы рассмотрели основы построения плавающих сеток, перейдем к созданию простой демо-версии с использованием JQuery , чтобы протестировать плавающую сетку на различных размерах экрана. Сначала создадим макет страницы и панель навигации:
Тестовая страница имеет базовый HTML-макет с JQuery . Элемент с ID device_panel будет содержать панель навигации для стандартных устройств: стационарные компьютеры, смартфоны и планшеты. После нажатия на ссылку будет вызываться функция changeGrid с типом устройства в качестве параметра.
В нижней части мы имеем iframe , который будет использоваться для загрузки плавающей сетки резиновой верстки CSS . Она находится в файле media_query.html . Теперь давайте посмотрим на функцию changeGrid :
После вызова функции она устанавливает тип устройства с помощью переданного параметра. Затем она изменит ширину .wrapper ( IFRAME ) на стандартную ширину для этого типа устройства. Тогда мы сможем увидеть, как работает плавающая сетка на небольших экранах.
Плавающая сетка, используемая в файле media_query.html , будет похожа на сетку из примеров, которые мы рассматривали в предыдущем разделе. Вы можете использовать демо-файлы для настройки кодов. У вас должно получиться что-то наподобие экрана, приведенного на рисунке ниже:
Заключение
Плавающие сетки позволяют создавать адаптивные макеты и осуществлять резиновую верстку, которые динамически подстраиваются под размеры экрана. С помощью существующих CSS-фреймворков сложность разработки плавающей сетки может быть сведена к минимуму.
Создание адаптивного дизайна зависит не только от плавающей сетки. Настройте плавающую сетку в соответствии с дизайном, когда это необходимо, чтобы обеспечить наилучший опыт взаимодействия пользователя.
В этой статье я попытаюсь рассказать, как сделать простой шаблон адаптивным. И, конечно же, я попытаюсь объяснить, что такое адаптивный дизайн.
Что такое адаптивный дизайн?
Я уверен, что вы часто «серфите» по сайтам с мобильных устройств и не раз замечали, что есть сайты, где надо масштабировать страницу, чтобы прочитать текст. А бывает, что еще хуже — текст может не поместится на всю страницу и вам придется крутить страницу и по горизонтали, и по вертикали.
Зайдя на сайт с адаптивным шаблоном все меняется, ибо текст «подстраивается» под ваш телефон (разрешение экрана).
Теория (основы)
Думаю, всем известно, что все шаблоны (их стиль) построен на CSS. И адаптивный дизайн — не исключение. Наиболее важное изменение — изменение единиц измерения. Представим, ширина блока 400 пикселей, а значит, что ее надо указывать в процентах (например, 40%).
max-width и width
Тоже очень важная часть в дизайне. Например, ширина нашего сайта 1000 пикселей, но при изменение окна (по ширине, меньше 1000 пикселей), появится горизонтальная прокрутка. Но все поменяется, если мы укажем width: 100%, ибо сайт будет «подстраиваться» под наш экран.
С большими мониторами не так все просто, поскольку текст растянется на весь экран. А получается, если монитор широкоформатный, то текст будет нечитабельным.
Если вам нужно, чтобы сайт остался с такой же шириной, но при этом остался «адаптивным» — надо изменить CSS-код, как указано ниже.
min-width и width
Если чуть выше мы ставили максимальную ширину, то здесь мы устанавливаем минимальную ширину. К примеру, если установить минимальную ширину 200 пикселей, то окно браузера достигает этой ширины и оно больше не будет уменьшаться (появится горизонтальная прокрутка).
Практика
Шаблон, который будет выступать в качестве демонострации, будет иметь в себе три составляющих: шапка, основной контент и боковая колонка (сайтбар).
Как вы заметили, ширина шаблона 1000 пикселей. В шаблоне используется width и max-width: о них написано выше.
Использование media screen
Стоит отметить, что в media screen задается нужное разрешение экрана устройства. Их очень много, можно указывать даже свои, но самые популярные: 320px, 480px, 600px, 768px, 1024px. В моем примере используется два разрешения: 768px и 1024px.
Таким образом выглядит тег media screen в CSS
Как можно увидеть, мы используем максимальную ширину — 1024px. Данное свойство будет предаваться только тогда, когда ширина окна будет меньше 1024 пикселей.
1024 пикселя
Допустим, что наша цель — чуть-чуть сузить шаблон при этом разрешении, но основной контент и сайтбар должны оставаться на месте.
Вот, что необходимо прописать в CSS
768px
Теперь мы пишем настройки для окон, ширина которых 768 пикселей и меньше. Сейчас мы будем распологать сайтбар под основным контентом.
Для сайтбара ширина та же, а выравнивание по правому боку (float: right;) мы убрали. Ко всему этому, мы добавили отступ (margin-top: 25px;), чтобы эти два блока разделялись.
Для того, чтобы картинки также сужались нужно использовать этот код
-Как делать адаптивный дизайн непосредственно самому дизайнеру?
-Каким образом подстраивается сайт под разрешение экрана?
-Нужно ли делать дизайн под несколько разрешений экрана или это работа верстальщика/программиста?
По адаптивному дизайну поисковики выдают в основном как это в коде делается или в вёрстке.
- Вопрос задан более трёх лет назад
- 14322 просмотра
В идеале делается так:
1 дизайн, который сможет тянуться на любую ширину. Включается, если ширина > 1920px.
1 дизайн для широких экранов 1024 1 дизайн для мелких экранов 512 часто опускают)
1 для планшетов
1 для телефонов
Обычно, это одинаковые дизайны, только чуть подправленные. Но у каждого есть свои наработки и идеи по реализации адаптивного дизайна.
для мелких экранов и планшетов это одно и тоже уже -) даже некоторые телефоны под мелкие экраны попадают.
Макетов делается столько, сколько нужно в зависимости от каждого конкретного дизайна (дизайнера) и ТЗ.
Каждый дополнительный макет +/- разрешении создается в случае, когда элементы UI, сетка и т.п. выходит за рамки простого "растягивания" и таким образом поведение элементов на странице невозможно "предугадать" на этапе версте. Поэтому скорее всего fron-end разработчик создаст простые правила по которым ваш дизайна будет просто растягиваться в нужном диапазоне.
Поэтому например, если будущий сайт должен "хорошо смотреться" в диапазоне разрешений от 320 до 1920px и нет строгих требований к его адаптивности (прим. ниже 960px у нас сенсоры, и UI должен быть соответствующим), дизайнер в праве сам решать на каком разрешении понадобиться новый макет, когда кнопка 200x20px, превратится в 200x40px или когда исчезнут дополнительные иконки иллюстрирующие пункты меню и останутся только заголовки.
Смарт-объекты являются одной из наиболее мощных функций Photoshop . Из этой статьи вы узнаете, как подготовить макет группы экранов различных устройств, а затем добавить к ним слои смарт-объектов. После того, как все будет сделано, вы сможете изменять изображения на экранах, обновляя смарт-объекты.
Каждый смарт-объект может содержать несколько слоев. Таким образом, вы сможете очень быстро и легко модифицировать свою презентацию.
1. Подготовка макета
Шаг 1
Я начинаю с трех различных устройств. Вы можете использовать любые изображения на свой вкус. Данный файл содержит отдельные слои теней и бликов для каждого экрана:
Шаг 2
Подготовьте отдельный слой для каждого экрана. Выберите инструмент « Прямоугольник » ( U ) и нарисуйте прямоугольники того же размера, что и каждый экран. Также можно использовать инструмент « Прямоугольная область » ( M ). Какой бы метод вы не использовали, каждый " экран " должен располагаться на отдельном слое:
Нарисуйте прямоугольник того же размера, что и экран. Он будет соответствовать изображению у вас на экране. Этот прямоугольник должен располагаться на отдельном слое.
Я предпочитаю использовать слой фигуры, потому что ее проще затем настроить с помощью команды « Свободное трансформирование » ( Ctrl-T ):
Шаг 3
Создайте слой экрана для каждого из устройств. Вы можете залить фигуры любым цветом. Эти слои будут использоваться позже, чтобы замаскировать смарт-объекты. В данный момент ваш макет должен выглядеть, как показано на рисунке ниже:
Шаг 4
Сейчас я рекомендую немного упорядочить все элементы. Названия и упорядоченная структура слоев поможет вам сэкономить время в дальнейшем. На рисунке ниже я обозначил отдельным цветом все слои, которые принадлежат к разным устройствам. Чтобы изменить цвет слоя, кликните на слое, чтобы выделить его, а затем вызовите выпадающее меню сбоку в палитре « Слои » и выберите пункт « Свойства слоя »:
Также можно создать группы слоев для каждого устройства. Выберите все слои, которые относятся к одному устройству, и в выпадающем меню палитры « Слои » выберите « Новая группа слоев ». Вы можете установить цвет для всей группы через пункт « Свойства группы »:
2. Настройка смарт-объектов
Шаг 1
Я буду использовать скриншот сайта Tuts+. Перетащите скриншот в PSD-макет. Поместите этот слой поверх слоя экрана монитора компьютера. Можно преобразовать этот слой в смарт-объект одним из трех способов:
• Перейдите в Слой> Смарт-объект> Преобразовать в смарт-объект.
• Вызовите выпадающее меню сбоку в палитре «Слои» и выберите пункт «Преобразовать в смарт-объект».
• Кликните правой кнопкой мыши на слое в панели слоев и в контекстном меню выберите пункт «Преобразовать в смарт-объект».
Примечание : Не изменяйте размер слоя в соответствии с размером экрана до его преобразования в смарт-объект:
Шаг 2
Теперь нужно изменить размер смарт-объекта, чтобы он соответствовал ширине экрана монитора. Нажмите Command / Ctrl-T и с помощью опорных точек измените размер изображения. При работе со смарт-объектом вы заметите одно визуальное отличие: опорные точки смарт-объекта при преобразовании будут иметь сплошную заливку, в то время как опорные точки обычного слоя имеют прозрачную середину.
Пока пускай смарт-объект выходит снизу за границы экрана монитора. Если хотите, переименуйте слой смарт-объекта:
Шаг 3
Создайте дубликат слоя смарт-объекта, перетащив его на иконку нового слоя в нижней части палитры слоев:
Начнем с макета страницы, а затем перейдем к разработке ее отдельных элементов. Результатом будет современный макет веб-страницы, готовый к верстке:
Его ключевыми особенностями являются горизонтальные полосы для разделения контента, красочный заголовок, портфолио, двухрядный основной макет и подвал со ссылками:
Перед тем, как создать сайт в Фотошопе , лучше сделать наброски основных контуров на бумаге:
Проектирование макета также помогает разработать структуру и получить представление о лучших позициях для ключевых элементов дизайна:
Создавая новый документ в Adobe Photoshop , я делаю макет размером, соответствующим распространенному широкоформатному монитору, чтобы дать хорошее представление общего вида сайта:
Отмерьте направляющими ширину в 960 пикселей в центре документа и создайте базовую сетку для размещения элементов страницы:
Начнем создание дизайна сайта в Photoshop с заголовка. Сделайте выделение по всей ширине документа и залейте его белым цветом. Дважды щелкните на слое, чтобы открыть стили слоя и добавьте « Наложение градиента » ( Gradient Overlay ) с вертикальным переходом от серого цвета к белому:
Далее нарисуем область основного заголовка, где будет размещен избранный материал. На новом слое сделайте выделение, затем примените к нему стиль « Наложение градиента » с двумя цветами. Также добавьте неброскую внутреннюю тень, чтобы придать эскизу глубины:
Выделив область заголовка с маской, нажмите CTRL+SHIFT+C , чтобы скопировать совмещенные данные, а затем вставьте их на новый слой. Перейдите на вкладку Фильтр > Шум > Добавить шум , чтобы создать простую текстуру, затем установите режим наложения « Умножение » и снизьте прозрачность до подходящего значения:
Далее продолжаем делать сайт в Фотошоп , вставив логотип компании и расположив его в сетке. Добавьте стиль « Наложение градиента » с настройками, соответствующими цветам заголовка, затем создайте мягкую внутреннюю тень:
Используйте инструмент « Текст » для создания меню главной навигации, задайте средне-серый цвет для шрифта, а для активной ссылки используйте немного более темный оттенок:
Заголовок – это отличное место, чтобы представить сайт. С ярким фоном он привлекает основное внимание пользователя. Используйте это пространство, чтобы поместить привлекательный вступительный заголовок с индивидуальным шрифтом, который соответствует имиджу компании:
Продолжайте детализировать вводный контент, но на этот раз используйте семейства шрифта Arial или Helvetica , чтобы текст можно было поместить в html без замены изображений:
Перед тем, как сделать сайт в Фотошопе до конца, расположите изображение ноутбука посередине. Это хорошо согласуется с образом выдуманной компании, и создает отличное тематическое пространство для отображения примеров работ на экране компьютера:
Подчеркните эту область радиальным градиентом, исходящим из-за компьютера. Этот дополнительный штрих поможет возвысить элемент над страницей:
Под основным заголовком создайте другое выделение и заполните его бело-серым градиентом:
Разделите среднюю часть страницы на две колонки с направляющими, привязанными к линиям сетки. Слева у нас будет главная панель контента, а правая будет содержать тонкую боковую панель. Используйте инструмент « Текст », чтобы добавить текст для примера:
Ниже область основного контента может содержать место для отображения последних записей блога. Разделите этот столбец еще на две колонки и набросайте примеры записей. Ссылки заголовков должны расцениваться пользователями как кликабельные, поэтому измените их цвет, чтобы дать визуальную подсказку:
При создании сайта с нуля в Фотошопе и верстке используем инструмент « Прямоугольник со скругленными углами », чтобы нарисовать прямоугольник на боковой панели. Первоначальный цвет не имеет значения, так как мы будем менять его стиль в следующем шаге:
Дважды щелкните по слою и добавьте ряд стилей слоя, в том числе серо-белый градиент, тонкую серую обводку и мягкую внутреннюю тень:
Используйте эту боковую панель, чтобы разработать секцию Featured Project ( Рекомендуемый проект ). Ее элементы могут включать в себя небольшие снимки и отрывки текста:
Нарисуйте еще один прямоугольник, чтобы использовать его как кнопку. Добавьте пару стилей слоя, таких как « Наложение градиента » и « Обводка », чтобы стиль кнопки соответствовал общей серой теме:
Создайте короткую и содержательную надпись для кнопки, побуждающую пользователя пройтись по сайту, чтобы посмотреть будущие проекты:
Обозначьте конец контента, нарисовав на экране область подвала. Заполните это пространство светло-серым цветом, чтобы отличить его от области основного контента:
Создание сайта в Photoshop продолжим с рисования круглой маски и заполнения ее радиальным градиентом от черного до прозрачного. Нажмите Ctrl+T , чтобы трансформировать выделение, сожмите и растяните созданную область для формирования длинного, похожего на тень изображения:
Расположите тень по центру экрана, затем удалите лишнее пространство над подвалом. В результате получится тонкая тень, которая « приподнимает » главную страницу, добавив дизайну немного деталей:
Подвал является отличным местом для отображения второстепенных элементов страницы. Например, формы для авторизации пользователей. Доработайте дизайн с помощью инструмента « Текст », а затем нарисуйте пару полей для ввода. Дополните поля мягкой внутренней тенью:
Добавьте контактную информацию в нижний правый угол. Так эти данные будут всегда под рукой у пользователей. Выделите наиболее важные аспекты с помощью размера и большей толщины или цвета:
Итоговый дизайн сайта в Фотошопе искусно сочетает все необходимые элементы на странице, которые выравнены по базовой сетке. В результате мы получили структурированный макет с разными оттенками серого цвета. Такая цветовая гамма используется для подчеркивания предметных областей и важного контента.
Читайте также: