アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Slicyで面倒なPSDのスライス作業を効率化 !



こんにちは、最近コード書く時間がなくなってPhotoshopいじっている時間の方が主になってきました、久保田です。

Photoshopを使った画像書出しの時には、面倒なスライス作業をやらなければいけません。この記事では、Photoshopで面倒なスライス作業を劇的に効率化してくれるSlicyというアプリの紹介をします。

スライス作業をやっているうちに日が暮れる



Photoshopで作成した画像を書き出す場合には、たいていスライス機能を用いて画像を書きだしていくことになると思います。スライス機能がないと一枚のキャンバスから複数の画像を書き出すことができないのでこれを使わざるを得ませんが、大変面倒くさい。ちょっと書き出すと以下みたいにめんどくさい部分がぼろぼろ出てきます。

・ 書き出す画像のひとつひとつにスライスの領域を設定しなければならない
・ レイヤの位置を調整すると、スライスの位置も同じように調整しなければならない
・「レイヤに基づくスライス」もあるけどこれはこれで使いづらい
・ 複数のスライスを重ねたり、あるスライスの領域内に別のスライスの領域を定義できない
・ 書き出される画像はレイヤを全て統合された結果になるので、書き出す画像の背景が透明にしたい場合に一部のレイヤを非表示にしてから書き出さないといけない

書き出す画像がたくさんあったりすると、スライス作業やってるうちに日が暮れて帰る時間が遅くなるわけです。

Slicyを使おう



Photoshopのスライス作業は面倒臭いし手間がかかる。そこで、Slicyの出番です。Slicyは、設定したレイヤグループごとにいい感じに画像を書き出してくれる便利ツールです。

ウェブサイトからSlicyをダウンロードしてインストールします。AppStoreでインストールしようとすると$29ドルかかりますが、フリーで利用できる評価用のアプリはウェブサイトから提供されています。

Slicyをインストールしたら、Photoshopを開きおもむろにレイヤグループの名前に書き出したい画像名をつけます。

以下の画像の場合、星の画像と背景を別々に書き出したいので、対応するレイヤグループにbg.pngとstar.pngという名前をつけます。



Slicyを起動して、PSDファイルをドラッグ&ドロップします。



すると、画像名を付けたレイヤグループ以下の画像がファイルとして書き出されました。画像の大きさもいい感じにトリミングしてくれています。今までスライス作業に時間をかけていたのが嘘みたいです。



このSlicyのお陰で僕はPhotoshopを触るとき煩わしいスライス作業から開放されて何倍も幸福になれました。価格は$29ドルしますがPhotoshop本体の価格に比べれば塵芥のようなものですよね。

終わりに



スライスを使った画像の書出し作業は、何の創造性も必要とされない割りには時間を食う作業なので、なるべく効率化したいものです。この記事では、Photoshopの画像書き出し作業を効率化してくれるSlicyを紹介しました。

SVGと画像ファイルの容量の差を検証-2 〜PNG,GIF追記〜

こんにちは。和田です。
とうとう12月になりました。師走ですね。これからの年末、自分も頑張って走り抜けようと思います。

さて、今回は前回に引き続きといいますか、
PNG,GIFとSVGを比較した方がよいのでは!?」というご意見いただきましたので、そちらの比較をしてみようと思います。

同じ図をSVGPNG,GIF,JPGに出力して比較します。
画像の書き出し方法等は以下のとおりです。

SVGへの書き出しは、IllustratorCS6で作成した図を別名で保存でSVG(1.1)にしています。
SVGの保存時には「使用しているフォント」のみを埋め込みにしています。
・画像への書き出しは、IllustratorファイルをPhotoshopで開き「Web用に保存」で行っています。
・作成した図は320×320pxを原寸としています。(PC用サイトの小さいサイズの図をこの程度と想定して設定しました)
・保存形式はPNG、GIF、JPGにしています。
・書き出す画像のサイズは原寸、2倍、3倍、4倍、5倍の5種類です
・JPGの品質は「高画質」にしています。
PNGは「PNG-24」「透明部分:なし」で書き出しています。
・GIFは「特定カラー:256」「ディザ処理アルゴリズム:誤差拡散法 100%」「透明部分:なし」で書き出しています。


◆ 規則正しい簡単な図の場合(パス数:122)


今回も規則正しい図(カラーチャートのような図)から比較してみました。以下のような2つの図です。

図−1

図−2




以下がSVG,JPEG,PNG,GIFの比較です。

サイズ(保存形式)図ー1図ー2
SVGJPEGPNGGIFSVGJPEGPNGGIF
原寸
(320×320px)
12KB25KB4KB12KB8KB49KB29KB25KB
2倍
(640×640px)
37KB5KB29KB115KB70KB45KB
3倍
(960×960px)
94KB8KB45KB188KB102KB66KB
4倍
(1280×1280px)
37KB12KB53KB225KB139KB94KB
5倍
(1600×1600px)
168KB16KB78KB332KB180KB119KB

※ グレー背景はSVGデータの以上の容量になったものです。

図−1については、PNGの容量が3倍の大きさまでSVGよりも小さくなりました。256色以下になるため、PNGの圧縮率が高くなったのかなと思います。

図−2ですと、今度は円の曲線部分のグラデーションが出てくるのでPNGの容量も大きくなってしまいました。代わりに画像の中ではGIFが一番小さくなりましたがSVG程の軽さまでは行きませんでした。
単純な曲線が入った図はSVGにあっているかもしれませんね。



◆ 会社案内の地図の場合(パス数:186)


次は、会社案内の図です。こちらも前回同様です。

図−3


SVGJPEG比較図
サイズ(保存形式)図ー3
SVGJPEGPNGGIF
原寸
(320×320px)
98KB33KB33KB20KB
2倍
(640×640px)
82KB74KB41KB
3倍
(960×960px)
143KB119KB66KB
4倍
(1280×1280px)
217KB164KB90KB
5倍
(1600×1600px)
291KB217KB115KB

※ グレー背景はSVGデータの以上の容量になったものです。

図−3ですと、GIFが一番軽くなり、PNGJPEGと大して変わらない値になりました。
色数が少ないということと、横方向に同じ色が続いている事がGIFを軽くさせたのではないかと思います。


◆ Webサイトにありそうな!?簡単な図の場合(パス数:529)


最後は簡単な図です。こちらも前回同様です。
320×220pxで作成しています。

図−4


SVG、画像比較図
サイズ(保存形式)図ー4
SVGJPEGPNGGIF
原寸
(320×220px)
156KB29KB33KB16KB
2倍
(640×440px)
61KB74KB37KB
3倍
(960×660px)
106KB123KB61KB
4倍
(1280×880px)
156KB168KB90KB
5倍
(1600×1100px)
213KB221KB119KB

※ グレー背景はSVGデータの以上の容量になったものです。

図−4ですと5倍の大きさにしてもGIFが一番軽くなりました。色数が少ないからだと思います。色数が増えた場合はディザの表現の限界も出てくると思いますので、そうした場合は他の画像と見比べてベストなのを選ぶのがいいかもしれません。
PNGJPEGより少し大きくなりました。



さて、前回の追記と言う形でPNGとGIFについても比較してみましたが、今回の検証で使った図だけで言えば、Webで使われるような簡単な図ではGIFが一番軽いようです。
ただ、もっといろいろな図で検証すると他の結果もでてくるかもしれません。
ですので、サイトの環境に応じてベストなものを選ぶのがいいかもしれません。
個人的には、他の媒体(印刷物など)にも利用しやすいSVGが広まってほしい気がします。そう考えるのは僕だけですかね?

次回はフォントの埋込を検証してみたいと思います。
それでは、また次回です。

SVGと画像ファイルの容量の差を検証

こんにちは。和田です。
最近、寒いですが皆様いかがお過ごしでしょうか?
自分はちょっと喉の調子が良くないです。皆様も体調にはお気をつけ下さい。

さて、今後数回に分けて、デザイナー視点でSVGファイルについて書いてみようと思います。
(あくまでデザイナー視点ですのでIllustratorで作成した図をSVG保存して、どうなるか…みたいな事を書いていきたいと思います。)

最初は、同じ図をSVGファイルと画像ファイルに書き出した際、容量にどれくらいの差がでるか試してみました。
比較の際は、以下の要領で行っています。
SVGへの書き出しは、IllustratorCS6で作成した図を別名で保存でSVG(1.1)にしています。
SVGの保存時には「使用しているフォント」のみを埋め込みにしています。
・画像への書き出しは、IllustratorファイルをPhotoshopで開き「Web用に保存」で行っています。
・作成した図は320×320pxを原寸としています。(PC用サイトの小さいサイズの図をこの程度と想定して設定しました)
・保存形式はJPG「高画質」にしています。
・書き出す画像のサイズは原寸、2倍、3倍、4倍、5倍の5種類です


◆ 規則正しい簡単な図の場合(パス数:122)


まずは、規則正しい図、今回はカラーチャートのような図で比較してみました。以下のような2つの図です。描いてみて思ったんですがなんだかユ◯クロのHEATTECHみたいになってしまいました。(汗)

図−1

図−2




以下がSVGJPEGにした場合の比較です。

サイズ保存形式図ー1図ー2
原寸
(320×320px)
SVG12KB8KB
原寸
(320×320px)
JPEG25KB49KB
2倍
(640×640px)
JPEG37KB115KB
3倍
(960×960px)
JPEG94KB188KB
4倍
(1280×1280px)
JPEG37KB225KB
5倍
(1600×1600px)
JPEG168KB332KB

※ グレー背景はSVGデータの以上の容量になったものです。

これくらい簡単な図だと、画像にするよりSVGの方が容量が軽くなるのですね。
結構オドロキです。
あと、なぜかJPEGの4倍画像(1280×1280px)の容量が小さくなります。う〜ん。なんでだろう…。こっちもオドロキです。



◆ 会社案内の地図の場合(パス数:186)


実際は、会社案内の図などはGoogleMapsを使う事が多いとは思うのですが、とりあえず試しにやってみました。

図−3


SVGJPEG比較図
サイズ保存形式地図
原寸
(320×320px)
SVG98KB
原寸
(320×320px)
JPEG33KB
2倍
(640×640px)
JPEG82KB
3倍
(960×960px)
JPEG143KB
4倍
(1280×1280px)
JPEG217KB
5倍
(1600×1600px)
JPEG291KB

※ グレー背景はSVGデータの以上の容量になったものです。

こちらは、2倍(640×640px)サイズまでは画像が軽かったです。
思ったより、SVGが軽く出来上がっていました。


◆ Webサイトにありそうな!?簡単な図の場合(パス数:529)


次は、以前に作成した図(といっても、素材を使ってチャチャッとですが)を比較してみたいと思います。Webにありそうな感じ…。微妙ですかね(汗)
この図は、320×220pxで作成しています。

図−4


SVG、画像比較図
サイズ保存形式図−4
原寸
(320×220px)
SVG98KB
原寸
(320×220px)
JPEG29KB
2倍
(640×440px)
JPEG61KB
3倍
(960×660px)
JPEG106KB
4倍
(1280×880px)
JPEG156KB
5倍
(1600×1100px)
JPEG213KB

※ グレー背景はSVGデータの以上の容量になったものです。

これくらいの図だと3倍(960×660px)くらいまでは画像の方が軽くなるのですね。ただ、今回は文字を少なめなので、フォントを埋め込みにするともっと容量の差がでるかもしれません。



と、ここまで3つの簡単な図で比較してみましたが、
ここで見る限りでは、Webで使う簡単な図は、同じサイズであれば画像の方が軽くなるようです。2〜3倍大きくても画像の方が軽いようです。
ただ、レスポンシブデザインのようにワンソースで高解像度のモバイルデバイスもターゲットにする場合、画像ですと高解像度デバイス用に3倍程度大きい画像も用意しなくてはならなくなるので、合計するとSVGファイルと同じくらいの容量になりそうです。

あと、SVGのファイルサイズはパスの数とフォントの有無で大分変わりそうですので、この辺りは次回、検証してみたいと思います。

それでは、また次回です。

ベテランPhotoshopユーザも必見! Photoshop CS6 新機能まとめ

こんにちは、鴨田です。

先日、会社のPCにAdobe CS6が導入されました。
今までCS4だったので、いろいろな変化に驚いています。
今回はPhotoshop CS6の新機能について、紹介したいと思います。

ただし、CS4→CS6になっての変化なので、
CS5からある機能も少し含まれているので、あしからず。

参考記事:
40 Tutorials to Master the New Features of Photoshop CS6 | 1stwebdesigner



● 選択範囲


選択範囲の選択中にドラッグ範囲の横に、
サイズを表示してくれるようになりました。
今までは情報ウィンドウを見ないといけなかったので、
結構便利になったのではないでしょうか。

操作画面



● 自動保存機能


やっと自動保存機能が搭載されました。
これで保存するのを忘れていてPhotoshopが落ちてしまったときの
あの絶望感から解放されるのではないでしょうか。

環境設定ウィンドウ



● 3D機能


シェイプレイヤーでもピクセルレイヤーでもどちらでも可能です。
3Dでの押し出しとともに、ライティング+シャドウ設定も出来るので、
今までの3D機能よりもさらに進化しています。

元画像

3Dフィルター適用後

操作画面

ツールウィンドウ

参考記事:
Photoshop CS6 3D Tutorial



● 切り抜きツール


大きな違いとしては、切り抜く範囲を指定する際に、
縦横比を簡単に決められたり、グリッドの表示が出来たりします。
また、切り抜く対象の方の位置や角度を変えるようになりました。

元画像

切り抜き時

プロパティ

クラシックモードにすると、今まで通り、
切り抜く範囲の位置や角度を変えることが出来ます。

クラシックモード

参考記事:
Introducing the New Crop Tool in Photoshop CS6



● レイヤー設定


レイヤーの選択を行う際に、レイヤーの種類によって、
絞り込みが出来るようになりました。

個人的に嬉しいこととしては、
複数レイヤーを選択して、透明度をまとめて変えることも可能になってます。

通常時 → テキストで絞り込み → 複数レイヤー透明度変更



ベクターツール


今までレイヤーパネルで制御していたシェイプの塗りなどに関して、
専用のパネルが用意されました。

プロパティ

塗りだけでなく、ストローク(線)の色や幅、種類も選択する事が可能です。
同レイヤー内のシェイプの細かな制御も行えます。

ストローク適用時

ストローク詳細設定ウィンドウ



● ぼかしフィルター


「フィールドぼかし」「虹彩絞りぼかし」「チルトシフト」が追加されています。
「チルトシフト」はよく見かけるトイカメラ風のフィルターなので、
昔に撮った風景写真なども手軽にトイカメラ風に出来るのは嬉しいですね。

元画像

チルトシフトフィルター適用後

操作画面

参考記事:
Blur Gallery in Photoshop CS6



● ライティングエフェクト


「照明効果」のフィルターが進化しています。
新しいUIとなって、ライティングの設定がしやすくなっています。
今まで小さい画面で操作しなければならなかったので、この変更は嬉しいですね。

※使用PCと照明効果フィルターとの相性が悪く、
 フリーズするので、キャプチャできませんでした・・・

参考記事:
Improved Lighting Effects in CS6



● 広角レンズ補正


広角レンズで撮影した画像を補整する事が出来ます。
あまりに広角にされていると限界はありますが、
レンズ補正と他のツールを組み合わせると、
どんな画像でも補整できると思います

元画像

レンズ補正後

参考記事:
How to Use Adaptive Wide-Angle Filter in Photoshop CS6



● コンテンツに応じた移動ツール


画面内で移動させたいものがある場合に使用します。
選択範囲で囲んだソースをコピーして、コピー先の場所となじませながら、
元々ソースがあった場所を周りの環境に合わせて、補完してくれます。

元画像

操作画面

ツール適用後

参考記事:
Content-Aware Move Tool Tutorial – Photoshop CS6 Beta



● タイプスタイル


段落スタイル、文字スタイルを設定、保存しておけるようになりました。
スタイル自体を別ファイルとして保存も可能なので、
お気に入りのスタイルを登録することで、作業効率は格段にアップすると思います。
使ったことないのですが、InDesignっぽいみたいですね。

段落/文字スタイルウィンドウ

詳細設定画面

参考記事:
Type Styles in Photoshop CS6



● ブラシツール(CS5から)


ブラシの堅さ、筆先の状態をリアルタイムで表現する
プレビューウィンドウが追加されています。
ブラシ自体の形状も分かりやすい形で、細分化されています。

通常時

描画中

ブラシウィンドウ




いつも基本的な機能ばかり使っていたので、
最近はあまり新機能を追わずに時間をかけてやっていたこともあるので、
もっと新ツールをどんどん使って、作業の効率化を図っていけたらなと思います。

古びた紙にかすれた風の文字のデザインを作ってみました。

はじめまして。

アシアルでデザイナーとして働いている花崎です。

最近いろんな方々に、
「黒いねー、焼いてるでしょ。」
「日サロ?」
「サーフィンでもやっているの?」
「ギャル?」
と言われます。

確かに夏だったので海で焼けました!といいたいところですが…

残念ながら違います。

地元の古紙回収と毎朝の出勤による日焼けです。
そんな私ですが、よろしくお願い致します。

9月はイベントが多く、キャンペーン用フライヤーなど目立つような派手な印刷物を作っておりました。

そこで今回は古紙を扱いなれたこの私が!古びた紙を利用した派手でポップなデザインをPhotoShopで作成してみようとおもいます。
こちらを作成します。使用したソフトは【Adobe Photoshop CS4】です。



さて、早速やってみましょー!!

古びた紙にかすれた風の文字のデザインを作ってみました。


1.背景の作成


新規作成で、[幅700px高さ1000px]のカンバスを開きます。
アプリケーションメニューから【レイヤー > 新規塗りつぶしレイヤー > べた塗り】で【#e4edec】の色で設定します。



2.かすれ感のある紙の素材を探す


素材集やスキャンなどでムラ感やかすれ感のある紙を探し保存します。
保存形式はjpegでもpngでもOKです。
名前は[キャンバス紙]にしてください。



3.キャンバス紙のあるレイヤーを選択し、そこで以下の順序でかすれた感じのレイヤーを作成


アプリケーションメニューから【ファイル > 配置】で、探してきた質感のあるキャンバス紙を選択し、配置します。



【レイヤー > ラスタライズ > スマートオブジェクト】でラスタライズ
【イメージ > 色調補正 > 階調の反転】



【イメージ > 色調補正 > 2階調化】でダイアログボックスがでてくるので、しきい値を設定※ここはかすれた感じを出すのに利用するので自分の好みの値にしてください。ここでは【65】に設定します。



レイヤーパネルにある、描画モードを【スクリーン】に変更



4.かすれた風の文字の作成


ツールパネルの【文字ツール】を選択して文字を描きます。
三色違う色で作成します。
フォントや色は好みで良いですが、今回のデータは以下の通り。
【フォント:A-OTF UD新ゴ Pro】
【太さ:DB】
【フォントサイズ:130pt】
【カラー:Aの文字:#ff1fa3 Bの文字:#eaff00 Cの文字:#00ccff】



5.A,B,Cの文字に透明感を出す


レイヤーパネルにある、描画モードを【焼きこみカラー】に変更します。



6.ムラ紙の加工


アプリケーションメニューから【ファイル > 配置】で、探してきた質感のあるムラ紙を選択して配置します。
レイヤーパネルにある、描画モードを【乗算】に変更し不透明度を【60%】にします。



7.文字の色を調整


Cのレイヤーを選択したまま【レイヤー > 新規調整レイヤー > 色相・彩度】を選択し【色相・彩度】レイヤーを作成します。
色調補正ダイアログボックスが出てくるので、色調をいじって好みの色相にしてください。
今回の場合は以下の通りです。
【色相:+3】
【彩度:+3】
【明度:+10】



8.星型のオブジェクトを作成


ツールパネルの長方形ツールから【多角形ツール】を選択
オプションバーから多角形オプションを開き、【星形】にチェックをいれ、角数を【5】に設定し、描画します。



9.星形オブジェクトをちりばめて派手する☆


レイヤーパネルにある描画モードを【オーバーレイ】に変更しムラ紙レイヤーの下に配置します。
ムラ紙レイヤーの上にも星型オブジェクトを置きます。
あとは星形オブジェクトの不透明をそれぞれ調節して画面全体の雰囲気を整えます。



10.名前を入れてこれで完成★





いかがだったでしょうか?

今回は ブログ用にRGBカラーで作成しましたが、DMにも活用できそうなデザインです。
その際には、初期設定でCMYKカラーに設定してから作成してください。

質感はどこからやってくる?

こんにちは、鴨田です。

何かパーツをデザインするとき、
もっとリアルにしたいな、質感を出したいな、とか、
思うことがあったりしませんでしょうか。

まあどういうデザインを行っているかによって違うとは思いますが、
誰もが一度はそんなことを考えたことがあるはずです。

では、何をもってリアルな質感というのか?

答えはそれぞれにあるとは思うのですが、
3DCGを少しだけかじっていた人間としては、
その主要なところは「影、立体感、反射/透明度」が主だったところだと思っています。

ということで、一つのボタンを例にして、
どうすれば、ボタンに質感を与えられるのかを見ていきたいと思います。



00.ボタンを置く




ボタンだと言い張れば、多分ボタンです・・・。



0.ボーダーを追加して、角丸にする




まあ、ボタンかな・・・。



1.影を付ける




なんとか、ボタンっていってもいいような気がしてきました。



2.立体感(ベベル)を表現する




ようやく押せるボタンという雰囲気が出てきました。



3.反射/透明度を付け加える




大分盛ってしまいましたが、デザインされたボタンという感じになりました。

なんかやりすぎた感があるので、ちょっと手直しします。



4.手直し




手直しになってるのかどうか分かりませんが、少しユニーク感は出たのではないかと思います。
(実際、こんなゴテゴテしたものを使うかどうかは置いておいて)



上記、一連の作業はPhotoshopで行いました。
特に難しいことは行っていないので、見よう見まねで誰にでも作れるはずです。

意味があるのかどうか分かりませんが、
一応、パレットのスクリーンショットだけ置いておきます。
よくやる効果の重ね合わせですね。

Photoshopを使用した簡単な画像加工を3つご紹介

こんにちは、大橋です。
最近はデザインの仕事を行うことが少なくなってきました。
本日は私自身のリハビリも兼ねて、Photoshopでの簡単な画像加工を3つ
ご紹介させていただきます。

1.明るさ、コントラストを調整する

こちらが加工前の写真になります。



「イメージ」→「色調補正」→「レベル補正」を選択します。



レベル補正ではハイライトとシャドーを見ながら加工していくことができます。
今回は以下のように設定しました。



画像が引き締まりました。



2.不要なものを消す

次に写真の縄の部分を消していきます。
ツールバーの「スポット修復ブラシツール」を選択します。



縄の部分を塗りつぶしていきます。


※細かく選択していくときれいに消すことができます。



3.画像の合成

最後に馬を切り出して別の画像と合成させます。
ここではマグネット選択ツールを使用します。



選択しづらい部分は全体を選択後、拡大して自動選択ツールを使って調整します。


※shiftキーで選択範囲の追加、Altキーで選択範囲の削除が可能です。

補足として、馬の鬣の部分は、境界線の調整機能を使用することにより、詳細に選択することが可能です。(PhotoshopCS5対応)

「選択範囲」→「境界線を調整」を選択します。



スマート半径をチェックし、半径を調整します。
境界を検出し、半径の適用範囲を自動的に調節することが可能です。



選択した画像をコピーし、準備した画像に貼り付ければ完成です。



最後になりますが、東日本大震災によって被害にあわれた皆様へ
心よりお見舞い申し上げますと共に、皆様のご無事と一日も早い復旧復興をお祈り申し上げます。

PhotoshopCS5新機能「パペットワープ」を使った画像加工

はじめまして。大橋と申します。
昨年の11月からアシアルで、ディレクター/デザイナーとして働かせていただいております。

本日よりブログを書かせていただくことになりました。
今後ともよろしくお願いいたします。

今回はPhotoshopCS5の新機能「パペットワープ」を使用して写真を加工する作業を行いたいと思います。
「パペットワープ」とは簡単に説明すると、被写体を人形のように変形できる機能です。
では、早速始めてみたいと思います。

1.ペンギンと背景を別レイヤーにします。
まずは、ツールバーの「クイック選択ツール」を使用してペンギンを選択します。




ペンギンのみをコピーした新規レイヤーを作成します。
メニュー:レイヤー→新規→選択範囲をコピーしたレイヤー







2.背景レイヤーにあるペンギンを消去します。

今回は、頭と羽のみ変形させたいので、部分的に消去します。
背景レイヤーを選択し、ツールバーの「スポット修復ブラシツール」を選択します。



オプションのモードを「置き換え」にし、「コンテンツに応じる」を選択します。



消去したい部分を塗りつぶしていきます。



背景画像を以下のように作成しました。




3.最後に「パペットワープ」を使用してペンギンを変形させます。

レイヤー1を選択します。
メニュー:編集→パペットワープ



ペンギンがメッシュで覆われます。
変形する軸にピンを打っていきます。



オプションでメッシュの密度、ピンの深さなどを変更することも可能です。



移動させたいピンをドラッグすると、メッシュに覆われた部分が変形します。



変形させる部分のピンをすべてドラッグさせたら完成です。
今回は上向きで羽を伸ばしているペンギンを作成してみました!




「パペットワープ」を使用してペンギンを簡単に変形させることができました。

Photoshopで画像加工をするための基本的な使い方

こんにちは、鴨田です。

デザイナーとしては、細々とした仕事でも、
依頼してもらえたら、特に面倒だとか思わずにやるのですが、
依頼する側からしたら、いちいちお願いするのも申し訳ない、
と思っていらっしゃる方もいます。

Photoshopが使用できる環境があればの話ですが、
ちょっとした画像加工のやり方をご紹介します。


1.画像の容量を減らす

まずは画像を開きます。

メニュー:ファイル → 開く
ショートカット:Ctrl + O

当然、画像をPhotoshopウィンドウにドラッグ&ドロップでも開きます。


(44.6KB)

メニュー:ファイル → Webおよびデバイス用に保存
ショートカット:Ctrl + Shift + Alt + S



のウィンドウが表示され、保存に関する設定が出来ます。
JPGであれば、画質を下げます。
GIF、PNG-8であれば、カラー数を減らします。

この場合、元の画像が色数の多いJPGですので、
画質を20にしてみます。

そうすると、容量が32.65KBとなります。




2.画像を拡大縮小する

まずは加工したい画像を開きます。

メニュー:イメージ → 画像解像度
ショートカット:Ctrl + Alt + I



「幅」「高さ」を指定して、変更します。
「縦横比を固定」のチェックを外せば、
縦横比に関係なく、画像の大きさを変更できます。


3.画像のサイズを変更したい

画像
周りに余白を作りたい、余白を取りたい場合、

メニュー:イメージ → カンバスサイズ
ショートカット:Ctrl + Alt + C



「幅」「高さ」を指定して、変更します。
デフォルトでは、画像の真ん中を基準としていますが、
「基準位置」を変えることも可能です。

現在の大きさよりも、画像を大きくする場合、
余白部分の色を「カンバス拡張カラー」で設定可能です。


4.画像を鮮明にさせたい

画像を拡大、縮小したときなどと一緒に用いたりしますが、
単に画像がぼけているときにも使用すると思います。

メニュー:フィルタ → シャープ → アンシャープマスク



「量」を調整することで、
どの程度、画像を鮮明にするかを決定します。

まずは「量」を20%にして、
その後、「Ctrl + F」で同じフィルタを多重に適用できるので、
様子を見ながら、シャープにすることも可能です。




5.画像を白黒(モノクロ)にする

ボタン系の画像を作るときに、使うことがあるかも知れません。

メニュー:イメージ → 彩度を下げる
ショートカット:Ctrl + Shift + U

これだけです。




6.画像をセピアにする

モノクロと同じような加工ですが、少し手間が増えます。

メニュー:イメージ → 色調補正 → 色相・彩度
ショートカット:Ctrl + Alt + U



「色彩の統一」にチェック
「色相」:30
「彩度」:30
「明度」:0

とすると、セピア色になります。
値をいじると、他の色にすることもできます。




7.画像に枠線をつける

画像に枠線をつけて、写真っぽくすることができます。

まずは、レイヤーパレットで、背景となっているレイヤーがあるので、



右クリック → レイヤーのプロパティ



レイヤーに名前をつけます。そのままでもOKです。



Fx(レイヤースタイルの追加)ボタンを押して、
「境界線」を選択します。



「サイズ」で枠線の太さを決め、
(画像の大きさに寄るので、お好みで)
「位置」を「内側」にセットします。
「カラー」を「#FFFFFF」で白にします。

これで枠線がつきます。

Photoshopのバッチ処理を使って、大量のaiファイルをpngに変換する

こんにちは、鴨田です。

前回はPhotoshopで壁紙を作りながら、基本的な使い方を覚えるという記事を書きました。

今日は、前回の続きをやりますと言いたいところですが、
ちょっと予定を変更してお届けしたいと思います。

最近、大量のaiファイルを指定の大きさのPNGに変換する、
というとても地味な作業をしたので、
俗に言うPhotoshopによるバッチ処理の解説をしたいと思います。

ちなみに、このときに使った元データはAUの絵文字データです。
AUさんのサイトからダウンロード可能です。
(http://www.au.kddi.com/ezfactory/tec/spec/3.html)

こちらを用意したら、まずはaiファイルをふるいにかけます。
どういうことかという、aiファイルにも2種類あって、
pdf形式と、eps形式があるのです。

このpdf形式になっているものが厄介で、
Photoshopバッチ処理が正常に働きません。

なので、作業としては以下のフローになります。


1.ファイルリネーマー:拡張子をai→pdfに変換

お好きなファイルリネームソフトを使って、
まずはすべてのファイルの拡張子をpdfにします。

自分はFlexible Renamerを使いました。
http://www.vector.co.jp/soft/winnt/util/se131133.html
ずばり、拡張子変換機能があります。




2.極窓:epsファイルとpdfファイルを判別

「極窓」は、主に拡張子判別に用いられています。
http://www.55555.to/what/gm.htm



まずはアプリ画面左上のフォルダ検索画面で、
絵文字データの入ってるフォルダを指定します。(1)

その後「検索」ボタンでファイルをスキャンします。(2)
すると、すべてのファイルがアプリ画面下に表示されます。(3)

「ALL」ボタンを押し、すべてのファイルを選択状態にしたら、(4)
アプリ画面中断右端の虫眼鏡ボタンをクリックします。(5)



すると、pdfではないファイルだけが残るので、右クリックして、
「選択ファイル一括変換」→「拡張子変換」(6)



「判別した拡張子に変換する」で「開始」ボタンでOKです。(7)

これで絵文字データの入っているフォルダのファイルは、
aiからpdf/epsファイルに拡張子が変更されました。

拡張の変更が終了したら、拡張子別に違うフォルダに入れておきます。


3.Photoshopバッチ処理

まずはeps形式のファイルからバッチ処理を行います。

バッチ処理を行いたいepsファイルを一つ開きます。



「EPS形式をラスタライズ」というウィンドウで最初に開く大きさを指定します。
解像度72でも画像サイズが足りている場合はそのまま、
解像度72よりもでかい画像が必要な場合、一手間必要です。

ここでは、20px四方の画像を作成するので、
そのまま開きます。



ファイルが開けたら、アクションウィンドウで、
「新規アクションを作成」ボタンを押します。
設定はデフォルトで大丈夫ですが、アクション名をつけても構いません。
「記録開始」ボタンで開始します。

「イメージ」→「画像解像度」(Ctrl+Alt+I)
高さを20pxにします。

「イメージ」→「カンバスサイズ」(Ctrl+Alt+C)
幅を20pxにします。

「ファイル」→「Webおよびデバイス用に保存」(Ctrl+Shift+Alt+S)
お好みの画像形式で保存します。

「再生/記録を中止」ボタンを押します。
これでアクションの作成は完了です。

次に、バッチ処理に移ります。

「ファイル」→「自動処理」→「バッチ」



「実行」部分でさきほど作成したアクションを選択。
「ソース」は「フォルダ」とし、epsの入っているフォルダを選択します。
チェックは全部外れている状態で構いません。
これで「OK」ボタンを押すと、バッチ処理が開始されます。

「EPS形式をラスタライズ」のウィンドウが毎回立ち上がるので、
Enterボタンに重しを載せて、押しっぱなしの状態にするか、
画像サイズをちゃんと見ながら調整したい人は、一回一回Enterを押してください。

ここで一つ問題があります。
実は先ほどのアクションは縦長もしくは真四角の画像用のアクションなので、
横長の画像の場合、一部分が切れた状態の画像になってしまいます。
出来上がった横長の画像に関しては、ファイル名をメモをして、
横長の画像用のアクションを作成し、改めてバッチ作業をする必要があります。

eps形式の場合、まだこれくらいで済むのですが、
pdf形式の場合、バッチ処理としてファイルを開いても、
アクションをこなしてくれず、ただファイルが開くだけなので、
さらに一手間が必要です。

まずはある程度の量(50~100ファイル)ごとにpdfファイルを開きます。
マシンパワーで量は調整してください。



「PDF読み込み」ウィンドウが立ち上がるので、
epsの時と同様に、適切な大きさに解像度を修正するか、そのまま開きます。

ここからバッチ作業を行います。

「ファイル」→「自動処理」→「バッチ」

先ほどと違うのは、「ソース」部分を「開いたファイル」とします。
これで開いたファイル全部に対して、バッチ処理が行われていくことになります。

マシンパワーにも寄りますが、絵文字データ600個の変換で、
大体3~4時間程度で作業が終了するのではないかと思います。
大変と言えば大変ですが、バッチ作業なしにやると倍くらいかかるのではないかと思います。

画像の縦長/横長でやり直しするのが面倒だという場合もあると思うので、
まずはバッチ処理で、pdf/eps→png変換のみを行って、
画像サイズで縦長/横長ファイルの区分けを行ってから、
バッチ作業をするというやり方もあると思います。

また、元データが同じで、違うサイズのデータを作成する場合、
ある程度大きな画像を作成して、その画像に対して、バッチ処理を施すことで、
データの使い回しと、作業の簡易化が望めるのではないかと思います。

バッチ処理に関しては、アクションの作成方法や設定を変えることで、
他にも色々使い道があるので、覚えておくと便利だと思います。