Czym są mock-upy i jak je tworzyć?

Szczegóły

Odsłony: 107108

Definicji enigmatycznego dla większości słowa „mock-up” próżno szukać w słowniku czy nawet polskiej Wikipedii – najpopularniejszej encyklopedii internetowej. A w papierowych ich wydaniach [encyklopedii wszelakich] tym bardziej.

Choć jeśli się uprzemy to przeszukując internetowe słowniki znajdziemy definicję słowa mock-up jako – makieta. I tylko tyle. Może dzieje się tak dlatego, że wspomniany termin występuje wyłącznie w środowisku doświadczonych grafików. Mówiąc najprościej, tzw. mock-up to specjalnie zaprojektowany plik projektu programu Adobe Photoshop, który umożliwia nam osadzenie naszej własnej grafiki w środowisku skomponowanym już wcześniej. Najłatwiej będzie to o czym mówię zilustrować na konkretnym przykładzie. Wyobraźmy sobie, że widzimy zdjęcie człowieka, który trzyma w swoich rękach wizytówkę. Zdjęcie zrobione jest pod odpowiednim kątem, zawiera płytką głębię ostrości i tym podobne rzeczy. Posiadając takiego mock-upa, teraz możemy zaimportować do niego inną grafikę i po wykonaniu kilku naprawdę prostych czynności (import, wykadrowanie, zapis) nasza grafika zastąpi oryginalną!

Już zatem wiecie czym są mock-upy. Ale do czego służą? Wyobraźcie sobie, że jesteście grafikiem tworzącym wizytówki czy logotypy dla firm. Bardzo często zdarza się tak, że po wykonaniu już projektu takiego elementu graficznego, nasz klient chciałby zobaczyć jak jego produkt prezentowałby się w rzeczywistości. I teraz zamiast mozolnie tworzyć od podstaw taką tylko jednorazową wizualizację (czyli bawić się ustawianie cieni, układanie w przestrzeni, wyginanie itd.) można posłużyć się właśnie mock-upem. Importujemy nasze nowo powstałe logo, robimy co trzeba w postaci zaledwie kilku prostych kliknięć myszki i uzyskujemy gotową wizualizację.

Ja nigdy nie korzystałem z mock-upów. Ale to chyba głównie przez to, że nie wiedziałem o ich istnieniu (było to też podyktowane faktem, że responsywne mock-upy możliwe są do uzyskania jedynie w programie Photoshop a ja dość długo korzystałem tylko z oprogramowania firmy Corel).
Jednak kiedy zacząłem się bawić takimi plikami, bardzo szybko uświadomiłem sobie jak fajne jest to rozwiązanie. Mock-upy dostępne w sieci wyglądają po prostu niesamowicie. A ja po jakimś czasie obcowania z nimi zapragnąłem stworzyć swoje własne. Dzięki temu w swoim debiucie wypuściłem paczkę aż 35 różnych mock-upów, którą można kupić w internecie.

Natomiast ten artykuł chciałem poświęcić procesowi ich tworzenia.
Od czego w ogóle zacząć tworzenie swojego mock-upa?
Niezbędne będzie oczywiście opanowanie programu Photoshop a w szczególności poznanie zasad jakimi rządzą się tzw. „obiekty inteligentne” (smart objects) w programie. To właśnie one pozwalają nam na robienie cudów z naszymi przyszłymi grafikami. Mówiąc w skrócie, cały proces polega na tym, że tworzymy responsywny obiekt inteligentny na który nadajemy wszystkie możliwe efekty oraz transfromacje (przekształcanie typu: perspektywa, zniekształcenie, zawinięcie rogów, ułożenie w przestrzeni, wszelkie wygięcia i tak dalej). Następnie okładamy go wszelkimi pomysłowymi rozwiązaniami graficznymi, np. wycinamy kawałek naszego palca, który znajduje się nad wizytówką aby obiekt inteligentny móc wstawić pod niego. I aby właśnie dlatego nasz palec widniał zawsze nad wizytówką, by zawsze był obecny warstwę wyżej niż nasz obiekt inteligentny, który potem zedytujemy.

Tutaj właśnie najwięcej zależy od naszej pomysłowości i tego jak bardzo oddający rzeczywistość mock-up chcemy stworzyć. To są kwestie techniczne w odniesieniu do programu, ale do stworzenia naszej makiety potrzebujemy jeszcze zdjęć. Tworząc swoje mock-upy najpierw budowałem całą scenerię wraz z ułożeniem wizytówek. Dzięki temu doskonale wiedziałem jak później rozmieścić swój obiekt inteligentny w programie. Po prostu dopasowywałem go do prawdziwych wizytówek. Dzięki temu wszelkie obecne cienie na zdjęciu pochodzące od wizytówek były prawdziwe oraz zaimportowany plik graficzny układał się idealnie tak na co wskazywała perspektywa. Dzięki takim czynnościom wszystko na zdjęciu wyglądało bardzo realistycznie. Ja zdecydowałem się na taki krok aby nie umieszczać na obiektach grafik „na oko”. Także zamiast fotografowania pustego szklanego opakowania po kawie, doklejałem mu najpierw prostokątną grafikę aby później dowiedzieć się jak bardzo ulegnie zniekształceniu w takiej perspektywie.

Po wykonaniu zdjęcia po prostu nanosiłem swój obiekt inteligentny i wiedziałem, że muszę dopasować go do rogów tamtej grafiki, którą miałem już na zdjęciu. Zmierzyłem też rozmiary swojej grafiki służącej mi do orientowania się w perspektywie przez co wiedziałem o wymiarach grafiki, które będą w tym mocku-upie wypadać najlepiej. Tworząc np. zdjęcie z ekranem tabletu, najpierw go zmierzyłem aby wiedzieć o jakiej szerokości i wysokości utworzyć mam swój obiekt inteligentny w programie aby najlepiej oddawał rzeczywistość. Dlatego też na domyślnej grafice w moich projektach postanowiłem umieszczać od razu informację o najbardziej odpowiednich wymiarach grafiki jaką ktoś chciałby tutaj zaimportować.

Na przygotowanie samych zdjęć też schodzi bardzo dużo czasu. Niezwykle ważne jest ustawienie całej scenerii. Musi wszystko wyglądać ładnie. Elementy powinny być zgrabnie rozmieszczone, fotografia powinna być wyraźna i jasna, obiekty na nim obecne ostre. Wyzbyć powinniśmy się też wszystkich pyłków na naszych obiektach i zadbać o to by nie było żadnych przepaleń od światła na obrazie. Brzydkie, ostre cienie też nie powinny widnieć na naszych zdjęciach. Zobaczcie krótki filmik z prezentacją jednej sceny: tutaj.

Przygotowując się więc do stworzenia naszego projektu bardzo dużo czasu zajmie nam samo przygotowanie zdjęcia, nie mówiąc już o późniejszym jego obrabianiu w programie i przystosowywaniu do bycia prawidłowym mock-upem. Ja tworząc swoje mock-upy chciałem aby było one rozbudowane i niosły sobą o wiele więcej opcji niż inne. Dlatego zdecydowałem się tworzyć bardziej skomplikowane projekty. Te wymagały ode mnie planowania ich już na etapie samego fotografowania i tworzenia scenerii. Dopiero później czekało mnie drugie tyle pracy (a nawet więcej) w programie graficznym.

Zdecydowałem się, że dam ludziom potężne narzędzie do edycji zakupionych przeze mnie mock-upów. I w niektórych z nich dałem klientom już kilka gotowych rozwiązań. Na przykład w projekcie z kawą mogli zarządzać jej konsystencją. Mogli za pomocą jednego kliknięcia uzyskać pusty kubek, kubek z różnymi rodzajami pianki, dodawać dymiącą parę a nawet ziarenka kawy wokół czy decydować nawet o obecności samych wizytówek w tym mock-upie połączonym również z grawerem na kubku jako logo.

Zabierając się za stworzenia takiego pliku, najpierw zrobiłem test, który prezentuje tutaj. Ułożyłem prostą scenę i sprawdziłem czy dobrze zaplanowałem sobie w głowie hierarchię. Okazało się, że tak, dlatego wszystkie późniejsze mock-upy tworzyłem już z głowy bo poznałem schemat ich działania. Wiedziałem już w jaki sposób muszę wykonać zdjęcie by później uzyskać oczekiwany przeze mnie efekt. Najważniejsza była tutaj kolejność działań oraz dokonywanie zmian tak by niczego w scenerii czy ułożeniu aparatu nie poruszyć. Jeśli zaplanowałem sobie, że dam możliwość wyboru między pustym kubkiem a dwoma rodzajami jego wypełniania to musiałem najpierw ustawić nieruchomo aparat i sfotografować pusty kubek. Później dolać do niego pierwszą ciecz. Następnie dolać do niej ciecz drugą i wymieszać by nabrała oczekiwanego koloru. Przy każdym wariancie robiłem zdjęcie zachowując taki sam układ naczyń. Dzięki temu, później w programie graficznym mogłem wyciąć każdą z cieczy osobno i ustawić wszystko tak aby użytkownik mógł dodawać tylko zawartości kubka za pomocą jednego kliknięcia.

Tworzenie swojej paczki, nazwanej „Most Universal Bundle of 35 Mock-Ups” nauczyło mnie bardzo dużo o fotografii, Photoshopie oraz grafice samej w sobie. Jako uzupełnienie artykułu prezentuję wszystko to o czym pisałem jeszcze na filmie poniżej. Gorąco zachęcam do jego obejrzenia bo uważam, że opowiedziałem o tym w ciekawy i przystępny sposób. A mój zbiór mock-upów jest dostępny do kupienia tutaj. W sprawie negocjacji cen możecie pisać do mnie na skrzynkę, gdyż dla swoich czytelników przygotowałem specjalne bonusy.

• Paczka z moimi mock-upami do nabycia tutaj: Creative Market. Poniżej lista wszystkich moich prac wraz z przykładami ich wykorzystania:

• « poprz.
• nast. »