スライス高速化-スライスツールを使わないスライス方法-

17Thumb

参考書で勉強して以来、スライスと言えば
【スライスツールで切り出す】
という方法しか頭にない状態でした。
 
それが最近、もっと便利に簡単に画像を切り出せる方法を知ったのでご紹介。

参考にしたのはLIGさんのこちらの記事。

なので、ほぼ一緒なんですが後半疑問に思う部分があったので、自分なりに少しだけアレンジしてます。
フォトショと具体的な方法は違うけど、同様の発想でイラレでの切り出し方も。

フォトショでスライスツールを使わないで切り出す手順

題材として、このJUKELOGのPortfolioページを使って、ロゴの部分を切り出します。
17-01

切り出したい要素を選択。

ロゴは4つのレイヤーからできているので、まずそれを全部選択します。
17-02

右クリックして【レイヤーを複製】→保存先のドキュメントに【新規】を選択→【OK】

17-03

すると選択した要素だけ新規のファイルにコピーされるので、

【イメージ】→【トリミング】→以下の設定で【OK】

17-04

余白が削除され、画像だけのファイルになります。

17-05

ここまでの方法は同じで、LIGさんの方はここから、
【このファイルでpsdで保存】→【dreamweverでこのpsdファイルを読み込む】
という、『dreamweaver経由で画像を保存する』という方法が紹介されてます。

個人的に疑問だったのがこの最後の部分で、DW経由で保存する必要性とメリットがよくわかりませんでした…

なので、自分は④の状態になったら、そのまま【web用に保存】(command(Ctrl)+option(Alt)+shift+S)で切り出してました。
別途psdファイルとしても残したい場合はpsdファイルでも保存。

dreamwearver経由でやる場合は

  • 必ず一旦psdファイルで保存しないといけない
  • DWを起ち上げないといけない
  • DWで画像を読む込んで保存する際も、拡張子などを選択して保存できるけど、フォトショみたいにプレビュー画面がない
  • DWで画像を読む込んで保存する際に、『mno』という拡張子の(よくわからないけど必要性のない)ファイルも生成される
  • 単純に④の段階でそのまま保存するより手順が増える

という点が気になりました。
(参考にさせてもらったのに不平ばかりで恐縮ですが。。)

イラレでも同様の発想で切り出す

イラレの場合も、要は
切り出したい部分の画像だけ新規ファイルにコピーし、ファイルのサイズを画像に合わせる→保存すると、発想的には同様の方法で切り出せます。

切り出したい画像を選択してコピー(command(Ctrl)+C)
新規ファイルを作成(command(Ctrl)+N)
コピーした画像を貼付け(command(Ctrl)+V)
【アートボード】→【オブジェクトに合わせる】でアートボードのサイズを画像に合わせる
それを【web用に保存】

 
今まで【スライス=スライスツールで切り出す】しか頭になかったので、発想の転換が大事だなと思いました。
特にイラレの場合は元々知ってる知識しか使っていないので。
 
もちろんケースバイケースでスライスツール使った方がいい場合もあると思いますが、最近はこちらの方をよく使っていてかなり重宝してます。