Фото-пейзаж своими руками

Простой фото-пейзаж.
Эффект глубины
Кадрирование
Поделиться

Для начала

Фото-пейзаж - пейзаж для YoWindow, сделанный из обычной фотографии.

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

Перед началом убедитесь, что у Вас установлена последняя версия Погоды YoWindow из Google Play.

Мы рассчитываем, что Вы владеете следующими навыками.

• Умеете вырезать объекты из фотографий в Photoshop или другом графическом редакторе.

• Понимаете как устроен формат файла JSON (это не сложно, но все же).

• Знаете как загружать файлы на Android устройство с компьютера.

Вопросы по созданию фото-пейзажей можно задать в теме Погода YoWindow на сайте 4PDA. Вам помогут.

Простой фото-пейзаж.

Пейзаж состоит из нескольких файлов, упакованных в zip архив с расширением .yla (yla - YoWindow Landscape).

Вот эти файлы.

• landscape.ywlj - манифест. Текстовый файл в формате JSON. Описывает устройство и настройки пейзажа.
• photo.jpg - исходная фотография.
• mask.png - маска вырезанного неба.
• depth_map.jpg - карта глубины

Далее мы расскажем как сделать пейзаж из любой фотографии за несколько простых шагов.

Найдите фотографию, подходящую для пейзажа

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

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

• Без объектов, которые вылезают за верх кадра. Убедитесь, что на фотографии нет крупных объектов, которые касаются верхней границы фото (дома, деревья). На узком экране телефона YoWindow заполняет фотографию небом сверху. Объекты будут выглядеть неестественно обрезанными.

• Предпочитайте фото, сделанные горизонтально (в пейзажной ориентации).

• Выбирайте фотографии высокого разрешения. Идеальный размер 1920 точек по ширине. Фотографии низкого разрешения будут плохо смотреться на современных телефонах и планшетах.

Уменьшайте огромные фотографии

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

Переименуйте фотографию в photo.jpg

Сохраните фотографию в файл с именем “photo.jpg”. Все буквы обязательно должны быть маленькими. Это важно. Иначе пейзаж нельзя будет открыть на Android. Имена всех файлов пейзажа должны быть набраны маленькими буквами.

Вырежьте небо из фотографии

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

Для этого, область неба вырезают в графическом редакторе.

Результат вырезания называется “маска”. Маска - это изображение точно такого же размера, как и оригинальная фотография. На маске, область, которая принадлежат небу - непрозрачная. Все остальное пространство маски - прозрачное.

Маску необходимо сохранить в формате PNG в файл с именем “mask.png”. Все буквы - маленькие.

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

Фотография	Маска	YoWindow

Найдите уровень горизонта на фотографии

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

Photoshop. Наведите курсор на место, где будет заканчиваться небо. В панели Info координата Y будет равна уровню горизонта.

Для нашего примера horizonLevel = 460 пикселей.

Создайте файл Манифест

В текстовом редакторе (Notepad) создайте файл Манифест “landscape.ywlj” Все буквы - маленькие.

Манифест - это текстовый файл в формате JSON.

• name - имя пейзажа

• photoAuthor - автор фото, отображается в левом нижнем углу YoWindow

• photoUrl - ссылка на оригинальную фотографию. Если пользователь нажмет на имя автора, то программа откроет эту страницу.

• photoSource - откуда фотография. Если фотография сделана вами - напишите об этом.

• horizonLevel - уровень горизонта. Расстояние от верхнего края фотографии в пикселях до точки, где будет садиться солнце.

На этом шаге у вас должно быть три файла.

1. landscape.ywlj - манифест

2. photo.jpg - фотография

3. mask.png - маска неба

Упакуйте файлы в .zip архив

Назовите архив подходящим именем.
В данном примере выберем имя park_guell.zip

Установите расширение .yla для пейзажа

Измените расширение ".zip" файла на ".yla"
park_guell.yla

Отправьте пейзаж на Android

Загрузите пейзаж (.yla файл) на Android устройство.

Откройте пейзаж в YoWindow

• Запустите YoWindow

• Зайдите в Ящик пейзажей.

• Нажмите кнопку “+”

• Нажмите кнопку "папка".

• Найдите пейзаж (park_guell.yla) на диске и откройте его.

Пасмурно	Ясно	Закат

Неплохо получилось!

Эффект глубины добавляет ощущение перспективы к фотографии.

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

Для придания глубины пейзажу, нужно создать специальное изображение “Карта Глубины”. На этом изображении, цветом (от черного к белому) закодированы расстояния до объектов на фотографии. Чем темнее область, тем ближе объект, чем светлее - тем дальше.

Карту Глубины необходимо сохранить в формате JPEG в файл с именем “depth_map.jpg”

Карта Глубины. Черные области ближе, светлые - дальше.

После того, как будет готова Карта Глубины, нужно подсказать программе реальные расстояния до объектов. Для этого в Манифест landscape.ywlj указывают расстояния до ближайшей черной области и самой дальней белой области. Программа автоматически определить расстояния до оставшихся оттенков серого. Расстояния указываются приблизительные.

В нашем примере Манифест landscape.ywlj теперь будет выглядеть следующим образом.

"depthMap": {
  "nearMeters": 100,
  "farMeters": 2500,
  "horizonStartDepth": 0.70,
  "horizonMeters": 15000
}

У вас должно получиться четыре файла.

1. landscape.ywlj - манифест

2. photo.jpg - фотография

3. mask.png - маска неба

4. depth_map.jpg - Карта Глубины

Загрузите файл пейзажа на Android устройство и откройте в YoWindow

Ура! У нас получился пейзаж с перспективой!

Простой пейзаж	Пейзаж с Картой Глубины

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

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

Чтобы включить отладочный режим

1. Зайдите в Настройки YoWindow/О Программе.

2. Прокрутите до самого низа страницу “О Программе”.

3. Внизу будет кнопка “Debug mode”, нажмите ее.

После этого в настройках YoWindow появится пункт “Debug”.

Теперь можно включить режим просмотра тумана.

1. Зайдите в Настройки YoWindow/Debug

2. Включите настройку Visibility.

3. Закройте Настройки.

4. На экране программы появится движок “Видимость”.

Движок задает Видимость - расстояние на котором из-за тумана не видно объектов.

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

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

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

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

Кадрирование. Серая область - Кадр. pivot - Опорная Точка.

В области кадра есть важная точка. Мы ее назвали “Опорная Точка” (“Pivot”).

Опорная Точка находится на нижней границе кадра ровно по-середине.

Программа совместит Опорную Точку фотографии и центр нижней границы экрана.

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

Photoshop. Наведите курсор на Опорную Точку pivot. В панели Info вы увидите ее координаты X и Y.

Ширину и высоту Кадра удобно измерять с помощью инструмента “Линейка”.

• portrait - означает, что мы задаем Кадр для портретной (вертикальной) ориентации устройства.

• pivot - опорная точка

• undisclosedSize - размер Кадра - области, которая не обрезается и не загораживается пользовательским интерфейсом.

• width - ширина Кадра

• height - высота Кадра

До кадрирования	Кадрированный пейзаж

Кадр задается отдельно для портретной (вертикальной) и отдельно для пейзажной (горизонтальной) ориентации устройства.

На телефонах в пейзажной ориентации очень мало вертикального пространства. Без кадрирования на пейзаже практически не будет видно небо.

Выберем Кадр для пейзажной ориентации.

• landscape - означает, что Кадр задан для пейзажной (горизонтальной) ориентации устройства.

Результат кадрирования в пейзажной ориентации.

До кадрирования	Кадрированный пейзаж

На этом этапе, Манифест landscape.ywlj будет выглядеть вот так.

{
	"name":"Park Guel panorama",
	"photoAuthor":"aleksandra85foto",
	"photoUrl":"https://pixabay.com/en/barcelona-spain-city-park-488052/",
	"photoSource":"Найдена в Интернет",
	"horizonLevel":460,
	"portrait": {
		"pivot": {
			"x":852,
			"y":1206
		},
		"undisclosedSize": {
			"width":1539,
			"height":900
		} 
	},
	"landscape": {
		"pivot": {
			"x":912,
			"y":906
		},
		"undisclosedSize": {
			"width":1920,
			"height":564
		} 
	}
}

Упакуйте все файлы пейзажа в .zip архив.

Затем измените расширение ".zip" файла на ".yla"

park_guell.yla

Загрузите файл пейзажа на Android устройство и откройте в YoWindow.

Теперь пейзаж будет отлично смотреться на любом телефоне и планшете.

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

Ночь

Как добавить ночной вид.

1. Для ночной фотографии сделайте такие же графические файлы, как и для пейзажа - фотография, маска, карта глубины.
   Но добавьте к именам файлов префикс "night_"
   night_photo.jpg
   night_mask.png
   night_depth_map.jpg
   
   Положите файлы в папку пейзажа.
   
   
2. Добавьте информацию о ночном виде в Манифест landscape.ywlj
   Нужно добавить узел "views", внутри которого будут храниться дополнительные виды (view).
   Список view обрамляется квадратными скобками.
   Пока у нас только один вид - ночной.
   view обрамляется фигурными скобками {}.
   
   

   "views": [ { "id": "night", "name":"Night", "photoAuthor":"Lukasz Szwaj", "photoUrl":"", "entrance":"instant", "horizonLevel":460, "depthMap": { "nearMeters": 20, "farMeters": 5000 } }],

id - определяет, когда показывать вид

• "night" - Когда стемнело

entrance - определяет как быстро будет открываться вид.

• "instant" - день на ночь меняется моментально.
• "delayed" - ночью будет проявляться с задержкой. Этот вариант следует выбрать, когда на дневном и ночном фото разные виды.
  

Манифест landscape.ywlj с ночным видом.

{
	"name":"Park Guel panorama",
	"photoAuthor":"aleksandra85foto",
	"photoUrl":"https://pixabay.com/en/barcelona-spain-city-park-488052/",
	"photoSource":"Found on Internet",
	"horizonLevel":460,
	"portrait": {
		"pivot": {
			"x":852,
			"y":1206
		},
		"undisclosedSize": {
			"width":1539,
			"height":900
		} 
	},
	"landscape": {
		"pivot": {
			"x":912,
			"y":906
		},
		"undisclosedSize": {
			"width":1920,
			"height":564
		} 
	},
	"views": [
		{
			"id": "night",
			"name":"Night",
			"photoAuthor":"Lukasz Szwaj",
			"photoUrl":"",
			"entrance":"instant",
			"horizonLevel":460,
			"depthMap": {
				"nearMeters": 50,
				"farMeters": 5000
			}
		}	
	]
}

Пейзаж с ночным видом.
park_guell_night.yla

Мы написали эту инструкцию в надежде, что в будущем появится больше красивых пейзажей для YoWindow.
Мы будем рады увидеть вашу работу.
Присылайте пейзажи нам на support@repkasoft.com

Делитесь новыми пейзажами в теме YoWindow на 4PDA или в сообществе YoWindow на Reddit. :-)

Команда YoWindow.