The Bézier Game – bądź mistrzem graficznego pióra!

Kolejna gra dla grafików: Tym razem musimy prowadzić linię po ścieżce, używając narzędzia „pióro” które prowadzi krzywe Beziera. Mamy do dyspozycji ograniczoną ilość punktów kotwiczących. Liczy się precyzja i też myślenie. Gra jest momentami niełatwa. Ale bardzo wciąga. :)

bezier.method.ac

Filtry CSS

Wiedzieliście że CSS umożliwia bardzo szerokie manipulacje za pomocą filtrów? Wszystkie takie jak powyżej w ilustracji, poniżej są w kodzie:

.saturate {-webkit-filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px);}
.invert {-webkit-filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%);}

Niby z przedrostkami -webkit, ale działa też w Firefoxie… :)

Tutaj można zobaczyć działający przykład:
https://codepen.io/rss/pen/ftnDd

Gra dla grafików: The boolean game

Prosta gra ćwicząca mózg i rękę. Każdy grafik powinien ją przejść bez trudności. Są to w zasadzie puzzle: Dostajesz figury geometryczne, i kształt do ułożenia. Układasz figury, a potem je łączysz na różne sposoby (sumą, różnicą, maską lub częścią wspólną. Wynik musi być taki jak kształt do ułożenia. Polecam :)

boolean.method.ac

Grafik proceduralny, Janusz Jurek

Grafika proceduralna (generatywna) to po prostu tworzenie grafiki kodem, a nie narzędziami graficznymi. W pewnym sensie projektowanie CSS też może być taką sztuką, na bardzo niskim poziomie. Jednak istnieją Twórcy którzy programowanie grafiki proceduralnej opanowali do perfekcji, a ich prace powodują opad szczęki.

Jakiś czas temu na Wykopie trafiłem na użytkownika prezentującego takie właśnie prace. Okazał się nim Janusz Jurek – profesjonalny grafik proceduralny. Nawet Photoshop przez jakiś czas miał na splashu jego grafikę. Warto zapoznać się z jego pracami i się zainspirować.

Tutaj sylwetka i więcej info o generative art

A tutaj strona Jurka i portfolio

Darmowy generator wykresów

Quickchart.io to rewelacyjny system łatwego generowania wykresów w czasie rzeczywistym, poprzez zmianę parametrów w nazwie obrazka wykresu.

Rewelacyjnie to działa. Podajesz tytuły, wartości, typ wykresu, kolory, skale – po prostu wszystko. I aby przyspieszyć cały proces – możesz edytować kod wprost pod powyższym linkiem, a potem wkleić na swoją stronę.

Proste, użyteczne, wygodne. Takich narzędzi szukamy. :)

Sprawdzanie poczucia estetyki UI/UX

Zobaczcie cantunsee.space.

Can’t unsee to pseudo-gra, w której musisz oznaczyć bardziej prawidłowy (ze wszechmiar) projekt elementu interfejsu graficznego.

Na początku jest łatwo i prosto, potem następuje kilka błędów, a potem trzeba się dobrze przypatrzyć, żeby oznaczyć ten dobry obrazek. Trudne, czasochłonne, ale uczące i dające dużo satysfakcji. Szczególnie projektantom. Polecam Can’t unsee – nie będzie to czas zmarnowany!

Postarzanie zdjęć przez Javascript

W dzisiejszych czasach możliwości CSS, js, samych przeglądarek i związanych z nimi dodatków – są niemal nieograniczone. Można wykonać wszystko. Kwestia poświęcenia czasu i zaprogramowania rozwiązania… albo: Odnalezienia gotowego rozwiązania w necie. Bowiem większość rzeczy, które chcesz zrobić – zostało już zrobione i wystarczy dotrzeć do takiego rozwiązania.

Tak też było ze zdjęciami, które Klient chciał mieć postarzone, i to w jednym i tym samym stylu. Mogłem zrobić makro w Photoshopie, ale po co, skoro znalazłem VintageJS – skrypt do modyfikacji zdjęć w locie.

Dostępny dla jQ, Angulara i standalone. Mnóstwo fajnych opcji, można się wtopić w zabawę na długie godziny. Możemy edytować jaskrawość, kontrast, winietę, oświetlenie, kolory (nasycenie, nakładanie, parametry rgb), szum, sepię, ramkę (różnego rodzaju). To dużo opcji. Ale są też fajne gotowce, żeby na szybko coś ogarnąć. Polecam, działa świetnie.

Zrób sobie gluta

Mogłoby się wydawać, że stworzenie grafiki z losowym kształtem, który jednak nie jest totalnie losowy, ale jako-tako pasuje do naszej wizji, jest proste.

I może nawet tak jest – po kilku próbach masz spoko losowy kształt…
Ale potrzebujesz takich jeszcze 10. I muszą się różnić od siebie.

Zaczyna być niełatwo, prawda?

Nieprawda. Bo wystarczy odpalić Blobmakera. To mała webappka która tworzy gluty, bloby, i inne losowe kształty.
Możemy sobie ustawić kolor, złożoność i stopień zakrzywiania nibynóżek. ;)
I możemy wynik ściągnąć w svg.

I to jest spoko, niczego więcej nie trzeba. A teraz kliknij powyżej i zrób sobie gluta.

Podcast dla grafika

Jakiś czas temu zadałem na grupie FB Co znosi psychika grafika pytanie o podcasty dla grafików. Ilość odpowiedzi przerosła moje oczekiwania, zdecydowanie będę miał czego słuchać w drodze do Klientów przez następne 10 lat.

Tyle że jeśli to zostawię na FB, to zgubię. Dlatego przepisuję tutaj.

Uwaga: Poniższe podcasty są nietestowane (ale będą!).
Są jednak polecane przez grafików i projektantów: