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

Wpisy otagowane ‘grafika’

Clippy – narzędzie do tworzenia kształtów

piątek, 18 Styczeń 2019

Clippy to wdzięczna nazwa dla bardzo przydatnego narzędzia, które jest kreatorem wizualnym kształtów/masek generującym za pomocą polecenia css clip-path (i odpowiednich prefixów) kod kształtu. Potrzebne, używane, zapisane w ulubionych.

Wycinanie tła

poniedziałek, 10 Grudzień 2018

Jakiś czas temu opisywałem już webappkę Clippingmagic, która wycina tło.
Ta opisywana teraz webappka – Remove.bg – jest jednak o trochę lepsza, choć nie idealna (gdy tło jest różnorodne i kolorystycznie zbliżone do obiektu wycinanego – raczej nie działa). Nic nie zastąpi ręcznego szparowania w fotoszkopie, ale zawsze warto adres remove.bg znać. Może kiedyś się do czegoś przyda…

Obrazy generowane przez AI

piątek, 11 Maj 2018

Jako że blisko mi do grafiki, obrazów i tym podobnych wizualnych rzeczy, a jednocześnie fascynuje mnie tworzenie obrazów kodem/algorytmem – to rzeczą naturalną jest to że zaciekawiły i zauroczyły mnie obrazy tworzone przez sztuczną inteligencję.

W Sieci jest kilka generatorów tego typu obrazów – na przykład deepart.io czy deepdreamgenerator.com.

Jak to działa? Wrzucasz do maszynki dwa obrazy. Maszynka (a raczej AI, która nie jest tak naprawdę sztuczną inteligencją ale algorytmem maszynowym – uczącym się) stosuje styl graficzny drugiego obrazka na pierwszym. Trzeba trochę poczekać i pokombinować, ale ze zwykłych zdjęć wychodzą cuda.

Polecam do pooglądania:

https://deepart.io/latest/

https://deepdreamgenerator.com/feed

https://pl.pinterest.com/revolwebPL/the-best-of-ai-deep-dream-generator/ – mój pinterestowy subiektywny zbiór najlepszych tego typu prac

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ę :)

Psychologia kolorów

piątek, 18 Maj 2012

Chyba nic więcej tłumaczyć nie trzeba. Świetna infografika, którą w sumie warto wkuć na pamięć. Znalezione na Wykopie.

6 nowych szablonów www

poniedziałek, 30 Kwiecień 2012

Jako że publikowanie newsów o każdym nowym szablonie traci trochę sens (bo i doplinować tego obowiązku trudno (a automatu trochę nie chce się pisać) i wartość takiej notki niewielka) – postanowiłem pisać info o szablonach wtedy, kiedy wystąpią razem dwa warunki: 1) przypomni mi się, że trzeba, 2) nowych szablonów jest minimum 4 :)

Dziś te warunki są spełnione, zatem prezentuję i zapraszam do bliższego zapoznania:

Ostatni z tych szablonów jest darmowy – zapraszam do ściągania i używania. :)
Więcej szablonów znajdziesz na www.grx.pl.

Klikalna mapa polski w jQuery

czwartek, 12 Kwiecień 2012

Piotrek, kumpel z pracy, znalazł coś fajnego – kompleksowe rozwiązanie problemu wykonania interaktywnej mapki europy, polski i innych obszarów, z klikalnymi województwami.

O, proszę: winstonwolf.pl/clickable-maps/polska.html. Oczywiście free. Za niewielką opłatą. Oszczędność czasu i pracy. Polecam.

Skomodorkuj siebie :)

niedziela, 1 Kwiecień 2012

Bezużyteczna zabawka znaleziona na Wykopie jakiś czas temu: Za pomocą tej prostej aplikacji każde zdjęcie / obrazek możesz bardzo szybko przerobić na taką, która będzie wyglądać jak wyświetlana na kościach graficznych legendarnego komputera C=64.

C64 Yourself to fajna rzecz, może kiedyś komuś przyda się w jakimś awangardowym projekcie. :)

Nowy szablon www: ITnet

środa, 21 Marzec 2012

Zagapiłem się i zapomniałem wrzucić na bloga info o nowym szablonie na grx.pl … i właśnie naprawiam błąd. Zobaczcie:

Neon flames – kolejny generator teł

niedziela, 11 Marzec 2012

Pamiętacie Silk? Była to zabawka/eksperyment – mini aplikacja graficzna, w której można było generować trójwymiarowe półprzezroczyste „materie”. Efektem kilkunastu sekund bezładnego machania myszką jest obrazek wart zastosowania jako tło w dowolnej aplikacji rozrywkowej lub na stronie internetowej … lub jako tło na pulpit.

Otóż teraz mamy do czynienia z podobną zabawką – „Neon Flames” to webaplikacja (btw., napisana w HTML5 przez szwacarskiego programistę, który popełnił wiele innych ciekawych eksperymentów webowych) umożliwiająca stworzenie form graficznych, których wygląd można porównać do widoku galaktyk i mgławic. Wychodzi toto świetnie, a zabawa jest przednia, tym bardziej że do dyspozycji mamy, oprócz kolorów, także inne parametry „pędzla”.

ColorHexa – kolorystyczny kombajn

sobota, 25 Luty 2012

<a href=”http://www check this link right here now.colorhexa.com/”>Narzędzi kolorystycznych w Sieci jest wiele, i na tym blogu ten temat był już poruszany wielokrotnie (jeśli nie wierzysz – przeklikaj się przez powiązane tagi). jednak to narzędzie – ColorHexa – zasługuje na wzmiankę głównie ze względu na swoją przejrzystość i użyteczność. Niby jest to kombajn – można mieszać kolory, palety, generować gradienty i kombinować na wiele innych sposobów. A jednak, mimo mnogości funkcji – aplikacja przedstawia się i działa bardzo funkcjonalnie. Wszystko co potrzebne – jest na swoim miejscu, dostępne wtedy gdy powinno być dostępne. Po prostu witryna napisana w sposób przemyślany i przetestowany. Korzystanie z takich rozwiązań przyspiesza tworzenie twoich projektów, a więc pozwala Ci więcej zarabiać. decydowanie warto porzucić kilka innych narzędzi, dla ColorHexy.

Szablon www: Network

sobota, 28 Styczeń 2012

Na grx.pl wrzuciłem kolejny szablon, tym razem dla branży IT – zapraszam do oglądania (a chociaż do zerknięcia):

Synestezja

niedziela, 20 Listopad 2011

Na szybko, taka ciekawostka, w sumie trochę graficzna, a więc w pewien naciągany sposób korespondująca z tematyką bloga:

Synestezja – to zjawisko odczuwania jednym zmysłem tego, co odbieramy innym zmysłem. Czyli na przykład smakowanie kolorów, słyszenie zapachów itp. Do tej pory myślałem, że to ciekawostka dotycząca tylko osób z taką właśnie przypadłością. Ale okazuje się, że u „standardowych” ludzi, też może działać. Dobrym i poniekąd oczywistym przykładem jest powiązanie zmysłów smaku i powonienia (można posmakować zapachu i powąchać smak), ale znalazłem inne, lepsze zjawisko, które u mnie działa:

Bo patrząc na poniższą animację, naprawdę „słyszę” ten filmik, mimo że to animgif, zatem jest na 100% niemy. Słyszę ciche, ale wyraźne „bum” gdy ziemia w animacji się trzęsie. Niesamowite. Też to macie? Jeśli tak, to doświadczanie właśnie synestezji.

[godzina później] Znalazłem kolejny obrazek, który słyszę. Poniżej. Wy też słyszycie „Pszszsz” ?

Znaki do kopiuj/wklej

piątek, 4 Listopad 2011

<a href=”http://copypastecharacter.com” rel=”http://copypastecharacter simvastatin tablets.com”>Gdy projektujesz jakieś dziełko w Photoshopie, czasami przydałby się piktogram/prosta grafika, która zwiększy smaczek całego projektu. Wiesz że taka grafika/kształt jest gdzieś w klawiaturze – wystarczy jedynie znać kombinację klawiszy… otóż nie :) – bo wystarczy znać stronę copypastecharacter.com, na której zebrano wszystkie nietypowe znaki tego rodzaju, gotowe do użycia po skopiowaniu. Rzecz prosta i przydatna :)

Tagxedo – kreatywna grafika w kilka chwil

czwartek, 27 Październik 2011

<a href=”http://www.tagxedo buy atorvastatin online.com/” rel=”http://www.tagxedo.com/”>Nie lubię Silverlighta i dlatego jeszcze nigdy nie pisałem o żadnych narzędziach z wykorzystaniem tej technologii. Myślę że Microsoft wyskoczył jak Filip z konopii, tworząc i rozwijając klon Flasha w momencie, gdy flash odchodzi w zapomnienie.

Jednak teraz zrobię wyjątek i zaprezentuję webaplikację stworzoną w tej właśnie technologii. Nie jest to jakieś niezbędne narzędzie, ale może być przydatne dla wszelkich grafików/projektantów w momentach, kiedy po prostu nie ma pomysłów na coś kreatywnego.

Chcę pokazać Wam Tagexedo – webaplikację, którą pokazał mi Kumpel/Klient Grzesiek (pozdro!).

Co ta pchełka potrafi? Otóż automatycznie tworzy ładne grafiki, używając odpowiednio ułożonych słów pobranych z jakiegoś źródła (np. z pliku, kanału Twittera, strony internetowej itp.). Wyniki są bardzo efektowne i zaciekawiające – na pewno przyciągną niejeden wzrok, gdy użyć ich w jakiejś publicznej publikacji. Warto zainstalować Silverlighta chociażby po to, żeby się tym cackiem pobawić.

Naprawianie poruszonych zdjęć

środa, 12 Październik 2011

Król w branży, aby się utrzymać, musi co rusz zadziwiać Świat nowymi/nowatorskimi cechami – tak, żeby każdy czuł respekt i nikt go nie zdetronizował. Dokładnie tak „zachowuje się” Adobe Photoshop – Od kilku wersji daje nam niedostępne nigdzie indziej narzędzia, wręcz „magicznie” wykonujące zadania, czasem wydawałoby się – niewykonywalne. Tajemnica leży w zaawansowanych algorytmach obliczeniowych, na które można sobie pozwolić przy dzisiejszych mocach obliczeniowych.

Nowa wersja Photoshopa będzie zawierała bardzo przydatną funkcję – naprawianie poruszonych zdjęć. Jak widać na poniższej prezentacji – działa to bardzo dobrze. Algorytm nie wyostrzy nieostrej fotki (to chyba nawet teoretycznie niemożliwe), ale zdecydowanie poprawi jakość zdjęcia poruszonego. Magia. :)

Silk – zabawka, czy generator grafiki?

poniedziałek, 13 Czerwiec 2011

Wpadłem ostatnio na webaplikację „Silk”, dzięki której można kilkoma kliknięciami i pociągnięciami myszy wygenerować efektowną, kolorową grafikę. Grafika „rysuje się” w ciekawy sposób, podczas której istnieje możliwość sterowania wiatrem (shift+ruchy myszką) a efekt możemy zapisać. Można też powtórzyć animację. Zabawa przednia, przynajmniej na kilka minut. Lubię takie interaktywne dema, pokazują one moc komputerów i Internetu jako narzędzi.

Jednak zastanawiam się, czy grafik wygenerowanych za pomocą „Silka” nie użyć przy projektowaniu stron. A jak wygląda sprawa praw autorskich? Co prawda pierwszą kreskę narysowałem ja, ale resztę wykonał algorytm, który zaprojektował twórca narzędzia. Tak czy owak – rzecz ciekawa przynajmniej do obejrzenia.

Rewelacyjny generator gradientów CSS

sobota, 11 Czerwiec 2011

Jak wiadomo, tworzenie zaawansowanych gradientów „z palca” nie jest łatwe. Dlatego szukałem dobrego generatora. I w końcu znalazłem czego szukałem.

Webnarzędzie do generowania różnorakich gradientów kolorystycznych dla elementów CSS3, ze wszystkimi przydatnymi opcjami i bajerami. Intuicyjne, łatwe w obsłudze, szybkie i skuteczne. Oparte na rozwiązaniach GUI znanych z programów graficznych. Generujące w czasie rzeczywistym kod CSS kompatybilny ze wszystkimi nowoczesnymi przeglądarkami. Umiejące także importować gradient z kodu CSS, a nawet z obrazka. No i posiadające zbiór predefiniowanych  gradientów – rewelacja. Są tam także gradienty z efektem szkła, odbić, gładkie delikatne przejścia kolorystyczne (trudne do uzyskania i „wyczucia”) itp. cuda. Można także zapisać swoje gradienty.

Zdecydowanie przyda się każdemu tworzącemu nowoczesne strony WWW.

Ale o czym mowa? O narzędziu Ultimate CSS Gradient Generator. Polecam.

Nietypowe kształty w CSS

piątek, 10 Czerwiec 2011

Nowa generacja języka CSS daje nam bardzo dużo możliwości – między innymi generowanie różnych kształtów boksów za pomocą jedynie kodu CSS. Możliwości jest naprawdę wiele – od prostokątów, rombów, równoległoboków, poprzez koła, elipsy, różnorakie trójkąty, wielokąty, gwiazdy, do kształtu kropli, symbolu nieskończoności lub innych (nawet wymyślnych) kształtów.

Dzięki tym (i innym nowym) możliwościom nowego CSS (i HTML5) – tworzenie stron staje się bardziej programowaniem niż projektowaniem. Ale to temat na inny wpis :)

Wracając do tematu: Jak na razie znalazłem dwa miejsca gdzie opisane są przykłady tworzenia nietypowych kształtów. Jedno z nich to odpowiednia sekcja niezawodnego kursu HTML  i CSS Pawła Wimmera. Drugie źródło, o nieco innej formie i podejściu – to The Shapes of CSS – Wpis na stronie css-tricks.com. Treść obu tych źródeł każdy szanujący się webmajster powinien sobie przyswoić w stopniu znacznym. ;)

Wyostrzanie obrazków w PHP

środa, 11 Maj 2011

Gdy za pomocą biblioteki graficznej GD, skalujemy w PHP obrazek w dół – staje się on po prostu nieostry. Jeśli dodać do tego kompresję JPG (która często dla miniaturek ustawiana jest na sporą wartość) – mamy mdłą miniaturkę, niezachęcającą do kliknięcia w nią tak jak powinna zachęcać. Czy jest na to sposób? Owszem – wystarczy przed zapisaniem miniaturki wyostrzyć ją. Początkowo chciałem taki skrypt sam napisać, ale przerosło mnie to. Zatem, po kilkudziesięciu minutach googlowania – znalazłem działające rozwiązanie, tutaj: adamhopkinson.co.uk/blog/2010/08/26/sharpen-an-image-using-php-and-gd

A na bloga wklejam, bo może komuś oprócz mnie też się przyda… Jeśli znasz podobne rozwiązania/tricki, śmiało daj znać w komentarzu.

(Obrazek zapożyczony z docelowego linku)

12 ładnych (?) szablonów

wtorek, 12 Kwiecień 2011

Na moim blogu dawno nie prezentowałem moich dziełek. Co prawda przewijają się po lewej, ale ktoś mógłby przegapić, więc nadrabiam – poniżej przedstawiam kilkanaście stosunkowo nowych projektów mojego autorstwa, które mi się najbardziej podobają. Co sądzicie?

Po więcej – zapraszam na GRX.pl.

BTW – zapraszam też do zapisania się do newslettera na GRX.pl – http://www.grx.pl/newsletter.php – dzięki temu będziesz otrzymywać informacje o każdym nowym szablonie.

Favikony świata

poniedziałek, 1 Listopad 2010

Ciekawostka webmasterska – na podstawie danych z Alexy stworzono „mapę” przedstawiającą popularność światowych serwisów internetowych miarą powiększenia ich faviconek. Fajna rzecz. A tu można browsować i wyszukiwać :)

Kolorowe kombinacje

wtorek, 15 Czerwiec 2010

Nie lejąc wody: colorcombos.com to jeden z serwisów zajmujących się schematami kolorystycznymi stron www i publikacji. Posiada bazę schematów, tester kolorów i kikla innych opcji, ale dla mnie najważniejszą jest możliwość „ściągnięcia” schematu kolorystycznego dowolnej strony poprzez podanie jej adresu URL. Nie wiem, jak to działa, ale działa i jest fajne i przydatne. :)

SmushIt

czwartek, 10 Czerwiec 2010

O bezstratnym zmniejszeniu rozmiarów plików grafiki w formacie PNG pisałem już kiedyś, we wpisie „Jak zmniejszyć PNG„. Do optymalizacji wielkościowej plików JPG używam świetnej pchełki offline „jpegoptim

Okazuje się, że istnieje narzędzie, optymalizujące w taki bezstratny sposób każdą grafikę. Mowa o SmushIt – jest to intuicyjna, prosta mini-web-aplikacja, zmniejszająca rozmiar plików graficznych „podanych” poprzez upload lub wskazanie adresu URL. Tak zoptymalizowany plik można oczywiście ściągnąć na dysk. Szybko, łatwo, bezboleśnie, dla wszelkich webowych rodzajów grafik.

Darmowe kształty

poniedziałek, 25 Styczeń 2010
All Silhouettes Gratka dla grafików: Na stronie all-silhouettes.com autor zebrał pokaźny zbiór wektorowych kształtów, pogrupowanych tematycznie.
I tak są tu kleksy, florale, ikony, seksowne panienki, płomienie i wiele, wiele innych. A wszystko za darmo i w niezłej jakości, gotowe do użycia. Nic tylko ściągać i używać.
Aha – najważniejsze: Licencja pozwala na używanie tych grafik także w projektach komercyjnych!

Tworzenie czarno-białej wersji strony www

czwartek, 21 Styczeń 2010

GrayBitPewien Klient, któremu wykonałem dosyć złożoną szatę graficzną i szablon portalu www (ponad 2000 linii kodu CSS, około 200 pilków graficznych) zlecił mi wykonanie jej wersji w odcieniach szarości. Czarno-białe miało być wszystko – od kolorów zdefiniowanych w CSS, poprzez grafiki, a kończywszy na favikonce.

Początkowo szukałem w Internecie webaplikacji, która by to wszystko (albo prawie wszystko) zrobiła za mnie automatycznie. Może źle szukałem, może za krótko, ale – nie znalazłem. Znalazłem jedynie webaplikację GrayBit, która rzeczywiście przekształca stronę na pozbawioną kolorów, ale 1) działa strasznie wolno, 2) robi to dla celów podglądu, a nie użycia w dodatkowej wersji strony 3) pobieranie przekształconych przez to narzędzie plików jest bardzo utrudnione.

Mimo to postanowiłem z tej aplikacji skorzystać i udało się – po zabawie z pobieraniem wielu plików, zmianie adresów w pobranych plikach CSS i HTML udało mi się w ciągu kilkunastu minut stworzyć wersję szarą portalu (cz-b pliki JPG ze względu na stratę jakości stworzyłem od nowa). Jednak wciąż nie mogę uwierzyć że w Internecie nie istnieje webaplikacja robiąca to szybko, łatwo i przyjemnie. Marzeneim jest narzędzie pobierające pakiet zip z szablonem i „wypluwające” taki sam pakiet, tyle że z plikami i definicjami kolorów przekształconymi w odcienie szarości.

Jeśli znasz taką aplikację – daj znać w komentarzach. Zapewne nie tylko ja będę Ci wtedy wdzięczny.

Jak zmniejszyć PNG?

niedziela, 18 Październik 2009
Ling.pl Czy da się zmniejszyć wielkość pliku PNG? Szczerze przyznam że moja wiedza do dzisiaj wykluczała taką możliwość. Dzisiaj u RAFiego znalazłem link do webnarzędzia PunyPNG. Oferuje ono bezstratną kompresję plików JPG, GIF i … PNG właśnie. Sposób działania jest prosty: Aplikacja oblicza, który format będzie najekenomiczniejszy dla danej grafiki, a następnie bezstratnie kompresuje wybraną grafikę. Z moich trestów wynika że można zmniejszyć wielkość grafiki na średnio-przeładowaną graficznie stronę o 30-40%. Warto więc skorzystać.

Estetyczne ładowanie

piątek, 3 Kwiecień 2009

Animacje preload Prawie dwa lata temu prezentowałem stronę AjaxLoad, na której stworzyć można było „profesjonalną” animację typu „please wait”.

Dziś u RAFiego znalazłem link do podobnego serwisu, jednak tam jest inny – wg mnie obszerniejszy i lepszy – wybór animacji. Najbardziej smakowite są animacje 3D, które można stosować chociażby w LightBoxie, czy innych *boxach.

Pozwoliłem sobie obok stworzyć małą mozaikę z typów animacji oferowanych właśnie przez Preloaders.net, aby lepiej Was zachęcić – wizualnie. :).

Nowa metoda kolorowania zdjęć B&W

niedziela, 16 Grudzień 2007
Colorization Using Optimization Nie tak dawno pisałem o nowatorskiej metodzie skalowania zdjęć z zachowaniem szczegółów, a dziś wpadłem na stronę opisującą kolejny nowatorski algorytm, który może być używany do obróbki grafiki, a konkretniej – do szybkiego i dokładnego kolorowania czarno-białych zdjęć i filmów video.
Jak to zwykle w takich przypadkach bywa, całość opiera się na bardzo prostym pomyśle – „rozmalowywania” barw ręcznie zaznaczonych linią lub plamą w obszarze ograniczonym załamaniami kontrastu czarno-białego obrazu.
Metoda jest prosta, łatwa i szybka. Na opisującej ją stronie znajdziemy sporo przykładów zastosowania – zarówno na zdjęciach jak i filmach, oraz źródła algorytmu dla MATLABa. Cóż – Świat idzie do przodu, a z nim technologie, także te dotyczące obróbki obrazu.

Pracuj szybciej w Photoshopie

wtorek, 30 Październik 2007
W tym wpisie zestawiono 53 przydatne tricki przyśpieszające i ułatwiające pracę w Photoshopie. Wiele z nich już wcześniej znałem, ale o kilkunastu dość istotnych nie miałem pojęcia. Warto się tego nauczyć.

Image Reflection Generator

wtorek, 23 Październik 2007
Reflection Maker Reflection Maker to nic innego, jak łatwa, prosta, intuicyjna, przyjazna i przejrzysta w działaniu i obsłudze aplikacja on-line służąca do tworzenia łebdwazerowego efektu odbicia obrazka. Przydatne dla nie-grafików, lub dla grafików leniwych :)
Grafikę wejściową możemy pociągnąć z Sieci, możemy też wysłać plik z dysku. Podajemy jeszcze wielkość odbicia, kolor tła i – voila :) Wynik dostajemy w JPGu (szkoda że nie w PNGu z alfą, ale darowanemu koniowi…).