Witam na moim portfolio!

Jeśli chcesz zapoznać się z moimi dawniejszymi projektami - zapraszam do przeglądania tej strony.

Jeśli chcesz się ze mną skontakować - napisz do mnie na adres: l.andrzejowski@gmail.com
lub odwiedź mój profil na LinkedIn.




Strony internetowe


Wiadomości Archeologiczne
Strona pisma archeologicznego

Projekt i realizacja
HTML5, CSS3, jQuery, DjVu, w pełni responsywna

wiadomosci-desc

http://wiadomosci-archeologiczne.pl

W pełni responsywna strona najstarszego polskiego pisma archeologicznego.

Strona zaprojektowana została z uwzględnieniem użytkowników odwiedzających ją przy użyciu urządzeń mobilnych takich jak tablety i telefony. Układ jest "płynny" i dopasowuje się do rozmiaru ekranu urządzenia lub okna przeglądarki. Strona wyświetlana jest zawsze z tego samego kodu HTML. Wygląd modyfikowany jest jedynie przy użyciu media queries w arkuszu stylów.



Vetra Games
Strona niezależnych twórców gier komputerowych

Projekt i realizacja
Wordpress, HTML4/5, CSS2/3, PHP, jQuery

vetra-desc

http://vetragames.com

Kolejna strona stworzona z wykorzystaniem CMS Wordpress 3.1. Znalazło się na niej wiele elementów przy- gotowanych specjalnie dla tego klienta.

Na zawierającej newsy, głównej stronie, istnieje możliwość "przypięcia" wybranych wpisów, tak że zawsze znajdą się na samej górze, niezależnie od paginacji i do- dawania nowych wpisów.

Strona z listą gier w postaci kafelków generowana jest automatycznie na podstawie wartości we "własnych polach", dołączonych do stron poświęconych poszczegól- nym grom. Tak samo, wyświetlane w pasku bocznym dodatkowe informacje o grze pochodzą z "własnych pól" poszczególnych stron. Tym sposobem wszystkie informa- cje i elementy strony związane z daną grą konfiguro- walne są z pojedynczego wpisu. Ponadto każda gra ma swój własny slideshow, odrębny od wyświetlanego dla pozostałych podstron.

Istnieje również możliwość ustawienia tła strony odrębnego dla każdej podstrony i każdego wpisu. W pasku bocznym wyświetlane są ostatnie wiadomości z dwóch kont na Twitterze. Menu główne i menu kontakowe umie- szczone na pasku bocznym są w pełni konfigurowalne z poziomu panelu administracyjnego. Archiwum strony zo- stało nieco ukryte i jest dostępne za pośrednictwem stron wyświetlających wyniki wyszukiwania dla wpisanych fraz i wybranych tagów lub kategorii.



MoaCube
Strona niezależnych twórców gier komputerowych

Projekt i realizacja
Wordpress, HTML4/5, CSS2/3, PHP

moacube-desc

http://moacube.com

Strona zbudowana dla Wielkiego Moa w oparciu o CMS Wordpress 3.1. Cała witryna przygotowana została od podstaw, zgodnie z wcześniej określonymi wymaga- niami i składa się z czterech części: strony głównej, zawierającej newsy; bloga; strony z wpisami poświę- conymi grom spod szyldu MoaCube oraz strony statycznej z informacjami o zespole. Wpisy do każdej części strony obsługiwane są przez CMS, z poziomu panelu admini- stracyjnego konfigurowalne są także menu główne i menu umieszczone w pasku bocznym strony. Całość zorga- nizowana jest tak, żeby praktycznie dowolne zmiany w treści strony dało się wprowadzić bez ingerowania w kod szablonu Wordpressa.



Gamedecverse
Strona promocyjna sagi Marcina Przybyłka o Gamedecu

Projekt i realizacja
Flash

gamedecverse-desc


gamedecverse-desc2


gamedecverse-desc3


gamedecverse-desc4


gamedecverse-desc5


http://www.gamedecverse.com

Z powstaniem tej strony wiąże się nieco dłuższa historia. Wszystko zaczęło się od kapitalnej grafiki Marcina Jakubowskiego, inspirowanej twórczością Marcina Przy- byłka. Chociaż nie, właściwie to wszystko zaczęło się od samego Marcina, a konkretniej od jego opowiadań o Ga- medecu. Zafascynowały mnie na tyle, że bliżej zaintere- sowałem się twórczością i osobą ich autora. Marcin okazał się być facetem po czubki uszu naładowanym nie- samowicie pozytywną energią, człowiekiem który zawsze ma coś fascynującego do powiedzenia. Ma też wyraźną wizję tego co chce osiągnąć i konsekwentnie dąży do jej zrealizowania, pociągając za sobą masę fajnych ludzi. Ja też dałem się porwać.

Wracając do obrazu: kiedy zobaczyłem go po raz pierwszy, pomyślałem że idealnie nadawałby się jako pod- stawa multimedialnej strony promocyjnej Gamedeca. Coś po prostu zaskoczyło i mniej więcej wiedziałem co mógł- bym zrobić, mając do dyspozycji tę grafikę. Na jednym ze spotkań z Marcinem przedstawiłem mu zarys swojego pomysłu – wyraził zainteresowanie, więc przygotowałem kilka projektów, prezentujących jak mogłaby wyglądać ta strona. Te również spotkały się z aprobatą i wtedy ruszyły właściwe prace.

Strona miała towarzyszyć promocji najnowszej części sagi o Gamedecu i w związku z przesuwaniem ter- minu premiery, została uzupełniona o elementy pierwotnie nie planowane. Dodany został odgrywany z zewnętrznego pliku spot reklamowy, który dopiero powstawał kiedy za- czynałem prace nad stroną. Robert Letkiewicz skompono- wał podkład muzyczny, dodałem także encyklopedię, ze stylizacją nawiązującą do filmu reklamowego.

Przez cały czas pracy nad stroną wstawiałem do niej różne usprawnienia, takie jak poprawki w interfejsie, przeniesienie adresów internetowych zawartych we flashu do zewnętrznych plików konfiguracyjnych czy optymaliza- cje kodowania filmu i muzyki. Uruchmiliśmy także angielską wersję strony.



Magdalena Małek
Strona tłumacza języka angielskiego


Projekt i realizacja
XHTML, CSS, PHP, jQuery

magdalenamalek-desc

http://www.magdalenamalek.pl

Minimalistyczna strona utrzymana w stonowanej kolorystyce. Jednokolumnowy układ treści, dużo światła oraz delikatne roślinne motywy składają się na czysty i elegancki wygląd. Pozazawodowa część strony została oparta na tym samym projekcie graficznym, jednak posia- da własny, odrębny layout ze zmienioną kolorystyką i nagłówkiem. Karuzela z galerii zdjęć napędzana jest przez biblioteki jQuery.



Codeminion - Magic Match
Strona pokazowa


Projekt i realizacja
XHTML, CSS, PHP, jQuery

mmatch-desc

Strona pokazowa Magic Match

Przygotowana w niecałe trzy dni strona pokazowa dla Codeminion. Celem strony jest krótka prezentacja i przedstawienie w dwóch językach podstawowych cech gry Magic Match. Żeby ograniczyć przeklikiwanie się do małych podstron, przygotowałem na bazie materiałów graficznych z gry jedną stronę, urozmaiconą nieco efektami, za które odpowiada jQuery.



Portfolio
Strona, na której właśnie się znajdujesz


Projekt i realizacja
XHTML, CSS, PHP, jQuery

Moje obecne portfolio...

....strona na której się znajdujesz. Chciałem stwo- rzyć minimalistyczny layout, prezentujący bezpośrednio po wczytaniu strony tylko to, co najistotniejsze, a jednocześnie nie ograniczający w żaden sposób rozmiaru treści. Osiąg- nąłem to stosując kilka technicznych sztuczek, z których najlepiej zauważalną jest umieszczenie dodatkowych informacji w rozwijanych „szufladach”.

Dzięki nim strona nie jest zalana dużą liczbą ilus- tracji i opisów (w nowoczesnych przeglądarkach), a równo- cześnie pozostaje funkcjonalna dla użytkowników korzysta- jących z przeglądarek o ograniczonych możliwościach. Możesz przekonać się o tym wyłączając obsługę CSS lub JavaScript (lub obu na raz) – treść jest nadal w pełni dostę- pna, łącznie z obrazami wyświetlanymi w obsługiwanych przez jQuery galeriach.


Zastosowane rozwiązania

CSS spriting

Tradycyjnie sprite'y są w grafice komputerowej koja- rzone ze starymi, 8-mio bitowymi grami, gdzie wykorzys- tywane były między innymi do tworzenia animacji i skła- dania obrazu z powtarzalnych elementów. Zbliżona techni- ka stosowana jest obecnie przy tworzeniu stron interneto- wych, a jej głównym celem jest zredukowanie liczby żądań wysyłanych do serwera. Każdy obrazek znajdujący się na stronie to osobne żądanie – przeglądarka musi każdorazo- wo „poprosić” serwer o jego wysłanie – duża liczba obraz- ków powoduje większe obciążenie serwera (co ma zna- czenie w przypadku popularnych serwisów, odwiedzanych przez tysiące użytkowników) i wolniejsze wczytywanie strony (co zauważalne jest niezależnie od obciążenia sa- mego serwera). CSS spriting polega na wykorzystaniu jednego obrazu w miejsce kilku – po prostu łączy się je w jeden większy, a przy pomocy CSS wyświetla tylko od- powiednie fragmenty, odpowiadające jego częściom skła- dowym. Na przykład menu tego portfolio to tak naprawdę jeden plik graficzny.

Więcej o tej technice przeczytać można między innymi na poniższych stronach:
http://www.alistapart.com/articles/sprites
http://css-tricks.com/css-sprites/

Zastosowane rozwiązania c.d.

Unobtrusive JavaScript

Głównym założeniem “dyskretnego” JavaScript jest oddzielenie jego działania od treści strony. Innymi słowy, treść powinna być dostępna niezależnie od tego czy JavaScript działa (jest obsługiwany przez przeglądarkę), czy nie. Javascript powinien służyć wyłącznie do wzboga- cania strony, dodawania funkcji ulepszających korzystanie z niej, a nie powinien być elementem wymaganym do za- poznania się z treścią. Osiągnąć to można między innymi umieszczając kod skryptów w zewnętrznych plikach, od- wołujący się do elementów strony, zamiast wstawiania go bezpośrednio w strukturę strony, w miejscach w których ma działać.

Więcej na ten temat przeczytać można między innymi na tych stronach:
http://www.alistapart.com/articles/behavioralseparation
http://www.onlinetools.org/articles/unobtrusivejavascript/

Progressive enchancement

W dużym skrócie, stopniowe ulepszanie (zwane często zamiennie „łaskawą degradacją”) strony polega na rozdzieleniu warstw treści, prezentacji i dodatkowej funk- cjonalności. Dzięki temu można dostarczać treść do nawet najprostszych przeglądarek lub urządzeń, oferując doda- tkowe, bardziej rozbudowane elementy wizualne i skrypty programom i urządzeniom, które potrafią z nich skorzys- tać. Niezbędne minimum jest zawsze dostępne, a wszelkie usprawnienia i udogodnienia nie wpływają na osiągalność treści. Zwykle stosowane jest podejście w drugim kierunku – najpierw projektuje się stronę ze wszystkimi „bajerami”. Dopiero w czasie jej budowy poszczególne elementy kon- struowane są tak, żeby zapewnić dostęp do nich nawet starszym lub prostszym klientom.

Więcej na ten temat przeczytać można między innymi na poniższej stronie:
http://www.alistapart.com/articles/understandingprogressiveenhancement/



E-learning - projekt badawczy
Aplikacja badawcza na potrzeby pracy magisterskiej

Projekt i realizacja
Flash, PHP

e-learn-desc

http://www.e-learn.waw.pl

[...]

3.1. Cel badania

Celem badania, będącego częścią tej pracy, jest po- równanie wpływu różnych metod przedstawiania informacji na efektywność szkolenia. Analiza różnic między szkole- niem zawierającym wyłącznie treść w postaci tekstowej, a szkoleniami zawierającymi elementy multimedialne w po- staci ilustracji i animacji, ma wskazać najbardziej efektywną metodę wizualizacji informacji w szkoleniach e-learning- owych. Wynikiem przeprowadzonej analizy ma być także przedstawienie zalet i wad stosowania wybranych metod wizualizacji informacji.

[...]

3.5.2. Konstrukcja aplikacji

Program składa się z trzech głównych komponentów: szkolenia wybieranego losowo spośród trzech wersji, testu sprawdzającego stopień przyswojenia wiedzy oraz kończą- cej badanie ankiety (Ryc. 3.5.). Pierwotnie każdy kompo- nent miał być stworzony oddzielnie i dynamicznie importo- wany do głównego programu, między innymi ze względu na różnice w rozmiarach poszczególnych wersji szkolenia. W trakcie pracy nad aplikacją pojawiły się jednak pewne trudności natury technicznej. Chodziło między innymi o za- pewnienie losowości wyboru wersji szkolenia, poprawne zbieranie wyników (i możliwość jednoznacznej ich identy- fikacji), a także o poprawne działanie interfejsu. Wcześniej opracowane przeze mnie rozwiązania okazały się nieade- kwatne i ostatecznie konieczne stało się ładowanie całej aplikacji jeszcze przed rozpoczęciem badania.

Dzięki włączeniu wszystkich komponentów do jedne- go programu, łatwa stała się jednoznaczna identyfikacja każdego rozpoczęcia badania: jedynym sposobem pono- wnego podejścia do badania jest załadowanie całej aplikacji z serwera, a ID badania oraz adres IP uczestnika badania zapisywane są do bazy dopiero po uruchomieniu aplikacji. Konieczność ponownego załadowania całej aplikacji ma też za zadanie zniechęcić do wylosowania metodą prób i błędów szkolenia w wersji bardziej odpowiadającej badanemu.

Nie ma też możliwości swobodnego przemieszczania się między poszczególnymi etapami badania. Zakończenie każdego etapu powoduje zapisane zebranych w nim danych i przejście do następnego, bez możliwości powrotu. Jedy- nym sposobem dotarcia do wcześniejszych etapów jest po- nowne załadowanie i uruchomienie całej aplikacji.

[...]

3.6.1. Interfejs

Interfejs aplikacji jest jednolity i wspólny dla wszyst- kich wersji szkolenia i wszystkich etapów badania. Między innymi ze względu na specyfikę samego badania, interfejs utrzymany jest w stonowanej, jasnoszarej kolorystyce z wyraźnymi, ale nie odwracającymi uwagi elementami nawigacyjnymi – interfejs ma spełniać jedynie funkcje użytkowe, tak żeby nie wpływać bezpośrednio na odbiór elementów graficznych, zawartych w treści szkolenia.


Więcej o tym projekcie przeczytać można w mojej pracy magisterskiej.



Dolina Liwca u schyłku starożytności
Strona wystawy z Państwowego Muzeum Archeologicznego w Warszawie

Projekt i realizacja
XHTML, CSS, PHP

liwiec-desc

http://www.pmawystawy.pl/liwiec/index.php

Lekka strona informacyjna czasowej wystawy Do- lina Liwca u schyłku starożytności z Państwowego Mu- zeum Archeologicznego w Warszawie. Proste kształty, kolorystyka nawiązująca do oprawy plastycznej wystawy, czysto, elegancko i przejrzyście. Do wyświetlania galerii wykorzystałem ShadowBox.



Scanbio
Strona firmowa



Projekt graficzny

scanbio-desc

Projekt estetyczny, nawiązujący do ekologii...

...i w kolorystyce logo firmy Scandinavian Bio Hea- ting Systems. Żywe kolory, detale takie jak wstęga menu rozciągająca się na całą szerokość strony, delikatny wzór w tle i grafiki określające układ treści – wszystko to składa się na ciepły i przyjazny wizerunek, idealny dla firmy zaj- mującej się ekologicznymi systemami grzewczymi. Menu wzbogacone zostało dodatkowo o ilustracje towarzyszące każdej z kategorii i podkategorii, ułatwiając tym samym nawigację. Strona w tej wersji funkcjonowała w latach 2006–2007.



Xortec
Strona firmowa



Projekt graficzny

xortec-desc

Szef...

...pomimo początkowych obiekcji, dał się przeko- nać do pozaokrąglanego layoutu. Dzięki temu strona wy- różniała się wśród konkurencji, często korzystającej wtedy ze stylu nieodmiennie kojarzącego się z szablonami ofero- wanymi przez kilka popularnych serwisów. Nie byłem za- dowolony z psujących symetrię menu i kolumny sklepu internetowego, ale tego już nie udało mi się przewalczyć.



Łukasz Orbitowski
Oficjalna strona autora



Projekt graficzny

orbitowski-desc

Strona Orbita...

...powstawała powoli. Momentami komunikacja z Łukaszem i wydobycie konkretów było nieco kłopotliwe. Strona powstała kiedy bezpowrotnie i nieodwołalnie padł serwer zawierający poprzednią. Łukasz Orbitowski tworzył wtedy w miejskich klimatach, mniej więcej w tym czasie powstawał „Święty Wrocław” i osadzone w blokowisko- wych realiach opowiadania.

Dostałem od niego pakiet zdjęć, w tym zakapturzo- nego autora we własnej osobie, które stały się podstawą projektu graficznego. Do tego dołożyłem jeszcze logo, narysowane według wskazówek Łukasza i strona ruszyła. Oczywiście nie obeszło się bez zgrzytania zębami z po- wodu IE6, ale po dokonaniu pewnych kompromisów, udało nam się sprawić, że użytkownicy tej przeglądarki mogli się cieszyć stroną prawie tak samo ładną i funkcjonalną.

Po około półtora roku owocnego korzystania z tego layoutu Łukasz zdecydował o kolejnej aktualizacji, lepiej oddającej klimat jego bieżącej twórczości.



SOS PZMOT
Strona firmowa



Wstępny projekt graficzny

sospzmot-ind-desc


sospzmot-biz-desc

Projekt graficzny...

...przygotowany w kilka dni do oferty dla SOS PZMOT. Wymagania obejmowały m.in. wykorzystanie ze- stawu czterech kolorów: czarnego, białego, żółtego i czer- wonego oraz elegancki i mocno biznesowy styl z dwiema częściami – dla klientów indywidualnych i dla klientów biz- nesowych.

W oparciu o te wytyczne opracowałem dwie wersje layoutu – ciemna dla klientów indywidualnych i jasna dla klientów biznesowych, połączone wspólnym wyglądem górnego menu i „okienek” zawierających elementy strony. Obie wersje uzupełnione zostały między innymi o zaproje- ktowane specjalnie dla tej strony ikonki.

Pozostało trochę miejsca na poprawki i ulepszenia, na przykład lepsze wykorzystanie kolorów do zwrócenia uwagi na wybrane elementy strony (w tym nawigacji), czy poprawienie czytelności ikonek. Projekt pozostał jednak we wstępnej postaci, ponieważ na tym etapie wybrana została oferta innej firmy.



Anna Kołyga
Portfolio charakteryzatorki wizażystki

Realizacja według dostarczonego projektu
PHP, HTML, CSS

kolyga-desc


kolyga-desc2

Tak miała wyglądać...

...strona zrobiona dla znajomej kolegi – chodziło o szybkie wykonanie prostego portfolio dla wizażystki, zgo- dnie z dostarczonym projektem graficznym. Dostałem wszystkie niezbędne materiały i całość powstała w kilka wieczorów. Jedyne co nie podobało mi się w samym pro- jekcie, to wielkość elementów nawigacyjnych, ale był to drobiazg, dający się w każdej chwili poprawić kilkoma zmianami w arkuszu CSS.



Wydawnictwa PMA
Strona wydawnictw Państwowego Muzeum Archeologicznego

Projekt i realizacja
PHP, HTML, Javascript

wydawnictwa-pma-desc

http://www.pma.pl/wydawnictwa/

Ten projekt był ciekawym i pouczającym doświad- czeniem (takim z kategorii „obyś żył w ciekawych cza- sach”) - nie miałem zielonego pojęcia jaka jest konfi- guracja serwera, jakie działają na nim usługi ani nawet czy działa na nim baza danych (to długa historia). Jedyne czego udało się dowiedzieć na pewno, to że jest na nim PHP. W efekcie strona, która powinna być oparta o bazę danych, zbudowana została z wykorzystaniem złożonego systemu include'ów w PHP i dziesiątek statycznych plików z treścią, tak żeby uratować możliwość wprowadzania zmian do elementów określających wygląd strony nieza- leżnie od właściwej zawartości. Nie jest to rozwiązanie idealne, wymaga nieco gimnastyki przy dodawaniu no- wych kategorii i podstron, ale działa.

Wygląd całości jest natomiast pochodną braku projektu graficznego, walki z Internet Explorerem w wersji 6 oraz umieszczenia wszystkich elementów strony w pli- kach. Ponieważ nie miałem projektu graficznego, do któ- rego dostarczenia zobowiązał się zleceniodawca, musia- łem poczynić pewne odgórne założenia co do układu strony. Z powodu rozjeżdżania się w Internet Explorerze tekstu (na stronie zrobione zostały ręczne przenoszenia) i gubiącymi się w nim divami, zdecydowałem się na wyko- rzystanie tabel do budowy layoutu. Większość treści strony i tak przedstawiona jest w postaci tabelarycznej, więc nie była to wielka cena za ujednolicenie wyglądu we wszystkich przeglądarkach.

W końcu przyszedł czas wstawiania strony na serwer, a nadal nie dostałem projektu graficznego. Usta- wiony na sztywno w tabelach layout nie dał dużego pola manewru, a jego zupełna zmiana pociągnęłaby za sobą konieczność edytowania od nowa kilkuset plików – między innymi ze względu na ręcznie wstawiane przenoszenia wyrazów – więc efekt końcowy jest kompromisem łączą- cym chęci z możliwościami.

Zbudowanie całej strony kosztowało wiele pracy. Musiałem zająć się nie tylko kodem, ale także obejść brak bazy danych, wstawić w tabele ponad setkę spisów treści i przygotować wszystkie elementy graficzne, łącznie ze skanowaniem okładek i ilustracji, jeśli nie były dostępne ich elektroniczne wersje.

Mimo trudności projekt mogę zaliczyć do udanych – strona dobrze spełnia swoje zadanie.



Łukasz Andrzejowski
Poprzednie portfolio


Projekt i realizacja
PHP, HTML, CSS, Javascript

portfolio-old-desc

Tak wygląda moje poprzednie portfolio.

Podczas prac nad wyglądem strony firmowej dla Xortec przygotowałem kilka projektów z użyciem przezro- czystości. W zrealizowanym projekcie nie zostały wyko- rzystane, jednak pomysł spodobał mi się na tyle, że przy- gotowałem w oparciu o niego własne portfolio.

Do rozwiązania było niestety kilka problemów po- wodowanych przez przeglądarkę Internet Explorer 6. IE6 nie potrafi wyświetlać poprawnie 24-bitowych plików .png z kanałem przezroczystości (w których zapisane były wszy- stkie przezroczyste elementy graficzne strony) - tu z po- mocą przyszedł JavaScript i skrypt pngfix. Ponadto IE6 ma dość luźny stosunek do standardów: inaczej interpretuje marginesy, inaczej wyświetla czcionki, nie radzi sobie z „pływającymi” elementami… Tutaj można zobaczyć jak poprawna z punktu widzenia standardów strona wyglądała w IE6 i w Operze. Po pewnych zmaganiach z CSS'em (poskładanie zaokrąglonych rogów bez użycia tabelek wymagało trochę gimnastyki) przygotowałem dwukolum- nowy szablon strony z elementami nawigacyjnymi, zawie- rającymi przezroczystą grafikę. Do wykorzystania na nor- malnej stronie całość wymagałaby gruntownej przebu- dowy, ale w moim portfolio rozwiązanie to sprawdziło się całkiem nieźle.



Łukasz Andrzejowski
Strona domowa



Projekt graficzny: Skórka do b2evo

info-desc

Tak kiedyś wyglądała moja strona.

To była mała strona domowa, stworzona na po- trzeby mojej bieżącej działalności w różnych miejscach. Szukałem dla niej prostego CMS'a, pozwalającego wsta- wiać i obsługiwać wielojęzyczną treść. Strona miała być prosta, więc z góry odrzuciłem rozwiązania typu Joomla czy Drupal - zbyt rozbudowane, jak na moje potrzeby. Bezcelowe było stawianie skomplikowanego systemu, tylko po to, żeby wyrzucić z niego większość zbędnych komponentów, zniechęcała mnie także perspektywa grzebania się w kodzie w celu zbudowania własnej skórki. Ostatecznie mój wybór padł na b2evolution.net - CMS po- dobny do WordPress'a, oferujący jednak w podstawowej wersji kilka interesujących rozwiązań, między innymi możliwość zbudowania kilku wersji językowych strony. Dodatkowym atutem była możliwość łatwego dostoso- wania do moich potrzeb jednej ze skórek dostępnych na stronie b2evolution. Niestety b2evo z czasem zaczęło co- raz bardziej odstawać od WordPress'a, kolejne aktuali- zacje nie miały już dobrych polskich tłumaczeń, a przygo- towanie własnego przekraczało moje ówczesne możli- wości (ponad 13.000 stringów do zidentyfikowania i prze- tłumaczenia). Po niecałych dwóch latach strona w tej po- staci przestała funkcjonować.


Banery


Banery...
...na potrzeby serwisu Arena Gier


Projekty i wykonanie
jpg i animowany gif

Od góry:

  • Zapomniane fronty - felieton poświęcony grom kom- puterowym prezentującym mało znane fronty pierw- szej i drugiej Wojny Światowej
  • Dwie części poradnika do Half-Life 2
  • Wywiad z twórcami (niedoszłej) polskiej gry RPG "Burżuazja: Perła Pustkowi"
  • Felieton prezentujący wchodzącą na polski rynek kon- solę Xbox360
  • Felieton porównujący konsole najnowszej generacji
  • Baner promujący konkurs na łamach Areny Gier




Grafiki i animacje 3D


Cista - rekonstrukcja komputerowa
Rekonstrukcja wykonana na potrzeby wystawy stałej w Państwowym Muzeum Archeologicznym w Warszawie

Cinema4D, Photoshop, Premiere

To piękne żeberkowane wiadro (cista), wykonane z płatów blachy brązowej z wytłaczanymi zdobieniami, powstało w V wieku p.n.e. na obszarze kultury wschodniohalsztackiej.

Naczynie znalezione około 1870 roku w Wielkopolsce, w okolicach Słupcy, następnie przechowywane w Warszawie, ule- gło niemal całkowietemu zniszczeniu w czasie II Wojny Światowej.

Rekonstrukcji komputerowej dokonano na podstawie za- chowanych zdjęć i opisów oraz ocalałych resztek cisty.

Model i rendery wykonane zostały w Cinema4D, tekstura metalu powstała na bazie zdjęcia blachy brązowej. Sporo było zabawy z ornamentami, długo zastanawiałem się jaką przyjąć metodę ich odwzorowania. Po licznych próbach okazało się, że jedynym sposobem jest wykorzystanie bump-mapy. Próby ręcz- nego rzeźbienia ornamentu nawet nie podejmowałem, ze wzglę- du na jego złożoność, natomiast displacement-mapping odpadał ze względu na ograniczenia sprzętowe – znajdujący się w mojej dyspozycji komputer zwyczajnie nie poradził sobie z tak złożo- nym, generowanym na potrzeby renderu modelem. W rezultacie ścianki cisty to jedna bryła pokryta teksturą odpowiedzialną za wygląd metali oraz osobną, ręcznie rysowaną teksturą nałożoną na kanale nierówności, odpowiedzialną za imitowanie wytłoczeń ornamentu.

Efekt mojej pracy obejrzeć można na wystawie stałej w Państwowym Muzeum Archeologicznym w Warszawie.



Wyposażenie wojownika - rekonstrukcja komputerowa
Produkt mojej pracy inżynierskiej


Cinema4D, Photoshop, Premiere

Rekonstrukcja zniszczonych, pochodzących sprzed wielu stuleci przedmiotów jest bardzo ciekawym zagadnieniem. Możli- wość odtworzenia ich wyglądu, na podstawie zachowanych do dziś fragmentów, pozwala nie tylko poznać lepiej ich budowę i funkcję, ale także dowiedzieć się czegoś o ludziach, którzy je stworzyli, w pewnym sensie dotknąć historii. Wykorzystanie nowoczesnej technologii do stworzenia trójwymiarowej wizualizacji rekonstrukcji zabytków jest niezwykle ciekawym przedsięwzięciem.

Połączenie wiedzy archeologów z możliwościami drzemią- cymi we komputerowym oprogramowaniu graficznym ma szcze- gólny urok, wyrażony przez kontrast wielu wieków historii ze współczesną wiedzą i osiągnięciami informatyki. Formuła filmu przypominającego produkcje popularnonaukowe narzuciła się niejako sama, bowiem jest to wyśmienity sposób na dokładne pokazanie efektów rekonstrukcji, a jednocześnie zainteresowanie widza, który nie orientuje się w tematyce archeologicznej.

Więcej przeczytać można w mojej pracy inżynierskiej: "Rekonstrukcja zabytków archeologicznych z wykorzystaniem grafiki komputerowej w środowisku 3D".

Tutaj dodać mogę jeszcze, że film, będący produktem tej pracy, stał się później podstawą dla animacji znajdującej się na wystawie czasowej „Czas i rzeka. Dolina Liwca u schyłku staro- żytności” w Państwowym Muzeum Archeologicznym w Warsza- wie (http://www.pmawystawy.pl/liwiec/index.php).

Oba obejrzeć można poniżej - pierwszy to film z pracy dyplomowej, drugi to animacja prezentowana na wystawie.



Stacja kosmiczna
Projekt zaliczeniowy



Cinema4D, Photoshop, Premiere

Przygotowałem kiedyś grafikę przedstawiającą kawałek nocnego nieba – z gwiazdami, galaktykami i mgławicami. Miałem rozmach, więc grafika wielka wyszła, w wysokiej rozdzielczości. Zacząłem się zastanawiać do czego mógłbym ją wykorzystać. Tak trafiła do kosmicznej animacji.

Bawiłem się animacjami w Cinema4D, ucząc się przy okazji wykorzystywanych przy tym narzędzi. Chciałem odwzo- rować na scenie (choćby w przybliżeniu) fragment układu sło- necznego, z ciałami niebieskimi w proporcjonalnych rozmiarach, umieścić w nim orbitującą wokół planety stację kosmiczną i kilka statków kosmicznych, lecących na spotkanie Obcych, chowa- jących się za księżycem.

Cóż... W zasadzie się udało, a w trakcie dowiedziałem się, jak Cinema 4D R9 radzi sobie z ekstremalnymi rozmiarami obiektów i sceny. Kiedy skończyła się skala (to znaczy rozmiary i odległości pomiędzy obiektami na scenie były tak duże, że znikały niektóre obiekty i nie dało się już poruszać kamerą w sposób inny niż ręczne wpisywanie jej parametrów) musiałem nieco zrewidować swoje plany i przyjąć skalę bliższą loga- rytmicznej. Większość wykorzystanych tekstur pochodzi z plu- ginu Simbiont – niestety wsparcie dla niego zakończyło się już kilka lat temu.

Kilka ujęć z tego filmu nadal cieszy oko...



Inne prace
Wybór różnych projektów 3D



Cinema4D, Photoshop

  • Soczek
    Ćwiczenie w renderowaniu szkła i materiałów z rozpro- szeniem podpowierzchniowym w Cinema 4D. A tak napra- wdę zabawa materiałami zainspirowana obserwacją soku pomarańczowego postawionego tuż pod lampką biurkową. Na końcowy obrazek składają się 3 rendery z różnymi ustawieniami materiałów, złożone w jeden w Photoshopie.
  • Pióro
    Model na podstawie pojedynczego zdjęcia, wyrendero- wany z wykorzystaniem oświetlenia globalnego, ze świat- łem generowanym przez kilka prostokątnych brył rozmie- szczonych wokół sceny.
  • Myszka
    Model na podstawie pojedynczego zdjęcia, wyrendero- wany z wykorzystaniem oświetlenia globalnego genero- wanego z obrazu HDR nałożonego na „niebo” sceny.
  • Żelek
    Próba uzyskania materiału żelkopodobnego i przy okazji zabawa kaustyką w materiale innym niż szkło.
  • Stworek
    Efekt zabawy pluginem do generowania trawy w Cinema 4D R9.

Pixelart

Moje pixelartowe prace znaleźć można w serwisie pixeljoint Pixeljoint



Prace różne


Wizytówki




Photoshop, Illustrator, InDesign


Forum Literackie Mirriel




Photoshop

Grafiki przygotowane na Prima Aprilis dla forum lite- rackiego Mirriel.net
Skórka forum, nazwana przez ekipę "Sheep vision" powstała w oparciu o skórkę "Green Vision".

Kłódkę, widoczną na drugim obrazku, narysowałem w całości w Photoshopie, w oparciu o zdjęcie.



Sztucce
Zamiana nowego w stare



Photoshop, GIMP

Bardzo lubię ten projekt. Klient poprosił o przygotowanie obrazów z różnymi, dostarczonymi przez siebie sztućcami. Haczyk tkwił w tym, że miały wyglądać jak stare, ołówkowe szki- ce lub rysunki na przypadkowym kawałku papieru. Pierwszy ob- razek to przykład całej grafiki, kolejne to już zbliżenia na sztućce – tło we wszystkich grafikach jest takie samo: skan okładki kilku- dziesięcioletniej książki, mocno podretuszowany żeby pozbyć się tytułu i dopasować całość do wymaganych rozmiarów. Dwa ostatnie obrazki pokazują zdjęcia sztućców, później przerobio- nych na widoczne powyżej grafiki.



Logo
Projekty wykorzystane i niewykorzystane



Photoshop

Fragmasters

Logo przygotowane dla klanu grającego w Team Fortress 2. Dolny obrazek to wersja przystosowana do wykorzystania jako ikonka użytkownika w platformie Steam.


Nautilus - projekty logo nagrody

Projekty logo nagrody czytelników, związanej z miesięcznikiem Science Fiction, Fantasy i Horror, przy- gotowane jeszcze za czasów, kiedy zajmował się nią Ro- bert J. Szmidt. Niestety nie zostały wykorzystane, bo w międzyczasie zmienił się wydawca czasopisma i spra- wa projektu graficznego upadła.


SFFiH SETI@Home team logo

Początkowo żart, ostatecznie oficjalne logo zespołu SFFiH biorącego udział w projekcie Seti@Home. Nieco inspirowane plakietkami misji NASA (styl i czcionka), oczy- wiście zawierające odwołanie do niepowstrzymanej siły fantastycznego fandomu (Borg Cube).


Game Hunters

Projekt logo dla serwisu GameHunters. Znajdujące się w tle zera i jedynki to binarny zapis nazwy serwisu, taki nerdowy dowcip ;).


Arena Gier i Magazyn Areny Gier

Projekt logo dla serwisu Arena Gier (do layoutu, który z różnych przyczyn nigdy nie został wykorzystany) oraz logo Magazynu Areny Gier, używane w wydawanym przez kilka miesięcy zinie.



Sygnaturki
Forumowe podpisy obrazkowe



Photoshop

Forume sygnaturki przygotowane dla ekipy i uży- tkowników zaprzyjaźnionego serwisu. Część z nich to pre- tekst do przećwiczenia GIMPa. Niby działa, ale jakoś nadal go nie lubię.



Fotostory
Krótka opowieść o zbójcerzu lubiącym owieczki


Photoshop

Żart dla Rafała Dębskiego - nowego redaktora na- czelnego czasopisma Science Fiction Fantasy i Horror. Początkowo miała to być krótka hisotryjka, na 2 godziny pracy, ale w trakcie jakoś się całość rozrosła, tak że za- miast jednego, produkcja tego cuda zajęła kilka wieczo- rów. Ubaw był na koniec, więc było warto ;).



Inne prace
Wybór mniejszych projektów



Photoshop

  • Kartka wielkanocna
    Narysowana w całości w Photoshopie
  • Tapeta Opera – zaczęła jako moje zgłoszenie do ogłoszonego przez Operę konkursu na tło szybkiego wybierania, skończyła jako tapeta.
    Można pobrać ją stąd
  • Oko
    Ołówkowy szkic przeniesiony z kartki w kratkę do postaci cyfrowej, od wielu lat służy mi jako awatar
  • Grafiki tła strony dla Magazynu Areny Gier
    Pierwsza w formacie ekranowym, dwie pozostałe to lewa i prawa strona w formacie A4. Jakość składu i łamania w pierwszym numerze woła o pomstę do nieba, kolejne ustrzegły się chociaż co poważniej- szych błędów. Biorąc jednak pod uwagę całkowicie hobbystyczny i wielu aspektach amatorski charakter MAGa, jestem nawet zadowolony z efektu końco- wego, z grafiki zwłaszcza ;)

    Z czterema numerami MAGa, które udało nam się wydać, zapoznać możesz się po kliknięciu w ten link. Tak, pierwszy numer to porażka :P