ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов
Справочный материал по основным языкам программирования и верстки сайтов.
Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.
Использование веб-редактора Adobe Dreamweaver в разработке сайтов.
Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.
Разработка веб сайтов под «ключ».
Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.
Веб-инструмент
Веб-мастерская
Веб-услуги
Веб-графика
Веб-ресурсы
Посмотрите в Google
Подписка
Подпишитесь на получение самых последних новостей и статей, с уведомлением по E-mail.
Опрос
Преобразование параметров изображения
Нередко возникает необходимость преобразовать все изображение целиком по основным его параметрам. В любой момент мы можем поменять цветовую модель, изменить фактический размер, повернуть, выполнить кадрирование и т. д.
Замена цветовой модели. Это можно сделать в выпадающем меню Изображение, подменю Режим. Здесь содержатся три основные цветовые модели: RGB, CMYK, Грации серого.
Скажем, вам нужно отреставрировать отсканированную черно-белую фотографию. Как правило, со временем снимки желтеют, и в режиме RGB сохранится этот лишний желтоватый оттенок. Переведя объект в режим модели Градации серого, мы отсечем все лишние цвета, восстановив истинный цвет оригинала. При выборе пункта Грации серого на экране появится вопрос:
Отвечаем: «Растрировать», —появится следующее окно с вопросом:.
Отвечаем: «Выполнить сведение». Появится следующий вопрос:
Отвечаем «Отменить» (Удалить).
При этом информация о цвете утрачивается — мы лишаемся возможности редактировать эту фотографию в цвете. Не поможет и обратный перевод в режим RGB — фотография все равно останется черно-белой.
Пункт Создать дубликат выпадающего меню Изображение позволяет продублировать текущее изображение в его нынешнем состоянии. Мы получим два идентичных изображения, которые могут пригодиться для сравнения, например, двух преобразований на одном изображении.
Чтобы изменить размер изображения и его разрешение после создания, надо выбрать пункт Размер изображения в выпадающем меню Изображение.
У нас появится окно:
Тут можно поменять размер изображения, выразив его в пикселях или в процентах от прежнего размера (Размерность), отследить и задать размер будущего печатного оттиска (Размер печатного оттиска) и поменять разрешение (Разрешение).
Галочка Сохранять пропорции позволяет не сбить пропорции изображения при изменении его длины или ширины. Установив необходимые параметры в этом окне, нажимаем OK.
Если надо изменить размеры холста, на который нанесено изображение, в выпадающем меню Изображение выбираем пункт Размер холста.
Появляется окно Размер холста.
При помощи параметров Ширина и Высота, указываем новый размер холста. Справа от этих параметров устанавливаем единицы измерения. Наиболее употребительные — сантиметры и пиксели.
Параметр Расположение дает возможность указать, в какую сторону «развернется» холст при увеличении. Щелкните по центру крайнего правого квадратику, и стрелки укажут: налево.
Установив необходимые размеры холста, нажимаем OK.
Опция Попиксельная пропорция в выпадающем меню Просмотр позволяет указать соотношение длины и высоты пикселей, из которых состоит изображение.
Стандартное значение — Квадрат — означает, что изображение состоит из пикселей-квадратиков. Если выбрать в пункте Анаморфный 2:1, то длина будет относиться к высоте как 2:1. Количество пикселей не изменится, но изображение по высоте «вырастет» вдвое.
В подменю Вращение изображения выпадающего меню Изображение имеются следующие опции:
- 180° — повернуть холст на 180°;
- 90° по часовой — повернуть на 90° по часовой стрелке;
- 90° против часовой — повернуть на 90° против часовой стрелки;
- Произвольно — повернуть холст на произвольно заданный угол;
- Отразить холст по горизонтали — зеркально отображает холст по горизонтали;
- Отразить холст по вертикали — зеркально отображает холст по вертикали.
Последние две операции отображают весь холст целиком. При необходимости отобразить лишь отдельные элементы или слои следует воспользоваться уже рассмотренными трансформациями зеркального отображения.
Пункт Кадрировать в выпадающем меню Изображение доступен лишь при наличии какой-либо выделенной области.
Это средство аналогично инструменту Рамка, но позволяет кадрировать области произвольной формы, выделенные при помощи любого инструмента.
Создание изображений для видео
Можно создавать изображения с различными пропорциями, чтобы они правильно отображались на таких устройствах, как мониторы. Для компенсации масштабирования при встраивании окончательного изображения в видео можно выбрать определенный параметр видео (в диалоговом окне «Новый»).
Зарезервированные зоны
Стиль «Фильмы и видео» также создает документ с неотображаемыми направляющими, отмечающими границы зарезервированных областей титров и действия. С помощью параметров меню «Размеры» можно создавать изображения для конкретных систем видео: NTSC, PAL или HDTV.
Зарезервированные области удобны для редактирования телепередачи или видеопленки. Большинство потребительских телеприемников использует процесс, который называется «забег развёртки» и который отсекает внешние края картинки, позволяя увеличивать центральную ее часть. Размер «забега развёртки» зависит от типа телевизора. Чтобы картинка помещалась в область отображения большинства телеприемников, удерживайте текст в зарезервированной области титров, а все другие важные элементы — в зарезервированной области действия.
A. Зарезервированная область действия (внешний прямоугольник) B. Зарезервированная область титров (внутренний прямоугольник)
Если создается веб-содержимое или содержимое для компакт-дисков, границы зарезервированных областей титров и действия неприменимы к проекту, поскольку на этих носителях отображается все изображение.
Параметры предварительного просмотра
Облегчить создание видео позволяет режим просмотра «Коррекция пикселного форматного соотношения», в котором изображения выводятся с заданным соотношением. Для более точного предварительного просмотра предусмотрена также команда «Просмотр видео», позволяющая выполнить немедленный предварительный просмотр на таком устройстве отображения, как монитор. Чтобы воспользоваться этой функцией, необходимо, чтобы устройство отображения было подключено к компьютеру через порт FireWire (IEEE 1394). См. также раздел Предварительный просмотр документа на мониторе. Дополнительные сведения о FireWire (IEEE 1394) см. на веб-сайте Apple.
Другие замечания
Как Adobe After Effects, так и Adobe Premiere Pro поддерживают созданные в Photoshop PSD-файлы. Однако, если для редактирования фото- и видеоматериалов используются другие приложения, необходимо учитывать следующие замечания при создании изображений для видео.
Некоторые программы редактирования видео могут импортировать отдельные слои только из многослойного PSD-файла.
Если файл имеет прозрачность, некоторые программы редактирования видео ее сохраняют.
Если в файле используется маска слоя или несколько слоев, иногда лучше не сводить слои, а включить в документ сведенную копию файла в формате PSD для повышения обратной совместимости.
Соотношение сторон
Кадровые пропорции определяют соотношение ширины и высоты в размерности изображения. Например, DV NTSC имеет кадровую пропорцию 4:3 (то есть 4 по ширине и 3 по высоте), а обычный широкоэкранный кадр имеет соотношение сторон 16:9. Некоторые видеокамеры могут выполнять съемку с разными пропорциями кадра. Множество камер с поддержкой широкоэкранного режима используют пропорции 16:9. Многие фильмы снимались с еще более широкой пропорцией.
Попикселная пропорция определяет соотношение ширины и высоты одного пиксела кадра. В разных видеостандартах применяются различные пропорции пиксела. Например, многие компьютерные стандарты видео определяют пропорцию 4:3 как 640 пикселов в ширину на 480 пикселов в высоту, что подразумевает квадратные пикселы. Компьютерные видеопикселы в этом примере имеют попикселную пропорцию 1:1 (квадрат), в то время как видеопикселы DV NTSC имеют пикселное форматное соотношение 0,91 (не квадрат). Всегда прямоугольные DV-пикселы ориентированы вертикально в видеосистемах NTSC и горизонтально в видеосистемах PAL.
Если отобразить прямоугольные пикселы на мониторе с квадратными пикселами без изменения, изображения будут выглядеть искаженными, например, круги будут выглядеть как овалы. Однако при телевещании изображения будут выглядеть правильно, поскольку на телеэкранах используются прямоугольные пикселы.
При копировании и импорте изображений в документ с неквадратными пикселами, изображения автоматически преобразуются и масштабируются в попикселную пропорцию документа. Изображения, импортированные из Adobe Illustrator, также масштабируются правильно.
A. Изображение формата 4:3 с квадратными пикселями выводится на компьютерный монитор с квадратными пикселями с соотношением сторон 4:3. B. Изображение формата 4:3 с квадратными пикселями правильно выводится на телевизионный экран с неквадратными пикселями с соотношением сторон 4:3. C. Изображение формата 4:3 с квадратными пикселами неправильно выводится на телевизионный экран с неквадратными пикселами в пропорции 4:3.
Как создать документ (изображение) в фотошопе
Прежде чем бросаться с головой во все инструменты, панели, команды и фильтры фотошопа, каждому начинающему пользователю программы нужно для начала выучить сегодняшний урок. Я имею ввиду самый первый шаг на пути изучения этой программы — как создать документ (изображение) в фотошопе.
Чтобы начать пользоваться фотошопом, должна быть открыта картинка или создан чистый лист. О том как открыть уже существующую картинку или фотографию вы вы узнаете в этой статье. Сейчас подробно остановимся на всех деталях создания картинки (документа) в фотошопе с чистого листа.
Вообще, по-научному, в фотошопе принято говорить Создать документ, но в обиходе все же под этим подразумевается создание изображения.
Итак, чтобы создать картинку в фотошопе с чистого листа, нужно перейти в меню Файл и выбрать команду Создать или воспользоватся сочетанием клавиш Ctrl+N .
После этого откроется диалоговое окно «Новый», в котором вы увидите обилие различных настроек.
Разберемся со всеми предлагаемыми настройками
Имя
Придумайте любое имя для вашей картинки (по умолчанию – «Без имени -1»). Оно будет использоваться при сохранении файла, а также отображаться в наименовании вкладки на одноименной панели.
Набор
Это поле по своему принципу действия напоминает команду Управление наборами — она предоставляет возможность выбрать сохраненные пользовательские настройки или набор параметров установленный по умолчанию.
Суть в том, что в этом меню можно выбрать уже ранее сохраненные настройки документа. Это полезная команда, когда вам нужно часто использовать одни и те же параметры документа (его размер, разрешение, цветовой режим или фон), но при этом вы не хотите все эти числа хранить в голове и тратить время на их постоянный набор.
Один раз введя все настройки, нажмите кнопку Сохранить набор параметров , расположенную в правой части окна.
Затем появится еще одно окно — «Набор параметров нового документа», в котором можно присвоить любое имя данному набору.
Обратите внимание на галочки. Используйте их, чтобы указать фотошопу, какие настройки следует запомнить. При создании нового документа программа использует их из последнего созданного вами нового документа. Например, если вы не включили цветовой профиль, программа установит для вашего нового изображения текущий активный цветовой профиль.
Размер, Ширина и Высота
По умолчанию, при создании документа стоит набор «Заказная». Это означает, что вы сами можете ввести какую ширину и высоту документа хотите получить. При этом параметр Размер не активен, то есть его нельзя изменить. Но стоит выбрать из выпадающего списка наборов что-нибудь из стандартных, как этот параметр сразу станет активен, причем для каждого из наборов будет свои параметры размера.
Например, я выбрал набор Международные форматы бумаги. Параметр Размер стал активным и теперь из его выпадающего списка я могу выбрать такие размеры:
Обратите внимание, что в полях Ширина и Высота вы также можете выбрать в каких единицах должно измеряться изображение. Фотошоп способен измерить размер холста в пикселях, дюймах, сантиметрах, миллиметрах, пунктах, пиках и колонках.
Самой популярной единицей измерения считается пиксели, любые уроки по фотошопу будут ссылаться именно на эту единицу измерения. Для картинок, предназначенных для печати, обычно выбирают сантиметры, миллиметры или дюймы. Колонки хороши при создании изображения, предназначенного для программ предпечатной подготовки (Adobe InDesighn), где изображение должно быть вписано в определенное число колонок.
Программа предполагает, что вы захотите использовать одну и ту же единицу измерения для измерения ширины и высоты, так что программа автоматически меняет оба поля при настройке одного.
Если вам действительно нужно работать с различными единицами измерения, удерживайте клавишу Shift при выборе второй единицы измерения, чтобы игнорировать второе поле.
Разрешение
Это поле определяет количество пикселов на дюйм или сантиметр документа. В документах с высоким разрешением в одном дюйме содержится больше пикселов, чем в документах с низким разрешением такого же размера.
При создании изображения, которое будет просматриваться только на экране (в окне браузера и тп.), введите значение 72 пикселя на дюйм. Если вы собираетесь распечатать изображение дома, установите разрешение не менее 150 пикселов на дюйм . Если документ будет отправлен на профессиональный принтер, поставьте 300 пикселов на дюйм.
После того, как будут введены значения в поля Ширина, Высота и Разрешение, фотошоп вычислит размер файла и отобразит данное значение в нижнем правом углу окна.
Чем больше размер изображения и его разрешение, тем больше будет в итоге весить файл.
Цветовой режим
Вкратце, цветовой режим влияет на количество используемых оттенков цветов, начиная от двухцветной палитры (черное и белое) и заканчивая стандартной многомиллионной палитрой цветов.
Правее есть другое поле — битовая глубина. Она определяет, сколько цветовой информации содержит данное изображение. Чем больше битовая глубина, тем больше цветов может отображаться в изображении. Узнайте подробнее о том, что такое битовая глубина.
Содержимое фона
В этом поле можно установить цвет стартового фона документа. Из раскрывающегося списка можно выбрать три варианта:
- Белый. Этот цвет фона установлен в фотошопе по умолчанию, то есть, если вы ничего не будете менять, то новая картинка будет создаваться с белого листа.
- Цвет фона. На панели инструментов есть индикатор основного и фонового цветов. Тот цвет, что стоит в квадратике фонового цвета, и будет стартовым фоном вашего нового документа.
- Прозрачный. Этот параметр позволяет начать создание картинки с прозрачного фона, то есть не содержащего не единого пикселя цвета. Прозрачность в фотошопе отображается в виде серо-белой шахматной доски.
Вы можете изменить внешний вид шахматной доски, выбрав команду меню Редактирование — Установки — Прозрачность и цветовой охват. Можно изменить размер квадратиков, сделав их больше или меньше, а также их цвет. Причем цвет меняется либо из раскрывающегося списка, либо назначаются оба цвета самостоятельно.
Если вы не можете спокойно смотреть на шахматную доску независимо от того, как она выглядит, отключите ее, выбрав в раскрывающемся списке Размер сетки вариант Не показывать.
Дополнительные параметры
В дополнительных параметрах находятся настройки, которые пригодятся уже профессионалам фотошопа.
Цветовой профиль. Это наборы инструкций, которые определяют, как мониторы компьютеров и принтеры отображают или распечатывают цвета вашего документа. Измените данный параметр только если вы знаете, что вам нужно использовать определенный цветовой профиль для проекта, иначе на других компьютерах или при распечатке ваши цвета могут выглядеть не так, как вы ожидаете.
Пиксельная пропорция. Это настройка определяет форму пикселов, меняя их размеры и пропорции. Она получила свое название от термина пропорция — отношение между шириной и высотой изображения (например, 16:9). Изначально в программе фотошоп выбран вариант Квадратные пиксели. Хотя квадратные пиксели хороши для фотографий, распечатанных изображений и использования на экране, они выглядят грубыми и искаженными в видео, которое склонно делать объекты низкими и толстыми.
Итак, вы открыли окно «Новый», ввели все необходимые настройки, а теперь жмите на кнопку ОК с правой стороны окна. В результате на рабочем пространстве появится чистый лист, на котором вам предстоит создать свою картинку.
Какое соотношение сторон использовать для изображений в графическом и веб-дизайне
Не знаете, какой размер и пропорции использовать для своих изображений в дизайне? В данной статье перечислили наиболее часто встречающиеся пропорции, а также популярные размеры изображений и фотографий, чтобы помочь вам создать ваш проект. Так же расскажем, как сделать необходимые пропорции в программе Фотошоп
Что такое соотношение сторон
Соотношение сторон изображения – это, пропорциональное отношение ширины к высоте. Вы знаете это как два числа, разделенных двоеточием в формате x : y. Например, изображение размером 6 x 4 дюйма имеет соотношение сторон 3: 2. Соотношение сторон не имеет единиц измерения — вместо этого оно показывает, насколько ширина больше по сравнению с высотой. Это означает, что изображение в сантиметрах, будет иметь такое же соотношение сторон, даже если оно в дюймах или пикселях. Соотношение между его шириной и высотой определяет соотношение и форму, но не фактический размер изображения.
Тем не менее, соотношение сторон изображения будет меняться в зависимости от носителя, на котором оно представлено. Соотношение сторон изображения, отображаемого на компьютере, будет отличаться от соотношения сторон того же изображения, отображаемого на телефоне.
Соотношения сторон являются важной частью веб-контента, поскольку изображения необходимо загружать с разными соотношениями сторон для разных целей, например, для настольных компьютеров, мобильных устройств или блогов, для социальных сетей. Когда вы используете правильные пропорции, это гарантирует, что ваши изображения отображаются так, как задумано, без растяжения или потери разрешения.
Давайте рассмотрим некоторые общие пропорции, которые обычно используются в разных местах.
Соотношение 1: 1
Соотношение 1: 1 означает, что ширина и высота изображения равны, создавая квадрат. Некоторые распространенные соотношения 1: 1 — это фотография 8 x 8 дюймов, изображение 1080 x 1080 пикселей или, как правило, любой шаблон профиля изображения на сайтах социальных сетей (например, Facebook). Это соотношение сторон обычно используется для печати фотографий, мобильных экранов и платформ социальных сетей, но оно не идеально для большинства телевизионных или цифровых форматов.
Соотношение 3: 2
Соотношение 3: 2 произошло от 35-миллиметровой пленки и фотографии и до сих пор широко используется для определенных печатных форматов. Изображения с разрешением 1080 x 720 пикселей или 6 x 4 дюйма устанавливаются в этом соотношении сторон.
Соотношение 4: 3
Соотношение 4: 3 обычно используется для телевизионных дисплеев, компьютерных мониторов и цифровых камер. На каждые 4 единицы ширины приходится 3 единицы высоты, образуя прямоугольную форму. Изображение размером 1024 x 768 пикселей или 8 x 6 дюймов соответствует типичному соотношению 4: 3.
Соотношение 16: 9
Соотношение 16: 9 чаще всего можно наблюдать на слайдах презентаций, компьютерных мониторах или широкоэкранных телевизорах. Этот международный стандарт недавно заменил соотношение 4: 3 для мониторов и экранов телевизоров, создав более тонкую, более вытянутую прямоугольную форму по сравнению с форматом 4: 3. Общие разрешения в соотношении 16: 9 составляют 1920 x 1080 пикселей и 1280 x 720 пикселей.
Как измерить размер изображения и соотношения сторон
В отличие от пропорций, размер изображения определяет фактическую ширину и высоту изображения в пикселях. Размер изображения – это, размеры изображения. Вы можете измерять размеры изображения в любых единицах, но обычно вы видите пиксели, используемые для веб или цифровых изображений, и дюймы или сантиметры, используемые для печати изображений.
Важно понимать, что два разных изображения с одинаковым соотношением сторон могут иметь разный размер или размеры. Например, изображение размером 1920 x 1080 пикселей имеет соотношение сторон 16: 9, а изображение размером 1280 x 720 пикселей также имеет соотношение 16: 9.
Размеры изображений для веб
Если вы загружаете изображения в Интернет, важно понимать спецификации размера изображения, потому что неправильные размеры изображения могут растягиваться или искажаться, чтобы заполнить фиксированные размеры.
Когда вы работаете над созданием веб-сайта или системой управления контентом (CMS), например WordPress или Joomla, требования к размеру изображения будут различаться в зависимости от используемой темы или шаблона. Зачастую создатель веб-сайта изменяет размеры изображений, чтобы они правильно отображались в нескольких различных форматах. Поэтому, чтобы удовлетворить несколько различных стандартных размеров изображения, загрузите изображение, которое достаточно велико, чтобы уменьшить его, не теряя разрешения, и достаточно мало, чтобы удобно соответствовать ширине стандартного экрана. Мы рекомендуем загружать изображения шириной от 1500 до 2500 пикселей. Проверьте свой шаблон или тему на любой CMS, которую вы используете, чтобы определить правильный размер изображения для загрузки. Точно так же сайты социальных сетей часто меняют размеры изображений, но при этом, обеспечивает правильное отображение ваших изображений.
Важное замечание: не путайте размер изображения с размером файла изображения. Размер файла изображения измеряется в байтах в зависимости от того, сколько места он занимает на диске (например, килобайт или мегабайт).
Вот некоторые из самых распространенных размеров изображений в Интернете.
1920 х 1080 пикселей
Этот стандартный размер изображения широко виден на телевизорах высокой четкости, в презентациях и на фотографиях в социальных сетях. Это соответствует соотношению сторон 16: 9.
1280 х 720 пикселей
Этот размер соответствует стандартному формату HD, используемому в фотографии и кино. Подходит для формата 4: 3.
1080 х 1080 пикселей
Размер изображения в соотношении 1: 1 широко используется в социальных сетях, а именно в Instagram и Facebook.
Общие размеры фотографий
Вы когда-нибудь хотели напечатать изображение, но не понимали, какой размер использовать? Несмотря на то, что вы можете печатать изображения любого размера, есть несколько стандартных размеров фотографий, которые помогут вам более точно соблюдать параметры. Различные размеры работают в разных средах, например, чтобы отображать большие отпечатки или плакаты, чтобы привлечь внимание к событию, или использовать меньшие размеры для показа дома или для пересылке по электронной почте.
Печатные изображения и фотографии обычно измеряются в дюймах, хотя в России чаще используются сантиметры или миллиметры.
Важное замечание. Если вы создаете рамку изображения, вам может потребоваться два размера: размер изображения и размер подложки.
Вот некоторые из самых распространенных размеров фотографий.
4 х 6 или 5 х 7 дюймов
Эти размеры являются стандартными и популярными размерами изображений, как правило, для отображения фотографий или небольших иллюстраций.
8 х 10 дюймов
Этот размер на один шаг больше по размеру популярных размеров фотографий и широко распространен среди портретов и больших печатных изображений.
8,5 х 11 дюймов
Используйте этот стандартный размер флаера для рекламы, отображаемой в местах с ограниченным пространством. Хотя размер флаера не так заметен, как большие размеры плакатов, он по-прежнему нацелен на то, привлекать к себе внимание.
12 х 18 или 18 х 24 дюйма
Эти стандартные плакаты размером больше обычных листовок, идеально подходят при разработке мероприятий или рекламных объявлений, которые должны охватить среднюю аудиторию.
24 х 36 дюймов
Рекламодатели используют этот размер плаката для наружной рекламы и специальных витрин в местах с высокой посещаемостью.
Как создать пользовательский размер и пропорции в Adobe Photoshop CC 2019
Откройте изображение в программе Фотошоп и выберите в панели инструментов Рамка, после этого, в панели настройки инструментов вверху слева, из выпадающего списка вы можете выбрать как хотите обрезать изображение, в определенных пропорциях или в определенном размере с указанием ширины, высоты и разрешения. Красными стрелками указаны актуальные поля для ввода параметров обрезаемого изображения — ширина, высота, разрешение.
Выбор способа обрезки, по размерам или в определенной пропорции
После указания параметров обрезки, создайте необходимую рамку обрезки и нажмите на Enter на клавиатуре или на галку в панели настроки инструмента.