Создание дизайна сайта в фотошопе, размеры макета

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

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

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

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

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

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

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

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

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

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

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

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

Les, спасибо за комментарий! А что с ними?
Определяете минимальное разрешение и разрабатываете под него макет с учетом того что контентная часть будет резиновой. Фон слева и права может иметь фиксированную ширину или быть также резиновым в зависимости от того будет сайт в дальнейшем полностью резиновым или на половину (к примеру растяжение от 1024 до 1280 контентной части).
При необходимости можно отрисовать дизайн и на максимально необходимое разрешение, для понимания результата.

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

Здравствуйте, Сергей! Не совсем понятен вопрос. В каких случаях это проявляется, когда Вы масштабируете или на холстах разного размера?
Какой размер шрифта, разрешение?
Напишите мне на почту через форму контактов, посмотрим, если смогу помогу.

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

Евгений, спасибо за Ваш комментарий к статье. Добавлю небольшое уточнение по поводу скроллинга.
Браузеры обновляются довольно часто, и постоянно отслеживать их все и вносить изменения нет возможности. Я описал принцип, как считать, и отчего отталкиваться, написал размеры холста, которые создаю сам. Если у кого-то возникают вопросы, стараюсь на них отвечать.

Отличная статья, все коротко и понятно без воды, огромное спасибо, продолжайте писать!

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

Благодарю и за оптимальные сотканные на опытный глаз размеры макета холста, за которыми я и пришёл. Не зря тут фотошоп предлагает работать в нём с большими разрешениями, раз 1024х768 уже видите-ли маленькое разрешение.

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

Спасибо, никогда не знал, что нужно делать ширину именно 1003 пикселя

Пожалуйста, Роман! Надеюсь вы дочитали до конца и обратили внимание на дополнение в конце материала.

Сергей здравствуйте
Я совсем недавно рисую сайты до этого просто был граф.дизайн. У меня вопрос про макетирование сайта для верстальщика основываясь на контрольных точках.
допустим, есть контрольная точка для смартфона — 420 пикс, планшета – 800 пикс ну и тд..обычно если мы говорим просто про адаптивный сайт — то их не больше четырех. вопрос следующий — мне как дизайнеру сколько нужно задавать ширину холста (рабочей области) в граф. редакторе для эскиза — например для смартфона? я же не могу работать в документе 420 пикс?
Я просто скачала базу сеток для фотошопа под моб устройства — планшет, смартфон — так, для iphone portrait canvas size документа 840 пикс …в общем я запуталась…

Добрый день, Дарья!
Если вы хотите разработать адаптивный макет сайта, то вам необходимо отрисовать дизайн в различных разрешениях. Обычно их порядка 4-5 (320px, 480px, 768px, 1024px, 1280px) может быть конечно и больше или меньше все зависит от задачи и требований. Строите под эти разрешения сетки и адаптируете макет. Если верстальщик работает с фреймворком bootstrap в нем в документации можно подсмотреть размеры рабочих областей и сеток.

Что касается холста, вы можете по сути делать как вам удобно, главное чтобы сетка и макет были под нужное разрешение к примеру под 320px. Что я имею ввиду, можно разрабатывать макет и с холстом в 320px по ширине, а можно для удобства сделать и шире если вам так комфортнее работать но сетка должна быть на макет 320px.

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

Не знаю понятно ли я написал.

Добрый день! Мы с дизайнером оба новички/, поэтому он сделал макет размером 6300 пикселей. Я его смаштабировала до 1170 пикселей. С отступами, картинками все ок, но не знаю, что делать со шрифтами — они уменьшились, некоторые до 2 пикселей. При распечатке дизайна на 6300 пикс. в размер экрана все шрифты читаемые. при увеличении масштаба — тоже.
Если сразу делать в разрешении 1170 пикс. то шрифт придется брать 2-3 пикс? А как его потом программировать?

Здравствуйте, Алена!
Честно говоря сомневаюсь что при ресайзе все получилось здорово кроме шрифтов. Так как обычно пиксели плывут во многих местах. Ну да ладно отвечу на ваш вопрос.
Я думаю есть пара вариантов.
1. Переработать тексты с учетом ресайза под размер 1170 пикс. а уже потом верстать.
2. Поработать с размером шрифтов при верстке.

Во-первых, Громадное спасибо, что так быстро ответили. Я при верстке их и начала переделывать (не так быстро, как если бы были заданы все значения сразу). Во-вторых, помогите, пожалуйста, разобраться в одной вещи:
А как сделать, чтобы в последующих работах такая ошибка не повторилась. Ведь если верстать макет сразу с шириной 1170, то и шрифты будут сразу маленькими. Почему в Кореле/Фотошопе смотришь на 100% изображение с шириной 1170 и оно маленькое, а шрифты крошечные. Начинаешь выкладывать — картинки нормальные, шрифты с таким размером — крошечные… До меня не доходит разница пикселей и миллиметров. В чем тут секрет?

Алена, не совсем пойму вашу проблему. Скиньте макет мне на почту (есть в контактах) я посмотрю.
А вообще нужно учитывать несколько требований к макету как минимум.
1.Ширина макета к примеру 1170рх
2.Разрешение 72dpi

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

Вадим, добрый день! Обычно макеты разрабатываются в фотошопе или sketch (для mac), встречал несколько раз макеты разработанные в иллюстраторе и кореле (но сам в векторе никогда не делал). Разрабатываю исключительно в фотошопе.
По поводу с какого размера начинать существует два мнения и подхода. По одному лучше начинать с мобильного (320 пикс. или 480 пикс.) mobile first, а потом уже для больших разрешений.
По другому берем максимальное выбранное разрешение под которое разрабатываем дизайн сайт и отрисовываем под него. К примеру разрешение 1280 пикс. — тогда мы можем создать холст на 1920 пикс. взять сетку на 1170 пикс. и разрабатывать макет под разрешение 1280 пикс. После того как макет под desktop готов начинаем его адаптировать под более маленькие разрешения.

Как подготовить макет сайта для верстки, для верстальщика

Интересные записи

• Рисуем с фотографии в фотошопе
• Как сделать календарь в фотошопе
• Создание Гравированных Деревянных Логотип В Photoshop
• Книга Photoshop для профессионалов
• Специалист - Adobe Photoshop CS5
• Как увеличить фотографию, изображение или картинку в Фотошопе