7 wtyczki filtra obrazów CSS dla Instagram-ifying WordPress

Jeśli spędzasz tyle czasu w mediach społecznościowych, co ja, to wiesz, że ludzie mają tendencję do nadużywania filtrów obrazu.

Myślę, że zastosowanie klasycznego filtra czarno-białego do zdjęcia ślubnego może być miłym akcentem, ale nie wtedy, gdy jest to zdjęcie krzyczącego dziecka tańczącego z panem młodym. Argumentowałbym jednak, że w dobrych rękach (tj. w rękach profesjonalnych programistów WordPress!), filtry obrazu mogą zrobić wiele dobrego dla treści wizualnych.

Niedawno pisałem o tym, jak ważna jest spójność przy projektowaniu witryny WordPress. Filtr obrazu to jeden ze sposobów na spójny wygląd wszystkich zdjęć w Twojej witrynie. Filtry umożliwiają również grę w emocje odwiedzających, wywołując określone nastroje. I wyglądają cholernie fajnie.

Podczas gdy aplikacje takie jak Instagram i Snapchat sprawiły, że gotowe filtry są dość wszechobecne, filtr jest tak naprawdę dowolnym ustawieniem lub kombinacją ustawień, które zmieniają wygląd zdjęcia. Każde narzędzie umożliwiające otwieranie i edytowanie obrazu (takie jak to, które znajduje się na komputerze lub urządzeniu inteligentnym) powinno mieć ustawienia dopasowania kolorów, które można zmienić, aby uzyskać pożądany efekt.

Opcje te zazwyczaj obejmują:

• Ekspozycja
• Kontrast
• Najważniejsze informacje
• Cienie
• Nasycenie
• Temperatura< / li
• Odcień
• Sepia
• Winieta
• Ostrość lub rozmycie

Oto przykład, w jaki sposób edytor obrazów prezentuje ustawienia filtrów na komputerze:

Oto, jak obsługuje to iPhone, oferując zarówno indywidualne ustawienia kontroli, jak i gotowe efekty filtrów:

W dzisiejszym artykule omówię działania i zakazy stosowania filtrów obrazu do obrazów WordPress. Zbadam również opcje korzystania z CSS do tworzenia tych efektów filtrowania. Jeśli nie ma potrzeby wchodzenia i wychodzenia z programu Photoshop za każdym razem, gdy chcesz dodać nowy obraz do swojej witryny, oszczędzimy ci tego kłopotu.

Wskazówki 11 dotyczące korzystania z efektów filtrowania obrazu w witrynie WordPress

Gdy już zdecydujesz, że chcesz zastosować efekty filtrów do obrazów w swojej witrynie WordPress, poświęć chwilę, aby przejść przez zalecenia i zakazy ich używania. Chociaż nie potrzeba naukowca, aby zrozumieć, jaki efekt uzyskasz, stosując sepię do swoich obrazów, istnieją mniej oczywiste najlepsze praktyki, o których powinieneś pamiętać.

Wskazówka # 1: pamiętaj o psychologii za Kolor

Teoria kolorów odgrywa dużą rolę w projektowaniu stron internetowych, więc nie zapomnij skorzystać z niej tutaj. Chociaż możesz nie stosować pełnych zmian kolorów do zdjęć, te subtelne zmiany, które pojawiają się z powodu efektów filtrowania, nadal będą miały podobny wpływ na odwiedzających.

Tip # 2: nie przesadzaj

Jeśli wszystko, co chcesz zrobić, to poprawić wygląd obrazu lub dwóch, lub wprowadzić z powrotem świetny obraz, który jest nie do zniesienia pod względem koloru, nie ma potrzeby niepotrzebnego stosowania filtrów do każdego obrazu. Używaj filtrów tylko wtedy, gdy są potrzebne.

Wskazówka # 3: zminimalizuj liczbę filtrów

W badaniu z 2011 r., w którym zbadano, w jaki sposób podobieństwo kolorów wpływa na pamięć krótkotrwałą, naukowcy odkryli, że im więcej jest spójności między kolorami na obrazach, tym lepiej odwiedzający będą mogli przechowywać i przywoływać te obrazy w pamięci krótkotrwałej. Więc zachowaj prostotę jak Owen O ’ Donnell.

Wskazówka # 4: Zainspiruj Się Swoją Marką

Istnieje wiele powodów, dla których warto zastosować efekt filtra do zdjęć,ale dlaczego nie zacząć od marki? Jeśli masz kolor marki, który świetnie wyglądałby na twoich zdjęciach (jak Chris Redshaw), to zrób to. A może Twoja firma ma siedzibę w Kalifornii i chcesz stworzyć luźny, wybielony słońcem klimat dla swoich zdjęć, filtry byłyby świetnym sposobem na osiągnięcie tego efektu.

Wskazówka # 5: Ukryj Niedoskonałości Za Pomocą Filtrów

Zawsze szkoda, gdy pstrykasz zdjęcie, myślisz, że wygląda naprawdę świetnie, a potem zauważasz niedoskonałość później, gdy jest za późno. Ale wiesz co? Możesz użyć filtrów, aby ukryć te niedoskonałości, takie jak złe oświetlenie lub rumiana cera.

Tip # 6: Stwórz czas i miejsce

Myślę, że powodem, dla którego niektórzy fotografowie-amatorzy i użytkownicy mediów społecznościowych mylą cały filtr obrazu, jest to, że nie myślą o tym, jaki wpływ mają te zdjęcia na ludzi, którzy na nie patrzą. Po prostu myślą, że filtr jest „ładny” lub „fajny”. Wiele filtrów zostało stworzonych w celu przeniesienia przeglądarki w inne miejsce i miejsce i powinno być używane do tych celów.

Bardzo podoba mi się ten przewodnik z Make Use Of. Myślę, że dobrze wyjaśnia, jak należy używać każdego filtra Instagram. Nawet jeśli nie używasz narzędzia, które daje dostęp do filtrów Instagram, domniemane znaczenie jest takie samo dla podobnie stylowych filtrów znalezionych gdzie indziej.

Wskazówka # 7: nie używaj Inkwell!

Podczas testowania badanych na temat tego, jak niektóre filtry Instagram sprawiały, że się czuli, naukowcy z Harvardu odkryli, że większość ludzi kojarzy Filtr Atramentowy z uczuciem depresji. Jeśli nie chcesz dać odwiedzającym zły pomysł, a Twoje zdjęcia są bardziej nastrojowe, trzymaj się z dala od tego filtra.

Tip # 8: Ożyw Zdjęcia

Używanie efektów filtrowania na zdjęciach nie zawsze musi być poważną sprawą. Załóżmy, że reszta projektu witryny jest minimalna i czysta. Możesz użyć filtra, aby nadać swoim zdjęciom trochę popu lub intrygi, tak jak zrobił to gospodarz.

Tip # 9: Wyróżnij Coś Konkretnego

Używamy białej przestrzeni, hierarchii tekstowych i innych manipulacji treścią, aby skupić się na tym, co najważniejsze. To samo można zrobić z niektórymi filtrami obrazu. Winietowanie
jest jednym ze sposobów, aby to zrobić, ponieważ tworzy rodzaj rozmycia lub blaknięcia wokół obrazu. To zwraca uwagę na centrum i wywołuje rodzaj zaproszenia dla widza, aby wskoczyć do zdjęcia.

Wskazówka # 10: zwiększ efekty najechania lub najechania

Czy dodałeś animowane efekty najazdu lub najazdu do obrazów w swojej witrynie WordPress? Jeśli tak, filtr może dodać dodatkową warstwę intrygi do tego już urzekającego miejsca na twojej stronie, tak jak robi to Dela Banda.

Tip #11: Idź Z Efektami, Które Poprawiają Zaangażowanie

Badanie przeprowadzone przez Georgia Tech pokazało, w jaki sposób filtrowanie obrazów może prowadzić do zwiększonego zaangażowania w treści wizualne. Ich badania dowiodły wielu hipotez:

• Większy kontrast i ekspozycja wprowadzone do zdjęcia powoduje wzrost wyświetleń i komentarzy.
• Cieplejsze filtry prowadzą do większej liczby komentarzy i widoków.
• Filtry starzejące zdjęcia zwiększają liczbę wyświetleń, ale otrzymują mniej komentarzy.
• Nasycenie z drugiej strony negatywnie wpływa na liczbę wyświetleń, ale ma pozytywny wpływ na komentarze.

7 CSS Image Filters to Use on your WordPress Site

Jedynym prawdziwym problemem, jaki widzę z podjęciem decyzji o użyciu filtrów dla witryny WordPress, jest praca i czas wymagany do tego.

To naprawdę fajne, że Photoshop, Canva i aplikacja do zdjęć Twojego urządzenia ułatwiają tworzenie specjalnych efektów kolorystycznych dla naszych obrazów, ale to wymaga czasu. Kiedy jesteś zajęty przeglądaniem strony po stronie, ostatnią rzeczą, którą chcesz zrobić, to zastosować specjalistyczne ustawienia filtrów do każdego obrazu.

Zaoszczędź czas i użyj CSS, aby zaktualizować obrazy w swojej witrynie. W3Schools ma dobry przewodnik na temat tworzenia tych filtrów za pomocą CSS3, ale to podejście nadal wymaga odrobiny finaglingu. Jeśli chcesz pomóc w stosowaniu tych filtrów, użyj jednego z nich:

• CSS Filters Playground

  

  Po pierwszym spojrzeniu na te filtry CSS, byłem trochę odrzucony z powodu obrazu SpongeBob. Jednak po przetestowaniu innych obrazów i wideo, mam naprawdę świetne wyczucie, w jaki sposób można użyć tych filtrów, aby poprawić wygląd każdego z nich. Mapa jest szczególnie interesująca, ponieważ Wiem, że widziałem te efekty wcześniej, ale nie miałem pojęcia, że są to efekty filtrów.

• CSSFilters.co

  

  To, co najbardziej podoba mi się w tym narzędziu, to to, że istnieje wiele gotowych filtrów-z których większość rozpoznasz na Instagramie—ale nadal masz możliwość dostosowania ich do swoich potrzeb. Możesz również przesłać tutaj swoje własne obrazy, dzięki czemu możesz zorientować się, w jaki sposób filtry będą faktycznie wyglądać ze zdjęciami, zanim zdecydujesz się na jedno i przechwycisz kod CSS dla niego.

• CSSgram

  

  Ta mała biblioteka CSS umożliwia pobieranie filtrów Instagram do WordPress i stosowanie ich do obrazów. Należy jednak pamiętać, że efekty nie pojawią się w przeglądarce Internet Explorer. Nie trzeba dodawać, że jeśli masz dużą bazę odwiedzających korzystających z IE i chcesz, aby efekty się pojawiły, może to nie być najlepsze rozwiązanie.

• Efekty Filtrów CSSReflex

  

  Aby uzyskać bardziej uproszczone ustawienia filtrów, możesz użyć tych właściwości CSS. Nie skupiamy się na stosowaniu różnych efektów kolorystycznych i cieniowania z aplikacji takich jak Instagram, a więcej na zmianie jasności i jasności zdjęcia.

• Filter

  

  Filter jest naprawdę fajną opcją, ponieważ jest łatwy do zastosowania (po prostu zaktualizuj kod HTML na swojej stronie) i istnieje wiele opcji do zabawy. Stworzyli gotowe efekty filtrów, Efekty filtrów wywołane unoszeniem się, a nawet pozwalają na niestandardowe filtry. Co tylko chcesz!

• PostCSS Instagram

  

  Chociaż ta wtyczka CSS ma ograniczoną liczbę efektów filtrowania, nadal jest dobrym rozwiązaniem, aby uprościć proces stosowania filtrów do obrazów na miejscu. Deweloper wykorzystał również szeroką gamę stylów, więc nie dostajesz tylko kilku czarno-białych lub wypranych efektów do wyboru.

• Proste filtry obrazów CSS

  

  Istnieje dziewięć unikalnych opcji filtrowania do wyboru, z których każda zawiera łatwy w użyciu Skrót CSS. Ważne jest również, aby pamiętać, że są one kompatybilne ze wszystkimi głównymi przeglądarkami, więc jeśli martwisz się, że odwiedzający będą mieli spójne wrażenia na wszystkich platformach, może to być twój najbezpieczniejszy zakład.

Wrapping Up

Wiesz, co według mnie jest najlepsze w używaniu filtrów obrazu? Nie musisz być profesjonalnym projektantem, aby nadać swojej witrynie WordPress bardziej profesjonalny wygląd lub efektowny wygląd. Wszystko, czego potrzebujesz, to trochę wiedzy w zakresie korzystania z CSS (lub, alternatywnie, doświadczenia z aplikacją do edycji zdjęć) i możesz tworzyć wizualizacje, które są jednocześnie angażujące i zapadające w pamięć.

Tagi:

• obrazy