2016年09月09日

Webデザインメモ

Bracketsの「Extractで画像スライスできない問題 」を解決する簡単な方法


webサイトをBracketsで組んでいるという方、「Extract」はお使いでしょうか?

ExtractはPhotoshopを開かずにpdsファイルの画像スライスが簡単にできるとっても便利なツールです。

まだ使っていない方は、拡張機能から追加してみてください。

:::::::::::::::::

画像をExtractからスライスする際、

「cssやsassファイルからだとちゃんとスライスできるのに、htmlファイルからどうもスライスできない・・・!」

という悩みがありましたが、先日解決策を編み出したので、ご紹介いたします。



htmlでアセット抽出をする際、ブルー枠内に[画像の保存先パス]と[画像名+拡張子]を入力してからEnterキーを押すのですが・・・




こんな感じに↓途中で改行されてしまい、抽出もされない!



と、しばらくウンウン悩んでいましたが、答えは簡単でした。

カーソルをimgタグの後ろに合わせてからEnterキーを押す」

ただそれだけです。

これで途中で改行されず、ちゃんと思い通りにスライスされました♪

ちなみにcssやsassファイルで上手くいってたのは、カーソルが自動的に行末に合わさってくれていたお陰なんですね。

問題も解決したので、これからどんどんExtractを活用していこうと思います。