Разработка сайтов для бизнеса. Адаптивная верстка и интеграция с CMS

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

/ Сергей Нуйкин / Веб-дизайн
Нет времени читать? Прослушайте статью в аудиоформате.

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

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

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

создание дизайна сайта

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

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

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

размеры макета

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

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

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

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

разметка страницы дизайна сайта

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

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

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

Понравилась статья?
Подпишитесь на обновления:
Поделитесь материалом с друзьями:

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

Комментарии к статье:
    • Евгений Комиссаров

      ну а что довольно познавательно) пригодится когда доросту до уровня верстальшика ..)

    • Нуйкин Сергей

      Евгений в действительности пригодится как для верстальщика так и для дизайнера.

    • Руслан

      Спасибо, Сергей! Пост просто мега-супер крутой! Может быть и я когда-нибудь научусь рисовать свои дизайны, с Вашей помощью)))

    • Нуйкин Сергей

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

    • Екатерина

      Большое спасибо. Первейший вопрос «а какого размера создавать документ?!». Но это настолько основы основ, что даже не знаешь как формулировать запрос поиска. спасибо, что пишите о таких для кого-то банальных, а для меня пока темных вещах)

    • Нуйкин Сергей

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

    • akarad

      Спасибо огромное!! Продолжайте в том же духе. Часто приходится обучать новых веб-дизайнеров — ваши материалы в списке полезных ресурсов :)

    • Нуйкин Сергей

      Пожалуйста! Очень рад, что мои статьи оказались Вам полезны.

    • Виктория

      Вот теперь, я знаю какого размера нужно создавать документ для дизайна сайта. Как сказала Екатерина, в действительности сложно иногда сформировать такой простой запрос в поиске. Спасибо за статью, подписалась на обновления.

    • Нуйкин Сергей

      Пожалуйста, Виктория! Основы и теория очень важны, это как надежный фундамент. Веб-дизайн не исключение, создание макета сайта начинается с его размеров, как бы банально это не звучало.

    • Лена

      Спасибо за полезную статью! Такой вопрос: как правильно сделать фон (изображение)в фотошопе , чтобы в последующем он мог быть резиновым?

    • Нуйкин Сергей

      Здравствуйте Лена! Вам необходимо создать бесшовную текстуру (pattern). Края текстуры должны идеально совпадать создавая таким образом эффект целостности.

    • Анна

      «Фиксированную ширину делаю в 1000 пикселей…»
      В 1003 пикселя, судя по статье выше, да?)

    • Нуйкин Сергей

      Здравствуйте Анна! Верно и так и так. Объясню почему.

      При создание макета необходимо ориентироваться на стандартное разрешение 1024 х 768 (может быть и выше в зависимости от того какое разрешение принято использовать минимальным и под какое создается макет).
      1024 ширина, вычитаем 21пикс. т.к. эту часть занимает вертикальная полоса прокрутки, остается 1003 пикселя, это размер страницы при котором не будет горизонтального скроллинга.

      Для удобства же я лично создаю фиксированную ширину в 1000 пикс.

    • Анна

      Оперативно, спасибо) Подписываюсь на вас.)

    • Нуйкин Сергей

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

    • Ярослав

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

    • Нуйкин Сергей

      Пожалуйста, Ярослав! Рад что статья оказалась Вам полезна.

    • Timur

      Spasibo, poleznaya informaciya, nikogda ne zadumyvalsya — pochemu imenno 1003px)))

    • Нуйкин Сергей

      Пожалуйста, Тимур! Есть вот такие мелочи, которые не всегда знаешь. Очень рад, что информация о размерах была Вам полезна.

    • Илья

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

    • Нуйкин Сергей

      Пожалуйста, Илья!

    • Дарья1806

      Ну,очень доходчиво пишите.

    • Сергей Нуйкин

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

    • Андрей

      Полезная статья. И для дизайнера, и для верстальшика.

    • Наталья

      Спасибо большое за такую доходчивую статью!!!

    • Сергей Нуйкин

      Пожалуйста, Наталья!

    • Андрей

      Коротко и просто. Спасибо большое!! ;-)

    • Les

      Супер! А с резиновыми сайтами как дела обстоят?

    • Сергей Нуйкин

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

    • Сергей

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

    • Сергей Нуйкин

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

    • Евгений

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

    • Сергей Нуйкин

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

    • Иван

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

    • Сергей Нуйкин

      Иван, пожалуйста!

    • Пирокар

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

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

    • Сергей Нуйкин

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

    • Роман

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

    • Сергей Нуйкин

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

    • Дарья

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

    • Сергей Нуйкин

      Добрый день, Дарья!
      Если вы хотите разработать адаптивный макет сайта, то вам необходимо отрисовать дизайн в различных разрешениях. Обычно их порядка 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

    • Екатерина

      Добрый день, подскажите пожалуйста. На сегодняшний день оптимальная ширина контента 1170px?

    • Сергей Нуйкин

      День добрый, Екатерина! Смотря для какого проекта, но в основном да, под разрешение 1280px.

    • Екатерина

      Спасибо огромное за ответ! Удачи вам :)

    • Сергей Нуйкин

      Екатерина, не за что. Спасибо, и вам!

    • Aleksa

      Спасибо огромное! Единственная подробная статья все нормально расписано русским по белому! :smile:

    • Сергей Нуйкин

      Aleksa, пожалуйста.

    • Вадим

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

    • Сергей Нуйкин

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

    • мага

      спасибо вы сразу помогли

    • Сергей Нуйкин

      Мага, пожалуйста. Если будут вопросы задавайте.

    • Владислав

      А при создании landing page какого размера макет?
      Ведь по бокам нет пустых мест..

    • Сергей Нуйкин

      Владислав, все абсолютно тоже самое. Крайне редко делают полностью резиновый макет на всю ширину экрана так как он не очень хорошо выглядит на широкоформатных мониторах.
      К примеру вы делаете landing page, создаете холст в фотошопе на 1920 пикс., а контентную часть под разрешение 1280 пикс. (если под бутстрап то 1170 пикс.).

    • Андрей

      Хорошая статья. Очень понравилась.

    • Диана

      Сергей, Вы как раз подтвердили моё сложившееся мнение в:
      1170 (модульная сетка, 1140 в bs4) — 1280 (тело сайта) — 1920 (холст под фон сайта) :!:

      Несколько вопросов)
      От 1280 желательно так же как и от 1024ёх отнять 21 пиксель?

      Если говорить об адаптивном дизайне, то подойдёт ли такая цепочка…?
      960 — 1003 — x
      720 — 800 — x
      540 — 640 — x

      И что делать с холстом (x)? Можно ли всё делать на 1920? :|

      Подскажите пж))

    • Сергей Нуйкин

      Диана, добрый день!
      По первому вопросу если вы строите индивидуальную сетку для проекта не под определенный фреймворк то да нужно отнять 21px. (сейчас может быть чуть меньше, ширина скролла уменьшилась). Но нужно учесть и отступы чтобы контент не прилипал к краям браузера на разрешение 1280px.

      Для адаптива.
      Выбираете наиболее популярные разрешения под разные устройства (пк, планшет, смартфон) и разрабатываете.
      Пример:
      320px, 480px — смартфоны холст в размер по краям отступы в 10-15px
      768px, 1024px — планшет для 1024 отнять скрол + отступы в 15-20px
      1280px (холст на 1920px) — отступ на скрол от 1280px. по краям по разному

      Холст 1920 делаете только для пк версии, на остальных в размер.

    • Диана

      Огромное спасибо)

    • Сергей Нуйкин

      Пожалуйста, Диана! Если будут вопросы, задавайте.

    • Виолетта

      Сергей, спасибо за статью. Вы помогли мне решить нерешаемую до сего момента задачу! :smile:

    • Сергей Нуйкин

      Виолетта, пожалуйста. Рад что статья помогла в решение вашей задачи.

    • Татьяна

      Коротко, но очень доходчиво! Толковая статья, благодарю. ;-)

    • Сергей Нуйкин

      Татьяна, спасибо за комментарий. :smile:

Добавить комментарий:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Нажимая на кнопку «Отправить комментарий», вы соглашаетесь с Политикой конфеденциальности.