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

13

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).

Possikiem
źródło
Próbujesz zapisać go w formacie png / gif? Czy przeszkadza ci mgła w obrazie?
hello_world 24.09.2013
1
Czy Twoja witryna jest oparta na systemie CMS takim jak Wordpress, ponieważ Wordpress (i prawdopodobnie inne) automatycznie obniża jakość obrazu, aby zmniejszyć rozmiar pliku.
deecemobile
Czy zmieniasz rozmiar obrazu w przeglądarce, w górę lub w dół? Jeśli tak, nie rób tego :) Ponieważ są trzy osoby, które mają pytania, być może możesz edytować swoje pytanie, aby utworzyć link do eksportu lub coś podobnego? To pomogłoby nam odpowiedzieć.
Brendan
Jeśli jedna z poniższych odpowiedzi odpowiedziała na twoje pytanie, zaakceptuj je.
DᴀʀᴛʜVᴀᴅᴇʀ

Odpowiedzi:

11

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

Peter Walser
źródło
5

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:

wprowadź opis zdjęcia tutaj

  1. 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.

Alph.Dev
źródło
Dzięki. Myślę, że wyrównywanie do siatki pikseli jest błędem. Słyszałem dobre rzeczy o Fireworks, ale nigdy go nie używałem. Twoje zdrowie.
Possikiem
Wypróbuj Modify > Snap to pixelopcję Możesz także pozwolić fajerwerkom wyrównywać poszczególne piksele w lewym górnym rogu lub w środku piksela. PathPanel wewnętrzny , pod Edit pointsetykietą. Powodzenia.
Alph.Dev,
5

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.

wprowadź opis zdjęcia tutaj

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:

DᴀʀᴛʜVᴀᴅᴇʀ
źródło
1

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.

użytkownik49293
źródło