• Главная
  • Карта сайта
Не найдено

Kā izveidot vietni: noderīgi padomi un pakalpojumi

  1. Kā izveidot favikonu
  2. Kā izveidot favicon Photoshop
  3. Kā saglabāt favikonu
  4. Kā ievietot favicon vietni
  5. Kā nomainīt favicon
  6. Kā izveidot sarežģītākus favikonus

Ir grūti uzminēt, kas ir favikons, kad pirmo reizi dzirdat šo vārdu. Šī ir miniatūra ikona, kas tiek parādīta pārlūkprogrammu cilnēs adrešu līnijās un citās jomās, atkarībā no lietotās operētājsistēmas un interneta pārlūkprogrammas. To var droši nosaukt par vienu no sarežģītākajiem un kaprīzākajiem elementiem mājas lapas dizainā.

Labas favicon izveide ir diezgan sarežģīta, jo ikona ir maza, tai jābūt skaidrai un jāparāda kaut kas saistīts ar jūsu vietni
Labas favicon izveide ir diezgan sarežģīta, jo ikona ir maza, tai jābūt skaidrai un jāparāda kaut kas saistīts ar jūsu vietni. Favicon izveide, kas ir saderīga ar visām populārākajām pārlūkprogrammām, var būt arī grūts uzdevums. Šajā rakstā mēs aplūkosim visus sarežģītos tā izveides aspektus. Ja jums ir nepieciešams logotips, tad mums ir rakstu kā to izdarīt.

Kā izveidot favikonu

Sāksim ar favikona dizainu. Labam dizainam, neskatoties uz tās kompaktumu, jāatspoguļo jūsu vietnes būtība un jābūt organiskās identitātes sastāvdaļai. Parasti ikona ir uzņēmuma grafiskā zīme (ikona), nevis vesels logotips (ikona, teksts un sauklis).

Kā tīmekļa vietne, šīs tīmekļa vietnes izmanto savas ikonas (vai attēlus tuvu tām) Kā tīmekļa vietne, šīs tīmekļa vietnes izmanto savas ikonas (vai attēlus tuvu tām).

Favikona tekstu nedrīkst izmantot, jo šis teksts būs neizlasāms nelielā attēla izmēra dēļ. Vienīgie izņēmumi no šī noteikuma ir pasaules slavenās teksta rakstzīmes, kas tiek automātiski saistītas ar konkrētu zīmolu. Piemēram, tiešsaistes resurss Wikipedia atstāja favicon lielo burtu “W” un Facebook - burtu “F”.

Šajos faviconos ir burti, kas ir cieši saistīti ar konkrētu zīmolu
Šajos faviconos ir burti, kas ir cieši saistīti ar konkrētu zīmolu. Piemēram, Facebook izmanto savu grafisko zīmi. Ņemiet vērā arī to, ka pikseļi ir redzami Disney attēlā. Tas ir tāpēc, ka ekrānuzņēmums tika uzņemts tīklenes displejā, kas ir saderīga ar 16 × 16 ikonām, savukārt tīmekļa vietnes izmanto 32 × 32 ikonas.

Tā kā faviconi ir mazi attēli, katram pikseļa lomam ir svarīga loma. Dažreiz pēc logotipa samazināšanas kļūst redzami atsevišķi pikseļi, kuru dēļ attēls kļūst „izplūdis”. Lai panāktu skaidrību, ikona jāmaina pikseļu līmenī.

Lai to izvairītos, logotips ir jāmaina, izmantojot īpašus redaktorus, piemēram, Photoshop vai GIMP
Lai to izvairītos, logotips ir jāmaina, izmantojot īpašus redaktorus, piemēram, Photoshop vai GIMP. Vispirms jums ir jāsamazina attēla izmērs līdz 64x64 pikseļiem (tas ir lielākais izmērs). Tad jums ir nepieciešams rediģēt katru pikseļu, izmantojot zīmuļa rīku, līdz attēls ir skaidrs. Tas ir darbietilpīgs process, bet rezultāts ir tā vērts. Kad 64x64 favicon ir gatavs, jums ir jādara tas pats darbs ar attēlu 16 × 16, 24 × 24 un 32 × 32 pikseļi. Tik daudz izmēru, kas nepieciešams, lai attēlotu pareizi, kas parādīts visos pārlūkos un sīkrīkos:

  • 64x64 - Safari pārlūka grāmatzīmes;
  • 32x32 - augstas izšķirtspējas displeji (tīklene);
  • 24x24 - grāmatzīmes Internet Explorer un MicroSoft Edge;
  • 16x16 - Google Chrome un citas pārlūkprogrammas.

Kā izveidot favicon Photoshop

Vispirms jums ir jāizveido dažas audeklas ar iepriekš minētajiem izmēriem.

Pēc tam uz audekla jāpievieno ikona, burts vai cits attēls
Pēc tam uz audekla jāpievieno ikona, burts vai cits attēls.

Pēc tam uz audekla jāpievieno ikona, burts vai cits attēls

Kā saglabāt favikonu

Izveidojot dažāda lieluma ikonas, saglabājiet katru kā caurspīdīgu PNG failu (24 biti). Programmā Photoshop varat izmantot funkciju Saglabāt tīmeklī, kas pieejama izvēlnē Fails. Tad jums ir nepieciešams apvienot visus PNG failus vienā ICO failā. Vienlaikus varat izmantot gan PNG failus, gan ICO failus, bet bieži vien pat Safari un Chrome dod priekšroku tikai ICO formātam. Manuprāt, ir vieglāk izveidot vienu ICO failu. ICO formāts nav ļoti izplatīts, bet par laimi ir vairāki rīki, kas var palīdzēt pārveidot failus uz šo formātu. Šim nolūkam es gribētu izmantot X-Icon Editor . Šis ir bezmaksas tiešsaistes pakalpojums, kas uzreiz lejupielādētos attēlus pārvērš vienā ICO failā, pēc tam to var lejupielādēt. Tas nav nekas sarežģīts, vienkārši izpildiet vietnes norādījumus. Ja jūs uzskatāt sevi par izmisīgu personu, varat eksperimentēt ar šī pakalpojuma pikseļu redaktoru un piesaistīt favikonu. (Lai gan es labprātāk rediģēju favicons profesionālā redaktorā, piemēram, Photoshop).

Augšupielādējot PNG attēlus uz X-Icon redaktoru, izejā saņemsiet vienu ICO failu
Augšupielādējot PNG attēlus uz X-Icon redaktoru, izejā saņemsiet vienu ICO failu.

Kā ievietot favicon vietni

Tātad jums jau ir ICO fails. Tagad jums tas jāpievieno tīmekļa vietnei. Pārsauciet failu uz favicon.ico un ievietojiet to sava vietnes saknes mapē (kur tiek saglabāts index.html fails un citi standarta faili). Pēc veiksmīga papildinājuma jūs varat to apskatīt savā vietnē .com / favicon.ico. Gandrīz visas pārlūkprogrammas meklē favicon.ico failu saknes mapē. Tādēļ ir svarīgi, lai lejupielādētu favicon šajā mapē. Lai nodrošinātu saderību ar dažādām pārlūkprogrammām, labāk nav pievienot HTML elementus vai saites, kas norāda tās atrašanās vietu. Šis triks darbojas visām pārlūkprogrammām, līdz IE6. Tāpat, ja jums ir WordPress vietne, tad daudzās tēmās varat pievienot favicon tēmas iestatījumos. Šo metodi var izmantot arī.

Kā nomainīt favicon

Dažu neizskaidrojamu iemeslu dēļ pārlūkprogrammas to pievieno kešatmiņai. Tādēļ, augšupielādējot jaunu ICO failu, pārlūkprogramma var turpināt rādīt jūsu veco favicon. Ko darīt šajā gadījumā? Varat pievienot pagaidu HTML failu, kas norāda jūsu jaunā favicon atrašanās vietu. Arī URL beigās jāpievieno īsa vaicājuma virkne:

<link rel = "īsceļu ikona" href = "jūsu vietne .com / favicon.ico? v = 2" />

Tātad pārlūks domās, ka tas ir unikāls URL, un tāpēc būs spiests parādīt jaunu ikonu. Pēc favicon atjaunināšanas šo HTML kodu var pilnībā noņemt. Ja nepieciešams veikt izmaiņas favicon, izmantojiet to pašu tehniku, katru reizi palielinot numuru pēc vaicājuma virknes “v”. Tādējādi pārlūks katru reizi uztvers šo URL kā unikālu un parādīs savu jauno versiju. Un neaizmirstiet izdzēst HTML kodu pēc veiksmīgas atjaunināšanas.

Kā izveidot sarežģītākus favikonus

Šajā rakstā es gribēju aprakstīt universālu un vienkāršu veidu, kā izveidot faviconus, kas darbosies praktiski jebkurā platformā. Bet web dizains un izstrāde nav pilnīga. Ja vēlaties uzzināt, kā izveidot sarežģītākas ikonas, varat mēģināt izmantot šo pakalpojumu favico.js . Tas ļauj jums izveidot dinamiskus attēlus ar dažādiem numuriem. Pateicoties šai ikonai, varat redzēt nelasīto ziņojumu skaitu, pat ja atbilstošā cilne nav aktīva. Ja vēlaties izveidot animētus faviconus tiešsaistē, varat mēģināt izmantot favicon ģeneratoru favicon.cc .

Vairāk tiešsaistes ģeneratoru jūs varat atrast šeit .

Ja vēlaties koplietot savus padomus par faviconu izveidošanu vai uzdot jautājumu, es jūs gaidīšu komentāros!

Ko darīt šajā gadījumā?
Ico?
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью