Jak zrobić Mockup? Tutorial

niedziela, marca 13, 2016 Edwin Gawron 12 Komentarze



Każdy grafik wie, że w sieci są dostępne darmowe mockupy do pobrania. Jest tego dobrodziejstwa całe zatrzęsienie, jednak przeglądając kolejne galerie, łatwo można spostrzec, że większość wzorów się powtarza. Co w przypadku, gdy przekopaliśmy cały internet, a odpowiedniego mockupu dalej brak?

W tym wpisie postaram się pomóc Wam w samodzielnym stworzeniu mockupu.
Potrzebne do tego będą: 
• Adobe Photoshop (minimum w wersji CS4);
• przyzwoity komputer;
• dobre chęci.

Co to jest Mockup?

Zanim zabierzemy się do pracy, kilka słów o tym, co to jest mockup. To obce słowo można przetłumaczyć za pomocą polskiego odpowiednika makieta. Jednak właściwe znaczenie nieco nam wtedy umyka. Bardziej opisowo, mockup to: sposób prezentacji projektu graficznego jako wizualizacji w naturalnym środowisku. Tak więc projekt strony internetowej będzie przedstawiony na ekranie laptopa; interfejs aplikacji mobilnej pokazany na ekranie smartfona trzymanego w dłoni; projekt wizytówki zobrazowany jako stos wizytówek leżących na biurku. 

Jako grafik zapewne masz doskonałą wyobraźnię i patrząc na coś, potrafisz przenieść płaski obraz 1:1 w dowolne środowisko. Jednak klient, dla którego właśnie wykonujesz zlecenie, na przykład na projekt ulotki falcowanej na 3C, może mieć z tym problem. Mockup zaoszczędzi Ci tworzenia całych opisowych akapitów w e-mailach, długich tłumaczeń przez telefon i niepotrzebnych nieporozumień.

Nieraz dobry mockup może podnieść walory grafiki, znacząco uatrakcyjniając np. minimalistyczne projekty, które na pierwszy rzut oka są odbierane przez klientów jako „proste” w negatywnym tego słowa znaczeniu. Inną korzyścią jest możliwość ukazania uszlachetnień, które oferuje drukarnia internetowa. Przygotowana w ten sposób wizualizacja z pewnością skusi niezdecydowanego klienta na dodatkowe opcje.

Jak stworzyć Mockup w Photoshopie?

Mockup, który opisuję poniżej, powstał w Adobe Photoshop CS6. Tzw. Obiekty Inteligentne (Smart Objects), które są kluczowe dla wykonania mockupu, są obsługiwane przez wersje od CS4 w górę. 

Są również inne sposoby uzyskania podobnego efektu, jednak nie będziemy do tego mieszać programów 3D czy Adobe After Effects. Stworzyłem scenkę, w której projekt jest niejako „zawieszony w próżni”, bo przynosi to zadowalający efekt przy najmniejszym nakładzie pracy. Oczywiście można pokusić się o bardziej skomplikowaną scenkę, przy czym warto wtedy wspomóc się wykonanymi wcześniej zdjęciami. Przedstawiam proste i szybkie rozwiązanie na to, jak pokazać klientowi projekt w gotowej postaci.

Tutorial krok po kroku - wizualizacja folderu składanego 3xA4

Tworzymy w Photoshopie nowy dokument o względnie dużych rozmiarach, np. 5120x4096 px i rozdzielczości 72 px/cal. Wrzucamy jednokolorowe tło, np. czerwone.



Zapodajemy coś w stylu winietki - tak powinno ładnie wyglądać:



Zabieramy się do rzeczy.
Tworzymy nową warstwę i rysujemy na niej prostokąt (U) o wymiarach 210x297mm. Ważne, aby zachować faktyczne wymiary obiektu. W przeciwnym razie proporcje zostaną wypaczone, a nasz mockup może wyglądać na nienaturalnie zdeformowany. Następnie klikamy prostokąt na palecie warstwy prawym przyciskiem myszy i wybieramy z listy: Konwertuj na obiekt inteligentny.



Mając nadal zaznaczony nasz prostokąt, wduszamy CTRL+T i w polu skalowania powiększamy go proporcjonalnie do 200%. O tym, dlaczego nie zrobiliśmy właściwych rozmiarów od razu, napiszę w dalszej części tutorialu. Na razie tylko pamiętajmy o proporcjach.



W ten sam sposób tworzymy i przekształcamy jeszcze dwa prostokąty. Zmieniamy ich nazwy - tak, aby było wiadomo, która to strona folderu. Wszystko powinno wyglądać jak na tym obrazku:



Przed nami trudniejsza część.
Wymagająca nieco wyczucia i wyobraźni przestrzennej.
Za pomocą przekształceń dostępnych pod skrótem CTRL+T trzeba tak zmodyfikować prostokąty, aby zaczęły przypominać strony rozłożonego folderu. Najbardziej przydatne polecenia to ZniekształćPerspektywa. Dla ułatwienia możemy wciągnąć do dokumentu zdjęcie jakiegoś folderu w pozycji, którą chcemy osiągnąć. Mnie wyszło tak:



W kolejnym kroku nasz mockup zyska właściwą funkcjonalność. Pora na linkowanie obiektów inteligentnych. Projekt folderu, który zamierzam wizualizować, wygląda tak:


Żeby umieścić go w mockupie, klikamy dwukrotnie w miniaturę obiektu inteligentnego. Najpierw bierzemy Front. Photoshop otwiera link w nowym oknie, przy okazji wyświetlając przypomnienie, aby po zakończeniu edycji zapisać zmiany. Teraz powinniśmy mieć na monitorze nowy dokument w wymiarach prostokątów, które rysowaliśmy wcześniej, czyli kartki A4. Przeciągnij i upuść tutaj swój projekt. W oknie, które się pojawiło, zaznaczamy jak poniżej i klikamy OK:



Teraz wystarczy przesunąć i nieco powiększyć umieszczony właśnie plik, tak aby był widoczny sam front. Sugeruję nie robić tego ręcznie, a za pomocą panelu Wyrównanie, żeby zachować precyzję dla dokładności łączenia kolejnych stron. Wduszamy CTRL+W, aby zamknąć łącze, i klikamy Zapisz. Photoshop robi swoje magiczne sztuczki, a naszym oczom powinien ukazać się taki efekt:



Tę samą terapię stosujemy dla pozostałych obiektów inteligentnych.
Mockup jest w zasadzie gotowy. Łącza można teraz edytować w ten sam sposób, czyli klikając dwukrotnie na miniaturkę. Jeżeli zachowaliśmy precyzję podczas umieszczania projektu, nie powinno być problemu z pasowaniem stron. Jeśli jednak pojawiły się jakieś przesunięcia, jest to najlepszy moment, aby dokonać poprawek.

Teraz zajmiemy się dopracowywaniem wyglądu.
Scenka będzie bardziej realistyczna. Na początek cień. Zaznaczamy wszystkie trzy łącza na panelu Warstwy i wduszamy CTRL+J, żeby je powielić. Mając dalej zaznaczone warstwy, które właśnie powieliliśmy, klikamy prawym przyciskiem myszy i wybieramy Scal warstwy. Przesuwamy scaloną warstwę pod łącza i zadajemy jej cień z parametrami jak poniżej:



Pora na krawędź papieru.
Na tej samej warstwie ponownie walimy CTRL+J. Klikamy dwukrotnie nową warstwę w celu otwarcia zakładki Styl warstwy. Usuwamy cień, a zamiast niego zadajemy nałożenie koloru - wybieramy biały. Tę warstwę przesuwamy o jeden piksel w lewo i jeden w dół, żeby stworzyć wrażenie krawędzi papieru.
Na tym etapie całość powinna wyglądać następująco:



Blask papieru.
Odrobina światła. Trzymając wciśnięty CTRL, kliknij na miniaturkę warstwy Front. Wciśnij SHIFT+CTRL+N i nadaj dla nowej warstwy nazwę Światło. Następnie przyduś G, żeby wybrać narzędzie Gradient. Stwórz próbkę gradientu od białego do przezroczystości i narysuj coś w rodzaju odblasku, jak poniżej:


Zależnie od kolorystyki projektu wciągniętego na mockup, zmień dla warstw światło tryb mieszania na Nakładka, a także poeksperymentuj z wartością krycia.
Powtórz dla pozostałych stron.

Dopracowanie detali
Teraz zamarkujemy miejsce zginania stron folderu. W tym celu narysuj dwa prostokąty (U). Wysokość każdego z nich powinna być taka sama jak wysokość folderu w danym miejscu. Szerokość niezbyt duża, niech wyglądają realistycznie. Wypełnij oba na czarno i zmień tryb mieszania na Łagodne światło. Oto efekt, jaki powinien się ukazać:


Final touch
Wygląda na to, że skończyliśmy nasz mockup. Pozostało jeszcze dodać opisówkę, jeśli uważasz to za konieczne. Całość prezentuje się następująco:


Jak widzisz, udało się go wykonać całkiem szybko i łatwo. Jest unikalny i przede wszystkim jest to mockup za free. Projekt naszego folderu możemy zaprezentować klientowi właśnie w takiej formie i dzięki temu zyskać na dzień dobry dodatkowe punkty.

Ok., ale o co chodziło z tymi większymi wymiarami? Już wyjaśniam. Dzięki nim nie musimy ograniczać się tylko do jednego widoku. Na jednym mockupie możemy zrobić kilka efektownych ujęć z bliska, eksponując szczególnie interesujące fragmenty projektu. Zgrupuj wszystkie warstwy oprócz tła i wciśnij CTRL+T, przekształć widok np. w taki sposób:




W razie konieczności wduś C, a potem wykadruj kompozycję.

Zachęcam do eksperymentowania z narzędziem Przekształcanie swobodne oraz z możliwościami, które dają inteligentne obiekty.

Dobrze zrobiony mockup może przyczynić się do finalnego sukcesu w niejednym zleceniu projektowym. Warto podejść do jego wykonania naprawdę starannie, a posłuży nam długo i uczyni pracę bardziej efektywną. Jeżeli jednak wolisz gotowe rozwiązania, te strony mogą Cię zainteresować. Oto zestawienie mockupów do pobrania za darmo:

 originalmockups.com
 pixeden.com
 freebiesbug.com
 graficzny.com.pl

Powodzenia :)

12 komentarzy:

  1. Fajnie fajnie :)

    OdpowiedzUsuń
  2. Świetna sprawa z tymi mock-up'ami. Bo bez indywidualnego podejścia nikt nie odejdzie od zwyczajnych form, a można się trochę zabawić, aby broszurka była bardziej efektowna.

    OdpowiedzUsuń
    Odpowiedzi
    1. Dokładnie, jeśli można coś zrobić lepiej to zawsze warto próbować.

      Usuń
  3. No jako klient zdecydowanie kupuję taką formę prezentacji.

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję! W takim razie polecam naszą nowość w ofercie folderów:
      http://www.viperprint.pl/produkt/UL210

      Usuń
  4. Świetny artykuł. Zapraszamy także na naszego bloga gdzie można pobrać darmowe mockupy: http://blog.drukomat.pl/2015/05/12/darmowe-mockupy-dzieki-ktorym-wizytowki-przedstawiaja-sie-same/

    OdpowiedzUsuń
    Odpowiedzi
    1. O, witamy konkurencję! Cieszymy się, że blog Wam się podoba. Zapraszamy do lektury :)

      Usuń
  5. Bardzo fajne porady dla osób uczących się Photoshopa.

    OdpowiedzUsuń
  6. a co to oznaczy jeśli przy napisie "mock up" pojawia się skrót "CI"?

    OdpowiedzUsuń
  7. Google mi wskazało dobry artykuł - Dzięki!

    OdpowiedzUsuń