<< August 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
<< 今的なWebのデザインは・・・? | main | 今日はPHP研修 >>

ハムからみんなへお願い&お知らせ

相互リンク募集!
ハムにメールを送る時はここから
07月05日(Sat)

スポンサーサイト

一定期間更新がないため広告を表示しています

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ

  • 2014.07.05 Saturday
  • -
  • -
  • -
  • by スポンサードリンク

10月14日(Sun)

Illustratorでアクア風 角丸バナー作成方法

Web2.0的なネットのデザインを覚えねば!!
なんて思って手を伸ばしたWebパーツのデザイン…
ムズイよヽ(;´Д`)ノ

勉強がてら、作り方を書いてみた。

いろんなサイトを見て、
いろんな作り方をしてみたのですが、
これが一番しっくりくるな〜ってのをご紹介。

今回はこんなバナーを作ってみよう↓
実物


1、長方形ツールで好みのサイズで四角を作成
長方形ツールで好みのサイズで四角を作成

2、パステル的な色をつけてみる。
  (変更しやすいようにグラデーションでつくってみた)
パステル的な色をつけてみる
パステル的な色の四角形

3、外枠の色を濃い目につけておく。
外枠の色を濃い目につける

4、作ったものをコピーして、「Ctrl」+Fで同じ位置に2つ貼り付ける。
作ったものをコピー

5、一番上を非表示にする。

6、表示されている2つの角を丸くする。
  (今回は10pxにしてみた。)
表示されている2つの角を丸くする

7、一番下をを非表示にして、一番上を表示する。

8、一番上を半分上に移動させる。
半分上に移動

9、右クリックでグループ化を選択。
グループ化

10、パスファインダの交差を選択すると、頭の部分だけ残る。
パスファインダの交差を選択
頭の部分だけ残る

11、枠を消して、色をグラデーションで白っぽくする。
  画像の上側をより白っぽく、下側を少しだけ白く。
グラデーションで白っぽくする
上側をより白っぽく、下側を少しだけ白く

12、非表示にしていた一番下の画像を表示する。
一番下の画像を表示する

13、上に重なっている画像が少し大きいので、
  2pxくらい幅を小さくし、1〜2pxくらい下に移動して完成。



今回は影とかをつけないで作ってみたけど、
つけてみるとまた違った印象になることでしょう。

今回は水色で作ったけど、
もっといろんな色で作ってみようかな。

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ


07月05日(Sat)

スポンサーサイト

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ

  • 2014.07.05 Saturday
  • -
  • 20:42
  • -
  • -
  • by スポンサードリンク

【i2i】SEO対策ツール ロリポップ NetMile 見ると得する『CMサイト』
コメント
コメントする









この記事のトラックバックURL
トラックバック
categories
archives
recent comment
recent trackback
friend links
link list
あわせて読みたい
search this site.
tag cloud search
others
  • RSS1.0
  • Atom0.3
powered
みんなのブログポータル JUGEM
sponsored links