Skip to content

Jak sprawdzić kolory i czcionki na stronie www i grafice?

Chcesz się dowiedzieć jak sprawdzić kolory i czcionki na jakiejkolwiek stronie internetowej bądź grafice? W poniższym artykule przedstawiamy Wam kilka naszych sprawdzonych sposobów na identyfikacje koloru i czcionek.

Jak sprawdzić kolory i czcionki na stronie www — sposób pierwszy — kod strony.

Pierwszym sposobem na to, jak sprawdzić kod koloru na stronie www jest zajrzenie do kodu strony. W celach demonstracyjnych posłużymy się naszą stroną znamilatwiej.pl. Załóżmy, że chcesz sprawdzić kolor przycisku „Więcej o nas”, jaki został wykorzystany na stronie głównej. Jedyne co musisz zrobić to zaznaczyć interesujący Cię element, kliknąć prawym przyciskiem myszy i wybrać opcję „Zbadaj”, lub kombinację klawiszy CTR+Shift+I.

 

zbadaj element

 

Otworzy nam się panel boczny, w którym możemy sprawdzić jaki kolor przycisku został zdefiniowany. Tutaj akurat pokazuje nam tylko notację szesnastkową, a kolor to #f50451. Jeśli potrzebujesz koloru w notacji RGB, możesz to sprawdzić na przykład na stronie color-hex.com.

 

jak sprawdzic kolory i czcionki w kodzie strony

 

Jeśli chodzi natomiast o sprawdzenie, co to za czcionka została użyta na danej stronie www, to sprawdzamy dokładnie w ten sam sposób. Zaznaczamy tekst, który chcemy sprawdzić. Następnie ponownie wybieramy –  „Zbadaj” i szukamy informacji o foncie. Na poniższym przykładzie widzimy, że do napisu „Z nami łatwiej!” został użyty font Poppins.

 

jak sprawdzic czcionkę w kodzie strony www

 

Co ważne! Pamiętaj, że sposób ten nie działa w odniesieniu do grafik, które zostały umieszczone na stronie. Jak sprawdzić kolory i czcionki na grafikach dowiesz się za chwilę.

 

Jak sprawdzić kolory i czcionki na stronie www — sposób drugi — narzędzia dla przeglądarki.

 

Drugim łatwym sposobem na sprawdzenie kolorów i fontów na stronie, jest użycie specjalnych rozszerzeń do przeglądarki. Poniżej przedstawiamy dwa nasze ulubione narzędzia.

 

Fontface Ninja

Do rozpoznania fontów polecam Fontface Ninja. To narzędzie jest dostępne zarówno dla przeglądarki Chrome, jak i Firefoksa. Dzięki niemu sprawdzanie fontów na stronach jest naprawdę banalne! Zobacz sama, jedyne co trzeba zrobić to dodać rozszerzenie do przeglądarki, z której korzystasz. Następnie na górnym pasku, po prawej stronie pojawi się ikonka programu. By uaktywnić funkcję sprawdzania fontów, wystarczy kliknąć tę ikonkę, a następnie najechać na wybrany tekst. Od razu wyskoczy nam informacja z nazwą fontu, a także z jego rozmiarem. Widzimy również podaną wysokość wiersza, odstępy między literami, a nawet kolor tekstu (czyli dwa w jednym :)).

 

jak sprawdzić kolory i czcionki przez fontface ninja

 

Fajną opcją w tym narzędziu jest również możliwość przetestowania fontu. W momencie, kiedy klikniesz dany tekst, zmienia się pole po prawej stronie. Możesz wpisać w nim swój tekst i sprawdzić, czy font odpowiada Ci pod kątem danej treści, czy też nie. Dodatkowo narzędzie to umożliwia również opcję pobrania fontów.

 

jak sprawdzić kolory i czcionki na stronie przez fontface ninja

 

ColorZilla

 

Drugim narzędziem, którego używam non stop, jest rozszerzenie do sprawdzania kolorów ColorZilla (także działa na Chrome i Firefox). Sprawdza się zarówno dla elementów strony www, jak i grafik. Jak działa?

Po instalacji rozszerzenia, po prawej stronie górnego paska pojawia się automatycznie ikona pipety. Aby uruchomić funkcję próbkowania koloru, klikamy na pipetę i najeżdżamy na interesujący nas kolor. Sprawdźmy, czy pokaże nam te same wartości dla przycisku, który sprawdzaliśmy w kodzie strony.

 

 

jak sprawdzić kolory i czcionki poprzez collorzilla

 

Na górze strony pojawił się czarny pasek z danymi koloru. Jak widać, wartość notacji szesnastkowej jest taka sama. Mamy tutaj również informację o notacji RGB. Jeśli natomiast klikniemy kursorem w kolor, automatycznie dodaje go nam do biblioteki kolorów. Jest to o tyle wygodne, że z łatwością możemy do niego wrócić innym razem, bez szukania i wchodzenia ponownie na daną stronę www.

 

Jak sprawdzić kolory i czcionki na grafice

 

Kolory na grafice

 

Kolory na grafice sprawdzisz w każdym programie graficznym, a nawet w zwykłym Paincie. Wystarczy, że otworzysz grafikę w wybranym programie graficznym i użyjesz selektora kolorów (pipety). Możesz też nie zapisywać grafiki, tylko użyć narzędzia wycinania w komputerze i skopiować wycięty fragment do programu graficznego.

Jeszcze prostsze będzie użycie rozszerzenia w przeglądarce, np. ColorZilli, o której pisałam wyżej. Jest to chyba najlepszy sposób, który oszczędzi Twój czas.

 

Oczywiście pokazane przeze mnie narzędzia (ColorZilla, Fontface Ninja) nie są jedynymi takimi narzędziami. Jest ich o wiele więcej. Możesz zawsze je przetestować i sprawdzić, które będą najbardziej odpowiednie dla Twoich potrzeb i preferencji.

 

Fonty na grafice

 

Jeśli chodzi o sprawdzanie fontów na grafikach, nie jest to już takie proste, jak w przypadku kolorów. Głównie dlatego, że tekst będący częścią grafiki podlega takiej samej konwersji. W jej wyniku następuje utrata pixeli, a przez to również detali czy konturów napisu. Większość narzędzi nie radzi sobie z tym faktem zbyt dobrze, przez co odczyt bywa zupełnie nietrafiony.

 

WhatFontis.com

 

Narzędziem, które używam i zdecydowanie mogę polecić, bo sprawdza się wyjątkowo dobrze, jest WhatFontis.com.

 

Najpierw musimy załadować grafikę bądź wkleić adres URL grafiki, którą chcemy sprawdzić. Zaznaczamy tekst, który nas interesuje. W następnym kroku dobrze jest poddać obraz modyfikacji w celu uzyskania lepszych wyników. Możemy poprawić jasność obrazu, kontrast, zrobić inwersję kolorów, a także odseparować litery, co jest bardzo użyteczne w przypadku fontów imitujących ręczne pismo. Dalej pomagamy programowi zidentyfikować poszczególne litery i wpisujemy odpowiednie wartości w pola. Naciskamy — Identyfikuj. Pokazuje nam się lista wyników, z czego trzy pierwsze są najbardziej pasujące.

Sprawdzałam to na różnych grafikach i na różnych fontach. Za każdym razem program celnie pokazywał użyty font, na pierwszym, bądź jednym z trzech pierwszych wyników.

 

Narzędzie Photoshopa

 

Jeśli korzystasz z Photoshopa, do sprawdzenia napisów możesz użyć jednej z funkcji tego programu.
W tym celu musimy wejść w Tekst -> Dobieranie tekstu. Po czym zaznaczamy tekst na grafice, a w okienku obok pokazują nam się wyniki. Program nie zawsze pokazuje dokładnie ten rodzaj fontu, jaki został użyty. Wskazuje natomiast zawsze opcje jak najbardziej zbliżone.

Żeby uzyskać jak najbardziej precyzyjny efekt, należy zaznaczać tylko jeden wiersz tekstu oraz nie zaznaczać więcej niż jednego rodzaju fontu. Dodatkowo możemy poprawić jakość odczytu na przykład poprzez zwiększenie kontrastu, czy ostrości obrazu, w celu poprawy widoczności napisu.

Jest to bardzo wygodna opcja dla osób pracujących w Photoshopie. Nie zawsze jego dokładność się sprawdza, ale pozostajemy w obrębie tylko jednego programu.

 

 

Jak widzisz, jest dość dużo sposobów na proste sprawdzenie kolorów i fontów zarówno na stronie internetowej, jak i grafikach. Możesz w tym celu sprawdzić kod strony lub wykorzystać specjalistyczne narzędzia i programy. Od Ciebie tylko zależy, który sposób wybierzesz.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *