Графические элементы сайта: сколько вариантов разрешений создавать?

[ручник]

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

Edited December 11, 2013 by ручник

[Switch74]

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

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

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

[Great Rash]

Мониторам/экранам планшетов и телефонов вообще по барабану какой у вас там dpi стоит. Если у вас картинка 100*100 пикселей размером, то она займёт на экране ровно 10 тысяч пикселей, не больше и не меньше. Другое дело, что на всяких ретинах плотность пикселей выше, т.е. если у обычного планшета допустим миллион пикселей на 10 дюймовом экране, то у ретины в два раза больше.

 

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

 

Вот в полиграфии там да, там эти dpi рулят.

[ручник]

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

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

Я правильно понял, что первое "если" - только для экономии, то есть я могу и для мобильных пользоваться "жирным" десктопным вариантом?

 

Мониторам/экранам планшетов и телефонов вообще по барабану какой у вас там dpi стоит. Если у вас картинка 100*100 пикселей размером, то она займёт на экране ровно 10 тысяч пикселей, не больше и не меньше. Другое дело, что на всяких ретинах плотность пикселей выше, т.е. если у обычного планшета допустим миллион пикселей на 10 дюймовом экране, то у ретины в два раза больше.

 

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

Читал об этом на ixbt. Рисуя под 1024х768, например, на экранах с 1920х1080 вся графика будет выглядеть меньше.

Меня как раз и интересует: например, нарисовал иконки и прочую графику для разрешения 1024х768. Но есть мониторы и по 1366х768, и по 1920x1080, и "ретина". Что мне делать в таком случае?

Edited December 13, 2013 by ручник

[Great Rash]

Ничо не делать, а для ретины увеличить в 2 раза размер картинок. При этом менять настройки dpi/ppi в макете не нужно (от этого ничего не изменится).

[Int]

Рисуя под 1024х768, например, на экранах с 1920х1080 вся графика будет выглядеть меньше.

Это только если разный размер пикселя. С таким подходом она и на 1024x768 будет выглядеть меньше, если взять монитор меньшей диагонали. Логично же? У меня вот телефон 1280x720, но картинки-то на нём выглядят меньше, чем на экране большого монитора, потому что у него тот самый ppi выше, но это характеристики не изображения, а самого экрана, что на нём сделали такие мелкие пиксели.

[ручник]

Ничо не делать, а для ретины увеличить в 2 раза размер картинок. При этом менять настройки dpi/ppi в макете не нужно (от этого ничего не изменится).

Я в гимпе начал работу (вообще с графическими программами не работал в рамках дизайнерских задач). Там плотность по умолчанию 72. На какой диапазон разрешений экранов этой плотности достаточно и "откуда" начинается ретина? На ретину сохранять с плотностью 72х2(144)?

 

 

Рисуя под 1024х768, например, на экранах с 1920х1080 вся графика будет выглядеть меньше.

Это только если разный размер пикселя. С таким подходом она и на 1024x768 будет выглядеть меньше, если взять монитор меньшей диагонали. Логично же? У меня вот телефон 1280x720, но картинки-то на нём выглядят меньше, чем на экране большого монитора, потому что у него тот самый ppi выше, но это характеристики не изображения, а самого экрана, что на нём сделали такие мелкие пиксели.

 

Я понимаю, что характеристики экрана. Чтобы картинка не уменьшалась, а сохраняла пропорции как в макете, её нужно масштабировать (либо сжать, если ppi экрана окажется меньше).

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

[Great Rash]

Я в гимпе начал работу (вообще с графическими программами не работал в рамках дизайнерских задач). Там плотность по умолчанию 72. На какой диапазон разрешений экранов этой плотности достаточно и "откуда" начинается ретина? На ретину сохранять с плотностью 72х2(144)?

Так, ещё раз: плотность пикселей по барабану какая стоит в макете. Так понятней?

[ручник]

Так, ещё раз: плотность пикселей по барабану какая стоит в макете. Так понятней?

 

Текст понятен... Просто всё время думал, что это имеет значение... Вы же сейчас про растр говорите, а не вектор? У растровой картинки же есть ограничения до какой степени её можно масштабировать без появления зернистости.

[Great Rash]

Блин, я уже не знаю как еще проще объяснить.

Вот есть картинка 10х10 пикселей. Вот она на мониторе займёт ровно 100 пикселей (10 * 10 = 100). Вот поставьте у себя в гимпе хоть миллион ppi, картинка всё равно займёт 100 пикселей. И когда вы её отмасштабируете (увеличите в 10 раз например), то хоть 72 ppi, хоть 7200 ppi превратятся в кашу, потому что монитору на ваши ppi глубоко фиолетово.

[ручник]

То, что вы говорите, я понимаю, просто до этого очень долго думал наоборот, привык. А это

 

 

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

 

Ничо не делать, а для ретины увеличить в 2 раза размер картинок.

относится к ширине-высоте изображения?

Edited December 19, 2013 by ручник

[Switch74]

да

[ручник]

Great Rash,  Switch74, спасибо за разъяснения, дошло А браузер, получается, сам не масштабирует графику? Например, отрисовал макет страницы в своем разрешении экрана, затем нужно сохранить под меньшее разрешение. Чтобы не "сбить" композицию, нужно пропорционально отнять из ширины-высоты каждого элемента? Есть такие цифры?

Edited December 23, 2013 by ручник

[Great Rash]

Вы макет на ретине рисуете?

[ручник]

Нет  На работе, например, обычный 4:3 1680х1050. Дома - 16:9, разрешение другое.

Edited December 24, 2013 by ручник

[Great Rash]

Значит вы опять ничего не поняли. Пофиг какое разрешение у вас и у кого-то ещё.

[ручник]

Значит вы опять ничего не поняли. Пофиг какое разрешение у вас и у кого-то ещё.

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

[ShumNo]

 

Значит вы опять ничего не поняли. Пофиг какое разрешение у вас и у кого-то ещё.

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

 

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

[klierik]

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

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

Я уверен что юзер не будет рад открыв сайт с х2 графикой в роуминге и заплатит 10 баксов за одну страницу

Но повторюсь -- все зависит от конкретного проекта. Эсли это декстоп, то там с трафиком проще.

[ручник]

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

Я же про это и спрашиваю: разрешение же увеличивается, значит один пиксел в большем разрешении - это уже 2 пиксела. И картинка 10х10 становится меньше. Или я тут тоже что-то не понимаю.

Edited December 25, 2013 by ручник

[Int]

Я же про это и спрашиваю: разрешение же увеличивается, значит один пиксел в большем разрешении - это уже 2 пиксела. И картинка 10х10 становится меньше. Или я тут тоже что-то не понимаю.

Как он один был, так один и останется. Разрешение — это количество пикселей, а не их размер. Вернее, размер у них как бы меняется, но программа об этом ничего не знает. Если у тебя сайт в ширину 1200 пикселей, он всегда 1200.

У тебя два зерна риса, ты берёшь увеличительное стекло (меняешь разрешение и вместе с ним ppi), сколько зёрен риса у тебя становится?

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