Kako stvoriti ikonu za Windows aplikaciju. Kako napraviti ico. Izrada .ico ikone za programe. Izrada favicona pomoću online usluga

Danas ćemo razgovarati o tome kako pravilno stvoriti ikonu za svoj projekt. U nastavku su neki korisni savjeti o dizajnu ikona, kao i uslugama za njihovu izradu.

Analiza asocijacija

Prije izrade ikone za svoj projekt, morate identificirati ključne riječi, a zatim pokušati pronaći savršeni prikaz ili metaforu za njih. Morat ćete potražiti slike i simbole koji imaju izravan odnos sa željenom ključnom riječi. To će vam pomoći da pronađete prave slike za svoje ikone koje su intuitivne za korisnika.

Istraživanje konkurencije

Prilikom izrade dizajna ikona za mobilnu aplikaciju, pokušajte ne ponavljati ili kopirati dizajn drugih ikona. Zašto je ovo potrebno? Zamislite da tražite upravitelja zadataka. Pogledajte ikone aplikacija u nastavku i zapitajte se kojeg menadžera biste odabrali instalirati na svoj pametni telefon?

Ikona Wunderlist (prva) ima dobru usporedbu s drugim ikonama aplikacija. Najvjerojatnije će korisnik preuzeti Wunderlist i time će aplikacija dobiti više instalacija.

S druge strane, analiza će pomoći u određivanju glavne ideje koju konkurenti koriste u svojim ikonama kako bi prikazali glavnu funkciju aplikacije.

Svrha ikone

Prilikom dizajniranja ikone važno je razmotriti kako će se koristiti i koje su njezine funkcije.

Na primjer, ikona mobilne aplikacije trebala bi obavljati funkciju identifikacije i razlikovati je od ostalih aplikacija na pametnom telefonu. To se odnosi i na popis programa koji se već nalaze na pametnom telefonu i u trgovini aplikacija (App Store, Google Play).

Također morate razumjeti da fokusiranjem isključivo na marketinšku komponentu ikone ne smijemo zaboraviti na scenarije kada će se aplikacija početi koristiti. Ima smisla da se ikona fokusira ne na jedno preuzimanje, već na svakodnevnu upotrebu proizvoda od strane običnog korisnika.

Jedinstvenost i prepoznatljivost

Kada promovirate svoju marku, trebali biste uložiti sve napore da povećate vidljivost ne samo vašeg logotipa, već i vaše ikone. Da biste to učinili, mora biti jedinstven i u isto vrijeme jasno povezan s vašim projektom, kao i da možete razlikovati Mercedes od drugih marki automobila po znački i pronaći Nestle čokoladu na pultu supermarketa.

Manje detalja

Što je ikona sažetija, to je u svakom slučaju lakše zapamtiti i prepoznati. Mnogi dizajneri teže što estetskijem izgledu ikone, dodajući veliki broj detalja koji ne obavljaju nikakvu funkciju, osim ukrasa i slučajno začepljuju informacijsko polje ikone. Ovo nije fotografija, ovdje nisu potrebni pedantni detalji. Osim toga, u maloj veličini, mali dijelovi se jednostavno spajaju u bezobličnu masu.

Druga ikona aplikacije izgleda bolje zbog svoje jednostavnosti i minimalizma.

Dajte prednost veličini

Postoje dva pristupa stvaranju ikone.

Prvi je stvoriti ga u velikoj veličini s maksimalnim detaljima i na temelju toga izraditi opcije za manju veličinu i shematski izgled. Drugi je suprotan prvom: prvo se stvara ikona najčešće korištene veličine, a dodavanjem ili oduzimanjem detalja razrađuju se ostale opcije. Kojim putem krenuti? Odlučite sami, obje opcije rade.

Trebate više ikona? Napravite set!

Ako vaš projekt zahtijeva nekoliko ikona, stvorite ih sve odjednom u istom stilu. Mogu imati istu boju, debljinu obrisa, pojedinačne detalje i još mnogo toga, a istovremeno se ikone mogu razlikovati po svom sadržaju. To će osigurati skladan i dosljedan izgled sučelja.

Nemojte štedjeti prostor

Ikone su različite: široke i uske, visoke i niske. Ujedinjuje ih jedna preporuka - nemojte štedjeti slobodan prostor i ne pokušavajte ispuniti cijelo dostupno područje slikama ili natpisima. Pustite da ikona diše, ostavite malo prostora oko gotove kompozicije kada se postavi u sučelje ili negdje drugdje. Istodobno, za takve slučajeve nema jasne naznake veličine uvlačenja u pikselima, samo se usredotočite na vlastitu vizualnu percepciju.

Različite ikone za različite platforme

Ako trebate izraditi ikonu za različite platforme, možete je uzeti kao osnovu i samo je napraviti manje stilske prilagodbe, kako biste na kraju dobili nekoliko različitih ikona, a pritom demonstrirali njihov afinitet.

Boja je jako bitna

Odabir prave boje uvelike određuje percepciju vaše ikone. Pokušajte ne koristiti više od dvije kontrastne boje. Usput, Google je postavio uvjetna ograničenja, pa čak i specificirao skupove kompatibilnih boja u Material Designu. Koristite ih u svojim dizajnima.

Učinite bez teksta

Učinkovita ikona ne treba riječi da bi prenijela svoj sadržaj. Ostavite tekst za web stranice ili banner oglase i pokušajte bez njega prilikom izrade ikone. Zašto je to? Jer kada smanjite veličinu ikone, tekst će postati nečitljiv i izgledat će kao obična mrlja u boji.

Pronađite ravnotežu između originalnosti i lakoće percepcije

Kao što možete vidjeti u bilo kojoj trgovini aplikacija, postoji mnogo različitih ikona. Eksperimenti su dobri, izvorni oblik uvijek privlači pažnju. Ali nemojte zaboraviti na nezaboravnost: što je oblik ikone jednostavniji, to je lakše zapamtiti. Putokazi su dobra ilustracija u ovom slučaju – jednostavni su oblici koji se lako čitaju i pamte, čak i ako vozač vozi pristojnom brzinom.

Za svoju prijavu morate smisliti nešto slično - originalno i jednostavnog oblika. Treba imati na umu da se ikone različito prikazuju na zaslonima mobilnih uređaja – u većim ili manjim veličinama. Stoga također morate paziti da opcija koju kreirate uvijek izgleda privlačno.

Ne zaboravite na pozadinu

U trgovini aplikacija ikone se obično prikazuju na svijetloj pozadini - bijeloj ili sivoj. No pozadina uređaja na koji korisnik preuzima vašu aplikaciju može biti bilo koje boje. Stoga ne zaboravite provjeriti koliko je vaša ikona privlačna i uočljiva na određenoj pozadini.

Na ikoni nema mjesta za elemente sučelja aplikacije

Ne stavljajte elemente sučelja aplikacije na njegovu ikonu. To zbunjuje korisnika i smatra se lošim.

Ikona bi trebala biti informativna

Učinkovita ikona svojim izgledom komunicira funkciju aplikacije. Tako će korisnik moći razumjeti čemu služi vaš proizvod prije nego što pogleda opis. Na primjer, za ikone igrača koriste se slike bilješki, instrumenata ili vizualizatora, za kamere ili grafičke urednike - objektiv kamere, a za glasnike poput Vibera - simbolički oblaci poruka.

Iz ikone korisnik zaključuje što ga čeka unutar aplikacije. Dakle, ikona treba biti jasna, sažeta, minimalno objekata, slika treba biti čitljiva na letimičan pogled.

Ksenia Mayevskaya, programer aplikacija Remember-Remind.

Sada kada smo naučili savjete o tome kako stvoriti učinkovitu ikonu, predstavljamo vam korisne usluge za stvaranje ikone.

Korisne usluge i resursi za stvaranje ikone

Internetska usluga na ruskom jeziku za stvaranje pojedinačnih ikona i cijelih skupova. Veliki izbor ikona i opcija za njihovo uređivanje.

Ikone fontova za korištenje s Twitter Bootstrapom

Ovdje možete pronaći i bešavne teksture i gotove palete. Također na ovom resursu postoji forum na kojem se odvija komunikacija. Izvrsna usluga za usklađivanje boje vaše ikone.

Profesionalna online usluga koja vam omogućuje generiranje sheme boja u skladu s pravilima boja na kotaču boja.

Automatsko stvaranje gradijenata.

Resurs koji je idealan za one koji se ne mogu odlučiti za boje i fontove za svoj projekt. Zanimljivo je da se paleta i fontovi mogu odabrati ovisno o području poslovanja.

Upravljanje ,posvećen dizajnu materijala za Android

Vodiči o Appleovom iOS ljudskom sučelju.

Korak po korak upute za stvaranje ikone

Možete stvoriti ikonu za web stranicu ili aplikaciju pomoću grafičkih programa ili mrežnih usluga.

Prvi način je prikladan za iskusne dizajnere za mukotrpan rad. Online alati prikladni su za brzo stvaranje ili veliki broj ikona, na primjer, za web stranicu, uslugu. Online alati su jednostavniji i lakše razumljivi pa su idealni za početnike.

Jedna od online usluga koja vam omogućuje brzo stvaranje modernih ikone je IconsFlow.

Nekoliko riječi o mogućnostima usluge:

• Mogućnost izvoza ikona u SVG (vektorske), PNG i ICO obrasce;
• Velika funkcionalnost uređivanja;
• Mogućnost stvaranja paketa ikona u istom stilu;
• Besplatne opcije.

Sada prijeđimo na proces stvaranja ikone.

Da biste stvorili ikonu ili cijeli skup, prvo morate pronaći željenu ikonu ili nekoliko odjednom u mrežnom uređivaču.

Zatim, pomoću alata za uređivanje, možete ga prilagoditi, na primjer, možete postaviti željenu boju za ikonu, pozadinu, dodati drugu ikonu, oblik, tekst, nacrtati novi element.

Nakon što se ikona (ili ikone) uredi, možete raditi na njezinoj pozadini, mjerilu, sjenama, dodati gradijent.

Jedna od prednosti usluge je da ako izradite cijeli skup ikona, sve gore navedene izmjene možete raditi u serijama.

Odnosno, klikom na jedno mjesto mijenjate dizajn svih ikona odjednom: sjene, veličinu, pozadinu itd. Vrlo zgodno ako trebate stvoriti 3-5 ili više ikona.

Nakon izrade ikona, servis će od vas tražiti da kreirate račun na kojem možete besplatno preuzeti ikone ili naručiti plaćeni plan.

To je sve.

Kao što vidite, čak i stvaranju tako malog elementa kao što je ikona treba pristupiti sa svom odgovornošću. Dobar dizajn ikona privlači pažnju korisnika, dok ih loš dizajn može isključiti.

Favicon je mala ikona koja se pojavljuje pored naziva web-mjesta u prozoru preglednika ili u rezultatima tražilice. Ne nosi nikakvu funkciju za SEO, ali njegova upotreba vam omogućuje da povećate prepoznatljivost stranice i, kao rezultat, CTR indikator. Također možete izraditi retine faviconoks. Koje veličine treba biti favicon? Favikoni obično dolaze u veličinama 16x16px ili 32x32px.

U kojem formatu ću primiti svoj favicon?

Nakon što izradite favicon, dobit ćete favicon.ico datoteku za stranicu, odnosno datoteku s nastavkom * .ico. On je taj koji će se morati koristiti u budućnosti. Kako napraviti favicon online? Koristite online generator favicona na našoj web stranici. Ne samo da možete stvoriti favicon od slike, već i koristiti ugrađeni uređivač koji vam omogućuje stvaranje bilo koje ikone za web-mjesto.

Kako postaviti favicon na stranicu

Morate prenijeti favicon u korijenski direktorij stranice da biste dobili adresu kao što je http://sitename.ru/favicon.ico. Ovo je put do slike. Zatim morate staviti kod u oznaku. Trebalo bi izgledati ovako:

 ...
 
 
 ...

Zašto specificirati put do favicona?

Neka web-mjesta koriste različite favikone kako bi se korisnici mogli bolje kretati odjeljcima resursa, pa morate odrediti put. Ako koristite jedan favicon za cijelo web-mjesto, ne morate navesti put do njega.

Favicon će se pojaviti u SERP-ovima?

Google ne prikazuje favikone. Yandex ima takozvane favikone za indeksiranje, ovaj proces traje od tjedan do mjesec dana.

Kada koristimo bilo koji uređaj, često nam dosadi isto sučelje i želimo nešto promijeniti. Izgled sustava mijenja se različito za svaki uređaj. Ikone su jedan od osnovnih građevnih blokova svakog sučelja, a mijenjanje ih nije teško. Na internetu postoji mnogo skupova ikona za sve vrste uređaja. Ali oni nisu jedinstveni, nisu pojedinačni. Stoga ćemo u ovom članku razmotriti kako sami napraviti ikonu, tako da bude vaša, jedinstvena.

Razmotrit ćemo primjer dva jednostavna programa. Budući da je uz njihovu pomoć vrlo jednostavno napraviti ikonu za mapu, datoteku, prečac ili druge elemente, ovaj softver postaje izvrstan alat za promjenu izgleda sučelja i njegovu individualizaciju. Zahvaljujući ovim jednostavnim programima, možete napraviti ikone za bilo koje elemente sučelja različitih operativnih sustava.

Fasticona 1.0 besplatni prijenosni

Nikad nisam vidio jednostavniji program za kreiranje ikona. Ne zahtijeva čak ni instalaciju. Fasticona 1.0 free portable ne dopušta crtanje ikona, već ih pravi od gotovih slika. Možete napraviti ikonu od bilo koje slike (čak i od vlastite fotografije) program podržava razne formate. Jednostavnim riječima, to je samo pretvarač slika.

Prije nego što napravite ikonu od slike, učitajte sliku u program pomoću gumba "Otvori datoteku". Odaberite potrebne parametre: veličinu, dubinu boje (boje i bitovi po uzorku), mapu za spremanje (izlazni put, prema zadanim postavkama mapa u koju se sprema datoteka za pokretanje) i naziv datoteke ikone (izlazni naziv).

Dobivena datoteka sprema se u * .ico formatu. I samo u njemu.

Seanau Icon Tool Kit 6.0

Seanau Icon Tool Kit 6.0 morat će biti instaliran na vaše računalo, ali će zauzeti vrlo malo prostora. Njegova je funkcionalnost naprednija. Ovaj program vam omogućuje da napravite ikonu od slike i da je sami nacrtate. Za to ima širok raspon alata.

Icon Tool Kit podržava rad sa slojevima, omogućuje podešavanje dubine boje, transparentnosti, postoje razni filteri. Izlaznu datoteku možete dobiti u * .ico, * .png, * .bmp, * .jpg ili * .gif. Važno je napomenuti da vam ovaj softver omogućuje primjenu stilova na stvorene ikone, na primjer, Mac, Vista i druge. Preuzimanje programa za stvaranje ikona preporučuje se onima koji žele više utjeloviti kreativne ideje u sučelju.

Favicon za web stranicu jedna je od njezinih značajki. Ovo je još jedan korak prema stvaranju i korištenju korporativnog identiteta. Favicon, jednostavno rečeno, je ikona (slika) koja se prikazuje u pregledniku prije adresne trake. Favicon se također koristi prilikom dodavanja stranice u oznake. Slažem se, korisniku će biti prikladnije pronaći vašu web-lokaciju u oznakama ako je tamo prikazana vaša "korporativna" ikona.

Mislim da je svatko od vas primijetio favicon kada je posjetio svoje omiljene stranice. To izgleda ovako (u pregledniku Google Chrome):

I za usporedbu, prikaz ikone u pregledniku Internet Explorer:

Kako napraviti ikonu za web stranicu

Favicon možete napraviti koristeći standardne značajke Photoshopa (ili drugog grafičkog uređivača) i koristeći sve vrste web usluga.

Crtanje favicona pomoću web usluge

Najlakši način za stvaranje favicona je korištenje usluge www.favicon.cc. izgleda ovako:

Da biste nacrtali ikonu, trebate samo odabrati željenu boju, neprozirnost i nacrtati željene staze. Prilikom izrade ikone možete odmah pregledati:

Napravite favicon od prikazane slike

Za konvertiranje gotove ikone u .png format (koji se, inače, može koristiti i za postavljanje favicona), možete koristiti drugu web-uslugu: favicon.ru.

Instalirajte Favicon na web mjesto

Kada je ikona spremna, možete je preuzeti u formatu .ico... Da biste web-mjestu dodali favicon, postavite datoteku favicon.ico u korijenski direktorij web-mjesta i dodajte između oznaka crta:

Prema zadanim postavkama, ako ikona za web-mjesto nije eksplicitno navedena, preglednik pokušava učitati datoteku favicon.ico iz korijena. Ali bolje je igrati na sigurno.

(za Internet Explorer).

Veličina favikona može biti 16x16, 32x32.

Korisna napomena

Datoteka ikone može imati ne samo ekstenziju .ico, već i .png, a preporuča se koristiti potonju opciju. To je zbog činjenice da uređaji s visokom razlučivosti zaslona (na primjer, iPhone, iPad, iPod) prema zadanim postavkama imaju veličinu ikone 57x57. Da biste to učinili, bolje je napraviti drugu verziju ikone (u višoj razlučivosti) i dodati dodatni redak:

No, treba napomenuti da će u ovom slučaju ikona biti zaobljena u kutovima i na njoj će biti postavljen odsjaj (to automatski radi sam uređaj). Da bi se to izbjeglo, umjesto apple-touch-icon treba napisati apple-touch-icon-prekomponirano.