Bakos Szabolcs UI/UX Designer portfóliója

Iphone és iPad Retina Home screen ikon készítése

Sokan nem tudják, de az IOS eszközökön a Safariban van egy hasznos funkció, amivel weblapunkat ikon formájában elmenthetjük.

A javíthatatlan ügyfél
Reszponzív weblap tervezése
Iphone és iPad Retina Home screen ikon készítése
Szerző: Bakos Szabolcs
Sokan nem tudják, de az IOS eszközökön a Safariban van egy hasznos funkció, amivel weblapunkat ikon formájában elmenthetjük az Ipad-unk vagy Iphone-unk főképernyőjére (Homescreen). Hasznos dolog ez, mert így egy gombnyomással el tudja érni bárki a weblapunkat.

Az ikon elkészítése

Hozzunk létre egy 512×512 pixel méretű képet, amibe rajzoljuk, vagy méretezzük bele az ikonunkat. Ez tökéletesen fog mutatni a Retina kijelzős eszközökön, de régebbi retro IOS termékeken (Iphone 3g, Ipad 1) is jól fog mutatni, hiszen szoftveresen leskálázódik a felbontás.

Mentsük el a képet apple-touch-icon.png néven, ha szeretnénk rá shájni tükröződést, amit automatikusan tesz rá az IOS. Ha nem szeretnénk semmilyen effektet, akkor apple-touch-icon-precomposed.png néven mentsük el.

Ha megvagyunk a fentiekkel, akkor az elkészült képet szimplán töltsük fel a weblapunk gyökér könyvtárába. Majd pedig teszteljük le. Töltsük be a weblapunkat, kattintsunk a share gombra, majd jelöljük ki középen az ikonunkat (Add to Home Screen). Adjunk neki nevet.

Iphone screen

Iphone screen 2

Voilá! A shájni verzió valamiért nekem jobban tetszett, ezért azt a verziót használtam a siteomhoz. Sok sikert!

Dolgozzunk együtt!

Amennyiben konkrét webdesign projekttel szeretnél megkeresni, vagy szeretnél velem együttműködni, kérlek vedd fel velem a kapcsolatot. Dolgozzunk együtt egy sikeres projekten!