Jak sprawić, by moje logo wektorowe wyglądały super ostro w Internecie?

Dużo pracuję z programem Illustrator, ale nigdy nie byłem bardzo zadowolony z wyglądu mojej pracy na naszej stronie internetowej. Próbowałem różnych technik - oszczędzanie z programu Illustrator i otwieranie w Photoshopie i oszczędzanie - ale wciąż czegoś mi brakuje.

Ed. Logo było zawsze dostarczane jako AI. Otrzymuję ten sam lekko zamazany wynik, niezależnie od tego, czy oszczędzam na Internet i urządzenia z programu Illustrator, czy przenoszę wektor do Photoshopa. Zwykle skaluję w programie Illustrator do wymaganego rozmiaru, a następnie zapisuję dla Internetu (zoptymalizowany pod kątem typu - tekst w logo).

Podczas rasteryzacji grafiki wektorowej linie wyglądają ostro, jeśli wpadają w granice pikseli. Można to zrobić przez rasterizer (zaokrąglanie), ale większość programów grafiki wektorowej, które znam, nie obsługuje tego. Jedną ze strategii przeciwdziałania temu będzie użycie siatki, której komórki rozciągają się na liczbę pikseli całkowitą (jedna komórka 1x1 lub 2x2 lub 3x3, ... piksel).

W przypadku ikon siatka 16 x 16 jest dobrym początkiem, ponieważ umożliwia tworzenie ostrych ikon 16 x 16, 32 x 32, 48 x 84 itd. Z tej samej grafiki wektorowej.

W przypadku logo dobry początek ma siatka pikseli z 1 komórką = 1 piksel w najmniejszej reprezentacji logo.

Oto samouczek wyjaśniający tę technikę: Ikona żarówki wektorowej w Inkscape

Jest wiele rzeczy, które możesz zrobić.

1. Użyj formatu obrazu z bezstratną kompresją, takiego jak PNG
2. Upewnij się, że ścieżka wektora jest maksymalnie wyrównana do siatki pikseli
3. Zwiększ kontrast między obrazem a tłem (albo kolorem, jasnością lub jednym i drugim)
4. Zastosuj filtr wyostrzania w oprogramowaniu do edycji obrazów
5. Zastosuj kombinację efektów, ciemniejszą ramkę + jaśniejszy blask (na jasnym tle) LUB ramkę ligher + ciemniejszy blask (na ciemnym tle), w następujący sposób:

6. Inną techniką jest zmiana rozmiaru logo wektorowego na 200%, scalenie go z tłem, spłaszczenie go do mapy bitowej, a następnie zmiana rozmiaru mapy bitowej z powrotem do 100%. Czasami robi to różnicę.

Jako oprogramowanie do grafiki internetowej zdecydowanie polecam Adobe Fireworks, ponieważ jest on bardziej odpowiedni do projektowania w pikselach, oprócz innych powodów.

Nie podałeś wiele informacji na temat swojego procesu i nie zostało to wspomniane, ale pomyślałem, że przedstawię ci tę opcję. Jeśli często projektujesz w programie Illustrator i szukasz sposobu wyświetlania swojej grafiki, istnieje alternatywa, którą można wykonać w programie Illustrator zwaną SVG.

SVG staje się coraz częstsze w środowiskach witryny, a dzięki możliwościom zmiany rozmiaru bez utraty szczegółów widziałem więcej używania go z ikonami. Poniżej zamieściłem niektóre zasoby, które możesz przeczytać na temat korzystania z SVG:

• Korzystanie z SVG dla elastycznych, skalowalnych i zabawnych środowisk, część I
• Jak dodać skalowalną grafikę wektorową do swojej strony internetowej
• Korzystanie z SVG

Możesz zmienić rozmiar pliku wektorowego w programie Illustrator. Zapisz go jako plik PDF ze wstępnie ustawionymi: kompresja - kolorowe obrazy bitmapowe - dwukropkowa próbka do: dowolnego rozmiaru - kompresja: „JPEG” - jakość obrazu: „maksymalna”. Zapisz go i umieść plik PDF w Photoshopie we wstępnie zdefiniowanym pliku 300 PPI (na przykład 125 x 125 pikseli). Zapisz jako PNG. Możesz to umieścić na stronie. Jest dość ostry.