Bloq işarəsi 100 kb-dan azdır. Paint istifadə edərək avatar yaradın. Retina və HiDPI ekranları

Salam əziz Habr icması! Bu qısa qeydi rastr şəkillərlə işləyən hər kəs üçün vacib bir təhsil proqramı kimi yazıram. Adətən, şəkilləri nə ilə ölçmək sualı yeni başlayanlar arasında yaranır, lakin təcrübəli mütəxəssislər də terminləri qarışdırırlar.

Əsas şeydən başlayaq: rastr şəkilləri ibarətdir piksel. Bu, bu məqalənin sonu ola bilər, lakin bu, hər kəs üçün kifayət deyil, ona görə də praktikada qarşılaşdığım yanlış təsəvvürlər və miflər haqqında danışaq.

DPI, PPI və ölçüsünün dəyişdirilməsi

Ən çox yayılmış yanlış fikir DPI (dt başına nöqtələr) və PPI (inç başına piksel) vahidlərinin istifadəsidir. Bu bölmələr əslində müvafiq olaraq printerlərə və skanerlərə aiddir. Onlar həmçinin ekran xüsusiyyətlərində istifadə edilə bilər. Əsasən bunlar analoq təsvirin fiziki ölçüləri (santimetr və ya düym ilə) və rəqəmsal təsvirin piksel ölçüləri arasında çevrilmə faktorlarıdır.

Məsələn, 100 DPI-da çap edilmiş 100 piksel təsvir ölçüsü 1 düym olacaq. Hər şey sadə və aydındır.

Bununla birlikdə, qrafik redaktorlarda ölçüləri dəyişdirərkən, DPI daxil olmaqla, ölçüləri bizim üçün əlverişli olan ölçülərdə göstərməyimiz xahiş olunur. Burada qarışıqlıq başlayır.

Əslində, təsvirin fiziki ölçüləri (santimetr, düym və s.) və DPI dəyəri fayl xüsusiyyətlərində sadəcə meta-məlumatdır. Lakin redaktor bu dəyərlərdən tələb olunan piksel ölçülərini təyin etmək vasitəsi kimi istifadə edə bilər.

Tutaq ki, bizdə 300 DPI dəyəri olan 3000 piksel (kvadrat) olan bir şəkil var. Alırıq: 3000 piksel / 300 DPI = 10 düym. İndi redaktora (Photoshop) gedin və DPI dəyərini 600-ə dəyişin. Nə əldə edirik? Və bu, "Yenidən Nümunələmə" qutusundan asılıdır. Əgər belədirsə, şəklin yuxarı nümunəsini alacağıq 6000 piksel. Əgər yoxsa, o zaman düymlərlə ölçülən olacaq 5 əvəzinə 10 .

Beləliklə, veb inkişafı üçün bütün fiziki ölçülər (DPI, santimetr, düym və s.) təhlükəsiz olaraq nəzərə alına və yalnız piksel ölçülərinə baxıla bilər.

DPI/PPI ekranları

Burada ekran həlli və piksel sıxlığı məsələsinə gəlirik. Bu sıxlıq düzgün olaraq PPI (düym başına piksel) adlanır və ekranın bir düymündə neçə pikselin göstərilə biləcəyini göstərir.

Ekranlar üçün "standart" piksel sıxlığını göstərməli olan mifik 72 və 96 PPI tez-tez yaranır. Qrafikləri internetdə göstərmək üçün onlar faydasızdır. Eyni zamanda, ekranın faktiki piksel sıxlığı tamamilə fərqli ola bilər: adətən təxminən 120 PPI (siz ekranınız üçün ölçə və hesablaya bilərsiniz).

Ancaq rastr şəkillərin yalnız ölçüldüyünü xatırlayırıq piksel və başqa heç nə. Niyə biz hətta ekran ÜFE haqqında danışırıq? Çünki “Retina” və ya “HiDPI” ekranları var.

Retina və HiDPI ekranları

Belə displeylərdən geniş istifadə olunur mobil cihazlar və bahalı noutbuklar. Əsasən, bu, ekranın fiziki ölçülərini (məsələn, diaqonal olaraq 5 düym və 330 PPI) qoruyarkən piksellərin kəmiyyət artımıdır.

Veb tərtibatçıları olaraq bizim üçün bu, brauzerdə müxtəlif piksellərin görünməsi deməkdir: CSS pikselləri (bunları adətən elementlərin ölçülərində qeyd edirik) və fiziki piksellər (ekrandakı real piksellər). Formula belədir: Fiziki piksellər = CSS pikselləri * DPR.
DPR cihaz piksel nisbətidir - CSS piksellərinin fiziki olanlara çevrilmə nisbətidir.

Şəkil yerləşdirən zaman etiket yaza bilərik imgölçüləri 20px, şəkil isə 40 piksel olacaq. Bu halda DPR=2.0 olan ekranda şəklin bütün piksellərini görəcəyik. Ancaq bu vəziyyətdə, ekranın faktiki PPI dəyərlərindən tamamilə narahat deyilik.

Eyni zamanda, adi ekranlar üçün yüksək piksel sıxlığı olan şəkillərdən istifadə edə bilərik, brauzerin özü təsviri miqyaslandıracaq. Yenə də DPI və PPI ilə heç bir əlaqəsi yoxdur, ancaq şəkillər piksellərlə ölçülür. Onları necə göstərmək barədə artıq iki növ piksel olan brauzer qərar verəcək.

Bütün hekayə budur, baxmayaraq ki, mən adaptiv şəkillər, onların təsirini optimallaşdırma yolları və müştəri göstərişləri haqqında heç nə deməmişəm. Amma bu başqa hekayədir.

Avatar nədir? Bu, müəyyən bir istifadəçi ilə əlaqəli kiçik bir şəkildir sosial şəbəkə, forum və ya söhbət. Siz minlərlə internet resurslarından birindən avatar yükləyə və ya özünüz yarada bilərsiniz. Bunu necə etmək olar? - bu haqda daha ətraflı danışacağıq. Bunun üçün bizə proqram lazımdır” Microsoft Paint", hər hansı bir proqram üçün standart proqram dəstinə daxildir əməliyyat sistemi Microsoft.

Əvvəlcə hansı şəkildən unikal avatarımızı edəcəyimizə qərar verək. Bu, bizim fotoşəkilimiz, sevimli masa üstü divar kağızımız və ya İnternetdən sevimli bir şəkil ola bilər. 100x100 piksel ölçüsündə bir avatar yaratmalıyıq, bu, əksər söhbətlər tərəfindən dəstəklənən formatdır və sosial sistemlər. Bununla belə, istəsəniz, istənilən şəkil ölçüsünü təyin edə bilərsiniz, istər 64x64, istərsə də 150x150 piksel.

İndi masaüstünün altındakı "Başlat" düyməsini sıxaraq və "Proqramlar" menyusunda "Aksesuarlar" kateqoriyasını seçməklə Microsoft Paint proqramını açın.

Ekranda görürük:

İndi Paint proqramında seçilmiş şəkli açmalıyıq. Proqram pəncərəsinin ən yuxarı hissəsində yerləşən "Fayl" bölməsinə gedirik, sonra "Açıq" düyməsini basın və siyahıda şəklimizi tapırıq.

Şəkli açın

İndi Ava yaratmaq üçün əsas iş başlayır. Menyuda aşağıdakı yolu izləyin "Rəsm" - "Atributlar". Aşağıdakı şəkli görürük:

Orijinal şəklin ölçüsünə diqqət yetirək. Bizimki eni 1024, uzunluğu 768-dir. Bu parametrləri yazaq. Sonra, "Ok" düyməsini basın və işə davam edin. Yenə də "Rəsm" bölməsinə keçirik. Orada biz "Uzanma/Tilt" seçimini tapırıq. Onu seçin və ekranda aşağıdakıları əldə edin:

İndi şəklimizin orijinal parametrlərini xatırlayaq (enində 1024 və uzunluqda 768). Bu, həm şaquli, həm də üfüqi olaraq 100% təşkil edir. Bəzi kiçik hesablamalar aparırıq və başa düşürük ki, bitmiş avatarın ölçüsü mənbənin 16% -dən çox olmamalıdır. "Üfüqi" və "Şaquli" sahələrində 16 rəqəmini daxil edin. "OK" düyməsini basın və 164x123 piksel ölçülü yaradılışımıza heyran olun. Unutmamalıyıq ki, 100 piksellik bir tərəfi olan bir şəkil hədəfləyirik.

Biz əldə edirik:

"Düzəliş" bölməsinə keçin və "Hamısını seçin" seçimini seçin. Nöqtəli çərçivə ilə ava kimi görmək istədiyimiz rəsm sahəsini seçirik. Burada kursor oxları olan xaçdır.

Sağ siçan düyməsi ilə şəklin üzərinə vurun. Dialoq qutusunda "Kopyala" seçin və menyunu izləyin üst panel proqramlar. Orada "Yarat" seçimini seçirik. Paint sizdən faylda dəyişiklikləri yadda saxlayıb-saxlamayacağınızı soruşduqda narahat olmayın; Xeyr düyməsini basın. Yeni sənədin boş vərəqi göründükdən sonra kopyalanan bölməni ora yapışdırın.

Bu belə edilir. Sahə parametrlərini təyin edirik: uzunluğu və eni 100 piksellə məhdudlaşdırırıq. Ölçü vahidlərinin piksel və ya nöqtələr olduğuna əmin olun. “Palitranın” rəngli olmasına da diqqət yetiririk. Əgər başqa parametrlərlə avatar yaratmaq lazımdırsa, onları bu bölmədə göstərin (80x80, 150x150 və ya 64x64 piksel).

Tələb olunan şəkil ölçüsü nə qədər kiçik olsa, mənbənin daha böyük faizini təyin etməliyik.

Beləliklə, tərəfimiz 100 piksel olan təmiz ağ kvadratımız var.

→ Səhifələr → 100 piksel eni və hündürlüyü olan şəkillərin seçimi, avatarları yükləyin

Saytın bu səhifəsində demək olar ki, hər yerdə avatar kimi istifadə edilə bilən çoxlu maraqlı şəkillər var, çünki... onların ölçüsü 100-dən 100-ə bərabərdir. Bu o deməkdir ki, hündürlük və en 100 pikselə bərabərdir (ekrandakı nöqtələr). Bu bölmədə mövzuya görə çeşidlənməmiş avatarlar var ki, bu da axtarışı daha maraqlı edir.

Oddan hazırlanmış göz və kirpiklərlə şəkil. Alovlu kirpikləri və yaşıl gözlü qeyri-adi avatarı yükləyin.

Dumanda canavar silueti və arxa planda uçan quşlar olan animasiya şəkili. Avatar rəngli deyil, amma çox maraqlıdır. Saytdan bir avatar yükləyə və ya sadəcə onun yerləşdirilməsi üçün kodu kopyalaya bilərsiniz.

Avatarda öküzün buynuzları var. Güclü bir heyvanın, qəzəbli öküzün şəklini yükləyin. Belə sərt avatar zorakı təbiətli istifadəçilər, eləcə də moderatorlar üçün uyğundur.

Şəkildə qara quşun başı - çəngəl; avatarko.ru saytında quşlar olan bölmədə müxtəlif quşların, o cümlədən çəngəllərin təsviri olan avatarları yükləyə bilərsiniz.

Budur, əlçatmaz bir şəkil olan məzəli bir avatar, amma yenə də bir şey heç bir şeydən yaxşıdır, buna görə də avatarda bir ördək var, bağışlayın.

Quyruğu yuxarı qalxmış qaçan qızın animasiya şəkli. Qızın animasiyası ilə çəkilmiş avatar yükləyin.

Şəkildə çəkilmiş hamster və gəmirici avatarının altında gizlənən şəxsin 100% hamster olduğu barədə xəbərdarlıq mətni göstərilir. avatarko.ru saytında siz bu gözəl avatarı, çəkilmiş olsa da, əsl hamsterlə yükləyə bilərsiniz.

Forumlarda və bloglarda avatar kimi istifadə edilə bilən oyuncaq möhürün şəkli. Veb saytına təmtəraqlı möhürlə avatar yükləyin.

Bir boşqab vermicelli və pomidor ilə dadlı bir şəkil yükləyin. Ümumiyyətlə, yemək həvəskarları üçün bir avatar. Bu avatar eksklüzivdir, onu məzmun kimi başqa saytlarda yerləşdirmək qadağandır.

Şəhər evləri ilə cizgi avatar. Evlər və buludların animasiyası ilə qara və ağ şəkli yükləyin.

Avatarda əkiz qüllələrdən və iki təyyarədən hazırlanmış McDonald's loqosu və "Bunu yeyin" yazısı var. Amerikalılara nifrət edənlər üçün şəkli yükləyin.

Madaqaskar cizgi filmindən qaşlarını qaldıran aslan Alex ilə şəkil. Madaqaskardan cizgi filmi aslan personajının cizgi avatarını endirin.

Animasiyalı barmaqları olan papaq və şərf taxmış gözləri oyulmuş zombi olan avatar. Animasiya ilə boz tonlarda zombi ilə dəhşətli şəkil.

Çəngəl üzərində xiyar ilə cizgi şəkil. Xiyar qəlyanaltı ilə gözəl avatar yükləyin.

Ayaqları və dimdiyi olan kiçik bir topa bənzəyən oturan sərçə ilə avatar. Bir insanın daimi qonşusu olan kiçik bir quşla bir şəkil yükləyin.

Dəyirmi ayın fonunda yarasa sürüsü ilə gözəl bir şəkil. Bu yarasaların vampir olması faktı deyil, lakin bu səhifədə yaxşı avatar yükləyə bilərsiniz.

Kabus ilə qəşəng avatar, şəkil ilə şəffaf fon PNG formatında. .

Alov çəkilmiş gözəl avatar və yanan bir adam. Odlu adamın 100 x 100 piksel şəklini yükləyin.

Avatarda ürəyi olan oyuncaq ağ ayısı olan sevimli avatar. Şəkil yükləyin ayıölçüsü 100x100 piksel olan "Sevgi" bölməsində ağ.

Ağ fonda çəhrayı paltarlı və maskalı şahzadə ilə şəkil..

Şəkildə mələk qanadları boyanmış bir qız var.. Mən də sizə mələklərə həsr olunmuş bölmə ilə tanış olmağı təklif edirəm.

Şəklin konturları boyunca uzanan və küncdə şəbəkə quran hörümçək ilə animasiyalı avatar. Hörümçək animasiyası ilə 100 x 100 şəkil yükləyin. Avatarko.ru saytında siz heyvanlarla gözəl avatarları yükləyə bilərsiniz.

Siqaretin yandırdığı dodaqları olan avatar. Siqaretini çıxarmağı unudan siqaret çəkən qızın dodaqlarının şəkli. Daha böyük bir şəkilə ehtiyacınız varsa, dodaqları olan mənbə aşağıda yerləşir.

Yaşıl fonda animasiya edilmiş şam. Alov animasiyası ilə yanan şam ilə 100x100 avatar yükləyin.

Sarışın ilə animasiyalı çəhrayı fonda şəkil. Sarışın qızlar üçün gözəl avatar, çəhrayı rəngi sevənlər üçün isə avatar yükləyin. Ehtiyatlı olun, şəklin çəkisi bir çox forumlar üçün uyğun olmaya bilər.

Qırmızı burunlu gülümsəyən zəncəfil pişiyi olan avatar. Avatarınız üçün çox gözəl və müsbət şəkil.

Zərbənin titrəməsi səbəbindən daim yıxılan adamın animasiyası olan ağ-qara şəkil. 100 eni və 100 hündürlüyü olan cizgi avatarını yükləyin.

Yanağına qoz qoyan cizgi filmi ilə sayt üçün mənim tərəfimdən hazırlanmış eksklüziv avatar. Qozla oynayan məzəli gəmiricinin animasiyası ilə 100x100 şəkil yükləyin. Mənbəyə indekslənmiş keçid göstərilmədən avatarın məzmun kimi yerləşdirilməsi qadağandır.

Getdikcə daha çox insan 100x100 avatarları harada yükləmək və mümkün qədər unikal və maraqlı olmaq üçün axtarır. Maraqlı kolleksiyaların kütləvi yaradılması istisna olmaqla, bu problemi həll etmək olar, yalnız hər bir axtaranı bir növ avatar qrafik redaktoru ilə oturmağa məcbur etməklə. Onlayn redaktorlar avatar aktivdir Bu an primitivdir və heç vaxt peşəkar dizaynerləri əvəz etməyəcək. Əksər forumlar ölçüləri uzunluğu və eni 100-dən çox olmayan bir avatar təyin etməyə imkan verir, buna görə də bəzən şəkli özünüz tələb olunan hədlərə qədər azaltmalısınız. Burada belə bir problemlə qarşılaşmayacaqsınız, çünki... bütün avatarlar artıq sizə lazım olan ölçüyə malikdir. Bəli və siz onları yalnız avatar kimi deyil, həm də mövzuda şəkil kimi istifadə edə bilərsiniz, onlar mesaja daha çox zənginlik qatacaqlar.

→ Səhifələr → 100x100 piksel ölçüləri olan ən yaxşı avatarları yükləyin

Yalnız hündürlüyü və eni 100 piksel olan, nə çox, nə də az olmayan avatarları olan bölmə, buna görə də şəkillərin mövzuları fərqlidir. Əgər ölçüsünə görə deyil, konkret mövzuda avatar axtarırsınızsa, o zaman saytın sol tərəfində bölmələr var.

Sekslə məşğul olan iki sancağın animasiyası ilə sərin avatar. Bu səhifədə siz iki sancaqlı cizgi avatarını yükləyə bilərsiniz.

Animasiya şəkilində buludların üzərində rəqs edən cütlük göstərilir. Ayın fonunda rəqsi olan avatar yükləyin.

Qurdların döyüşündən əvvəl dua edən bir halo ilə qurd ilə qurdlar oyunundan bir şəkil. Məşhur kompüter oyunundan avatar yükləyin.

Yatan yaşıl pişik ilə cizgi avatar. Çizilmiş pişik ilə gözəl bir şəkil yükləyin.

Yaşıl üzlü forumlar üçün cizgi filmi və gözləri qırpır. Yaşıl üzdə gözlərin animasiyası ilə 100x100 şəkil yükləyin.

Dilini çıxaran çılğın qoyunun animasiya şəkli. Boz fonda qəribə qoyun ilə gözəl avatar yükləyin.

Suda çimən çəhrayı begemotu təsvir edən avatar. Çəhrayı begemot ilə cizgi şəklini yükləyin. Avatar Paris Hilton üçün mükəmməldir.

Spirtli içki içməyi sevənlər üçün şəkil. “Mən alkoqolikəm” yazısı və stəkan olan avatar yükləyin.

Bir fincan pivə ilə avatar, şəffaf pivə kubokunda pivə ilə cümə şəklini yükləyin. Boz fonda parlaq şəkil

Saqqallı adamın kompüteri döyən sərin animasiya avatarı. Kompüterin işləmədiyi bir şəkil yükləyin və istifadəçi onu döyür.

Qara fonda “Mən musiqini sevirəm” yazısı olan şəkil, “sevgi” sözünün əvəzinə ürək var. Musiqi mövzusunda mətn avatarını yükləyin. Və trendləri izləyənlər üçün musiqi sənayesi Sizi təkcə avatar deyil, həm də təəssüf ki, saytda olmayan musiqi də maraqlandıracaq.

Yaşıl göz ilə cizgi şəkil. Gözün əksində görünən yanıb-sönən və hərəkət edən nömrələrin yaşıl gözün animasiyası ilə əla avatar yükləyin.

Qara miyovlayan pişik ilə sərin animasiya şəkli. Animasiya ilə çəhrayı fonda pişik ilə gözəl avatar yükləyin.

iPod və hava gitaralı oğlanla animasiya edilmiş avatar. Sarı fonda oğlanın animasiyası ilə musiqi mövzusunda bir şəkil yükləyin.

Şəkildə ağzında siqar olan və gün eynəyi taxan mavi canavar təsvir olunub. Mavi canavar ilə avatar yükləyin.

Qollarını uzatmış mələklə şəkil. Qəribə şəkildə yerləşdirilmiş qanadları olan mələk ovucları ilə sirli avatar yükləyin.

Şəkil gözəl bir pişik üzünü göstərir, ağ tüklü pişik ilə bir avatar yükləyin.

Şəkildə Şrek cizgi filmindən danışan eşşək təsvir olunub. Gülən eşşək, müsbət cizgi filmi heyvanı olan avatar yükləyin.

Şəkil günəş tutulmasını göstərir, lakin nəzəri olaraq avatarda sadəcə ağ tacı olan qara dairə var. Günəş tutulmasının fotoşəkili olan avatar yükləyin.

Şüşə və içinə axan şəffaf maye olan avatar. İçməyi, xüsusən də güclü içkiləri sevənlər üçün olduqca qəşəng bir şəkil.

Köpəkli avatar və daha çox itin burnu. Ev heyvanlarını sevənlər üçün itin burnunun yaxından çəkilmiş şəklini yükləyin.

Fast food həvəskarları və fast food işçiləri üçün McDonald's loqosu olan avatar. McDonalds loqosu ilə qəşəng bir şəkil yükləyin.

Ürək və onun animasiyalı kardioqramı olan əla avatar. "Sevgi" nəbzinin animasiyası ilə sevgi mövzusunda bir şəkil yükləyin.

Səma və sürət mövzusunda animasiya şəkili, göydə uçarkən buludların animasiyası ilə avatar yükləyin.

Yumşaq rənglərdə gözəl çobanyastığı olan bir şəkil. Veb saytında bir çiçək ilə forum üçün avatar incəlik yükləyin

David Blaine-in təsviri və "Bir az küçə sehri?" başlığı olan avatar. Mövzusu mətn və küçə sehrbazının özü ilə küçə sehri olan məzəli bir şəkil yükləyin. Boçarov tərəfindən tərcümə edilmiş Blaine ilə video interneti sadəcə partlatdıqda, yüzlərlə fotoşoplanmış şəkillər və sitatlar hələ də qədim İnternetlərdə saxlanılır. İndi bu mem demək olar ki, unudulub və siz nadir hallarda "Ayaqlarım ağzınızda" və ya "məni geri yıx" ifadəsini oxuyursunuz, lakin tezliklə eyni aqibəti yaşayacaq bir çox yeni memlar meydana çıxdı.

Smesharika cizgi filmindən Kroş ilə animasiya edilmiş avatar. Gözlərini qırparaq cizgi filmi dovşanının şəklini yükləyin.

Şəkildə gitara qırmızı alovla yanır, rokçuların xəyal etdiyi musiqi aləti növüdür. Musiqi bölməsində alovlu gitara ilə cizgi avatarını yükləyin.

Bu səhifədə onlayn gündəlikdə, blogda, LiveJournalda yazılarınızı bəzəyə biləcəyiniz əla şəkillər var. Avatarları endirməyə və yenidən yükləməyə ehtiyac yoxdur; sizə lazım olan tək şey şəkil kodunu bir neçə kliklə kopyalamaq və bu kodu bloq yazınıza yapışdırmaqdır. Həmçinin, bu avatarların çoxu digər insanların mesajlarına şərh kimi istifadə edilə bilər, bəzən şəkil böyük mətndən daha çox şey deyir. Unikal vebsayt ən yaxşı avatarlar toplusunu diqqətinizə təqdim edir. Burada köhnəlmiş, keyfiyyəti onlardan istifadə edən istifadəçilərin ağlı başında olmalarını şübhə altına alan lazımsız zibil yoxdur. Avatarların ölçüsünü artırmaq tendensiyası olsa da, 100x100 ölçüsü hələ də lider olaraq qalır və İnternetin əksəriyyətinə uyğun gəlir.