PhotoshopからCSSへの連携がものスゴく便利になる機能拡張 -CSS Hat 2（をプレゼント！）

Post on:2014年8月18日

PhotoshopはCS6からCSSへの書き出し機能が追加され、Web制作の現場で更に便利になりました。ただし機能面でまだ十分とは言えず、物足りない人も多いと思います。

Photoshopで作成したボタンやエレメントなどのシェイプやテキストのレイヤースタイル・テキストスタイルをCSSのコードに書き出す機能拡張を紹介します。
しかも紹介だけでなく、リリース記念にプレゼントします！

サイトのキャプチャ

CSS Hat

新しくなったCSS Hat 2はスゴいぞ

CSS Hat 2は先日リリースしたばかりで、CSS Hatのバージョンアップ版です。1から多くの機能が追加されており、使いやすくなっています。
Photoshopの標準機能「CSSをコピー」とは別物と思った方がいいです。

CSS Hat 2のキャプチャ

PhotoshopでCSS Hat 2を起動したところ

まずは、CSS Hat 2でどんなことができるのか触れてみましょう。
シェイプとテキストを作成してみました。

サンプル

上：角丸長方形、下：テキスト

あとは、これらのレイヤーを選択するだけで、それぞれのCSSのコードが生成されます。

CSS Hat 2のキャプチャ

CSS Hat 2のパネル

1枚目：角丸長方形をCSSに書き出し
シンタックスハイライトに対応しており、すぐにコードを確認できます。
日本語のレイヤー名にも対応しています。
2枚目：テキストをCSSに書き出し
テキストも同様です。
右下の「Preview」でコードで実装した際のプレビュー表示やブラウザ確認もすぐにできます。
3枚目：オプションでベンダプレフィックスにも対応
ベンダプレフィックスの有り無し、セレクタのタイプ（id, class, element）、カラーの表記（hex, rgb, hsl）など変更できます。
4枚目：SassやLessにも対応
通常のCSSだけでなく、SassやLessにも対応しています。

CSS Hat 2の主な特徴

2からの新機能には「new!」をつけています。

  • Photoshop CC 2014のみ対応（new! 古いバージョンはCSS Hat 1を）
  • シェイプのサイズ、ボーダー、角丸、カラー、グラデーションなど、テキストのフォントファミリー、サイズ、ウェイト、カラーなどのスタイルをCSSに書き出します。
  • 複数のレイヤーに対応（new!）
  • テキストはパラグラフのスタイルにも対応（new!）
  • 書き出されたコードはシンタックスハイライト対応（new!）
  • Sass, Lessにも対応
  • コードのテンプレート作成も可（new!）
  • 生成されたコードのライブプレビュー（new!）
    ブラウザでの表示も1クリックでOK
  • Typekitに対応（new!）
  • 生成されたコードは必要な箇所のみ（複数行も可）を簡単にコピーできます。

Photoshopとの違いは、下記ページで機能の違いやクオリティの違いを参考にしてみてください。

サイトのキャプチャ

Quality of CSS code: Photoshop vs CSS Hat

CSS Hat 2をプレゼント！

CSS Hatの作者様のご厚意により、3名様にプレゼント！

  • CSS Hat 2（通常$34.99）

※Photoshop CC 2014(Win/Mac) のみ対応です。

応募期間

2014年8月21日まで。応募期間は、終了しました。

応募要項

応募要項は、2点。

  1. コリスのTwitterアカウント「@colisscom」をフォローしている。
  2. 下記の文章をTwitterの自アカウントでツイートしてください。
    一言付け加えたりしてあると、当選率がアップするかも。

当選した際には、レビュー記事を自身のブログなどで書いていただけると嬉しいです。

応募の注意事項

  • 必要なのは3つ。
    「http://bit.ly/1rE0Yha」「@colisscom」「#presentCSSHat2」は必ず含めてください。
  • ツイートでの応募は一回だけでお願いします。
    重複しても累計はされません。また、重複が多いアカウントは対象からはずします。

当選発表

当選者にTwitterのダイレクトメッセージにてお知らせします。
※その時に@colisscomをフォローしていない人は無効とさせていただくので、必ず「@colisscom」をフォローしておいてください。

当選者の発表日

2014年8月22日 夕方くらい

プレゼントの受け取り

プレゼントの受け取りは、登録コードのURLをメールにてお知らせします。
※URLを含むとTwitterのDMを利用できないため、メールで。

登録時には、Twitter or Facebook or GitHubのアカウントかメールアドレスが必要です。

sponsors

top of page

©2024 coliss