Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Blog Generator CSS Sprites dla Photoshopa

Blog

Generator CSS Sprites dla Photoshopa

Kamila Romanowska 13 grudnia 2010 komentarze ()

Tagi:CSS Photoshop

CSS Sprites Technika CSS Sprites oraz korzyści z niej płynące są zapewne znane wszystkim. Pozwolę sobie tylko przypomnieć, że polega ona na łączeniu kilku mniejszych obrazków w jeden duży, do którego odnosimy się w naszym kodzie CSS poprzez atrybut background-position. Rozwiązanie takie pozwala na zmniejszenie liczby zapytań HTTP, dzięki czemu strona ładuje się szybciej. Przy dużej ilości obrazków, przygotowanie takiego zbiorczego pliku graficznego może okazać się czasochłonne, ale tutaj z pomocą przychodzi nam genialny plugin AtlasCSS, przygotowany specjalnie dla użytkowników Adobe Photoshop.

Plugin AtlasCSS można ściągnąć tutaj. Po rozpakowaniu pliki należy umieścić w katalogu "Adobe Photoshop/Presets/Scripts".

AtlasCSS Z paska narzędzi wybieramy "File/Scripts/AtlasCss".

AtlasCSS Wybieramy nasz folder z obrazkami. Zaznaczamy "Enable datafile export", aby wraz z plikiem graficznym został stworzony plik CSS. Mamy możliwość edycji kodu generowanego przez skrypt. Ustalamy wysokość i szerokość jednego obrazka i w zależności od tych wartości określana jest liczba obrazków do wygenerowania.

AtlasCSS Nowy plik graficzny zostanie wygenerowany na podstawie wszystkich obrazków znajdujących się we wskazanym przez nas katalogu. Możemy go jeszcze zmienić, np. usuwając pozostałą wolną przestrzeń.

AtlasCSS W katalogu z obrazkami utworzy się plik CSS zawierający pozycje i wielkość wszystkich dodanych plików graficznych. Klasy będą się składały z wpisanego przez nas prefiksu i nazwy odpowiedniego pliku graficznego.

Teraz wystarczy już tylko dodać do naszego pliku CSS kod wskazujący na nowo stworzony plik, np.

Kod: Zaznacz cały
.sprite-image {background-image: url(sprite.png);}

Więcej informacji na temat AtlasCSS można znaleźć na stronie arnaumarch.com.

Kamila Romanowska

Web Designer i Front-end Developer. Pasjonatka nowych technologii i standardów WWW, ze szczególnym uwzględnieniem CSS. Uwielbia dobry design, gadżety, produkty Apple i kawę.


Zobacz także

Komentarze



HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook