Од доласка верзије ЦС6, Адобе је имплементирао у Пхотосхоп веома корисну опцију за распоред и развој веб дизајна. Операција је Веома лако и изнад свега брзо. Кроз апликацију ћемо моћи да генеришемо каскадне табеле стилова узимајући наш облик и слојеве текста као референцу. Процедура је једноставна као развој нашег модела, копирање верзије кода наших елемената и лепљење у наш лист.
То је веома добра опција посебно зато што нам омогућава да видимо еволуцију нашег дизајна у визуелном смислу иу реалном времену. У наставку вам остављам неколико савета за коришћење ове опције и добијање максималне перформансе:
Покушајте да будете прецизни
Да бисте добили професионални резултат, препоручује се да узмете у обзир мере и пропорције вашег сајта. Подесите вредности ширине и висине шаблона који дизајнирате и примените их на свој модел. Када копирате ЦСС код, ми ћемо поставити сваки елемент узимајући као референцу растојање у пикселима између сваког елемента и ивица платна. Такође узмите у обзир величине и хијерархијске односе које ћете укључити у свој дизајн, укључујући поравнање сваког елемента и размак између сваког од њих како бисте корисницима пружили максималну читљивост.
Коришћење водича и правила интерфејса ће вам помоћи да направите уредан, чист шаблон са свим његовим елементима савршено усклађеним.
Конфигуришите све карактеристике сваког елемента
Опција за копирање ЦСС кода нам даје могућност да дизајнирамо наш сајт са великом прецизношћу користећи слојеве облика и текста. Садржај сваког слоја ће бити копиран у међуспремник и можемо га брзо налепити у наш стилски лист. Из слојева облика, ухватите вредности следећих подешавања:
- Величина
- Позиција
- боја потеза
- Боја попуне (укључујући градијенте)
- Баци сенку
Из текстуалних слојева можемо ухватити следеће вредности:
- Породица фонтова
- Величина слова
- Тежина фонта
- Висина линија
- Подвучено
- Прецртавање
- Суперсцрипт
- Субсцрипт
- Поравнање текста
Имајте то на уму и поставите сваку од ових вредности да бисте пружили изглед који тражите.
Радите са групама слојева
Ова функција преводи наш рад организован по два типа класа, по једну за сваку групу која спаја слојеве облика или текста и једну класу за сваки слој једног од ових типова. Свака класа групе ће представљати родитељски елемент див који ће садржати подређене див елементе који ће одговарати слојевима уметнутим у сваку групу. На овај начин, горња и лева вредност секундарног контејнера ће бити постављене узимајући главни контејнер као референцу. Имајте на уму да ова опција није доступна са паметним објектима и да неће бити применљива на више од једног слоја истовремено осим ако нису груписани.
Кораци за конверзију
Када сте направили свој модел, персонализовали сте сваки елемент и груписали их у групе, мораћете само да пратите ове кораке:
- Идите на панел са слојевима и изаберите једну од ове две опције:
- Кликните десним тастером миша на облик или слој текста или групу слојева и изаберите Копирај ЦСС у контекстном менију.
- Изаберите слој облика или текста или групу слојева, а затим изаберите опцију Копирај ЦСС у менију панела Слојеви.
-
Налепите код у свој документ са стиловима и примените га на своје странице преко хтмл5.
