Ikona blogu menšia ako 100 kb. Vytvorte avatara pomocou programu Paint. Retina a HiDPI obrazovky

Zdravím vás milá komunita Habr! Túto krátku poznámku píšem ako dôležitý vzdelávací program pre každého, kto pracuje s rastrovými obrázkami. Zvyčajne medzi začiatočníkmi vzniká otázka, čo merať obrázky, ale skúsení špecialisti si tiež zamieňajú pojmy.

Začnime s hlavnou vecou: rastrové obrázky pozostávajú z pixelov. Toto by mohol byť koniec tohto článku, no nie každému to stačí, poďme si teda povedať o mylných predstavách a mýtoch, s ktorými som sa v praxi stretol.

DPI, PPI a zmena veľkosti

Najbežnejšou mylnou predstavou je používanie jednotiek DPI (bodov na palec) a PPI (pixelov na palec). Tieto jednotky v skutočnosti označujú tlačiarne a skenery. Môžu byť tiež použité v charakteristikách obrazovky. V podstate ide o prevodné faktory medzi fyzickými rozmermi analógového obrazu (v centimetroch alebo palcoch) a rozmermi v pixeloch digitálneho obrazu.

Napríklad 100 pixelový obrázok vytlačený pri 100 DPI bude mať veľkosť 1 palec. Všetko je jednoduché a prehľadné.

Pri zmene veľkostí v grafických editoroch sme však vyzvaní uviesť rozmery v rozmeroch, ktoré nám vyhovujú, vrátane DPI. Tu začína zmätok.

V skutočnosti sú fyzické rozmery obrázka (v centimetroch, palcoch atď.) a hodnota DPI len metainformáciami vo vlastnostiach súboru. Editor však môže tieto hodnoty použiť ako prostriedok na určenie požadovaných rozmerov pixelov.

Povedzme, že máme obrázok 3000 pixelov (štvorec), ktorý má hodnotu 300 DPI. Získame: 3000 pixelov / 300 DPI = 10 palcov. Teraz prejdite do editora (Photoshop) a zmeňte hodnotu DPI na 600. Čo získame? A to závisí od začiarkavacieho políčka „Prevzorkovať“. Ak áno, prevzorkujeme obrázok na 6000 pixelov. Ak nie, potom bude veľkosť v palcoch 5 namiesto 10 .

Pri vývoji webu teda možno všetky fyzické rozmery (DPI, centimetre, palce atď.) bezpečne ignorovať a pozerať sa výlučne na rozmery pixelov.

Obrazovky DPI/PPI

Tu sa dostávame k otázke rozlíšenia obrazovky a hustoty pixelov. Táto hustota sa správne označuje ako PPI (pixely na palec) a ukazuje, koľko pixelov je možné zobraziť na jeden palec obrazovky.

Tu často vznikajú mýtické 72 a 96 PPI, ktoré majú udávať „štandardnú“ hustotu pixelov pre obrazovky. Pre úlohy zobrazovania grafiky na webe sú nepoužiteľné. Súčasne môže byť skutočná hustota pixelov obrazovky úplne iná: zvyčajne niečo okolo 120 PPI (môžete merať a vypočítať pre vašu obrazovku).

Pamätáme si však, že rastrové obrázky sa merajú iba v pixelov a nič iné. Prečo vôbec hovoríme o PPI obrazovky? Pretože existujú obrazovky „Retina“ alebo „HiDPI“.

Retina a HiDPI obrazovky

Takéto displeje sú široko používané v mobilné zariadenia a drahé notebooky. V podstate ide o kvantitatívny nárast pixelov pri zachovaní fyzických rozmerov obrazovky (napríklad 5 palcov uhlopriečka a 330 PPI).

Pre nás ako webových vývojárov to znamená vzhľad rôznych pixelov v prehliadači: pixelov CSS (ktoré zvyčajne uvádzame vo veľkostiach prvkov) a fyzických pixelov (skutočné pixely na obrazovke). Vzorec je: Fyzické pixely = pixely CSS * DPR.
DPR je pomer pixelov zariadenia - prevodný pomer pixelov CSS na fyzické.

Pri uverejňovaní obrázka môžeme napísať štítok img s rozmermi 20 pixelov a obrázok bude mať 40 pixelov. V tomto prípade na obrazovke s DPR=2,0 uvidíme všetky pixely obrazu. Ale v tejto situácii nás absolútne nezaujímajú skutočné hodnoty PPI obrazovky.

Zároveň môžeme pre bežné obrazovky použiť obrázky s vysokou hustotou pixelov, samotný prehliadač si obrázok upraví. A opäť, DPI a PPI s tým nemajú nič spoločné, ale obrázky merané v pixeloch. O tom, ako ich zobraziť, rozhodne prehliadač, ktorý má už dva typy pixelov.

To je celý príbeh, aj keď som, samozrejme, nehovoril nič o adaptívnych obrázkoch, spôsoboch optimalizácie ich vplyvu a klientskych tipoch. Ale to je už iný príbeh.

čo je avatar? Toto je malý obrázok, ktorý je spojený s konkrétnym používateľom sociálna sieť, fórum alebo chat. Avatara si môžete stiahnuť z jedného z tisícov internetových zdrojov alebo si ho môžete vytvoriť sami. Ako to spraviť? - o tom budeme hovoriť ďalej. Na to potrebujeme program " Microsoft Paint“, ktorý je súčasťou štandardnej sady programov pre ľubovoľné operačný systém Microsoft.

Najprv sa rozhodnime, z ktorého obrázku si vytvoríme nášho jedinečného avatara. Môže to byť naša fotografia, naša obľúbená tapeta na plochu alebo roztomilý obrázok z internetu. Musíme vytvoriť avatar s veľkosťou 100 x 100 pixelov, tento formát podporuje väčšina chatov a sociálnych systémov. Ak však chcete, môžete nastaviť ľubovoľnú veľkosť obrázka, či už je to 64 x 64 alebo 150 x 150 pixelov.

Teraz otvorte program Microsoft Paint kliknutím na tlačidlo „Štart“ v dolnej časti pracovnej plochy a výberom kategórie „Príslušenstvo“ v ponuke „Programy“.

Na obrazovke vidíme:

Teraz musíme otvoriť vybraný obrázok v programe Paint. Prejdeme do sekcie „Súbor“, ktorá sa nachádza v hornej časti okna programu, potom kliknite na „Otvoriť“ a nájdite náš obrázok v zozname.

Otvorte obrázok

Teraz začína hlavná práca na vytvorení Avy. V ponuke postupujte podľa nasledujúcej cesty „Výkres“ - „Atribúty“. Vidíme nasledujúci obrázok:

Venujme pozornosť veľkosti pôvodného obrázka. Naša je 1024 na šírku a 768 na dĺžku. Zapíšme si tieto parametre. Potom kliknite na tlačidlo „OK“ a pokračujte v práci. Opäť prejdeme do sekcie „Kresba“. Tam nájdeme možnosť „Roztiahnuť/Nakloniť“. Vyberte ho a na obrazovke sa zobrazí nasledovné:

Teraz si spomeňme na pôvodné parametre nášho obrázku (1024 na šírku a 768 na dĺžku). Toto je 100% vertikálne aj horizontálne. Urobíme niekoľko malých výpočtov a zistíme, že veľkosť hotového avatara by nemala presiahnuť 16% zdroja. Do polí „Horizontal“ a „Vertical“ zadajte číslo 16. Kliknite na „OK“ a obdivujte náš výtvor s rozmermi 164x123 pixelov. Netreba zabúdať, že mierime na obrázok so stranou 100 pixelov.

Dostaneme:

Prejdite do časti „Upraviť“ a vyberte možnosť „Vybrať všetko“. Bodkovaným rámom vyberieme oblasť kresby, ktorú chceme vidieť ako ava. Kurzorom je tu kríž so šípkami.

Kliknite na obrázok pravým tlačidlom myši. V dialógovom okne vyberte „Kopírovať“ a postupujte podľa ponuky horný panel programy. Tam vyberieme možnosť „Vytvoriť“. Neznepokojujte sa, keď sa vás program Paint spýta, či chcete uložiť zmeny do súboru; pokojne kliknite na tlačidlo Nie. Keď sa zobrazí prázdny hárok nového dokumentu, prilepte tam skopírovanú časť.

Robí sa to takto. Nastavíme parametre poľa: obmedzíme dĺžku a šírku na 100 pixelov. Uistite sa, že mernými jednotkami sú pixely alebo body. Dávame tiež pozor, aby bola „Paleta“ farebná. Ak potrebujete vytvoriť avatar s inými parametrami, uveďte ich v tejto časti (80x80, 150x150 alebo 64x64 pixelov).

Čím menšia je požadovaná veľkosť obrázka, tým väčšie percento zdroja musíme nastaviť.

Takže máme čistý biely štvorec so stranou 100 pixelov.

→ Stránky → Výber obrázkov so šírkou a výškou 100 pixelov, stiahnite si avatary

Táto stránka obsahuje veľa zaujímavých obrázkov, ktoré sa dajú použiť ako avatary takmer všade, pretože... ich veľkosť je 100 x 100. To znamená, že výška a šírka sa rovnajú 100 pixelom (bodom na obrazovke). Táto sekcia obsahuje avatary neroztriedené podľa témy, vďaka čomu je vyhľadávanie zaujímavejšie.

Obrázok s okom a mihalnicami z ohňa. Stiahnite si nezvyčajný avatar s ohnivými mihalnicami a zeleným okom.

Animovaný obrázok so siluetou vlka v hmle a vtákov lietajúcich v pozadí. Avatar nie je farebný, ale veľmi zaujímavý. Avatar si môžete stiahnuť zo stránky alebo jednoducho skopírovať kód na jeho umiestnenie.

V avatarovi má býk rohy. Stiahnite si obrázok so silným zvieraťom, nahnevaným býkom. Takýto strohý avatar je vhodný pre používateľov s násilnou povahou, ale aj moderátorov.

Na obrázku je hlava čierneho vtáka - veža; na avatarko.ru si môžete stiahnuť avatary s rôznymi vtákmi, vrátane veží, v sekcii s vtákmi.

Tu je vtipný avatar s neprístupným obrázkom, ale stále je niečo lepšie ako nič, takže avatar má kačicu, prepáčte.

Animovaný obrázok bežiaceho dievčaťa so zdvihnutým chvostom. Stiahnite si nakreslený avatar s animáciou dievčaťa.

Na obrázku je nakreslený škrečok a text varujúci, že osoba, ktorá sa skrýva pod avatarom hlodavca, je 100% škrečok. Na avatarko.ru si môžete stiahnuť tohto skvelého avatara so skutočným škrečkom, aj keď nakresleným.

Obrázok pečate hračky, ktorú možno použiť ako avatar na fórach a blogoch. Stiahnite si avatar s plyšovou pečaťou na webovú stránku.

Stiahnite si lahodný obrázok s tanierom vermicelli a paradajkami. Vo všeobecnosti avatar pre milovníkov jedla. Tento avatar je exkluzívny; je zakázané uverejňovať ho na iných stránkach ako obsah.

Animovaný avatar s mestskými domami. Stiahnite si čiernobiely obrázok s domami a animáciou oblakov.

Avatar obsahuje logo McDonald's vytvorené z dvoch veží a dvoch lietadiel a nápis "Eat this." Stiahnite si obrázok pre neprajníkov Američanov.

Obrázok s levom Alexom, ktorý dvíha obočie z karikatúry Madagaskar. Stiahnite si animovaný avatar kreslenej postavičky leva z Madagaskaru.

Avatar so zombie s vydlabanými očami v klobúku a šatke s animovanými prstami. Hororový obrázok so zombíkmi v šedých tónoch s animáciou.

Animovaný obrázok s uhorkou na vidličku. Stiahnite si skvelého avatara s uhorkovým občerstvením.

Avatar so sediacim vrabcom, ktorý vyzerá ako malá guľa s nohami a zobákom. Stiahnite si obrázok s malým vtákom, stálym susedom človeka.

Krásny obrázok s kŕdľom netopierov na pozadí okrúhleho mesiaca. Nie je pravda, že tieto netopiere sú upíri, ale na tejto stránke si môžete stiahnuť dobrý avatar.

Štýlový avatar s duchom, obrázok s priehľadné pozadie vo formáte PNG..

Krásny avatar s nakresleným ohňom a mužom v ohni. Stiahnite si obrázok ohnivého muža s rozmermi 100 x 100 pixelov.

Roztomilý avatar s hračkou ľadového medveďa so srdcom na avatarovi. Stiahnite si obrázok z medveď biela v časti „Láska“, ktorej veľkosť je 100 x 100 pixelov.

Obrázok s princeznou v ružových šatách a maskou na bielom pozadí..

Na obrázku je dievča s maľovanými anjelskými krídlami. Navrhujem tiež, aby ste sa oboznámili s časťou venovanou anjelom.

Animovaný avatar s pavúkom, ktorý beží pozdĺž obrysu obrázka a vytvára sieť v rohu. Stiahnite si obrázok 100 x 100 s animáciou pavúka. Na Avatarko.ru si môžete stiahnuť skvelé avatary so zvieratami.

Avatar s perami spálenými od cigarety. Obrázok pier fajčiaceho dievčaťa, ktoré zabudlo vytiahnuť cigaretu. Ak potrebujete väčší obrázok, zdroj s perami sa nachádza nižšie.

Animovaná sviečka na zelenom pozadí. Stiahnite si avatar 100x100 s horiacou sviečkou s animáciou plameňa.

Obrázok s animovaným ružovým pozadím s blondínkou. Stiahnite si krásny avatar pre dievčatá s blond vlasmi a pre tých, ktorí majú radi ružovú farbu, stiahnite si avatar. Buďte opatrní, váha obrázka nemusí byť vhodná pre mnohé fóra.

Avatar s usmievavou zázvorovou mačkou s červeným nosom. Veľmi krásny a pozitívny obrázok pre vášho avatara.

Čiernobiely obraz s animáciou muža, ktorý neustále padá kvôli vratkej zemi. Stiahnite si animovaný avatar 100 široký a 100 vysoký s pádmi nakresleného muža.

Exkluzívny avatar vytvorený mnou len pre túto stránku s animovaným chipmunkom, ktorý mu dáva oriešok do líca. Stiahnite si obrázok 100 x 100 s animáciou zábavného hlodavca, ktorý sa hrá s orechom. Umiestňovanie avatara ako obsahu bez uvedenia indexovaného odkazu na zdroj je zakázané.

Čoraz viac ľudí hľadá, kde stiahnuť 100x100 avatarov, a aby boli čo najjedinečnejšie a najzaujímavejšie. Tento problém sa dá vyriešiť okrem masovej tvorby zaujímavých kolekcií len tak, že každého hľadajúceho prinútite sadnúť si k nejakému grafickému editoru avatara. Online redaktori zapnutý avatar tento moment sú primitívne a nikdy nenahradia profesionálnych dizajnérov. Väčšina fór umožňuje nastaviť avatara, ktorého rozmery nepresahujú 100 na dĺžku a šírku, takže niekedy musíte obrázok sami zmenšiť na požadované limity. Tu sa s takýmto problémom nestretnete, pretože... všetky avatary už majú veľkosť, ktorú potrebujete. Áno, a môžete ich použiť nielen ako avatary, ale aj ako obrázky v téme, dodajú správe viac bohatstva.

→ Stránky → Stiahnite si najlepšie avatary s rozmermi 100 x 100 pixelov

Sekcia len s avatarmi, ktorých výška a šírka je 100 pixelov, nič viac a nič menej, takže témy obrázkov sú rôzne. Ak hľadáte avatara na konkrétnu tému a nie podľa veľkosti, na ľavej strane stránky sú sekcie.

Skvelý avatar s animáciou dvoch špendlíkov počas sexu. Na tejto stránke si môžete stiahnuť animovaný avatar s dvoma špendlíkmi.

Animovaný obrázok ukazuje pár tancujúci na oblakoch. Stiahnite si avatar s tancom na pozadí mesiaca.

Obrázok z hry Červy s červom so svätožiarou, ktorý sa modlí pred bitkou červov. Stiahnite si avatara z obľúbenej počítačovej hry.

Animovaný avatar so spiacou zelenou mačkou. Stiahnite si skvelý obrázok s nakreslenou mačkou.

Animovaný avatar na fórach so zelenou tvárou s prenikavými a blikajúcimi očami. Stiahnite si obrázok 100 x 100 s animáciou očí na zelenej tvári.

Animovaný obrázok bláznivej ovečky vyplazujúcej jazyk. Stiahnite si skvelý avatar s podivnou ovečkou na sivom pozadí.

Avatar zobrazujúci ružového hrocha kúpajúceho sa vo vode. Stiahnite si animovaný obrázok s ružovým hrochom. Avatar je ideálny pre Paris Hilton.

Obrázok pre tých, ktorí radi pijú alkoholické nápoje. Stiahnite si avatar s textom „Som alkoholik“ a pohárom.

Avatar s krígľom piva, stiahnuť piatkový obrázok s pivom v priehľadnom krígli. Svetlý obrázok na sivom pozadí

Skvelý animovaný avatar s bradatým mužom, ktorý mláti do počítača. Stiahnite si obrázok, na ktorom počítač nefunguje a používateľ ho porazí.

Obrázok s textovým nápisom „Milujem hudbu“ na čiernom pozadí, namiesto slova „láska“ je srdce. Stiahnite si textový avatar na hudobnú tému. A pre tých, ktorí sledujú trendy v hudobný priemysel Zaujme vás nielen avatar, ale aj hudba, ktorá na stránke bohužiaľ nie je.

Animovaný obrázok so zeleným okom. Stiahnite si vynikajúci avatar s animáciou blikania zeleného oka a pohybujúcich sa čísel, ktoré sú viditeľné v odraze oka.

Skvelý animovaný obrázok s čiernym mňaukajúcim mačiatkom. Stiahnite si nádherný avatar s mačkou na ružovom pozadí s animáciou.

Animovaný avatar s chlapíkom s iPodom a vzduchovou gitarou. Stiahnite si obrázok na hudobnú tému s animáciou chlapíka na žltom pozadí.

Na obrázku je modrý vlk s cigarou v ústach a so slnečnými okuliarmi. Stiahnite si avatar s modrým vlkom.

Obrázok s anjelom s roztiahnutými rukami. Stiahnite si tajomného avatara s anjelskými palmami s podivne umiestnenými krídlami.

Na obrázku je krásna mačacia tvár, stiahnite si avatar s bielou našuchorenou mačkou.

Na obrázku je hovoriaci osol z kresleného filmu Shrek. Stiahnite si avatar s usmievavým oslíkom, pozitívnym kresleným zvieraťom.

Obrázok ukazuje zatmenie Slnka, ale teoreticky má avatar iba čierny kruh s bielou korunou. Stiahnite si avatar s fotografiou zatmenia Slnka.

Avatar s pohárom a tečúcou čírou tekutinou. Docela štýlový obrázok pre tých, ktorí radi pijú, najmä silné nápoje.

Avatar so psom a väčšinou so psím nosom. Stiahnite si obrázok s detailným záberom psieho nosa pre milovníkov domácich zvierat.

Avatar s logom McDonald's pre milovníkov rýchleho občerstvenia a pracovníkov rýchleho občerstvenia. Stiahnite si štýlový obrázok s logom McDonalds.

Vynikajúci avatar so srdcom a jeho animovaným kardiogramom. Stiahnite si obrázok na tému lásky s animáciou pulzu „lásky“.

Animovaný obrázok na tému oblohy a rýchlosti, stiahnite si avatar s animáciou mrakov pri lietaní na oblohe.

Obrázok s krásnym harmančekom v jemných farbách. Stiahnite si avatar nežnosť pre fórum s kvetinou na webovej stránke

Avatar s kresbou Davida Blainea a nápisom "Malá pouličná mágia?" Stiahnite si vtipný obrázok, ktorého témou je pouličná mágia s textom a samotný pouličný kúzelník. Keď video s Blainom v preklade Bocharova jednoducho vyhodilo do vzduchu internet, stovky obrázkov a citátov upravených vo photoshope sú stále uložené na starých internetoch. Teraz je tento mém takmer zabudnutý a len zriedka čítate frázu „Moje nohy v ústach“ alebo „Knock me back“, ale objavilo sa veľa nových mémov, ktoré čoskoro postihne rovnaký osud.

Animovaný avatar s Kroshom z karikatúry Smesharika. Stiahnite si obrázok kresleného zajačika, ktorý žmurká očami.

Na obrázku gitara plápolá červeným plameňom, o akom hudobnom nástroji snívajú rockeri. Stiahnite si animovaný avatar s ohnivou gitarou v sekcii hudba.

Táto stránka obsahuje vynikajúce obrázky, ktorými môžete ozdobiť svoj príspevok v online denníku, blogu, LiveJournal. Nie je potrebné sťahovať a znova nahrávať avatarov; všetko, čo musíte urobiť, je skopírovať kód obrázka niekoľkými kliknutiami a vložiť tento kód do svojho blogového príspevku. Mnohé z týchto avatarov možno použiť aj ako komentár k správam iných ľudí; niekedy obrázok povie oveľa viac ako veľký text. Jedinečná webová stránka predstavuje vašu pozornosť zbierku najlepších avatarov. Nie sú tu žiadne zbytočné odpadky, ktoré sú zastarané a ktorých kvalita spochybňuje zdravý rozum používateľov, ktorí ich používajú. Hoci existuje trend zväčšovania veľkosti avatarov, veľkosť 100x100 stále zostáva lídrom a vyhovuje väčšine internetu.