Od czasu pojawienia się wersji CS6 firma Adobe zaimplementowała w programie Photoshop bardzo przydatną opcję do układania i opracowywania projektów internetowych. Operacja jest bardzo łatwe a przede wszystkim szybko. Dzięki aplikacji będziemy mogli generować kaskadowe arkusze stylów, przyjmując jako odniesienie nasz kształt i warstwy tekstu. Procedura jest tak prosta, jak opracowanie naszej makiety, skopiowanie wersji kodu naszych elementów i wklejenie jej na naszym arkuszu.
Jest to bardzo dobra opcja, zwłaszcza że pozwala nam obserwować ewolucję naszego projektu pod względem wizualnym iw czasie rzeczywistym. Oto kilka wskazówek dotyczących korzystania z tej opcji i uzyskiwania pliku maksymalna wydajność:
Staraj się być precyzyjny
Aby uzyskać profesjonalny efekt, warto wziąć pod uwagę wymiary i proporcje swojej witryny. Ustaw wartości Szerokość i Wysokość projektowanego szablonu i zastosuj je do swojej makiety. Podczas kopiowania kodu CSS umieścimy każdy element, biorąc za odniesienie odległość w pikselach między każdym elementem a krawędziami płótna. Weź również pod uwagę rozmiary i przyczyny hierarchiczne, które zamierzasz uwzględnić w swoim projekcie, w tym wyrównanie każdego elementu i odstępy między nimi, aby zapewnić maksymalną czytelność dla użytkowników.
Korzystanie z przewodników i reguł interfejsu pomoże Ci zbudować zgrabny, czysty szablon z idealnie dopasowanymi wszystkimi elementami.
Skonfiguruj wszystkie cechy każdego elementu
Możliwość kopiowania kodu CSS daje nam możliwość bardzo precyzyjnego zaprojektowania naszej strony poprzez wykorzystanie warstw formularza i tekstu. Zawartość każdej warstwy zostanie skopiowana do Schowka i możemy ją szybko wkleić do naszego arkusza stylów. Z warstw kształtów przechwyć wartości następujących ustawień:
- tamaño
- Stanowisko
- Kolor obrysu
- Kolor wypełnienia (w tym gradienty)
- Cień
Z warstw tekstowych możemy pobrać następujące wartości:
- Rodzina czcionek
- Rozmiar czcionki
- Grubość czcionki
- Wysokość linii
- Podkreślony
- Przekreślenie
- Napisany u góry
- Indeks
- Wyrównanie tekstu
Pamiętaj o tym i ustaw każdą z tych wartości, aby zapewnić styl, którego szukasz.
Pracuj z grupami warstw
Ta funkcja tłumaczy naszą pracę zorganizowaną według dwóch typów zajęć, po jednej dla każdej grupy, która łączy warstwy kształtów lub tekstu, oraz klasy dla każdej warstwy jednego z tych typów. Każda klasa grupy będzie reprezentować nadrzędny element DIV, który będzie zawierał podrzędne elementy DIV i który będzie odpowiadał warstwom wstawionym w każdej grupie. W ten sposób górne i lewe wartości kontenerów podrzędnych zostaną ustawione w odniesieniu do kontenera nadrzędnego. Należy pamiętać, że ta opcja nie jest dostępna w przypadku obiektów inteligentnych i nie będzie miała zastosowania do więcej niż jednej warstwy jednocześnie, chyba że zostaną zgrupowane.
Kroki do konwersji
Po wykonaniu makiety, spersonalizowaniu każdego elementu i pogrupowaniu ich według grup, wystarczy wykonać następujące czynności:
- Przejdź do panelu warstw i wybierz jedną z dwóch opcji:
- Kliknij prawym przyciskiem myszy kształt lub warstwę tekstową albo grupę warstw i wybierz Skopiuj CSS w menu kontekstowym.
- Zaznacz kształty, warstwę tekstową lub grupę warstw, a następnie wybierz opcję Skopiuj CSS w menu panelu Warstwy.
-
Wklej kod do dokumentu arkusza stylów i zastosuj go na swoich stronach za pomocą html5.
