Dlaczego zrzuty ekranu Chrome Web Store są ważne?

Zrzuty ekranu Chrome Web Store to pierwsze wrażenie wizualne, jakie potencjalni użytkownicy otrzymują podczas przeglądania list rozszerzeń. Google pozwala na maksymalnie pięć obrazów promocyjnych w zalecanej rozdzielczości 1280×800 pikseli. Dobrze zaprojektowane zrzuty ekranu z jasnymi nagłówkami, markowymi kolorami i makietami urządzeń mogą znacznie zwiększyć liczbę instalacji, pokazując użytkownikom, co robi rozszerzenie, zanim się na nie zdecydują. Wiele udanych rozszerzeń używa adnotowanych zrzutów ekranu — łączących rzeczywiste przechwycenia interfejsu użytkownika z tekstem promocyjnym i wypolerowanymi tłami — zamiast samych surowych zrzutów ekranu.

Opis narzędzia

To narzędzie pozwala na tworzenie profesjonalnych, gotowych do przesłania zrzutów ekranu promocyjnych dla list Chrome Web Store bez żadnego oprogramowania do projektowania. Prześlij zrzut ekranu swojego rozszerzenia, dodaj nagłówek i podtytuł, wybierz szablon układu i dostosuj tło, typografię i ramkę urządzenia. Wynik to obraz o doskonałej jakości pikseli, który spełnia wymagania rozmiaru Chrome Web Store i można go pobrać jako PNG lub JPEG.

Funkcje

  • Predefiniowane i niestandardowe rozmiary — wybierz Chrome Web Store (1280×800), HD, Full HD lub wprowadź dowolne wymiary niestandardowe
  • Szablony układu — umieść tekst i obraz w czterech konfiguracjach: tekst u góry, na dole, po lewej lub po prawej stronie zrzutu ekranu
  • Ramka urządzenia przeglądarki — opakuj zrzut ekranu w realistyczną ramkę przeglądarki z przyciskami w stylu macOS i paskiem adresu
  • Tła gradientowe i jednolite — wybierz kolory jednolite lub gradienty dwukolorowe z sześcioma opcjami kierunku
  • Pełna kontrola typografii — wybierz rodzinę czcionki, grubość, rozmiar, kolor, wyrównanie i przezroczystość podtytułu

Wyjaśnienie opcji

Opcja Opis
Rozmiar wyjściowy Predefiniowane rozmiary (1280×800, 1280×720, 1920×1080) lub niestandardowa szerokość i wysokość
Szablon układu Szybkie predefiniowane ustawienia, które organizują tekst i obraz: podziały górny/dolny lub lewy/prawy
Ramka urządzenia Opakuj zrzut ekranu w ramkę przeglądarki lub wyświetl go bez ramki
Pozycjonowanie tekstu Kontroluj pionowe i poziome umieszczenie nagłówka i podtytułu, plus przesunięcia w pikselach
Pozycjonowanie obrazu Kontroluj pionowe i poziome umieszczenie zrzutu ekranu, plus przesunięcia w pikselach
Skala zrzutu ekranu Zmień rozmiar zrzutu ekranu od 30% do 100% dostępnego obszaru
Typ tła Jednolity kolor lub gradient liniowy między dwoma kolorami
Kierunek gradientu Sześć kierunków, w tym pionowy, poziomy i ukośny
Czcionka Osiem rodzin czcionek, w tym System UI, Arial, Georgia i opcje monospace
Grubość czcionki Sześć grubości od Regular (400) do Black (900)
Rozmiar czcionki nagłówka / podtytułu Niezależne suwaki rozmiaru dla nagłówka (24–160 px) i podtytułu (16–100 px)
Przezroczystość podtytułu Kontroluj, jak wyraźnie pojawia się podtytuł (20–100%)
Kolor ramki Ustaw kolor ramki przeglądarki, gdy wybrana jest ramka urządzenia przeglądarki
Pokaż cień Włącz lub wyłącz cień spadający za zrzutem ekranu lub ramką urządzenia
Zaokrąglone rogi Dodaj zaokrąglone rogi do zrzutu ekranu, gdy nie jest używana ramka urządzenia
Format wyjściowy Eksportuj jako PNG (bez strat) lub JPEG (mniejszy rozmiar pliku)

Przypadki użycia

  • Deweloperzy rozszerzeń przygotowujący obrazy promocyjne do list Chrome Web Store, które podkreślają kluczowe funkcje za pomocą tekstu z adnotacjami
  • Zespoły produktowe tworzące spójne, markowe zrzuty ekranu w wielu rozszerzeniach lub aktualizacjach rozszerzeń
  • Freelancerzy i agencje szybko generujące wypolerowane makiety do prezentacji klientów bez otwierania Figmy lub Photoshopa

Porady

  • Użyj tła gradientowego z subtelnymi różnicami kolorów, aby uzyskać profesjonalny wygląd — duże skoki kolorów mogą odwracać uwagę od samego zrzutu ekranu
  • Utrzymuj nagłówki krótkie (3–5 słów) i zwiększaj rozmiar czcionki, aby pozostały czytelne w skali miniatur w wynikach wyszukiwania Web Store
  • Używając ramki przeglądarki, ustaw kolor ramki tak, aby pasował do tła, aby uzyskać bezszwowy wygląd
  • Eksportuj jako PNG, aby uzyskać maksymalną jakość podczas przesyłania do Chrome Web Store; używaj JPEG tylko wtedy, gdy potrzebujesz mniejszego pliku do innych celów