Home > 背景用レイヤー > web2.0風斜めストライプレイヤー ストライプジェネレーター風?

web2.0風斜めストライプレイヤー ストライプジェネレーター風?

斜め線。 結構最近使用が増えてきているものの、何度もちまちまコピペするのは面倒ですが、

Icon Gloss があれば一瞬で何度でも作れます! 

line001.png

  

幅 : 今回は、1px×空白1px ~ 20px×空白20px 

形式 : photoshopの.psd形式にて、レイヤー別に分けています。

サイズ : サイズは、yahooも始めた 幅:950px×縦:300px

もっと高さが欲しい人は複製して下に繋げて下さい。

Screenshot:

 line1.jpg

使い方:

l001.gif

背景は角丸長方形ICONGLOSSを使いました。 実際はあなたの画像でOKです。 

ストライプIconGloss を開き、好みの幅のレイヤーをアクティブにします。 今回は10pxです。

 

 l002.gif

 レイヤーをドラック&ドロップなどして、画像の上のレイヤーに配置してください。

   

l003.gif

下地レイヤー上で、 command(ctrl)+クリック  もしくは、選択範囲の読み込みで画像全体の範囲を指定します。

 

 l004.gif

選択範囲を反転 します。 画像以外が指定されている状態になります。

 

l005.gif

deleteボタンなどでレイヤーを消し去ります。 あ、、レイヤー間違ってる。。 

l006.gif

不透明度を調整して馴染ませて完成!

  

応用:

l0071.gif

 応用すればいろいろな事が出来ます。

上画像はわかりやすい色にて作りました。

1. ストライプの線の選択範囲を読み込む

2. 新規レイヤーを作り、作成した選択範囲内に、グラデーションツールで上に行くほど薄くなる様に塗りつぶし。

3. 背景画像の選択範囲を読み込む。

4. 選択範囲の拡大 2px を行って、下地画像の下に新規レイヤーを作成。

5. ちょっと濃い色で塗りつぶして、アウトラインを作成。

で、完成です。 右にあるのは分解図。 慣れれば作るのに1分かかりません。

 

 

zipファイルの中には、psdデータが入っています。 応用データもあわせて入れておきます。

使用後にリンクしてくれたら最高にうれしいです!

  斜めストライプレイヤー郡001 1px-20pxまで download : (1558)

Download 斜めストライプレイヤー郡001 1px-20pxまで download : Version 0.1

Downloaded a total of 1558 times

1スター2スター3スター4スター5スター (7 投票, 平均値/最大値: 4.71 / 5)
読み込み中 ... 読み込み中 ...

Comments:4

guest 08-02-26 (火) 11:37

便利かもしれませんね。
利用させていただきます。 感謝。

タイトルのところのストライプ(?)はこれとちょっと違うタイプ?

Icon Gloss 提供者@高橋 08-02-26 (火) 11:52

あ、違いますー
公開しようかしら?

あれはなんというか、3pxの間に空白1px で空白2pxって感じなんですが、アンチエイリアスを切ってあってー。。。やっぱ公開します。
ちょっとした錯覚です。

seico 09-06-17 (水) 9:03

いろいろな素材を無料提供してくださりありがとうございます。
ストライプさっそく使わせていただきます。

smilemonica@管理者 09-09-04 (金) 11:28

>>seico 様

いえいえいえありがとうございます。

本当に更新していないので、そうおっしゃられると気が引けるくらいです。

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://monosashi.com/gloss/archives/21/trackback
Listed below are links to weblogs that reference
web2.0風斜めストライプレイヤー ストライプジェネレーター風? from Web2.0デザイン・Web2.0アイコン無料ボタン クリーンアイコングロス

Home > 背景用レイヤー > web2.0風斜めストライプレイヤー ストライプジェネレーター風?

最近投稿された記事やGLOSS
コメントください。それが励み。
UserOnline
Sponsored Links
運営者情報

Return to page top