レイヤーボックス作成スクリプト

img01

今回はwebバナーやボタンを作成する際に便利なスクリプトを紹介します。

まずはじめに以下リンク先よりスクリプトをダウンロードして下さい。
レイヤーボックス作成.jsxのダウンロードは以下から。

【準備】
ダウンロードした“Dearps_LayerBox.zip”を解凍し、「レイヤーボックス作成.jsx」ファイルをPhotoshopのスクリプトフォルダに入れる。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

使用方法

①Photoshopを起動し、[ファイル] / [スクリプト]から「レイヤーボックス作成.jsx」を実行します。

②するとダイアログが表示されるのでサイズ等の情報を入力します。

以上でレイヤーボックスの出来上がりです。

img02
img03

バナーやボタンを制作する際のベースとしてご利用ください。

Webデザイン超効率化(カンプ制作下準備 編)

top

今回は“WEBデザイン超効率化 第2弾”として、デザインカンプを制作する際の下準備を自動化するスクリプトを紹介します。

まずはじめに以下リンク先よりスクリプトをダウンロードして下さい。
Dearps_サイトカンプ.zipのダウンロードは以下から。

【準備】
ダウンロードした“Dearps_サイトカンプ.jsx”ファイルをPhotoshopのスクリプトフォルダに入れる。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

使用方法

①Photoshopを起動し、[ファイル] / [スクリプト]からDearps_サイトカンプ.zipを実行します。

②すると下記画像のダイアログが表示されるので名前やサイズ等の情報を入力します。

02

③以上でサイトカンプのベースが出来上がりです。

03

Webデザイン超効率化(ナビゲーション編)

00

WEBデザインの超効率化ということで今回はナビゲーションのデザインにスポットをあててテクニックを紹介したいと思います。
私自身が業務で行っているナビゲーション作成のフローを以下に紹介します。

①ナビゲーションのベースになるシェイプを作成します。

01

ここでは当ブログで配布しているスクリプトを使用します。

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

②シェイプにレイヤー効果等を利用して装飾する。

02
様々なレイヤー効果が公開されているのでそちらを利用するとより効率化が図れます。
保存版!Photoshop用無料レイヤースタイル750個+まとめ [PHOTOSHOP VIP]

③装飾が完了したらレイヤーを全て選択してスマートオブジェクト化させます。

03
レイヤー/スマートオブジェクト/スマートオブジェクトに変換
※スマートオブジェクト化する理由は後ほど。

④スマートオブジェクトの上にテキストレイヤーを作成し、テキストを入力

04
配置、行揃え共に中央に!(テキストを変更してもレイアウトが崩れ無い様にするため。)

⑤テキストレイヤーと先ほど作成したスマートオブジェクトをグループ化する。

05
これでナビゲーションボタンの1つ目が完成。次のステップからこれを必要数分、複製して行きます。

⑥複製スクリプトでナビゲーションを複製!!

06
今回紹介するテクニックの目玉です。

まずは以下リンク先よりスクリプトをダウンロードして下さい。
Dearps_copy_yoko.zipのダウンロードは以下から。

【準備】
ダウンロードした“Dearps_複製横移動.jsx”ファイルをPhotoshopのスクリプトフォルダに入れる。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

準備が完了したら先ほどのグループ化したナビゲーションを選択した状態で[ファイル] / [スクリプト]からDearps_複製横移動.jsxを実行する。

すると自動でグループが複製されてナビゲーションの横幅分移動されます。

これを必要数分くりかえしてそれぞれのテキストを変更して完了です。

③でスマートオブジェクト化した理由

07
スマートオブジェクト化したものを複製するとすべてコピー元の情報が関連付けされます。

これにより1つのスマートオブジェクトに修正を加えれば全てのスマートオブジェクトに修正内容が反映されます。

ナビゲーションのデザインの修正が非常に楽になります。

以上でWEBデザイン超効率化(ナビゲーション編)は終了です。

次回はWEBデザイン超効率化(バナー編)を紹介しようと思っています。

それではまた!

⑥で紹介したスクリプトの縦移動版は以下から。

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】を実行するとそのサイズでスライスが作成されます。

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

Photoshopで超絶簡単に点線・破線をかく

dot

まずはじめに以下リンク先よりスクリプトをダウンロードして下さい。
dot_line.zipのダウンロードは以下から。

【準備】
ダウンロードしたzipファイルを解凍し、“Dearps_点線破線.jsx”ファイルをPhotoshopのスクリプトフォルダに入れる。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

使用方法

①Photoshopを起動し、[ファイル] / [スクリプト]からDearps_点線破線.jsxを実行します。

②すると上記画像のダイアログが表示されるので数値を入力します。

以上で出来上がりです。

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

nuri

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

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

step1

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

step2

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

step3

レイヤーサイズ追記.jsxのダウンロードは以下から。

PowerPoint,Keynote用背景

ppt_bg_thum

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

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

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

bg

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

bg01

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

bg02

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

bg03

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

bg04

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

bg05

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

nuri

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

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

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

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