Web Tips
back index mail link
head
spacer
デザインの裏技について spacer Photoshop spacer Illustrator
spacer
font HTML 素材
spacer
コラム art book サイトマップ
spacer
Link
 
Creator's Net Creator's Net 自己破産Navi
spacer
美白 de 美肌 ChaoScope Wiki
spacer
spacer
photoshop logo
   







■Photoshop基本講座>>【スライスツール】を究める

 1、スライスをかける。


どこぞで撮った写真にスライスをかけた画像

 

 2、スライスとは?

スライスとは、画像を分割する機能、または分割した個々の画像のことです。

ちなみにスライスツールのアイコンは→

WEBページ等で使用する画像のサイズが大きい時などに使用します。
また、スライスした画像を保存する時に個々の画質を調整出来たり、HTMLのテーブル構造で書き出したりという事が出来ます。

上のみかんの写真を見てください。
「1」,「2」、「3」と数字を割り振られた枠がありますね。

その枠のついた画像がスライスを適応した後の画像になります。
「1」がユーザ定義スライス(自分で選択したスライス)
「2」、「3」が自動スライス(1番に併せて自動的に生成されたスライス)
になります。

また、枠に割り振られた数字の一つ右隣にあるアイコンは
「スライスした画像を表すスライス記号」

更にその右隣のアイコンは同じ画質で保存されることを示しています。

 3、ユーザー定義スライスを動かそう

スライス選択ツールを使います→

この時、動かすことが出来るのはユーザ定義スライス、つまり上の画像で言うならば「1」のスライスだけです。自動スライスの「2」、「3」は動かすことが出来ません。

 

スライス選択ツールを使ってユーザ定義スライスを選択すると、茶色のハンドルで囲まれ自由に動かすことが出来る様になります。

ユーザ定義スライスを選択してドラッグすると右のように自動スライスも変化します。

スライスした画像が重なった場合、スライス選択ツールのオプションで重なりの順番を変えることが出来ます。

 4、スライスオプションを設定する

スライス選択ツールのオプションを使います。


上の様に表示されているスライスオプションをクリックします。

クリックすると右の様な画像が出てきます。

選択中のスライスした画像に対してWEBページ用の様々な設定を行えます。


上から順に

■スライスの種類:画像、画像なし、テーブル

■名前:スライスした画像の名前を指定

■URL:リンク先の画像やWEBページのファイル名を指定

■Target:URLで指定したリンク先を表示するフレームを指定する。

■メッセージテキスト:画像にマウスをあてた時、ステータスバーに表示される文字を入力する。

■Alt:ブラウザで画像が表示されないときに表示する文字を入力する。

■寸法:スライスした画像の位置やサイズを指定する。

■スライスの背景タイプ:画像の背景色を指定する。

 5、WEB用に書き出し

スライスを設定した画像をWEB用に保存する時、設定でカスタムを選択。

設定の下の項目でスライスを選択する事によって一つ一つの画像に名前をつけることが出来る。

右画像が設定画面。

「テーブルを生成」を選択すると

Tableタグを使った表に画像が配置される。

「CSSを生成」を選択すると

画像の配置がCSSで保存されます。

この二項目の内から保存方法を選べます。








back
<<Photshopコンテンツメインに戻る







bottomimage
copylogo
Web Tips copy right© 2006.ぶっぽ allrights reserved.