Jak najszybciej znaleźć ikonę? Nabazgrać!

Gugiel wybuścił dziś nową apkę webową – autodraw. Pomysł jest prosty – algorytm bada co bazgrzesz, zgaduje ostateczny kształt i czasie rzeczywistym proponuje gotowe ikony – ładne i równe szkice zamiast Twojego bazgroła. Działa to bardzo dobrze.

Ale ja widzę genialne zastosowanie dla grafików/projektantów. Ile razy traciłeś cenne godziny minuty żeby odnaleźć ikonkę? Wpisujesz w wyszukiwarkę ikon (tą czy inną) tagi, synonimy szukanego słowa itp. To trwa. A tak – Google Autodraw, maz-maz – i odnalezione!
Googlu, kolejny raz przedłużasz mi życie! ;)

Isotope

isotopeŚwietny mechanizm graficznego filtrowania/sortowania przedstawia sobą skrypt Isotope. Wygląda to przefajnie, a możliwości ma wiele. Jesli nie do końca kumasz o co mi chodzi (bardzo możliwe – trudno w krótkim wpisie obrazowo opisać działanie Isotope) – kliknij i sprawdź sam(a).

Fluidy w WebGL

fluidwebglPamiętacie Silk? To taka zabawka kolorową plazmą.

Teraz czasy się trochę zmieniły, mamy do dyspozycji zaawansowany silnik graficzny w przeglądarkach – WebGL. I zaczyna się „dziać”. Jedną z zabawek o której warto wspomnieć, jest Fluid Experiment. Zasadniczo to też zabawka, ale się animuje i zachowuje jak płyn. Powiadam Wam – power drzemie w waszych browserach! :)

Wyszukiwanie podobnych obrazków

Podczas pracy przy webdeveloperce dość często, z różnych powodów, zdarza się, że potrzebujemy wyszukać obrazek podobny do tego który już mamy. Najczęściej Klient podsyła mi do projektu jakąś ilustrację do której nie ma praw, a moim zadaniem jest odnaleźć możliwie podobną, którą mogę zakupić wraz z prawami do użycia.

W Chrome sposób na to jest prosty. Wczytuje obrazek do przeglądarki, nasiskam klawisz „s” i klikam na obrazku prawym przyciskiem myszki. Powoduje to wyszukiwanie przez Google obrazków podobnych. Ale to wyszukiwanie nie jest idealne.

tineyeDlatego warto skorzystać z dedykowanej wyszukiwarki tego typu, jaką jest na przykład TinEye. Działa szybko, prosto, intuicyjnie, a wyniki wyszukiwania są bardzo zadowalające.

Sposób na linie w js – dowolnie pochyłe

Szybciutka funkcja do rysowania dowolnych linii z punktu A do punktu B :)

function linedraw(ax,ay,bx,by)
{
    if(ay>by)
    {
        bx=ax+bx;  
        ax=bx-ax;
        bx=bx-ax;
        by=ay+by;  
        ay=by-ay;  
        by=by-ay;
    }
    var calc=Math.atan((ay-by)/(bx-ax));
    calc=calc*180/Math.PI;
    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
    document.body.innerHTML += "
<div id='line' style='height:" + length + "px;width:1px;background-color:
black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;
transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);
transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);
-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);
-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);
-o-transform-origin:0% 0%;'></div>"
}

Łatwe wycinanie tła online

Clippingmagic.com to prosty onlajnowy program graficzny, odpalany w przeglądarce, używający zaawansowanych funkcji które w prosty sposób można wykorzystać do wycinania obiektów z tła zdjęć. Moim zdaniem rewelka, działa szybko, sprawnie i dokładnie. Przetestowałem i będę używał, chyba nawet Fotoszkopa porzucę w tego rodzaju zadaniach, na rzecz Clippingmagic. Na pewno warto znać.

Obrazek w kodzie strony

Base64 to sposób kodowania danych do ciągu znaków. Używany przez wiele portali do kompresowania/ukrywania danych lub części kodu, jednak jego najfajniejsze i najważniejsze zastosowanie jest inne. Można kodować pliki graficzne. Całe. I umieszczać bezpośrednio w html, jako kod strony. Zastosowane dla ikon i innych małych elementów strony, takie rozwiązanie znakomicie przyspiesza wczytywanie się całości (ładuje się z htmlem, jednocześnie nie blokując kanału przeglądarki). Warto używać, acz zważać trzeba na umiar – ładowanie wszystkich obrazków tym sposobem raczej stronkę zamuli, niż przyspieszy.

Czym to ugryźć? Na przykład tym: base64-image.de. Prosty enkoder, działa wyśmienicie. Takie pchełki fajnie przyspieszają pracę nad stroną.