Grafika

Tworzymy baner witryny

Krok 10. Dodajemy końcowe zdjęcie

Otwieramy jeszcze jedną kopię jednego ze zdjęć (w przykładzie to pierwsze zdjęcie) do pliku masthead.psd. Użyjemy innego jego fragmentu, jak to pokazano, i dodamy maskę warstwy. Ten krok pokazuje jak pojedyncze zdjęcie może być wielokrotnie użyte, gdy widoczny jest tylko jego nieduży fragment.

Krok 11. Dodajemy zanikającą warstwę

Obecnie baner urywa się nagle. Tworzymy więc nową warstwę, znajdującą się nad pozostałymi, i wypełniamy ją kolorem (w przykładzie użyto #b5b299 przyp. red.). Używamy dodatkowej maski warstwy, by połączyć zdjęcia z poprzednich kroków w ten jeden kolor.

Krok 12. Zachowujemy i eksportujemy

Zapisujemy ponownie nasze zdjęcie w postaci pliku psd, aby móc wrócić i edytować go w razie potrzeby. Przechodzimy do File | Save for Web i po eksperymentujmy z różnymi ustawieniami JPEG, wybierając najlepszy kompromis między wielkością i jakością pliku (pamiętajmy, że plik będzie cache'owany)

Krok 13. Uruchamiamy DreamWeavera

Otwieramy i zapisujemy nowy, pusty dokument HTML i CSS w naszym folderze z projektem używając nazwy masthead.html i masthead.css. Klikamy przycisk Attach Style w panelu CSS Styles Sheet, aby podlinkować plik CSS do naszej strony.

Krok 14. Ustalamy strukturę strony

Klikamy przycisk Insert Div w dziale Common. W polu dialogowym w polu ID wpisujemy wrapper i klikamy OK. Zamieniamy domyślną zawartość na jeszcze jeden div, tym razem z ID masthead. Usuwamy domyślną zawartość.

Krok 15. Dodajemy treść strony

Ponownie klikamy Insert Div. Tym razem ustawiamy Insert na After tag a <div id="masthead">. Jako wartość ID powinniśmy wprowadzić content i zamienić domyślną zawartość div na nowy akapit z przykładową treścią. (Na stronie http://www.lipsum.com znajdziemy taką, jeśli nie mamy nic pod ręką.)

6 czerwca 2007

« 1 2 3 4 »

Powiązane publikacje

GIMP 2.4.6

GIMP 2.4.4

Skomentuj
ten artykuł

Komentarzy: 1

czwartek, 28.01.2010 13:37Przemek

Twoje Telefony

Zobacz wszystkie komentarze »

Autor

Craig Grannell

Artykuły tego autora:

» Projektuj z głową
[INTERNET Maker]
» Projektuj z głową odc. 2
[INTERNET Maker]
» Nawigacja to podstawa
[INTERNET Maker]
» Projektowanie na bazie siatki
[INTERNET Maker]
» Płynne szablony stron
[INTERNET Maker]

Pozostałe publikacje

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.

Polecamy:

Na skróty:

Nasze serwisy: