Dawka Creatyny #11 - inspiracje

To kolejna część inspiracji zebranych z kilkunastu galerii, po to by doładować swoją wyobraźnię i zainspirować się do stworzenia czegoś nowego, jeśli chcesz podzielić się jakimś ciekawym znaleziskiem możesz to zrobić wysyłając do mnie emaila lub poprzez Twittera.

Darmowe szablony Wordpress: Ecosmo

Ecosmo to darmowy szablon w stylu magazynu, zaprojektowany dla serwisów o modzie czy plotkach, jednak tak na prawdę ten theme można wykorzystać do każdego bloga czy strony, który chciałby działać właśnie w formie magazynu czy internetowej gazety.


Ten szablon posiada takie udogodnienia jak:

• Stronę opcji
• Dwie kolumny
• Miniaturki postów
• Promowane posty
• Zarządzanie banerami 125x125
• System Gravatar w komentarzach
• Widgets Ready
• Optymalizacja pod SEO
• Kompatybilność z najpopularniejszymi przeglądarkami

Szablon można wykorzystywać zarówno niekomercyjnie jak i komercyjnie.

demo
 
download

W stylu lat 80. - Przyszłość w stylu retro

Lata 80. to ciekawy przykład designu w którym niewyraźny obraz, wyblakłe kolory i rozmyte krawędzie odgrywają główną rolę, a wszystko to w jakości formatu video.

Poniżej zamieszczam kilka tutoriali jak stworzyć ten niepowtarzalny i jeden z moich ulubionych klimatów w swoich projektach, ponadto znajdziecie tutaj kilka inspiracji, w tym parę ciekawych klipów.

Tutoriale

Katarina Stefanović - Obrazy malowane obiektywem

Katarina Stefanović pochodzi z Serbii, a jej zdjęcia przypominają surrealistyczne obrazy pełne kolorów i dziwnych kształtów - niczym z świata baśni. Panoramy autorki zapierają dech w piersiach i długo nie pozwalają o sobie zapomnieć, jednocześnie przypominają jak piękna może być natura.

Jak ulepszyć zdjęcie w formacie RAW

Dziś, po świątecznej przerwie, przedstawię krótki tutorial, jak ze zwykłego zdjęcia wycisnąć jak najwięcej i nadać mu profesjonalny wygląd.

To czego potrzebujemy to aparat umożliwiający zapisywanie obrazów w formacie RAW i programu do obróbki, ja skorzystałem z pluginu do Photoshopa Camera Raw, który można ściągnąć z oficjalnej strony Adobe.

Krok pierwszy

Otwieramy zdjęcie w Photoshopie, wcześniej instalując plugin Camera Raw.

Krok drugi

Zmieniamy parametry zdjęcia,na 16 bitowe kanały i dpi na 300, w przypadku gdy będziemy drukować to zdjęcie, jeśli nie, można zostawić standardowe ustawienia.

Krok trzeci

W zakładce Presets wczytujemy wcześniej pobrany ten plik XMP. Oczywiście nie są to uniwersalne ustawienia, dlatego należy dopasować je do swojego zdjęcia. Dodatkowo w zakładce Split Toning możemy poprzestawiać suwaki i ustawić wybrany odcień zdjęcia.

Krok czwarty

Otwieramy zdjęcie w Photoshopie poprzez kliknięcie Open Image.

Krok piąty

Usuwamy niedoskonałości narzędziem Patch Tool (najlepiej na zduplikowanej warstwie), w tym przypadku w tych miejscach zaznaczonych na zdjęciu.

Krok szósty

Duplikujemy warstwę i nakładamy filtr High Pass (Filter/Other/High Pass) tak jak pokazano poniżej.

Krok siódmy

Nadajemy warstwie z High Pass tryb mieszania Overlay. Pozwala to uzyskać efekt bardziej wyostrzonego zdjęcia. Tak wygląda efekt końcowy:



Camera Raw

plik XMP

Szybki szpil #6 - Sprites CSS - Jak to zrobić? (i to szybciej!)

Co to jest Sprite?

W CSS sprite to jeden plik graficzny, który jest wykorzystywany jako tło do różnych elementów. Odpowiedni obraz, dla danego elementu np przycisku, nagłówka itp. otrzymujemy poprzez odpowiednie ustawienie wymiarów widocznego obszaru (width,height,padding) oraz pozycji tła (background-position).

Po co stosować sprite?

Przede wszystkim dla wygody, czy wyobrażasz sobie wysyłanie na serwer kilkudziesięciu plików i potem ustawianie ich ścieżek w css? To wszystko może być ciężkie do ogarnięcia przy skomplikowanej grafice strony składającej się z wielu elementów.
Drugim równie ważnym powodem jest szybkość wczytywania, jeden nawet plik wczyta się szybciej i niż kilkanaście mniejszych, dodatkowo w jednej chwili pojawią nam się wszystkie elementy, nie będzie widoczne jak po kolei wczytują się poszczególne pliki.

Jak zrobić pierwszy plik sprites ?

Wystarczy umieścić wszystkie obrazki w jednym pliku w programie graficznym, np. Photoshopie, zapisać je bez tła w pliku .png i umieścić na serwerze.
Można teraz zacząć zabawę w CSS:

.button1 {background: url("http://adres.pl/sprites.png") repeat scroll 0 0 transparent;
width:200px;
height:50px;
display:block;
text-indent:-9999px;   /* ukrycie tekstu */}

.button2 {background: url("http://adres.pl/sprites.png") repeat scroll 0 -52px transparent;
width:200px;
height:50px;
display:block;
text-indent:-9999px;   /* ukrycie tekstu */}

html:

<a class="button1" href=#">przycisk1</a>

<a class="button2" href="#">przycisk2</a>

Dzięki temu uzyskamy dwa przyciski, tło drugiego jest przesunięte w stosunku do pierwszego o 52px w dół i przyjmie tło, które chcieliśmy mu nadać.

Jak to zrobić szybciej?

Przy dużej ilości spritów, męczące i nie ergonomiczne jest do każdej klasy wklejanie tej samej linijki kodu z background. Dlatego skorzystamy z dwóch klas, w której jedna będzie określała sam background a druga jego pozycję.

.sprite { background:url("http://strona.pl/sprites.png");}

.button1 {
background-position:0 0;
width:200px;
height:50px;
display:block;
text-indent:-9999px;   /* ukrycie tekstu */}

.button2 {
background-position:0 -52px;
width:200px;
height:50px;
display:block;
text-indent:-9999px;   /* ukrycie tekstu */}

Dzięki temu zabiegowi kod staje się bardziej przejrzysty i jeżeli zachodzi potrzeba zmiany adresy sprita, zamieniamy tylko jedną linijkę.

Przykładowe pliki sprites

Tak wygląda przykładowy obrazek, który jest spritem, obrazek ten pochodzi z serwisu themeforest.net




inny przykład ze strony photobucket.com