Photoshopで時短!Web素材の最適化を自動処理(バッチ処理)で行う方法

ブログ 制作手順マニュアル

おなやみさん
素材の準備に時間がかかってしまう。。。

こんにちは。ゆーへーです。
最初の頃って画像の書き出しが手間でした。

ただ今は、illustratorもPhotoshopもアセット書き出しとかレイヤーで書き出せるからすごい楽。
でも、マスクかけると余白が出来たりするんですよね・・・イラ(*´ω`)

この記事を読むと制作スピードがぐっと上がるよ。

  • 素材の準備に時間がかかっている方
  • 自動処理がわからない方
  • 一個一個、透明部分切り取るなんてめんどくせーいって方

制作とにかく作業に時間を使っていてはダメです。
自動処理できるのに手作業でやってたらそれこそ終わりません。
楽しようぜ!

素材の準備に時間がかかってませんか?

おなやみさん
制作の途中で何度も書き出してしまい時間がかかっています。
ゆーへー
画像の書き出しは、出来るだけまとめてやる方が良いですね。
ページ数が多い場合は、ページ単位で良いかと。

私の制作手順でいくと素材の書き出しは一番最初に行います。

素材書き出し~コーディング~本番アップまで手順【WordPressの場合】

最初はトップページから作っていきますので、共通箇所とトップページのコンテンツ部分の素材を書き出します。
一回の書き出しですめばいいのですが、何度も書き出す場合があります。

  • 画像が荒くて素材を再書き出し
  • 想定外の画像

画像が荒くて素材を再書き出ししていなかったのは、よくあるかと思います。
よくあるパターン

  • Retinaサイズの画像
  • フルスクリーンを想定していなかった
  • PCとスマホと画像の形状が違った

想定外の画像は、一回書き出したけど、コーディングしていたらやっぱり画像が必要な事にきづいた時です。
素材の書き出しは、コーディングを想定して書き出さなければなりません。

ゆーへー
回避するのは簡単です。
アセット書き出しで2倍で書き出しておけばOK

ファイル名の変更も書き出す前にしておけば楽です。
illustratorの場合は、アセットの名前を設定する。
Photoshopの場合は、レイヤー名だったかな・・?

書き出した画像の編集は自動処理で時間短縮

おなやみさん
書き出した画像に余白がある!!!
おまけにたくさん・・・
ゆーへー
自動処理なら30秒もかからないよー\(^o^)/

余白のある画像を自動処理で削除する方法

使うソフトは、Photoshopか、CCになれなかった哀しいFireWorks CS6(私は使ってるで💛)
CCを契約していれば、Fireworksもインストール可能です。

Adobe CC契約してない人は、契約を推奨する。

ヒューマンアカデミー通信講座の「たのまな」で契約するとかなりお得!!
たぶんですが、学割が聞いてるんかな?と思います。
キャンペーンもよくやってるみたいです。

 ヒューマンアカデミー通信講座「たのまな」

Adobeは契約者には、まったくサービスしてくれないので安く済ませたいなら、1年単位で契約するのがオススメ。
私は、めんどくさいので放置です・・・w

Photoshopの場合

 

1.アクションに登録する

ウィンドウ>アクション

まずは、新規セットを登録します。

アクション>新規アクション>記録

記録を押すと次の動作が登録されます。
登録できる動作はヒストリーから確認できます。

2.アクションを登録するために一回使います。

記録が始まると赤く光ります。

次に画像をトリミングします。

イメージ>トリミング>透明ピクセル

PNG透明削除

登録が完了すると次の画像のように表示されます。

3.バッチ処理(自動処理)を行う

ファイル>自動処理>バッチ

1.セット、アクションを先ほど作ったトリミングを選択する
2.画像を選択する
3.保存して閉じるを選択

画像の選択は、フォルダ単位、開いている画像単位どちらかでOKかと思います。
フォルダの場合は、該当フォルダを選択してください。

4.OKをクリック

Photoshopでの流れは以上になります。
Fireworksは・・・いる?

個人的には、Fireworksの方が簡単で良いかなって思います。
画像の選択もFireworksの方が優れています。

拡張子(PNG→JPG)の変更、画像サイズも同じようにします。
アクションを記録して、バッチ処理の流れです。

Fireworksの方が優れている点

  • 画像単位での選択
  • 複数のアクションの選択が簡単
  • ソフトが軽い

この3つですかね。FireWorksはもともとWeb制作に特化したもので、Photoshopから派生してものだと思ってます(違うかも)
機能的にはWebに関するものがほとんどですね。PNGの扱いとかもFireWorksの方が優れてます。
これ以上機能追加する必要もないことからCS6で更新が終わったのだと思います。

特に画像単位での選択が便利です。
PNGをJPGに変更する時に使います。

写真をPNGのまま使うと容量も大きくなるので、よく使います。

時間短縮はコーダーには必須

会社勤めの人は特に必要だと思います。
素材の準備に手間取ってたら売上上がりません。

ゆーへー
無駄をとことん減らして売り上げアップ!

 

私は、月平均7桁を稼いていますが無駄な動作を極力なくすように工夫しています。
無駄な動作ってのもあるんですが、一番は単純にめんどくさいからです。

一個一個透明部分切り取るなんて・・・めんどくせーい!

余談

先日中国の業者来た見積もりメールが私が普段だしている金額と同じでした。
ちょっとショックだったんですが、それでも7桁稼げるのは制作スピードが圧倒的に早いからだと思う。

超スピードあげて売上もあげたるで!

気に入った記事であれば、ぽちっとお願いします<(_ _)>