Размер фонового изображения для заголовка навигационного ящика

В основном мне понравился фон, используемый г-ном Джонатаном Ли для заголовка навигационного ящика в официальной ссылке google http://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-content

Итак, я хотел воспроизвести что-то подобное, вдохновленное этим. Я считаю, что мне нужно сделать аналогичный дизайн в Photoshop и установить его как фоновое изображение. Но вопрос в том, какими должны быть размеры и пиксели, чтобы они соответствовали различным типам устройств?

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

Есть ли у кого-нибудь идеи или ссылки, которые могут помочь?

Ответ 1

Ширина:

Мобильный:

Ширина = Ширина экрана - 56 дп

Максимальная ширина: 320dp

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

http://www.google.com/design/spec/layout/structure.html#structure-side-nav

Высота определяется соотношением сторон изображения, которое вы хотите:

http://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-ratio-keylines

Возможно, 16: 9

Ответ 2

Распакуйте APK, и это то, что я выяснил -

mdpi-
    width=384 pixels
    height=216 pixels
hdpi-
    width=576 pixels
    height=324 pixels
xhdpi-
    width=768 pixels
    height=432 pixels
xxhdpi-
    width=1152 pixels
    height=648 pixels

Источник изображения = приложение Google Newsstand, инструмент = Adobe photoshop 7.0

Ответ 3

Я бы рекомендовал использовать Adobe Illustrator, так как он отлично работает с дизайном ui. Большинство мобильных устройств/планшетов имеют ширину от 320 пикселей до 1080 пикселей и все еще увеличиваются по мере выпуска новых телефонов/планшетов. Масштабируемая векторная графика отлично работает с макетами прототипирования ui.

проверить: http://www.uxbooth.com/articles/considerations-for-mobile-design-part-2-dimensions/