CSS Hat 2.1.1 & PNG Hat 1.2.0 [En]

CSS Hat 2.1.1 & PNG Hat 1.2.0

Релиз состоялся: июль 2015
Тип издания: Software
Поддерживаемая ОС: Mac OS X 10.7+ / Win
Разработчик: Piffle, LLC
Официальный сайт: csshat.com
Язык интерфейса: Английский

Лечение: в комплекте
Тип лекарства: замена файлов (см. Спойлер "процедура установки")

Системные требования:
Mac OS (10.7+) / Windows
• CSS Hat 2.1.1
Supports Adobe Photoshop CC 2014, CC 2015
• PNGhat 1.2.0
Supports Photoshop CS5, CS6, CC, CC 2014.1+, CC 2015

Описание:
CSS Hat: волшебная кнопка, превращающая стили в Photoshop в CSS-код
Преобразование дизайна из Photoshop в веб-страницу всего за один клик – это не совсем свежая идея. Как только появились веб-дизайнеры, появилась и эта идея-мечта.

CSS Hat отличается от других приложений, которые вы могли видеть ранее. Это приложение не представляет собой полноценный WYSIWYG, направленный на то, чтобы вы могли создавать веб-сайты, не написав и строчки кода. Это приложение скорее направлено на возможность быстрого создания CSS3-стилей для конкретных элементов, используя процесс, который был популярен с десяток лет назад (а то и больше) прямо в Photoshop. Приложение великолепное!

Просмотр доступен только для зарегистрированных пользователей

Скриншоты: Время раздачи: до 3-х первых скачавших

Господа, у кого-нибудь на cc 2018 v19.0.1 были с csshat проблемы? Он у меня находится в бесконечной загрузке https://www.screencast.com/t/odcuyxQwb , хотя pnghat встал без особых проблем при помощи ручной установки и изменения реестра. Нужна помощь.

Все работает. Но ни на PS СС2017 ни на PS СС2015 не запустилась.

Старый добрый 2014 похоже остается золотой серединой по сей день.

Доброго времени суток, подскажите пожалуйста как настраивали cssHat на 2018 PH? В частности где должна находится папка CEP на windows машине? что-то пробую разный порядок и гайд от 2017 не помогает.
Заранее спасибо!

Гайд по установке на CC 2018. Автор zur4ik

zur4ik писал(а):

Недавно мучился над установкой "PNG Hat" (аналогично и для CSS Hat) на Photoshop CC 2018 и после долгих попыток получилось его запустить. Вот инструкции, если кто-то попадет в аналогичной ситуации:

1. Закройте Photoshop перед тем как приступить к установке.

2. Скопируйте папку из extension в %appdata%\Adobe\CEP\extensions\ (C:\Users\<USERNAME>\AppData\Roaming\Adobe\CEP\extensions)

Если такой папки нет - создать.

3. Скопировать папку из generator.windows в:

Для x64-ой версии: %SystemDrive%\Program Files\Adobe\Adobe Photoshop CC 2018\Plug-ins\Generator (Как обычно: C:\Program Files\Adobe\Adobe Photoshop CC 2018\Plug-ins\Generator)
Для x86-ой версии: %SystemDrive%\Program Files (x86)\Adobe\Adobe Photoshop CC 2018\Plug-ins\Generator (Как обычно: C:\Program Files (x86)\Adobe\Adobe Photoshop CC 2018\Plug-ins\Generator)

4. В файле %appdata%\Adobe\CEP\extensions\com.madebysource.pnghat\CSXS\manifest.xml надо поменять версию платформы.

ИЗМЕНИТЕ:

Код: выделить все

<Host Name="PHXS" Version="[15.0,16.9]" />
<Host Name="PHSP" Version="[15.0,16.9]" />

НА:

Код: выделить все

<Host Name="PHXS" Version="[15.0,19.9]" />
<Host Name="PHSP" Version="[15.0,19.9]" />

5. С версии CC 2018 Adobe перешла на CEP.8 в котором по умолчанию не активирован Node.js а также поддержка Mixed Content для Iframe-ов. А поскольку MadeBySource уже не поддерживают обновления "PNG Hat", он уже старый и не рассчитан для работы на новой платворме. По этому нужно задать параметры которые дадут поддержку Node и Mixed Content. Для этого в тот же manifest.xml файл в категорию <Resources> под линии <MainPath>./index.html</MainPath> добавляем:

Код: выделить все

<CEFCommandLine>
  <Parameter>--enable-nodejs</Parameter>
  <Parameter>--mixed-context</Parameter>
</CEFCommandLine>

6. В реестре по адресу HKEY_CURRENT_USER/Software/Adobe/CSXS.7 а также по адресу HKEY_CURRENT_USER/Software/Adobe/CSXS.8 создать запись тип (строка) с именем PlayerDebugMode и значением 1

7. Запустите Photoshop, в меню Window -> Extensions будет пункт PNG Hat - кликните, чтобы прогрузились файлы. Закройте Photoshop.

8. Для процедуры лечения скопируйте содержимое папки Med в %appdata%\Adobe\CEP\extensions\com.madebysource.pnghat\ и замените файлы.

9. На этом все. Удачи!

orkooo писал(а):

Гайд по установке на CC 2018. Автор zur4ik

zur4ik писал(а):

Недавно мучился над установкой "PNG Hat" (аналогично и для CSS Hat) на Photoshop CC 2018 и после долгих попыток получилось его запустить. Вот инструкции, если кто-то попадет в аналогичной ситуации:

1. Закройте Photoshop перед тем как приступить к установке.

2. Скопируйте папку из extension в %appdata%\Adobe\CEP\extensions\ (C:\Users\<USERNAME>\AppData\Roaming\Adobe\CEP\extensions)

Если такой папки нет - создать.

3. Скопировать папку из generator.windows в:

Для x64-ой версии: %SystemDrive%\Program Files\Adobe\Adobe Photoshop CC 2018\Plug-ins\Generator (Как обычно: C:\Program Files\Adobe\Adobe Photoshop CC 2018\Plug-ins\Generator)
Для x86-ой версии: %SystemDrive%\Program Files (x86)\Adobe\Adobe Photoshop CC 2018\Plug-ins\Generator (Как обычно: C:\Program Files (x86)\Adobe\Adobe Photoshop CC 2018\Plug-ins\Generator)

4. В файле %appdata%\Adobe\CEP\extensions\com.madebysource.pnghat\CSXS\manifest.xml надо поменять версию платформы.

ИЗМЕНИТЕ:

Код: выделить все

<Host Name="PHXS" Version="[15.0,16.9]" />
<Host Name="PHSP" Version="[15.0,16.9]" />

НА:

Код: выделить все

<Host Name="PHXS" Version="[15.0,19.9]" />
<Host Name="PHSP" Version="[15.0,19.9]" />

5. С версии CC 2018 Adobe перешла на CEP.8 в котором по умолчанию не активирован Node.js а также поддержка Mixed Content для Iframe-ов. А поскольку MadeBySource уже не поддерживают обновления "PNG Hat", он уже старый и не рассчитан для работы на новой платворме. По этому нужно задать параметры которые дадут поддержку Node и Mixed Content. Для этого в тот же manifest.xml файл в категорию <Resources> под линии <MainPath>./index.html</MainPath> добавляем:

Код: выделить все

<CEFCommandLine>
  <Parameter>--enable-nodejs</Parameter>
  <Parameter>--mixed-context</Parameter>
</CEFCommandLine>

6. В реестре по адресу HKEY_CURRENT_USER/Software/Adobe/CSXS.7 а также по адресу HKEY_CURRENT_USER/Software/Adobe/CSXS.8 создать запись тип (строка) с именем PlayerDebugMode и значением 1

7. Запустите Photoshop, в меню Window -> Extensions будет пункт PNG Hat - кликните, чтобы прогрузились файлы. Закройте Photoshop.

8. Для процедуры лечения скопируйте содержимое папки Med в %appdata%\Adobe\CEP\extensions\com.madebysource.pnghat\ и замените файлы.

9. На этом все. Удачи!

Спасибо огромное!!! :супер!:

Всем привет, вышел СС 2019 и встала проблема с запуском CSS Hat постоянная загрузка, причем PNG Hat работает кто то может помочь?
Да для тех у кого вообще не работают расширения на СС 2019 решение такое (см пост выше)
здесь
<Host Name="PHXS" Version="[15.0,19.9]" />
<Host Name="PHSP" Version="[15.0,19.9]" />

поднимаем версию до

<Host Name="PHXS" Version="[15.0,99.9]" />
<Host Name="PHSP" Version="[15.0,99.9]" />

что бы постоянно не править

а тут уже
HKEY_CURRENT_USER/Software/Adobe/CSXS.8

для СС 2019 меняем на
HKEY_CURRENT_USER/Software/Adobe/CSXS.9.

P.S. На CC 2018 (19.1.5) работают оба как надо.

Сам нашел решение надеюсь что на работоспособность ФШ 2019 оно не повлияет, помогает замена файла node.exe на файл от 2018 ФШ, пока ни каких проблем с работоспособностью новых фитч не найдено.

Vouger писал(а):

Сам нашел решение надеюсь что на работоспособность ФШ 2019 оно не повлияет, помогает замена файла node.exe на файл от 2018 ФШ, пока ни каких проблем с работоспособностью новых фитч не найдено.

UPD. Было замечено что при этом отваливаются Быстрый экспорт и Экспортировать как, но это тоже решается заменой папки *\Required\Plug-ins\Generator\ из того же CC 2018 (19.1.5).
Работает и на версии 20.0.2.22488

Просмотр доступен только для зарегистрированных пользователей

На версию 21.0.1 кто то смог поставить? если опишите как, буду благодарен. Пробовал разные способы в меню Window -> Extensions, так и он не появился

На днях решил вопрос с установкой css&pnghat на актуальную версию photoshop 21.1(2020).
Ниже прикладываю инструкцию:
https://docs.google.com/document/d/16AUGcej3xj1zD9_yCXaDZolbz7Bcf9Woogp5d2pqSxc/edit?usp=sharing
Если помогло или не помогло, дайте фидбек на почту, указанную в доке или здесь в лс.

Установил по вышеизложенной инструкции на Photoshop 21.2.0, всё работает отлично. Большая благодарность её автору.