Darmowe mockupy – jak ładnie zaprezentować grafikę

W tym wpisie znajdziesz odnośniki do stron z darmowymi mockupami, czyli gotowymi wizualizacjami pozwalającymi na efektowną prezentację Twoich pomysłów.

Kupujemy oczami – ta stara reguła sprawdza się bardzo często. Dbając o odpowiednią formę przedstawienia naszych projektów, zdjęć i pomysłów nadajemy im dodatkowej wartości, a także zwiększamy szansę na ich pozytywny odbiór. Jednym ze sposobów na atrakcyjną prezentację są mockupy.

Nie ważne czy spotykasz się z tym pojęciem po raz pierwszy, czy może na co dzień od dawna stosujesz tego typu wizualizacje – w tym wpisie znajdziesz sporo praktycznych informacji.

Jeśli z mockupami spotykasz się po raz pierwszy:

  • Dowiesz się czym dokładnie są mockupy.
  • Nauczysz się atrakcyjnie zaprezentować grafikę, nie mając profesjonalnych programów.

Jeśli posiadasz Photoshopa i używasz już mockupów:

  • Przedstawiam obszerną listę stron z darmowymi mockupami do wizualizacji twoich projektów.
  • Znajdziesz tam linki do tysięcy bezpłatnych materiałów gotowych do wykorzystania.

 

 

Czym są mockupy?

Najprościej mówiąc, jest to pokazanie projektu tak, jak wyglądałby np. wyświetlony na telefonie, wydrukowany na papierze, czy wyszyty na ubraniu. Takie wizualizacje pomagają wyobrazić sobie rzeczywisty efekt i nadają realizmu.

Weźmy np. to logo:

coologo

Dzięki mockupom możemy za pomocą kilku kliknięć pokazać jak będzie wyglądało np. na wizytówce, kubku, albo szyldzie.

wizytowka

kubek

szyld

Taki efekt możesz osiągnąć na dwa sposoby:

  1. bezpośrednio przez przeglądarkę Internetową, bez specjalnych programów i umiejętności ich obsługi
  2. edytując profesjonalnie przygotowane pliki w Photoshopie

W pierwszej opcji wszytko jest bardzo szybkie i banalnie proste, ale takie mockupy są z reguły mniej efektowne.

Drugi wariant wymaga posiadania Photoshopa i podstawowych umiejętności jego obsługi, ale efekt, który możemy uzyskać jest dużo lepszy.

Tysiące mockupów za darmo

Poniżej znajdziesz linki do tysięcy darmowych mockupów podzielonych wg tych dwóch kryteriów. Najpierw opisuję strony gdzie do zrobienia wizualizacji wystarczy przeglądarka, a w drugiej części podaję listę źródeł z mockupami do edycji w Photoshopie. Udanego wizualizowania. :)

 

 

Darmowe mockupy tworzone w przeglądarce

 

Placeit

Placeit to chyba najpopularniejszy serwis umożliwiający stworzenie ładnej wizualizacji jedynie za pomocą przeglądarki. Do wyboru jest prawie 1500 różnych grafik, a nawet filmy video. Darmowe funkcje są jednak mocno ograniczone. Jeśli chcemy pobrać wizualizację w nieco większym rozmiarze, musimy zapłacić kilka dolarów.

Zrób mockup

Smartmockups

Smartmockups to bardzo dobrze zrobiony serwis. Tworzenie wizualizacji jest bardzo intuicyjne, wybór szeroki, a grafiki dobrej jakości. Trudno się do czegoś przyczepić.

Zrób mockup

Dunnnk

Projekty prezentować możemy na różnych urządzeniach (telefony, tablety, laptopy), a wykorzystane zdjęcia są dosyć ładne. W pełni darmowy.

Zrób mockup

Magic Mockups

Wybór wizualizacji nie jest duży, ale usługa jest w pełni darmowa. Nie ma ograniczeń rozmiaru ani znaków wodnych. Wykorzystuje całkiem ładne zdjęcia.

Zrób mockup

 

Place.to

Jest całkiem sporo widoków i możliwość pobrania mniejszego rozmiaru grafiki za darmo. Większa rozdzielczość kosztuje niecałego dolara.

Zrób mockup

Mockdrop

Oferuje wizualizacje na ładnych zdjęciach, a także możliwość pobrania dużej grafiki za darmo, bez znaku wodnego. Wybór niestety stosunkowo mały.

Zrób mockup

Picapp

Picapp oferuje wizualizacje projektów na urządzeniach elektronicznych (smartphone, tablet, komputer). Wybór jest stosunkowo mały, darmowa rozdzielczość jest niska i posiada znak wodny.

Zrób mockup

 

 

Darmowe mockupy tworzone w Photoshopie

 

Mockup Catalog

Nazwa nie do końca oddaje potencjał tej strony, bo jest to katalog nie tylko darmowych mockupów. Są też np. fonty i szablony.

Pobierz mockupy

Behance

Cały czas aktualizowana lista darmowych mockupów, umieszczona na Behance, czyli najpopularniejszej na świecie społecznościówce dla kreatywnych.

Pobierz mockupy

Mockupworld

Masa darmowych mockupów w rozmaitych kategoriach, pozbierana z różnych zakątków Internetu.

Pobierz mockupy

PSD Repo

Sporo szablonów do wizualizacji. Fajna jakość.

Pobierz mockupy

Pixeden

Całkiem niezła kolekcja darmowych mockupów oraz sporo innych materiałów graficznych.

Pobierz mockupy

Freepik

Popularny serwis z darmowymi plikami, w tym także mockupami. Jakość nie jest najwyższych lotów, ale da się znaleźć coś ciekawego.

Pobierz mockupy

Freebiesbug

Jak pokazuje aktualnie licznik na tej stronie, darmowych mockupów jest tam dokładnie 369.

Pobierz mockupy

CSS author

Wpis na blogu CSS author, który zawiera odnośniki do ponad 1000 darmowych mockupów.

Pobierz mockupy

Graphic Burger

Jedno z bardziej popularnych źródeł darmowych mockupów. Jest tu ich sporo i są dobrej jakości.

Pobierz mockupy

Pixel Buddha

Sporo mockupów, ale nie tylko. Są też fonty, zdjęcia, ikony i szablony.

Pobierz mockupy

Medialoot

Mockupy materiałów drukowanych (ulotki, plakaty, wizytówki itp.).

Pobierz mockupy

Perfect Pixels

Mockupy telefonów, głównie Apple.

Pobierz mockupy

UIspace

Ładne mockupy, z dominacją flatowego stylu.

Pobierz mockupy

Real Thread

Mockupy odzieży i elementów z nią związanych (np. metki).

Pobierz mockupy

Facebook Design Resources

Mockupy przygotowane przez zespół projektantów pracujących dla Facebooka. Fajna funkcja, która jednym przyciskiem pozwala pobrać wszystko.

Pobierz mockupy

Na dziś to wszystkie wartościowe źródła, które znam. Jeśli uważasz, że czegoś zabrakło, daj znać w komentarzu. Będę tę listę rozbudowywał. Nie zapomnij dodać tego wpisu do zakładek, żeby mieć go pod ręką i rzuć okiem na pozostałem darmowe materiały, które opisałem na blogu:

Nie przegap kolejnych wpisów. Zapisz się do newslettera.

Bądźmy w kontakcie

Obserwuj fanpage bloga. Bądź na bieżąco z ciekawymi materiałami i nowymi wpisami.

  • Świetna robota, dzięki za zebranie wszystkiego w jedno miejsce :)

  • genialne! Jacek – you made my week ;D a co!

  • Patrycja Kurzawa

    Dzięki za zrobienie takiego zestawienia! Nie wiedziałam, że Facebook udostępnia swoje własne mockupy; właściwie to połowy tych źródeł nie znałam, więc na pewno się przyda. Brakuje mi tylko informacji, czy one wszystkie są na licencji CC0.
    A od siebie polecam kolekcję firmbee.com/freebies – domena publiczna :)

  • marta

    Dzięki wielkie

  • Właśnie ostatnio poszukiwałam takiego zestawienia ;)

  • Pracuję obecnie nad prezentacją do pracy i oczywiście szukam grafik, zdjęć i czegoś innego niż zwykle… Zastanawiam się i patrzę na skrzynkę pocztową, gdzie znajduje się newsletter od Jacka. „mockupy? Brzmi jak rodzaj kawy”, myślę.
    No i okazuje się, że to dokładnie to czego szukałem :)

  • Cześć!
    I’m the author of mockdrop.io, thanks for mentioning it in your post. I studied one semester in Warszawa, but my Polish is still pretty limited :D If you have any questions or suggestions regarding mockdrop, feel free to ask me :)

  • Izabela

    Mam banalne pytanie p. Jacku. Jak radzić sobie Pana zdaniem z przedstawieniem swoich projektów np. w portfolio – stosować jeden mockup do wielu projektów, czy wiele mockupów do wielu projektów? Dziękuję za podpowiedź :)

    • Najlepiej bez mockupów, tylko samemu robić zdjęcia. ;) A jeśli już mockupy, to moim zdaniem im bardziej różnorodnie, tym lepiej. Wszystkie projekty na tym samym mockupie wyglądają słabo i nudno.

      • Izabela

        Aj, nie zawsze można :).
        Dzięki :)

  • Jacku, nie wiedziałam o istnieniu czegoś takiego jak mockupy. Właśnie rozwiązałeś mój problem z… tworzeniem zdjęcia głównego do postów o ebookach :) Dotąd kombinowałam z ręcznym wklejaniem zdjęcia okładki i efekty były takie sobie. Jak widać, blogerzy książkowi też mają dziwne potrzeby :) Dziekuję!

    • No to super. Zależało mi właśnie na tym, żeby tekst był przydatny także dla nie-grafików. ;)

  • W Internecie roi się od takich artykułów ale to akurat ten dodałem do zakładek :) Świetnie opisane. Każdy zrozumie, nawet osoby spoza „branży”. Pewnie przetrzepałeś najciemniejsze zakątki internetu by wybrać te najlepsze strony. Dzięki Ci za to!

  • edwin gawron

    Zawodowo zrobione zestawienie! Odpowiednia prezentacja pracy to podstawa.

  • dziękuję, bardzo przydatne

  • I wszystko stało się jasne :)
    A w gratisie dostałam jeszcze ciekawe inspiracje, gdzie szukać „gotowców”.
    Dzięki!

  • A ja mam pytanie :) Czy jest jakaś wtyczka albo kod html, który pozwala, by fotografie były na całej rozpiętości strony, łącznie z marginesami? :) Będę arcywdzięczna!

Zobacz też:
Zobacz też: