Сколько пикселей на дюйм в макете для сайта: Значимость DPI И PPI Для Веб-Дизайна И Photoshop / WAYUP

Значимость DPI И PPI Для Веб-Дизайна И Photoshop / WAYUP

Буквально везде можно услышать о DPI и PPI,  какие они все такие важные и нужные, даже использовать нужно умудряться все и сразу. О, да, и в веб-дизайне обязательно, а иначе, ну, какой же ты веб-мастер?! Но что на самом деле означают спецификации размера и как веб-дизайнер может их использовать? Нужно ли вообще обращать внимание на это или достаточно только использовать настройки по умолчанию?

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

В этом материале мы поговорим о DPI и PPI более подробно и на примерах, чтобы разобраться, когда и в каких случаях веб-дизайнеру стоит обращать на них внимание. Сразу оговоримся, что статья может показаться «сухой» и скучной, но мы уверены, интересные моменты вы в ней найдете. Как ни странно, но значения PPI

могут и не могут влиять на дизайн и на изображения, даже на сторонние файлы PSD и копируемые данные. А еще ведь существует PPI монитора. И представьте, что все это связано. В конце мы подведем итог и обобщим все умозаключения.

Пиксели и PPI

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

PPI является мерой качества изображений и используется в Photoshop по умолчанию. При работе с фотографиями можно изменить дискретизацию изображения или ресамплинг (изменить количество пикселей) или изменить размер изображения (размер каждого пикселя, но не их количество). В Photoshop в окне изменения размера необходимо следить за соотношением значений количества пикселей и ресамплингом (детализация и увеличение количества пикселей).

Веб-стандарт для изображений составляет 72 пикселя на дюйм. При таком значении изображения выглядят красиво, если они изначально имеют хорошее качество (не искажены, четкие). Имейте в виду, что ваша фотография всегда должна иметь полный размер и быть широкой, чтобы полностью заполнять рамки и границы размещения. Например, большое изображение в шапке страницы Facebook. Изображение должно обладать шириной 851 пикселей. Чтобы предотвратить пикселезацию при разрешении в 72 пикселя на дюйм ширина вашей готовой картинки должны быть почти на 12 дюймов шире.

Сравните разницу.

И

Удивительно, но на текст PPI тоже имеет свое влияние. Аналогично тому, как большое количество пикселей на дюйм делает фотографию более четкой, текст тоже становится удобочитаемым. Шрифты с высоким PPI легче воспринимать, они разборчивее, даже если буквы созданы маленьким размером. Иными словами, текст может четким и нечетким, точно также как и фотографии.

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

Одновременно с важностью PPI для интернета, для печати данные значения мало что могут сделать полезного. Для спецификаций печати более уместно использовать точки на дюйм или DPI.

Точки и DPI

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

Но в обыденности, зачастую, люди используют DPI для обозначения любого разрешения и путают с PPI. Если же вы работаете с проектом, непредназначенным для печати, то путаницы и проблем с DPI быть не должно. Если же создаете логотип, который будет использоваться и в печати (визитки, бланки и пр.) и на сайте, то необходимо создавать качественные изображения изначально. Создавайте копию изображения с высоким DPI, которое будет предназначаться исключительно для печати.

Когда же мы смотрим на экран, то маловероятно, что кто-то способен увидеть разницу между двумя одинаковыми изображениями, созданными в 100 DPI и 300 DPI.

Причина  в том, что мониторы не отображают графику в точках. Для них значения DPI не имеют никакого значения.

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

DPI также вступает в работу, чтобы преобразовать печатный элемент в цифровой формат. Чем выше значение, тем выше качество сканируемого документа. В целом, качественные фотографии имеют DPI 200 при реальном размере. Но всегда стоит попробовать сканировать и при высоких параметрах, тогда будет удобнее редактировать данные, увеличивать и распечатывать повторно.

Мегапиксели

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

Все цифровые изображения, вне зависимости от источника, состоят из пикселей (не точек). Мегапиксели только помогают понять разрешение и качество фотографии, которое будет на выходе. Это как упрощение исчисления: сантиметры, метры, километры.

Цифры в веб-дизайне

У пикселя нет размера, значения, смысла вне его представления в математике. Он только связующее звено между физическим размером экрана (дюймы), экранным разрешением (пиксель на дюйм) и пиксельным размером экрана (пиксели). Обычные десктопные экраны (не Retina) обычно имеют PPI от 72 до 120. Дизайн с PPI между 72 и 120 дает уверенность в том, что ваша работа будет иметь примерно одинаковые пропорции в размере.

Общая формула расчета и вычисления изменения размеров в зависимости от разрешения и размеров выглядит так:

Вот вам пример: экран монитора LG w2253tq 22 дюйма располагает PPI = 102, что означает, что он отображает 102 пикселя на дюйм экранной площади. Ширина самого экрана примерно 18,8 дюймов, так что 18,8*102 приблизительно 1920, что и формирует родное разрешение экрана в 1920х1080 рх.

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

Например, вы нарисовали синий квадрат размером 102х102px на экране с PPI 102.

Этот квадрат будет иметь физический размер 1х1 дюйм. Но если экран пользователя имеет PPI = 72, ваш синий квадрат будет крупнее по своим физическим размерам. Так как PPI = 72, понадобится примерно полтора дюйма (грубо округлили) экранного пространства, чтобы отобразить квадрат со стороной в 100 пикселей. По формуле выше это рассчитывается легко и быстро.

Именно поэтому веб-дизайн сайта каждый пользователь видит по-разному. Цель же веб-мастера – поиск лучшего компромисса, который будет удобен большинству, поскольку не все обладают тем экраном, что у вас.

Интересен еще один момент

Что будет, если менять значение PPI в Photoshop и создавать проекты под PPI 100 или 120. Дело в том, что цифровой контент изначально измеряется в пикселях вне зависимости от значения PPI. На дизайн PPI не имеет влияние, как таковое. Именно поэтому при необходимости увеличения изображений используются множители.

В Photoshop создаем новый документ и выбираем PPI 72. Создаем квадрат 102х102 пикселя и текст 14 пунктов.

 

Затем аналогично создаем квадрат и текст в документе с PPI 102.

Сравниваем, что получилось. Текст во втором случае (родном для монитора) стал крупнее, а квадрат остался тем же самым, он не изменился. Дело в том, что Photoshop автоматически масштабирует значение пунктов  в соответствии с PPI документа. Вот и получилось увеличение размера текста при рендеринге.

Что касается квадрата, то его значения были указаны в пикселях, поэтому его размер не изменился. Пиксель никогда не меняется, какой бы PPI не выбрать. Чтобы квадрат изменился, в размере нужен другой PPI самого монитора, экрана. Программно такое не сделать.

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

Есть еще вариант, если у вас несколько разных PSD с разными настройками в файлах PPI. Что произойдет в Photoshop? Приложение автоматически настроит размеры элементов пропорционально вашему экрану и значениям PPI. То же самое будет, если вы работаете с макетом сайта в разрешении 72 PPI, а логотип вставляете из документа 100 PPI. Изображение будет изменено автоматически и это может вызвать проблемы.

Решение, впрочем, есть. Изначально работайте в общепринятом разрешении 72 PPI. Это настройка по умолчанию в Photoshop. Но если вам говорят клиенты или знакомые/друзья, что с макетом как-то не так всё, подумайте, а как они открывают его и какие у них настройки приложения.

Кроме того стоит помнить о векторных изображениях, которые хорошо масштабируются и предотвращают необходимость создания нескольких пиксельных картинок с разным PPI. Векторное автоматически будет изменяться в зависимости от множителя, монитора, разрешения и прочего. Но использование вектора имеет свои ограничения. Например, сложную графику не создашь: тени, градиенты и прочее. Вектор может быть очень тяжеловесным, а потому система пользователя может попросту «зависать» на тех сайтах, где приходится обработать много векторных данных.

Выводы

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

PPI играет важную роль в веб-дизайне, поскольку влияет на изображения и на соотношение элементов. С одной стороны, фотографии могут быть размытыми или четкими, с другой, размерность может изменяться, если она изначально не выражалась в пикселях. Если вы хотите, чтобы весь дизайн выглядел превосходно, то используйте только значения вашего родного монитора или значения по умолчанию. Пиксели не любят полумер. Не существует полпикселя или полтора пикселя. Есть один или два, поэтому точность важна, прежде всего. А добиться её можно только при работе с родными для вас параметрами.

Другой момент в том, что многие пользователи сами изменяют разрешение страницы сайта, чтобы было комфортнее читать/смотреть. Тут уже дизайн сайта может выглядеть удручающе плохо и неказисто. Но сделать навряд ли что-то можно, поскольку посетителям важно удобство. Поэтому помните, что разрешение файлов принято использовать в 72 PPI. Это сэкономит больше места на сервере. Файлы изображений будут небольшими и загружаться быстрее станут. И хотя они будут меньше оригинальных фотографий, в большинстве же случаев, на экране пользователей они будут больше, поскольку PPI мониторов у всех разный и преимущественно 100+ PPI.

Термины дизайна

Профессиональные термины простым понятным языком. Курс 2, углубленный. После прочтения вы сократите время на словесный пинг-понг. 7 терминов, 4 минуты 52 секунды на прочтение.

Поехали!

---

Линки

Есть такая программа: «Adobe Illustrator». С большой вероятностью дизайнер работает в ней: в этой программе очень удобно готовить макеты т.к. есть возможность подлинковывать внутрь одного файла другие файлы. Подлинковать — это поместить сторонний файл, другого формата, внутрь программы.

Т.к. физически файл лежит отдельно — веса готового макета в самой программе он не увеличивает и программа быстро работает. Макет хранит только ссылку на нужный файл — линк. Не будет линка = программа не сможет ничего разместить в этом месте макета. Как показать то, что не лежит по указанному адресу?

Поэтому, если вы отдаёте в работу иллюстраторовский (.ai) файл, следите, чтобы в папочке links были приложены все линки, которые используются в макете.

*Макет может вообще не содержать линков, если это простой векторный файл, но лучше всё-таки уточнить.
Особенно удобно, если линк остаётся по слоям, а не сбитым в один слой, в чём выгода — читайте ниже.

---

Исходник или файл, сбитый (слитый) в один слой

В исходник можно быстро и просто вносить изменения: передвинуть объекты местами, уменьшить или увеличить размер текста, в освободившееся место дописать что-то. В сбитый файл — нет. Потому что исходник хранит всю информацию по слоям (картинка ниже), объекты не связаны между собой, одно можно изменять, не вредя другому. Чтобы сделать такое в сбитом файле, придётся обвести один объект, передвинуть, в появившейся дырке дорисовать «заплатку» из фона. Послойный файл — это коллаж из наложенных, но не склеенных друг с другом объектов. Файл, сбитый в один слой — это, пусть и хороший, но рисунок на цельном листе бумаги.

Слои в исходнике:

Файл, сбитый в один слой:

---

Разрешение

А теперь загадка, о чём здесь речь?

Конечно, о разрешении. Разрешение — это количество маленьких точек при печати на дюйм: dpi («dots per inch — точек на дюйм»). Чем выше разрешение, тем больше можно увеличить картинку, а она будет оставаться в хорошем качестве. Однако не стоит гнаться за неоправданно огромными числами в файлах. К чему вам качество внутри компьютерного файла 3 000 dpi, если принтер в лучшем случае способен выдать картинку в 300 dpi? Это лишь лишний вес файла.

Оптимальное разрешение для полиграфии = 300 dpi,
для наружки = 72 dpi (хотя сами печатники признаются, что и того меньше, эти макеты смотрят на расстоянии, высокое качество здесь не требуется, главное — сделайте перед итоговой печатью цветопробу, типография предоставляет её бесплатно).

---

Резкость

Понятие «резкость» плотно связано с разрешением. Если очень упрощённо, то резкость отвечает за различимость деталей на изображении. Степень контрастности между соседними точками. Особенно это важно при работе с текстурами ткани. Как раз на воспринимаемую резкость изображения влияют два фактора: разрешение и чёткость.

---

Фокус/расфокус

Чтобы после обработки получить картинку отличного качества, нужно позаботиться о высоком качестве самого снимка. Ретушь только «вытягивает» и украшает уже данное кадру. Косметика, а не пластическая хирургия. Коммуникации требуют и высокого разрешения (бОльшего количества точек), и высокой чёткости (чёткие границы между этими точками). Однако камера имеет ограничение и может сфокусироваться (сделать резким) только конкретный план (близкий объект, средний, дальний). Если часть изображения в фокусе (на нём хорошая резкость), то часть уходит в расфокус (потеря резкости, размытость), как быть в таком случае? Когда нужен полностью резкий кадр, фотографы создают композитное изображение. Поочерёдно взяв в фокус разные планы, а затем объединив изображение в одну картинку, где взяты самые резкие детали.

---

Шум

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

Такое происходит из-за несовершенства техники и недостатка света. Обычно шум негативно влияет на изображение, словно бы невпопад «бьёт» его на мелкие кусочки, однако небольшое количество шума может повысить ощущение резкости (картинка ниже). Такое сознательное добавление шума могут использовать для искусственного повышения резкости, борьбы с «замыленными» текстурами не очень хорошего качества (трава, кирпичи, картон), или при ретуши, когда пришлось убрать средние частоты и появилось слишком большое ощущение гладкости и пластика.

---

Припуски/поля под обрез/вылеты

Вы видите готовые визитки вот так:

а печатник и дизайнер видят макет так:

Видите сколько макета добавилось по периметру? Ровно по 5 мм с каждой стороны. Добавленное — и есть поля под обрез. Они же припуски. Они же вылеты. Если после печати визитки будут разрезаны неровно (а так и будет), это не бросится в глаза: по краю не останется противной белой полосочки: ведь мы печатали фон с запасом.
Какими поля должны быть, точно укажет в технических требованиях типография, но обычно в пределах 5 мм. Информация важная, нужная, её лучше уточнить.

---

Обрезной формат

То, что остаётся после того, как поля срежут. Он же — размер готового изделия.

Вот и всё 🙂 7 терминов. 4 минуты 52 секунды. Если вам понравилось, не забудьте прочитать первую часть.

Плотность пикселей области просмотра мобильного веб-сайта (viewport)

Ссылка на статью

http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html

 

Я лично считаю, что концепция области просмотра очень важна. Это основа для понимания принципов работы мобильных веб-страниц (одна из них). Существует много текстов, и она используется только как теоретический запас знаний.

 

Что такое плотность пикселей?

Плотность пикселей (dpi: точек на дюйм) — это количество пикселей на дюйм экрана. Чем выше плотность пикселей, тем богаче изображение.

 

Например:

iphone3    162dpi    320px * 480px

iphone4    326dpi    640px * 960px

 

 

Что такое Viewport?

Мобильный браузер помещает страницу в виртуальное «окно» (область просмотра), обычно виртуальное «окно» (область просмотра) шире, чем экран, поэтому нет необходимости вжимать каждую веб-страницу в небольшое окно (это приведет к Уничтожить макет веб-страниц, не оптимизированных для мобильных браузеров. Пользователи могут панорамировать и масштабировать, чтобы увидеть различные части веб-страницы. В мобильной версии браузера Safari недавно был представлен метатег области просмотра, позволяющий веб-разработчикам управлять размером и масштабированием области просмотра. Другие мобильные браузеры также в основном поддерживают его.

 

 

Личное понимание:

1. Ширина экрана iphone4 на самом деле составляет 640 пикселей, поэтому я могу отображать веб-страницы, фактическая ширина которых составляет 640 пикселей.

 

2. Область просмотра iphone4 по умолчанию — 980 пикселей, что означает, что размер веб-страницы, которая может отображаться в браузере, составляет 980 пикселей. Таким образом, iphone4 может отображать веб-страницу шириной 980 пикселей, когда фактический физический размер составляет 320 пикселей. Содержимое веб-страницы пропорционально. Отображаемое содержимое составляет 640 пикселей / 980 пикселей, что означает, что отображаемое содержимое текста уменьшается.

 

Если ширина традиционной веб-страницы меньше 980 пикселей и область просмотра не задана, ее можно полностью отобразить на экране мобильного телефона, а веб-страницу можно отобразить с помощью функции «увеличения».

 

3、<meta name=»viewport» content=»width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no»>

width = device-width означает, что фактический физический размер iphone4 составляет 320 пикселей, затем я установил размер области просмотра на 320 пикселей, что позволяет отображать только веб-страницы с шириной 320 пикселей. Тогда содержимое веб-страницы будет увеличено в 2 раза в равной пропорции (поскольку физические пиксели iphone4 в два раза превышают 1 пиксель физического экрана, это соотношение несовместимо для разных мобильных телефонов, а мобильные телефоны Apple обычно в 2 раза)

 

 

Основы видового экрана

Обычно используемый метатег области просмотра для страниц, оптимизированных для мобильных веб-страниц, выглядит примерно так:

 

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

 

width: управляет размером области просмотра, может быть указано значение, например 600, или специальное значение, например, device-width — это ширина устройства (единица измерения — пиксели CSS при увеличении до 100%).

высота: соответствует ширине, укажите высоту.

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

Максимальный масштаб: максимальный масштаб, до которого разрешено изменять масштаб.

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

масштабируемый пользователем: может ли пользователь вручную масштабировать

 

 

Область просмотра — это не только уникальный атрибут ios, но и области просмотра на android и winphone. Проблема, которую они должны решить, та же самая, то есть игнорирование реального разрешения устройства, прямой сброс разрешения между физическим размером и браузером через dpi, это разрешение не имеет ничего общего с разрешением устройства. Например, если вы возьмете iphone3 GS с диагональю 3,5 дюйма с разрешением 320 * 480, iphone4 с диагональю 3,5 дюйма с разрешением 640 * 960 или ipad2 с диагональю 9,7 дюйма с разрешением 1024 * 768, хотя разрешение и физический размер устройства разные, вы можете установить Область просмотра позволяет им иметь одинаковое разрешение в браузере. Например, если ваш веб-сайт имеет ширину 800 пикселей, вы можете установить ширину области просмотра = 800, чтобы ваш веб-сайт отображал ваш веб-сайт точно на трех разных устройствах.

 

 

Если область просмотра не отображается, ширина по умолчанию — 980. Если ширина всех элементов страницы меньше 980, то ширина равна 980. Если самая широкая позиция страницы превышает 980, то ширина равна максимальной ширине. Короче говоря, по умолчанию вся страница может отображаться слева направо. Если задано окно просмотра, например, просто устанавливается только user-scalable = no, например <meta name = «viewport» content = «user-scalable = no» />, тогда ширина под ios по-прежнему отображается как 980 (то есть по умолчанию Он будет масштабироваться по dpi), но он больше не будет масштабироваться под android и winphone.Разрешение браузера такое же, как реальное установленное разрешение.

 

 

Создание ресурсов для разных экранов — Xamarin

• 08/28/2018
• Чтение занимает 3 мин

В этой статье

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

Основные понятия

Для обеспечения поддержки нескольких экранов важно понимать несколько терминов и концепций.

• Размер экрана – Объем физического пространства для отображения приложения

• Плотность экрана – Количество пикселей в любой заданной области экрана. Типичная единица измерения — точка на дюйм (DPI).

• Решение – Общее количество пикселей на экране. При разработке приложений разрешение не так важно, как размер и плотность экрана.

• Независимый от плотности пиксель (DP) – Виртуальная единица измерения, позволяющая разрабатывать макеты независимо от плотности. Эта формула используется для преобразования точки DP в экранные пиксели:

  px = DP × dpi ÷ 160

• Ориентация страницы – Ориентация экрана считается альбомной, если она шире, чем высота. В отличие от ориентации, книжная ориентация имеет значение, когда высота экрана превышает ширину. Ориентация может измениться в течение времени существования приложения, когда пользователь поворачивает устройство.

Обратите внимание, что первые три из этих концепций являются взаимосвязанными – . Увеличение разрешения не приводит к увеличению размера экрана. Однако при увеличении плотности и разрешения размер экрана может остаться неизменным. Такая связь между размером экрана, плотностью и разрешением усложняет поддержку экрана.

Для решения этой сложности платформа Android предпочитает использовать аппаратно-независимые пиксели (DP) для макетов экрана. Используя независимые от плотности Пиксели, элементы пользовательского интерфейса будут отображаться для одного и того же физического размера на экранах с различной плотностью.

Поддержка различных размеров и плотности экрана

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

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

Объявление поддерживаемого размера экрана

Объявление размера экрана гарантирует, что только поддерживаемые устройства смогут скачать приложение. Это достигается путем установки элемента поддержки-screens в файле AndroidManifest.xml . Этот элемент используется для указания того, какие размеры экрана поддерживаются приложением. Данный экран считается поддерживаемым, если приложение может правильно расположить макеты для заполнения экрана. С помощью этого элемента манифеста приложение не будет отображаться в Google Play для устройств, которые не соответствуют спецификациям экрана. Однако приложение по-прежнему будет работать на устройствах с неподдерживаемыми экранами, но макеты могут выглядеть размытыми и пикселизованным.

Поддерживаемые экранные Сиксес объявляются в файле задающий свойства/AndroidManifest.xml решения:

Измените AndroidManifest.xml , чтобы включить поддержку экранов:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          android:versionCode="1"
          android:versionName="1.0"
          package="HelloWorld.HelloWorld">
      <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="27" />
      <supports-screens android:resizable="true"
                        android:smallScreens="true"
                        android:normalScreens="true"
                        android:largeScreens="true" />
      <application android:allowBackup="true"
                   android:icon="@mipmap/ic_launcher"
                   android:label="@string/app_name"
                   android:roundIcon="@mipmap/ic_launcher_round"
                   android:supportsRtl="true" android:theme="@style/AppTheme">
  </application>
</manifest>

Предоставление альтернативных макетов для различных размеров экрана

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

Начиная с уровня API 13 (Android 3,2), размеры экранов не рекомендуются в пользу использования квалификатора SW N DP. Этот новый квалификатор объявляет объем пространства, необходимого для данного макета. Рекомендуется, чтобы приложения, предназначенные для работы на Android 3,2 или более поздней версии, использовали эти более новые квалификаторы.

Например, если для макета требуется минимальная 700-я точка в ширину экрана, альтернативный макет будет находиться в макете папки — sw700dp:

Ниже приведены некоторые значения для различных устройств.

• Обычный телефон – 320 DP: обычный телефон

• Устройство с 5 «планшетом/» или «tween-анимацией» – 480 DP: например, Примечание Samsung

• 7 «планшетный – 600 DP: например, Барнса & благородные Нук

• 10 «Планшет – 720 DP: например, Ксум Motorola

Для приложений, предназначенных для уровней API до 12 (Android 3,1), макеты должны находиться в каталогах, использующих квалификаторы малого / обычного / размера / ксларже , как обобщения различных размеров экрана, доступных на большинстве устройств. Например, на рисунке ниже приведены дополнительные ресурсы для четырех различных размеров экрана:

Ниже приведено сравнение того, как более старые квалификаторы размера экрана, предшествующие API уровня 13, сравниваются с пикселями, не зависящими от плотности.

• 426 DP x 320 DP невелика

• 470 DP x 320 DP является нормальной

• 640 DP x 480 DP большие

• 960 DP x 720 DP — ксларже

Новые квалификаторы размера экрана на уровне API 13 и выше имеют более высокий приоритет, чем предыдущие квалификаторы экрана на уровнях API 12 и ниже. Для приложений, которые будут охватывать старый и новый уровни API, может потребоваться создать альтернативные ресурсы с помощью обоих наборов квалификаторов, как показано на следующем снимке экрана:

Укажите разные точечные рисунки для различной плотности экрана

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

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

Сравните это с макетом, который предназначен для ресурсов, зависящих от плотности:

Создание ресурсов с различной плотностью с помощью Android Asset Studio

Создание этих растровых изображений различной плотности может быть немного утомительным. Таким образом, Google создал интерактивную служебную программу, которая может сократить некоторые долгой, связанные с созданием этих точечных рисунков под названием Android Asset Studio.

Этот веб-сайт поможет при создании точечных рисунков, нацеленных на четыре распространенные плотности экрана, путем предоставления одного изображения. После этого Android Asset Studio создаст точечные рисунки с некоторыми настройками, а затем позволит скачать их в виде ZIP-файла.

Советы для нескольких экранов

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

• Разработка и разработка только для того, что вам нужно – Существует множество различных устройств, но некоторые из них существуют в редких конструктивных факторах, которые могут требовать значительных усилий при проектировании и разработке. Панель мониторинга » размер и плотность экрана » — это страница, предоставляемая Google, которая предоставляет данные о декомпозиции размера экрана и матрицы плотности экрана. Эта декомпозиция позволяет получить представление о том, как выполнять разработку на экранах с поддержкой.

• Использование DP, а не пикселей в пикселях, становится проблематичным при изменении плотности экрана. Не жестко кодировать значения пикселей. Старайтесь не использовать пикселов в качестве точки распространения (не зависящих от плотности).

• Избегайте абсолутелайаут везде, где это возможно – , не рекомендуется на уровне API 3 (Android 1,5) и приведет к нестабильнымм макетов. Его не следует использовать. Вместо этого попробуйте использовать более гибкие графические элементы макета, такие как элемент LinearLayout, RelativeLayoutили новое значение GridLayout.

• Выбрать одну ориентацию макета по умолчанию – Например, вместо использования альтернативных ресурсов Layout-Land и Layout-Port, разместите ресурсы для альбомной ориентации в макете, а ресурсы для книжной ориентации — на порт макета.

• Использовать лайаутпарамс для высоты и ширины . при определении элементов пользовательского интерфейса в XML-файле макета приложение Android, использующее значения wrap_content и fill_parent , будет иметь более успешный вид на различных устройствах, чем использование пикселей или единиц распределения плотности. Эти значения измерений приводят к тому, что Android масштабирует ресурсы растрового изображения соответствующим образом. По той же причине единицы, не зависящие от плотности, лучше зарезервированы для при указании полей и дополнений элементов пользовательского интерфейса.

Тестирование нескольких экранов

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

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

Другой вариант — использовать службы службы тестирования третьих сторон. Эти службы будут принимать APK, запускать их на различных устройствах, а затем оставлять отзывы о том, как работает приложение.

Базовые уроки веб-дизайна в фотошопе. Данил фимушкин

От автора: на прошлых занятиях мы рассмотрели теоретические основы веб-дизайна. Пора переходить к практическим занятиям, поэтому сегодня Вы получите базовые уроки веб-дизайна в Фотошопе и научитесь создавать стильные кнопки для сайта.

Рекомендую Вам, в первую очередь, изучить именно эту программу. Новички, любители и профессионалы — все работают в Фотошопе. Без него не представляют своей жизни тысячи дизайнеров, художников, полиграфистов и веб-мастеров.

Если работа веб-дизайнера придется Вам по душе, с помощью Фотошопа Вы сможете не только обрабатывать фотографии, но и делать сайты, обложки книг, баннеры и многое другое! Огромный арсенал средств ретуширования, обработки и монтажа изображений, точная цветовая калибровка, «ювелирная» работа с цветом делают Adobe Photoshop самым популярным, да что там говорить — самым лучшим графическим редактором.

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

Как начать изучение Фотошопа?

Чтобы понять, как пользоваться Фотошопом, начните с теоретических основ. В первую очередь, скачайте и установите программу. Если у вас современный компьютер на базе процессоров FX или i5–i7, с минимум 8 гигабайтами оперативки, можете смело устанавливать Photoshop СS6, если характеристики ниже — придется довольствоваться PhotoshopCS5.

Установили? Молодцы, теперь пришло время познакомиться с всевозможными инструментами и элементами интерфейса. Если будете регулярно заниматься уроками Photoshop для web-дизайна, то постепенно изучите все эти инструменты в процессе практических занятий.

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

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

Как настроить Photoshop для веб-дизайна?

Нажимаем Окно – Рабочая среда – Типография. Справа у Вас появятся панели работы со слоями и шрифтами.

Создаем новый файл: Файл — Новый, в каждом новом проекте проверяем, чтобы в настройках Ширины и Высоты стояли Пиксели. Разрешение — 72 точки на дюйм. Цветовая модель должна быть указана RGB цвет 8 бит.

Вообще, к параметрам создания нового документа относятся:

Имя будущего документа. Его обычно назначают при сохранении файла;

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

Разрешение — количество точек на дюйм. Стандартным разрешением считается 72 пиксела на дюйм;

Режим. Самым распространенным является RGB цвет, глубина которого задается в битах. Обычно хватает 8 бит;

Содержимое фона, определяющее фон изображения.

Следующая настройка, о которой хотелось бы упомянуть, и о которой часто незаслуженно забывают, — это настройка обычной стрелки. Ставим галочку в Автовыборе, выбираем Слой и «Показывать управление трансформацией». Благодаря этому параметру вокруг выделенных областей будет появляться пунктирный прямоугольник с манипуляторами в серединах и углах сторон.

Ну и последняя настройка, которую нужно сделать, — это настройка на позитив . Без нее у вас не будет достаточной мотивации, чтобы эффективно и последовательно проходить уроки веб-дизайна в Фотошопе.

Создаем прямоугольник в Photoshop

Расскажу Вам, как сделать простенький объект в Фотошопе. С помощью инструмента «Прямоугольник» создаем одноименную фигуру, задаем ей нужный цвет заливки и границы. Здесь же можно создать прямоугольник с закругленными углами.

Небольшой лайфхак: если вы выделяете какой-либо объект (в данном случае, прямоугольник), то вы сможете изменить его размеры пропорционально, выделив его и зажав клавишу Shift. Таким образом, вы не деформируете изображение.
Это очень удобно, когда вы работаете с иконками. Зажав клавишу Alt, вы сможете скопировать объект при перетаскивании левой кнопкой мыши.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Делаем кнопку для сайта в стиле flat design

Направление «плоский дизайн» в последнее время чрезвычайно популярно в создании сайтов. При этом отрисовка его элементов не требует экстраординарных художественных навыков.

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

Создаем новый документ Файл — Новый и выбираем инструмент «Прямоугольник со скругленными углами».

Выбираем цвет, например, оранжевый #ff8b00, и радиус углов — 4 пикселя.

Рисуем кнопку нужного размера:

Чтобы сделать небольшой объем в стиле «плоского дизайна», выполните следующий прием. Создайте копию слоя с нашей кнопкой Ctrl + J, затем нижний слой с прямоугольником на 2–3 пикселя передвиньте вниз. Сделайте его цвет более темным, например, оттенка #bf6800.

Получится примерно такой результат:

На верхний прямоугольник можно добавить стиль «Градиент». С помощью двойного клика нажмите на слой с фигурой, выберите стиль «Наложение градиента» и поставьте угол наклона 90 градусов.

Веб-дизайн многогранен и включает в себя не только работу над макетом по принципу «что где будет располагаться», но и создание необходимых изображений, обработку фотографий, различных элементов пользовательского интерфейса, иконок, клипартов, продумывание типографики и сочетания шрифтов и многое-многое иное. Поскольку веб-дизайнеры создают визуальный макет, то использование Photoshop более чем удобно и понятно. Но между тем, различные мастера в мире стараются пользоваться огромным набором приложений компании Adobe и при создании одного только макета задействуют и Illustrator, и Fireworks, и InDesign, даже новейший Experience Design (XD).

«Но зачем так много? » — спросите вы. «Какой от них может быть толк и есть ли он вообще? ». Ответ и прост и сложен. Дело в том, что с одной стороны, все продукты Adobe предназначены для разных целей, с другой — кто к чему привык, а с третьей — они имеют интеграцию друг с другом. Впрочем, отличительные и особенные нюансы у каждого приложения все же есть и мы ниже постараемся их рассмотреть. Если грамотно использовать возможности каждого отдельного продукта, то создание дизайна сайтов станет проще, а может, и быстрее в некоторых моментах.

Наша цель не рассказать о конкретной работе в каждом приложении, но обратить внимание на их особенности, цели, задачи, решаемые ими. Если вы уже выбрали в чем работать, а это 99,9% Photoshop, то продолжайте совершенствоваться именно в этом, а прочее оставляйте для дополнительных возможней и расширения навыков.

Photoshop в веб-дизайне

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

В течении многих лет во всем мире Photoshop подходит и для создания веб-сайтов и макетов в формате PSD, благодаря, как раз таки, возможности работы со слоями. Они позволяют менять положение пользовательских элементов, отдельно редактировать их. Более того, макеты в Photoshop способствует тому, что сайты всегда будут в веб-браузере выглядеть так, как вы их изначально задумали при любом разрешении экрана. Стоит отметить набор фильтров, инструментов, плагинов для приложения.

Illustrator в веб-дизайне

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

Но если рассматривать Illustrator с точки зрения веб-дизайна и макета сайта, то он не подходит как таковой. Как минимум, откорректировать фотографию вы не сможете и со шрифтами «поиграться» тоже. Что уж говорить о разметке и вёрстке, анимации. Впрочем, последнее обновление Illustrator CC (2017.1) от 5 апреля 2017 года позволяет обрезать растровое изображение без сторонних программ. В результате, обрезанные части не сохраняются, а размер общего файла уменьшается. Тем не менее, полноценно работать с изображениями в Иллюстраторе все же невозможно, но некоторые веб-мастера умудряются создавать макеты сайтов в формате AI и отсылать их заказчикам.

InDesign в веб-дизайне

Приложение, которое до сих пор поддерживается Adobe и предназначено для макетов печатной продукции (брошюр, плакатов, журналов, листовок). Но между тем, работать с сайтом тоже можно, хотя сложнее и сохранить в PSD не получится, а импорт этого формата бывает корявым частенько. Зато можно обрабатывать большие объемы текста. Настраивать колонки, поля, стиль. Назначить нумерацию для страниц, перемещать макеты, упорядочивать и многое другое.

Приложение обладает готовыми модульными сетками, есть панелька для просмотра готовых страниц, даже, например, можно создать шаблон footer и закрепить его один раз на все страницы. Можно даже редактировать AI и PSD. Но для работы Landing Page, с промо-станицами все равно потребуется Photoshop. Если же ваш сайт предназначается для большого количества текста или заказчик заказал макет множества страниц (более3-4) и готов их увидеть даже в PDF формате, то создать его в InDesign реально и удобно.

Глубокий анализ

Мысль о том, что логотипы и иконки проще создавать в Photoshop — не самая лучшая, ибо векторная графика в приложении превращается в растр. Для того чтобы искажения и пиксели были не видны, такой растр должен иметь очень высокое разрешение, что будет являться, по сути, уже вексельной графикой . Если готовую векторную картинку вставить из Illustrator — она будет пиксельной. Именно поэтому удобнее иметь или наборы готовых изображений в векторе или Illustrator на компьютере, дабы была возможность работы с вектором.

InDesign, несмотря на то, что предназначен для верстки печатной продукции может предложить минимальный набор для создания элементов веб-дизайна. Настолько минимальный, что все равно придется использовать сторонние программы. Нет даже подобающего функционала для работы с фотографиями и логотипами, фильтров.

Но вот в чем проблема. InDesign создает макеты страницы на основе готовых и имеющихся у него шаблонов. Даже сверстать их может и сгенерировать CSS и HTML. НО! Этот код не будет оптимизирован для различных браузеров. Как говорится: «код будет грязным». Очистка его превратиться в сложную рутину, которая у веб-разработчика отнимет колоссальное количество времени, а автоматический вариант не справится и вовсе. Именно поэтому Photoshop имеет большее преимущество, даже несмотря на то, что творческий процесс занимает большее количество времени. InDesign подойдет только тогда, когда заказчику нужен макет большого сайта с несколькими страницами, разными по содержанию и с большим количеством текста.

Почему не подойдет Photoshop? Потому что придется создавать отдельные PSD для каждой страницы и прорисовывать отдельно (InDesign есть шаблоны), а настроить между ними (страницами) связь и активные ссылки не получится. Более того, создать все страницы в одном PSD тоже не вариант — размер файла будет большим и затем уже верстальщикам будет неудобно разбираться, что и где. Именно поэтому при работе над большими страницами, над Landing Page — Photoshop лучшее, что может быть.

Если говорить о Illustrator и InDesign , то они похожи, с той разницей, что Иллюстратор не имеет возможности создания нумерации страниц и шаблонов книг. Но зато AI поддерживает монтажные области для создания брошюр или перевода макетов в формат PDF. В дальнейшем такой макет удобно представлять заказчикам/клиентам/партнерам. То есть Illustrator держится некоторым особняком от прочих приложений и выполняет особую роль в веб-дизайне.

Существует и такое приложение у Adobe, как Fireworks . Точнее существовал, но об этом чуть позже. Задача приложения — обработка растровых и векторных изображений для сайтов. Особенность в том, что в нем удобно делать элементы пользовательского интерфейса. Даже есть возможность проверить их работоспособность, добавить анимацию и прочее. В Photoshop это делать кропотливее. Поэтому многие известные веб-мастера имеют это приложение тоже на компьютере и сочетают в создании макета сайтов и PS, и Fw. Плюсом является то, что объекты, созданные в Fw можно переводить в CSS и HTML и затем уже вставлять непосредственно на страницы сайта. Да и код создается чистым.

Adobe Experience Design

Но сейчас программа более не поддерживается и на смену ей уже приходит Adobe Experience Design или XD . Доступна она в бета-версии для Windows и Mac бесплатно на официальном сайте . Что это за зверь? Adobe XD создаётся для макетов интерфейсов мобильных приложений, сайтов. То есть, если InDesign создан все же для полиграфии и печатной продукции, а возможность создания документов для Web как бонус, то Adobe XD создается, наоборот, для разработки «цифровой продукции», мобильных интерфейсов, десктопных. Существует совместимость с Illustrator, Photoshop, можно создавать кнопочки, макеты, элементы, работать с ссылками, переходами, анимацией, видео. И еще много всего. Можно создавать макет и видеть его в действии.

Между тем, некоторые веб-дизайнеры не стремятся на него переходить. Выглядит приложение уж больно «сырым» и многих возможностей, к которым люди уже привыкли и в Fireworks, и в Photoshop попросту нет. Да, шаблоны и принципы создания макетов разрабатывались Adobe при поддержке многих именитых специалистов, но реализовано все это еще не слишком успешно. При получении заказа на создание дизайна сайта гораздо быстрее открыть PS и нарисовать в нем, что-то создать и перенести из Fw или AI. Времени затрачивается гораздо меньше.

Так что выбирать

Итак, Adobe для веб-дизайнеров предлагает большой ассортимент приложений, каждое из которых удобно по-своему и выполняет разные задачи. Но при этом нужно понимать, что главное при создании дизайна сайтов — сделать быстро и качественно. Соответственно, выбор падает на привычный и удобный Photoshop и Illustrator для работы с вектором. Но не стоит забывать и о Fireworks, даже не смотря на то, что он не поддерживается уже, им продолжают пользоваться во всем мире. Свои непосредственные функции и задачи он выполняет. А стремиться заменять его на Adobe Experience Design тоже вопрос спорный, ибо до сих пор в версии для Mac функционала больше, чем в версии для Windows.

Цель нашего материала была не рассказать вам: «О, смотрите, это же уникальная вещь, пользуйтесь только ею! ». Нет! Мы хотели просто напомнить, какие продукты у Adobe существуют для упрощения и ускорения работы веб-дизайнера и верстальщика. Рассмотреть заблуждения и нюансы этих программ, которые обычно становятся явными только после нескольких часов кропотливой работы в них.

Photoshop действительно самая удобная программа для дизайна-сайта, InDesign подойдет для макета, Illustrator — для векторных картинок, Fireworks/ Adobe Experience Design — совокупное приложение для веб-дизайна, растровых и векторных изображений. Здесь же отметим, что некоторые веб-мастера вообще стараются в своей работе не использовать Photoshop вообще и все делать только в Fireworks, даже в нынешнее время. Или не пользуются продуктами Adobe, но это же внутрикорпоративные особенности. Так или иначе, это отдельная тема, тем более что с каждым годом Photoshop продолжает улучшаться, а Fireworks переходит в формат XD.

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

Открываем фотошоп, после установки он будет выглядеть так:

Переходим во вкладку «окно» («window») -> «workspace» (рабочая среда) и выбрать типография («typograthy»)

У вас появится такая панель.

Обычно закрываю панельку «параграф стайл», для этого нужно 2 раза кликнуть и появится панель символ и абзац (работа со шрифтами). Разумеется, слева, панель инструментов.

Нажимаем ctrl + K, открываются основные настройки.

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

Когда создаешь новый файл, внимательно смотри, чтобы при каждом новом проекте в настройках стояли пиксели, в разрешении (resolution) 72 пикселя на дюйм, и цветовой режим RGB 8 bit. Этих настроек достаточно.

Следующая важная настройка стрелки. Обязательно поставь галку в поле «автовыбор» (auto select) выставить «слой» и галочку «показывать управляемый элемент».

На этом с основными настройками всё. Теперь об объектах, которые используюьтся в ФШ для веб-дизайна.
Чаще всего используется прямоугольник. Мы просто его протягиваем нужного размера, задаем цвет заполнения, цвет и ширину обводки. Есть так же прямоугольник со скругленными углами. Его можно найти если в панеле инструментов на прямоугольнике нажать маленькую стрелку в правом нижнем углу.

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

Интересные особенности фотошопа: если выделить объект и зажать клавишу shift, то он меняется пропорционально и не деформируется. Это очень помогает при работе с иконками или фотографиями. Если зажать клавишу alt при перетаскивании вы просто копируете элемент. Вам не нужно дополнительно нажимать «копировать» и «вставить».

Настройки смешивания в фотошоп

Очень часто в ФШ используются настройки смешивания. Выделяешь объект, 2 раза кликаешь по слою, открывается окно настроек слоя.

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

Как сделать кнопку в фотошоп

Создаю новый файл размером 400×300 пикселей. Выбираю прямоугольник со скругленными краями с радиусом скругления 5 пикселей. Задаю моему прямоугольнику цвет. Беру инструмент текст, кликаю на нужном мне месте и пишу «загрузить». Выделяю текст, выбираю шрифт (можно его выбрать до того, как написали текст). Стрелкой выравниваю надпись, чтобы она была по центру. Кстати, для выравнивания можно зажать кнопку shift выбрать необходимые элементы (в нашем случае прямоугольник и текст) и на панели управления сверху нажать на иконку «выравнивание центров по горизонтали». Всё выравняется автоматически. Или можно использовать стрелки на клавиатуре, при каждом нажатии на стрелку выделенный элемент будет смещаться на 1 пиксель, с зажатой клавишей shift — на 10. Я часто использую стрелки для выравнивания, это очень удобно. Теперь придадим объема кнопке. Кликаем 2 раза на слой, добавляем настройки смешивания: немного внутренней тени. Я ставлю угол падения тени -90 градусов. Размер 4 пиксела и прозрачность 57.

Можно использовать такие же параметры, а можно сделать какие-то свои. Кнопка готова.

Далее выделяем наши 2 слоя в поле слоёв справа с помощью зажатой кнопки ctrl, нажимаем ctrl + G и получаем группу слоёв. Назову её button. Далее делаем скриншот нашей картинки с помощью gyazo и отправляем в комментарии под постом.

В этом уроке мы будем использовать Adobe Photoshop для разработки веб-интерфейса, который может быть использован для любого мобильного сайта. Мы будем использовать различные методы, включая формы, маски, иконки, шрифты и многое другое, что может быть легко применимо к вашим собственным разработкам в веб-дизайне.
Финальное изображение.

Материалы для урока:

Шаг 1. Начнём с создания нового документа. В меню Файл — Новый (File — New) установим ширину и высоту 1100px, разрешение 72, фон — белый.

Далее, нам необходимо создать две направляющие, которые будут выступать в качестве границ для нашей страницы.
Выберите меню (View — New Guide). Для первой направляющей поставьте Ориентация — Вертикальная и положение 70 пикселей. (Orientation to Vertical and the Position 70 px).
Для второй направляющей снова выберите меню Просмотр — Новая направляющая (View — New Guide) и поставьте Ориентация — Вертикальная и положение 1030 пикселей.

И так, мы подготовили пространство для нашей веб-страницы шириной в 960 пикс.

Шаг 2. Следующий шаг — подготовка фона. Выберите инструмент Заливка (Paint Bucket Tool (G)), установите цвет переднего плана на 1e1e1e . Затем щелкните в любом месте на холсте, чтобы применить цвет к фоновому слою.

Давайте добавим текстуру нашему фону. Сделаем это в меню Фильтр — Шум — Добавить шум (Noise > Add Noise). Поставьте радиус (Amount) 2.5 и щёлкните ОК.

Шаг 3. Далее мы собираемся высветлить верхнюю часть нашей страницы. Этот ход будет привлекать основное внимание именно в эту область, иными словами — там будет фокус.
Выберите инструмент Кисть (Brush Tool), измените размер до 400 пикселей, Жесткость (Hardness) 0%

Создайте новый слой и назовите его «Spotlight».

Измените цвет переднего плана на «FFFFFF» (белый) и создайте круг в верхней части документа с помощью инструмента Кисть (Brush).

Чтобы вписать этот слой в фон, ему так же добавим немного шума, выбрав Фильтр — Шум — Добавить шум (Filter> Add Noise). Установите такие настройки. Эффект (Amount) 20 и выберите опцию Монохромный (Monochromatic) и кликните ОК.

Чтобы сгладить эту вспышку выберите Фильтр — Размытие Размытие по Гауссу (Filter- Blur-Gaussian Blur).
Установите радиус до 50,0 и нажмите кнопку ОК.

Наконец установите непрозрачность слоя Spotlight около 25%.

Шаг 4. Настало время добавить элементы графики. Скачаем изображение iPhone. Имейте в виду, вы можете использовать любой телефон, который соответствует вашим конкретным задачам (Android, Blackberry, и т.д…).
После загрузки откройте PSD файл в Photoshop. Раскройте папку “iPhones” щелкните правой кнопкой мыши на папке “iPhones” и выберите Дубликат группы (Duplicate Group). В появившемся окне дайте название группе (я использовал «iPhone») и укажите тот документ, над созданием которого вы сейчас трудитесь и нажмите кнопку ОК. Как только вы закончите, закройте PSD с iphone.

Позиция нашего первого iPhone касается левой направляющей и примерно 100px от верхней части холста документа.

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

Дублируйте группу iPhone выбрав меню Слои — Дубликат группы (Layer — Duplicate Group), назовите её “iPhone 2″ и нажмите кнопку ОК в диалоговом окне.
В меню Редактирование — Трансформирование — Масштабирование (Edit- Transform- Scale) изменим размер второго телефона. В настройках введите 107.0% по ширине и высоте. Позиция этого iPhone будет примерно 50px от верхнего края и 200px от левой направляющей.

Повторите шаг замены экрана в «iPhone 2» как упоминалось выше.

Шаг 5. Последний штрих для наших Iphones является создание их отражения. Выделим две группы -“iPhone” и “iPhone 2″, затем в меню Слои — Дубликат слоёв (Layer — Duplicate Layers) и нажмём ОК. Затем снова меню Слои — Объединить слои (Layer — Merge Layers).
Далее нам нужно перевернуть наши телефоны чтобы создать отражение. Пройдите в меню Редактирование — Трансформирование — Отразить по вертикали (Edit- Transform- Flip Vertical). Подгоните отражение под оригинальные телефоны.

Добавить маску слоя, нажав на иконку маски слоя в панели слоев.

Выберите инструмент Градиент (Gradient Tool (G)) от черного к белому и проведите линию сверху вниз по слою с отражением.

Наконец понизьте непрозрачность этого слоя до 30%.

Шаг 6. Далее следует добавить основные детали справа от наших телефонов. Прежде чем мы начнем, давайте добавим еще одну направляющую, чтобы можно было по ней выровнять будущие элементы дизайна. Выберите меню Просмотр — Новая направляющая (View — New Guide). Для этой направляющей поставьте Ориентация — Вертикальная и положение 550 пикселей. (Orientation to Vertical and the Position 550 px).
Примерно 100 пикс. от края документа мы добавим логотип. Автор использовал свой логотип. Вы можете просто использовать текст или вставить свой логотип.

Ниже логотипа мы добавим текст с описанием нашего приложения. Выберите инструмент Текст (Horizontal Type Tool) и нарисуйте прямоугольник между центральной и правой направляющими. Установите такие настройки для текста:
Шрифт (Font): Helvetica Neue
Размер (Size): 16 px
Стиль (Style): Regular
Интерлиньяж (Leading): 26 px
Трекинг (Tracking): -25
Сглаживание (Anti-aliasing): Crisp Чёткое
Цвет (Color): #FFFFFF

Шаг 7. Далее мы создадим кнопку для посетителей, которые хотят приобрести наш продукт. Используем для этого инструмент (Rounded Rectangle Tool (U)) Нарисуем прямоугольник с такими настройками 240x75px 4px, где 4 это радиус скругления углов. Выровняйте кнопку левой стороной к центральной направляющей и опустите её ниже текста примерно на 45 пикс.

Теперь применим несколько стилей слоя. Дважды мышкой по слою в панели слоев и используйте скриншоты ниже для настроек.

Вставим иконку Apple и изменим её непрозрачность на 30%.

Справа от иконки добавим ещё текст, настройки ниже:
Шрифт (Font): Helvetica Neue
Размер (Size): 11 px и 24 px
Стиль (Style): Bold
Интерлиньяж (Leading): 26 px
Трекинг (Tracking): -25
Сглаживание (Anti-aliasing): Crisp Чёткое
Цвет (Color): #FFFFFF

Добавим стили слоя к тексту. Воспользуйтесь настройками со скриншота.

Измените непрозрачность слоя с линией до 15%, дублируйте его, выбрав меню Слои — Создать дубликат слоя (Layer> Duplicate Layer) и нажмите кнопку ОК. Измените цвет этой линии на # 000000 (черный) и измените непрозрачность слоя со второй линией до 10%. Затем переместите чёрную линию на 1px влево от белой линии.

Последний элемент этой кнопки — значок, который указывает на Скачать. Воспользуемся инструментом Эллипс (Ellipse Tool) и нарисуем круг 25px в диаметре.

Добавьте следующие стили слоя для эллипса:

Наконец возьмите инструмент Произвольная фигура (Custom Shape Tool) и выберите стрелку (я использую форму «Стрелка 9»), нарисуйте стрелочку белым цветом 10px в ширину, разместите внутри круга.

Шаг 8. Создадим фигуру, на которой будет отображаться цена продукта. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)), радиус скругления углов 4 пикс. Прямоугольник должен перекрывать собой кнопку загрузки и быть размером 52px в высоту и любой ширины больше чем 100 пикселей.

Изменените цвет этого прямоугольника на «2B2B2B » и переместите его ниже кнопки загрузки в панели слоёв.

Обводку

Теперь мы можем добавить информацию о цене. Для этого мы создадим два отдельных текстовых поля. Для каждого будет свой стиль.
Для первого текстового поля применим следующие настройки:
Шрифт (Font): Helvetica Neue
Размер (Size): 19 px
Стиль (Style): Bold
Сглаживание (Anti-aliasing): Crisp Чёткое
Цвет (Color): #FFFFFF

Для второго текстового поля используем такие настройки:

Шаг 9. Перейдём к нижней части нашей страницы, где нам необходимо создать разделитель. Для этого мы воспользуемся той же техникой, с помощью которой делали разделитель на кнопке загрузки.
Для этого выберите инструмент Линия (Line Tool) и зажав клавишу Shift, проведём линию от левой направляющей до правой, затем изменим цвет линии на «000000» (черный).

Изменените непрозрачность этой линии до 80%, дублируйте этот слой, выбрав меню Слои — Создать дубликат слоя (Layer> Duplicate Layer) и нажмите кнопку ОК. Измените цвет этой линии на # FFFFFF» (белый) и изменить непрозрачность слоя со второй линией до 10%. Затем переместите белую линию на 1px вниз от чёрной линии.

Шаг 10. В разделе ниже разделителя строк, который мы только что создали, добавим два столбца для скриншотов и функций. Начнём со скриншотов. Выберите какой-нибудь скриншот с айфона и вставьте его, подгоните размер и расположите вблизи левой направляющей.

Выберите этот слой в панели слоев и нажмите дважды кнопку «Добавить маску», чтобы добавить векторную маску. Теперь выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)), измените радиус углов до 6px и создайте прямоугольник с размером 175x120px.

В стилях слоя добавьте прямоугольнику Обводку (Stroke), настройки на скриншоте.

Повторите эти шаги для всех ваших скриншотов и задайте им расстояние между собой 35px

Шаг 11. Нарисуем разделитель для созданных скриншотов. Проведём линию в 1 пикс. от верхнего скриншота к самому нижнему и расположим этот разделитель правее от них примерно на 55 пикс. Измените цвет линии на «FFFFFF» (белый) и установите непрозрачность до 5%.

Шаг 12. Теперь добавим текст с информацией. Позиция текста 55 пикселей от левой линии разделителя. Для текста используем следующие настройки:
Шрифт (Font): Helvetica Neue
Размер (Size): 24 px
Стиль (Style): Regular
Трекинг (Tracking): -10
Сглаживание (Anti-aliasing): Crisp Чёткое
Цвет (Color): #FFFFFF

Теперь давайте создадим список наших возможностей и поместим его под заголовком. Создайте текстовое поле и добавьте пять или шесть строчек и задайте им следующие настройки:
Шрифт (Font): Helvetica Neue
Размер (Size): 15 px
Стиль (Style): Regular
Интерлиньяж (Leading): 28 px
Трекинг (Tracking): -10
Сглаживание (Anti-aliasing): Sharp Резкое
Цвет (Color): #8d8c90

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

Шаг 13. Чтобы как то выделить список возможностей приложения, можно воспользоваться некоторыми хитростями. Сдвинем этот текстовый блок на 25px правее.

Используйте инструмент Эллипс (Ellipse Tool)с диаметром 9 пикс. и нарисуйте кружок цветом «bce086».

Добавить следующие стили слоя для этого круга:

Шаг 14. Дублируйте эти кружки в меню Слой — Создать дубликат слоя (Layer> Duplicate Layer) и разместите как на скриншоте ниже.

Шаг 15. Создайте ещё один разделитель, используя технику, которую мы применяли ранее.

Шаг 16. Теперь мы должны добавить некоторые полезные ссылки на нижней части. Сначала мы создадим четыре текстовых поля, бок о бок, которые будет содержать эти ссылки.
Начните с создания текстового поля, которое размером около 160x40px. Добавить в него текст и повторите 3 раза.

Вот пример текста, который вы можете использовать:
Вставка 1 : Следуйте @ MyCompany на Twitter для новостей и обновлений.
Вставка 2 : Для получения справки и поддержки.
Вставка 3 : Информацию о продукте.
Вставка 4 : Copyright 2011 «Моя компания», ООО.

Используйте такие настройки для текста:
Шрифт (Font): Helvetica Neue
Размер (Size): 12 px
Стиль (Style): Regular
Интерлиньяж (Leading): 20 px
Сглаживание (Anti-aliasing): Sharp Резкое
Цвет (Color): #5555552

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

Шаг 17.
Чтобы исправить нашу проблему с выравниванием, мы поместим текстовые блоки в группу под названием «Footer».
Во-первых, положение первого текстового поля 55 пикселей от левой направляющей, а последнее поле коснулось правой направляющей.

Теперь выделите четыре текстовых слоя в папке «Footer» , активируйте инструмент Перемещение (Move Tool) и нажмите кнопку Выравнивание центров по вертикали (Align vertical centers), а затем нажмите кнопку Выравнивание центров по горизонтали (Distribute horizontal centers).

Шаг 18. Теперь мы можем добавить некоторые пользовательские иконки, чтобы обозначить наши ссылки. Выберите инструмент Эллипс (Ellipse Tool (U) и создайте круг, 36px в диаметре, поместите его рядом с первым текстовым полем. Изменение цвет этого круга на «FFFFFF» (белый). Теперь выберите Слой — Растрировать слой (Layer- Rasterize Layer).

Добавим на созданный круг значок Твиттера, который можно взять

§ 01. Передаем макет бигборда 3х6 м на широкоформатную печать — Мои статьи —

---

Итак, для бигборда 3х6 м (хотя многое здесь справедливо для любых широкоформатных постеров):

1)  Оптимальный размер файла – это 3000х6000 пикселей, что соответствует разрешению 25,4 DPI при масштабе 1:1 (для пущей верности обычно округляют до 30 DPI). Грубо говоря, картинка в этом случае будет состоять из точек, размером чуть меньше 1 мм.
Иногда я позволяю себе делать макет с размером точки в 3 мм, т.е. выставляю разрешение файла 8…10 DPI зная, что эту картинку будут разглядывать не ближе, чем с 4-5 метров. У плакатов же, которые будут «работать» на близких расстояниях (начиная с 1м), я выставляю разрешение 100…125 DPI.   Все эти DPI я привожу, имея ввиду масштаб постера 1:1.
Обратите внимание! Размер файла должен быть в реальном масштабе 1:1, иначе вы можете получить из типографии, например, плакат с 10-кратным качеством, но размером в 10 раз меньшим (30х60 сантиметров) и потом оправдываться, что, мол, я же им говорил(а)! 

2)  Цветовая модель. Типографии обычно требуют, чтобы макет был в модели CMYK. (Хотя, есть нюансы и, например, на многих японских плоттерах файлы в модели RGB отпечатываются ярче и сочнее – пробуйте!). При этом цветовой профиль в файле макета должен отсутствовать (или можно, чтобы он был Default CMYK). Советую поэкспериментировать — нарушить правило – сделать цветопробу и в RGB, и ее же в CMYK. 

3) Габаритная рамка. Если забыли обозначить периметр макета черной 0,5…1,0 мм линией, то жди беды. Особенно, когда края макета – белый фон. Спасает в таких случаях лишь добросовестность и профессионализм оператора типографии, куда вы отдаете макет в печать, и эту «мелочь» он добавит за вас.

4) Еще один нюанс – черный цвет. У каждой типографии свой рецепт, но однозначно то, что если в макете есть объекты просто со 100% черного, то они будут выглядеть сероватыми, т.е. недостаточно черными, т.к. сквозь слой черной краски проступает белый материал, на котором печатают наш макет. Особенно сильно это видно на бумаге (блюбеке), т.к. краски «проваливаются» внутрь бумаги и их цвет становится белесым. Поэтому черный делают составным, т.е.  добавляют основные краски. Выглядит состав, например, так:   C62 M51 Y50 K100 (в RGB ничего с черным не делаем).

5) Еще нюанс с черным цветом: в отличие от полиграфии при выводе файла под плоттерную печать рекомендую отключить опцию «Always Overprint Black» («Всегда печатать наложение черного»), чтобы избежать появления неожиданных оттенков черного, т.е. чтобы черный цвет и его оттенки были во всех частях макета именно такими, какими вы их назначали. Вдаваться в подробности не буду, для плоттерной печати этот вопрос можно не изучать. А вот полиграфист обязан изучить тему. Неплохо написано здесь: http://www.advesti.ru/publish/prepress/290405_trepping/

6) Слои и различные альфа-каналы в файле не допускаются. Все слои должны быть соединены в один (должен быть только Background), лишние каналы кроме CMYK должны быть удалены.

7)  Формат файла чаще всего — TIFF  с применением компрессии LZW (хотя в настоящее время многие типографии принимают в форматах .eps,  .pdf,  .ai,  .cdr – как договоритесь). Есть нюанс – CorelDRAW некоторых версий некорректно создает .tif файл с компрессией (поэтому некоторые типографии требуют не применять компрессию). Выход прост – после экспорта из CorelDRAW открываем этот .tif в PhotoShop, а затем делаем Save As под этим же именем. Теперь файл прочитается у кого угодно. Если сделали все правильно, то размер файла не превысит 100 Мб.

8) Передавать готовый файл (если не часто этим заниматься) лучше всего, на мой взгляд, с использованием какого-либо файлообменника. Т.е. макет «закачать в интернет», а затем в типографию письмом отправить ссылку для скачивания. Таким образом у вас будет памятка, когда именно вы отослали макет. А звонок менеджеру зафиксирует факт передачи макета.

Если же вы часто собираетесь отправлять ваши макеты в одну-две типографии, то узнайте, как получить доступ к их фтп-серверу (у крупных типографий он обязательно есть), и закачивайте файлы непосредственно к ним. Но письмо в типографию вместе со звонком по телефону – гарантия того, что макет они получили, а вы сделали всё от вас зависящее.

9) Во избежание недопонимания со стороны типографии я рекомендую вместе с файлом макета отправлять небольшой jpg-файл c текстовым описанием задания печатникам и превьюшкой макета. Размеры, количество экземпляров, дополнительные работы, и т.д. – всё там отметьте. Чем больше пояснений, тем лучше. Потратив 10 минут на создание этой превьюшки-задания вы значительно уменьшите вероятность возникновения ошибок – как с вашей стороны, так и со стороны типографии.

Важный вопрос — получить те цвета на готовом изделии, которые ожидались. Чаще всего, те цвета, что вы видите на своем мониторе, – это не те цвета, что вы получите в отпечатанном изделии. Особенно «большая разница» по статистике замечается в области светлых тонов. Может помочь калибровка вашего монитора под конкретную типографию… об этом нужно договариваться. Но стоит знать, что «привыкнув» к цветопередаче одной типографии, вы, скорее всего, не получите аналогичный результат в другой, снова нужно будет привыкать… За чей счет – вопрос интересный, но даже у опытных людей в этом деле случаются промахи. Предвидеть результат – дорогого стоит.

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

Коротко, могу дать совет… Чтобы набраться опыта — делайте цветопробы (в крупных типографиях для частых заказчиков они бесплатны). Как их делать – планирую отдельную статью.

Итак, очень кратко:

1) Разрешение 30 DPI – для борда 3х6м; 150 DPI – для сити-лайта 1,2х1,8м.

2) Цветовая модель Default CMYK.

3) Габаритная рамка.

4) Черный цвет – составной 62/51/50/100.

5) Отключить опцию «Always Overprint Black».

6) Слои и каналы – не допускаются.

7) Формат TIFF  с компрессией LZW.

8) Фиксация факта передачи-приёма макета в типографию.

9) Превьюшка-описание задания.

Пожалуй и все, желаю удачи.

---

К списку статей

Близкие по теме материалы:

---

---

Медиа-запросы | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	4.0+	3.6+	2.0+	2.0+

Краткая информация

Версии CSS

Описание

Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.

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

Синтаксис

Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.

Табл. 1. Типы носителей и их описание

Тип	Описание
all	Все типы. Это значение используется по умолчанию.
braille	Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed	Принтеры, использующие для печати систему Брайля.
handheld	Смартфоны и аналогичные им аппараты.
print	Принтеры и другие печатающие устройства.
projection	Проекторы.
screen	Экран монитора.
speech	Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
tty	Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv	Телевизоры.

Логические операторы, применяемые в медиа-запросах

and

Логическое И. Указывается для объединения нескольких условий.

Пример. Стиль для всех цветных устройств

@media all and (color) { ... }

not

Логическое НЕ. Указывается для отрицания условия.

Пример. Стиль для всех устройств кроме смартфонов

@media all and (not handheld) { ... }

Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение

@media not all and (color) { ... }

следует понимать как

@media not (all and (color)) { ... }

а не

@media (not all) and (color) { ... }

only

Применяется для старых браузеров, которые не поддерживают медиа-запросы.

Пример. Стиль для новых браузеров

@media only all and (not handheld) { ... }

В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.

Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.

@media all and (orientation: landscape), all and (min-width: 480px) { ... }

Также при использовании операторов следует указывать скобки, чтобы менять приоритет операций.

Медиа-функции

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

Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px, наоборот, сообщает, что ширина окна больше 1000 пикселов.

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).

color (min-color, max-color)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2³ цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.

Пример 1. Стиль для цветных устройств

@media screen and (color) { /* Для цветных экранов */
  body { background: #fc0; }
}
@media screen and (min-color:3) { /* Минимум 512 цветов */
  body { background: #ccc; }
}

color-index (min-color-index, max-color-index)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет количество цветов, которое поддерживает устройство. В примере 2 показан стиль для экранов отображающих не меньше 256 цветов.

Пример 2. Цветной дисплей

@media all and (min-color-index: 256) {
 ...
}

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере 3 показано, как установить стиль для экранов с соотношением сторон 16:9 и более.

Пример 3. «Киношное» соотношение

@media screen and (min-device-aspect-ratio: 16/9) {
 ...
}

device-height (min-device-height, max-device-height)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную высоту экрана устройства или печатной страницы.

device-width (min-device-width, max-device-width)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.

Пример 4. Ширина макета

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина макета</title>
  <style>
   div {
    padding: 10px;
    background: #e8bfad;
    margin: auto;
   }
   @media screen and (min-device-width: 1600px) {
    div {width: 1500px;}
   }
   @media screen and (device-width: 1280px) {
    div {width: 1100px;}
   }
   @media screen and (device-width: 1024px) {
    div {width: 980px;}
   }
  </style>
 </head>
 <body>
  <div>
   Диабаз, формируя аномальные геохимические ряды, сменяет известняк, 
   образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов.
  </div>
 </body>
</html>

grid

Тип носителя: all
Значение: нет

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

Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em (пример 5).

Пример 5. Размер букв

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стиль для бабушкофона</title>
  <style>
   @media handheld and (grid) and (max-width: 15em) {
     body { font-size: 2em; }
   }
  </style>
 </head>
 <body>
  <p>Привет! Как дела? Как сажа бела?</p>
 </body>
</html>

height (min-height, max-height)

Тип носителя: все кроме speech
Значение: размер

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.

Пример 6. Стиль для принтера

@media print and (monochrome) { 
 body { font-family: Times, 'Times New Roman', serif; }
h2, h3, p { color: black; }
}
@media print and (color) { 
 body { font-family: Arial, Verdana, sans-serif; }
h2, h3, p { color: #556b2f; }
}

orientation

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait

Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

В примере 7 устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).

Пример 7. Использование ориентации устройства

@media screen and (orientation: landscape) { 
  #logo { background: url(logo1.png) no-repeat; }
}
@media screen and (orientation: portrait) { 
  #logo { background: url(logo2.png) no-repeat; }
}

resolution (min-resolution, max-resolution)

Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)

Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.

Пример 8. Разрешение принтера

@media print and (min-resolution: 300dpi) { 
 ...
}

scan

Тип носителя: tv
Значение: interlace | progressive

Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Тип носителя: все кроме speech
Значение: размер

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.

Пример 9. Использование max-width

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина страницы</title>
  <style>
   body { background: #f0f0f0; }
   @media screen and (max-width: 600px) {
     body { background: #fc0; }
   }
  </style>
 </head>
 <body>
  <p>Пока магма остается в камере, мусковит сингонально поднимает шток, 
  в то время как значения максимумов изменяются в широких пределах. </p>
 </body>
</html>

PPI против DPI: в чем разница?

PPI и DPI — два важных термина, которые должен знать каждый, кто работает с изображениями. Оба определяют разрешение или четкость изображения, но каждый относится к отдельному носителю, то есть цифровому по сравнению с печатным .

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

В чем разница между PPI и DPI?

–

PPI описывает разрешение цифрового изображения в пикселях, тогда как DPI описывает количество чернильных точек на печатном изображении.

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

Разрешение PPI

—

Что означает PPI ​​

PPI, или пикселей на дюйм , относится как к фиксированному количеству пикселей, которое может отображать экран, так и к плотности пикселей в цифровом изображении. Число пикселей , с другой стороны, означает количество пикселей по длине и ширине цифрового изображения, то есть размеры изображения в пикселях. Пиксели , или «элементы изображения», являются наименьшими строительными блоками цифрового изображения. Увеличьте любое изображение на своем, и вы увидите, что оно разбивается на цветные квадраты — это пиксели.

Каждый пиксель состоит из субпикселей RGB. Число пикселей описывает размеры изображения на основе количества пикселей. PPI, или плотность пикселей, описывает количество деталей в изображении на основе концентрации пикселей.

Внутри пикселей находятся субпиксели, элементы красного, зеленого и синего света, которые человеческий глаз не может видеть, потому что аддитивная обработка цвета смешивает их в один оттенок, который появляется на уровне пикселей. Вот почему PPI использует цветовую модель RGB (красный, зеленый и синий), также известную как аддитивная цветовая модель.Этого не существует в печатном виде — только в электронном отображении изображений, таких как телевизионные экраны, компьютерные мониторы и цифровая фотография.

Когда вы используете PPI?

Используйте PPI при работе с цифровыми изображениями. PPI наиболее полезен при подготовке файлов к печати (хотя DPI будет использоваться физическим принтером — подробнее см. В разделе DPI ниже). Изображение с более высоким PPI, как правило, имеет более высокое качество, потому что оно имеет большую плотность пикселей, но экспорт с разрешением 300 PPI обычно считается отраслевым стандартом качества.

Более низкое разрешение PPI приводит к меньшей детализации и пиксельному изображению Более высокое разрешение PPI обеспечивает более подробную детализацию и более четкое изображение

Поскольку увеличение PPI увеличивает размер файла, вы захотите использовать высокий PPI только при необходимости. Например, если при печати на глянцевой поверхности используется много мелких деталей, лучше рассмотреть возможность использования более высокого разрешения. Для печати изображения на холсте не требуется такое высокое разрешение, поскольку детали теряются в текстуре материала.PPI не имеет большого значения для распространения в Интернете, потому что плотность пикселей вашего монитора фиксированная. Изображение 72 PPI и изображение 3000 PPI будут отображаться на вашем экране одинаково. Именно размеры в пикселях (количество пикселей слева направо, сверху вниз) будут определять размер и детализацию вашего изображения.

Как установить или изменить разрешение PPI

В окне «Новый документ» в Photoshop вы устанавливаете разрешение пикселей на дюйм в начале.

Растровые программы (программное обеспечение, работающее с пиксельными носителями), такие как Photoshop, устанавливают разрешение PPI в самом начале, когда вы создаете документ.Вы найдете «Разрешение» в списке с другими параметрами в окне «Новый документ».

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

В Photoshop это можно сделать, выбрав Изображение> Размер изображения . В окне «Размер изображения» у вас будут параметры для изменения ширины, высоты и разрешения изображения на дюйм.Установите флажок «Resample» и установите для него «Preserve Details», чтобы выбрать, как Photoshop заполняет новые пиксели.

Окно «Размер изображения» предоставляет вам возможности для настройки разрешения в Photoshop

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

Тем не менее, лучше по возможности избегать изменения PPI в существующем образе.Процесс повторной выборки требует, чтобы Photoshop сгенерировал новые пиксели с нуля. Хотя Photoshop может считывать окружающие пиксели и делать несколько точные предположения о том, какого цвета должен быть каждый новый пиксель, компьютеры, как известно, плохо «видят» изображения так, как это могут делать люди. Таким образом, пиксели, сгенерированные компьютером, могут создавать непреднамеренные результаты на вашем изображении.

Печать на дюйм

—

Что означает DPI

DPI, или точек на дюйм, относится к значению разрешения физического принтера.Принтеры воспроизводят изображение, выплевывая крошечные точки, а количество точек на дюйм влияет на количество деталей и общее качество печати.

Сочетание точек принтера Чернила CMYK DPI описывает количество деталей в изображении на основе концентрации точек принтера.

DPI использует цветовую модель CMYK (голубой, пурпурный, желтый и ключевой / черный) для управления количеством красного, зеленого и синего света, отражающегося от белой бумаги. Это также известно как субтрактивная цветовая модель.Точки каждого цвета печатаются в виде узоров, что позволяет человеческому глазу воспринимать определенный цвет, полученный из этой комбинации. DPI является мерой этой плотности. Эти точки имеют фиксированный размер, и на разрешение влияет только количество точек на дюйм.

Когда вы используете DPI?

Когда ваш дизайн будет физически напечатан, принтер будет использовать DPI. Каждая модель и стиль принтера создает собственный уникальный DPI на основе своих настроек. Струйные принтеры обеспечивают разрешение от 300 до 720 точек на дюйм, а лазерные принтеры создают изображения от 600 до 2400 точек на дюйм.

Более высокое разрешение может означать более высокое разрешение, но размеры точек зависят от принтера.

Не существует стандартного размера или формы точки, поэтому более высокое разрешение не всегда означает более высокое качество печати. Точки одного производителя могут выглядеть так же хорошо при 1200 DPI, как точки другого производителя при 700 DPI. В книгах и журналах для воспроизведения фотографий часто используется разрешение 150 точек на дюйм, а в газетах — 85 точек на дюйм. Обратитесь в типографию или ознакомьтесь со спецификациями принтера, чтобы найти подходящий DPI для вашего проекта.

Разрешение изображения имеет значение

—

Знание того, как использовать PPI, позволит вам каждый раз создавать изображения высокого качества.А знание того, как ориентироваться в DPI, поможет вам эффективно общаться с печатными машинами и профессионалами полиграфической отрасли. Если вы не принтер, ваше основное внимание будет сосредоточено на PPI. Но важно понимать процесс физической печати, если ваша работа требует этого на регулярной основе.

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

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

Хотите, чтобы изображения в ваших дизайнерских проектах имели идеальное разрешение?

Найдите дизайнера сегодня!

Эта статья была первоначально написана Алексом Бингманом и опубликована в 2013 году. Она была дополнена новыми примерами и информацией.

DPI по сравнению с пикселями: что использовать?

Сегодня вы слышите эти фразы, которыми подбрасывает каждый — от фотографов-любителей, продавцов iPhone и самых известных в мире создателей и дизайнеров графики.Но что на самом деле означают спецификации размера изображения? А что использовать?

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

пикселей

Элементы изображения или пиксели в веб-дизайне относятся к наименьшим единицам сетки, отображающей изображение.Пиксели измеряются в пикселях на дюйм или PPI. Чем больше пикселей на дюйм, тем резче будет изображение из-за размера каждого пикселя.

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

PPI (пикселей на дюйм) важен, потому что это показатель качества изображения. Используя инструменты изменения размера изображения в программном обеспечении для редактирования фотографий, вы можете изменять размер изображения (изменять количество пикселей в документе) или изменять размер изображений (изменять фактический размер каждого пикселя в документе, но не общее количество пикселей).

В Adobe Photoshop меню «Размер изображения» позволяет изменять размер или масштабировать. Следите за количеством пикселей (верхняя часть окна) по сравнению с опцией «Resample Image» (в нижнем левом углу).

на экране и в Интернете

Веб-стандарт для изображений — 72 пикселя на дюйм. При 72 PPI изображения будут отображаться хорошо (при условии, что они хорошего качества) и не должны выглядеть пиксельными или искаженными. Помните, что ваше полноразмерное фото должно быть достаточно широким, чтобы полностью занимать кадр.(Если вы сомневаетесь, всегда увеличивайте размер фотографии.)

Подумайте, например, о своей фотографии на временной шкале Facebook. Ширина обложки составляет 851 пиксель. При 72 пикселях на дюйм ваша фотография должна быть почти 12 дюймов в ширину, чтобы заполнить пространство без пикселизации.

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

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

для печати

Хотя PPI может помочь вам определить качество изображения, на самом деле он не имеет ничего общего с фактической печатью. Для спецификаций печати более уместно понимание количества точек на дюйм.

точек на дюйм

DPI означает количество точек на дюйм. Этот термин был разработан как метод объяснения качества и разрешения печати. Когда изображение печатается, оно состоит из сотен тысяч крошечных точек, которые накладываются чернилами каждого цвета. Чернила смешиваются в каждой точке, образуя широкий спектр видимого цвета.Число, связанное с DPI, — это количество напечатанных точек на каждом дюйме. Чем выше DPI, тем лучше и плавнее выглядит изображение.

Однако все чаще люди используют DPI для обозначения всего и часто путают DPI с пикселями или PPI. (Программа для работы с фотографиями также может усугубить эту путаницу, используя этот термин в диалоговых окнах.) Но если вы не печатаете свой проект, DPI не должен вызывать особого беспокойства.

на экране и в Интернете

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

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

для печати

Вот где проявляется важность DPI. Каждый принтер указывает необходимое разрешение для заданий печати — 300 DPI является типичным разрешением для печати на бумаге.Для вашего окончательного проекта важно соответствовать спецификациям DPI, чтобы принтер не увеличивал или не уменьшал ваш дизайн, что могло бы изменить внешний вид и качество конечного продукта.

DPI также используется при преобразовании печатного объекта в цифровой формат. Чем выше разрешение при сканировании изображения, тем более высокое качество будет отображаться на экране. Как правило, качество фотографий соответствует сканированию с разрешением 200 точек на дюйм при фактическом размере. Рассмотрите возможность использования более высокого разрешения сканирования, если вы планируете увеличить или перепечатать изображение.

Мегапикселей

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

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

Заключение

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

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

Общие сведения о разрешении устройств для веб-дизайна и разработки | by Simone Viani

Когда выходит новое (мобильное, настольное, вы выбираете) устройство, поставщик обычно подчеркивает новое невероятное и умопомрачительное разрешение экрана и плотность пикселей (PPI), которые они могли поставлять вместе с продуктом.

Это здорово, я имею в виду, что экран 5k — это действительно круто. Но это маркетинг. Если вы, как и я, работаете в области веб-дизайна и разработки, то знаете, что за термином «разрешение» стоит нечто более сложное, чем большое число.

Так что же такое разрешение на самом деле?

Что ж, мы все слышали о пикселях, самом маленьком физическом элементе цифрового устройства отображения, который может различить глаз (который на самом деле состоит из «субпикселей» — красных, зеленых и синих световых элементов, которые человеческий глаз не может видеть из-за того, как аддитивная обработка цвета работает с человеческим глазом). Они имеют фиксированный размер, и разные устройства реализуют их в разных формах и размерах.

Разрешение (тоже) в пикселях. В частности, для поставщиков это те сладкие числа, которые определяют максимальное количество пикселей, которое может отображаться на мониторе, выраженное как (количество пикселей по горизонтали) x (количество пикселей по вертикали).Например, экран Full HD имеет разрешение 1920 × 1080 пикселей (или 1080 × 1920, если вы смотрите на мобильное устройство в портретном режиме).

Плотность пикселей или PPI (не путать с DPI, который используется в печати) указывает количество пикселей на дюйм на экране. Новый iPhone X от Apple имеет 458 пикселей на дюйм, а первый iPhone — 163 пикселей на дюйм. Экран Samsung Galaxy S8 составляет 568 пикселей на дюйм.

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

Разработчики

Начнем с разработчиков. Каждый раз, когда они запускают проект, одна из их основных проблем — знать типы устройств, для которых они разрабатываются, и их решения, потому что написание кода, особенно в адаптивной среде, может стать беспорядочным, если вы не знаете конечный носитель. Итак, им нужен, среди прочего, список разрешений, выраженный в пикселях.Но не совсем пиксели, о которых мы говорили ранее, им нужно CSS-пикселей , абстракция, созданная W3C специально для веб-разработки, которая не имеет ничего общего с реальной плотностью пикселей устройства, а это фактические аппаратные пиксели на дисплее. Это тип пикселей, которые используются в объявлениях CSS, например

#container {width: 800px;}

До того, как появились дисплеи с высокой плотностью пикселей, разработчики (в том числе дизайнеры) были счастливы, потому что 1 CSS-пиксель = 1 аппаратное обеспечение. pixel, поэтому эти 800 пикселей #container фактически были сопоставлены с 800 пикселями экрана.Теперь, когда дисплеи с высокой плотностью изображения стали обычным явлением, необходимо учитывать новый параметр — коэффициент пикселей , который используется в качестве множителя, чтобы определить, сколько аппаратных пикселей соответствует одному пикселю CSS.

Возьмем, к примеру, iPhone 7.

Apple сообщает нам, что у него разрешение 750 × 1334 пикселей и значение PPI 326. Если бы мы создали адаптивный веб-сайт, оптимизированный для этого разрешения, мы, вероятно, использовали бы мультимедиа. query *, и именно тогда мы понимаем, что что-то с этими числами (750 и 1334) неверно (или CSS не работает… вероятно, ваше первое предположение, если вы новичок-разработчик).Конечно, в этих цифрах нет ничего плохого, Apple не лжет и CSS не сломан. Просто нужно учитывать разные цифры.

iPhone 7 (и более или менее каждый современный смартфон) имеет экран высокой плотности (Apple называет их дисплеями Retina) с соотношением пикселей 2,0 или, другими словами, два пикселя экрана iPhone7 равны одному пикселю CSS. Samsung Galaxy S8 + имеет потрясающее соотношение пикселей 4,0, что обеспечивает впечатляющее разрешение устройства 1440 × 2960 пикселей. Между прочим, я пишу значения соотношения пикселей в десятичной системе счисления, потому что, кроме Apple (которая использует только целочисленные соотношения пикселей), другие поставщики реализуют соотношение пикселей в десятичной форме, например, 2.4 для Microsoft Lumia 1020 или 1,5 для Samsung Galaxy S.

Как показывает опыт, мы имеем:

CSS Pixel = Device Pixels / Device Pixel Ratio

Наш медиа-запрос работает правильно должен ссылаться на пиксели css, поэтому эти 750 и 1334 становятся 375 и 667 соответственно. Если мы сравним их с пикселями физического экрана, пиксели CSS в основном являются «эталонными пикселями» или, другими словами, «виртуальными».

Дизайнеры

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

Это означает, что если вы разрабатываете страницу с шаблоном рабочего стола шириной 1280 пикселей и мобильным шаблоном шириной 320 пикселей, вы все равно должны предоставлять изображения (значки, вероятно, должны быть в векторном формате, но это уже другая история…), учитывая соотношение пикселей ваши целевые устройства.

Итак, если вы обслуживаете экраны с соотношением пикселей 2, изображение главного героя вашего дизайна шириной 320 пикселей также должно быть экспортировано @ × 2 или 640 пикселей.

Вот довольно полный список номеров (мобильных) устройств: https: // mydevice.io / devices /

Пример понижающей дискретизации, применяемой к отображению пикселей физического устройства

О, есть небольшое предостережение!

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

Для некоторых устройств физические пиксели экрана не соответствуют фактическим отображаемым пикселям, поэтому формула CSS Pixel = Device Pixels / Device Pixel Ratio не (всегда) верна, или, с точки зрения непрофессионала, эта формула верна, если мы только рассмотреть визуализированные пиксели.

Пример понижающей дискретизации, применяемой к отображению физических пикселей

Для тех устройств, которые применяют понижающую дискретизацию для отображения фактических аппаратных пикселей экрана, доставка ресурсов с оптимальным разрешением является немного более сложной задачей, поскольку вы не полагаетесь исключительно на значение отношения пикселей. Фактически, если мы рассмотрим мобильные продукты Apple, только новейший iPhone X имеет реальное соотношение пикселей @ × 3, в отличие от всех iPhone семейства Plus, у которых применено уменьшение размера 1,15 (и для простоты я Я не рассматриваю режим Display Zoom).

файлов дизайна с разрешением 300 пикселей на дюйм

Что такое PPI?

PPI, или пикселей на дюйм, — это количество пикселей, которые печатаются (по горизонтали и вертикали) в строке в 1 дюйм. Следовательно, квадратный дюйм отпечатка при 300 PPI будет состоять из 90 000 пикселей. Чем выше PPI, тем четче будет ваше изображение, потому что пиксели будут более плотными. Таким образом, модель с более высоким PPI будет выглядеть лучше из-за более высокой четкости изображения.

300 PPI: волшебное число

300 PPI считается идеальной плотностью пикселей для печати, потому что при 300 PPI пиксель едва различим для человеческого глаза.Плотность пикселей выше не требуется, потому что человеческий глаз не заметит разницы. Чем ниже, тем легче человеческому глазу увидеть пиксели, потому что они будут больше. Изображение называется пикселизированным, если пиксели настолько различимы, что изображение выглядит нежелательным из-за слишком низкого разрешения. Отпечатки с более низким PPI не будут выглядеть так хорошо из-за этой пикселизации.

Убедитесь, что ваши программы проектирования установлены на 300 PPI, прежде чем приступать к проектированию

Часто программы проектирования не имеют настройки по умолчанию на 300 PPI.Например, в Adobe Photoshop, если вы начинаете новый проект, значение по умолчанию для разрешения составляет 72 PPI. Если вы подождете, пока дизайн уже не будет готов, чтобы перейти на 300 точек на дюйм, дизайн будет просто преобразован с повышением частоты до 300 пикселей на дюйм, но все равно будет печататься так, как если бы он был разработан с разрешением 72 пикселей на дюйм.

Исходные изображения должны быть 300 пикселей на дюйм: повышающее преобразование не в счет

Очень важно, чтобы изображения, которые вы создаете в своих файлах, после обрезки и изменения размера имели размер 300 пикселей на дюйм. В качестве примера предположим, что у вас есть изображение размером 1000 × 1000 пикселей, и вы хотите, чтобы оно занимало область размером 5 x 5 дюймов на отпечатке.1000 пикселей более 5 дюймов — это всего лишь 200 пикселей на дюйм, или 200 пикселей на дюйм, что ниже рекомендованных 300 пикселей на дюйм. Даже если ваш дизайн может быть установлен на 300 PPI, а программа преобразует изображение с повышением до 1500 × 1500, чтобы соответственно было 300 PPI, это не имеет значения, потому что исходное изображение все еще было только 1000 × 1000. Наиболее частой причиной этой проблемы является получение изображений и логотипов из Интернета.

Дизайн при 300 PPI, и ваши отпечатки будут выглядеть профессионально

Если вы проектируете с разрешением 300 PPI, ваши отпечатки будут выглядеть очень профессионально благодаря разрешению и четкости.Если ваш дизайн ниже 300 PPI, вы рискуете, что он будет выглядеть пиксельным. Дизайнер должен понимать, что реальный дизайн является наиболее важным фактором при печати высококачественных профессиональных отпечатков, а дизайн с плотностью 300 пикселей на дюйм — один из важнейших факторов хорошего дизайна.

Что нужно знать для печати

При подготовке проекта к печати одним из главных соображений при проектировании должно быть разрешение. Это связано с тем, что вам нужно, чтобы ваши изображения, текст и PDF-файл имели разрешение 300 dpi или выше, чтобы ваш отпечатанный фрагмент не подвергался риску быть нечетким или нечетким после печати.В PrintingCenterUSA мы прилагаем все усилия, чтобы информировать наших клиентов об изображениях с низким разрешением во время процесса проверки вашего проекта, однако предварительная осведомленность поможет вам сэкономить время и деньги на вашем проекте. Итак, давайте углубимся в то, что вам нужно знать!

Запросить бесплатный образец пакета : Подробнее

1. Что такое разрешение?

Разрешение относится к деталям изображения. Чем выше разрешение, тем больше деталей.Чем ниже разрешение, тем меньше деталей. Разрешение изображения измеряется в точках на дюйм и PPI. DPI означает количество точек на дюйм. PPI означает количество пикселей на дюйм.

2. В чем разница между DPI и PPI?

НЕ подчеркивайте разницу между ними. DPI — это количество точек на дюйм в распечатанном изображении. PPI означает количество пикселей на дюйм в цифровом изображении. Итак, технически это PPI, пока у вас не будет физически напечатанного изображения, затем он становится DPI и наоборот.Однако пиксели и точки в значительной степени взаимозаменяемы. Изображение с разрешением 300 пикселей на дюйм будет по-прежнему изображением с разрешением 300 точек на дюйм. Оба они относятся к количеству единиц в квадратном дюйме изображения.

3. Мой проект четко виден на моем экране. Почему ты говоришь мне, что у него низкое разрешение?

и

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

В нашем все более цифровом мире мы проводим большую часть дня, глядя на свои смартфоны, планшеты, компьютеры и телевизионные экраны. Мы сделаем снимок на свой мобильный телефон, загрузим его в наши учетные записи в социальных сетях и отправим SMS своим друзьям. Но что общего у всех этих устройств, на которых вы публикуете изображения? Что ж, это все цифровые экраны, которые считаются устройствами с низким разрешением. Это означает, что изображения не обязательно должны быть с таким высоким разрешением, чтобы они были четкими на экране.Поскольку для четкости они не должны быть высокого разрешения, их не нужно сохранять и выгружать с высоким разрешением.

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

Как преобразовать RGB в CMYK : Подробнее

4.Почему мои изображения не распечатываются четкими и четкими?

Цифровые изображения, которые вы видите ежедневно, обычно имеют разрешение от 72 до 100 точек на дюйм. Изображения, которые вы видите, когда проявляете пленку или открываете книгу с картинками, имеют разрешение 300 PPI или выше. Это связано с тем, что печатное изображение требует гораздо большего количества деталей на дюйм, чтобы продемонстрировать четкость. Вот несколько сценариев, которые могут привести к тому, что ваши изображения (даже если они изначально были высокого разрешения) будут низкого разрешения:

• Загружено с веб-сайта или Google: Изображения, найденные в Интернете, обычно имеют меньшее разрешение 72–100 dpi, чтобы ускорить загрузку.
• Загружено с веб-сайта фотографа: Эти изображения, скорее всего, были сохранены с минимальным возможным разрешением dpi, чтобы люди не могли украсть и воспроизвести изображения фотографа.
• Фотография, отправленная по электронной почте: Иногда, когда вы отправляете фотографию по электронной почте без обеспечения сжатия без потерь, по умолчанию используется оптимизированный размер электронной почты. Это фактически сжимает размер вашего изображения.
• Сохранено из Instagram: Размер изображения Instagram составляет максимум 1080 пикселей в ширину при 72 точках на дюйм.Это соответствует изображению шириной 3,6 дюйма и разрешением 300 точек на дюйм. Поэтому, если размер вашего изображения в печатном проекте превышает 3,6 дюйма, оно будет иметь низкое разрешение.
• Сохранено из документа Word: Если изображение сохраняется и отправляется вам в текстовом документе, а затем копируется и вставляется в файл проекта, то после печати оно почти всегда будет пикселизированным.

Контрольный список в формате PDF для печати : Подробнее

5. Что я могу сделать, чтобы мои изображения, текст и PDF-файл были в высоком разрешении?

Когда дело доходит до разрешения, дело не только в унынии и гибели.Уловка в том, чтобы использовать правильные инструменты! Вот несколько советов, которые помогут нам добиться четкой печати проекта:

• Используйте хорошую камеру: Несмотря на то, что камеры сотовых телефонов быстро становятся все более и более высоким разрешением, все же безопаснее использовать камеру, предназначенную для печати конечного продукта. Недорогая «наведи и снимай» вполне подойдет, но мы рекомендуем зеркалку для получения более качественного изображения в целом. Это предоставит вам необработанный файл с очень высоким разрешением, который вы можете редактировать, а затем уменьшать до желаемого размера для вашего проекта.
  
• Знайте свои размеры: Вы хотите, чтобы ваше изображение было 300 dpi при желаемых размерах в вашем проекте. Так что, если ваше изображение будет размером 11×17 дюймов, оно должно иметь разрешение 300 dpi и 11×17 дюймов. Это сделает размер пикселя 5100 x 3300. Если вы просто хотите, чтобы ваше изображение представляло собой квадратную миниатюру размером 1 дюйм, вам понадобится изображение с разрешением 300 dpi и размером 1×1 дюйм. Это сделает размер пикселя 300 x 300.
• По возможности используйте векторные изображения: Векторная графика и текст очень полезны при печати.Держитесь подальше от растрированного текста или графики (например, изображения, сохраненного в формате .jpg) и используйте векторы. Вы можете использовать векторы в таких программах Adobe Suite, как Illustrator, Photoshop и InDesign. Векторная графика масштабируется до любого размера без потери четкости, поэтому вы можете понять, почему она может быть полезным для вашего проекта. Если вы используете векторную графику, вы ДОЛЖНЫ сохранять файл с векторами как PDF, а не JPEG. Это приведет к растрированию текста и потере его масштабируемости.
• Используйте программы Adobe Suite: Эти программы позволяют вам легко проверять точное разрешение изображений в вашем проекте И вы можете сохранять многослойный файл PDF с минимальным сжатием или без него.При использовании таких программ, как Word и Publisher, вы зависите от настроек разрешения и сжатия по умолчанию, которые могут снизить четкость вашего изображения.
• Don’t Over Edit: Как бы весело ни было играть с фильтрами и другими настройками, такими как контраст и насыщенность, чем больше вы редактируете изображения, тем больше информации вы теряете в процессе. Так что будьте осторожны!

• Использование стоковых изображений и графических сайтов: Веб-сайты, такие как Unsplash, предлагают красивые изображения с высоким разрешением, которые можно бесплатно загрузить.Другие компании, такие как Shutterstock, продают изображения и векторную графику с высоким разрешением. Хотя вы, вероятно, не хотите создавать целый проект из изображений других людей, эти веб-сайты являются отличным активом, который можно заполнить в случае необходимости.

20 сайтов бесплатных фотографий для печати : Подробнее

6. Могу ли я превратить свое изображение с разрешением 72 dpi в изображение с разрешением 300 dpi?

Это трудный нет. Хотя вы можете изменить размер изображения с 72 dpi до 300 dpi, вы фактически не добавите никаких деталей к своему изображению, и оно все равно будет печататься с пикселями. Размер можно только уменьшить, но не увеличить (как показано ниже). Вот почему наличие большого файла необработанного изображения или масштабируемой векторной графики является таким преимуществом в процессе печати.

7. Будет ли PrintingCenterUSA печатать мой проект как есть?

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

Найдите размеры элемента веб-страницы: TechWeb: Boston University

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

Если вы используете стандартную тему Flexi…

1. Ширина области содержимого составляет 550 пикселей во всех стандартных темах Flexi, в которых используется «средний» вариант макета.

Если вы используете собственную тему…

Хром

1. Используя браузер Chrome , щелкните правой кнопкой мыши или щелкните мышью в любом месте области содержимого и выберите Проверить элемент .

   В Chrome щелкните правой кнопкой мыши (или Ctrl + щелчок) в области содержимого и выберите «Проверить элемент», чтобы открыть инспектор элементов.

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

   Найдите область содержимого в инспекторе элементов. Он будет выделен синим цветом.

3. Вы увидите всплывающую подсказку рядом с выделением. Первое число — это ширина.

   Ширина элемента будет первым числом в желтой подсказке.

Safari

1. Сначала необходимо включить панель инструментов разработчика в браузере. Сделать это:
   1. Откройте Safari Preferences (Mac щелкните Safari и перейдите к Preferences. PC щелкните File и перейдите к Preferences )
   2. Щелкните вкладку Advanced (шестеренка справа)
   3. Выберите Показать меню разработки в поле строки меню в нижней части этой панели.
   4. Закройте окно настроек
2. Щелкните правой кнопкой мыши / щелкните правой кнопкой мыши в любом месте области содержимого и выберите Проверить элемент .
3. В новом окне, которое появляется в нижней части браузера, перемещайте указатель мыши внутри кода, пока не увидите выделенную область содержимого (обычно синего цвета).
4. Вы увидите всплывающую подсказку рядом с выделением. Первое число — это ширина.

Firefox

1. Щелкните правой кнопкой мыши / щелкните правой кнопкой мыши в любом месте области содержимого и выберите Проверить элемент .
2. В новом окне, которое появляется в нижней части браузера, нажмите кнопку, которая выглядит как курсор мыши, переходящий в квадрат.
3. Включив инструмент Select Element , наведите указатель мыши на свой сайт. Вы заметите, что вокруг элементов на странице появляются пунктирные линии. Найдите область содержимого и щелкните, чтобы сфокусироваться на ней.
4. Снова в нижнем окне щелкните Box Model справа.
5. Будут показаны ширина и высота. Первое число — это ширина.

Internet Explorer 8 и 9

1. Нажмите F12 , чтобы открыть Developer Tools.
2. Щелкните значок белой стрелки в верхнем левом углу окна «Инструменты разработчика», которое появляется в нижней части экрана.
3. Выбрав этот инструмент, наведите указатель мыши на разные части вашего сайта. Найдите столбец области содержимого и щелкните. Вы должны увидеть тонкую сплошную синюю рамку.
4. Вернитесь на панель Developer Tools , щелкните Layout справа.
5. В центре синих прямоугольников указаны размеры области содержимого. Первое число — это ширина.

Лучшее разрешение экрана и печати

Для наилучшего качества изображения ваши изображения должны быть 355 PPI (пикселей на дюйм).

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

Разрешение печати (или количество пикселей, необходимое для удовлетворительного отображения изображения с чернилами на бумаге) намного выше — для большинства принтеров требуется разрешение 300 PPI .В Modern Postcard у нас более высокий линейный экран, чем у обычного принтера, поэтому мы просим установить оптимальное разрешение изображения на уровне 355 PPI.

Взгляните на следующий пример:

Изображение выше будет отлично печатать с разрешением 355 ppi…… но будет плохо печатать с разрешением ниже 300 ppi!

Q: Хорошо, я понимаю, что низкое разрешение — это плохо. Могу ли я просто изменить изображение с разрешением 100 пикселей на дюйм в Photoshop на 355 пикселей на дюйм, изменив число?

A: Не совсем так. Когда вы «меняете число» с низкого разрешения на 355 ppi, вы на самом деле не решаете основную проблему.Это называется интерполяцией. Интерполяция означает, что вы просите компьютер вычислить пиксели, которых нет. Компьютеры не могут добавлять новые данные для повышения резкости изображения, они могут добавлять только пиксели, которые «заполняют пробелы». В итоге вы получите размолвку с разрешением 355 пикселей на дюйм, но очень, очень размытую.