Przezroczyste ikony PNG: jak zaprojektować baner reklamowy

Pobierz bezpłatny zestaw 48 ikon

Zestaw zawiera obiekty związane z podróżami, technologią, jedzeniem, finansami, nauką, sportem i zdrowiem. Każdy jest osobnym plikiem PNG z przezroczystym tłem. Wybierz najpierw obiekt pasujący do oferty: samolot do podróży, aparat do fotografii lub portfel do finansów.

Otwórz bezpłatny zestaw na Yandex Disk. Oryginalny wpis znajdziesz na kanale Telegram CreoPrompt. Materiały są publiczne; nie trzeba kupować pełnego pakietu, żeby je otrzymać.

Zacznij od oferty i formatu

Przed wyborem tła zapisz, co odbiorca ma zrozumieć. Na przykład: „Sesja zdjęciowa dla Twojej marki” lub „Wyjazdy weekendowe”. Dodaj jeden przydatny szczegół: miasto, datę albo zakres usługi. Następnie określ działanie: otwarcie strony, wiadomość lub rezerwacja.

Utwórz dokument w rozmiarze miejsca reklamowego. Do ćwiczeń wygodny jest kwadrat 1080 × 1080. Przed publikacją sprawdź wymagania platformy i obszary zasłaniane przez jej interfejs. Przeorganizuj każdy format zamiast rozciągać ten sam układ.

Umieść PNG bez dodatkowego tła

W Photoshopie użyj polecenia Umieść osadzone, a w Figmie przeciągnij plik do projektu. Przezroczystość zostanie zachowana. Białe tło podglądu w chmurze nie musi oznaczać białego tła w oryginale. Sprawdź pobrany PNG na kolorowej powierzchni.

W pierwszej wersji przeznacz mniej więcej połowę miejsca na obiekt, a połowę na tekst. To punkt wyjścia, nie obowiązkowa proporcja. Szczegółowy obiekt po zmniejszeniu może wyglądać jak plama; powiększ go lub wybierz prostszy.

Zbuduj hierarchię: nagłówek, szczegół, działanie

1. Umieść duży nagłówek w wolnej części projektu. Dwie lub trzy linie wystarczą, jeśli sens pozostaje jasny.
2. Dodaj szczegół mniejszą, czytelną czcionką, która nie konkuruje z nagłówkiem.
3. Wyróżnij działanie osobną linią lub polem. W statycznym banerze jest to wskazówka wizualna, nie interaktywny przycisk.
4. Zostaw odstęp między obiektem a tekstem. Bliskie krawędzie, refleksy i litery mogą tworzyć przypadkowe kolizje wizualne.

Ikony 3D mają już światło, cienie i kolory. Zacznij od jednolitego tła i jednej rodziny fontów. Tekstury, poświaty i dekoracyjne napisy dodawaj później, jeśli pomagają projektowi. Zbyt wiele efektów utrudnia czytanie.

Dopasuj kolor i światło

Użyj drugorzędnego koloru obiektu do tła lub pola akcentowego, zachowując kontrast tekstu. Kremowe tło może pasować do ciepłej ikony, a ciemne podkreśli jej jasne detale. Porównaj obie wersje w tym samym układzie.

Nie dodawaj automatycznie kolejnego dużego cienia. Plik może już go zawierać. Najpierw sprawdź, gdzie kończy się istniejący cień, i dopiero zdecyduj, czy potrzebny jest dodatkowy kontakt z powierzchnią.

Sprawdź baner w rozmiarze oglądania

Zmniejsz projekt do prawdopodobnego rozmiaru w feedzie. Temat, oferta i działanie powinny być czytelne w kilka sekund. Jeśli dekoracyjny obiekt dominuje, a nagłówka trzeba szukać, zmniejsz obiekt, powiększ tekst lub usuń detale.

Przed eksportem sprawdź pisownię, marginesy i krawędzie. Nie powiększaj oryginalnej ikony wielokrotnie: przezroczystość nie chroni przed utratą jakości. Zapisz edytowalny projekt do późniejszych adaptacji.

Następnie przeczytaj, jak dobrać tło i zachować czytelność. Wszystkie trzy publiczne zestawy są w bezpłatnych materiałach.