Hogyan készítsünk és állítsunk be egy retina-készen álló iOS könyvjelző ikont egy webhelyhez

A webfejlesztők és a webhelytulajdonosok figyelmet fordítanak: be kell állítania a retina-készen álló iOS könyvjelző ikont. A könyvjelzőket Apple Touch ikonnak nevezzük, és ezek az egyéni képek a felhasználó kezdőképernyőjén jelennek meg, amikor iPad, iPhone vagy iPod touch készüléket jelentenek az iOS rendszerben, vagy a Safari for OS könyvjelző panelét. X. Egyéni alma-érintés-ikon fájlkészlet nélkül a felhasználók unalmas és gyakran csúnya miniatűr képet kapnak a weboldalról, és retina készen álló ikon használata nélkül a könyvjelzői ikon pixelekkel és általában szörnyűnek tűnnek az új iPad-en. képernyő.

Íme, hogy mit kell tennie egy retina tökéletes Apple Touch ikon létrehozásához bármely weboldalon, néhány egyszerű lépésben.

1) Hozza létre a Retina-Ready iOS webhely ikont

Használjon sablont, vagy készítsen saját. Az előző bejegyzésben említett egyszerű DIY retina ikonkészletet használtam, ez egy PSD fájl, amely megkönnyíti a szép kinézetű iOS ikonok tervezését, akár egy-két kattintással. Illessze be a weboldal vagy a cég logóját, és máris nagyon jól megy. Ha nincs valami a PSD fájlok szerkesztéséhez, akkor a Photoshop CS6 béta kiválóan használható és ingyenesen letölthető és használható, amíg a végső verzió az év későbbi kiadásáig meg nem jelenik.

2) Mentés PNG néven és nevezze el a Retina Weboldal Könyvjelző Ikonját

Az ikonnak PNG-nek kell lennie, és a két dolog egyikének kell neveznie. Minden fájlnév kissé eltérő módon jeleníti meg az ikon megjelenését a felhasználói kezdőképernyőn:

• Az „ apple-touch-icon.png ” hozzáteszi a kiemelkedő buborékfedést az ikonhoz
• Az „ apple-touch-icon-precomposed.png ” megjeleníti az ikont az eredetileg létrehozott formában, a kiemelés overlay nélkül

Használja az utóbbi által összeállított opciót, ha saját kiemelést készített, vagy ha azt akarja, hogy az ikon laposabban jelenjen meg, mindenütt jelenő buborék nélkül, amely az Apple legtöbb alapértelmezett ikonján megjelenik.

3) Töltse fel a webhely könyvjelzőjének érintőképernyő ikonját az alapvető webes könyvtárba

Használjon SFTP-klienst (az OS X tartalmaz az FTP-t a Finderben, a CyberDuck vagy a Filezilla pedig ingyenes) másolja az apple-touch-icon.png fájlt a gyökérkönyvtárba. Ez általában ugyanaz a hely, ahol a webhelyek fő indexfájl található. A feltöltés után ellenőrizze, hogy megfelelő helyen van-e, nyisson meg egy böngészőt, lépjen a „http://SITEURL.com/apple-touch-icon.png” webhelyre, és ellenőrizze, hogy betöltődik-e.

Íme egy példa egy 512 × 512 méretű retina-kész könyvjelző ikonra az OSXDaily.com webhelyről:

Vegye figyelembe, hogy az előre megjelölt zászló nélkül a fenti ikon megjeleníti a kiemelkedő buborékot. A kettő közötti különbséget úgy láthatja, hogy összehasonlítja a tényleges ikont a képernyőképeken könyvjelzőként megjelenített ikonnal.

4) Használjon iOS eszközt, és jelölje meg a weblapot könyvjelzővel

Ez a legegyszerűbb lépés, megragad egy iOS-eszközt (lehetőleg iPad 3-at a retina-szempontok megerősítéséhez) és nyissa meg a Safari-t. Frissítse azt a webhelyet, amelybe az ikont feltöltötte, majd koppintson a nyíl ikonra, és válassza a „Hozzáadás a kezdőképernyőhöz” lehetőséget a könyvjelző nevének megadására, majd térjen vissza a kezdőképernyőhöz, és erősítse meg, hogy ott van-e.

Annak ellenére, hogy 512 x 512 pixel, a retina ikon finomítani fogja az idősebb iPhone készülékeket és a nem retina eszközöket. Ha igazán szeretne, akkor a CSS és a HTML segítségével különböző méretű ikonokat jeleníthet meg a különböző eszközökön, de ez valójában nem szükséges.

Most, ha valaki könyvjelzővel jelöli webhelyét egy retina kijelzővel ellátott iPad-en, sokkal jobban néz ki az otthoni képernyőn. Ez tényleg minden, amire szükség van. És igen, korábban már írtunk az Apple touch ikonról, de most még említést érdemel, amikor az iPad 3 lényegesen nagyobb felbontású ikonokat és grafikákat igényel.