Jak vytvořit náhled webu na počítači nebo mobilu (mockup)

Pravděpodobně jste již někdy narazili na ukázku webu nebo nějaké webové aplikace, jak vypadá na různých zařízeních (počítač, notebook, tablet, mobil…). Je to dobrý způsob, jak atraktivní formou představit lidem nový web nebo jim ukázat, že vaše webová služba funguje na různých typech zařízení. Jak ale tento náhled vytvořit? Není to tak těžké, jak se na první pohled může zdát…

Jak vytvořit náhled webu na počítači nebo mobilu (mockup)

První z možností je stáhnout si již připravený soubor pro Photoshop. Stačí do Googlu zadat např. macbook mockup free psd a můžete se do toho ihned pustit. Další možnost je o něco snažší a rychlejší. Jako vždycky si ukážeme užitečné stránky, kde si toto můžete sami vytvořit. Asi nejznámnější je web Placeit, kde je velké množství různých šablon. Zdarma si ale můžete stáhnout výsledný obrázek pouze v nízkém rozlišení. Za vyšší kvalitu již musíte utratit několik dolarů, což platí i pro obrázky s průhledným pozadím. Existují ale i další alternativy 🙂

SmartMockups

Skvělá stránka, kde si můžete vytvořit náhled webu na libovolném zařízení (počítač, laptop, notebook, mobil, hodinky) zcela zdarma ve vysokém rozlišení. Šablon je zde dostatek a jistě si každý vybere. Můžete se rozhodnout, zda chcete nahrát vlastní obrázek, který bude umístěn na obrazovku, případně lze zadat url adresu webu, přičemž se náhled vytvoří automaticky.

Postup:

  1. Otevřeme si stránku SmartMockups, kde si vybereme obrázek, který se nám líbí.
  2. V dalším kroku přes tlačítko Upload image nahrajeme vlastní obrázek, nebo klikneme na URL Screenshot a zadáme adresu webu, který chceme na displeji zobrazit.
  3. Následně klikneme na tlačítko Choose image size a vybereme požadované rozměry obrázku. (po umístění stránky na displej vypadá obrázek celkově nekvalitní, po jeho stažení je však výsledek ve vysokém rozlišení a ostrý). Zobrazí se nám samostatná stránka, odkud obrázek stáhneme klasicky pomocí pravého tlačítka myši.

MagicMockups

Tato stránka je velice podobná předchozí. Není zde sice takové množství šablon, přesto zde najdete také pěkné kousky. Postup je velice podobný jako v předchozím případě.

  1. Otevřeme si stránku MagicMockups, kde si v levém sloupci vybereme obrázek, který se nám líbí.
  2. V dalším kroku v horní části stránky přes tlačítko Upload image nahrajeme vlastní obrázek, nebo klikneme na Capture URL a zadáme adresu webu, který chceme na displeji zobrazit. Pokud jsou na obrázku 2 zařízení (např. notebook a telefon), klikneme na Image A nebo Image B podle toho, kam chceme obrázek umístit.
  3. Nyní klikneme na tlačítko Download a vybereme požadované rozměry obrázku. Klikneme na rozměry obrázku a následně se nám zobrazí samostatná stránka, odkud obrázek stáhneme klasicky pomocí pravého tlačítka myši.

Ověřte si responzivitu vašeho webu

V dnešní době je responzivní web naprostý základ. Znamená to, že se stránka přizpůsobí velikosti obrazovky zařízení, ze kterého návštěvník přichází. Navíc počet návštěvníků přistupujících z mobilních zařízení je čím dál vyšší. Rychlá kontrola může proběhnout tak, že na počítači zmenšujtete okno prohlížeče a při tom by se obsah stránky měl přizpůsobit. Nástrojů na testování je opravdu mnoho, uvádím jeden příklad.

TechSini

Zde stačí zadat v horní části stránky url adresu webu. Vaše stránky se zobrazí na různých zařízeních. Na jednotlivých obrazovkách můžete normálně scrollovat na stránce nahoru a dolů. Pomocí tlačítek pak můžete některé ze zařízení skrýt. Alternativou je pak stránka AmIResponsive.

Jak vytvořit náhled webu na počítači nebo mobilu (mockup)

Znáte další stránky na vytváření náhledu webů na různých zařízeních? Napiště je do komentářů…

Mohlo by se vám líbit...