Banner készítés a Tokyo sablonhoz

A Tokyo sabloncsalád főoldali bannere igazán látványos eleme lehet webáruházunknak, ugyanakkor sokszor kőkemény feladatnak tűnik a megfelelő banner elkészítése. Ebben szeretnénk most egy kis segítséget nyújtani. 

Ebben a cikkben 3 dologra fogunk kitérni:

  1. Bemutatjuk a Tokyo sabloncsalád főoldali bannerének reszponzív nézeteit. 
  2. Bemutatjuk a Tokyo sabloncsalád főoldali bannerének ideális méreteit.
  3. Adunk egy minta fájlt a tökéletes banner elkészítéséhez.

 

A Tokyo sabloncsalád főoldalának reszponzív nézetei

A Tokyo sabloncsalád főoldali bannerváltóját úgy alakítottuk ki, hogy minden készüléken jól látható és olvasható legyen a banner tartalma. Emiatt a kisebb kijelzőkön és monitorokon a banner széleit levágjuk, hogy a legfontosabb, vagyis a banner közepén elhelyezett tartalomra nagyobb hangsúly kerülhessen. 

Hogyan is néz ki ez a gyakorlatban?

1) Full HD, vagyis 1920px széles monitorokon még a teljes banner látszik:

tokyo_desktop.jpg

 

2) Az 1024px széles tablet kijelzőkön ugyanakkor már levágjuk a banner széleit, így a banner közepe jóval nagyobb figyelmet kap:

tokyo_ipad_pro.jpg

 

3) Egy okostelefon kijelzőjén ugyanígy az optimalizált méretben jelenik meg a banner, hogy a szöveg olvasható, a kép pedig jól kivehető maradjon:

tokyo_iphone_x.jpg

 

A banner ideális méretei

  • A Tokyo sabloncsalád főoldali bannerének ideális mérete 1920 x 700 px.
  • A mobilbarát terület a banner középső részén helyezkedik el, és egy 1170 x 700 px-es szeletet foglal magában.
  • A mobilbarát terület a banner bal és jobb szélétől egyaránt 375 px-re helyezkedik el.  

A banner szövegét érdemes a mobilbarát területen elhelyezni. Ugyanígy minden olyan tartalmat, amit minden kijelzőn meg szeretnénk jeleníteni, szintén a mobilbarát területben érdemes elhelyeznünk. 

 

tokyo_minta_banner.jpg

 

Minta bannerek

A Tokyo sabloncsaládhoz készített minta bannerünket itt tudja letölteni: Letöltés

A Tokyo sabloncsalád főoldali bannerének .psd kiterjesztésű verzióját itt tudja letölteni: Letöltés

Van még kérdése? Kérelem beküldése

1 Megjegyzések

  • Avatar
    Balasi Noemi

    Kedves Shoprenter Kollegak! A Tokyo sablon bannerenek merete (alapvetoen a magassaga) valtoztathato esetleg? Nagyon koszonom!

Kérjük, Belépés után hagyjon megjegyzést.