Как да конвертирате своя дизайн на Photoshop в CSS код за по-малко от минута

CSS-Photoshop

От пристигането на версията CS6, Adobe внедри във Photoshop много полезна опция за оформление и разработване на уеб дизайн. Операцията е много лесно и преди всичко бърз. Чрез приложението ще можем да генерираме каскадни таблици със стилове, като вземем за ориентир нашите форми и текстови слоеве. Процедурата е толкова проста, колкото разработването на макета ни, копирането на кодовата версия на нашите елементи и поставянето й на нашия лист.

Това е много добър вариант, особено защото ни позволява да видим развитието на нашия дизайн във визуално отношение и в реално време. Ето няколко съвета за използване на тази опция и получаване на максимална производителност:

Опитайте се да бъдете точни

За да получите професионален резултат, препоръчително е да вземете предвид измерванията и пропорциите на вашия сайт. Задайте стойностите Width и Heigh на шаблона, който проектирате, и ги приложете към вашия макет. Когато копирате CSS кода, ние ще поставим всеки елемент като отчитане на разстоянието в пиксели между всеки елемент и ръбовете на платното. Също така вземете предвид размерите и йерархичните причини, които ще включите във вашия дизайн, включително подравняването на всеки елемент и разстоянието между всеки от тях, за да осигурите максимална четливост на вашите потребители.

Използването на ръководства и правилата на интерфейса ще ви помогне да изградите изчистен и изчистен шаблон с перфектно подравнени всички негови елементи.

уеб-фотошоп

Конфигурирайте всички характеристики на всеки елемент

Опцията за копиране на CSS кода ни дава възможност да проектираме нашия сайт с голяма точност от използването на слоеве форма и текст. Съдържанието на всеки слой ще бъде копирано в клипборда и ние можем бързо да го поставим в нашата таблица със стилове. От слоевете с фигури уловете стойностите за следните настройки:

  • на размер
  • Позиция
  • Цвят на щриха
  • Цвят на запълване (включително градиенти)
  • Пуснете сянка

От текстовите слоеве можем да уловим следните стойности:

  • Шрифтово семейство
  • Размер на шрифта
  • Дебелина на шрифта
  • Височина на линията
  • Подчертано
  • зачертаване
  • Горен индекс
  • Индекс
  • Подравняване на текста

Имайте това предвид и задайте всяка от тези стойности, за да осигурите стила, който търсите.

Работете с групи слоеве

Тази функция превежда нашата работа, организирана от два типа клас, по един за всяка група, който обединява слоеве от фигури или текст и клас за всеки слой от един от тези типове. Всеки клас на група ще представлява родителски div елемент, който ще съдържа дъщерни div елементи, които ще съответстват на слоевете, вмъкнати във всяка група. По този начин горните и левите стойности на дъщерните контейнери ще бъдат зададени по отношение на родителския контейнер. Трябва да имате предвид, че тази опция не се предлага при интелигентни обекти и няма да бъде приложима за повече от един слой едновременно, освен ако не са групирани.

Стъпки за конвертиране

След като направите своя макет, сте персонализирали всеки елемент и сте ги групирали по групи, ще трябва само да изпълните следните стъпки:

 

  • Отидете до панела със слоевете и изберете една от тези две опции:
    • Щракнете с десния бутон върху слой с форма или текст или група слоеве и изберете Копирайте CSS в контекстното меню.
    • Изберете фигури или текстов слой или група от слоеве, след което изберете опцията Копирайте CSS в менюто на панела "Слоеве".
  • Поставете кода в документа на таблицата със стилове и го приложете към вашите страници чрез html5.

    CSS-Photoshop1

    CSS-Photoshop2


Съдържанието на статията се придържа към нашите принципи на редакторска етика. За да съобщите за грешка, щракнете върху тук.

Бъдете първите, които коментират

Оставете вашия коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

*

*

  1. Отговорен за данните: Мигел Анхел Гатон
  2. Предназначение на данните: Контрол на СПАМ, управление на коментари.
  3. Легитимация: Вашето съгласие
  4. Съобщаване на данните: Данните няма да бъдат съобщени на трети страни, освен по законово задължение.
  5. Съхранение на данни: База данни, хоствана от Occentus Networks (ЕС)
  6. Права: По всяко време можете да ограничите, възстановите и изтриете информацията си.