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

Вітаю всіх на fotodizart.ru. У сьогоднішній невеликій статті я б хотів поговорити про розміри, які необхідно вибирати при створення дизайну сайту в фотошопі. А також про одне підводному камені, який багато або просто не враховують, або не знають про нем.В однієї зі своїх попередніх статей я вже розповідав про основні моменти, які потрібно враховувати при розробці макета.

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

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

Виходячи з поставленого завдання ми розуміємо, що нам необхідно малювати під мінімальний дозвіл монітора, якого дотримуються на сьогоднішній день, це 1024х768 пікселів.

Ось тут то і криється наш з вами підводний камінь, про який багато хто не замислюються і починають роботу над дизайном. Нас цікавить конкретно ширина дозволу монітора, а не висота. Висота може бути будь-яка з розрахунку наповнення контентом сайту. Отже, висота на Ваш розсуд.

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

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

А це вже як Ви напевно розумієте мало того що некоректно виглядає але і викликає незручність для користувача сайтом (потенційного клієнта), це великий мінус. Цей скролінг з'являється через те що дизайнер не врахував що фіксована ширина макета сайту 1003 пікселя, а верстальник отверстал макет на 1024 пікселів. Звичайно, це може бути і помилка верстальника, але зараз не про верстку.

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

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

Невелике доповнення: як зауважив один з Новомосковсктелей, розміри бічного скролінгу у браузерів змінилися. Якщо буде необхідно точно прорахувати розмір до пікселя, то врахуйте цей факт.

Привіт, по-перше спасибі за статтю. У мене до вас запитання з приводу тексту. При великому дозволі полотна текст нормальної якості, а наприклад при 1024 на 768 текст виходить змазаним, як це виправити? міняв настройки на різкий, згладжений і т д не допомагає, заранее спасибо.

Доброго дня, Сергію! Не зовсім зрозуміле питання. У яких випадках це проявляється, коли Ви масштабіруете або на полотнах різного розміру?
Який розмір шрифту, дозвіл?
Напишіть мені на пошту через форму контактів, подивимося, якщо зможу допоможу.

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

Дякую і за оптимальні виткані на досвідчене око розміри макета полотна, за якими я і прийшов. Не дарма тут фотошоп пропонує працювати в ньому з великими дозволами, раз 1024х768 вже бачите-ли маленьке дозвіл.

Пірокар, будь ласка! Це, напевно, не підводні камені, а якісь дрібниці з чого будується загальна складова макета. Якщо будите розробляти макет під різні екрани (мобільні, планшети, пк) то і 1024х768 знадобиться.

Спасибі, ніколи не знав, що потрібно робити ширину саме 1003 пікселя

Будь ласка, Роман! Сподіваюся ви дочитали до кінця і звернули увагу на додаток в кінці матеріалу.

Добрий день, Дар'я!
Якщо ви хочете розробити адаптивний макет сайту, то вам необхідно отрисовать дизайн в різних дозволах. Зазвичай їх близько 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 готовий починаємо його адаптувати під менші дозволу.

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