HOME>3Dテキスト

kon`s produce webdesign lecture!
<<|3Dテキスト|3Dドラムアドレス帳>>
   
3Dテキスト



3Dテキスト
  
 っていってもね
      こんな感じで    
          大きさ形を   
              変えていくだけ 


今度はテキストのみで奥行きをデザインしてみましょう。

上のような文字を浮き上がらせるテクニックはいろんなところで使われていますが、これは文字の色と大きさの調整によってできています。

とても簡単ですが、ウェブ素材の画像作成にも役立つノウハウなので確実に身につけておきましょう。


使用するのは主に
<font>タグです。
■3d-text

ホームページデザインでよく使われる技のひとつ。
テキストの色や形を変えるだけなので比較的簡単です。
文字の間隔によって立体的に見えるかどうかが決まってくる。



@奥行きを持たせたい文章を任意に分割。
文字数は下に行くほど、だんだんと少なく
なる等、比率を考えておく。
ここでもラフスケッチ等であらかじめ完成図を描いておくと良いでしょう。

行ごとの文字の間隔はナナメ、もしくは放物線を意識するとより立体的になります。




ウェブサイト<BR>
おしゃれに<BR>
しようよ。
ウェブサイト
おしゃれに
しようよ。



A各行のフォントの大きさを変える。
ここでは上にいくほど大きくなるように
する。
立体的に手前に来る方が大きくなるようにする。

文字サイズの指定:
<FONT size="文字の大きさ">文字</FONT>




<FONT size="+2">
ウェブサイト</FONT>
<BR>
おしゃれに
<BR>
<FONT size="-2">しようよ。
</FONT>
ウェブサイト
おしゃれに
しようよ。



Bフォントの色を指定。小さいフォント
ほど背景色に近い色にする。

HTMLは画像編集と違い、透明度の
設定ができないため、背景色と近づけ
ることで透明感を出すようにする。

参考:グラデーション色名表
文字色の指定:
<FONT color="色番号">
文字</FONT>




<FONT size="+2" color="#103909">
ウェブサイト</FONT><BR>
<FONT color="#32b01c">
おしゃれに</FONT><BR>
<FONT size="-2" color="#5be243">
しようよ。</FONT>
ウェブサイト
おしゃれに
しようよ。



C好みによって字体を変えていく。
大きい文字〈手前〉ほどはっきりと太いもの
にするとよい。

センタリングなどして位置を調整。

〈この回を参考にしよう!〉
フォントをロゴに!
グラデーション!



<center>
<FONT size="+2" color="#103909">
<B>ウェブサイト</B></FONT>
<BR>
<FONT color="#32b01c">
おしゃれに</FONT>
<BR>
<FONT size="-2" color="#5be243">
しようよ。</FONT>
</center>
ウェブサイト
 おしゃれに
     しようよ。
→次へ
プロの技!ウェブデザインの資料集
見やすさを意識した補色
e-bike


ウェブデザインの配色によって文字のみやすさは決まってくる。
その代表的なものが白地に黒文字という明暗コントラストの強い配色。
それ以外に文字を見やすくするのが「補色関係」の配色。
 このページのように青地に黄色文字も補色に近い関係で、文字が読みやすくなる。
 反面、補色関係はアクセントにはなっても、統一感に欠ける傾向があり注意が必要。
 ちなみにこのページは、メニューなどにマウスを合わせると青地→赤地にロールオーバーする。これではちょっとみにくくなりNG。
チュートリアルー第22回
立体文字でデザインしよう!


前回はテーブルタグを立体的にしました。
今回はフォントタグを使って立体デザインをしてみましょう。

@チュートリアル・サンプルページのメニュー部分にセルを追加します。→3行3列から4行3列へ。

A最も下の中央セルに立体にする文章を3行程記述。→1行目を大きく、2,3行となるにつれフォントサイズを小さくしてみよう。

B次は1行目のフォントカラーほど濃い色に2,3行目は薄い色へとグラデーションしていこう。

Cフォントを変える。(ここでは"Brush script"に)




topics
no data...
HOME>3Dテキスト
kon`sproduce All rights reserved
お問い合わせ





100MB無料ホームページ可愛いサーバロリポップClick Here!