WebやDTPなどのTipsを備忘録として書き込むブログ。
Q.透明部分の有るTiff画像をイラストレータ上に配置
Photoshop上で、モノクロ２階調の画像を作り、
TIFFで保存します。
それをIllustratorに配置すると、白い部分は勝手に透明になります。
残った黒い部分には、Illustrator上で色をつけることもできます。
ステップ１
Photoshopで画像を開く
ステップ２
イメージ＞モード＞グレースケールに一旦変換
ステップ３
その後、イメージ＞モード＞モノクロ２階調 に変換します。
（RGBから直接モノクロ２階調への変換はできません。）
ステップ４
上記作業が終了したら、別名で保存でTIFF形式を選んで保存すればOKです。
ステップ５
後は、イラレで配置すればOKです。
楽天は、「商品ページ設定」の「商品個別登録」画面で商品登録を行います。
その際、下記の3箇所に入れる内容が重要です。
・商品名
・キャッチコピー（PC用/モバイル用）
・商品説明文（PC用/モバイル用）
上記3つにいれた内容は、買い物かごの周りに表示されます。
そして、この内容の中に含まれる言葉（キーワード）が楽天市場の検索に使われることになります。
特に、商品名は検索した時の検索結果一覧に表示されます。
商品名を魅力的につけるとクリックしてもらえる率が高まるでしょう。
「PC用商品説明文」「PC用販売説明文」「カテゴリ説明文上」
「カテゴリ説明文下」 「トップ説明文上」「トップ説明文下」
「ヘッダー・フッター・レフトナビ」「共通説明文（大）」
「決済方法の備考欄(PC)」「配送方法の備考欄」「送料設定の備考欄」
◆外部ファイル
外部のcssファイルを読み込む属性（タグ）は使えないので
「style要素内で指定」または「任意のタグのstyle属性で指定」
のどちらかの方法でCSSを記述
◆新RMS
新RMSではタグが使えない。。。
一部のフォントカラーを変えたい時はタグを使用。
①楕円形ツールで真円を描く
楕円ツールで円を描く
②画面（又は、表示）
・ポイントにスナップとスマートガイドにチェックを付ける
ポイントスナップとスマートガイドにチェック
③ペンツールで円の中心をクリック
ペンツールで円の中心をクリック
④Ｓｈｉｆｔを押したままで円の外をクリック（円の半径よりも長い直線を描く）
Ｓｈｉｆｔを押したままで円の外をクリック
⑤回転ツールをクリック
・回転ツールでＡｌｔを押したままで円の中心をクリック
・角度を入力（３６０度/分割数）
・コピー
回転ツールをクリック
Ｃｔｒｌ＋Ｄキーを円が等分割になるまで押す
⑥全体を選択ツールで選択
全体を選択ツールで選択
パスファインダパレット内の「分割」をクリック
⑦オブジェクト
・グループ解除
オブジェクト→グループ解除
⑧分割した図形を個別に選択・編集。
画像を重ねて表示するとは？
例えば次の画像のように、「商品」の画像と「送料無料」の画像 2枚を重ねて表示するような場合を言っています。
サンプルを用意しました。（サンプルをご覧ください）
効果的に画像を重ねて使う方法（1）
▼コチラのサイトを参考にしました▼
http://kumacrow.blog111.fc2.com/blog-entry-492.html#comment878
①HTMLコード
<a href="～"><img src="（画像1）" width="240" height="240" /></a><br /> <a href="～"><img src="（画像2）" class="souryou" width="140" height="30" /></a>
②CSSコード
.souryou {
position: relative;
top: -55px;
left: 195px;
}
画像1が背面に配置する画像で、画像2が前面に配置する画像です。そして、画像2には classで「souryou」を指定します。
クラス名「souryou」では、position（配置）プロパティで、relative（相対配置）を行っています。画像の大きさにあわせて、数値を変更します。
ちょっと問題なのが、「position: relative;」している画像の大きさだけ、画像同士の間が空いてしまいます。
効果的に画像を重ねて使う方法（２）
（1）の方法よりもいい方法を
①HTMLコード
<div class="goods"> <a href="～" class="goods-menu"><img src="（画像1）" width="240" height="240" /></a> <a href="～" class="order"><img src="（画像2）" width="140" height="30" /></a> </div>
②CSSコード
.fw_cellin_3 a{display: block; }
.fw_cellin_3 {
margin-bottom: 5px;
width:240px;
height: 24px;
position: relative;
color:#333;
text-align:center;
font-weight:bold;
font-size:12px;
}
a.goods-menu {
border: 1px solid #777;
width: 250px;
height: 188px;
}
a.order {
position: absolute;
top: 133px;
left: 195px;
width: 50px;
height: 50px;
}
サンプルを用意しました。（サンプルをご覧ください）