関連する投稿

• 関連する投稿はありません。

PhotoshopでおこしたデザインがそのままFlexアプリのRIAに変換できるということで話題のAdobe Flash CatalystのパブリックベータがAdobe Labで公開されました。試したい方は以下リンクから。なお、CS4のPSDデータしかサポートされていないっぽいのでCS4もっていないかたはこちらのデータをご自由にお使いください。

Adobe Flash Catalyst　β(Adobe Lab)

簡単な説明はこちらから。(Adobe Edge)

関連する投稿

• アクションやスタイル等のアセット管理 (0)
• Adobe Configuratorでパネルのカスタマイズ (CS4) (0)

レンズフレアをフォトショップデータでを配布します。

先日フォトショップでレンズフレアを入れるという記事を書きましたがもっと手っ取り早くレンズフレアを表現したい方の為に色質感調整済みのPSDデータをダウンロードできるように致しました。商用利用も、もちろん可です。
下記よりダウンロードしてください。

関連する投稿

• フォトショップでレンズフレアを入れる (0)
• お引っ越ししてきました。当サイトデザインカンプPSD配布あり (0)

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

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

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

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

関連する投稿

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

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

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

【操作説明】

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

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

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

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

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

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

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

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

関連する投稿

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

Photoshopのカンバスの外枠にガイドを引くスクリプト

カンバスのサイズに合わせたシェイプを描きたい場合等フォトショップはピクセルにスナップしてくれないので外枠にガイドをひく必要があります。これを自動化させたスクリプトを作成したので配布します。

【使用方法】
ダウンロードした“外枠ガイド.jsx”ファイルをPhotoshopのスクリプトフォルダに入れて、[ファイル] ／ [スクリプト]より実行。
Windows: C:\Program Files\Adobe\Adobe Photoshop CS2\プリセット\スクリプト
MacOS X: /アプリケーション/Adobe Photoshop CS3/Presets/Scripts

もしくはメニューバー内 [ファイル] → [スクリプト] → [参照] から“外枠ガイド.jsx”を選択すると、実行されます。

外枠ガイドを作成するスクリプトのダウンロードは以下から。

関連する投稿

• サイズを指定してシェイプを描く＋α (0)

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

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

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

関連する投稿

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

Illustratorを利用してフォトショップでレンズフレアを入れる方法

Photoshopのデフォルトフィルタでも逆光(レンズフレア)というものが用意されていますが、これは正直使いものになりません。とにかく自由度がなく加工もできないしきれいじゃない。
Photoshop用のブラシでレンズフレア風ブラシが配布されていますがこれもブラシという特性上単色でいまいち味気ない。

かたやIllustratorのフレアツールはなかなかクオリティが高いし自由度が高い。…そこでなんとかIllustratorのフレアツールで描いたレンズフレアをPhotoshopで利用できないかと思い色々試してみた結果なかなか良い感じにしあがったので今回はこのIllustratorのフレアをPhotoshopで利用するテクニックを紹介します。

【レンズフレアの作り方】

(1) まずIllustratorのフレアツールでフレアツールを選択する。

(2) 適当なサイズのレンズフレアを描画してコピーをする。

(3) Photoshop側で、スマートオブジェクトとしてペーストする。このとき任意のサイズに拡大・縮小する。

(4) レンズフレアレイヤーの描画モードを“覆い焼きカラー”に変更する。

(5) 次に レンズフレアレイヤーに対しトーンカーブや不透明度を調整しベースの写真に合わせレンズフレアの質感を調整する。コントラストを強くすると虹色になったりするのでいろいろ試して調整してください。白く飛びすぎてしまっている部分はトーンカーブにレイヤーマスクをかけ調整します。

以上で完成です。

簡単なので是非お試し下さい。

関連する投稿

• 黄金比&白銀比トリミングアクション (0)
• 写真のシャープ処理 (0)
• レンズフレアのPSDデータ配布(商用可) (0)
• アクション使用方法【基本編】 (0)

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

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

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

関連する投稿

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

今までLovwar’s Design Noteというブログを運営しておりましたがPhotoshopネタやら趣味のスプレーアートやらなんやらでごっちゃになってたんでこのサイト“Dearps”を立ち上げPhotoshopネタはこちらにしぼって紹介していくことにしました。

実務に活用できるようなPhotoshopのテクニックをどんどん紹介していこうと思っているのでよろしくお願いいたします。

引っ越し記念にこのサイトのデザインカンプをダウンロードできるようにしました。
海外の方のカンプは観る機会はあっても日本人の方のカンプってあまりみる機会ってないですよね。私のでよろしければこの機会に覗いてみてください。

私のデザイン方法の特徴はレイヤーカンプを利用してページとスライス用のレイアウトをわけるところ(今回はトップとスライス用2つのみ)と、独自の方法でスライスをオブジェクトとして管理しているところです。
カンプ制作の流れについては今度詳しく紹介したいと思います。

当サイトのデザインカンプPSDのダウンロードは以下から。

関連する投稿

• レンズフレアのPSDデータ配布(商用可) (0)