Bloq işarəsi 100 kb-dan azdır. Paint ilə 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şlayanlardan yaranır, lakin təcrübəli mütəxəssislər də terminləri qarışdırırlar.

Əsas olandan başlayaq: bitmap şəkilləri bunlardan ibarətdir piksel. Bununla bu məqaləni bitirmək olardı, amma bu, hər kəs üçün kifayət deyil, ona görə də praktikada rastlaşdığım yanlış təsəvvürlərdən və miflərdən danışaq.

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

Ən çox yayılmış yanlış fikir DPI (dots per inch - dots per inch) və PPI (pixels per inch - pixels per inch) vahidlərinin istifadəsidir. Əslində, bu bölmələr müvafiq olaraq printerlərə və skanerlərə aiddir. Onlar həmçinin ekran xüsusiyyətlərində istifadə edilə bilər. Əslində, bunlar rəqəmsal görüntü üçün analoqda fiziki ölçülər (santimetr və ya düym ilə) və piksel ölçüləri arasında konvertasiya üçün əmsallardır.

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

Bununla belə, qrafik redaktorlarda ölçüləri dəyişdirərkən bizə DPI daxil olmaqla, bizim üçün əlverişli olan ölçülərdə ölçüləri müəyyən etmək təklif 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, 300 DPI dəyəri olan 3000 piksel (kvadrat) təsvirimiz var. Alırıq: 3000 piksel / 300 DPI = 10 düym. İndi biz redaktora (Photoshop) daxil oluruq və DPI dəyərini 600-ə dəyişirik. Nə əldə edəcəyik? Və bu, "Yenidən nümunə" qeyd qutusundan asılıdır. Bahadırsa, görüntünün yuxarı nümunəsini alacağıq (artıracağı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 fiziki ölçülərin bütün dəyərləri (DPI, santimetr, düym və s.) etibarlı şəkildə göz ardı edilə bilər və yalnız piksellərdəki ölçülərə baxın.

DPI/PPI ekranları

Burada biz ekranların həlli və piksel sıxlığı məsələsinə gəlirik. Düzgün olaraq, bu sıxlıq PPI (düym başına piksel) kimi qeyd olunur və ekranın bir düymündə neçə pikselin göstərilə biləcəyini göstərir.

Mifik 72 və 96 PPI tez-tez burada görünür, bu da ekranlar üçün "standart" piksel sıxlığını göstərməlidir. 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ə ümumiyyətlə ekran PPI haqqında danışırıq? Çünki "Retina" və ya "HiDPI" ekranları var.

Retina və HiDPI ekranları

Bu displeylərdən geniş istifadə olunur mobil cihazlar və bahalı noutbuklar. Əslində, 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ə görünən müxtəlif piksellər deməkdir: CSS pikselləri (bunları adətən element ö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ın piksel nisbətidir - CSS piksellərinin fiziki olanlara çevrilməsi nisbətidir.

Şəkil yerləşdirərkən etiket yaza bilərik imgölçüləri 20px, şəkil isə 40px olacaq. Eyni zamanda, DPR=2.0 olan ekranda biz şəklin bütün piksellərini görəcəyik. Ancaq bu vəziyyətdə, ekranın faktiki PPI dəyərlərinə qətiyyən əhəmiyyət vermirik.

Eyni zamanda, normal ekranlar üçün yüksək piksel sıxlığı olan şəkillərdən istifadə edə bilərik, brauzer şəklin özünü 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əyi artıq iki növ pikselə malik olan brauzer həll edəcək.

Bütün hekayə budur, əlbəttə ki, adaptiv şəkillər, onların geri qaytarılmasını 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 sonra danışacağıq. Bunu etmək üçün bizə hər hansı bir proqram üçün standart proqram dəstinə daxil olan Microsoft Paint proqramı lazımdır əməliyyat sistemi Microsoft.

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

İndi masaüstünün altındakı Başlat düyməsini sıxaraq və Proqramlar menyusundan 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.

Şəklin açılması

İndi Ava yaratmaq üzrə əsas iş başlayır. Menyuda aşağıdakı yolu izləyin "Şəkil" - "Atributlar". Aşağıdakı şəkli müşahidə edirik:

Orijinal şəklin ölçüsünə diqqət yetirək. Bizdə 1024 eni və 768 uzunluğu var. Bu parametrləri yazırıq. Sonra, "OK" düyməsini basın və davam edin. Yenə "Rəsm" bölməsinə gedirik. Orada "Stretch / Skew" seçimini tapırıq. Onu seçirik və ekranda aşağıdakıları alırıq:

İ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. Kiçik hesablamalar aparırıq və əldə edirik ki, bitmiş avatarın ölçüsü mənbənin 16% -dən çox olmamalıdır. "Üfüqi" və "Şaquli" sahələrində 16 nömrəsini daxil edin. "OK" düyməsini basın və 164x123 piksel yaratmağımıza heyran olun. Unutmamalıyıq ki, tərəfi 100 piksel 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 xəttdən çərçivə ilə şəkilin ava kimi görmək istədiyimiz hissəsini seçirik. Oxları olan xaç burada kursor rolunu oynayır.

Sağ siçan düyməsi ilə şəklin üzərinə vurun. Dialoq qutusunda "Kopyala" seçin və proqramın yuxarı panelindəki menyunu izləyin. Orada "Yarat" seçimini seçin. "Paint" faylda dəyişiklikləri yadda saxlayıb-saxlamayacağınızı soruşduqda qorxmayın, çekinmeyin "Xeyr" düyməsini basın. Yeni bir 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ğunu göstərin. “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 faizi bir o qədər çox olmalıdır.

Beləliklə, tərəfi 100 piksel olan təmiz ağ kvadrat əldə etdik.

→ 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 fonda uçan quşlarla animasiya şəkili. Avatar rəngli deyil, amma çox maraqlıdır. Siz avatarı saytdan 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ı istifadəçilərə, eləcə də moderatorlara uyğun olacaq.

Şə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 ilə belə bir gülməli avatar, amma ən azı bir şey heç bir şeydən yaxşıdır, buna görə də avatarda bir ördək var, bağışlayın.

At quyruğu yuxarı qalxmış qaçan qızın cizgi şəkli. Qızın animasiyası ilə çəkilmiş avatarını 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 qoyula bilən oyuncaq möhürü olan şəkil. Sayta təmtəraqlı möhürlə avatar yükləyin.

Bir boşqab vermicelli və pomidor ilə iştahaaçan şəkli yükləyin. Ümumiyyətlə, ləzzətli yeməkləri sevənlər üçün bir avatar. Bu avatar eksklüzivdir, onun məzmun kimi başqa saytlarda yerləşdirilməsi qadağandır.

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

Avatarda McDonald's əkiz qüllələr və iki təyyarə loqosu və "Bunu yeyin" (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 Aleks ilə şəkil. Madaqaskardan olan cizgi film personajı olan cizgi avatarını endirin.

Gözləri oyulmuş zombi avatarının əynində şalvar və cizgi barmaqları ilə şərf. Animasiya ilə boz tonlarda zombi ilə dəhşətli şəkil.

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

Pəncələri və dimdiyi olan kiçik bir topa bənzəyən oturan sərçə ilə avatar. Kiçik bir quş, bir insanın daimi qonşusu ilə 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şı bir avatar yükləyə bilərsiniz.

Qəşəng xəyal avatar, şəkil ilə şəffaf fon PNG formatı. .

Çəkilmiş atəş və yanan bir insan olan gözəl bir avatar. Odlu insanı təsvir edən 100x100 piksel ölçüsündə bir şəkil yükləyin.

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

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

Şəkildə mələk qanadları boyanmış bir qız göstərilir.. 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ə animasiya edilmiş avatar. Hörümçək animasiyası ilə 100x100 şəkil yükləyin. Avatarko.ru saytında siz heyvanlarla gözəl avatarları yükləyə bilərsiniz.

Siqaretdə yanmış dodaqları olan avatar. Siqaret çəkməyi unutmuş siqaret çəkən qızın dodaqlarını əks etdirən şəkil. Daha böyük bir şəkilə ehtiyacınız varsa, aşağıda dodaqları olan mənbə var.

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

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

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

Dəhşətli yer üzündən daim yıxılan adamın animasiyası olan ağ-qara şəkil. 100 eni və 100 hündürlüyündə çəkilmiş insanın şəlalələri ilə cizgi avatarını yükləyin.

Yanağına qoz yapışdıran animasiyalı bupmunk olan sayt üçün mənim tərəfimdən hazırlanmış eksklüziv avatar. Qozla oynayan gülməli gəmirici ilə 100x100 şəkil yükləyin. Mənbəyə indeksləşdirilmiş keçid göstərilmədən avatarın məzmun kimi yerləşdirilməsi qadağandır.

Getdikcə daha çox insan 100x100 ölçülü avatarları haradan yükləyəcəyini axtarır ki, onlar mümkün qədər unikal və maraqlı olsunlar. Maraqlı kolleksiyaların kütləvi yaradılması istisna olmaqla, bu problemi həll etmək yalnız hər bir axtarıcını bir növ qrafik avatar redaktorunda oturmağa məcbur etməklə mümkündür. Onlayn redaktorlar avatar aktivdir Bu an primitivdir və heç vaxt peşəkar dizaynerləri əvəz etməyəcək. Əksər forumlarda ölçüləri uzunluğu və eni 100-dən çox olmayan bir avatar qoymağa icazə verilir, buna görə bəzən şəkli özünüz istədiyiniz hədlərə endirməlisiniz. 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 şəkillər kimi istifadə edə bilərsiniz, onlar mesaja daha çox dolğunluq əlavə edəcəklər.

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

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

İki sancaqlı cinsin animasiyası ilə sərin avatar. Bu səhifədə siz iki sancaqlı cizgi avatarını yükləyə bilərsiniz.

Animasiya şəklində bir cütlük buludların üzərində rəqs edir. Ayın fonunda rəqs ilə 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.

Yaşıl rəngdə yuxuda olan pişik ilə animasiya edilmiş avatar. Boyalı pişik ilə gözəl bir şəkil yükləyin.

Yaşıl üzlü forumlar üçün cizgili və yanıb-sönən gözləri olan avatar. Yaşıl ağızda gözlərin animasiyası ilə şəkli 100x100 yükləyin.

Dilini göstərən dəli qoyunun animasiya şəkli. Boz fonda qəribə qoyunla sərin 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ı olan avatar və stəkan yükləyin.

Pivə kupası 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 ürəyi sev sözünün əvəzinə "Mən musiqini sevirəm" yazısı olan şəkil. Musiqi mövzusunda mətn avatarını yükləyin. Və trendləri izləyənlər üçün musiqi sənayesi təkcə avatar deyil, həm də təəssüf ki, saytda olmayan musiqi də maraqlı olacaq.

Yaşıl göz ilə cizgi şəkil. Yanıb-sönən yaşıl gözün animasiyası və gözün əksində görünən hərəkətli nömrələr ilə möhtəşəm 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ə xəyali gitara olan bir 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 və gün eynəyi olan mavi canavar təsvir olunub. Mavi canavar avatarını yükləyin.

Əllərini uzatmış mələk şəkli. Qəribə şəkildə düzülmüş qanadları olan mələyin ovucları ilə sirli avatarı yükləyin.

Şəkildə bir pişiyin gözəl ağzı var, 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 avatar sadəcə ağ tacı olan qara dairədir. Günəş tutulmasının şəkli olan avatar yükləyin.

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

İt ilə 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ə yeməkxana işçiləri üçün McDonald's loqosu avatarı. Mcdonalds loqosu ilə dəbli şəkli yükləyin.

Ürək və onun animasiyalı kardioqramı olan möhtəşəm 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.

Zərif rənglərdə gözəl çobanyastığı olan bir şəkil. Saytın saytında çiçəkli bir forum üçün incəlik avatarını yükləyin

David Blaine tərəfindən çəkilmiş və "Bir az küçə sehri?" başlığı ilə yazılmış avatar. Mətn və küçə sehrbazının özü ilə küçələrin sehri olan məzəli bir mövzunu yükləyin. Boçarov tərəfindən tərcümə edilmiş Blaine ilə video sadəcə İnterneti partlatdıqda, yüzlərlə fotoşop və sitat hələ də qədim İnternetdə saxlanılır. İndi bu mem demək olar ki, unudulub və nadir hallarda "Ağzımda ayaqlarımla" və ya "məni geri yay" ifadələrini oxuyursan, lakin tezliklə eyni aqibəti yaşayacaq bir çox yeni memlar meydana çıxdı.

Smesharika cizgi filmindən Kroş ilə animasiya edilmiş avatar. Cizgi filmi dovşanından yanıb-sönən gözlərlə şəkil yükləyin.

Şəkildə gitara qırmızı alovla yanır, rokçular belə bir musiqi aləti xəyal edirlər. Musiqi bölməsində cizgi odlu gitara avatarını yükləyin.

Bu səhifədə yazılarınızı onlayn gündəlikdə, blogda, LiveJournalda bəzəyə biləcəyiniz gözəl şəkillər var. Avatarları yükləmək və yenidən yükləmək tələb olunmur, sadəcə bir neçə kliklə şəkil kodunu kopyalayın və bu kodu bloq yazınıza yapışdırın. Həmçinin, bu avatarların çoxu başqalarının yazılarına şərh kimi istifadə edilə bilər, bəzən bir şəkil böyük mətndən çox şey deyir. Unikal sayt saytı diqqətinizə ən yaxşı avatarlar toplusunu təqdim edir. Mənəvi cəhətdən köhnəlmiş, keyfiyyəti onlardan istifadə edən istifadəçilərin ağlını başından alan zibilliklər 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.