Jak wyeksportować logo do witryny, e-maila i dokumentów

Logo poprawne w programie graficznym może po przesłaniu stać się maleńkie, rozmyte lub niewidoczne. Przyczyną bywają puste marginesy, zbyt mało pikseli, brakujący font lub niewłaściwe tło. Najpierw ustal, gdzie logo będzie wyświetlane, a potem dobierz ustawienia eksportu.

Zacznij od najlepszego dostępnego oryginału

Pracuj na edytowalnym pliku projektanta lub prawdziwej wersji wektorowej. Przechowuj ten plik źródłowy oddzielnie od publikowanych kopii. SVG może zachować ścieżki wektorowe, ale może też zawierać bitmapę o niskiej rozdzielczości. Samo rozszerzenie .svg nie dowodzi, że każda część pozostanie ostra po powiększeniu.

Jeśli masz tylko mały JPG, poproś o oryginał przed wykonaniem większego eksportu. Konwersja na PNG lub SVG nie odtworzy liter ani krawędzi. Poradnik o SVG i PNG pomoże rozpoznać posiadany plik.

Dobierz format do miejsca użycia

SVG zachowuje kształty wektorowe, a PNG zapisuje stałą siatkę pikseli. Bezstratna kompresja PNG sprawdza się przy literach, jednolitych kolorach i ostrych krawędziach: zapis nie dodaje zniekształceń kompresji charakterystycznych dla JPG. JPG może rozmywać krawędzie lub tworzyć kolorowe obwódki wokół liter i nie zachowuje przezroczystości.

WebP może korzystać z kompresji stratnej lub bezstratnej. Narzędzie SVG na WebP w Pixilo ma ustawienie jakości, ale nie osobny tryb bezstratny. Wartość 100 nie gwarantuje więc identycznych pikseli. Wybierz WebP, gdy miejsce docelowe go akceptuje, a rzeczywisty eksport wygląda dobrze. Przy prostym logo lepsze może być zachowanie SVG lub odpowiedniego PNG.

Dostosuj eksport do rozmiaru wyświetlania

Odróżniaj wymiary pliku w pikselach od rozmiaru, w którym będzie wyświetlany. Załóżmy, że wyeksportowana grafika jest cztery razy szersza niż wyższa i ma zajmować 160 × 40 pikseli CSS. PNG o rozmiarze 320 × 80 pikseli daje po dwa piksele obrazu na piksel CSS w obu kierunkach, co jest użytecznym punktem wyjścia dla ekranu o dużej gęstości pikseli. To przykład, nie obowiązkowy rozmiar ani nakaz eksportowania każdego obrazu w podwójnych wymiarach.

Zablokuj proporcje i zwykle wpisuj tylko jeden wymiar. Jeśli logo jest dwa razy szersze niż wyższe, przy szerokości 160 pikseli będzie miało 80 pikseli wysokości, nie 40. Dopasuj je do dostępnej szerokości i wysokości bez rozciągania. Użyj zatwierdzonego alternatywnego układu, jeśli pełne logo się nie mieści.

Wymiary obejmują przezroczyste marginesy. Jeśli widoczne logo zajmuje tylko połowę obszaru o szerokości 320 pikseli, będzie miało około 80 pikseli szerokości, gdy cały obraz wyświetlisz w 160 pikselach. Usuń niezamierzoną pustą przestrzeń w oryginale, zachowując pole ochronne marki. Ustaw szerokość wyświetlania także w edytorze witryny lub podpisu i sprawdź, czy usługa tworzy pomniejszoną kopię.

Sama zmiana DPI nie dodaje szczegółów. Zobacz poradnik o DPI, PPI i pikselach. Do druku profesjonalnego poproś o osobne wymagania dotyczące pliku, kolorów i rozdzielczości.

Sprawdź obszar eksportu i litery

Dopasuj obszar eksportu do logo, zachowując wymagane pole ochronne oraz miejsce na obrysy i cienie. Duży pusty obszar roboczy sprawia, że widoczne logo wygląda na małe, nawet gdy plik ma wiele pikseli. Nie usuwaj celowych odstępów marki tylko po to, by ciaśniej wykadrować obraz. Instrukcja eksportu Inkscape pokazuje różnicę między eksportem strony, rysunku i zaznaczenia.

Przed eksportem sprawdź fonty i podłączone grafiki. Zamiana tekstu na krzywe przekształca litery w kształty wektorowe, dzięki czemu ich wygląd nie zależy od fontów zainstalowanych u odbiorcy. Później nie można ich już edytować jak zwykłego tekstu. Zrób to w kopii do eksportu i zachowaj oryginał. Zamiana tekstu na krzywe nie przekształca osadzonej bitmapy o niskiej rozdzielczości w wektory.

Przygotuj samodzielny SVG zawierający potrzebne obrazy i style. Plik wyglądający poprawnie po osobnym otwarciu może zachowywać się inaczej jako obraz w witrynie, ponieważ zasoby zewnętrzne są w tym kontekście ograniczone. Wyjaśnia to dokumentacja MDN. Porównaj eksport z projektem, a następnie sprawdź wersję umieszczoną na stronie. Kontroluj litery, odstępy, przycięte elementy i efekty, a nie tylko to, czy plik się otwiera.

Przygotuj kolory ekranowe oddzielnie od plików do druku

W wersjach ekranowych użyj zatwierdzonych kolorów RGB marki. Dla internetowych eksportów PNG i JPG praktycznym punktem wyjścia jest sRGB. Wskazówki Adobe dotyczące kolorów w internecie opisują konwersję. Jeśli źródło używa innego profilu, przekonwertuj kolory w programie graficznym zamiast tylko przypisywać nowy profil i sprawdź wynik.

Zachowaj osobno oryginał do druku w CMYK lub kolorach dodatkowych. Wersje ekranowa i drukowana mogą mieć różne zatwierdzone wartości kolorów; konwerter formatu nie wybierze ich za ciebie. Porównuj wynik z zaakceptowaną wersją ekranową, pamiętając, że monitory nadal mogą się różnić. Przy widocznej zmianie skorzystaj z poradnika rozwiązywania problemów z kolorami obrazów.

Przygotuj wersje na jasne i ciemne tła

Przezroczystość nie zmienia kolorów logo. W razie potrzeby wyeksportuj zatwierdzone ciemne logo na jasne powierzchnie i białe lub jasne na ciemne. W witrynie właściwą wersję musi wybrać szablon lub jego twórca. Samo utworzenie dwóch plików nie zapewnia automatycznego przełączania.

E-mail sprawdź oddzielnie. Aplikacje mogą zmieniać tło wiadomości w trybie ciemnym, a obsługa zamiany obrazów jest różna. Przetestuj odebrane wiadomości w trybie jasnym i ciemnym. Jeśli ciemne logo znika, poproś projektanta o zatwierdzoną wersję, która pozostanie widoczna, na przykład z kontrastowym obrysem lub odpowiednim polem tła. Żaden wariant nie gwarantuje identycznego wyglądu w każdej aplikacji. Poradnik Mailchimp o trybie ciemnym wyjaśnia znaczenie testów.

PNG może zachować istniejącą przezroczystość, a JPG wymaga nieprzezroczystego tła. Wybierz je przed eksportem JPG. Zaznaczenie przezroczystości nie usuwa białego prostokąta narysowanego w grafice. Poradnik o przezroczystych tłach pomaga odróżnić prawdziwe tło od powierzchni podglądu.

Utwórz wersje PNG, JPG lub WebP w Pixilo

1. Otwórz przygotowany SVG w SVG na PNG. Wybierz SVG na JPG, gdy wymagany jest JPG, lub SVG na WebP, jeśli wybrano WebP do tego zastosowania.
2. Wpisz szerokość lub wysokość eksportu przy zablokowanych proporcjach. Zachowaj przezroczystość, gdy jest obsługiwana, albo wybierz końcowy kolor tła.
3. Przekonwertuj i pobierz plik. Sprawdź pobrany obraz, nie tylko podgląd źródła. Eksport PNG nie ma ustawienia jakości kompresji stratnej; w JPG i WebP po zmianie jakości obejrzyj litery i cienkie linie.
4. Umieść kopię, ustaw rozmiar wyświetlania i sprawdź opublikowaną stronę, odebraną wiadomość lub wyeksportowany dokument. Upewnij się, że oglądasz nowy plik, a nie starszą wersję z pamięci podręcznej.

Pixilo tworzy statyczne kopie obrazów, a nie edytowalne logo czy zoptymalizowany SVG. Czytnik SVG odrzuca zasoby zewnętrzne i nieobsługiwaną zawartość. Jeśli plik zostanie odrzucony, wróć do programu graficznego i wyeksportuj samodzielną kopię, w razie potrzeby zamieniając tekst na krzywe. Aktualne limity plików i wymiarów podano na stronie narzędzia. Zachowaj oryginał do przyszłych eksportów.

Nazywaj pliki tak, aby ich przeznaczenie było jasne

Opisuj kolor grafiki oddzielnie od tła. Na przykład dark-artwork oznacza ciemne kształty, a nie plik do użycia na ciemnym tle:

• Edytowalny oryginał: zachowaj plik źródłowy projektanta w jego własnym formacie, z prawdziwym rozszerzeniem, oddzielnie od kopii do publikacji.
• brand-logo-dark-artwork.svg i brand-logo-white-artwork.svg: ciemna grafika na jasne tła i biała grafika na ciemne.
• brand-logo-dark-artwork-320x80.png: przezroczysty PNG do przykładowego rozmiaru wyświetlania 160 × 40 pikseli. Nazwa podaje wymiary samego pliku w pikselach.
• brand-logo-white-background.jpg: opcjonalny JPG z nieprzezroczystym białym tłem do zastosowania, które tego wymaga.

Dołącz krótką informację o rozmiarze wyświetlania i tle. Twórz tylko potrzebne wersje. Favicon często wymaga osobnego, uproszczonego znaku, ponieważ pełne logo z nazwą może być nieczytelne na karcie przeglądarki. Zobacz poradnik tworzenia favicon.

Sprawdź logo w docelowym miejscu

Najpierw sprawdź najmniejszy rzeczywisty rozmiar. Czy litery są czytelne, cienkie linie widoczne, a pole ochronne zachowane? Następnie przetestuj jasne i ciemne powierzchnie. W przypadku e-maila wyślij prawdziwą wiadomość testową i sprawdź odebraną kopię. W przypadku dokumentu otwórz wyeksportowany PDF i obejrzyj wydruk, jeśli liczy się wersja papierowa.

Na stronie nadaj logo odpowiedni tekst alternatywny. Jeśli jest jedyną zawartością linku do strony głównej, określ cel, na przykład „Marka — strona główna”. Jeśli widoczny tekst tego samego linku podaje już nazwę i funkcję, unikaj powtórzeń. Poradnik W3C o obrazach funkcjonalnych pokazuje oba wzorce.

Najczęstsze pytania

Dlaczego przesłane logo jest rozmyte, skoro pobrany plik jest ostry?

Porównaj rzeczywiste wymiary przesłanego pliku w pikselach z rozmiarem wyświetlania. Platforma mogła utworzyć mniejszą kopię albo układ strony może ją powiększać. Sprawdź, którego pliku używa opublikowana strona i czy nadmiar przezroczystych marginesów nie pomniejsza grafiki. Jeszcze większy eksport nie naprawi strony, która nadal wybiera niewłaściwą wersję.

Dlaczego wokół PNG widać białe pole?

Obejrzyj pobrany plik na szachownicy i na kolorowym tle. Jeśli białe pole jest częścią pikseli, sprawdź źródło pod kątem obiektu tła lub eksportu ze spłaszczoną przezroczystością. Jeśli plik jest przezroczysty, a pole pojawia się dopiero po umieszczeniu, sprawdź tło obrazu lub konwersję w aplikacji docelowej. Usuwaj narysowane tło tylko wtedy, gdy projekt logo na to pozwala.

Czy mogę używać jednego pliku we wszystkich podpisach e-mail?

Zacznij od PNG i przetestuj edytor podpisu, odebrane wiadomości oraz tryb jasny i ciemny. Obraz na serwerze musi pozostać dostępny pod opublikowanym adresem, a obraz osadzony musi przetrwać przetwarzanie przez system pocztowy. Zachowaj dane kontaktowe jako prawdziwy tekst, aby były dostępne przy zablokowanych obrazach. Jeden poprawny podgląd w edytorze nadawcy nie wystarczy.

Czy konwersja PNG na SVG sprawi, że logo będzie skalowalne?

Osadzenie PNG w SVG zachowuje oryginalne piksele. Trasowanie lub ponowne rysowanie może utworzyć ścieżki wektorowe, ale także zmienić krzywe, odstępy lub litery. Najpierw poproś o oryginał wektorowy i zleć porównanie odtworzonej wersji z zatwierdzonym logo.

Co zrobić, gdy logo przekracza limit przesyłania?

Najpierw ustal, czy limit dotyczy rozmiaru pliku w KB, czy wymiarów w pikselach. Wyeksportuj wymagane wymiary, usuń niezamierzone puste miejsce i unikaj zbędnego powiększania. W PNG wypróbuj kompresję bezstratną przed pogorszeniem krawędzi. Gdy wymagany jest format stratny, porównuj faktycznie pobrany wynik podczas obniżania jakości. Poradnik zmniejszania plików wyjaśnia kompromisy. Nie ma jednego celu w KB odpowiedniego dla wszystkich logo i zastosowań.

Dlaczego litery lub kolory zmieniają się po konwersji?

Porównaj edytowalny projekt, wyeksportowany SVG, pobrany obraz i umieszczony wynik, aby znaleźć pierwszy różniący się etap. Brakujące lub zastąpione fonty wskazują na eksport tekstu, a brakujące obrazy lub efekty mogą oznaczać nieobsługiwaną zawartość SVG. Zmiana koloru wymaga sprawdzenia profilu źródłowego i eksportu ekranowego. Popraw ten etap i wyeksportuj ponownie zamiast wielokrotnie konwertować już błędną kopię.