Blog ikon kevesebb, mint 100 kb. Készíts egy avatart a Paint segítségével. Retina és HiDPI képernyők

Üdvözöllek kedves Habr közösség! Ezt a rövid jegyzetet fontos oktatási programként írom mindenkinek, aki raszteres képekkel dolgozik. Általában a kezdők körében felmerül a kérdés, hogy mit mérjünk a képeken, de a tapasztalt szakemberek is összekeverik a fogalmakat.

Kezdjük a fő dologgal: a raszteres képek a következőkből állnak pixel. Ez a cikk vége is lehetne, de ez nem mindenkinek elég, szóval beszéljünk azokról a tévhitekről és mítoszokról, amelyekkel a gyakorlatban találkoztam.

DPI, PPI és átméretezés

A leggyakoribb tévhit a DPI (dots per inch) és a PPI (pixels per inch) mértékegységek használata. Ezek az egységek tulajdonképpen nyomtatókra és szkennerekre utalnak. A képernyő jellemzőiben is használhatók. Lényegében ezek az analóg kép fizikai méretei (centiméterben vagy hüvelykben) és a digitális kép pixelméretei közötti konverziós tényezők.

Például egy 100 pixeles, 100 DPI-vel nyomtatott kép 1 hüvelykes lesz. Minden egyszerű és világos.

A grafikus szerkesztőkben történő méretváltoztatáskor azonban kérjük, hogy a méreteket a számunkra megfelelő méretekben adjuk meg, beleértve a DPI-t is. Itt kezdődik a zűrzavar.

Valójában a kép fizikai méretei (centiméterben, hüvelykben stb.) és a DPI értéke csak metainformáció a fájl tulajdonságaiban. De a szerkesztő felhasználhatja ezeket az értékeket a szükséges pixelméretek meghatározására.

Tegyük fel, hogy van egy 3000 pixeles (négyzetes) képünk, aminek az értéke 300 DPI. A következőt kapjuk: 3000 pixel / 300 DPI = 10 hüvelyk. Most lépjen a szerkesztőbe (Photoshop), és módosítsa a DPI-értéket 600-ra. Mit kapunk? És ez a „Resample” jelölőnégyzettől függ. Ha igen, akkor a képről mintavételezést kapunk 6000 pixel. Ha nem, akkor a hüvelykben megadott méret lesz 5 ahelyett 10 .

Így a webfejlesztésnél minden fizikai méret (DPI, centiméter, hüvelyk stb.) nyugodtan figyelmen kívül hagyható, és kizárólag a pixelméreteket nézhetjük meg.

DPI/PPI képernyők

Itt jutunk el a képernyőfelbontás és a pixelsűrűség kérdéséhez. Ezt a sűrűséget helyesen PPI-nek (pixels per inch) nevezik, és azt mutatja meg, hogy hány képpont jeleníthető meg a képernyő egy hüvelykén.

Gyakran itt merül fel a mitikus 72 és 96 PPI, amelyek a képernyők „standard” pixelsűrűségét hivatottak jelezni. A webes grafikai megjelenítési feladatokhoz ezek haszontalanok. Ugyanakkor a képernyő tényleges pixelsűrűsége teljesen eltérő lehet: általában 120 PPI körüli (mérhető és számítható a képernyőn).

De ne felejtsük el, hogy a raszteres képeket csak a méretben mérik pixelés semmi más. Miért beszélünk egyáltalán a képernyő PPI-ről? Mert vannak „Retina” vagy „HiDPI” képernyők.

Retina és HiDPI képernyők

Az ilyen kijelzőket széles körben használják mobil eszközökés drága laptopok. Lényegében ez a képpontok mennyiségi növekedése, miközben megtartja a képernyő fizikai méreteit (például 5 hüvelyk átlósan és 330 PPI).

Nekünk, webfejlesztőknek ez különböző képpontok megjelenését jelenti a böngészőben: CSS pixelek (melyeket általában az elemek méretében adunk meg) és fizikai pixelek (valódi pixelek a képernyőn). A képlet a következő: Fizikai pixelek = CSS pixelek * DPR.
A DPR az eszköz pixelaránya – a CSS pixelek és a fizikai képpontok konverziós aránya.

Kép feladáskor címkét írhatunk img 20 képpont méretű, és a kép 40 pixeles lesz. Ebben az esetben a DPR=2.0 képernyőn a kép összes pixelét látni fogjuk. De ebben a helyzetben egyáltalán nem aggódunk a képernyő tényleges PPI-értékei miatt.

Ugyanakkor nagy pixelsűrűségű képeket is használhatunk normál képernyőkön, a böngésző maga méretezi a képet. És megint csak a DPI-nek és a PPI-nek semmi köze ehhez, csak a képekhez pixelben mérve. Megjelenítésük módját a böngésző dönti el, amely már kétféle képponttal rendelkezik.

Ez az egész történet, bár természetesen nem mondtam semmit az adaptív képekről, a hatásuk optimalizálásának módjairól és az ügyfelek tippjeiről. De ez egy másik történet.

Mi az avatar? Ez egy kis kép, amely egy adott felhasználóhoz van társítva közösségi háló, fórum vagy chat. Letölthet egy avatart a több ezer internetes forrás egyikéből, vagy létrehozhatja saját maga is. Hogyan kell csinálni? - erről még beszélünk. Ehhez szükségünk van a programra" Microsoft Paint", amely minden szabványos programkészletben megtalálható operációs rendszer Microsoft.

Először is döntsük el, melyik képből készítjük el egyedi avatárunkat. Ez lehet a fényképünk, a kedvenc asztali háttérképünk, vagy egy aranyos kép az internetről. 100x100 pixel méretű avatart kell készítenünk, ezt a formátumot támogatja a legtöbb chat és társadalmi rendszerek. Kívánságra azonban bármilyen képméretet beállíthat, legyen az 64x64 vagy 150x150 pixel.

Most nyissa meg a Microsoft Paint programot az asztal alján található „Start” gombra kattintva, és a „Programok” menü „Tartozékok” kategóriájának kiválasztásával.

A képernyőn ezt látjuk:

Most meg kell nyitnunk a kiválasztott képet a Paint programban. Lépjünk a „Fájl” részre, amely a program ablakának legtetején található, majd kattintson a „Megnyitás” gombra, és keresse meg a képünket a listában.

Nyissa meg a képet

Most kezdődik az Ava létrehozásának fő munkája. A menüben kövesse a következő útvonalat: „Rajz” - „Attribútumok”. A következő képet látjuk:

Ügyeljünk az eredeti kép méretére. A miénk szélessége 1024, hossza 768. Jegyezzük fel ezeket a paramétereket. Ezután kattintson az „Ok” gombra, és folytassa a munkát. Ismét megyünk a „Rajz” részhez. Ott találjuk a „Nyújtás/döntés” opciót. Válassza ki, és jelenítse meg a következőt a képernyőn:

Most pedig emlékezzünk képünk eredeti paramétereire (1024 szélességben és 768 hosszban). Ez függőlegesen és vízszintesen is 100%. Végezünk néhány apró számítást, és azt találjuk, hogy a kész avatar mérete nem haladhatja meg a forrás 16%-át. A „Vízszintes” és a „Függőleges” mezőkbe írja be a 16-os számot. Kattintson az „OK” gombra, és csodálja meg a 164x123 pixeles alkotásunkat. Nem szabad megfeledkeznünk arról, hogy egy 100 pixeles oldalú képre törekszünk.

Kapunk:

Lépjen a „Szerkesztés” szakaszba, és válassza az „Összes kijelölése” lehetőséget. Kijelöljük egy pontozott kerettel a rajz azon területét, amelyet avaként szeretnénk látni. A kurzor itt egy nyilakkal ellátott kereszt.

Kattintson a képre a jobb egérgombbal. A párbeszédpanelen válassza a „Másolás” lehetőséget, és kövesse a menüt felső panel programokat. Itt kiválasztjuk a „Létrehozás” opciót. Ne ijedjen meg, amikor a Paint megkérdezi, hogy mentse-e a fájl módosításait; kattintson a Nem gombra. Miután megjelenik az új dokumentum üres lapja, illessze be oda a másolt részt.

Ez így van megcsinálva. Beállítjuk a mező paramétereit: a hosszúságot és a szélességet 100 pixelre korlátozzuk. Győződjön meg arról, hogy a mértékegységek pixelek vagy pontok. Arra is figyelünk, hogy a „Palette” színes legyen. Ha más paraméterekkel is avatart kell létrehoznia, jelezze azokat ebben a részben (80x80, 150x150 vagy 64x64 pixel).

Minél kisebb a szükséges képméret, annál nagyobb százalékot kell beállítanunk a forrásból.

Tehát van egy tiszta fehér négyzetünk, amelynek oldala 100 pixel.

→ Oldalak → 100 pixel szélességű és magasságú képek válogatása, avatarok letöltése

Az oldal ezen az oldalán sok érdekes kép található, amelyek szinte mindenhol avatarként használhatók, mert... méretük 100 x 100. Ez azt jelenti, hogy a magasság és a szélesség 100 pixel (pontok a képernyőn). Ez a szakasz téma szerint rendezetlen avatarokat tartalmaz, ami érdekesebbé teszi a keresést.

Kép tűzből készült szemmel és szempillákkal. Tölts le egy szokatlan avatart tüzes szempillákkal és zöld szemmel.

Egy animált kép egy farkas sziluettjével a ködben, és a háttérben repülő madarakkal. Az avatar nem színes, de nagyon érdekes. Letölthet egy avatart a webhelyről, vagy egyszerűen másolja az elhelyezéséhez szükséges kódot.

Az avatárban a bikának szarvai vannak. Tölts le egy képet egy hatalmas állattal, egy dühös bikával. Egy ilyen szigorú avatar alkalmas erőszakos természetű felhasználóknak, valamint moderátoroknak.

A képen egy fekete madár feje látható - egy bástya; az avatarko.ru oldalon letölthet avatarokat különféle madarakkal, beleértve a bástyakat is, a madarak részben.

Itt van egy vicces avatar, hozzáférhetetlen képpel, de valami mégis jobb, mint a semmi, szóval az avatarnak van egy kacsa, elnézést.

Animált kép egy futó lányról felfelé ívelt farokkal. Tölts le egy rajzolt avatart egy lány animációjával.

A képen egy rajzolt hörcsög és egy szöveges figyelmeztetés látható, amely szerint a rágcsáló avatar alatt megbújó személy 100%-ban hörcsög. Az avatarko.ru oldalról letöltheti ezt a klassz avatart, egy igazi hörcsöggel, bár rajzolva.

Fórumokon és blogokon avatarként használható játékpecsét képe. Tölts le egy plüsspecséttel ellátott avatart a weboldalra.

Töltsön le egy finom képet egy tányér cérnametélttel és paradicsommal. Általában egy avatar az ételek szerelmeseinek. Ez az avatar kizárólagos, tilos más oldalakon tartalomként közzétenni.

Animált avatar városi házakkal. Töltsön le egy fekete-fehér képet házakkal és felhők animációjával.

Az avataron az ikertornyokból és két repülőgépből készült McDonald's logó és az „Eat this” felirat látható. Töltse le a képet az amerikaiak gyűlölőinek.

Képzelje el Alexet, az oroszlánt, aki felvonja a szemöldökét a Madagaszkár című rajzfilmből. Tölts le egy animált avatárt egy madagaszkári oroszlán karakterről.

Avatár egy kivájt szemű zombival, aki sapkát és sálat visel animált ujjakkal. Horror kép zombikkal, szürke tónusokkal, animációval.

Animált kép egy uborkával a villán. Tölts le egy nagyszerű avatart uborkával.

Egy avatár egy ülő verébrel, amely úgy néz ki, mint egy kis labda, lábakkal és csőrrel. Tölts le egy képet egy kis madárral, egy személy állandó szomszédjával.

Egy gyönyörű kép egy denevércsapattal a kerek hold hátterében. Nem tény, hogy ezek a denevérek vámpírok, azonban ezen az oldalon letölthet egy jó avatart.

Stílusos avatar szellemmel, képpel átlátszó háttér PNG formátumban..

Egy gyönyörű avatar rajzolt tűzzel és egy égő emberrel. Tölts le egy 100 x 100 pixeles képet egy tüzes emberről.

Aranyos avatar játék jegesmedvével, szívvel az avataron. Kép letöltése innen medve fehér a "Szerelem" részben, amelynek mérete 100 x 100 pixel.

Egy kép egy hercegnővel rózsaszín ruhában és maszkkal fehér alapon..

A képen egy lány festett angyalszárnyakkal. Azt is javaslom, hogy ismerkedjen meg az angyaloknak szentelt rovattal.

Animált avatar, a kép körvonalai mentén pók futva, és a sarokban hálót épít. Tölts le egy 100 x 100-as képet egy pók animációjával. Az Avatarko.ru oldalon nagyszerű avatarokat tölthet le állatokkal.

Egy avatar cigarettától égett ajkakkal. Egy dohányzó lány ajkai képe, aki elfelejtette kivenni a cigarettáját. Ha nagyobb képre van szüksége, az ajkakkal ellátott forrás lent található.

Animált gyertya zöld alapon. Tölts le egy 100x100-as avatart égő gyertyával, lánganimációval.

Egy kép animált rózsaszín háttérrel egy szőkével. Töltsön le egy gyönyörű avatart a szőke hajú lányoknak, és aki szereti a rózsaszín színt, töltse le az avatart. Legyen óvatos, előfordulhat, hogy a kép súlya nem sok fórum számára megfelelő.

Avatar egy mosolygó gyömbéres macskával, vörös orral. Nagyon szép és pozitív kép az avatarodhoz.

Fekete-fehér kép animációval, amint egy ember folyamatosan esik a remegő talaj miatt. Tölts le egy 100 széles és 100 magas animációs avatart egy rajzolt ember eséseivel.

Egy exkluzív avatar, amit csak az oldalra készítettem, egy animált mókussal, aki diót nyom az arcába. Tölts le egy 100x100-as képet animációval, amely egy dióval játszó vicces rágcsálót ábrázol. Tilos avatárt tartalomként elhelyezni a forrásra mutató indexelt hivatkozás feltüntetése nélkül.

Egyre többen keresik, hogy honnan töltsék le a 100x100-as avatarokat, és hogy azok minél egyedibbek és érdekesebbek legyenek. Ez a probléma megoldható, kivéve érdekes gyűjtemények tömeges létrehozásával, csak úgy, hogy minden keresőt le kell ültetni valamilyen avatar grafikus szerkesztővel. Online szerkesztők avatar bekapcsolva Ebben a pillanatban primitívek, és soha nem helyettesítik a professzionális tervezőket. A legtöbb fórum lehetővé teszi olyan avatar beállítását, amelynek méretei nem haladják meg a 100-as hosszúságot és szélességet, ezért néha magának kell csökkentenie a képet a szükséges határokra. Itt nem fogsz ilyen problémával találkozni, mert... az összes avatar már rendelkezik a szükséges mérettel. Igen, és nem csak avatarként, hanem képként is használhatod a témában, még gazdagabbá teszik az üzenetet.

→ Oldalak → Töltse le a legjobb avatarokat 100 x 100 pixel méretben

Csak avatarokkal rendelkező rész, melynek magassága és szélessége 100 pixel, nem több és nem kevesebb, így a képek témái eltérőek. Ha egy adott témában és nem méret szerint keres avatart, akkor az oldal bal oldalán találhatók szekciók.

Menő avatar egy animációval, amelyen két szexuális tű él. Ezen az oldalon letölthetsz egy animált avatart két tűvel.

Egy animált képen egy pár táncol a felhőkön. Tölts le egy avatárt tánccal a Hold hátterében.

Egy kép a Worms játékból egy glóriás féreggel, aki imádkozik a férgek csatája előtt. Tölts le egy avatart egy népszerű számítógépes játékból.

Animált avatar egy alvó zöld macskával. Tölts le egy klassz képet egy rajzolt macskával.

Animált avatar fórumok számára zöld arccal, nyiladozó és villogó szemekkel. Töltsön le egy 100x100-as képet zöld arcon lévő szemek animációjával.

Animált kép egy őrült bárányról, amely kinyújtja a nyelvét. Tölts le egy klassz avatárt egy furcsa báránnyal szürke háttéren.

Vízben fürdőző rózsaszín vízilót ábrázoló avatár. Tölts le egy animált képet egy rózsaszín vízilóval. Az avatar tökéletes Paris Hilton számára.

Egy kép azoknak, akik szeretnek alkoholos italokat inni. Tölts le egy avatart az „Alkoholista vagyok” szöveggel és egy pohárral.

Avatar egy korsó sörrel, letöltés Péntek kép sörrel átlátszó söröskorsóban. Világos kép szürke háttéren

Menő animációs avatar egy szakállas férfival, aki a számítógépet üti. Töltsön le egy képet, amelyen a számítógép nem működik, és a felhasználó legyőzi.

Egy kép fekete alapon „I love music” felirattal, a „love” szó helyett szív található. Töltse le a szöveges avatart zenei témában. És azoknak, akik követik a trendeket zeneipar Nemcsak az avatar fogja érdekelni, hanem a zene is, ami sajnos nincs az oldalon.

Animált kép zöld szemmel. Töltsön le egy kiváló avatart animációval egy zöld szem villogásával és mozgó számokkal, amelyek láthatóak a szem tükörképében.

Menő animációs kép egy fekete nyávogó cicával. Tölts le egy csodálatos avatart egy macskával rózsaszín alapon animációval.

Animált avatar egy iPod-os sráccal és egy léggitárral. Tölts le egy képet zenei témában egy srác animációjával sárga alapon.

A képen egy kék farkas látható, szájában szivarral és napszemüvegben. Töltse le az avatárt egy kék farkassal.

Kép egy angyallal, kitárt karral. Tölts le egy titokzatos avatárt angyaltenyérrel, furcsán elhelyezett szárnyakkal.

A képen egy gyönyörű macskaarc látható, töltsön le egy avatárt egy fehér bolyhos macskával.

A képen egy beszélő szamár látható a Shrek című rajzfilmből. Tölts le egy avatárt egy mosolygó szamárral, egy pozitív rajzfilmállattal.

A képen napfogyatkozás látható, de elméletileg az avatáron csak egy fekete kör van fehér koronával. Töltsön le egy napfogyatkozás fényképével ellátott avatárt.

Avatar egy üveggel és átlátszó folyadékkal. Elég stílusos kép azoknak, akik szeretnek inni, főleg erős italokat.

Avatár kutyával, és többnyire egy kutya orrával. Töltsön le egy képet egy kutya orrát ábrázoló közeli felvétellel az állatok szerelmeseinek.

Avatar McDonald's logóval, a gyorsétterem szerelmeseinek és a gyorsétteremben dolgozóknak. Töltsön le egy stílusos képet McDonalds logóval.

Kiváló avatar szívvel és animált kardiogramjával. Töltsön le egy képet a szerelem témájában egy „szerelmi” pulzus animációjával.

Animált kép az égbolt és a sebesség témájában, töltsön le egy avatart animációval a felhőkről, amikor repül az égen.

Egy kép egy gyönyörű kamilla lágy színekben. Töltse le az avatar gyengédséget a fórumhoz virággal a weboldalról

Egy avatar David Blaine rajzával és "Egy kis utcai varázslat?" Tölts le egy vicces képet, amelynek témája az utcai varázslat szöveggel és magával az utcabűvészsel. Amikor a Bocharov által lefordított Blaine-nel készült videó egyszerűen felrobbantotta az internetet, még mindig több száz photoshopolt kép és idézet van tárolva az ősi interneteken. Mára ezt a mémet szinte feledésbe merült, és ritkán olvassa el a „Lábam a szádban” vagy „ütj vissza” kifejezést, de sok új mém jelent meg, amelyek hamarosan ugyanerre a sorsra jutnak.

Animált avatar Krosh-al a Smesharika rajzfilmből. Tölts le egy képet egy rajzfilmes nyusziról, aki pislog a szemével.

A képen a gitár vörös lánggal lobog, olyan, amilyenről a hangszerrockerek álmodoznak. Tölts le egy animált avatart tüzes gitárral a zenei részben.

Ez az oldal kiváló képeket tartalmaz, amelyekkel díszítheti bejegyzését egy online naplóban, blogban, LiveJournalban. Nincs szükség avatarok letöltésére és újbóli feltöltésére, mindössze néhány kattintással másolja ki a kép kódját, és illessze be a blogbejegyzésébe. Ezenfelül sok ilyen avatar felhasználható mások üzeneteihez fűzött megjegyzésként; néha a kép sokkal többet mond, mint egy nagy szöveg. Az egyedülálló weboldal a legjobb avatarok gyűjteményét mutatja be. Itt nincs felesleges szemét, ami elavult, és aminek minősége megkérdőjelezi az őket használó felhasználók józan eszét. Bár tendencia az avatarok méretének növekedésére irányul, a 100x100-as méret továbbra is vezető szerepet tölt be, és megfelel az internet nagy részének.