<autoreklama>
Rewolucyjne Witryny Internetowe tani CMS szablony dla stron www retusz zdjec
</autoreklama>

Wpisy otagowane ‘grafika’

Jak najszybciej znaleźć ikonę? Nabazgrać!

środa, 12 Kwiecień 2017

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

środa, 3 Grudzień 2014

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

czwartek, 20 Listopad 2014

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

wtorek, 7 Październik 2014

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.

Na GRX.pl kilka nowych szablonów www…

sobota, 15 Marzec 2014

Poniżej cztery smaczki spośród kilkunastu nowych. Po więcej zapraszam na GRX.pl :)

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

sobota, 15 Luty 2014

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>"
}

Generator trójkątów CSS

środa, 1 Styczeń 2014

triangleKolejne proste, łatwe i przydatne narzędzie – CSS Triangle Generator – do tworzenia prostych trójkatów z borderów CSS’owych. Osobiście używam często, działa wysmienicie. Warto znać.

DetURL

wtorek, 20 Sierpień 2013

Krótko, za Strimsem:
Wprowadź „deturl.com/” przed adres filmu na YouTube itp. lub dowolnego obrazka, aby w szybki sposób uzyskać narzędzia do pobrania danego klipu, przerobienia zdjęcia, odczytania danych EXIF, możliwości wyszukania podobnych obrazów i wiele więcej.

Łatwe wycinanie tła online

niedziela, 28 Lipiec 2013

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

środa, 26 Czerwiec 2013

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ą.

Kolejne 6 świeżych layoutów dla www

piątek, 14 Czerwiec 2013

6 nowych szablonów www. Zobacz więcej na GRX.pl. Zapraszam!

Subtelne wzorki

wtorek, 29 Styczeń 2013

Subtle Patterns to zbiór subtelnych w swojej formie, stylowych wzorów (powtarzalnych tekstur) idealnych do zastosowania jako tło strony internetowej, aplikacji, lub w innych projektach graficznych. Znajdziemy tu nie tylko obszerny zbiór ‚patternów’, ale przede wszystkim kilka perełek, na które aż miło popatrzeć i aż trudno oprzeć się pokusie umieszczenia takiej tekstury jako tło swojej strony internetowej. Sama strona także zasługuje na szacun – czysta, estetyczna i przejrzysta :)

Ikonowy krój czcionek – Awesome!

poniedziałek, 21 Styczeń 2013

Kolejne rozwiązanie przyspieszające prace nad wszelkiego rodzaju panelami, podstronami ustawień (i nie tylko). Genialne w swojej prostocie – krój czcionek będący po prostu ikonkami. Rewelka, bo ikony wyświetlane w ten sposób są skalowalne, cieniowalne itp – można z nimi robić w przeglądarce dokładnie to, co ze zwykłym tekstem. A dzisiejsze technologie przecież umożliwiają implementację dowolnego kroju czcionek na stronie… Nic tylko korzystać.

Ikonek w Awesome Font są setki, jeśli nie tysiące. Jeśli nie znalazłeś/aś poszukiwanej ikonki – poszukaj jeszcze raz, na pewno gdzieś tam jest.

Tajemnicą dla mnie jest, jak autoarzy wykonali animowaną (!!!) czcionkę… postaram się to zgłębić, a na razie  – polecam.

Filtrowanie obrazków w locie

środa, 16 Styczeń 2013


CanvasQuery jest biblioteką dla elementu HTML5 ‚Canvas’, która pozwala na stosowanie z jQuery. Umożliwia stosowanie różnych metod manipulacji na grafikach, przeznaczonych co prawda dla developerów gier, ale moze webdesignerzy też coś z tym zrobią… Można na przykład w locie zapodać efekt grafiki z C64 :)

Na stronie CanvasQuery znajdziemy full-wypas rozpiskę, jak stosować tą sztuczkę, gdzie stosować, oraz wdrożenia popularnych efektów.

Fajna sprawa – zerknij na demo, aby się przekonać. ;)

Typo-efekty

niedziela, 30 Grudzień 2012

Nie wiem jakim cudem dopiero teraz „wpadłem” na ten generator… no ale cóż, tak już jest, Internet jest wielki. Jako uzupełnienie do wpisu o innej, podobnej webaplikacji:

Typoeffects.com to witryna z dwoma rewelacyjnymi generatorami grafik składających się ze słów. Mamy opcję generatora ascii-art, lub napisów ułożonych w kształt obrazka. Opcji i ustawień pracy generatora jest bardzo dużo, a efekty często są po prostu powalające. Warto zajrzeć, chociaż po to żeby się pobawić…

Nowe szablony dla WWW

piątek, 16 Listopad 2012

Tradycyjnie (choć to krótka tradycja) publikuję 6 moich nowych dziełek – szablonów www. Kazdy szablon można zakupić/pobrać na GRX.pl. Zapraszam!

Coś o niebieskim

piątek, 19 Październik 2012

(W nawiązaniu do wpisu z infografiką o kolorach)
W portalu templatemonster (który jest dla mnie zawsze – nie wiedzieć czemu – najlepszą formą inspiracji) znalazła się bardzo fajna infografika częściowo interaktywna, o kolorze niebieskim na stronach www. Jak się okazuje, tym kolorem (i wieloma jego odcieniami) można całkiem wiele zdziałać.
Warto obejrzeć, chociażby dla sprawdzenia efektu wirującego ołówka :)

Pokaz animacji CSS

środa, 17 Październik 2012

Wiem że zaczynam być nudny w tym temacie, ale to trzeba zobaczyć, aby wyobrazić sobie możliwości. Google opracował prostą prezentację ukazującą wszystkie podstawowe możliwości animacji i ruchu realizowanego za pomocą HTML5, CSS3 (no i JS, SVG, WebGL). I (prawie) wszystko staje się możliwe… tylko czekać na jakiś profesjonalny edytor takich animacji…

Classic Color

wtorek, 16 Październik 2012

<a href=”http://www official site.classic-color.com”>Kolejna „prosta” witryna, która wiele zyskuje przy przewijaniu… Fajna animacja, w HTML5, CSS3 i JS… W związku z takimi stronami (choć chyba należałoby wymyślić nowe określenie na takie prezentacje multimedialne), bardzo podoba mi się kierunek, w którym podąża sztuka internetowa. :)

Intro na przeglądarkę – znak czasu

wtorek, 3 Lipiec 2012

Pamiętacie scenowe dema? Wypas graficzny i muzyczny, mający po prostu robić wrażenie. Szczególną formą dem były tzw. intra – czyli wypas graficzny i muzyczny, zamieszczony w pliku o ograniczonej wielkości. Nawet w 1024 bajtach dało się zmieścić kilka fajnych efektów.

Piszę o tym dlatego, że pojawiło się coś, co dla mnie jest znakiem czasu. Otóż pojawiło się właśnie takie intro 1024b, ale … na przeglądarkę. Intro nie jest megaskomplikowane, ale jak na 1 kb (JEDEN KILOBAJT!) wielkości – rzuca na kolana (aby je zobaczyć – kliknij w minaiturę obok). Jednak  nie to jest najważniejsze. Najważniejsze jest to, że dziełko jest zaprogramowane w czymś, co stanowi po części „hack” na przeglądarkę – wykorzystuje jej nietypowe funkcjonalności, a po części jest kodem js.

Zmierzam do tego, że, dla mnie w sposób jasny i widoczny, przeglądarka internetowa została po raz pierwszy potraktowana jak system operacyjny, a nawet jak cały komputer. Panie i Panowie – myślę że można już pełną gęba krzyczeć, ze zdecydowanie wchodzimy w erę wirtualizacji i systemów rozproszonych. To tylko kwestia (niedługiego) czasu – a komputery (o ile to jeszcze będą komputery) nie będą miały dysków, procesorów ani kart graficznych – będą tylko interfejsem, z mocnym łączem internetowym, a utrzymanie, przetwarzanie i generowanie danych będzie się działo „gdzieś tam w sieci”.

Żyjemy w przełomowych czasach – strasznie się z tego cieszę :)