Aktualny układ powinien wyglądać mniej więcej tak:
Do tej pory wstawiono logo i górne menu. Następnie można przejść do większej grafiki, która ma być widoczna bezpośrednio poniżej nawigacji.
Zasada tworzenia nowych warstw została już opisana w poprzednim samouczku. Chciałbym więc teraz pokazać wam coś innego. Bezpośrednio poniżej górnego menu powinno zostać wyświetlone większe zdjęcie. Wynik będzie wyglądał następująco:
Zdjęcie powinno - gdy je wstawisz - być w odpowiednich wymiarach. W razie potrzeby je przetwórz. Następnie otwórz Plik>Otwórz i wybierz obraz. Wybrany obraz zostanie następnie wyświetlony w nowym oknie. Naciśnij Ctrl+C, aby skopiować obraz do schowka. Aby teraz dodać obraz jako nową warstwę, która ma również odpowiedni rozmiar, uruchom Edycja>Wklej jako>Nowa warstwa. Nowa warstwa automatycznie przyjmie wymiary obrazu i będzie można ją łatwo przesunąć we właściwe miejsce. W ten sposób można teraz przenieść wszystkie zdjęcia, które chcesz wstawić, do układu i umieścić je tam.
Następnie wstaw teksty w miejscach, gdzie mają być faktycznie widoczne. Podczas fazy projektowej zazwyczaj używa się tzw. tekstu zastępczego.
Zanim jednak zasiądziecie i zaczniecie pisać "test, test, test" polecam stronę http://www.blindtextgenerator.de/.
Na tej stronie można automatycznie generować różne rodzaje tekstu zastępczego. Teksty te można następnie łatwo skopiować i wkleić do projektu projektu. W tym kontekście polecam również stronę http://dummyimage.com/. Na tej stronie można generować obrazy zastępcze o dowolnych rozmiarach. Te obrazy zastępcze można wykorzystać jako zastępcze dla jeszcze nieutworzonych oryginalnych grafik w projekcie.
Problem z przezroczystymi warstwami
Gdy wstawiasz teksty, składają się one z kilku elementów, takich jak nagłówki, akapity itp. Dlatego powinieneś grupować powiązane teksty w oddzielne warstwy. Dzięki temu będziesz mógł w łatwy sposób przesuwać te teksty w całości. Aby to zrobić, wywołaj Warstwy>Nowa warstwa. Następnie nadaj warstwie odpowiednie wymiary i ewentualnie kolor tła. Zazwyczaj jednak będziesz potrzebować przezroczystego tła. Problem pojawi się jednak wtedy, gdy będziesz musiał przesuwać przezroczyste warstwy. Często zdarza się, że trafia się na podrzędną warstwę. Ten problem można łatwo obejść. Kluczowe są ustawienia w oknie Widok narzędzi. Aktywuj w niej narzędzie Przesuwanie. Następnie w dolnej części okna aktywuj opcję Przesuń aktywną warstwę.
W ten sposób można przesuwać przezroczyste warstwy w dowolne miejsce.
Wycinanie elementów
Gdy jesteś zadowolony z układu, czas przejść do praktycznej implementacji na stronie internetowej w formie HTML. W tej chwili przychodzi na to Wycinanie, czyli dzielenie układu na poszczególne części, które zostaną później ponownie złożone za pomocą HTML i CSS. Musisz podzielić wszystkie elementy, które będą później wyświetlane osobno. Wyjątkiem są oczywiście wszystkie elementy graficzne, które i tak są dostępne osobno. Na początek pokażę ci, jak można wyciąć elementy. Narysuj dookoła elementu, który chcesz wyciąć, linie pomocnicze. Stanowią one ostateczne krawędzie obcięcia. Upewnij się, że są one odpowiednio ustawione.
Następnie zaznacz interesujący cię obszar i naciśnij kombinację klawiszy Ctrl+Shift+C. (Dotyczy to zarówno programu GIMP, jak i Photoshopa). Następnie utwórz nowy plik. W programie Photoshop od razu będzie miał on odpowiedni rozmiar. W GIMPie nie działa to niestety tak łatwo. Tutaj po prostu utwórz plik o odpowiednich wymiarach. Poprzez Ctrl+V wkleisz zawartość ze schowka.
Teraz przyda się Narzędzie do wycinania. Zaznacz nim obszar do wycięcia, a następnie naciśnij klawisz Enter. Zdjęcie będzie wtedy dopasowane do wybranego obszaru. Za pomocą Plik>Zapisz jako możesz zapisać obraz.
Dla wielu stron internetowych ważnym elementem stylizacyjnym są gradienty kolorów. Nawet na pokazywanym tu układzie jest taki gradient. Aby wyciąć gradient kolorów, wybierz wąski obszar odpowiedniego gradientu. Faktycznie wystarczy, jeśli ustalisz obszar o szerokości jednego piksela. Wysokość powinna odpowiadać rzeczywistej wysokości elementu. Za pomocą CSS możesz później zagwarantować, że ta grafika poziomo zostanie powtórzona tyle razy, ile to konieczne, aby cały element był wypełniony. Oczywiście możesz też użyć szerszego fragmentu obrazu. Jednakże to spowoduje obniżenie wydajności strony. Dlatego przy gradientach kolorów zaleca się użycie pikselowej szerokości.
Skopiuj obraz o szerokości jednego piksela za pomocą Ctrl+Shift+C i wklej go ponownie jako nowy obraz. Następnie zapisz nowy obraz, po uprzednim dostosowaniu go do odpowiedniego fragmentu.
To powinno wyjaśniać ogólną zasadę wycinania. Wycinasz więc wszystko, co ma zostać częścią strony internetowej z układu. Jeśli masz już pojedyncze elementy strony, które nie muszą być wycinane, to po prostu je używasz, bez dodatkowego wycinania.
