WEB用写真を黄金比&白銀比でトリミングするアクション

美しいデザイン・レイアウトを生み出すのに必要不可欠な黄金比と白銀比。
この比率を取り入れることでバランスのいい綺麗なデザインになるといわれています。
コリスさんのサイト黄金比をサイトのデザインに取り入れる簡単な３つの方法でも紹介されているようにWEBデザインにおいても多く取り入れられています。
今回はこの黄金比と白銀比でWEB用画像を簡単にトリミングできるようにアクションを作成したので配布します。WEBの画像で使いやすいように160px〜500px(長辺)までの各種サイズ用意しました。

ちなみに“Dearps”では白銀比を利用しております。
白銀比は、日本が発祥で法隆寺などの寺や、建築物に多く見られる比率で日本人に馴染みの深い比率とされています。私も黄金比よりも白銀比のほうがしっくりくる気がします。

黄金比&白銀比トリミングアクションのダウンロードは以下から。

※追記:2010.5/21

黄金比&白銀比トリミングアクション ver.2を公開しました。
サイズ指定なしで画角の比率だけ黄金比、白銀比にクロップすることができます。

関連する投稿

• 写真や画像の外枠をぼかす (0)
• 写真のシャープ処理 (0)
• 作業効率化：ドロップレット (1)
• フォトショップでレンズフレアを入れる (0)
• フォトショップでも点線・破線を簡単に描けるアクション (6)

フォトショップ　アクションの基本的な使用方法を解説します。

フォトショップのアクションは一連の操作を記録して再利用(自動化)することのできる機能です。
例えば…
100枚の写真(同じ条件で撮影されたもの)をリサイズさせて色調補正してくれという案件が降ってきた場合アクションを使えないデザイナーにとっては地獄ですが、アクションのノウハウを持ったデザイナーであれば楽勝に感じるでしょう。作業時間でいっても前者の1/10もかからないでしょう。
このようにPhotoshopを使っているデザイナーにとっては必要不可欠で非常に重要な機能だと思います。
あまりアクションを利用していない方は是非この機能を活用することをお進めします。
それではアクションの使い方の解説をしていきます。

【操作説明】

今回の例であげた案件を想定して操作説明を行います。

(1) まず１枚目の写真を開く。

(2) 写真に加える加工の一連の操作を頭に思い描く。今回の例でいうと[リサイズ→トーンカーブ→アンシャープマスク→保存→閉じる]です。一通りイメージできたら[ウインドウ][アクションパネル]を表示させる。

(3) アクションパネルの新規アクションを作成ボタンを押して記録をスタートさせる。

(4) 一連の操作を実行する。[リサイズ→トーンカーブ→アンシャープマスク→保存→閉じる]
という過程でリサイズ＆色調補正して任意の場所に保存して閉じます。
保存は上書きではなく別名で保存して新規でフォルダを作成してそこを保存先に指定しましょう。アクションは保存先も記録してくれます。

(5) 記録の中止ボタンを押す。これでアクションの完成です。

(6)あとは残りの99枚の写真に作成したアクションを実行していく。以上で作業終了です。

今回の例のように100枚とかの写真になってくるとアクションの再生ボタンを100回押すのも正直しんどい。
そういうときは以前このサイトで解説したドロップレットという機能をあわせて活用してください。

関連する投稿

• 黄金比&白銀比トリミングアクション (2)
• 写真や画像の外枠をぼかす (0)
• 作業効率化：ドロップレット (1)
• フォトショップでレンズフレアを入れる (0)
• フォトショップでも点線・破線を簡単に描けるアクション (6)

オンラインストレージサービス「Dropbox」を利用したアセット管理

「Dropbox」というオンラインストレージサービスを利用してフォトショップのアセット(アクション、スタイル、ブラシ、スウォッチ等)を管理すると非常に便利です。職場でも家でも同じ環境で作業が行えます。Dropboxフォルダに置いているファイルを更新すると自動で同期をとってくれ、アップロード作業がいらないってところがすごくいい。
無料で2GBのディスクスペースを利用できるのでフォトショップのアセット管理程度なら余裕で無料の容量で足りてしまいます。

「Dropbox」の詳しい説明はインプレスWEBサイトで紹介されているのでそちらをどうぞ。

関連する投稿

• 黄金比&白銀比トリミングアクション (2)
• 写真や画像の外枠をぼかす (0)
• 作業効率化：ドロップレット (1)
• フォトショップでも点線・破線を簡単に描けるアクション (6)
• スライスチップ作成パネル-CS4用 (0)

Photoshopで点線・破線描くときって皆さんどうしていますか？
何通りか方法がありますがどれも非常にめんどくさいでよね。
なので今回Photoshopでも点線・破線を簡単に描けるようにアクションを作成いたしました。

【アクション使用方法】　対応CS2～
(1) 今回配布するzipファイルを解凍する。
(2) “点線と破線.atn”と“点線と破線.pat”をそれぞれダブルクリック。
(3) そうするとPhotoshopに読み込まれます。
(4) [ウインドウ]メニューから [アクション]を選択し、アクションパネルを表示して“点線と破線”が読み込まれていることを確認する。
(5) ツールバーにある長方形ツールやラインツール等で点線・破線を作りたいサイズのシェイプをつくる。
(6) シェイプが選択された状態でアクションパネルの“点線と破線”の中から適当なものを選び再生させます。
(7) するとシェイプが点線・破線の塗りつぶしレイヤーに変換されます。以上で完成です。

アクションのダウンロードは以下から。

関連する投稿

• 黄金比&白銀比トリミングアクション (2)
• 写真や画像の外枠をぼかす (0)
• 作業効率化：ドロップレット (1)
• スライスチップ作成パネル-CS4用 (0)
• サイズを指定して矩形を描く (0)

スライスチップ（スライスレイヤー）を生成するスクリプト＆ツールパネルをつくりました。

先日「ちょっと変わったスライス作成テクニック」でご紹介したテクニックをスクリプト化させ、Adobe Configuratorを使用しツールパレット化したので公開します。CS4専用となります。

【使用方法】

(1) 上のリンクから『スライスチップ生成ツールパレット』ダウンロードする。zipファイルを解凍し、フォルダを［アプリケーション］／［Adobe Photoshop CS4］／［Plug-ins］／［Panels］にまるごと入れる（マックの場合）

(2) Photoshop CS4を立ち上げ［ウインドウ］／［エクステンション］メニューから”slice_tip”パネルを読み込む。

(3) 上図のようにパネルが読み込まれます。

（4）パネルから拡大ツールを選択しスライスをきりたいパーツを拡大する。

(4) 次に選択ツールでスライスをきるパーツの選択範囲をとる。

(5) 選択範囲がずれてしまった場合は調整ボタンを押し微調整する。

(6) 選択範囲がきまったら確定させSlice Tipボタンを押す。

(7) するとレイヤーに”Slice Tip”というレイヤーが生成されます。

(8) 以上でスライスチップ作成完了です。

このパネルを利用するとスライスをレイヤーとして管理できるのでWEBサイト制作に重宝します。

関連する投稿

• 【裏技】「ちょっと変わったスライス作成テクニック」 (0)
• 写真や画像の外枠をぼかす (0)
• スライス作成テクニック (0)
• 黄金比&白銀比トリミングアクション (2)
• 作業効率化：ドロップレット (1)

Fireworksのスライスオブジェクト(…の様な)機能をPhotoshopで実現させる裏技的アクション

選択範囲を利用してスライスをレイヤーとして保存する機能をアクションでつくりました。名づけて【スライスチップ】。

【使用方法】

まずアクションパレットから今回配布する「スライスチップ生成」アクションを読み込む。

次にスライスを切りたい範囲を選択ツールなどで選択し、アクションの先ほど読み込んだ「スライスチップ生成」ボタンを押すだけ。

するとスライスチップというレイヤー生成されます。

スライスチップを関連するパーツとグルーピングやリンクしておけばパーツを移動や拡大してもスライスを再設定する必要がなくなります。

このアクションとAdobe Photoshop「スライス作成テクニック」の記事で紹介したテクニックをあわせることでスライス作業が大幅に楽になります。

結構重宝しているので良かったら試してみて下さい。

「スライスチップ生成」アクションのダウンロードは下記からどうぞ。

【Mac OSX】

【Windows】

関連する投稿

• スライスチップ作成パネル-CS4用 (0)
• 写真や画像の外枠をぼかす (0)
• 作業効率化：ドロップレット (1)
• スライス作成テクニック (0)
• サイズを指定して矩形を描く (0)

アクションを利用して『MAC OSX Expose’風 機能』をつくってみた。あくまで”風”です…

Photoshop(以下 フォトショ)でデザインしていて気がついたらドキュメントがちらかり放題で、作業をしたいドキュメントをすぐに見つけ出せない…なんて事がよくありました。

そんな時MAC OSXの機能『Expose’』がフォトショにもあればなーと考えていました。

それで今回はフォトショのアクションを利用して『Expose’』風機能を作りましたので公開します。…といっても本家の使い勝手にはほど遠いいですがなかなか便利だと思われるので是非試してみて下さい。

使用方法

(1)アクションパレットからexpose.atnを読み込む。
(2)Exposéセット内にアクションが２つ入っているのでそれぞれにショートカットキーを指定する。

私は、
Exposé STEP 01を　【F2】
Exposé STEP 02を　【F3】を指定しています。

以上で設定は完了です。

(3)次に動作ですが複数のウインドウが開かれた状態で【F2】を押す。
すると散らかっていたウインドウが綺麗に並べられます。
次に作業をしたいウインドウを選択し【F3】を押すと選んだドキュメントがフル表示になります。
以上。

アクションのダウンロードはこちら

関連する投稿

• 黄金比&白銀比トリミングアクション (2)
• 写真や画像の外枠をぼかす (0)
• 作業効率化：ドロップレット (1)
• フォトショップでも点線・破線を簡単に描けるアクション (6)
• スライスチップ作成パネル-CS4用 (0)

【１】背景が白、もしくは１色の場合。

レイヤー効果の光彩（内側）で設定します。
まず描画モードを通常に。
不透明度を１００％に。
色を背景色と同色に。

最後にチョークとサイズを調整してぼかし具合を設定し完了。

【２】写真を重ねる場合や背景色が多色を用いている場合。
この場合はマスクを利用します。

普通にやるとけっこうめんどくさいんで【１】のような感覚で簡単に設定できるようアクションをつくりましたのでよかったら以下からどうぞ。

（スーパー　アルファ　バージョン）

関連する投稿

• スライスチップ作成パネル-CS4用 (0)
• 【裏技】「ちょっと変わったスライス作成テクニック」 (0)
• 黄金比&白銀比トリミングアクション (2)
• 作業効率化：ドロップレット (1)
• フォトショップでも点線・破線を簡単に描けるアクション (6)

今回はあまり知られていないPhotoshopの『ドロップレット』の利用の仕方を紹介します。

この機能は簡単にいうとアクションを設定したドロップレットアイコンをデスクトップや任意の場所に作り、そこに画像、または複数枚の画像を入れたフォルダをドラック＆ドロップをすると指定したアクションを全てに適用してくれるという優れものです。また保存場所や保存ファイル名（連番をふったり）も指定する事もできます。

STEP1　ドロップレットに指定したい項目をアクションパレットから選ぶ。

STEP2　ファイル／自動処理／ドロップレットを作成をクリック

STEP３　ドロップレットアイコンを置く場所、加工後の画像の保存場所等を設定する。

実行後の設定はフォルダを指定する事をおすすめします。保存して閉じるだと上書きされてしまいます。

STEP４　以上設定は完了。あとは画像またはフォルダをドロプレットアイコンに投げ込むだけ。

関連する投稿

• サイズを指定して矩形を描く (0)
• 【裏技】「ちょっと変わったスライス作成テクニック」 (0)
• 黄金比&白銀比トリミングアクション (2)
• 写真や画像の外枠をぼかす (0)
• フォトショップでも点線・破線を簡単に描けるアクション (6)

表題の機能は Photoshopにありそうでない。

この機能を javascriptで作るべく今日は参考になる本がないか仕事帰りに本屋で調べてきた。

参考どころかフォトショの本は山ほどあるけどどの本にも javascriptの文字すらない。

だけどちょっとひらめいたんでこの機能をアクションでつくってみた。

そのうち javascriptで作って配布できればな…。

関連する投稿

• 作業効率化：ドロップレット (1)
• 【裏技】「ちょっと変わったスライス作成テクニック」 (0)
• 黄金比&白銀比トリミングアクション (2)
• 写真や画像の外枠をぼかす (0)
• フォトショップでも点線・破線を簡単に描けるアクション (6)