totaly fucken gamer…
Tutoriale
Tutoriale, czyli łopatologiczny How To…
DROPBOX – czyli łatwa wymiana plików.
lip 16th
Dopadłem ostatnio bardzo fajną aplikację internetową DROPBOX pozwalającą w MEGA prosty sposób współdzielić katalogi/pliki z innymi komputerami. Bardzo przydatne podczas wymiany zdjęć plików, mp3, filmów, itp. Program wykonuje kopię udostępnionego przez użytkownika katalogu na serwerze DROPBOX i udostępnia go innym userom wskazanym przez właściciela.
Poniżej zamieszczam instrukcję / tutorial wideo – jak zaisntalować i skonfigurować DROPBOX’a:
Enjoy responsibly
Google tapetuje – czyli nowości w wyszukiwarce (własne tła)
cze 10th
Google jak zwykle nie marnuje czasu, ciągle wprowadza jakieś ulepszenia, nowości. Jedną z nich jest możliwość ustawienia sobie swojego własnego tła dla strony wyszukiwania Google.
Jak to zrobić?
Wystarczy kliknąć w mały napis w lewym dolnym ekranie „zmień tło”:
W nowo otwartym oknie wybieramy sobie swoją własną tapetkę
Funkcja mało przydatna, ale na pewno bardzo przyjemna

Papa białe nudne google.pl
Przydatny Haczyk CSS na IE 8 i inne :)
mar 10th
Jeżeli ktoś ma problem z arkuszami CSS i zgodnością z IE proszę bardzo oto lek na całe zło
Ten zapis spowoduje iż element uaktywni się w IE 8 tylko w trybie zgodności:
.classnameOrElement{color /*\**/: blue\9}
Z kolei ten zapis spowoduje uaktywnienie się we wszystkich przeglądarchach IE:
.classnameOrElement {color: blue\9 }
Na zdrowie
Internet Explorer a CSS – przypadek list nieuporządkowanych
sie 17th
Internet Explorer w przeciwieństwie do innych przeglądarek nie interpretuje CSS „prawidłowo”. Użyłem słowa prawidłowo, bo jak wszyscy wiedzą Microsoft zaprogramował IE w taki sposób, że interpretuje on CSS na swój własny wypaczony sposób. Przykładem tego może być zachowanie IE w przypadku elementu <ul>, czyli listy nieuporządkowanej. Konkretnie, jeżeli będziemy chcieli zmienić domyślny wygląd elementu listy nieuporządkowanej poprzez dodanie atrybutu list-style-image w CSS w celu zdefiniowania graficznego znaku wypunktowania listy IE pokaże grafikę tylko kiedy elementy <li> nie będą miały dodanego atrybutu float (oblewanie). Wtedy znaki graficzne w IE nie będą wyświetlane. Aby rozwiązać ten problem należy użyć następującej sztuczki. Poniżej kod:
HTML
<ul>
<li id=”kontakt”><a href=#” target=”_self” title=”link1″>Link 1</a> </li>
<li id=”kontakt”><a href=#” target=”_self” title=”link1″>Link 1</a> </li>
<li id=”kontakt”><a href=#” target=”_self” title=”link1″>Link 1</a> </li></ul>
CSS
ul {
list-style-type: none
}
li {
height: 20px;
display: block;
background-image: url(../gfx/link-bullet.jpg);
background-repeat: no-repeat;
padding-left: 20px;
float: right;
text-align: left;
margin-right: 20px;}
Wyjaśnienie, zamiast atrybutu list-style-image który nie jest poprawnie obsługiwany przez IE użyłem background-image i wskazałem plik graficzny. Zadałem CSS aby wyświetlał <li> jako blok i zadałem mu margines z lewej strony o szerokości pliku graficznego co pozwoliło odsunąć napis z nad grafiki.
Google Sitemaps – mapy witryn, czym są?
kwi 18th
Mapy witryn XML – nazywane zazwyczaj Mapami witryn przez duże M – pozwalają użytkownikom przekazywać Google informacje o ich witrynach. W tym artykule omówimy właśnie ten typ map witryn.
W najprostszych słowach, Mapa witryny jest listą stron w Twojej witrynie. Tworząc i wysyłając Mapę witryny, możesz mieć pewność, że Google posiada wszystkie informacje o Twojej witrynie, włącznie z adresami URL, których nie udałoby się wykryć w normalnym procesie przemierzania witryny.
Mapy witryny są szczególnie przydatne, gdy:
- Twoja witryna zawiera treść generowaną dynamicznie;
- Twoja witryna zawiera strony, które nie są łatwo wykrywane przez Googlebota w trakcie przemierzania – np. strony zawierające aplikację AJAX lub Flash;
- Twoja witryna jest nowa i prowadzi do niej niewiele linków; (Googlebot przemierza sieć, śledząc linki między stronami, więc jeżeli Twoja witryna nie jest dobrze połączona z innymi, możemy mieć trudności z jej odnalezieniem.)
- Twoja witryna zawiera pokaźne archiwum stron z treścią, które nie są ze sobą dobrze połączone lub nie są w ogóle połączone.
Korzystając z Mapy witryny możesz także wysyłać do Google dodatkowe informacje o swoich stronach, jak:
- częstotliwość zmian na stronach w Twojej witrynie (np. strona Twojego produktu może być aktualizowana codziennie, ale strona O mnie tylko co kilka miesięcy);
- datę ostatniej modyfikacji każdej strony;
- względną ważność stron w Twojej witrynie. Twoja strona główna może mieć wskaźnik ważności 1,0, strony kategorii mogą mieć wskaźnik ważności 0,8, natomiast poszczególne wpisy w blogu lub konkretne strony produktów mogą mieć wskaźnik ważności na poziomie 0,5). Ranking ważności wskazuje jedynie wagę danego adresu URL w odniesieniu do innych adresów URL w Twojej witrynie i nie ma żadnego wpływu na pozycję Twoich stron w rankingu wyników wyszukiwania.
Mapy witryn wysyłają do Google dodatkowe informacje o Twojej witrynie, uzupełniając nasze zwykłe metody indeksowania internetu. Mamy nadzieję, że przyspieszy to indeksowanie Twojej witryny, ale nie gwarantujemy, że adresy URL z Twojej Mapy witryny zostaną dodane do indeksu Google. Witryny nie są w żaden sposób karane za wysyłanie Map witryn.
źródło: Pomoc – narzędzia dla webmasterów Google.
Mapy witryny, czyli jak ugryźć Google Sitemaps.
kwi 18th
Na pewno każdy, kto tworzył, lub posiada stronę internetową, chciałby aby jego witryna znajdowała się jak najwyżej w wynikach wyszukiwania Google. Większość z Was z pewnością słyszała o Google Sitemaps. Czym to jest? Z czym to się je? Otóż, Google Sitemap to nic innego jak plik XML, będący mapą naszej strony internetowej, pozwala on poprawnie indeksować Google naszą witrynę. Jak stworzyć takową mapę? Nic prostszego! Wystarczy wejść na stronę internetową www.xml-sitemaps.com i tam stworzyć w bardzo prosty sposób sitemap naszej strony. Poniżej pokazuję krok po kroku jak tego dokonać.
Otwieramy www.xml-sitemaps.com w przeglądarce internetowej. W polu opisanym jako Starting URL wpisujemy adres naszej strony, resztę parametrów ustawiamy jak poniżej:
Change frequency – „Daily – dziennie”
Last modification – „Use server’s response”
Priority – 0,5
Następnie klikamy przycisk start i czekamy. Po zakończeniu tworzenia mapy witryny, wyświetlają nam się linki do pobrania naszego pliku XML. Nas interesuje wersja Download un-compressed XML Sitemap. Ściągamy ją i wysyłamy na serwer na którym umieszczona jest nasza strona internetowa.
Teraz należy powiadomić Google o tym, iż takowa mapa znajduje się na naszym serwerze, aby tego dokonać, musimy udać się na stronę Google Narzędzia dla webmasterów. Jeżeli ktoś nie ma tam konta musi je założyć, i później dodać adres swojej strony www do pulpitu nawigacyjnego, szczegóły w innym tutorialu.
Aby dodać mapę do witryny, należy kliknąć w link „dodaj” i na następnej stronie wybrać opcję „Dodaj mapę ogólnej strony internetowej”, pokaże nam się u dołu kilka nowych pól. W ostatnim musimy wskazać adres URL naszej mapy, w moim przypadku jest to „http://www.h-d-s.art.pl/sitemap.xml”
Po dopisaniu adresu pliku „sitemap.xml„ mapa naszej strony jest dodana i oczekuje na weryfikację. Tutaj kończy się wszystko co mogliśmy zrobić, teraz pozostało czekać tylko na zatwierdzenie stworzonej przez Nas mapy.
Fotomontaż i trudne odcięcia.
kwi 18th
Jeżeli ktokolwiek z Was bawił się kiedyś w tzn. foto manipulację, a mówiąc prościej w fotomontaże, na pewno spotkał się z częstym problemem jakim jest odcinanie osoby/obiektu od tła. Jest to zadanie wymagające nie lada wprawy. Aby uzyskać realistyczny efekt trzeba naprawdę się postarać i poświęcić na to dużo czasu. Jest jednak kilka technik, które mogą nam w takich ciężkich momentach znacznie ułatwić pracę, oto jedna z nich.
Otwieramy zdjęcie w Adobe Photoshop CS2
Kopiujemy warstwę „Tło” poprzez kliknięcie na nią w okienku warstw prawym przyciskiem i wybór komendy „Powiel warstwę” lub kombinację klawiszy Ctrl+J.
Teraz musimy usunąć z nowo utworzonej warstwy kolor. Wybieramy opcję „Usuń kolor” z menu Obrazek-> Dopasuj -> Usuń kolor
Następnie zaznaczamy cały obszar roboczy kombinacją klawiszy „Ctrl+A” i kopiujemy go do schowka „Ctrl+C”. Możemy naszą czarno-białą warstwę usunąć, lub ukryć (uczynić ją niewidoczną). Czas zająć się warstwą „Tło”, musimy teraz przekształcić ją w zwykłą warstwę, aby to zrobić klikamy na nią dwukrotnie lewym przyciskiem myszy w okienku warstw. Pojawi nam sie okno nadania nazwy naszej nowej warstwie. Wpisujemy tam „Dziecko”.
Nadszedł czas aby warstwie „Dziecko” nadać „Maskę warstwy”. W tym celu klikamy ikonę maski w menu warstw. Jest ona zaznaczona czerwonym kółkiem na poniższym obrazku. Można to również zrobić, poprzez menu Warstwa -> Maska warstwy -> Odkryj wszystko.
Wchodzimy w zakładkę „Kanały” (Jeżeli ta zakładka jest nie aktywna, można ją aktywować poprzez menu Okno). Zaznaczamy kanał „Dziecko maska” i wklejamy czarno-białą wersję naszej jako maskę warstwy „Dziecko”. Zaznaczamy z powrotem kanał RGB (uwidaczniamy go), i „chowamy kanał „Dziecko maska”.
Wracamy do zakładki „Warstwy” , jak widać nasze zdjęcie zrobiło się bardzo przezroczyste. Teraz należy wyregulować naszą maskę tak aby odcinała jak najlepiej tło, zachowując jak najdokładniej kontury dziecka. W tym celu zaznaczamy nasza maskę (klikamy na nią lewym przyciskiem myszy). Wybieramy opcję dostosowywania jasności i kontrastu(Obrazek -> Dopasuj -> Jasność/Kontrast), ustawiamy kontrast na +100, a jasność ma +10. Przy takich wartościach najlepiej zachowamy dziecko i pozbędziemy się tła.
Nasze zdjęcie powoli nabiera kształtów, w tym momencie wystarczy dopieścić szczegóły. Wybieramy narzędzie „Pędzel” i zamalowujemy kolorem czarnym to czego ma nie być widać. W tym wypadku będą to czarne pozostałości na krawędzi odciętego dziecka. Białym kolorem natomiast zamalowujemy te miejsca, które mają być widoczne. W tym wypadku oczy i usta dziecka, które „zniknęły” podczas dostosowywania maski. Do tego celu najlepiej użyć standardowego pędzla miękkiego (Krycie i Przepływ 100%).
Uwaga: należy zwracać uwagę żeby w trakcie pracy nie pomylić się i nie zacząć malować po warstwie właściwej!
Po sprawnym odcięciu krawędzi, można zabrać się za podkładanie tła. Ja w tym celu użyłem zdjęcia nocnego nieba na tle miasta. Aby podłożyć tło należy otworzyć w Adobe Photoshop CS2 zdjęcie które ma być tłem dla naszego montażu. Zaznaczyć całość, skopiować do schowka i wkleić w naszym projekcie. Jeżeli nasze nowe tło pojawiło się nad dzieckiem, wtedy trzeba je przeciągnąć pod warstwę dziecka w menu „Wartswy”. Teraz pozostało już dopasować oba zdjęcia do siebie i odpowiednio wykadrować.
Zdjęcie po nałożeniu kilku dodatkowych efektów.Objaśnienie zasady działania:
W przypadku kontrastowych zdjęć ciemnych, często nocnych bardzo łatwo jest uzyskać maskę obiektów oświetlonych poprzez usunięcie koloru ze zdjęcia i podwyższenie jego kontrastu, co powoduje że zdjęcie, a właściwie skopiowana warstwa staje się bardzo kontrastowa i ostra na krawędziach. Dzięki temu nadaje się ona użycia jako maski, co zastosowaliśmy w tym tutorialu. Pozwoliło nam to łatwo i szybko odciąć dziecko od ciemnego tła.
Do pobrania: trudneOdciecia.psd
Tajemnicze kolorowe oczy…
kwi 12th
Widzieliście kiedyś, zdjęcia lub filmy w których oczy postaci mieniły się w rożnych kolorach? Takie zdjęcia są bardzo efektowne i robią duże wrażenie na oglądających je ludziach.
Jeżeli chcielibyście się dowiedzieć w jaki sposób można taki efekt uzyskać na własnych fotografiach, zapraszam do przeczytania poniższego tutoriala
Zaczynamy!
Otwieramy nasze zdjęcie w programie Adobe Photoshop CS2

Następnie tworzymy nową warstwę (Ctrl+Shift+N) i nazywamy ją np. „kolor oczu”.

Teraz kiedy mamy zaznaczoną warstwę „kolor oczu”, używając narzędzia Zaznaczenie eliptyczne (M), zaznaczamy kształt oka.

Wybieramy narzędzie Gradient (G) znajdujące się pod przyciskiem Wiadro z farbą, i wchodzimy w edycję gradientu. Wybieramy, lub tworzymy gradient odpowiadający nam kolorystycznie i wybieramy wypełnienie radialne.

Wypełniamy obszar zaznaczenia na warstwie „kolor oczu”.

Teraz wchodzimy do menu warstw i ustawiamy następujące parametry dla warstwy „kolor oczu”:
Mieszanie warstw: Nakładka
Krycie 10%
Efekt powinien być podobny jak na obrazku poniżej.

Następnie, zaznaczamy warstwę „kolor oczu” ponownie, i wybieramy z menu Warstwa / Maska warstwy / Odkryj wszystko. Wybieramy narzędzie Pędzel (B), ustawiamy dość miękki rodzaj pędzla i kolor narzędzia czarny. Następnie zamalowujemy obszary które powinny być zakryte na obrazku.

Efekt powinien przypominać ten z powyższego obrazka. Powtarzamy czynności dla drugiego oka.
Voila

Kamil Winiszewski
Element menu nawigacyjnego
kwi 12th
Efektowne i czytelne menu nawigacyjne to jedno z wielu rzeczy jakie wpływają na ogólny wygląd strony. Niebanalny wygląd tego elementu na pewno poprawi wygląd każdej strony www. Jak wykonać profesjonalnie wyglądające menu przedstawiam w poniższym tutorialu.
Zaczynamy!
W programie Photoshop CS2 tworzymy nowy dokument o wymiarach:
Szerokość: 150 piks
Wysokość: 15 piks
Rozdzielczość: 72 dpi
Kolor tła: czarny

Narzędziem Zaznaczenie eliptyczne (M) zaznaczamy elipsę pokrywającą około połowę górnej części obrazka.Tworzymy nową warstwę (Shift+CTRL+N) i na niej narzędziem Wiadro z farbą (G) wypełniamy zaznaczony obszar kolorem białym.

Na nowo utworzonej warstwie, tworzymy maskę warstwy z menu Warstwa/Maska warstwy/Odkryj wszystko. Wybieramy narzędzie Gradient (G), znajdujący się pod narzędziem Wiadro z farbą. Wybieramy gradient prosty czarno-biały i wypełniamy od góry do dołu białego pola.

Odznaczany obrazek (Ctrl+D) i zaznaczamy warstwę z elipsą. Wybieramy filtr z menu Filtr/Rozmycie/Rozmycie gaussowskie, ustawiamy Promień rozmycia: 0,9.

Wybieramy narzędzie Tekst (T) i wpisujemy dowolną treść, w tym przypadku jest to Aktualności. Wybieramy narzędzie Zaznaczenie prostokątne (M). Tworzymy nową warstwę (Shift+CTRL+N) i na niej zaznaczamy prostokąt po prawej stronie.


Wypełniamy kolorem białym zaznaczenie narzędziem Wiadro z farbą (G).

Ustawiamy Krycie: 25% nowo utworzonej warstwy.

Voila:-)
![]()
Kamil Winiszewski
Żólta karteczka typu Z-Z
kwi 12th
Na pewno widzieliście w internecie strony internetowe, na których ważne informacje wyróżnione były w oryginalny sposób. W biurze, domu jednym z takich metod wyróżniania ważnych treści jest opisywanie małych żółtych karteczek i przyklejanie je np. nad monitorem. Można zastosować taką metodę również na stronie internetowej! W jaki sposób stworzyć taką karteczkę? O tym w poniższym tutorialu
Zaczynamy!
W programie Photoshop CS2 tworzymy nowy dokument o formacie A4.

Za pomocą narzędzia Prostokąt (U) rysujemy prostokąt w kształcie karteczki Z-Z. Następnie wchodzimy w Styl warstwy dwukrotne kliknięcie na warstwę w menu Warstwy) i tam ustalamy:
Nałożenie koloru: #fcffc8
Obrys: #dfe2b4, krycie 100% i wielkość 1px

Kopiujemy aktywną warstwę (CTRL+J) i przekształcamy do żądanego kształtu (CTRL+T) i opcja Zniekształć takiego jaki widzimy na obrazku poniżej.

Nakładamy w Stylu warstwy Gradient prosty i ukrywamy spodnią warstwę.

Kopiujemy aktywną warstwę (CTRL+J), wybieramy narzędzie Lasso wielokątne (L) i zaznaczamy prawy dolny róg naszej karteczki. Rasteryzujemy warstwę aktywną i usuwamy zawartość zaznaczenia.

Przekształcamy warstwę wierzchnią i rasteryzujemy ją.

Za pomocą narzędzia Lasso wielokątne (L) zaznaczamy znów prawy dolny róg mniejszej karteczki i usuwamy go (efekt powinien przypominać ten z orazka poniżej). Wchodzimy w styl warstwy i ustawiamy gradient tak, aby przypominał ten z poniższego obrazka, tą samą czynność powtarzamy dla drugiej warstwy. Efekt powinien przypominać zawinięty dolny prawy róg karteczki. Grupujemy obie warstwy jako Obiekt inteligenty i kopiujemy.

Wchodzimy w styl spodniego Obiektu inteligentnego i ustawiamy:
Nałożenie koloru: #000000 (czerń)
Następnie rozmywamy Obiekt inteligenty i przekształcamy w taki sposób, aby efekt cienia jaki tworzy był jak najbardziej realistyczny (cień powinien być lekko widoczny tylko pod „zawinięciem” karteczki).
Teraz musimy tylko dostosować wielkość naszej karteczki do potrzebnego nam rozmiaru, zapisać w żądanym formacie i Voila

plik PSD: smallSheet.psd
Kamil Winiszewski












Najnowsze komentarze