2009-01-01から1年間の記事一覧

課題 D0010:曲線をデザイン

FIREWORKSを使用したアニメーションGIF作成

FIREWORKSを使用して徐々に大きく、実体化する円のアニメーションGIFを作成します。1、新規作成でサイズを決定します。2、ツール→ベクターの楕円ツールを使用します。円を左上に作成しました。 3、F8を押してグラフィックにチェックし、シンボルへ変換し…

javascriptでページの先頭へスムーズにスクロールさせる方法

ページの先頭へ減速しながらスムーズにスクロールさせる方法です。 <必要なファイル>・HTMLファイル ・jquery.page-scroller.js(jquery.page-scroller-306.js) ・jquery.js(jquery-1.3.2.min.js) 参考URLhttp://coliss.com/articles/build-websites/operat…

メイン、サイドの背景設定

CSS

メイン、サイドの背景を設定したい場合、divの範囲はmainからfooterまでにしないと背景はFIREFOXでは表示されないことがある。例)headermain(float)side(froat)footer(clear) この2カラム設定でメイン、サイドに背景を表示させたい場合、divの範囲をma…

課題 D009:直線をデザイン

課題 D008:構図の練習(2)

課題 D007:構図の練習(1)

課題 D006:

AIDMAの法則とはAIDMA(アイドマ)の法則とは、Attention(注意)→ Interest(関心)→ Desire(欲求)→ Memory(記憶)→ Action(行動)の頭文字を取ったもので、アメリカのローランド・ホールが提唱した「消費行動」の仮説。 商売の基本で消費者の心理的プ…

課題 D005:

※この記事は課題です。解答は見ていない状況です。1、timesが細い明朝にと一緒に使用すると合うということは発見しました。2、和文フォントに合うこと(一般的に、明朝体は和文と黒さの近いセリフの欧文、 ゴシック体は和文と黒さの近いサンセリフの欧文を…

課題 D004:

※この記事は課題です。解答は見ていない状況です。 サンセリフ書体の代表的な書体→Helvetica Universe Helveticaのトレース1、まずはHelveticaのフォントで特徴のあるアルファベットを選択し、タイピング。今回は小文字のaと大文字のGを選択。2、文字全…

課題 D003:

※この記事は課題です。解答は見ていない状況です。 動物、野菜のシルエット。全体がわかる様に描画したものの、シルエットになるとこうも判りにくくなるのかと気がつきました。

課題 D002:

※この記事は課題です。解答は見ていない状況です。 紙(表示画面)に余白を設定し、基準となる文字が横幅いっぱいになるように大きさを設定して基準文字の大きさを決める。 基準文字に対して大きさを決定する。

課題 D001:

※この記事は課題です。解答は見ていない状況です。 1、・伝えたい情報をより伝えやすくする手段 ・見やすさ(目を落ち着かせる) ・遊び心2、・目玉となる情報 ・圧迫感を与えない ・目に与える電磁波の角度の調整(ステルスデザイン) ・長時間見てても目…

photoshop コピースタンプツールを使った画像の修正

photoshopで破れてしまったぬいぐるみを題材にコピースタンプツールを使用します。 右の頬が破れてしまってるのでこれを移植して修正します。1、使用するのはツールバーのコピースタンプツール 2、ブラシの大きさ、硬さを調整します。 3、破れた箇所に近…

Photoshop の起動時における環境設定のリセットする場合

<起動時における環境設定のリセット>アプリケーションの起動時に、(MAC)Command + Option + Shift キーを同時に押します。(WINDOWS)Shift+Ctrl+Alt キーを同時に押します。 これで不具合を解決、クリップボードのリセットをすることができます。 Adobe…

素材サイト

PHOTOSHOPのグラデーション・シェイプ・ブラシ・レイヤースタイルなどの配布先リストです。 <シェイプなど>http://dezignus.com/floristic_shapes/#more-162http://browse.deviantart.com/?catpath=resources/applications/customshape/&order=9&alltime=y…

黄金比グラデーション・白銀比グラデーション

参照:DesignWalker ロサンゼルスで働くウェブデザイナーの日記。http://www.designwalker.com/2007/09/gradient-ratio.html上記サイトで黄金比、白銀比グラデーションファイルを配布しているます。 グラデーションの比率を黄金比(1:1.618…) 上部と下部の…

cooliris

Cooliris 1.11 今使っているブラウザでWEB上・デスクトップ上の写真・ビデオを素早く、映画のように楽しめるプラグインをご紹介します。 まるでi-podタッチのようですね。 http://www.cooliris.com/product/

photoshop 鏡面反射

photoshopで夜間橋梁写真を鏡面反射の画像にします。WEBでもDTPでもよくみるphotoshopテクニックです。 1、素材画像のサイズを確認。 2、確認したら イメージ → カンバスサイズ で縦サイズ倍率と調整。 3、 バケツツールで背景を黒などにします。 4、Ctr…

photoshop 歪みフィルタで目の大きさ調整

photoshop の歪みフィルタで人物の目の大きさを修正します。1、ツールのフィルタ→ゆがみを選択します(6.0では編集→ゆがみ) 2、ゆがみ画面に切り替わります。 3、小さいものを大きくしたい場合は を使用します。 4、変形させたい部分以外の箇所はマスキ…

Website Explorer

リンク追跡機能によって、指定されたウェブサイトの階層構造とファイル構成をエクスプローラ形式で表示できるそうです。 参考: http://www.umechando.com/webex/download.htm <下記注意事項> 個人での非商用利用に限り無償で使用することができます。 商…

photoshop 修復ブラシツールを使った人物肌の補正

photoshop の修復ブラシツールを使って人物の肌のしみを取ります。 1、素材の写真を用意 2、修復ブラシツール を選択 3、ブラシの硬さ、大きさを調整します。 4、近い色の肌あたりにマウスをもってきてALTキーを押しっぱなしにします。 カーソルがターゲ…

positionプロパティ

CSS

・positionプロパティ指定した要素の配置方法を指定するためのプロパティ。 :static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。:relative 相対位置への配置となります。positionプロパテ…

floatプロパティ clearプロパティ

CSS

・floatプロパティ指定した要素のボックスを左、または右に寄せて配置し、後に続く要素をその反対側にフロート(浮遊化)指定する。 このプロパティを使用する際にはwidthプロパティで幅を指定する必要がある。(画像などの置換要素に指定する場合は除く。置…

float例

CSS

①HTMLヘッダーサイドメニューコンテンツフッター※下記図のようになる ②CSSで全体、レイアウトの設定。pの幅高さ設定。/* 全体の設定ここから */body{background-color: #999999;color: #FFFFFF;}/* 全体の設定ここまで */ /* レイアウト設定ここから */div#w…

グローバルナビのフロート

CSS

<HTML>listの記述<ul id="globalNavi"> <li><img src="a.jpg" width="120" height="30" alt="" /></li> <li><img src="b.jpg" width="120" height="30" alt="" /></li> <li><img src="c.jpg" width="120" height="30" alt="" /></li> <li><img src="d.jpg" width="120" height="30" alt="" /></li> <li></li></ul>

marginを使ったブロックレベル要素の中央寄せ

CSS

ブロックレベル要素のセレクタにmargin-right: auto;とmargin-left: autoにすることでその要素全体を中央寄せにすることができる。例)ページ全体を中央寄せにする。 wapper部分(大外)に margin-right: auto; margin-left: auto; を適用。 ※もしくは margi…

marginとpadding

CSS

・上下左右margin:時計回りに margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;※autoにすると左右中央そろえ。 ・上下左右padding:時計回りに padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;※上下のパディン…

自分で作ったid名

CSS

・自分で作ったid →基本的に{margin:0;padding:0;}はつけておく。

ページの幅設定の注意

CSS

・bodyセレクタに直接widthプロパティを指定しては駄目。 →子要素にブロックレベル要素、インライン要素があるから。必ずdivラッパー設定にする。■HTML<body> <div id="wrapper"> </div> </body>■CSS div#wrapper{width: 600px;}