Проби и грешки при magazine pages layout

January 7, 2011 - web

Тук си говорим за картинкоправене. Не за цял шаблон, не за програмируемост или интерактивна приложимост. Нормално разтворена книжка, която да показва съдържанието на някаква публикация. Като това:


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

Ще си говорим за най-най-първият вариант. Снимане и налагане по повърхност. Исках да постигна реализъм и това изключи отрисуването на разгъвка. Но да бъде приложим и контролиран реализъм, тоест снимането на готовото, отпечатано изображение не ми помагаше.

ЕТАП 1 – грешките.
Да намерим разгънато празно/бяло списание е трудна работа, затова избрах разгъвки в които бялото да ми е възможно най-много:

Да, криви са. “Ще оправя това след като ги обработя” казах си. Това е грешка едно – освен особено много загубено време да изправя страници, които не бяха добре разположени както перспектива, така и сами за себе си като огъване, на по-късен етап не успях да спазя и формата на огъване спрямо поставяното допълнително съдържание. За това обаче по-нататък.

Изчиствам изображението (рисува се очертание на пълната страница след което то се запълва или с градиент или се дублира или разтегля чиста част от изображението така, че да заеме цялата площ. След това се флатва с оригиналната снимка и двете половини от страниците се дистортват докато заемат по-правилни форми.), изолирам му сянка, правя го черно-бяло.

Идва момента за наслагване на съдържанието по плоскостта на страниците. И… ядец.
Проблемът идва от два фактора – листа може да се огъва като си иска в пространството. Сниманото трудно се контролира според нуждите на софтуерното напасване. Вторият проблем лъсва когато започна да регулирам custom warp transform – Уорп-а има лимитации. Лимитации за които няма начин да знаеш по време на снимки. Лимитации, които ще се скрият от границите на селекцията/маската в която влиза огънатото поставено съдържание (видимата площ на листа). Но тези лимитации създават два ефекта. Първият е, че праволинейно съдържание (редове открай-докрай или линии и черти близки до ръба) отиват в посоки различни от посоките на границите на листа.
Вторият проблем се появява след изкривяването на две страници една до друга. Съдържанието на лявата и дясната трябва да става чрез ползването само на крайните манипулатори в WARP-a. Фотошоп може да изкривява и вътрешната част на изображенията (ако ги мърдате с мишката в средата) и това би могло да реши проблема за по-равни линии по краищата, но размества цялото съдържание в произволна посока. И когато се насложат две страници с повтарящ се елемент те не си пасват.

Както наример тук – червената линия изглежда с различна дебелина.
Сега би бил момента да тегля една пловдивска на цялостния подход (след като вече са генерирани 36 такива разгъвки от общо три модела на разгъване – все пак гоня реализъм и не искам всички разгъвки да са еднакви). И би трябвало да седна и да отрисувам шаблона така, че да ми е удобен за пълнене и огъване на съдържанието, което сипвам в него. Тъй като в този проект обаче всичко е снимано празно и след това напълнено с конкретно съдържание, нарисуваната разгъвка щеше да дели от общия външен вид. Затова преговаряме цялото упражнение по нов начин.

ЕТАП 2 – да го направим правилно:

Купувам си ПРАЗНИ тетрадки (ей, ама то можело и по-лесно :) ) и ги снимам от възможно най-фронталния ракурс.

Отново доработка:

И тук вече идва тънкият момент – как страниците да се огъват в пространството по начин, близък на възможностите на Warp функцията?
Не се – оригиналните страници онтово са застанали в някакво естествено и случайно разположение, затова вместо да се опитваме да ги изправим, ги до рисуваме с форма максимално близка до изкривен чрез warp обект. Правим си тестов правоъгълник и го уорп-ваме близко до формата на страниците без да прекаляваме с разкривяването. След това повтаряме формата на уорпнатите граници и ги дорисуваме в сниманата разгъвка:

Оттам напасването на елементите става “вярно” и няма разкривявания.
За сравнение ето един модел от първият опит и един от втория:

… и приятно страницоогъване :)

0 Comments

You can be the first one to leave a comment.

Leave a Comment

You must be logged in to post a comment.

Designed by WPZOOM