Newsletter

Grupa MagazynyInternetowe

Online: 904

Wyszukiwarka

Grafika

Tworzymy baner witryny

Tworzymy baner witryny Wkomponowanie kolażu fotografii w baner i włączenie go w projekt strony uczyni ją bardziej profesjonalną i przyciągnie wzrok.

Co będziemy tworzyć? Kompletną stronę WWW z banerem witryny, który będzie działać w oknach przeglądarki o różnej szerokości. Grafika po prawej stronie banera pojawia się lub znika w miarę zmieniania szerokości okna przeglądarki. Jeśli będzie ono bardzo szerokie, baner przejdzie w kolor tła.

Craig Grannell

1 2 3 4 »

W kwestii poradników dotyczących grafiki okazuje się, że czytelnicy chętnie poznaliby przepis na utworzenie banera witryny składającego się z kilku zdjęć, płynnie przechodzących jedno w drugie.

Porada eksperta: najlepsza jest prostota

Gdy tworzymy baner, nie komplikujmy zbytnio spraw. Choć możemy operować bezpośrednio na maskach warstw, banery w których przesadzono ze skomplikowanymi krawędziami maski mają tendencję do rozpraszania uwagi.

Nie próbujmy też umieszczać zbyt wielu zdjęć na małej przestrzeni - wybierzmy te, które najlepiej komponują się z tematem serwisu i współgrają z dużymi fragmentami pozostałych zdjęć. To zapewni dobry wygląd, nie przygniecie użytkownika i nie odciągnie jego uwagi od treści strony.

Jak się przekonamy, technika uzyskania takiego efektu jest stosunkowo prosta. Pierwsza część naszego poradnika poświęcona jest użyciu cyfrowych zdjęć jako materiału wyjściowego do konstrukcji banera dla naszej fikcyjnej strony, która nazwaliśmy DuckStalking.com.

Zamiast zostawiać czytelników sam na sam ze zdjęciem, w drugiej części poradnika pokazaliśmy, jak tworzyć podstawowa stronę WWW i dokument CSS w Dreamweaverze. Nasza stronę zaopatrzyliśmy w płynny projekt. Innymi słowy trzeba będzie dopasowywać się do wielkości okna przeglądarki. Ponieważ. baner witryny, który utworzymy jest szeroki na 1500 pikseli, powinien sprawdzić się na większości monitorów.

Natomiast w przypadku, gdy ktoś korzystający z naprawdę dużego wyświetlacza powiększy okno przeglądarki, baner po prostu delikatnie przejdzie w kolor tła.

Krok 1. Przygotowanie

Tworzymy baner witryny Tworzymy folder projektu na naszym dysku twardym i wgrywamy tam cztery pliki ze zdjęciami. Następnie tworzymy nowy dokument w Photoshopie, który ma 1500 pikseli szerokości i 100 pikseli wysokości. Zachowujemy go w folderze jako plik o nazwie np. masthead.psd.

Krok 2. Tworzymy prowadnice

Tworzymy baner witryny Większość użytkowników nadal pracuje na monitorach o rozdzielczości 1024 x 768, natomiast 1/4 używa 800 x 600. Z tego powodu tworzymy parę pionowych prowadnic, aby określić pozycje odpowiadające tym dwóm rozdzielczościom (około 740 i 960 pikseli, licząc od lewej).

Krok 3. Dodajemy czcionki

Tworzymy baner witryny Korzystamy z narzędzia Text tool, by dodać podstawowe logo dla strony wykorzystujące nazwę domeny. W przykładzie skorzystaliśmy z pogrubionej czcionki szeryfowej (Adobe Caslon Pro o wielkości 50 punktów i 30 punktów dla ".com") w kolorze czarnym.

Można też skorzystać z jakiejkolwiek czcionki podobnej do użytej. Tekst można edytować dopóki jest rastrem, tak więc zarówno czcionkę, jak i jej wielkość zawsze możemy zmienić później.

6 czerwca 2007
1 2 3 4 »

Powiązane publikacje

GIMP 2.4.6

GIMP 2.4.6

GIMP 2.4.4

GIMP 2.4.4

 
Skomentuj
ten artykuł

Komentarzy: 1

Kod obrazkowy
(Kliknij, aby zmienić)
 
Przejdż do tego postu na forum Thursday, 28.01.2010 13:37Przemek

Twoje Telefony

Zobacz wszystkie komentarze »

Autor

Craig Grannell

Artykuły tego autora:

Pozostałe publikacje

25 lat webdesignu - jak zmieniały się trendy

25 lat webdesignu - jak zmieniały się trendy

Z webdesignem jest jak ze sztuką. Po epoce czystych i estetycznych stron przychodzi moda na te pstrokate. Powtarza się to jeszcze raz, ale szybciej. Tak w dużym skrócie wygląda historia projektowania stron.

Newsletter

Jesli chcesz być na bieżąco z tym co się dzieje na stronie magazynu INTERNET Maker zapisz się do naszego newslettera.