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

先日「ちょっと変わったスライス作成テクニック」でご紹介したテクニックをスクリプト化させ、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)

レイヤーに基づく新規スライス

スライスを切る方法はスライスツールだけではありません。今回は知られているようで知られていない”レイヤーに基づく新規スライス”という機能を紹介します。

レイヤーパレットでスライスを切りたいパーツを選択し、［ レイヤー］メニューの［レイヤーに基づく新規スライス］を選択すると一瞬でそのレイヤーサイズに合わせたスライスが生成されます。
レイヤーを複数選んで実行してもOKです。

私は各パーツを「スマートオブジェクト」化して、最後にこの方法でスライスを切っています。

リピートする予定の背景画像やマスクを使用しているパーツは「ちょっと変わったスライス作成テクニック」の記事で紹介しているテクニックをご利用下さい。

関連する投稿

• スライスチップ作成パネル-CS4用 (0)
• 【裏技】「ちょっと変わったスライス作成テクニック」 (0)
• 写真や画像の外枠をぼかす (0)
• サイズを指定してシェイプを描く＋α (0)
• 「スマートオブジェクト」活用法 (0)

WEBサイトのナビゲーション等を作る際のスマートオブジェクト活用法

スマートオブジェクトというとPhotoshop 上で写真やIllustratorのベクトルデータなどのデータの画質を劣化させずに拡大縮小、変形、移動する機能としてしられています。
その機能に隠れてあまり知られていないようですが [スマートオブジェクト]でFlashやFireworksにあるようなシンボルとインスタンスの親子関係をもったパーツををつくることができます。
WEBサイトのナビゲーション等同じパーツが連続するものをデザインする際は[スマートオブジェクト]を活用することによってメンティナンス性が向上します。

【インスタンスの作り方】

(１)ナビパーツをデザイン

(２)完成したらレイヤーパレット上でナビを構成するすべてのレイヤーを選択し[レイヤー] メニューの [スマートオブジェクト］ ／［新規スマートオブジェクトに変換］を選択します。またはレイヤーパレットで右クリックで［新規スマートオブジェクトに変換］を選択する。

(３)これを親としてインスタンスを必要数複製します。
レイヤーを選択し [レイヤー] メニューの [レイヤーを複製] を選択します。
または、スマートオブジェクトのレイヤーを、[レイヤー] パレットの下部にある [新規レイヤーを作成] アイコンにドラッグかAltを押しながら複製でも可。

(４)これで複製されたスマートオブジェクトは１つに対して変更を加えると、複製された全てのスマートオブジェクトにも編集内容が反映されるようになります。

※[レイヤー] メニューの [スマートオブジェクト]/ [スマートオブジェクトを複製]を選択すると関係を切った独立したスマートオブジェクトとして複製することができます。

参考用にサンプルPSDデータを用意しましたので下記からどうぞ。

関連する投稿

• 写真や画像の外枠をぼかす (0)
• スライス作成テクニック (0)
• スライスチップ作成パネル-CS4用 (0)
• サイズを指定してシェイプを描く＋α (0)
• 【裏技】「ちょっと変わったスライス作成テクニック」 (0)

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

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

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

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

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

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

関連する投稿

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

ダウンロードは以下サイトから

『Phize on the Web』

カラムウィザード(1.0.0) – Adobe Photoshop

関連する投稿

• 外枠にガイドを引くスクリプト (1)
• 写真や画像の外枠をぼかす (0)
• スライス作成テクニック (0)
• スライスチップ作成パネル-CS4用 (0)
• 【裏技】「ちょっと変わったスライス作成テクニック」 (0)