Hogyan készítsünk ikont egy parancsikonhoz. Hogyan készítsünk ico fájlt

1 szavazat

Jó napot, kedves olvasók. Néha egy apró dolog is változást hozhat. Ma olyan szinte láthatatlan gizmosokról fogunk beszélni, amelyek jelentős előnyökkel járnak a webhely számára.

Ebből a cikkből megtudhatja, miért van szükség faviconokra, hol keresse őket, és hogyan készítsen egyszerűen és gyorsan ikont ico formátumban.

Egy láthatatlan elem, amely mindenki tudatalattijában lerakódik

A favicon egy kis kép. A Yandexben a keresésben már a portál neve mellett jelenik meg, és szükségszerűen megjelenik a böngészőben is, amint megnyitja az erőforrást.

Valószínűleg odafigyeltél rájuk. Pontosan erre használják őket. Az ikonok hozzájárulnak egy adott erőforrás memorizálásához, mivel a vizuális információ sokkal gyorsabban szívódik fel, és behatol magába a tudatalattiba. Egyszer láthatsz egy embert, három órát beszélgethetsz vele, és nagyon hosszú időre válogathatod az emlékét, érdemes vele másodszor is találkozni. A vizuális információ (az arc) sokkal mélyebben bevésődik a memóriába, mint bármely más.

Ha kétszer-háromszor látja az ikont, az a tudatalatti szinten lerakódik, megbízik a portálban, és szívesebben választja ki a tömegből.

Ha egy adott lekérdezésről keres információt, és több lapot nyit meg, akkor először azokat nézze meg, amelyek kedvenceit ismeri, a többit pedig valószínűleg bezárja, ha elégedett az első forrásból kapott információkkal.

Elmesélek egy történetet arról, hogyan tréfált velem egy webhely ikonja. Le kellett töltenem egy könyvet. Láttam egy ismerős favicont, és nem ez volt az első alkalom, hogy láttam a dizájnt. Szuper, jártam már itt! Szinte gondolkodás nélkül rákattintottam a letöltésre. Nem volt időm elmenteni, mivel a vírusirtó vad kiáltással üvöltött, a számítógépet pedig már nem lehetett menteni, újra kellett telepítenem a rendszert. Csak abban a pillanatban jutott eszembe, honnan ismerem ezt az oldalt, és jól emlékszem rá. Pontosan ugyanez a helyzet történt körülbelül egy éve, ugyanazon az erőforráson.

Hogyan készítsünk favicont mindössze 2 perc alatt

A webhely ikonja lehet png vagy ico formátumú, 16 x 16 pixel méretű.

A konverter segítségével bármilyen képből favicont hozhat létre. Például itt https://www.icoconverter.com/ . Válassz fájlt.

Például már készítettem egy rajzot. A legjobb a png formátumot választani, akkor a szélek átlátszóak lesznek.

Válassza ki a 16 képpontot. Vannak, akik a 8 bites képeket preferálják (Bitmélység). Ekkor a kép gyorsabban betöltődik. Számomra úgy tűnik, ez már nem különösebben releváns. Használjon szép és jó minőségű dolgokat. Sokkal hasznosabb lesz.

Szóval, úgy tűnik, ennyi. Azonban kapok egy hibát. Az a tény, hogy a kép mérete meghaladja a megengedett szabványokat. A kép mérete nem haladhatja meg a 3 MB-ot.

Tömörítheti és vagy festheti, de mutatok egy másik lehetőséget. Ha letöltötte a képet a Google-ból, keresse meg újra, majd futtassa a „Keresés kép alapján” lehetőséget.

Most válassza a "Kicsit" lehetőséget.

Töltse le ugyanazt a fényképet, de kisebb méretben.

Térjünk át újra.

Hol keressünk kész ikonokat

Egy ikon megtalálásának egyszerűbb és őszintébb módja, ha letölti azt egy online szolgáltatásból https://www.iconsearch.ru/ . Ezeknek a képeknek a felhasználását az adminisztráció engedélyezi, és törvény nem bünteti. . Írjon be egy tetszőleges nevet a keresősávba, és kész.

Keressen egy képet png és ico formátumban, töltse le és telepítse webhelyére.

De mi van akkor, ha saját maga szeretné létrehozni? Nincs ebben semmi bonyolult.

Kreatív munka a szakembereknek és a szakemberré válni vágyóknak

Bármilyen üzlet jó. Jó, ha vonz az új tudás, és készen állsz mindenféle apróságra, hogy fejleszd képességeidet. Ha saját maga szeretne valami érdekeset kitalálni a portál számára, akkor szüksége lesz egy ingyenes szolgáltatásra: https://favicon.ru/ .

Válasszon egy színt.

Rajzolj az erre kijelölt mezőbe.

Ugyanakkor figyelje az eredményeket. Ezután töltse le és kész.

Talán ihletet kap a kész rajzok használatával. Válasszon ki egy fájlt a számítógépéről.

És a képed 8 bites faviconná változik. Használjon átlátszóságot, hogy megszabaduljon a háttértől.

Ez az eredmény, amit kapsz. Nem tudom, te hogy vagy vele, de őszintén szólva nem szeretem őt különösebben.

Nagyon szívesen használnám a Photoshopot () ehhez a munkához. Létrehoznék egy ikont, elmentem png formátumban, majd konvertálok a segítségével https://www.icoconverter.com . Igen, sokkal több munka van, de az eredmény érdekesebb és szebb lesz. Bár a választás rajtad múlik.

Nézd meg a videót, amelyben egy srác valamivel több mint 9 perc alatt megalkot egy csodálatos ikont.

Ha tetszett ez a videó, és szeretnéd alaposabban tanulmányozni a Photoshopot, ajánlom figyelmedbe Zinaida Lukjanenko tanfolyamát ( Photoshop a semmiből VIP 3.0 videó formátumban ). Néhány hét alatt elsajátíthatja mindazokat a készségeket, amelyekre szüksége van a programmal való munkához.

Soha nem fáradok el ismételgetni, hogy a technikai oldal nem akkora probléma. Fontos, hogy tökéletesítsd képességeidet, tanulj meg menő projekteket létrehozni, amelyek működnek. Ez pedig csak a gyakorlatban valósítható meg. Miután megszerezte a technológiával kapcsolatos összes alapvető tudást.

Ezután jön a tapasztalat és a gyakorlat. Egy-egy kép eleinte több órát vesz igénybe, de idővel nyilvánvalóvá válik számodra, hogy milyen színeket kombinálnak, milyen technikák a legjobbak ebben vagy abban az esetben. Nincs annál élvezetesebb, mint nézni a professzionális tervezők munkáját. Ez valóban csodálatos.

Ne vesztegesd az időt értelmetlen megértésre, fejleszd saját tehetségedet. Nem szabad olyannak lenni, mint a mesebeli favágó, aki élete végéig próbálta megtalálni a leggyorsabb utat a baltával, de megélte az öregkort, és egyetlen fát sem vágott ki. Minden idejét beszélgetéseknek, okoskodásoknak, könyveknek és egyéb válaszkeresésnek szentelte az őt foglalkoztató kérdésre. Élete végére már nem volt ereje ellenőrizni, hogy a legjobb megoldás működik-e – csak tegye meg.

Tegyen meg mindent időben. Hamarosan meg fogja érteni, hogyan dolgozhat könnyebben, gyorsabban és a legjobb módon. Ebben a szakaszban legalább valahogy teljesítsd a feladatokat, és biztosan hihetetlen mennyiségű tudás birtokában érsz majd a végére.

Ha tetszett a cikk, iratkozz fel a hírlevélre. Naprakész információkat kaphat, amelyek segítségével megtalálhatja magát az interneten, és jó pénzt kereshet azzal, amit szeretne: tervezéssel, szövegírással, elrendezéssel, sőt mindezen folyamatok kezelésével. Mindenkinek van valami.

Sok sikert a törekvéseidhez. A következő alkalomig.

Képzésünk negyedik lépésének utolsó leckét az Android alkalmazások ikonjainak létrehozásának szenteljük. A cikk végén pedig megtalálja hagyományos tesztünket a lefedett anyag elsajátítására.

Azok, akik régóta használnak Android okostelefonokat, tudják, hogy ez az operációs rendszer nagymértékben testreszabható. Hozzáférhet a háttérképek, témák, kezdőképernyő, widgetek, betűtípusok és így tovább egyéni beállításaihoz. A felhasználó akár a rendszerfelületet is megváltoztathatja egy adott indító segítségével.

Azt azonban kevesen tudják, hogy az Android még az alkalmazásikonok... újrarajzolását is lehetővé teszi. Ehhez számos segédprogram ingyenesen letölthető a Google Playen. Cikkünkben a legkényelmesebb programokról fogunk beszélni, és megmutatjuk, hogyan készítsünk ikont egy alkalmazáshoz az egyik kisalkalmazásban.

Egy egyszerű Android-alkalmazás intuitív kezelőfelülettel lehetővé teszi, hogy gyorsan létrehozzon egy ikont több tucat sablonból, módosítsa a méretet, a színt és a feliratot. Ezenkívül a címke létrehozása során beállíthatja a lejtőt, és akár a kész képet is lefedheti a háttérrel.

Az alkalmazást shareware séma keretében szállítjuk. A program fő verziója reklámszalagokkal, valamint korlátozott számú sablonnal rendelkezik. A teljes verzióért azonban csak 76 rubelt kérnek a fejlesztők. Ahogy ők maguk tréfálkoznak: az ára csak egy csésze kávé.

Az alkalmazást a szabványos ikonok helyettesítésére szolgáló parancsikonok létrehozására hozták létre. Ehhez egyszerűen válasszon ki egy programot az alkalmazások listájából, és rajzolja újra a parancsikont az alkalmazásban. Ennek módjáról további részletek a cikk végén találhatók.

Egy Android-alkalmazás, amely kiterjedt funkciókkal rendelkezik ikonok rajzolásához. Ezenkívül a segédprogram lehetővé teszi, hogy parancsikonokat hozzon létre nemcsak mobil platformokhoz, hanem PC-rendszerekhez is, például Windowshoz. Ikon létrehozásához a felhasználó testreszabja a hátteret, és kiválaszt egyet az ötezer sablon közül.

Az alkalmazás kényelmes eszközöket tartalmaz a parancsikonok rajzolásához:

• Méretezés
• Pozícionálás
• Fordulat
• Sugár és így tovább

Minden ikon méretezhető vektorgrafikán alapul, és SVG formátumban exportálható. Ez egyébként lehetővé teszi a parancsikonok forráskódjának testreszabását is egy külön lapon.

Új ikon létrehozásához a Material Icon Maker alkalmazás mindössze 4 egyszerű lépést kínál:

1. Válasszon ki egy alap parancsikont. Az alap több mint 900 forrásból kölcsönözhető, szöveget írhat be, vagy képet tölthet fel az okostelefonok galériájából.
2. Testreszabhatja a hátteret. Itt a felhasználó kiválasztja a formát és a színt.
3. Alkalmazza az árnyékokat az irány, a szín és az átlátszóság kiválasztásával.
4. Exportálás több elérhető felbontásban.

Az előre elkészített ikonok bármely harmadik féltől származó Android indítóban használhatók, amelyek támogatják az egyéni parancsikonokat, például a Nova Launcherben. Az alkalmazás ingyenes, nem igényel internetkapcsolatot és nem tartalmaz hirdetéseket, de mindössze 15 rubelért vásárolhat egy speciális kulcsot, amely további funkciókat nyit meg, mint például az árnyékok finomabb hangolása, a színek és a nagy felbontású export.

Gyors és nagyon kényelmes ikonszerkesztő, amellyel néhány perc alatt új parancsikonokat rajzolhat az alkalmazásokhoz.

Először a háttér létrehozása és konfigurálása. Itt módosíthatja az alakot, beállíthatja a körvonal színét és vastagságát, kiemelést, árnyékot vagy színátmenetet alkalmazhat. Ezután jön a munka a logóval. Új méretet adhat, kitöltést és körvonalat készíthet, valamint árnyékot alkalmazhat. Az utolsó lépés a hatás alkalmazása. Az alkalmazás alapverziójában csak kettő érhető el: ragyogó és szórt fény. Az összes sablon eléréséhez frissítenie kell az alkalmazást a pro verzióra 116 rubelért.

Ennek az alkalmazásnak az a sajátossága, hogy az ikon nem egy adott alkalmazáshoz, hanem az okostelefon összes programjához tartozó teljes csomaghoz készült. A kész összeállítást különféle hordozórakétákhoz tervezték, például Nova Launcher, Action Launcher, ADW Launcher vagy Apex launcher.

Hogyan hozhat létre saját ikont egy Android-alkalmazáshoz

Az ikonok létrehozására és szerkesztésére szolgáló alkalmazások képességeinek bemutatására az Adapticons segédprogramot választottuk, amelyet a Fly Cirrus 12 okostelefonra telepítettek. Segítségével lépésről lépésre megmutatjuk, hogyan rajzolhat parancsikont Androidra.

1. lépés: Az okostelefonra telepített alkalmazások listájából válassza ki azt, amelyhez új ikont szeretne rajzolni.

2. lépés: Válasszon hátteret.

3. lépés: Állítsa be a háttér és a logó méretét.

4. lépés: Ha szükséges, mozgassa a logót, és adjon hozzá egy árnyékot.

5. lépés: Lépjen a logószerkesztőbe.

6. lépés: Válasszon logót a kész sablonok közül, vagy importáljon a készülék memóriájából.

7. lépés: Válassza ki a logó színét.

8. lépés Mentse el az asztali ikont, exportálja PNG formátumban, vagy adja hozzá az indító letöltési csomaghoz.

Az ikonkészítés teljes folyamata megtekinthető videónkban:

Most már tudja, hogyan hozhat létre egyszerűen és gyorsan új ikont az Android-alkalmazásokhoz. Általánosságban elmondható, hogy az alkalmazások többsége hasonló funkciókkal rendelkezik, és csak a bővített verziók költségében térnek el egymástól. A legfontosabb, hogy a velük való munkavégzés nem igényel beavatkozást az okostelefon rendszerbeállításaiba, mivel valójában az ilyen segédprogramok egyfajta grafikus szerkesztők.

Tetszett az egyik általunk javasolt alkalmazás? Rajzolja le ikonjait, és adja hozzá a leglátványosabb munkáit a cikkhez fűzött megjegyzésekben.

A bölcsesség jó, mert lehet
az egyik oknál fogva azt mondta, de a másik miatt hasznos.
„Fidget”, Szergej Lukjanenko.

Ebben a bejegyzésben arról fogunk beszélni, hogyan kell telepíteni az erőforrásra, hogyan készítsünk ikont egy normál képről, és hogyan lehet egy meglévő ikont újra cserélni. Leírom, hogyan csinálom. Nem tartom kizártnak, hogy vannak más módok is, de ezek számomra ismeretlenek.

Valójában, ikon létrehozása a webhelyhez- egyszerű és egyértelmű eljárás. Természetesen időnként felmerültek ezzel kapcsolatos kérdések, és minden kérdezőnek személyesen válaszoltam. De a lustaság végül úrrá lett rajtam, és ez a jegyzet megíródott. Most ide küldhet minden érdeklődőt.

Ismétlem, itt a személyes tapasztalataim vannak leírva. Hogy, hogyan készítsek ikonokat. Esztéták és ínyencek elhaladhatnak mellette.

Tehát kezdjük.

Előtt, hogyan kell ikont telepíteni egy webhelyre, létre kell hozni. Kezdjük ezzel.

§ 1. Hogyan készítsünk ikont

Le van írva, mi az a favicon. Ezért térjünk át közvetlenül a létrehozásának folyamatára. Hogyan csinálom:

Ennyi – a webhely ikonja készen áll.

A módszer árnyalatai:

• ~ Egyszerű rajzokat kell kiválasztania valamiről. Nagy. Ha sok valami van a képen, és kicsi, akkor az ikon elmosódott folt formájában jelenik meg. És többé nem ikon lesz belőle, hanem a madarak életének nyoma;


• ~ A módszert csak XnView-ban tesztelték. Mentéskor újrakódolja a képet, ahogy kell.

§ 2. Ikon létrehozása az oldalhoz

Valójában a képet favicon.ico néven mentve létrehoztunk egy ikont az oldalhoz.

§ 3. Hogyan telepítsünk ikont a webhelyre

A favicon.ico fájlunkat bemásoljuk az oldal gyökérmappájába (ahol az oldal főoldala található), és kész. , és a szolgáltatásokkal rendelkező többiek automatikusan megtalálják és megjelenítik ikonunkat. A lényeg az, hogy a favicon.ico legyen, és a webhely gyökérmappájában legyen.

§ 4. A webhely ikonjának megváltoztatása

Cserélje le a címen található favicon.ico fájlt a sajátjára, amelyet a fenti módszerrel hoztak létre.

5. § Miért van egyáltalán szükség rá?

Mi adja az ikon jelenlétét a webhelyen? Nos, a legfontosabb dolog az, hogy az oldal saját identitást kapjon. A böngészőben:

A keresőben (

Bármilyen eszközt használva gyakran megunjuk ugyanazt a felületet, és változtatni akarunk valamit. Minden eszköz esetében a rendszer megjelenése eltérő módon változik. Az ikonok minden interfész egyik elemi összetevői, megváltoztatásuk nem nehéz. Az interneten számos ikonkészletet találhat mindenféle eszközhöz. De nem egyediek, nem egyéniek. Ezért ebben a cikkben megvizsgáljuk, hogyan készítsünk saját kezűleg egy ikont, hogy az egyedi legyen.

Két egyszerű program példáját fogjuk megvizsgálni. Mivel segítségükkel nagyon egyszerű ikont készíteni egy mappához, fájlhoz, parancsikonhoz vagy egyéb elemekhez, ez a szoftver kiváló eszközzé válik a felület megjelenésének megváltoztatására, egyéniesítésére. Ezeknek az egyszerű programoknak köszönhetően ikonokat készíthet különféle operációs rendszerek interfész elemeihez.

Fasticona 1.0 ingyenes hordozható

Még soha nem láttam egyszerűbb programot ikonok létrehozására. Még telepítést sem igényel. A Fasticona 1.0 ingyenes hordozható nem teszi lehetővé az ikonok rajzolását, hanem kész képekből készíti azokat. Bármilyen képből készíthet ikont (akár a saját fotójából is), a program többféle formátumot támogat. Egyszerűen fogalmazva, ez csak egy képátalakító.

Mielőtt egy képből ikont készítene, töltse be a képet a programba a „Fájl megnyitása” gombbal. Válassza ki a szükséges paramétereket: méret, színmélység (színek és bitek mintánként), mentési mappa (kimeneti útvonal, alapértelmezés szerint az a mappa, ahová az indítófájlt menti) és az ikonfájl neve (kimeneti név).

Az eredményül kapott fájl *.ico formátumban kerül mentésre. És csakis benne.

Seanau Icon Tool Kit 6.0

A Seanau Icon Tool Kit 6.0-t telepíteni kell a számítógépére, de nagyon kevés helyet foglal el. A funkcionalitása fejlettebb. Ez a program lehetővé teszi, hogy ikont készítsen egy képből, vagy saját maga rajzolja meg. Ehhez sokféle eszköz áll rendelkezésére.

Az Icon Tool Kit támogatja a rétegekkel való munkát, lehetővé teszi a színmélység, az átlátszóság beállítását, és különféle szűrők állnak rendelkezésre. A kimeneti fájl *.ico, *.png, *.bmp, *.jpg vagy *.gif formátumban érhető el. Figyelemre méltó, hogy ez a szoftver lehetővé teszi stílusok alkalmazását a létrehozott ikonokra, például Mac, Vista és mások. Az ikonok készítésére szolgáló program letöltése azoknak ajánlott, akik kreatívabb ötleteket szeretnének megvalósítani a felületen.

A Favicon egy webhely egyik jellegzetessége. Ez egy újabb lépés a vállalati arculat kialakítása és használata felé. A Favicon egyszerű szavakkal egy ikon (kép), amely a böngészőben a címsor előtt jelenik meg. A favicon akkor is használatos, ha egy oldalt ad hozzá a könyvjelzőkhöz. Elfogadom, hogy a felhasználó számára kényelmesebb lesz megtalálni webhelyét a könyvjelzők között, ha ott megjelenik a „márkás” ikonja.

Azt hiszem, mindannyian észrevettétek a kedvenc oldalait, amikor felkeresték kedvenc webhelyeiket. Így néz ki (a Google Chrome böngészőben):

És összehasonlításképpen az ikon megjelenítése az Internet Explorer böngészőben:

Hogyan készítsünk ikont egy weboldalhoz

Favicont készíthet a Photoshop (vagy más grafikus szerkesztő) szabványos funkcióival, vagy különféle webszolgáltatások használatával.

Favicon rajzolása webszolgáltatás segítségével

A favicon elkészítésének legegyszerűbb módja a www.favicon.cc szolgáltatás használata. Ez így néz ki:

Ikon rajzolásához csak ki kell választania a kívánt színt, átlátszóságot és meg kell rajzolnia a kívánt körvonalat. Egy ikon létrehozásakor azonnal megtekintheti az előnézetet:

Készítsen Favicont egy kész képből

Egy kész ikon .png formátumba konvertálásához (amely egyébként favicon beállítására is használható), használhat egy másik webszolgáltatást: favicon.ru.

A Favicon telepítése a webhelyre

Ha elkészült az ikon, letöltheti formátumban .ico. Favicon hozzáadásához helyezze el a favicon.ico fájlt a webhely gyökérkönyvtárába, és adja hozzá a címkék közé. vonal:

Alapértelmezés szerint, ha egy webhely ikonja nincs kifejezetten megadva, a böngésző megpróbálja betölteni a favicon.ico fájlt a gyökérből. De jobb biztonságban lenni.

(Internet Explorerhez).

A favicon mérete 16x16, 32x32 lehet.

Hasznos megjegyzés

Egy ikonfájl kiterjesztése nem csak .ico, hanem .png is lehet, és ez utóbbi opció használata javasolt. Ennek az az oka, hogy a nagy felbontású megjelenítő eszközök (pl. iPhone, iPad, iPod) alapértelmezés szerint 57x57-es ikonmérettel rendelkeznek. Ehhez jobb, ha elkészíti az ikon második verzióját (nagyobb felbontásban), és hozzáad egy további sort:

De érdemes megjegyezni, hogy ebben az esetben az ikon a sarkoknál lekerekítve lesz, és kiemelés kerül rá (ezt maga az eszköz teszi meg automatikusan). Ennek elkerülése érdekében inkább apple-touch-ikonírni kell apple-touch-icon-előre összeállított.