Blog simgesi 100 kb'den küçük. Paint'i kullanarak bir avatar oluşturun. Retina ve HiDPI ekranlar

Selamlar sevgili Habr topluluğu! Bu kısa notu raster görüntülerle çalışan herkes için önemli bir eğitim programı olarak yazıyorum. Genellikle görüntülerin neyle ölçüleceği sorusu yeni başlayanlar arasında ortaya çıkar, ancak deneyimli uzmanlar da terimleri karıştırır.

Ana şeyle başlayalım: raster görüntüler şunlardan oluşur: piksel. Bu yazının sonu olabilir ama bu herkes için yeterli değil o yüzden pratikte karşılaştığım yanılgılardan ve mitlerden bahsedelim.

DPI, ÜFE ve yeniden boyutlandırma

En yaygın yanılgı DPI (inç başına nokta) ve PPI (inç başına piksel) birimlerinin kullanılmasıdır. Bu birimler aslında sırasıyla yazıcıları ve tarayıcıları ifade eder. Ekran özelliklerinde de kullanılabilirler. Temel olarak bunlar, analog görüntünün fiziksel boyutları (santimetre veya inç cinsinden) ile dijital görüntünün piksel boyutları arasındaki dönüşüm faktörleridir.

Örneğin, 100 DPI'da basılan 100 piksellik bir görüntünün boyutu 1 inç olacaktır. Her şey basit ve net.

Ancak grafik editörlerinde boyut değiştirirken bize uygun boyutlardaki boyutları DPI dahil belirtmemiz isteniyor. Karışıklığın başladığı yer burasıdır.

Aslında görüntünün fiziksel boyutları (santimetre, inç vb. cinsinden) ve DPI değeri, dosya özelliklerindeki yalnızca meta bilgilerdir. Ancak editör bu değerleri gerekli piksel boyutlarını belirtmek için kullanabilir.

Diyelim ki 300 DPI değerine sahip 3000 piksel (kare) bir görselimiz var. Şunu elde ederiz: 3000 piksel / 300 DPI = 10 inç. Şimdi editöre (Photoshop) gidin ve DPI değerini 600 olarak değiştirin. Ne elde ederiz? Bu da “Yeniden Örnekle” onay kutusuna bağlıdır. Eğer öyleyse, görüntünün örneklenmesini sağlayacağız 6000 piksel. Değilse, inç cinsinden boyut şu şekilde olacaktır: 5 yerine 10 .

Böylece, web geliştirme için tüm fiziksel boyutlar (DPI, santimetre, inç vb.) güvenli bir şekilde göz ardı edilebilir ve yalnızca piksel boyutlarına bakılabilir.

DPI/PPI ekranları

İşte ekran çözünürlüğü ve piksel yoğunluğu konusuna geliyoruz. Bu yoğunluğa doğru bir şekilde PPI (inç başına piksel) denir ve ekranın bir inçinde kaç pikselin görüntülenebileceğini gösterir.

Ekranlar için "standart" piksel yoğunluğunu gösterdiği varsayılan efsanevi 72 ve 96 ÜFE'nin sıklıkla ortaya çıktığı yer burasıdır. Web'de grafik görüntüleme görevleri için bunlar işe yaramaz. Aynı zamanda, ekranın gerçek piksel yoğunluğu tamamen farklı olabilir: genellikle 120 PPI civarındadır (ekranınız için ölçebilir ve hesaplayabilirsiniz).

Ancak raster görüntülerin yalnızca piksel ve başka hiçbir şey yok. Neden ekran ÜFE'sinden bahsediyoruz? Çünkü “Retina” veya “HiDPI” ekranlar var.

Retina ve HiDPI ekranlar

Bu tür ekranlar yaygın olarak kullanılmaktadır. mobil cihazlar ve pahalı dizüstü bilgisayarlar. Esasen bu, ekranın fiziksel boyutlarını (örneğin çapraz olarak 5 inç ve 330 PPI) korurken piksellerde niceliksel bir artıştır.

Web geliştiricileri olarak bizim için bu, tarayıcıda farklı piksellerin görünmesi anlamına gelir: CSS pikselleri (genellikle öğelerin boyutlarında belirtiriz) ve fiziksel pikseller (ekrandaki gerçek pikseller). Formül şu şekildedir: Fiziksel pikseller = CSS pikselleri * DPR.
DPR, cihazın piksel oranıdır; CSS piksellerinin fiziksel olanlara dönüşüm oranıdır.

Bir resim yayınlarken bir etiket yazabiliriz img 20 piksel boyutunda ve görüntü 40 piksel olacaktır. Bu durumda DPR=2.0 olan bir ekranda resmin tüm piksellerini göreceğiz. Ancak bu durumda ekranın gerçek ÜFE değerlerinden kesinlikle endişe duymuyoruz.

Aynı zamanda normal ekranlar için yüksek piksel yoğunluğuna sahip görseller kullanabiliriz; tarayıcının kendisi görseli ölçeklendirecektir. Ve tekrar ediyorum, DPI ve ÜFE'nin bununla hiçbir ilgisi yok ama resimler piksel cinsinden ölçülür. Bunların nasıl görüntüleneceğine, halihazırda iki tür piksele sahip olan tarayıcı tarafından karar verilecektir.

Tabii ki uyarlanabilir görseller, etkilerini optimize etme yolları ve müşteri ipuçları hakkında hiçbir şey söylemedim, ancak hikayenin tamamı bu. Ama bu başka bir hikaye.

Avatar nedir? Bu, belirli bir kullanıcıyla ilişkilendirilen küçük bir resimdir sosyal ağ, forum veya sohbet. Binlerce İnternet kaynağından birinden bir avatar indirebilir veya kendiniz oluşturabilirsiniz. Nasıl yapılır? – bunun hakkında daha ayrıntılı konuşacağız. Bunun için programa ihtiyacımız var " Microsoft Boya", herhangi bir program için standart program setine dahil edilmiştir. işletim sistemi Microsoft.

Öncelikle hangi resimden eşsiz avatarımızı yapacağımıza karar verelim. Bu bizim fotoğrafımız, favori masaüstü duvar kağıdımız veya internetten sevimli bir resim olabilir. 100x100 piksel boyutunda bir avatar yapmamız gerekiyor, bu çoğu sohbetin desteklediği formattır ve sosyal sistemler. Ancak istenirse 64x64 veya 150x150 piksel gibi herhangi bir görüntü boyutunu ayarlayabilirsiniz.

Şimdi masaüstünün alt kısmındaki “Başlat” butonuna tıklayarak ve “Programlar” menüsünden “Aksesuarlar” kategorisini seçerek Microsoft Paint programını açın.

Ekranda şunu görüyoruz:

Şimdi seçilen görüntüyü Paint programında açmalıyız. Program penceresinin en üst kısmında bulunan “Dosya” bölümüne gidip “Aç”a tıklayıp listede görselimizi buluyoruz.

Resmi aç

Artık Ava'yı yaratmanın asıl işi başlıyor. Menüde aşağıdaki “Çizim” - “Nitelikler” yolunu izleyin. Aşağıdaki resmi görüyoruz:

Orijinal görselin boyutuna dikkat edelim. Bizimki 1024 eninde, 768 boyundadır. Bu parametreleri yazalım. Daha sonra “Tamam” butonuna tıklayın ve çalışmaya devam edin. Yine “Çizim” bölümüne geçiyoruz. Burada “Uzat / Eğ” seçeneğini buluyoruz. Onu seçin ve ekranda aşağıdakileri görün:

Şimdi görselimizin orijinal parametrelerini (1024 genişlik ve 768 uzunluk) hatırlayalım. Bu hem dikey hem de yatay olarak %100'dür. Bazı küçük hesaplamalar yapıyoruz ve bitmiş avatarın boyutunun kaynağın %16'sını geçmemesi gerektiğini buluyoruz. “Yatay” ve “Dikey” alanlara 16 sayısını girin. “Tamam”a tıklayın ve 164x123 piksel boyutlarındaki tasarımımıza hayran kalın. Kenarı 100 piksel olan bir görsel hedeflediğimizi unutmamalıyız.

Şunu elde ederiz:

“Düzenle” bölümüne gidin ve “Tümünü Seç” seçeneğini seçin. Çizimin ava olarak görmek istediğimiz alanını noktalı çerçeve ile seçiyoruz. Buradaki imleç okların olduğu bir çarpı işaretidir.

Farenin sağ tuşuyla resmin üzerine tıklayın. İletişim kutusunda “Kopyala”yı seçin ve menüyü takip ederek üst panel programlar. Orada “Oluştur” seçeneğini seçiyoruz. Paint size değişiklikleri dosyaya kaydedip kaydetmeyeceğinizi sorduğunda paniğe kapılmayın; Hayır'a tıklamaktan çekinmeyin. Yeni belgenin boş bir sayfası göründükten sonra kopyalanan bölümü buraya yapıştırın.

Bu böyle yapılır. Alan parametrelerini belirliyoruz: uzunluğu ve genişliği 100 pikselle sınırlandırıyoruz. Ölçü birimlerinin piksel veya nokta olduğundan emin olun. “Palet”in renkli olmasına da dikkat ediyoruz. Başka parametrelerle bir avatar oluşturmanız gerekiyorsa, bunları bu bölümde belirtin (80x80, 150x150 veya 64x64 piksel).

Gerekli görüntü boyutu ne kadar küçük olursa, ayarlamamız gereken kaynağın yüzdesi de o kadar büyük olur.

Yani, kenarı 100 piksel olan temiz beyaz bir karemiz var.

→ Sayfalar → Genişliği ve yüksekliği 100 piksel olan resimlerden oluşan bir seçki, avatarları indirin

Sitenin bu sayfası hemen hemen her yerde avatar olarak kullanılabilecek pek çok ilginç resim içeriyor, çünkü... boyutları 100 x 100'dür. Bu, yükseklik ve genişliğin 100 piksele (ekrandaki noktalar) eşit olduğu anlamına gelir. Bu bölüm konuya göre sıralanmamış avatarlar içerir, bu da aramayı daha ilginç hale getirir.

Ateşten yapılmış göz ve kirpiklerin olduğu resim. Ateşli kirpiklere ve yeşil göze sahip alışılmadık bir avatar indirin.

Sisin içindeki bir kurdun siluetinin ve arka planda uçan kuşların yer aldığı animasyonlu bir resim. Avatar renkli değil ama çok ilginç. Siteden bir avatar indirebilir veya yerleştirilmesi için kodu kopyalayabilirsiniz.

Avatarda boğanın boynuzları var. Güçlü bir hayvanın, kızgın bir boğanın resmini indirin. Böylesine sert bir avatar, şiddet içeren bir yapıya sahip kullanıcılar ve moderatörler için uygundur.

Resimde siyah bir kuşun başı - bir kale; avatarko.ru'da kuşlar bölümünde kaleler de dahil olmak üzere çeşitli kuşların yer aldığı avatarları indirebilirsiniz.

İşte erişilemeyen bir resme sahip komik bir avatar, ama yine de bir şey hiç yoktan iyidir, bu yüzden avatarın bir ördeği var, üzgünüm.

Kuyruğu dik bir şekilde koşan bir kızın animasyonlu resmi. Bir kızın animasyonunu içeren çizilmiş bir avatar indirin.

Resimde çizilmiş bir hamster ve kemirgen avatarının altında saklanan kişinin %100 hamster olduğuna dair uyarı metni yer alıyor. Avatarko.ru'da, çizilmiş de olsa gerçek bir hamster içeren bu harika avatarı indirebilirsiniz.

Forumlarda ve bloglarda avatar olarak kullanılabilecek oyuncak fok resmi. Web sitesine lüks mühürlü bir avatar indirin.

Bir tabak erişte ve domates ile lezzetli bir resim indirin. Genel olarak yemek severler için bir avatar. Bu avatar kişiye özeldir, başka sitelerde içerik olarak yayınlanması yasaktır.

Şehir evlerinin olduğu animasyonlu avatar. Evlerin ve bulutların animasyonunun yer aldığı siyah beyaz bir resim indirin.

Avatarda ikiz kulelerden ve iki uçaktan yapılmış bir McDonald's logosu ve "Bunu ye" yazısı yer alıyor. Amerikalılardan nefret edenler için resmi indirin.

Madagaskar çizgi filmindeki aslan Alex'in kaşlarını kaldırdığı resim. Madagaskar'dan bir çizgi film aslanı karakterinin animasyonlu avatarını indirin.

Hareketli parmakları olan, şapka ve atkı takan, gözleri oyulmuş bir zombinin olduğu bir avatar. Animasyonlu, gri tonlarda zombilerin yer aldığı bir korku resmi.

Çatal üzerinde salatalık bulunan animasyonlu resim. Salatalık atıştırmalıklarıyla harika bir avatar indirin.

Bacakları ve gagası olan küçük bir topa benzeyen oturan serçenin bulunduğu bir avatar. Bir kişinin sürekli komşusu olan küçük bir kuşun resmini indirin.

Yuvarlak ayın arka planında yarasa sürüsünün olduğu güzel bir resim. Bu yarasaların vampir olduğu bir gerçek değil ancak bu sayfada iyi bir avatar indirebilirsiniz.

Hayaletli şık avatar, resimli şeffaf arka plan PNG formatında..

Ateşi çekilmiş güzel bir avatar ve yanan bir adam. Ateşli bir adamın 100 x 100 piksellik görüntüsünü indirin.

Avatarında kalp olan oyuncak bir kutup ayısı olan sevimli bir avatar. Resmi şuradan indirin: ayı Boyutu 100 x 100 piksel olan “Aşk” bölümünde beyaz.

Pembe elbiseli bir prensesin ve beyaz arka planda maskenin olduğu bir resim..

Resimde melek kanatları boyalı bir kız var. Ayrıca meleklere ayrılmış bölümü de tanımanızı öneririm.

Resmin ana hatları boyunca koşan ve köşede bir ağ oluşturan bir örümceğin yer aldığı animasyonlu bir avatar. Örümcek animasyonunu içeren 100 x 100 boyutunda bir resim indirin. Avatarko.ru'da hayvanlarla harika avatarlar indirebilirsiniz.

Dudakları sigaradan yanmış bir avatar. Sigarasını çıkarmayı unutan sigara içen bir kızın dudaklarının resmi. Daha büyük görsele ihtiyacınız varsa dudaklı kaynak aşağıda yer almaktadır.

Yeşil arka planda animasyonlu mum. Alev animasyonlu, yanan bir mumun yer aldığı 100x100 boyutunda bir avatar indirin.

Animasyonlu pembe arka plana sahip, sarışın bir resim. Sarı saçlı kızlar için güzel bir avatar, pembe rengini sevenler için ise avatarı indirin. Dikkatli olun, görselin ağırlığı birçok foruma uygun olmayabilir.

Kırmızı burunlu, gülümseyen kızıl kedili avatar. Avatarınız için çok güzel ve olumlu bir resim.

Sarsıntılı zemin nedeniyle sürekli düşen bir adamın animasyonunun yer aldığı siyah beyaz resim. Çizilmiş bir adamın düşüşlerini gösteren, 100 genişliğinde ve 100 yüksekliğinde animasyonlu bir avatar indirin.

Yanağına fındık koyan animasyonlu bir sincabın yer aldığı, site için özel olarak benim tarafımdan yapılmış özel bir avatar. Fındıkla oynayan komik bir kemirgenin animasyonunu içeren 100x100 boyutunda bir resim indirin. Kaynağa indekslenmiş bir bağlantı belirtilmeden içerik olarak avatar yerleştirmek yasaktır.

Gittikçe daha fazla insan 100x100 avatarları nereden indireceklerini arıyor ve bu sayede mümkün olduğunca benzersiz ve ilginç oluyorlar. Bu sorun, ilginç koleksiyonların kitlesel olarak oluşturulması dışında, yalnızca her arayan kişinin bir tür avatar grafik düzenleyicisine oturmaya zorlanmasıyla çözülebilir. Çevrimiçi editörler avatar açık şu an ilkeldir ve asla profesyonel tasarımcıların yerini alamayacaktır. Çoğu forum, boyutları uzunluk ve genişlik olarak 100'ü aşmayan bir avatar ayarlamanıza izin verir, bu nedenle bazen görüntüyü gerekli sınırlara kendiniz düşürmeniz gerekir. Burada böyle bir sorunla karşılaşmazsınız çünkü... tüm avatarlar zaten ihtiyacınız olan boyuta sahiptir. Evet, bunları sadece avatar olarak değil, konu içerisinde resim olarak da kullanabilirsiniz, mesaja daha fazla zenginlik katacaktır.

→ Sayfalar → 100 x 100 piksel boyutlarındaki en iyi avatarları indirin

Yüksekliği ve genişliği 100 piksel olan, ne fazla ne az, dolayısıyla resimlerin temaları farklı olan, yalnızca avatarların bulunduğu bir bölüm. Boyuta göre değil de belirli bir konuya ilişkin bir avatar arıyorsanız sitenin sol tarafında bölümler vardır.

İki iğnenin seks yaptığı animasyonu içeren havalı avatar. Bu sayfada iki iğneli animasyonlu bir avatar indirebilirsiniz.

Animasyonlu bir resim bulutların üzerinde dans eden bir çifti gösteriyor. Ayın arka planında dans eden bir avatar indirin.

Solucanlar savaşından önce dua eden haleli bir solucanla Worms oyunundan bir resim. Popüler bir bilgisayar oyunundan bir avatar indirin.

Uyuyan yeşil bir kedinin olduğu animasyonlu bir avatar. Çizilmiş bir kedinin olduğu harika bir resim indirin.

Yeşil yüzlü, hızla atılan ve yanıp sönen gözlere sahip, forumlar için animasyonlu bir avatar. Yeşil bir yüzdeki gözlerin animasyonunu içeren 100x100 boyutunda bir görsel indirin.

Dilini dışarı çıkaran çılgın bir koyunun animasyonlu resmi. Gri arka planda tuhaf bir koyunun olduğu havalı bir avatar indirin.

Suda yıkanan pembe bir su aygırını tasvir eden avatar. Pembe su aygırı içeren animasyonlu bir resim indirin. Avatar Paris Hilton için mükemmel.

Alkollü içki içmeyi sevenler için bir resim. Üzerinde "Ben alkoliğim" yazısı ve bir bardak bulunan bir avatar indirin.

Avatar ve bir kupa bira, şeffaf bira bardağında bira ile Cuma resmini indirin. Gri arka planda parlak resim

Sakallı bir adamın bilgisayara saldırdığı havalı animasyonlu avatar. Bilgisayarın çalışmadığı ve kullanıcının onu yendiği bir resmi indirin.

Siyah zemin üzerinde “Müziği seviyorum” yazan bir resim, “aşk” kelimesi yerine bir kalp var. Müzikal bir temaya ilişkin metin avatarını indirin. Ve trendleri takip edenler için müzik endüstrisi Sadece avatarla değil, maalesef sitede olmayan müzikle de ilgileneceksiniz.

Yeşil gözlü animasyonlu resim. Yeşil göz yanıp sönen ve gözün yansımasında görülebilen hareketli sayıların animasyonunu içeren mükemmel bir avatar indirin.

Siyah miyavlayan kedi yavrusunun yer aldığı harika animasyonlu resim. Animasyonlu, pembe arka planda kedili harika bir avatar indirin.

iPod'u ve havalı gitarı olan bir adamın yer aldığı animasyonlu avatar. Sarı arka planda bir adamın animasyonunu içeren müzikal temalı bir resim indirin.

Resimde ağzında puro olan ve güneş gözlüğü takan mavi bir kurt görülüyor. Mavi kurtlu avatar indir.

Kollarını uzatmış bir meleğin resmi. Garip bir şekilde yerleştirilmiş kanatları olan, melek avuç içi olan gizemli bir avatar indirin.

Resimde güzel bir kedi yüzü gösteriliyor, beyaz tüylü bir kedinin olduğu avatarı indirin.

Resimde Shrek çizgi filminden konuşan bir eşek gösterilmektedir. Gülümseyen bir eşek, olumlu bir karikatür hayvanı olan bir avatar indirin.

Resimde bir güneş tutulması gösteriliyor ancak teoride avatarda sadece beyaz taçlı siyah bir daire var. Güneş tutulması fotoğrafını içeren bir avatar indirin.

İçine cam ve berrak bir sıvı akan avatar. Özellikle sert içkiler içmeyi sevenler için oldukça şık bir tablo.

Köpekli ve çoğunlukla köpek burunlu bir avatar. Evcil hayvan severler için bir köpeğin burnunun yakın plan görüntüsünü içeren bir resim indirin.

Fast food severler ve fast food çalışanları için McDonald's logolu avatar. McDonalds logolu şık bir resim indirin.

Kalbi ve animasyonlu kardiyogramı olan mükemmel bir avatar. "Aşk" nabzının animasyonunu içeren aşk temalı bir resim indirin.

Gökyüzü ve hız temalı animasyonlu resim, gökyüzünde uçarken bulutların animasyonunu içeren bir avatar indirin.

Yumuşak renklerde güzel bir papatya içeren bir resim. Forum için avatar hassasiyetini web sitesinde bir çiçekle indirin

Üzerinde David Blaine çizimi bulunan ve "Biraz sokak büyüsü mü?" başlığını taşıyan bir avatar. Teması sokak büyüsü olan, metni ve sokak sihirbazının kendisi olan komik bir resim indirin. Bocharov tarafından çevrilen Blaine'li video interneti havaya uçurduğunda, yüzlerce photoshoplu resim ve alıntı hala eski internetlerde saklanıyor. Artık bu mem neredeyse unutuldu ve "Ayaklarım ağzınızda" veya "beni geri itin" ifadelerini nadiren okursunuz, ancak yakında aynı kaderi paylaşacak birçok yeni mem ortaya çıktı.

Smesharika çizgi filminden Krosh'un yer aldığı animasyonlu avatar. Gözlerini kırpıştıran bir tavşanın resmini indirin.

Resimde gitar, rockçıların hayalini kurduğu türden bir müzik aleti olan kırmızı bir alevle parlıyor. Müzik bölümünde ateşli bir gitarın olduğu animasyonlu bir avatar indirin.

Bu sayfa, çevrimiçi bir günlük, blog, LiveJournal'daki yayınınızı süsleyebileceğiniz mükemmel resimler içerir. Avatarları indirip yeniden yüklemenize gerek yoktur; tek yapmanız gereken görsel kodunu birkaç tıklamayla kopyalayıp bu kodu blog yazınıza yapıştırmak. Ayrıca bu avatarların birçoğu diğer insanların mesajlarına yorum olarak kullanılabilir; bazen resim büyük metinden çok daha fazlasını anlatır. Benzersiz web sitesi dikkatinize en iyi avatarlardan oluşan bir koleksiyon sunuyor. Burada, modası geçmiş ve kalitesi, onları kullanan kullanıcıların akıl sağlığını sorgulayan gereksiz çöpler yok. Her ne kadar avatarların boyutunu artırma yönünde bir eğilim olsa da, 100x100 boyutu hala lider olmayı sürdürüyor ve İnternet'in çoğunluğuna uyuyor.