デザインの学校 ウェブデザイン基礎編 第3回

前回、タグうちを実践した私たちの今日の課題は
FireWorksで画像作成し、HTMLを書き出すこと。
さっそく、Fire worksを使ってみます!!
まずは、新規作成で新しいキャンバスを準備します

  左側ツールボックスから、角丸矩形ツールを選択し、
好きな大きさの矩形を描きます。
下のプロパティの部分を操作して、色を変えたり、グラデーションをかけたりします。
さらに、ボタンを立体的にするために、フィルタのべベルを使います。

そこで、文字を入力して、さらにまたプロパティで文字のフォントや色を変更します。

こうして、ボタンが完成!!
    

さらに、今度はDream Weaverでの編集です
新規HTMLに先ほどの画像をレイアウトし、選択。
Dream Weaverの右メニューのビヘイビアからスワップイメージを選択し、こっそり作っておいたワントーン明るいボタンをスワップイメージとして参照します
作業が完了したら、そのファイルをブラウザで表示します
そして、画像の上にカーソルを合わせると…
おなじみロールオーバーと言う効果が完成です

next
next
next

こんな感じで完成~
3クリックでこんなことができてしまうなんて…
今日はじめて、Dream Weaverの機能を使ってびっくりしました
次は、どんなことができるのかな??
楽しみになってきたところで、基礎編はおしまいです
次回は、WEBデザイン応用編がスタートします!!

 

WEB(ホームページ)デザイン初級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

*

PAGE TOP