Выбор разрешения в Photoshop

Выбор разрешения макета сайта | З.W-D

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

Многие начинающие Web-дизайнеры (в том числе и я) сталкивались с такой проблемой: нарисовано всё отлично. Картинка выглядит превосходно. После вёрстки сайт превращается в нечто убогое…Верстальщик говорит что всё пучком. Сверстал как нарисовали. И тут то и приходит понимание того, что ты конкретно сел в лужу и не учёл некоторых моментов. О таких неучтённых моментах и хочу с вами поговорить.

Сам перенимал опыт и советы уже у другого верстальщика — дизайнера. Он то как раз и объяснил все тонкости с выбором размеров, разрешения и прочего. Но обо всём по-порядку.

Выбор размеров проекта.

Расскажу о том какие размеры выбирать, почему и как что высчитывать.

На самом деле математика тут не сложная. Всё более чем просто.

Нужно отталкиваться от разрешения монитора. То есть сайты всегда на разных мониторах выглядят по-разному ( если это не резиновая вёрстка). Так вот задача дизайнера — сделать так, чтобы эти различия разных разрешений разных мониторов были минимальными. Одно из самых распространённых разрешений монитора сейчас 1366х768 . Поверьте мне, если оно основное — это вовсе не значит что сайт не откроют на старом квадратном мониторе или на мак буке. По-этому есть определённые хитрости. Способы сделать сайт, максимально адаптивным для любых мониторов. И сделать это именно на этапе дизайна. Сделать так, чтобы открыв на мак буке с retina не появилось каких-либо обрывов фоновых картинок, не хвативших заливок фона. Или же наоборот на стареньком монике сайт должен «убраться», а не оказаться частично за пределами видимого.

Для маленьких мониторов

Можно прибегнуть к простому решению. Сделать основные блоки сайта в ширину 1020 пикселей. Почему не 1024? не забываем про полосу прокрутки в браузере 😉 1024 пикселя в ширину — наиболее подходящий вариант. Уместится у всех. 800х600 я думаю, почти никто не использует уже. Но тут возникает вопрос мониторов с большим разрешением экрана. Не мелко ли будет?

Для больших мониторов

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

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

 

Как разлиновать макет сайта в Photoshop?

Тут всё совсем просто. В Photoshop существует такой инструмент как вспомогательные линии. Включается он нажатием клавиш Ctrl+H. Или на вкладке «просмотр», как показано на скриншоте.

Вспомогательные линии в Photoshop
Вспомогательные линии в Photoshop

Выставляются они простым вытаскиванием от поля линейки в сторону холста.

Таким образом мы разлиновываем границы разрешения 1020 и центр. Вот холст и готов.

Вот так выглядит макет, разлинованный по принципу «центральная часть на 1020, а остальное дополним».

Вспомогательные линии. Разлинованный холст под сайт. Photoshop
Вспомогательные линии. Разлинованный холст под сайт. Photoshop

Выбор разрешения

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

Выбор разрешения в Photoshop
Выбор разрешения в Photoshop

 

Именно для WEB’a я советую выставлять это значение в пределах от 150 до 300 dpi. Да, действительно для типографской печати рекламных баннеров требуется гораздо большее разрешение, но для дизайн-макета сайта этого более чем достаточно. При этом мы очень сильно экономим размер нашего .psd файла на выходе. А за это вам как минимум верстальщик скажет спасибо.

 

Вот, пожалуй, основными премудростями я с вами поделился. Так что нет ничего сложного, хитрого. Просто следует выполнять некоторые правила чтобы всё было хорошо! Спасибо что прочитали, надеюсь кому-то помогло) Комментируйте, спрашивайте, что не понятно — буду рад ответить.

Anton_Losev
Подписаться Anton_Losev:

Web-desighn, IT, Системное администрирование, создание сайтов, продвжение

Обо мне вы можете подробнее прочитать в соответствующем разделе сайта.

Оставить ответ