Перетворення дизайну з Photoshop в веб-сторінку за все за один клік - це не зовсім свіжа ідея. Як тільки з'явилися веб-дизайнери, з'явилася і ця ідея-мрія. Сьогодні ми хочемо розповісти вам про один інструменті, який цю саму мрію, можна сказати, виконує - поговоримо про CSS Hat.
CSS Hat відрізняється від інших додатків, які ви могли бачити раніше. Ця програма не є повноцінним WYSIWYG, спрямований на те, щоб ви могли створювати веб-сайти, не написавши і строчки коду. Ця програма скоріше спрямована на можливість швидкого створення CSS3-стилів для конкретних елементів, використовуючи процес, який був популярний з десяток років тому (а то і більше) прямо в Photoshop. Додаток чудове! Дійсно гарне. Варто того, щоб продовжити читання.
Зустрічайте CSS Hat
Давайте поговоримо про те, що ж таке CSS Hat, і чим цей додаток не є. Перш за все, це програма не працює окремо. Воно являє собою плагін для Photoshop. І це не один з громіздких масштабних плагінів для Photoshop, а всього лише маленька простенька панель, яка в більшості своїй заснована на тексті.
Це означає те, що курс навчання зовсім коротенький і, в принципі, якщо ви вмієте працювати в Photoshop, то цього плагіна для вас, можна сказати, як ніби не існує.
Хитрість, продумана в CSS Hat, полягає в можливості оглянути шар в Photoshop, проаналізувати його різні характеристики, а потім спробувати повторити ці характеристики за допомогою чистого коду CSS. Очевидно, що плагін не зможе продублювати все до останнього, але діапазон здібностей дуже вражає, і напевно відповість вашим вимогам. Давайте розглянемо деякі речі, з якими плагін може впоратися:
* Стилі шарів: тут, насправді, величезна перевага. Більшість стилів шарів в Photoshop можуть бути безпомилково перетворені в CSS (не всі, але багато). Деякі приклади підтримуваних стилів включають тіні, світіння, а також заливку градаціями.
* Закруглені кути: якщо ви малюєте векторну фігуру з закругленими кутами, в отриманому CSS-коді вони будуть реалізовані за допомогою параметра border-radius.
* Колір фону і рівень щільності відображення: залийте фігуру кольором, і він буде використаний в коді CSS.
* Стилізація тексту: не так швидко. Ймовірно, ця функція незабаром буде доопрацьована, але поки що вона підтримується не до кінця. Стилі шарів, заливка та інше все ж будуть працювати, але не з усіма параметрами, пов'язаними зі шрифтом.
Підказка: для того щоб відчути як це, використовувати Photoshop для генерації CSS-коду, ви можете скористатися безкоштовним веб-додатком Layer Styles. Звичайно його навряд чи можна порівняти з CSS Hat, але це цілком собі забавна альтернатива.
Але я на дух не переношу WYSIWYG!
Ми знаємо, що мало кому подобається Dreamweaver та інші додатки, які намагаються занизити важливість роботи з кодом при розробці веб-сайту. Ми теж не любимо все це. Ми розробляємо сайти власними руками, і насолоджуємося цим процесом. Тому не треба думати, що ми схиляємо вас до образу розробки веб-сайтів, який приведе вас до деградації.
CSS Hat не можна називати рятувальним кругом для тих, хто не любить писати код, і при цьому хоче створювати чудові веб-сайти. Якраз навпаки, CSS Hat - інструмент для кодерів. Якщо ви будете використовувати цей інструмент ефективно, то вам знадобляться сильні знання CSS: що можливо, як це зробити, і як різні параметри поводяться в різних браузерах.
Звичайно ж, CSS Hat може сильно допомогти вам у розробці коду, але в цілому, інструмент забезпечить вас всього лише маленьким шматочком величезного пазла під назвою веб-сайт. І тільки від вас залежить те, наскільки правильно ви цей шматочок розмістіть.
Так про що турбуватися? Гарне питання. Нам здається, що відповідь криється в незаперечному факті того, що CSS3, враховуючи всі можливості, надмірно громіздкий! Необхідно писати багато коду, щоб отримати навіть простенький результат, і якщо ви можете використовувати інструмент, який допоможе заощадити час, що витрачається на розробці коду, то чому б не зробити це?
Тут процес практично такий же, як якщо б ви розробляли просту кнопку в Photoshop. Почнемо з того, що намалюємо блок із закругленими кутами 10 пікселів по радіусу.
Далі ми додаємо накладення градації, починаючи від кольору # 009ced і закінчуючи # 0065bd.
Тепер нам потрібно зробити внутрішню тінь для того, щоб верхня частина кнопки трохи виділялася.
Давайте тут трохи прискоримо процес і перейдемо відразу до готової кнопці. В цілому, ми додали затемнене внутрішнє світіння (виглядає більше як внутрішня тінь), контур товщиною в 1 піксель, а також тінь. Враховуйте, що хоча пояснення і займають якийсь час, при роботі в Photoshop у вас піде не більше хвилини.
Вперед, гаджет CSS Hat!
Тепер, коли у нас є необхідна кнопка, все що нам залишилося зробити, це відкрити панель CSS Hat, і виявити там велику пачку коду, який можна просто скопіювати.
Перед тим, як ми вирушимо перевіряти, як це все виглядає в браузері, давайте трохи підкоригуємо результат. У нижній частині ви можете бачити 5 кнопок. Перша копіює код в буфер обміну, а решта 4 - це опції, які ви можете включити або виключити:
Настає момент істини. Як виглядає демо в порівнянні з версією в Photoshop. Отже:
Як ви вже помітили, вони виглядають не зовсім ідентично. Проте, багато в чому результати дуже схожі, і в багатьох випадках CSS-версія виглядає навіть краще. Ми вважаємо, що це навіть поліпшена версія того, що було зроблено в Photoshop!
Є деякі моменти, про які вам слід знати. Деякі аспекти стилів Photoshop просто не можуть бути перетворені в CSS на даний момент. Наприклад, Photoshop за замовчуванням додає режим змішування Multiply до тіней, але це не можна перенести в CSS-код.
Зате тут є безліч різних можливостей, які ми можете використовувати для полегшення завдання, а інше можна дописати руками. Веб-сайт CSS Hat демонструє нам дійсно вражаючі приклади, які були зроблені за допомогою даного інструменту. Наприклад, нижче ви можете бачити роботу від musHo.
Правда в тому, що якщо вам захочеться використовувати зображення для створення ефектів такого типу, то ви легко зможете скористатися даним методом. У нашому сьогоднішньому світі, де весь контент потрібно стискати і розширювати (через різних розмірів екранів), нам слід розробляти сторінки виключно за допомогою коду, щоб не було проблем з перекручуванням контенту.
Для того щоб зробити це, ми звертаємося за допомогою до CSS3, що дозволяє нам обійти цю проблему, але призводить до проблеми використання цих величезних полотен CSS-коду і браузерних префіксів. Коли ви дивитеся на величезні уривки коду, наведені вище, то ваша реакція викликана загальною ситуацією в веб-дизайні, а не роботою інструменту.
Можна виділити великий мінус всіх інструментів на кшталт CSS Hat - вони запросто призводять до того, що люди забувають, що насправді працюють з кодом! Коли ви пишете код вручну, ви набагато більше розумієте і думаєте про результат. Намагайтеся завжди перевіряти результати, якщо ви працюєте з генераторами коду, так як часом це може призвести до неприємних наслідків.
Що ви думаєте з приводу CSS Hat?
Після ретельного тестування, ми переконалися в тому, наскільки просто CSS Hat генерує валідний і красивий CSS-код за допомогою Photoshop. Мрія багатьох дизайнерів стала реальністю, і нам здається, що інструмент має право бути і розвиватися.
Якщо ви багато працюєте над CSS3-стилями, і при цьому любите користуватися Photoshop, то вам обов'язково варто спробувати цей інструмент. Зараз він коштує всього 20 $, що здається навіть великою сумою. Але варто враховувати ту ймовірність, що якщо дана функція з'явиться від розробників Photoshop, то доведеться викладати за неї сотні доларів.
Тепер, коли ми розповіли вам всю наявну інформацію, прийшов час вам поділитися своєю думкою. Чи дійсно сучасним веб-дизайнерам і розробникам слід звернути увагу на даний інструмент?