Icona del blog inferiore a 100 kb. Crea un avatar usando Paint. Schermi Retina e HiDPI

Saluti cara comunità Habr! Scrivo questa breve nota come un importante programma educativo per tutti coloro che lavorano con immagini raster. Di solito, la domanda su cosa misurare le immagini sorge tra i principianti, ma anche gli specialisti esperti confondono i termini.

Cominciamo con la cosa principale: le immagini raster sono costituite da pixel. Questa potrebbe essere la fine di questo articolo, ma non è sufficiente per tutti, quindi parliamo delle idee sbagliate e dei miti che ho incontrato nella pratica.

DPI, PPI e ridimensionamento

L'idea sbagliata più comune è l'uso delle unità DPI (punti per pollice) e PPI (pixel per pollice). Queste unità in realtà si riferiscono rispettivamente a stampanti e scanner. Possono essere utilizzati anche nelle caratteristiche dello schermo. Essenzialmente si tratta di fattori di conversione tra le dimensioni fisiche di un'immagine analogica (in centimetri o pollici) e le dimensioni in pixel di un'immagine digitale.

Ad esempio, un'immagine da 100 pixel stampata a 100 DPI avrà una dimensione di 1 pollice. Tutto è semplice e chiaro.

Tuttavia, quando si modificano le dimensioni negli editor grafici, ci viene chiesto di indicare le dimensioni in dimensioni per noi convenienti, inclusi DPI. È qui che inizia la confusione.

Infatti, le dimensioni fisiche dell'immagine (in centimetri, pollici, ecc.) e il valore DPI sono solo metainformazioni nelle proprietà del file. Ma l'editor può utilizzare questi valori come mezzo per specificare le dimensioni in pixel richieste.

Diciamo di avere un'immagine di 3000 pixel (quadrata), che ha un valore di 300 DPI. Otteniamo: 3000 pixel / 300 DPI = 10 pollici. Ora vai all'editor (Photoshop) e modifica il valore DPI a 600. Cosa otteniamo? E questo dipende dalla casella di controllo "Ricampiona". Se lo è, otterremo l'upsampling dell'immagine 6000 pixel. In caso contrario, la dimensione diventerà in pollici 5 invece di 10 .

Pertanto, per lo sviluppo web, tutte le dimensioni fisiche (DPI, centimetri, pollici, ecc.) possono essere tranquillamente ignorate e considerate esclusivamente le dimensioni dei pixel.

Schermate DPI/PPI

Qui arriviamo alla questione della risoluzione dello schermo e della densità dei pixel. Questa densità viene correttamente definita PPI (pixel per pollice) e mostra quanti pixel possono essere visualizzati su un pollice dello schermo.

È qui che spesso compaiono i mitici 72 e 96 PPI, che dovrebbero indicare la densità di pixel "standard" per gli schermi. Per le attività di visualizzazione della grafica sul Web, sono inutili. Allo stesso tempo, la densità effettiva dei pixel dello schermo potrebbe essere completamente diversa: in genere qualcosa intorno a 120 PPI (puoi misurarla e calcolarla per il tuo schermo).

Ma ricordiamo che le immagini raster si misurano solo in pixel e nient'altro. Perché stiamo parlando di PPI dello schermo? Perché esistono schermi “Retina” o “HiDPI”.

Schermi Retina e HiDPI

Tali display sono ampiamente utilizzati in dispositivi mobili e laptop costosi. Si tratta essenzialmente di un aumento quantitativo dei pixel mantenendo inalterate le dimensioni fisiche dello schermo (ad esempio 5 pollici di diagonale e 330 PPI).

Per noi sviluppatori web ciò significa la comparsa di diversi pixel nel browser: pixel CSS (che solitamente specifichiamo nelle dimensioni degli elementi) e pixel fisici (pixel reali sullo schermo). La formula è: pixel fisici = pixel CSS * DPR.
DPR è il rapporto pixel del dispositivo: il rapporto di conversione dei pixel CSS in quelli fisici.

Quando pubblichiamo un'immagine, possiamo scrivere un tag imm con dimensioni di 20px e l'immagine sarà di 40 pixel. In questo caso su uno schermo con DPR=2.0 vedremo tutti i pixel dell'immagine. Ma in questa situazione non ci preoccupiamo assolutamente dei valori PPI effettivi dello schermo.

Allo stesso tempo, possiamo utilizzare immagini con un'elevata densità di pixel per schermi normali; il browser stesso ridimensionerà l'immagine. E ancora, DPI e PPI non c'entrano nulla, ma le immagini misurato in pixel. Come visualizzarli lo deciderà il browser, che dispone già di due tipi di pixel.

Questo è tutto, anche se ovviamente non ho detto nulla sulle immagini adattive, sui modi per ottimizzare il loro impatto e sui suggerimenti per il cliente. Ma questa è un'altra storia.

Cos'è un avatar? Questa è una piccola immagine associata a un utente specifico rete sociale, forum o chat. Puoi scaricare un avatar da una delle migliaia di risorse Internet oppure puoi crearlo tu stesso. Come farlo? – ne parleremo ulteriormente. Per questo serve il programma” Microsoft Paint", che è incluso nel set standard di programmi per qualsiasi sistema operativo Microsoft.

Per prima cosa, decidiamo da quale immagine creeremo il nostro avatar unico. Potrebbe essere la nostra foto, il nostro sfondo del desktop preferito o un'immagine carina presa da Internet. Dobbiamo creare un avatar con una dimensione di 100x100 pixel, questo è il formato supportato dalla maggior parte delle chat e sistemi sociali. Tuttavia, se lo desideri, puoi impostare qualsiasi dimensione dell'immagine, che sia 64x64 o 150x150 pixel.

Ora apri il programma Microsoft Paint facendo clic sul pulsante "Start" nella parte inferiore del desktop e selezionando la categoria "Accessori" nel menu "Programmi".

Sullo schermo vediamo:

Ora dobbiamo aprire l'immagine selezionata nel programma Paint. Andiamo alla sezione "File", che si trova nella parte superiore della finestra del programma, quindi facciamo clic su "Apri" e troviamo la nostra immagine nell'elenco.

Apri l'immagine

Ora inizia il lavoro principale per creare Ava. Nel menu, seguire il seguente percorso “Disegni” - “Attributi”. Vediamo la seguente immagine:

Prestiamo attenzione alle dimensioni dell'immagine originale. Il nostro è largo 1024 e lungo 768. Scriviamo questi parametri. Successivamente, fai clic sul pulsante “Ok” e continua a lavorare. Ancora una volta andiamo alla sezione "Disegni". Lì troviamo l'opzione “Allunga/Inclina”. Selezionalo e ottieni quanto segue sullo schermo:

Ora ricordiamo i parametri originali della nostra immagine (1024 di larghezza e 768 di lunghezza). Questo è al 100% sia verticalmente che orizzontalmente. Facciamo alcuni piccoli calcoli e scopriamo che la dimensione dell'avatar finito non deve superare il 16% di quella sorgente. Nei campi “Orizzontale” e “Verticale” inserisci il numero 16. Clicca “OK” e ammira la nostra creazione che misura 164x123 pixel. Non dobbiamo dimenticare che puntiamo ad un'immagine con un lato di 100 pixel.

Noi abbiamo:

Vai alla sezione “Modifica” e seleziona l’opzione “Seleziona tutto”. Selezioniamo con una cornice tratteggiata l'area del disegno che vogliamo vedere come ava. Il cursore qui è una croce con frecce.

Clicca sull'immagine con il tasto destro del mouse. Nella finestra di dialogo, seleziona "Copia" e segui il menu pannello superiore programmi. Lì selezioniamo l'opzione "Crea". Non allarmarti quando Paint ti chiede se salvare le modifiche al file; sentiti libero di fare clic su No. Dopo che viene visualizzato un foglio vuoto del nuovo documento, incolla lì la sezione copiata.

È fatto così. Impostiamo i parametri del campo: limitiamo la lunghezza e la larghezza a 100 pixel. Assicurati che le unità di misura siano pixel o punti. Prestiamo inoltre attenzione che la “Palette” sia colorata. Se devi creare un avatar con altri parametri, indicali in questa sezione (80x80, 150x150 o 64x64 pixel).

Minore è la dimensione dell'immagine richiesta, maggiore sarà la percentuale della sorgente che dobbiamo impostare.

Quindi, abbiamo un quadrato bianco pulito con un lato di 100 pixel.

→ Pagine → Una selezione di immagini con larghezza e altezza di 100 pixel, scarica avatar

Questa pagina del sito contiene molte immagini interessanti che possono essere utilizzate come avatar quasi ovunque, perché... la loro dimensione è 100 per 100. Ciò significa che l'altezza e la larghezza sono pari a 100 pixel (punti sullo schermo). Questa sezione contiene avatar non ordinati per argomento, il che rende la ricerca più interessante.

Immagine con un occhio e ciglia fatti di fuoco. Scarica un avatar insolito con ciglia fiammeggianti e occhi verdi.

Un'immagine animata con la sagoma di un lupo nella nebbia e uccelli che volano sullo sfondo. L'avatar non è colorato, ma molto interessante. Puoi scaricare un avatar dal sito o semplicemente copiare il codice per il suo posizionamento.

Nell'avatar il toro ha le corna. Scarica un'immagine con un animale potente, un toro arrabbiato. Un avatar così severo è adatto agli utenti con una natura violenta, così come ai moderatori.

Nella foto c'è la testa di un uccello nero: una torre; su avatarko.ru puoi scaricare avatar con vari uccelli, comprese le torri, nella sezione con gli uccelli.

Ecco un avatar divertente con un'immagine inaccessibile, ma comunque qualcosa è meglio di niente, quindi l'avatar ha una papera, scusate.

Un'immagine animata di una ragazza che corre con la coda all'insù. Scarica un avatar disegnato con l'animazione di una ragazza.

L'immagine mostra un criceto disegnato e un testo che avverte che la persona nascosta sotto l'avatar del roditore è al 100% un criceto. Su avatarko.ru puoi scaricare questo fantastico avatar, con un vero criceto, anche se disegnato.

L'immagine di una foca giocattolo che può essere utilizzata come avatar su forum e blog. Scarica un avatar con un sigillo di peluche sul sito web.

Scarica una deliziosa immagine con un piatto di vermicelli e pomodori. In generale, un avatar per gli amanti del cibo. Questo avatar è esclusivo; è vietato pubblicarlo su altri siti come contenuto.

Avatar animato con case di città. Scarica un'immagine in bianco e nero con case e animazioni di nuvole.

L'avatar presenta il logo di McDonald's realizzato con le torri gemelle e due aeroplani e la scritta "Mangia questo". Scarica l'immagine per gli odiatori degli americani.

Foto con Alex il leone che alza le sopracciglia dal cartone animato Madagascar. Scarica l'avatar animato di un leone dei cartoni animati del Madagascar.

Un avatar con uno zombie con gli occhi cavati che indossa un cappello e una sciarpa con dita animate. Un'immagine horror con zombie in toni di grigio con animazione.

Immagine animata con un cetriolo su una forchetta. Scarica un fantastico avatar con uno spuntino al cetriolo.

Un avatar con un passero seduto che sembra una pallina con zampe e becco. Scarica un'immagine con un uccellino, il vicino costante di una persona.

Una bellissima immagine con uno stormo di pipistrelli sullo sfondo di una luna rotonda. Non è un dato di fatto che questi pipistrelli siano vampiri, tuttavia in questa pagina puoi scaricare un buon avatar.

Avatar elegante con un fantasma, foto con Sfondo trasparente in formato PNG..

Un bellissimo avatar con il fuoco disegnato e un uomo in fiamme. Scarica un'immagine da 100 x 100 pixel di un uomo focoso.

Avatar carino con un orso polare giocattolo con un cuore sull'avatar. Scarica l'immagine da orso bianco nella sezione “Amore”, la cui dimensione è 100 per 100 pixel.

Una foto con una principessa con un abito rosa e una maschera su sfondo bianco..

Nella foto c'è una ragazza con ali d'angelo dipinte.. Ti suggerisco anche di familiarizzare con la sezione dedicata agli angeli.

Un avatar animato con un ragno che corre lungo il contorno dell'immagine e costruisce una ragnatela nell'angolo. Scarica un'immagine 100 x 100 con l'animazione di un ragno. Su Avatarko.ru puoi scaricare fantastici avatar con animali.

Un avatar con le labbra bruciate da una sigaretta. Una foto delle labbra di una ragazza che fuma e che ha dimenticato di togliere la sigaretta. Se hai bisogno di un'immagine più grande, la fonte con le labbra si trova sotto.

Candela animata su sfondo verde. Scarica un avatar 100x100 con una candela accesa con animazione di fiamma.

Un'immagine con uno sfondo rosa animato con una bionda. Scarica un bellissimo avatar per ragazze con i capelli biondi e, per coloro a cui piace il colore rosa, scarica l'avatar. Attenzione, il peso dell'immagine potrebbe non essere adatto a molti forum.

Avatar con un gatto rosso sorridente con il naso rosso. Un'immagine molto bella e positiva per il tuo avatar.

Un'immagine in bianco e nero con l'animazione di un uomo che cade costantemente a causa del terreno traballante. Scarica un avatar animato largo 100 e alto 100 con le cadute di un uomo disegnato.

Un avatar esclusivo realizzato da me appositamente per il sito con uno scoiattolo animato che si mette una noce nella guancia. Scarica un'immagine 100x100 con l'animazione di un divertente roditore che gioca con una noce. È vietato inserire un avatar come contenuto senza indicare un collegamento indicizzato alla fonte.

Sempre più persone cercano dove scaricare avatar 100x100 e in modo che siano il più unici e interessanti possibile. Questo problema può essere risolto, tranne che con la creazione di massa di collezioni interessanti, solo costringendo ogni cercatore a sedersi con una sorta di editor grafico avatar. Redattori in linea avatar acceso questo momento sono primitivi e non sostituiranno mai i designer professionisti. La maggior parte dei forum ti consente di impostare un avatar le cui dimensioni non superino 100 in lunghezza e larghezza, quindi a volte devi ridurre tu stesso l'immagine ai limiti richiesti. Qui non incontrerai un problema del genere, perché... tutti gli avatar hanno già la dimensione che ti serve. Sì, e puoi usarli non solo come avatar, ma anche come immagini nell'argomento, aggiungeranno più ricchezza al messaggio.

→ Pagine → Scarica i migliori avatar con dimensioni 100 per 100 pixel

Una sezione solo con avatar, la cui altezza e larghezza sono 100 pixel, né più né meno, quindi i temi delle immagini sono diversi. Se stai cercando un avatar su un argomento specifico e non in base alle dimensioni, ci sono delle sezioni sul lato sinistro del sito.

Fantastico avatar con l'animazione di due spilli che fanno sesso. In questa pagina puoi scaricare un avatar animato con due spille.

Un'immagine animata mostra una coppia che balla sulle nuvole. Scarica un avatar con una danza sullo sfondo della luna.

Un'immagine dal gioco Worms con un verme con un'aureola, che prega prima della battaglia dei vermi. Scarica un avatar da un popolare gioco per computer.

Un avatar animato con un gatto verde addormentato. Scarica una bella immagine con un gatto disegnato.

Un avatar animato per forum con una faccia verde con occhi guizzanti e lampeggianti. Scarica un'immagine 100x100 con l'animazione degli occhi su una faccia verde.

Immagine animata di una pecora pazza che fa la linguaccia. Scarica un simpatico avatar con una strana pecora su uno sfondo grigio.

Avatar raffigurante un ippopotamo rosa che fa il bagno nell'acqua. Scarica un'immagine animata con un ippopotamo rosa. L'avatar è perfetto per Paris Hilton.

Una foto per chi ama bere bevande alcoliche. Scarica un avatar con il testo "Sono un alcolizzato" e un bicchiere.

Avatar con un boccale di birra, scarica l'immagine del venerdì con la birra in un boccale trasparente. Immagine luminosa su uno sfondo grigio

Fantastico avatar animato con un uomo barbuto che colpisce un computer. Scarica un'immagine in cui il computer non funziona e l'utente lo batte.

Un'immagine con la scritta "I love music" su sfondo nero, al posto della parola "love" c'è un cuore. Scarica un avatar testuale su un tema musicale. E per chi segue le tendenze in industria della musica Ti interesserà non solo l'avatar, ma anche la musica, che purtroppo non è sul sito.

Immagine animata con un occhio verde. Scarica un fantastico avatar con l'animazione di un occhio verde che lampeggia e numeri in movimento visibili nel riflesso dell'occhio.

Fantastica immagine animata con un gattino nero che miagola. Scarica un meraviglioso avatar con un gatto su sfondo rosa con animazione.

Avatar animato con un ragazzo con un iPod e una chitarra aerea. Scarica un'immagine a tema musicale con l'animazione di un ragazzo su sfondo giallo.

L'immagine mostra un lupo blu con un sigaro in bocca e con gli occhiali da sole. Scarica avatar con un lupo blu.

Quadro con un angelo con le braccia tese. Scarica un avatar misterioso con palme d'angelo e ali posizionate in modo strano.

L'immagine mostra una bellissima faccia di gatto, scarica un avatar con un soffice gatto bianco.

L'immagine mostra un asino parlante del cartone animato Shrek. Scarica un avatar con un asino sorridente, un animale cartone animato positivo.

L'immagine mostra un'eclissi solare, ma in teoria l'avatar ha solo un cerchio nero con una corona bianca. Scarica un avatar con una foto di un'eclissi solare.

Avatar con un bicchiere e un liquido trasparente che scorre al suo interno. Un'immagine piuttosto elegante per chi ama bere, soprattutto bevande forti.

Un avatar con un cane e soprattutto il naso di un cane. Scarica un'immagine con il primo piano del naso di un cane, per gli amanti degli animali domestici.

Avatar con il logo McDonald's, per gli amanti del fast food e per i lavoratori del fast food. Scarica un'immagine elegante con il logo McDonalds.

Un eccellente avatar con un cuore e il suo cardiogramma animato. Scarica un'immagine sul tema dell'amore con l'animazione di un impulso "d'amore".

Immagine animata sul tema del cielo e della velocità, scarica un avatar con l'animazione delle nuvole quando volano nel cielo.

Una foto con una bellissima camomilla dai colori tenui. Scarica avatar tenerezza per il forum con un fiore sul sito web

Un avatar con un disegno di David Blaine e la didascalia "Un po' di magia di strada?" Scarica un'immagine divertente il cui tema è la magia di strada con testo e lo stesso mago di strada. Quando il video con Blaine tradotto da Bocharov ha semplicemente fatto esplodere Internet, centinaia di immagini e citazioni ritoccate con Photoshop sono ancora archiviate negli antichi Internet. Ora questo meme è quasi dimenticato e raramente leggi la frase "I miei piedi in bocca" o "knock me back", ma sono comparsi molti nuovi meme che presto subiranno la stessa sorte.

Avatar animato con Krosh dal cartone animato Smesharika. Scarica l'immagine di un coniglietto cartone animato che sbatte le palpebre.

Nella foto, la chitarra risplende di una fiamma rossa, il tipo di strumento musicale che i rocker sognano. Scarica un avatar animato con una chitarra infuocata nella sezione musica.

Questa pagina contiene immagini eccellenti con cui puoi decorare il tuo post in un diario online, blog, LiveJournal. Non è necessario scaricare e ricaricare gli avatar; tutto ciò che devi fare è copiare il codice dell'immagine in un paio di clic e incollarlo nel post del tuo blog. Inoltre, molti di questi avatar possono essere utilizzati come commento ai messaggi di altre persone; a volte l'immagine dice molto più di un testo di grandi dimensioni. Il sito web unico presenta alla tua attenzione una raccolta dei migliori avatar. Non c'è spazzatura inutile qui, che è obsoleta e la cui qualità mette in dubbio la sanità mentale degli utenti che li utilizzano. Nonostante la tendenza ad aumentare le dimensioni degli avatar, la dimensione 100x100 resta ancora la più utilizzata e si adatta alla maggior parte di Internet.