Tutoriale

Tutoriale, czyli łopatologiczny How To…

Element menu nawigacyjnego

1
4 years ago
by HalVa in

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

0
4 years ago
by HalVa in

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

Zalecenie dotyczące optymalizacji strony pod wyszukiwarki.

0
4 years ago
by HalVa in

Należy próbować osiągnąć pozycję nr 1 w wynikach wyszukiwania dla każdego ważnego słowa kluczowego, którego użytkownicy mogą chcieć poszukiwać. (Niestety, jest to wskazówka łatwa do wypowiedzenia, ale trudna do zrealizowania). Jeżeli nie uda się osiągnąć czołowego miejsca, drugie i trzecie jest oczywiście również dobre. Im niżej na liście tym mniejsze szanse na to, że strona zostanie zauważona, ale jeśli ma się wybór między miejscem 9 i 10., warto wybrać to drugie, gdyż zapewnia to nieco lepszą widoczność. W przypadku gdy nie ma się szans na osiągnięcie przyzwoitego miejsca dla zwykłego odnośnika wśród wyników wyszukiwania, należy poważnie rozważyć wykupienie odnośników sponsorowanych dla tychże słów kluczowych.

źródło: „Optymalizacja funkcjonalności serwisów internetowych”, J. Nielsen, H. Loranger

Efekt tekstu-ciastka polanego lukrem.

0
4 years ago
by HalVa in

Wideo tutorial, przedstawiający prosty i efektowny sposób na uzyskanie efektu tekstu-ciastka polanego lukrem.
Film ze względu na swoją długość (14:35) został podzielony na dwie części.
Część pierwsza pokazuje jak stwożyć tekst-ciastko:

Drugi zaś przedstawia sposób w jaki należy „polać” ten tekst lukrem:

Voila :-)

Kamil Winiszewski

Go to Top