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őktől merül fel 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 bitmap képek a következőkből állnak pixel. Ezzel a cikk véget is érhetett volna, de ez nem mindenkinek elég, szóval beszéljünk azokról a tévhitekről, mítoszokról, amelyekkel a gyakorlatban találkoztam.

DPI, PPI és átméretezés

A leggyakoribb tévhit a DPI (dots per inch - dots per inch) és a PPI (pixels per inch - pixels per inch) egységek használata. Valójában ezek az egységek nyomtatókra, illetve szkennerekre utalnak. A képernyő jellemzőiben is használhatók. Valójában ezek a fizikai méretek analóg (centiméterben vagy hüvelykben) és a pixelben kifejezett méretek közötti konvertálási együtthatók digitális kép esetén.

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

A grafikus szerkesztőkben történő átméretezés során azonban felajánljuk, hogy a méreteket a számunkra kényelmes méretekben adja 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égyzet alakú) képünk, amelynek értéke 300 DPI. A következőt kapjuk: 3000 pixel / 300 DPI = 10 hüvelyk. És most bemegyünk a szerkesztőbe (Photoshop), és módosítjuk a DPI-értéket 600-ra. Mit kapunk? És ez a "Resample" jelölőnégyzettől függ. Ha kerül, akkor a kép felmintavételezését (növelését) kapjuk 6000 pixel. Ha nem, akkor a hüvelykben megadott méret lesz 5 ahelyett 10 .

Így a webfejlesztés során a fizikai méretek összes értéke (DPI, centiméter, hüvelyk stb.) nyugodtan figyelmen kívül hagyható, és csak a méreteket pixelben tekintheti meg.

DPI/PPI képernyők

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

Itt gyakran megjelenik a mitikus 72 és 96 PPI, amelyeknek a képernyők „standard” pixelsűrűségét kell mutatniuk. A webes grafikai megjelenítési feladatokhoz ezek haszontalanok. Ugyanakkor a képernyő tényleges pixelsűrűsége teljesen eltérő lehet: jellemzően 120 PPI körüli (mérhető és számítható a képernyőre).

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 képernyő PPI-ről? Mert vannak "Retina" vagy "HiDPI" képernyők.

Retina és HiDPI képernyők

Ezeket a 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 azt jelenti, hogy különböző pixelek jelennek meg a böngészőben: CSS pixelek (amelyeket általában elemméretekben adunk meg) és fizikai pixelek (valódi pixelek a képernyőn). A képlet a következő: Fizikai képpontok = CSS-képpontok * DPR.
A DPR egy eszköz pixelaránya – a CSS pixelek fizikai képpontokká konvertálásának aránya.

Kép elhelyezésekor címkét írhatunk img 20px mérettel, és a kép 40px lesz. Ugyanakkor a DPR=2.0 képernyőn a kép összes pixelét látni fogjuk. De ebben a helyzetben egyáltalán nem törődünk a képernyő tényleges PPI-értékeivel.

Ugyanakkor normál képernyőre is használhatunk nagy pixelsűrűségű képeket, a böngésző magát a képet méretezi. És megint csak a DPI-nek és a PPI-nek semmi köze hozzá, csak a képekhez pixelben mérve. Hogy hogyan jelenítsék meg őket, azt 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 megtérülésük 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 saját maga is létrehozhatja. Hogyan kell csinálni? – erről még beszélünk. Ehhez szükségünk van a Microsoft Paint programra, amely minden szabványos programkészletben megtalálható operációs rendszer Microsoft.

Először is eldöntjük, melyik képből készítjük el egyedi avatárunkat. Lehet fotónk, kedvenc asztali háttérképünk vagy egy szép kép az internetről. 100x100 pixel méretű avatart kell készítenünk, ezt a formátumot a legtöbb chat támogatja é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 úgy, hogy az asztal alján található Start gombra kattint, és a Programok menüből kiválasztja a Kellékek kategóriát.

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.

A kép megnyitása

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

Ügyeljünk az eredeti kép méretére. Nálunk 1024 széles és 768 hosszú. Ezeket a paramétereket felírjuk. Ezután kattintson az „OK” gombra, és lépjen tovább. Ismét megyünk a "Rajz" részhez. Itt találjuk a "Nyújtás / ferdítés" opciót. Kiválasztjuk, és a következőt kapjuk 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%. Kis számításokat végzünk, és azt kapjuk, 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. Nyomja meg az "OK" gombot, és csodálja meg a 164x123 pixeles alkotásunkat. Nem szabad elfelejtenünk, hogy 100 pixeles oldalra törekszünk.

Kapunk:

Lépjen a "Szerkesztés" szakaszba, és válassza az "Összes kijelölése" lehetőséget. A szaggatott vonalból kerettel kiválasztjuk a képnek azt a részét, amelyet avaként szeretnénk látni. A nyilakkal ellátott kereszt itt kurzorként működik.

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 program felső paneljén található menüt. Ott válassza a "Létrehozás" lehetőséget. Ne ijedjen meg, amikor a „Paint” megkérdezi, hogy mentse-e a fájl módosításait, kattintson a „Nem” gombra. Egy új dokumentum üres lapjának megjelenése után illessze be oda a másolt részt.

Ez így történik. Beállítjuk a mező paramétereit: a hosszúságot és a szélességet 100 pixelre korlátozzuk. Adja meg, hogy a mértékegységek pixelek vagy pontok. Arra is figyelünk, hogy a „Palette” színes legyen. Ha más paraméterekkel kell avatárt létrehoznia, adja meg 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 megadnunk a forrásból.

Tehát egy tiszta fehér négyzetet kaptunk, 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 rész az avatarokat téma szerint rendezve tartalmazza, 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.

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öltheti az avatart a webhelyről, vagy egyszerűen másolja az elhelyezéséhez szükséges kódot.

A bikának szarvai vannak az avatáron. Tölts le egy képet egy hatalmas állattal, egy dühös bikával. Egy ilyen kemény avatar megfelel az erőszakos felhasználóknak és a moderátoroknak.

A képen egy fekete madár feje - 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 ilyen vicces avatar, hozzáférhetetlen képpel, de legalább valami jobb, mint a semmi, szóval egy kacsa van az avataron, elnézést.

Animált kép egy futó lányról, akinek lófarok van felfelé. Töltse le a rajzolt avatart a 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, igazi hörcsöggel, bár rajzolt.

Egy játék pecséttel ellátott kép, ami feltehető avatarként a fórumokra és a blogokra. Tölts le egy plüsspecséttel ellátott avatart az oldalra.

Töltse le az étvágygerjesztő képet egy tányér cérnametélttel és paradicsommal. Általában egy avatar az ízletes ételek szerelmeseinek. Ez az avatar kizárólagos, tilos más oldalakon tartalomként elhelyezni.

Animált avatar városi házakkal. Töltse le a fekete-fehér képet házakkal és felhőkkel.

Az avataron a McDonald's ikertornyokat és két repülőt ábrázoló logója és az "Eat this" (Eat this) felirat látható. Kép letöltése az amerikaiak gyűlölőinek.

Egy kép Alex, az oroszlán szemöldökét felvonva a Madagaszkár című rajzfilmből. Töltse le az animált avatárt egy rajzfilmfigurás oroszlánnal Madagaszkárról.

Zombi avatar kivájt szemekkel, 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 egy uborka formájú harapnivalóval.

Egy avatár egy ülő verébrel, amely úgy néz ki, mint egy kis labda mancsokkal é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 az a tény, hogy ezek a denevérek vámpírok, ezen az oldalon azonban letölthet egy jó avatart.

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

Egy gyönyörű avatár egy tűzzel és egy tűzben lévő emberrel. Tölts le egy 100x100 pixeles képet, amely egy tüzes embert ábrázol.

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

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

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

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

Avatar cigarettától megégett ajkakkal. Egy kép, amely egy dohányzó lány ajkát ábrázolja, aki elfelejtett kivenni egy cigarettát. Ha nagyobb képre van szüksége, akkor lent a forrás ajkakkal.

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

Kép animált rózsaszín háttérrel, szőke színnel. Tölts le egy gyönyörű avatárt szőke hajú lányoknak, a rózsaszín színt kedvelőknek pedig kötelező az avatar letöltése. Legyen óvatos, előfordulhat, hogy a kép súlya nem sok fórum számára megfelelő.

Avatar egy mosolygó vörös macskával, piros orrral. Nagyon szép és pozitív kép az avatarhoz.

Fekete-fehér kép animációval egy folyamatosan zuhanó emberről a megdöbbentő talaj miatt. Töltsd le a 100 széles és 100 magas animációs avatárt a rajzolt ember eséseivel.

Egy exkluzív avatar, amit csak az oldalra készítettem, egy animált mókussal, aki diót szúr az arcába. 100x100-as kép letöltése animációval, egy dióval játszó vicces rágcsálóval. Tilos avatárt tartalomként elhelyezni a forrásra mutató indexelt hivatkozás megadása nélkül.

Egyre többen keresik, honnan tölthetik le a 100x100-as avatarokat, hogy azok minél egyedibbek és érdekesebbek legyenek. Ezt a problémát – kivéve érdekes gyűjtemények tömeges létrehozásával – csak úgy lehet megoldani, ha minden keresőt rákényszerítünk, hogy üljön le valamilyen grafikus avatarszerkesztőhöz. Online szerkesztők avatar be Ebben a pillanatban primitív, és soha nem helyettesíti a professzionális tervezőket. A legtöbb fórumon megengedett egy avatár elhelyezése, amelynek mérete nem haladja meg a 100-at hosszúságban és szélességben, ezért néha magának kell csökkentenie a képet a kívánt határokra. Itt nem fog találkozni ilyen problémával, 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, telítettebbé teszik az üzenetet.

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

Egy rész csak avatarokkal, amelyek magassága és szélessége is 100 pixel, se több, se kevesebb, így a képek témái is eltérőek. Ha egy adott témában keres egy avatart, nem pedig egy méretet, akkor az oldal bal oldalán találhatók szakaszok.

Menő avatar két gombos szex animációjával. Ezen az oldalon letölthetsz egy animált avatart két tűvel.

Az animált képen egy pár táncol a felhőkön. Töltse le az 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ó macskával zöldben. Tölts le egy klassz képet egy festett macskával.

Animált avatar fórumokhoz zöld arccal, villogó és villogó szemekkel. Töltsön le egy 100x100-as képet egy zöld pofa szemek animációjával.

Animált kép egy őrült bárányról, amely a nyelvét mutatja. Töltsön 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.

Söröskorsó avatar, 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 szerelmes szívet szó helyett. Töltse le a szöveges avatart zenei témában. És azoknak, akik követik a trendeket zeneipar nem csak az avatar lesz érdekes, hanem a zene is, ami sajnos nincs az oldalon.

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

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 képzeletbeli gitárral. Tölts le egy képet egy zenei témáról 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üveggel. Töltse le a kék farkas avatart.

Kinyújtott karú angyal képe. Töltsd le a titokzatos avatárt egy furcsán elrendezett szárnyú angyal tenyerével.

A képen egy gyönyörű macska pofa, 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ár csak egy fekete kör fehér koronával. Tölts le egy avatárt a napfogyatkozás fényképével.

Egy avatár, amelybe egy pohár és egy átlátszó folyadék folyik. Elég stílusos kép azoknak, akik szeretnek inni, főleg erős italokat.

Avatár kutyával, és többnyire a kutya orrával. Töltsön le egy képet a kutya orráról közelről, az állatok szerelmeseinek.

McDonald's logója a gyorsétterem szerelmeseinek és az étkezőben dolgozóknak. Töltsön le stílusos képet McDonalds logóval.

Nagyszerű avatar szívvel és animált kardiogramjával. Tölts le egy képet a szerelem témájában a "szerelem" 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 gyengéd színekben. Töltse le a gyengédség avatarját egy virággal rendelkező fórumhoz a webhelyen

David Blaine által rajzolt avatár, „Egy kis utcai varázslat?” felirattal. Tölts le egy vicces témát, amelyhez az utcák varázsa szöveggel és maga az utcabűvész. Amikor a Bocharov által fordított Blaine-nel készült videó egyszerűen felrobbantotta az internetet, még mindig több száz photoshopot és idézetet tárol az ősi internet. Mára ezt a mémet szinte feledésbe merült, és ritkán olvassa el a „Számban a lábammal” vagy a „teríts vissza” kifejezést, de rengeteg ú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 villogó szemekkel egy rajzfilm nyusziról.

A képen vörös lángokban lobog a gitár, ilyen hangszerről álmodoznak a rockerek. Töltse le az animált tüzes gitár avatárt a zenei részben.

Ez az oldal nagyszerű képeket tartalmaz, amelyekkel díszítheti bejegyzését egy online naplóban, blogban, LiveJournalban. Az avatarok letöltése és újbóli feltöltése nem szükséges, csak néhány kattintással másolja ki a kép kódját, és illessze be ezt a kódot a blogbejegyzésébe. Ezen kívül sok ilyen avatar használható mások bejegyzéseihez való megjegyzésként, néha egy kép sokkal többet mond, mint egy nagy szöveg. Egy egyedülálló webhely a legjobb avatarok gyűjteményét mutatja be. Nincs olyan felesleges szemét, amely erkölcsileg elavult, és amelynek minősége megkérdőjelezi az ezeket 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.