Adobe Photoshopに関するTipsや便利な裏技を紹介するサイトです。グラフィック、DTP、WEB、映像…様々な場面で活用できるテクニックを紹介していきます。

2012年01月26日(木)

Adobe Photoshop
FireworksのスライスレイヤーをPhotoshopで実現【決定版】

dearps

Dearpsでは今までにPhotoshopでのスライスを楽にする裏テクニックを数々公開してきました。
【WEBデザ向け】スライスチップ作成パネルver2-CS4.CS5用【WEBデザ向け】スライスチップ作成パネルver2-CS4.CS5用

スライスチップ作成パネル-CS4用スライスチップ作成パネル-CS4用

【裏技】「ちょっと変わったスライス作成テクニック」【裏技】「ちょっと変わったスライス作成テクニック」

スライス作成テクニックスライス作成テクニック

今回はこれらの決定版ともいえるスクリプトを作成する事が出来たので公開します。

【今回公開するスクリプトの特徴】

・選択範囲をスライスに変換する。
・スライスをFireworksのようにレイヤーで管理できる。
・スライスはWEBレイヤーフォルダに自動格納される。
・画像名称をスライス作成時入力できてレイヤー名にも反映される。
他にもメリットたくさん!まずはだまされたと思って使ってみて下さい=3

利用方法はこんな感じ。

【1】ファイルメニューから[スクリプト]>[参照]を選択し、ダウンロードしたスクリプトファイル”fw_slice.jsx”を選択し読み込む

【2】バウンディングボックス が表示されるのでそれをスライス対象のサイズに変形させて確定(enter)します

【3】スライス名を入力するダイアログがでてくるので画像名を入力します。

【4】スライスがレイヤーとして保存されました。この方法で作成されたスライスはWEBレイヤーというグループに自動格納されます。

※もうひとつの使い方

事前にスライスを切りたいサイズに選択範囲を作成してから【1】を実行するとそのサイズでスライスが作成されます。

スクリプトのダウンロードは以下から。

2012年01月21日(土)

Adobe Photoshop
レイヤー名にレイヤーのサイズを追加

nuri

パーツのサイズを簡単に調べてレイヤー名に追記することができるスクリプトです。コーダーさんにぜひお勧めしたいスクリプトです。

【1】サイズを取得したいレイヤーまたはレイヤーグループを選択します。

step1

【2】ファイルメニューから[スクリプト]>[参照]を選択し、ダウンロードしたスクリプトファイル【layer_size.jsx】を選択し読み込む

step2

【3】レイヤー名(レイヤーグループ名)にサイズが追記されました!!

step3

layer_size.jsxのダウンロードは以下から。

2012年01月07日(土)

Adobe Photoshop
PowerPoint,Keynote用背景

ppt_bg_thum

パワポの背景をフォトショで作成したので公開します。PSDもあるので適宜色味等変更して利用して下さい。一番上の調整レイヤーで色相をいじってもらえば色違いが作成できます。
パワポはフォントをメイリオにして背景を変える一手間で雰囲気がグッとよくなります。

PSDデータのダウンロードは以下から。

2011年12月18日(日)

Adobe Photoshop
背景のひと工夫で洗練されたイメージにするPhotoshop Tips

bg

今回はホワイトバックで撮影されたような背景効果を表現をする方法を紹介します。

bg01

[1]メニューからレイヤー/新規塗りつぶしレイヤー/べた塗りを選択。色を#afb7baに設定。

bg02

[2]次にレイヤー/新規調整レイヤー/トーンカーブを選択。(“下のレイヤーを使用してクリッピングマスクを作成”にチェックを入れる。)

bg03

[3]トーンカーブを“出力:238 入力:173”に設定する。

bg04

[4]あとは適宜トーンカーブのマスクに対してブラシを使用して“黒”で塗りつぶしていって下さい。この際ブラシをマスター直径を大きめにして硬さを“0%“、”流量を30%”程度に設定するといい感じに仕上がります。
以上で完成です。

bg05

2011年11月26日(土)

Adobe Photoshop
紙媒体用:塗り足し3mm自動付加スクリプト

nuri

フライヤー、リーフレットなど印刷物作成用のスクリプトです。
指定した用紙サイズでガイドを引き自動で塗り足し分3mmカンバスサイズを拡大します。

【使用方法】
ダウンロードした“印刷物_塗り足し3mm.jsx”ファイルをPhotoshopのスクリプトフォルダに入れて、[ファイル] / [スクリプト]より実行。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

もしくはメニューバー内 [ファイル] → [スクリプト] → [参照] から“印刷物_塗り足し3mm.jsx”を選択すると、実行されます。

印刷物_塗り足し3mm.jsxのダウンロードは以下から。

2011年11月23日(水)

Adobe Photoshop
CSS Nite LP, Disk 22「Webデザインで使うPhotoshop」

CSS Nite LP, Disk 22「Webデザインで使うPhotoshop」

CSS Niteが来年3月にPhotoshopにスポットをあてたセミナーを開催する様です。
Webデザインで使うPhotoshopということでとても興味深いです。
詳しくはCSS NITTEのサイトにてご確認下さい。

2011年09月15日(木)

Adobe Photoshop
幅!高さ!角丸!サイズを指定してシェイプを作成!

shape

フォトショのシェイプをダイアログからサイズを入力して作成するスクリプト

ずっと欲しかった念願のスクリプトが完成しました(^^)
そもそもなんで標準機能としてないんでしょうか?
使い方は超簡単。以下からどうぞ。

※2011.9/1追記
早速ですが少し修正を加えました。レイヤー名に自動で“幅,高さ,角丸”のサイズが入る様にしました。
tuika

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

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

Shape_Dearps.jsxのダウンロードは以下から。

〜最近同僚の元プログラマH氏にjavascriptを教えてもらって勉強しています。今迄プログラムを毛嫌いしていたんだけどjavascriptの魅力にはまりつつある今日この頃。アクションでは実現できなかった事がスクリプトによっていろいろと実現しそうなので今後便利なスクリプトをどんどん作って公開していければと思っています。

2011年09月11日(日)

Adobe Photoshop
プロパティ カラー変更アクション

color

プロパティ カラー変更アクション

プロパティ カラー変更アクションを作成しました。隣接するレイヤーであれば複数のレイヤーのプロパティ カラーを一括変更する事も可能です。

property.atnのダウンロードは以下から。

2011年09月10日(土)

Adobe Photoshop
シェイプを“磨りガラス”に一発変換!!

glass

シェイプを“磨りガラス”に変換するスクリプト

シェイプを磨りガラス化させるスクリプトを作成しました。タイトルには1発って書きましたが嘘です。すみません。
最初は一発で作成したんですがディーテールの調整を途中で設定できる様にしたので;
詳しくは映像をご覧下さい。

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

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

Glass_plate_shape.jsxのダウンロードは以下から。

Top of Page