Размер сайта в пикселях для создания в фотошопе

Обновлено: 02.07.2024

При верстке сайта с psd-макета, мы постоянно сталкиваемся с проблемой реализации некоторых элементов, которые нарисовал дизайнер. Будь то кнопка, или какой-то хитрый градиент. Нам приходится либо изворачиваться, тратя на это свое рабочее время или просить дизайнера переделать или в крайнем случае забить и сделать более-менее что-то похожее.

Если наш заказчик жутко внимательный, то часто принимая последнее решение, у нас возникают проблемы несоответствия того, что сверстано в итоге, с тем, что нарисовал дизайнер. Все эти факторы накладывают на нас — разработчиков темное пятно, в то время как дизайнер получил свою премию и уже пьет коктели, в нас кидают помидорами и обвиняют в некомпетентности, хотя проблема далеко не в нас, а в том, что дизайнер иногда не знаком даже с основами верстки и не знает, что некоторые вещи рисовать нельзя.

Немного набрал в весе мозга и статуса в компании, в какой-то момент я понял, что так дальше продолжаться не может и начал собирать свои требования в psd макетам.

Через какое-то время я смог оценить весь profit от введения этих стандартов и требований:

— дизайнер становится более организованный, он помнит, что нужно соблюдать правила и как следствие psd макеты начинают меньше весить, в них отсутствуют неиспользуемые слои, структура становится понятна не только верстальщику, но и самому дизайнеру. В будущем когда ему нужно что-то дорисовать — ему не приходится искать слои блок по всему psd файлу, а он идет в папку в блоком и сразу же принимается за работу. Также в этом случае, есть возможность прямо в файле создать папку с предыдущей версией блока.

— результат на выходе получается более идентичный тому, что нарисовано, так как все что дизайнера «натворил» можно реализовать в браузере.
Итог: дизайнер счастлив(не надо ничего переделывать), верстальщик счастлив(все хорошо верстается и тратится ночь на доп.работу, чтоб успеть и нервы впорядке), заказчик (сверстаный макет соответствует утвержденному макету), в итоге все остаются в профите от введение этих правил.

Ниже привожу список требований:

1) Соблюдение сетки в макете, если знаешь что это такое и как ее «готовить».
Зачем? о_О:
— чисто эстетические наслаждение
— возможность быстро собирать каркас страницы и позиционировать элементы на
странице в соответствии с представленном макетом, чтобы верстка получалась более честной по отношению к тому, что ты нарисовал(а).

4) Никаких градиентных границ (бордеров, stroke).

5) Использование сложных режимов наложения (blend mode) касается любых свойств слоя (типа inner shadow, drop shadow и т.д.).

6) ОБЯЗАТЕЛЬНО прикладывать к макету шрифты, которые были использованы в макете, в формате TTF, OTF

7) По возможности — не использовать в макете больше 2-х не стандартных шрифтов, их кол-во сильно влияет на рендеринг страницы в браузере, что негативно сказывается на отношения пользователя к сайту.

Вывод: Соблюдение данных рекомендаций, поможет реализовать этап создания проекта — верстка, максимально точно к созданому макету и поможет избежать:
— несоответствие макета и сверстанного варианта;
— проблем с утверждением верстки;
— проблем с кроссбраузерность и работы верстки в целом.

Прочитать об этих моментах можно в статье, что нужно знать для разработки дизайна сайта кроме photoshop. Сегодня же речь пойдет о конкретной задаче, которую мы будем решать и узнаем какие нужно выбирать размеры, почему именно такие, а не другие. Рассматривать мы будим создание дизайна сайта с фиксированной шириной по центру.

Итак, допустим, у нас есть техническое задание, в котором заказчик просит нас реализовать сайт с фиксированной шириной тела сайта, а по бокам должен быть какой-то фон, который будет резиновым и будет растягиваться в зависимости от разрешения монитора пользователя зашедшего на будущий сайт.

Исходя из поставленной задачи мы понимаем, что нам необходимо рисовать под минимальное разрешение монитора, которого придерживаются на сегодняшний день, это 1024х768 пикселей.

Вот тут то и скрыт наш с вами подводный камень, о котором многие не задумываются и начинают работу над дизайном. Нас интересует конкретно ширина разрешения монитора, а не высота. Высота может быть любая из расчета наполнения контентом сайта. Следовательно, высота на Ваше усмотрение.

А вот о ширине следует призадуматься, так какого размера делать то ее. А рисовать ширину тела сайта необходимо в 1003 пикселя, Вы спросите, почему 1003 пикселя, а не 1024, да потому как нужно учитывать боковой скроллинг у браузера, а он составляет немного не мало 21 пиксель.

Вот и получается, что тело нашего сайта должно быть 1003 пикселя, этот параметр гарантирует, что у вас не появится горизонтальный скроллинг у сайта. Так как бывают случаи, когда верстальщик верстает макет, под разрешение 1024х768 пикселей, после чего появляется горизонтальный скроллинг, благодаря которому небольшая, но все же, часть сайта находится вне пределов монитора пользователя.

А это уже как вы наверное понимаете мало того что некорректно смотрится но и вызывает неудобство для пользователя сайтом (потенциального клиента), это большой минус. Этот скроллинг появляется из-за того что дизайнер не учел что фиксированная ширина макета сайта 1003 пикселя, а верстальщик сверстал макет на 1024 пикселя. Конечно, это может быть и ошибка верстальщика, но сейчас не о верстке.

Итак, я думаю, мы поняли, что фиксированная часть макета максимально должна быть 1003 пикселя, она может быть и меньше, мы рассматриваем корректное отображение будущего сайта на минимальном разрешение монитора с 1024х768 пикс.

Я при создание дизайна сайта в фотошопе, использую размеры холста равные 1200 х 1800 пикс. Фиксированную ширину делаю в 1000 пикселей, а оставшиеся 200 пикселей разделяю пополам по 100 на правую и левую стороны соответственно, которые будут выполнять функцию резинки для остальных разрешений мониторов. Ниже я привел схему, каких размеров я создаю холст и разметку.

Статья получилась небольшая, постарался максимально понятно дать описание, если возникнут вопросы, пишите в комментариях.

Небольшое дополнение: как заметил один из читателей, размеры бокового скроллинга у браузеров изменились. Если будет необходимо точно просчитать размер до пикселя, то учтите этот факт.

Дополнительный материал: для разработки адаптивного дизайна, вам потребуется создать не один макет как в примере выше, а гораздо больше. Разобраться в этом вопросе поможет небольшой дополнительный материал о размерах макета при создание адаптивного дизайна сайта.

В статье мы рассмотрим, как правильно определить оптимальную ширину сайта для десктопного монитора и мобильных устройств, где можно узнать актуальную статистику популярных разрешений экранов, как проверить отображение своего сайта на разных разрешениях и выявить возможные проблемы.

При разработке дизайна для адаптивной вёрстки нужно учесть размеры устройств, на которых чаще всего будет просматриваться сайт. В зависимости от вашей тематики, это могут быть: смартфоны, планшеты, ноутбуки, десктопы или даже габаритные телевизоры с диагональю до 98 дюймов.

И если для пользователя никаких проблем нет, то у разработчика уже возникают определенные сложности, ведь на каждом из экранов сайт должен быть красивым, удобным и функциональным.

Поэтому, разрабатывая макет, мы хотим, чтобы пространство использовалось с умом и при этом:

При просмотре сайта на широкоформатных экранах не было огромного пустого пространства по бокам, изображения сохраняли высокое качество, а текст легко читался.
Сайт не терял удобство использования на небольшом экране, не появлялась полоса горизонтальной прокрутки или скрытые элементы.

Но для начала разберёмся, на какую всё-таки ширину html-страницы ориентироваться.

Какие бывают форматы размеров сайта для вёрстки

У каждого устройства есть несколько характеристик, описывающих его размер:

Физический размер экрана — это его диагональ в дюймах (например, 24 дюйма). У устройств с одинаковым размером экрана могут быть разные разрешения.
Разрешение — это соотношение экранной ширины и высоты в пикселях (например, 1920 x 1080 пикселей).
Размер окна браузера — это ширина и высота области просмотра в пикселях (например, 1896 x 1080 — с учётом полосы прокрутки в 24 пикселя). Другими словами, это разрешение за вычетом рамок, полос прокрутки и других элементов, уменьшающих видимую область сайта. Но размер окна браузера пользователь может сильно менять, поэтому дизайнеры обычно задают контентную область и боковые отступы.

Физический размер устройства могут учитывать при дизайне кликабельных элементов, но в основном, размер сайта выбирают под разрешение, а ширину и высоту его контентной области (контейнера) определяют с учётом браузерных отступов.

Также нужно помнить об ориентации экранов — у ноутбуков, десктопов и телевизоров она альбомная (ширина больше высоты), а у смартфонов и планшетов обычно портретная (высота больше), но может переворачиваться.

Какие есть варианты создания страницы под разные мониторы и разрешения (типы верстки)

Фиксированная верстка

Проще говоря, мы жестко задаем статические параметры сайта, и его ширина не меняется, независимо от того, какое разрешение у пользователя. Это самый плохой вариант, использовать его вообще не рекомендуется, это явно вчерашний день.

Резиновая верстка без ограничений

Упрощенно это выглядит так:

Т.е. ширина сайта подстраивается под ширину браузера. Браузер шире – блоки снизу перемещаются вбок. Браузер уже – блоки располагаются друг под другом.

Плюсы такой верстки:

Пространство используется по максимуму, нет зияющей пустоты слева или справа от контента на широкоформатном экране с высоким разрешением.

Минусы:

На большом экране сайт очень сильно расползается. Особенно это неудобно для текста.
Периодически может возникать пустое пространство между блоками.

Личный юзеркейс: у меня плохое зрение, если не надеть очки, приходится сидеть, уткнувшись лицом в монитор. Поверьте – даже на 21 дюйме с разрешением по ширине 1600 пикселей жутко неудобно воспринимать сайт с малого расстояния. Приходится вертеть головой слева направо, чтобы прочесть строчку текста.

Кроме того, при маленькой ширине экрана блоки будут наползать друг на друга, если не задана минимальная ширина. Чтобы избежать данных проблем, можно применить следующий способ:

Резиновая верстка с заданной минимальной и максимальной шириной

В данном случае в указанных вами пределах сайт может менять позиционирование блоков, но у него есть определенные ограничения:

минимум – достигнув этого предела, блоки не «сжимаются», а появляется полоса прокрутки;
максимум – контент не увеличивается по ширине, а добавляется пустое пространство по бокам, контент сайта при этом размещается по центру сетки.

Плюсы:

Мы уверены в том, как выглядит контент нашего сайта при определенном разрешении Естественно, мы стараемся сделать максимально красивый сайт для наиболее распространенных разрешений в нашей тематике.

Минусы:

Если вы выберете слишком маленький максимум для большого экрана, может возникнуть проблема с пустыми полями по бокам.

Адаптивная верстка

Наиболее современный и применяемый вариант верстки. Не только блоки контента позиционируются относительно друг друга в зависимости от разрешения, но и контент блоков (шрифты, изображения и т.д.) меняется в размерах.

При адаптивной верстке мы можем делать с контентом все что угодно, в зависимости от разрешения. Плюс данной верстки еще и в том, что она хорошо подходит для экранов мобильных устройств, в отличие от первых двух вариантов.

Если вы остановились на адаптивной верстке, рекомендуем пользоваться правилом MobileFirst, т.е. вначале работаем с малым разрешением и постепенно двигаемся к большому экрану.

Плюсы:

Наиболее современный и правильный тип верстки.

Минусы:

Может быть довольно сложной в реализации (в отдельных случаях). В любом случае вам нужно понимать, какое разрешение для вашего сайта в приоритете, чтобы правильно отобразить сайт на этих разрешениях.

Все эти методики могут сочетаться в зависимости от ситуации.

адаптивный дизайн может дополнять резиновую верстку;
либо сайт сделан на резиновом дизайне, а для мобильных приложений сделана мобильная адаптивная версия.

Рекомендую прочесть статью Анны Себовой, где вопрос мобильной верстки раскрыт с технической точки зрения.

Если у вас фиксированная верстка, пора обновлять сайт, я вам серьезно говорю.
Если у вас уже есть достаточно качественный сайт «на резиновой» верстке, просто добавьте адаптив для мобильных устройств и разрешений, на которых плохо отображается сайт.
Если вы все делаете «с нуля», лучше делать полностью адаптивную верстку, это максимально современное и качественное решение.
Если у вас уже есть сайт, и вы готовите редизайн, вам даже не нужно обращаться к открытым сервисам — посмотрите статистику вашего сервиса web-аналитики.

Как выбрать оптимальный размер макета

Верстальщик работает с диапазонами разрешений, в которых сайт корректно отображается, но веб-дизайнеру при разработке шаблона в графическом редакторе приходится задавать фиксированный размер макета.

Но как же разобраться в этом многообразии разрешений и способов верстки? Главное – сайт должен быть максимально удобен и презентабелен для наиболее распространенного разрешения.

Общая статистика популярных разрешений экранов мобильных и компьютеров

Эти данные можно найти в сервисах:

Например, если мы возьмем за основу информацию с сайта w3counter, самое популярное разрешение по ширине – это 1366px. Соответственно, эту ширину можно брать как максимум, больше которого увеличивать контент не стоит.

При этом учитывайте, что контент смотрится лучше, когда есть небольшие отступы по бокам. Плюс к этому, немного (порядка 17-24) пикселей нужно оставить под полосу прокрутки. Размер отступов выбирайте сами – обычно это порядка 50-80px.

Например, очень хорошо смотрится (личное мнение) при таком разрешении сайт lamoda, ширина максимум 1206px:

Учитывая это, я склоняюсь к варианту фиксированной максимальной ширины. За среднюю цифру максимума можно взять примерно 1200px+/-.

В качестве минимальной ширины, после которой появляется полоса горизонтального скролла, можно взять 960px. Меньше делать особого смысла не вижу.

Высота страницы может меняться не только в зависимости от устройства, но и от того, закреплена ли панель закладок в браузере. Обычно она варьируется от 600 до 800 пикселей.

Подытожим наши рекомендации для дизайна сайтов исходя из самых популярных разрешений экранов.

Устройство	Ширина макета, пикселей	Отступы по краям	Контентная часть, пикселей
Большого размера (десктоп или телевизор)	от 1366	Зависят от сетки	1200
Среднего размера (ноутбук)	от 1024	20 пикселей	992
Маленького размера (планшеты)	от 768	15 пикселей	768
Смартфоны	от 360	10 пикселей	360

Как узнать статистику своего сайта по разрешениям экрана?

Если у вас Яндекс.Метрика

Если у вас Google Analytics

Технологии → Браузер и ОС → Разрешение экрана:
Данные отчеты полезны еще и тем, что мы можем выявить проблемы отображения сайта на определенном разрешении. Для этого обратите внимание на колонку «Показатель отказов».
Если вы видите, что на определенном разрешении показатель отказов значительно выше среднего – следует протестировать отображение сайта в этом разрешении.

Как проверить оптимизацию сайта под разные разрешения?

Чтобы проверить, как выглядит ваш сайт на устройствах с разными разрешениями, можно использовать средства браузера или отдельные сервисы, о которых мы ранее писали в статье «Инструменты для анализа отображения сайта на разных устройствах». Вот некоторые из них:

Подведем итог

Перед созданием нового сайта или редизайном необходимо:

понять, какие разрешения наиболее популярны у вашей целевой аудитории;
определить максимальные и минимальные размеры сайта (в пикселях);
выбрать тип верстки;
после создания и реализации протестировать сайт на разных разрешениях и убедиться, что он корректно и презентабельно отображается в любом разрешении.

Конечно, может возникнуть один логичный вопрос: «А как же через Х лет, когда технологии изменятся? Что тогда делать?» Ответ прост: сайт должен постоянно развиваться, поэтому создать через пару лет новый дизайн – это вполне нормально. Естественно, при создании нового дизайна следует учитывать изменившиеся реалии и тенденции.

Нужна помощь с проектированием сайта и разработкой ТЗ? Обращайтесь к нам!

По многочисленным просьбам читателей, мы сегодня будем делать дизайн, вернее макет сайта в Photoshop. Конечно если с этим никогда не сталкивался, сделать его довольно не просто, возникает множество вопросов, на которые я сегодня постараюсь ответить. Как оказывается, что материала по этому поводу в интернете не так уж и много. Дизайнеров куча, а как сделать макет сайта никто не рассказывает. Может быть я просто плохо искал? :)

Продолжение

В общем давайте уже делать.

Для начала я подготовил не сложный макет, который мы будем полностью с Вами разбирать. Вот как он выглядит:

Как видите, что шаблон получился не сложный, естественно это блоговый шаблон, который позже мы будем верстать в HTML. Ну а пока что только будем рисовать. Ну а теперь поехали.

Программное обеспечение

Первое, что Вам нужно это Photoshop. Если у Вас его нет, покупайте :-)

Создание и размеры документа

Размеры зависят от того какой ширины будет Ваш будущий сайт. Вот например, Вы решили, что готовый сайт будет иметь ширину 1000 рх, следовательно размер документа нужно сделать немного больше где то 1200 рх. Это делается в первую очередь для удобства, что бы Ваш макет смотрелся так же как в браузере.

По поводу высоты, выставляется размер от тематики шаблона. Но желательно делайте больше, 4000 рх думаю хватит. Это делается для того, чтобы в дальнейшем все элементы влезли. Потому что я как то сделал маленькую высоту, и мне пришлось потом переносить всё в новый документ.

В моём случае сайт будет иметь ширину в 1200рх. Таким образом я сделал документ шириной в 1300 рх и высотой в 4000 рх. Остальные настройки оставьте как есть.

Фон шаблона сайта

Ширина будущего сайта в 1200 рх

А вот как она выглядит:

Выделяем наш слой, нужно просто один раз кликнуть на него:

А сейчас нужно поставить линейку по центру нашего документа, вернее найти центр. Для этого наводим курсор на линейку на ней же зажимаем левую кнопку мыши и вытягиваем линию на наш документ. Тянем примерно на середину, линейка сама найдёт центр.

Теперь нашу выделенную область помещаем с помощью мышки по центру, она найдёт центр сама. Затем нужно вытащить ещё 2 линейки и установить их по обе стороны выделенной области. Таким образом мы обозначаем границы нашего будущего сайта, который будет иметь ширину в 1200 рх. Так же по этим линейка будет проще подгонять элементы дизайна. Если Вам не понятно сделайте так же как на рисунке ниже.

Линейку мы будем использовать и в дальнейшем, так как без неё здесь не обойтись, она позволяет выставить всё ровно.

Теперь мы практически полностью подготовили наш документ. Мы узнали середину, а так же обозначили точный размер за который не нужно вылазить. Теперь переходим к самому интересному, а именно к созданию дизайна сайта (макета).

Создание дизайна или макета сайта

Важно!

Всегда создавайте группы для слоёв и давайте им названия. Потому что в дальнейшем точно запутаетесь!

Группы

Вот что должно получиться:

Верхнее меню

Опять вытягиваем линейку и выставляем её как на рисунке:

Вот, что должно получиться:

После этого просто копируем слой с нашей линией и выставляем после каждого слова. Вот что у меня получилось:

Иконки социальных закладок

Для начала с помощью линейки нужно выставить высоту наших иконок, что бы они были ровными. Вот , что нужно сделать:

Наводим курсор в то место где будет иконка, зажимаем Shift, (для того чтобы иконка появилась ровная) и растягиваем до нужных размеров. И такой же процесс повторяем со следующими фигурами. В конечном итоге вот что должно получиться:

Переходим к логотипу. Опять же создаём отдельную группу для логотипа и в новый слой.

Логотип

Нижнее меню (Главное)

Выставляем линейки как на рисунке:

Добавляем линии. Делаются они так же как и в верхнем меню только изменён сам цвет линии. Думаю, что вы справитесь, и должно получиться вот что:

Сейчас переходим к панели с информацией, которая будет говорить пользователю где он находится на сайте.

Панель с информацией

Для начала добавляем полосы с линейки как на рисунке ниже:

Контент

Переходим к разметке середины нашего будущего сайта. Нам нужно с помощью линейки разметить где будут находиться блоки постов и блок сайтбара (Правой колонки).

Сразу же нужно создать 2 отдельных группы:

Добавляем линии с линейки как на рисунке, и отменяем выделение:

Получается что мы добавили две линии и получили область где будут находиться наши блоки с записями.

Вот теперь мы точно знаем где будут блоки с записями и сайтбар. И всё будет ровно.

Помните мы создали группу метки? Там просто создайте слой с надписями размеров блоков, вот как у меня:

Эти метки очень помогут при вёрстке. Не нужно будет вспоминать размеры.

Блоки с записями

Начнём мы пожалуй с блоков с записями, делаются они в данном случае очень просто.

В той же группе добавьте метку с помощью текста как у меня на рисунке выше.

Добавляем информацию к посту. Ставим размер шрифта в 14 пт и цвет ближе к серому:

И описание к посту:

Теперь добавляем текст и смотрим, что у нас получилось:

Чтобы записи хоть не много разделить, давайте создадим простой разделитель из кругов.

Отменяем выделение и ищем середину круга с помощью линейки

Вот что должно получиться:

Копируем слой этого маленького круга опять перемещаем его влево. Так же точно уменьшаем его размер как написано выше, чтобы получилось вот так:

Сейчас Вам нужно создать дубликат среднего круга и переместить его вправо, и тоже самое сделать с маленьким кругом. Чтобы было понятнее сделайте как на рисунке: