Ta strona zawiera porady na temat jak stworzyć optymalne tło dla elastycznego układu. Obraz tła jest przesyłany przez kreator motywu.
Informacje
Oto kilka szczegółów na temat elastycznego układu i kilka przykładów jak strona wiki zachowuje się na różnych rozdzielczościach:
- Na mniejszych ekranach, jakich jak w iPad'ach z ich szerokością ekranu 1024px, elastyczny układ powinien automatycznie spowodować, że tło będzie całkowicie przykrywało pole zawartości, także kolor tła nie będzie widoczny.
- Na większych ekranach, tło powinno być widoczne w polu zawartości powyżej 1030px.
- Kiedy ekran ma pomiędzy 1030px a 1600px szerokości, wtedy tło powinno mieć 170px po obu stronach pola zawartości.
- Pole zawartości przestaje się rozszerzać, gdy osiągnie maksymalną szerokość 1600px. Jeśli ekran jest wystarczająco duży, aby powiększyć rozmiar okna przeglądarki powyżej 1920px, tło powinno być nadal widoczne.
Jak to możliwe, że obraz w tle, który ma być widoczny na wszystkich rozdzielczościach posiada wgrany tylko jeden plik? Obraz jest podzielony na pół, i powierzchnia (w większości pokryta przez pole zawartości) jest wypełniona kolorem, który jest wybierany w Kreatorze motywu. Kolor będzie również widoczny poza krawędzią tła obrazu, na dole i po bokach, na bardzo dużych ekranach.
Oto przykłady obrazów tła Centrum Społeczności w różnych rozmiarach:
Screenshot w "szerokości 1600px", pokazuje, że pole zawartości jest rozciągnięte do maksimum, 1600px. Obie połówki tła powinny być automatycznie podzielone i regulować się tak, że zawsze będą wyświetlona po obu stronach.
- Notatka: Jeśli nie chcesz, aby obraz tła się rozdzielał, należy przesłać obraz, który posiada co najmniej 2000px szerokości, w Kreatorze motywy należy również zaznaczyć opcję "nie dziel", która po przesłaniu powinna być dostępna. Pozwala ona pozostać tłu w jednym kawałku, bez względu na rozmiar pola zawartości.
Podczas tworzenia tła, dostosowanie się do wszystkich rozdzielczości może wydawać się wyzwaniem, ale nie martw się. Mamy kilka porad, które mogą Ci pomóc.
Tworzenie tła
Aby stworzyć jak najlepszą skórkę, warto jest skorzystać z programów, które pozwalają na edycję zdjęć, takie jak Photoshop, GIMP lub Paint.
Tutaj jest szablon tła używany na Centrum Społeczności:
Pięć rzeczy, o których należy pamiętać przy tworzeniu obrazu:
- Tło: Kolorowe balony tworzą kreatywny aspekt obrazu tła znany jako skórka.
- Mieszanie koloru: Dół i boki skórki powinny się mieszać (przy użyciu narzędzia gradientu w programie do edycji obrazu), w taki sposób, że kolor tła powinien się komponować z obrazem tła.
- Marginesy: Czerwone obszary po obu stronach pola zawartości. Te czerwone prostokąty pokazują część tła, które będzie widoczne przez większość czasu, aż pole zawartości wyniesie 1600px, wtedy rozszerzanie zatrzyma się.
- Pole zawartości: Półprzezroczysty prostokąt w środku szablonu, który jest zawartością strony. Domyślnie tło nie będzie widoczne na tym obszarze, jednak można dodać przezroczystość w Kreatorze motywu.
- Rozdzielająca linia: Żółta linia biegnąca w dół, znajdująca się na środku ekranu to miejsce, gdzie tło jest podzielone na pół i rozdziela się, aby dostosować się do wielkości przestrzeni zawartości. Kolor, który ma wypełniać tę przestrzeń można ustawić w Kreatorze motywu.
Korzystanie z tego szablonu może być pomocne, aby utworzyć własne tło dla swojej skórki! Jeśli chcesz, możesz pobrać szablon tła w formacie PSD, który może być użyty w programie Photoshop lub GIMP, za pośrednictwem poniższego linku:
{{#NewWindowLink:w:c:spolecznosc:Plik:Background_template.psd|Plik:Background template.psd}}
Kilka rad dla Kreatora motywu
- Ostateczny obraz przesłany do kreatora motywu nie może być większy niż 300 kilobajtów (KB). Być może należy obniżyć jakość obrazu podczas zapisu pliku, aby osiągnąć wymagany rozmiar.
- Szeroka mieszanka kolorów (aka gradient) na skórze, powinna płynnie przechodzić do koloru tła. Zobacz Pomoc:Kreator motywu/gradienty w celu uzyskania większej ilości informacji - jak stworzyć gradienty dla obrazu tła.
- Nie należy tworzyć przestrzeni zawartości za bardzo przezroczystej, ponieważ w ten nieraz trudniej odczytać zawartość.
- Tworząc skórkę, zawsze należy brać pod uwagę szeroki zakres możliwych rozdzielczości ekranu. Lepiej dostosować swoją skórkę pod różne rozdzielczości ekranu, dzięki czemu Twoja społeczność będzie szczęśliwsza.
- Obejrzyj tapety i obrazy w wyszukiwarce związane z Twoją wiki, aby zdobyć inspirację do stworzenia skórki dla Twojej Wiki.
- Zawsze staraj się używać Kreatora motywu, aby przesłać obraz tła lub zaprojektować skórkę dla swojej wiki. Tła dodane za pośrednictwem niestandardowego CSS mogą kłócić się z aktualizacjami FANDOMU i zwiększyć czas ładowania strony.
Zobacz również
- Przeczytaj więcej na temat Kreatora motywu
- Przeczytaj więcej na temat kolorów
- Przeczytaj jak edytować nawigację