2021.09.17
29
こんにちは。まろCです。
雪がふりました。積もりはしませんでしたが。
そうですね、何かに例えるなら、白雪姫でした。
コーディングするとき、一番と言っていいほど時間がかかる箇所があります。それはPSDデータとのにらめっこです。
Fireworks派だった僕はLIGに入社して初めてPhotohopを触っているのですが、画像を切り出したり、テキストのサイズや行間を見て要素間のマージンを測ったりと、作業がいちいち面倒で時間がかかっていました。
しかし、なんと体感で6000倍ぐらい効率化してくれるWebツールがAdobeにあったのです。それがCreative Cloud アセットです
Creative Cloud アセットとは
ひとことで言えば、クラウド上にPSDなどのデータを保管するところなのですが、Web上で保管したPhotoshopの画像やテキストのCSS情報を、ほとんど2クリックでコピーしたり書き出ししたりができるツールでもあるのです。
バージョン管理もできるので重宝しています。
※Creative Cloudのアカウントが必要です。
Web制作を効率化する3大機能
Creative Cloud アセットの下記3つの機能を使えば、普段のWeb制作をかなり効率化できます。
- 画像スライス
- テキスト、CSSコピー
- マージン測定
効率化の準備
アプリをダウンロードしてローカルファイルを同期するようにしておけば、さらに+400倍の効率化を体感できます。
下の手順で、デスクトップのアプリケーションから同期をしましょう。
まず、フォルダーを開きます。
フォルダーにPSDを置くだけで、クラウド上にアップロードされて、どこにいてもそのファイルが同期されるようになります。
ブラウザ上だとこう表示されます。同期されているので確認してみましょう。
フォルダ内のPSDを開きましょう。あとはクリックだけで、効率化が簡単にできてしまします。
※フリーのテンプレートPSDを使いました。
1. 画像のスライス
shiftキーを押しながら複数レイヤーを選択すると、青いポップアップが出てきます。そこで、ポップアップの右の方にあるダウンロードアイコンをクリックすると、画像として保存できます。
フォーマットはpng8、png32、jpg、svgから選択できます。
名前を変更して、保存ボタンを押すだけでデスクトップ上のフォルダーに同期されます。最高に簡単ですね。
ちなみに選択したレイヤーの幅、高さも青いポップアップ内に表示されます。
2. テキストのコピー、CSS情報取得
テキストをクリックするだけで、右カラムにテキストのCSS情報が表示されます。
そのままテキストをコピーすれば、一瞬でHTML上にペーストできます。
まさにワンクリックです。
色やフォントサイズ、line-heightなども一瞬で確認できて、コピーすればそのままCSSに貼り付けできます。
3. 余白の測定
各レイヤー間の余白も、shiftキーを押しながら2つクリックすれば距離が表示されます。これだけでマージンが確認できるので、すごく楽ですね。
まとめ
こんなに楽なことはない！と実感できたと思います。
切り出した画像はgulpタスクでspritesmithからスプライトにし、imageminでより軽くしてサイト自体の効率も上げていきましょう。
時間が短縮できたので飲みに行きたいと思います。それでは。
【PSDデータとのにらめっこは終わりだ！】
※ DreamweaverとPhotoshopを使い、神速でスライスする方法
※ photoshopで複数のスライスをリネームしながら保存する方法
※ スライス時に作られる「images」フォルダを変更する方法
