W poniższym artykule skupiłem się na stronach internetowych, które napotkałem podczas mojej pracy przy tworzeniu aplikacji mobilnych, i które zostały ze mną na stałe. W internecie jest masa różnych stron pomocnych w codzinnej pracy, o których istnieniu początkujący programista/grafik nie ma pojęcia. Ten spis ma na celu przedstawienie ciekawych serwisów oraz ukazanie, że w sieci jest masa stron z różnymi funkcjonalnościami – dlatego nie bójmy się i szukajmy tego czego potrzebujemy w internecie
Lista przydatnych serwisów przy tworzeniu frontend’u aplikacji lub design’ów:
-
Flat UI Colors 2 – 14 Color Palettes, 280 colors ? – Przydatna strona gdy potrzebujemy na szybko ciekawych pasujących kolorów do naszej aplikacji. Do wyboru 14 różnych palet, w każdej po 20 kolorów.
-
Picular – Czasami jest tak, że potrzebujemy koloru do jednego konkretnego elementu, ale mamy trudność ze znalezieniem odpowiedniego. Na ratunek przychodzi “Picular”. Wystarczy wpisać element dla którego szukamy koloru, a strona wyświetla nam wszystkie kolory z nim związane.
-
Free Vector Icons and Stickers – Thousands of resources to download – Jedna z największych, jak nie największa baza danych z ikonami. Bardzo często z niej korzystam, gdy nie mam ikony z design’u, a nie chce czekać aż grafik mi ją podeśle. W 90% przypadków znajduje identyczną ikonę na tej stronie. Nie wszystkie ikony są darmowe, ale strona oferuje przyjazne filtry. Szczególnie polecam dwa: jeden do pokazywania tylko darmowych ikon, a drugi pozwala na wyświetlenie tylko ikon z czarnymi obramowaniami lub tylko z czarnym wypełnieniem (bardzo przyspiesza proces szukania).
Lista serwisów pomocnych przy pracy ze zdjęciami i grafikami:
-
? Color Picker online | HEX Color Picker | HTML Color Picker – Nie raz znaleźliśmy jakiś design, który byśmy chcieli zaimplementować, ale nie mamy podanych wykorzystanych kolorów. Ta strona pozwala na wrzucenie zdjęcia i sprawdzenie koloru każdego piksela.
-
Change Colors in a PNG – Online PNG Maker – Pozwala nam zamienić piksele z jednym kolorem na drugi tj. sprawdza, czy dany piksel ma kolor (lub jest podobny do koloru – można określić % podobieństwa) podany przez użytkownika i zamienia go na kolor docelowy. Przykładem jest zdjęcie rośliny na białym tle – my chcemy mieć przezroczyste tło, więc wybieramy sobie kolor biały, ustawiamy zakres podobieństwa na 5% i zamieniamy pasujące piksele na przezroczyste.
-
Crop your images in seconds for free! – Narzędzie do precyzyjnego przycinania zdjęć. Załóżmy, że dostaliśmy od klienta zdjęcie, które chce w swojej aplikacji, ale ma ono spory margines w okół faktycznego zdjęcia tj. na środku mamy roślinę, ale w około jej mam sporo białego tła, na którym nic się nie znajduje, a zajmuję zbędne miejsce. Dzięki tej stornie możemy przyciąć taki sam fragment z lewej i prawej strony oraz od góry i dołu, tak aby roślina dalej była na środku zdjęcia.
-
TinyPNG – Compress WebP, PNG and JPEG images intelligently – Kompresja zdjęć z rozszerzeniem .png. Pozwala zaoszczędzić średnio około 80% wagi zdjęcia. Bardzo przydatne, jeśli w naszej aplikacji mamy sporą ilość zdjęć i chcemy zredukować rozmiar aplikacji.
-
TinyJPG – Compress WebP, PNG and JPEG images intelligently – Takie samo narzędzie jak to wyżej, tylko dla zdjęć z rozszerzeniem .jpg.
-
pointerpointer.com – Może nie jest to przydatna strona, ale za to bardzo ciekawa i zabawna. Wyświetla nam losowe zdjęcie, na którym osoby wskazują palcem idealnie w miejsce wskazane przez kursor myszki.
-
Online Image Vectorizer – Konwerter ikon/obrazów na grafikę wektorową. Darmowa wersja jest bardzo wolna i ma duże ograniczenia czasowe i ilościowe. Bardzo dobrze się sprawdzi, gdy mamy tylko jeden element, który jest nam potrzebny w rozdzielczości wektorowej.
Pozostałe strony:
-
Internet Speed Test – Bardzo prosta strona do sprawdzania jakości i szybkości naszego połączenia internetowego. Bez zbędnych gadżetów i reklam, dzięki czemu strona ładuje się bardzo szybko i możemy od razu sprawdzić, czy wina wolnego ładowania jest szybkość internetu, czy jego brak.
-
Flowchart Maker & Online Diagram Software – Bardzo rozbudowany serwis do budowy każdego rodzaju diagramów/schematów/map. Do dyspozycji mamy kilkaset elementów, których możemy zbudować np. schemat blokowy, schemat sieciowy, flowchart. Strona oferuje ponad 150 gotowych typów schematów do szybkiego wykorzystania i modyfikacji.
-
Lorem Ipsum – All the facts – Lipsum generator – Generator placeholder’ów tekstu. Możemy wygenerować losowy tekst na podstawie podanej ilości słów/paragrafów/bajtów/wypunktowanych list. Pomocne, gdy klient nie dostarczył nam tesktów, a chcemy zobaczyć jak będzie wyglądała aplikacja po dodaniu do niej tekstu.
-
Lorem Picsum – Podobnie jak generator losowego tekstu, ten serwis generuje nam losowy obraz w podanej rozdzielczości. Bardzo pomocne, gdy wiemy, że zdjęcie, które będzie się wyświetlało użytkownikowi będzie pobierane z API, ale na ten moment API jeszcze tego zdjęcia nie wysyła – wklejamy specjalny link do serwisu i przy każdym użyciu dostajemy inne zdjęcie. Dodatkowe funkcję, to dostarczenie zdjęcia z efektem blur lub w skali szarości.
-
Epoch Converter – Konwertuje czas z tzw. epoch time na czytelną dla nas datę oraz na odwrót. Szybkie, przyjemne oraz posiada różne opcje ustawień zamiany.
-
JWT.IO – Debugger tokenów JWT. Pozwala nam odczytać zakodowane informacje w tokenie (np. id, imię, ale też informacje o samym tokenie – typ i użyty algorytm) oraz przede wszystkim sprawdza, czy token jest poprawny.
-
Screen Sizes – Spis wszystkich informacji o wyświetlaczach Apple. Możliwość kategoryzacji na wielkość ekranu lub na modele urządzeń.