2011-03-01から1ヶ月間の記事一覧

photoshopのグラデーションオーバーレイ

レイヤーのFxからグラデーションオーバーレイでグラデーションを変更したら新規グラデーションを押すと新しいグラデーションを残していつでも同じグラデーションを使うことができる。

comp

カンプでホームページのレイアウト練習 Photoshopを開く新規640px・550px 白 表示→環境設定→単位・定規→ピクセル 表示→新規ガイド→水平方向(Y軸) 10 35 80 90 250 260 280 表示→新規ガイド→垂直方向(X軸) 10 35 120 130 180 420 430 600 610 表示→ガイドをロ…

イラストレーターでmapを描く

角丸長方形で描く。 角の丸さはアローキ(→↓←↑)で合わせられる。 道を一つ書いたらAltでコピーしながら複製して道幅や長さを変えていく。 線路は線(パスツール)で描く。 線の始まりをクリックし終わりにマウスを持っていきShiftを押しながらクリックすると直…

photoshopで作るspacer.gif

新規→1px・1px・カンバスカラー透明→OKweb用保存(Alt+Shift+Ctrl+s) spacer.gifで保存する。

htmlテーブルレイアウトの空白セルでレイアウトが崩れないために。

htmlで表を作成した時に空白セルができてしまう時 class名を入れてcssで指定する。 古いやり方ではspacer.gifで透明の画像を入力する。 とりあえず空白だとブラウザが勝手に16pxに合わせてしまい16pxよりは小さくすることができないので、とりあえず中を埋め…

javascript

http://webclilin.ninpou.jp/

webデザイン勉強javascript

webデザイン勉強、きょうはphotoshopで作ったメニューバーを javascriptで画像置換今回の画像はこちら↓http://webclilin.ninpou.jp/ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

Photoshopポラロイド風写真の加工

新規→600px・400px □ツールで固定250px・250pxで四角を描く Fx→ドロップシャドウ→距離0 この中に固定を外して、もう一つ四角を描く Fx→シャドウ(内側) 載せたい写真をPhotoshopで開きドラッグで持ってくる。 もしサイズが合わなかったらトリミングをしたり…

ActionScript今までの用語のまとめ

onrelease 押してはなしたら(ボタンは全て) nextFrame 次のフレームへ進む prevFrame 前のフレームへ戻る onPress 押したら反応 undefined 放したら反応しない function 関数(命令を決める) _root 画面の中の1部分を動かしたいとき Math.floor 小数点切り…

Flash ActionScript 変数宣言

アクションスクリプトで変数名に対して条件をつけていく。 変数名は自由に決めてよいが頭文字には数字や記号をつけない。var 変数名=値; Question ビール12本・ウーロン茶2本・サラダ2皿・チキン2皿・ピザ2枚 4人で割り勘した時の一人あたりの支払額は? …

Flashリップル効果

画像はこちらで↓http://web-clilin.jimdo.com/ 新規で開く→サイズ編集→600px・200px ステージ濃い色を選ぶ 文字ツールを選んで文字を入力。 文字サイズは70〜80くらいにする。 修正→分解 文字の左から順番になっている。 修正→タイムライン→レイヤーに分配 …

Flashでギャラリー作成

Flashはここへ↓ http://web-clilin.jimdo.com/?logout=1まずPhotoshopで写真の加工をする。 今回写真のサイズは400px・300pxにそろえた。 Flash新規2.0→プロパティ→サイズ編集→600px・400px ファイル→読み込み→ライブラリーに読み込み タイムライン1に1の…

javascriptでクロスフェード

crossfade.jsをダウンロードする。htmlのtitleの前に>|| を記入する。 crossfadeを開きcrossfadeの1000の値のところが画像の切り替わる時間で 上下の値が同じだと、消えると同時に出てくる。(1000=1秒)crossfadeの1000の値を変える。 上側が小さいサイズ …

Photoshopで写真のサイズを合わせる。

クロスフェードさせるためにサイズをあわせる。 画像はこちらから↓http://web-clilin.jimdo.com/ 新規→600px・400px ダウンロードした画像を開く。 ドラッグしやすいようにPSから切り離して別ウィンドウで表示する。 レイヤーのサムネイルをドラッグして 先…

FLASHの制御ボタン

画像はこちら↓ http://web-clilin.jimdo.com/?logout=1 動くものは1つのレイヤーに1つにする。 タイムラインに新規レイヤーを作り上下のレイヤーにロックをかける。 挿入→新規シンボル→ボタン→スタート→OK タイムラインにアップ・オーバー・ダウン・ヒット…

2カラム+ナビゲーション

foatを使ってレイアウトを崩さないために ポイントはliにfloatをつけたため、widthを入力している。また、liを囲んでいる大外の#navにもwidthを設定してレイアウト崩れを防ぐ。また、floatのものにmarginはつけずに外枠のものにつけること。 #content・#side…

 list-style-image

画像は左上合わせになってしまい、文字と高さが合わないので調整する。 合わない理由は文字にはアセンダがあり画像にはないため左上に表示されてしまう。画像にははlist-style-imageは使わない。 background-imageを使用する。何も指定しないと左上になって…

外部リンク

手打ちで入力する際には@charset"utf-8" を最初に必ず入力すること。

DreamWeaver

xml:lang="ja" lang="ja"と入れるのは 新旧対策で2回入力する。

外部リンク

1行でもデーターを軽くするために。 スタイルシートのの中をカット(Ctrl+X)してファイル→新規→CSS にペースト(Ctrl+V) 2行目の*/CSS */はDeleateしてよい。 保存→htmlと同じ階層のところに保存する(base.css)htmlのテキストに戻ってstyleをすべてDelea…

初DreamWeaver

今まで手打ちだったから、DWにしただけで色々とできて面白かった。 特にカラーを選べるところが画期的だった。 DW上でライブビュー、プレビューがみられることも、CSSに入力した内容がすばやく見ることができて、思い通りに指定できてるか確認できてよかった…

パブリッシュ設定

アップロード用は普通に保存した後にパブリッシュ設定 flashのㇾを外してファイル名をかき、拡張子は.swf flashにㇾをつけてパブリッシュ→OK (保存したものと同じ階層のところに保存される。)

Flash

画像はここから↓http://web-clilin.jimdo.com/?logout=1今日は初Flashだった。 楽しかった。 ポイントを軽くおさらい。 新規で幅450で作る。 ツールを選んで下から2つ目の四角の中に○があるつーるをクリックしてから描くと青い枠がでて、移動できる。 縁の線…

ロールオーバーのボタンがくっつく。

onmouseoveとonmouseoutでホバーのときに画像が変わる。img src="フォルダ名/画像名.jpg" alt="画像の説明" width="幅" height="高さ" onmouseover="this.src='フォルダ名/画像名._o.jpg'" onmouseout="this.src='フォルダ名/画像名.jpg'"画像を保存するとき…

背景画像と横並びのナビゲーションとhover

<html xmlns="http://www/w3/org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta heep-equiv="Content-Type" conten="text/html;cgarset=utf-8"/> <title>ナビゲーション</title> </meta></head></html>

イラストレーターで立体的に

3D効果で立体的に ペンツールで描く 効果→3D→回転体 完成 グラデーション効果で立体的に 円を描いて色を塗る。線はなしにする。 カラーパレットをグラデーションのところにドラッグすると 同じ色でグラデーションになる。拡大・縮小ツールで比率を保ったま…

イラストレーター

矢印を描いて色の濃度を変える。 長方形ツールで縦長の長方形を描く。 色を塗る。 Alt+Shiftで水平方向にコピーしていく。カラーパレットからスウォッチパッレットヘその色をドラッグする。 持ってきた色をWクリックする。 グローバルのところにチェックを入…

横並びのナビゲーション

hoverも使ってみた。 <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equive="Content-Style-Type" content="text/css"> <title>rabit</title> <style type="text/css"> </meta></meta></head></html>

リンク

a:link a:visited 行って戻ってきたとき a:hover マウスを合わせたとき a:action クリックしたときこれらの順番通りCSSには記入すること!aには画像が入ったりいろいろ指定が増えるので 疑似クラスとは別に記入したほうがBetterなようだった。|

IllustratorとPhotoshopでアニメーション

イラストレーターを新規・プロファイルをwebで開く。楕円形選択ツール等でイラストを描く。 (!グループ化はしない。)出来上がったらレイヤーを複製する。目玉を動かす。また複製する。これを何回も繰り返す。ファイル→書き出し→ファイル名(ローマ字).ps…