Jak dodać na stronie internetowej postaci i obiekty wycięte z tła

Ta technika pozwala nadać stronie atrakcyjnego, dynamicznego wyglądu, a co ważne zastosowanie takiego tricku nie wymaga szczególnych graficznych umiejętności

Na początek krótki przegląd przykładów wykorzystanie tej techniki w web designie. Poniżej prezentujemy projekty, w których użyto zarówno postaci wycięte z tła jak i przedmioty:

Narzędzia do usuwania tła

Jak zatem uzyskać tego typu elementy graficzne. Teoretycznie można ręcznie wyciąć postać lub obiekt korzystając np. z takiego narzędzia graficznego jak Gimp. Nie jest to jednak zbyt praktyczna metoda, bardziej złożone przedmioty trudno jest dokładnie obrysować, więc zwykle efekt końcowy nie jest satysfakcjonujący.

Lepszym rozwiązaniem będzie wykorzystanie darmowego narzędzia online do wycinania tła.  Jednym z popularniejszych jest strona remove.bg. Po wejściu na stronę, ładujemy wybrane zdjęcie i po chwili mamy już gotowy element graficzny.

Druga możliwość to skorzystanie z gotowych elementów bez tła, które znajdziemy np. na stronach pngfuel.com lub pngguru.com.

Gdy już mamy nasz gotowy element bez tła możemy przystąpić do umieszczenia go na stronie internetowej. W przypadku, gdy tworzymy ją w oparciu o szablon, wstawiamy naszą grafikę w wybrane miejsce tak jak każdy inny obrazek. Więcej możliwości będziemy mieli, jeśli korzystamy z kreatora stron np. Elementora. W takim przypadku możemy wstawić nasz obrazek jako element tła sekcji lub kolumny, a także jako nakładkę tła

W poniższym przykładzie postać została wstawiona jako tło prawej kolumny (ustawienia: brak powtarzania, pozycja środek)

kliknij obrazek aby powiększyć

Dalsza obróbka graficzna

Elementy wycięte z tła możemy umieścić na stronie internetowej na białym tle lub poddać je dalszej graficznej obróbce.

Dla przykładu obrazek w pierwotnej wersji z tłem poddajemy desaturyzacji i przyciemnieniu a następnie wycięty kolorowy element wklejamy w odpowiednim miejscu.

 

Drugi trick polega na zamalowaniu części tła na biało, a następnie wklejamy wycięty element tak, że częściowo nachodzi na białe tło. Zabieg ten najczęściej stosuje się na stronach o tematyce sportowej lub ogólnie związanej z aktywnością fizyczną. A to dlatego, że postać w ruchu niejako wychodząca poza kadr nabiera bardziej dynamicznego charakteru.

 

Na koniec warto przypomnieć, że elementy z przejrzystym tłem należy zapisywać w formacie png lub gif, a nie jpg, jako ze ten ostatni nie ma funkcji przejrzystości.