目的:hover画像をつくる時 ファイル→ドキュメントの設定→アートボードの編集でアートボードのサイズを調整できる(この時、切り抜きたい画像は別レイヤーにしておく)
水滴の描き方 楕円形ツールで正円を描く→ペンツールのアンカーポイントの切り替えで頂点をクリック→後はダイレクト選択ツールで形を調整する 吹出しの描き方 楕円形ツールで楕円を描く→吹出し部分を作るために楕円を二つ作って[パスファインダ]の前面オブジ…
書いた図形を選んで[オブジェクト]→[パス]→[パスのオフセット]。 内側ならマイナスpx、外側ならプラスpx。
バージョンは1.8.2を使用すること script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" <html> <head> <meta charset="utf-8"> <title>toggle</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <style> p{ cursor: pointer; } #container{…</meta></head></html>
シャツの書き方 四角を書いてグラデーションツールを使って立体的に見えるようにする。 効果→パスの変形→パスの自由変形で台形に形を調整。 円を重ね、立体的に見せる。 襟はペンツールで書き、影の部分は重ね順を背面にする。 ボタンも同じ要領で4つの円を…
<html lang="ja"> <head> <meta charset="utf-8"> <title>かわさきコンテンツアワード2011</title> <link rel="stylesheet" href="css/style.css" media="all"> </head> <body> <div id="container"> <header> <h1><img src="img/header.jpg" width="750" height="308" alt="かわさきコンテンツアワード2011"></h1> </header> <nav> <…</nav></div></body></html>
<html> <head> <meta charset="utf-8"> <title>css sprite完成版</title> <style> body,div,ul,li,a{ margin: 0; padding: 0; } a{ text-decoration: none; } ul{ list-style: none; } #container{ width:800px; margin: 0 auto; } ul{ width: 800px; height: 50px; } li{ float: left; } li a{ width: 160px;…</meta></head></html>
onMouseOver = " this.src = ' images/◎◎.jpg ' " onMouseOut = " this.src = ' images/◎◎.jpg ' " <html> <head> <meta charset="utf-8"> <title>画像置換</title> <link rel="stylesheet" href="style.css" media="all"> </head> <body> <div> <h1>風景写真</h1> <p>※画像上へマウスを移動すると、その画像をカラーで表示します。</p> <ul> </ul></div></body></html>
<html lang="ja"> <head> <meta charset="utf-8"> <title>H14</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <header>header</header> <div id="wrapper"> <section id="left">section01</section> <section id="right">section02</section> <article>article</article></div></div></body></html>
<html lang="ja"> <head> <meta charset="utf-8"> <title>H13</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper"> <div id="main"> <h1> <img src="img/logo.gif" width="267" height="129" alt="Patisserie camellia"> </h1> <ul> <li><a href="#" class="info"><span>…</span></a></li></ul></div></div></body></html>
<html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <ul class="thumbnail"> <li><img src="img/thum01.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='img/img01.jpg'"></li> <…</ul></div></body></html>
イラストレイターで書いたイラストをレイヤーを重ねて動きが出るように作る。 ファイルの書き出しからフォトショップ形式で保存(なるべくデータは軽くしておく)。 フォトショップで保存したファイルを開き、グループになっているものはレイヤーを統合。 アニ…
新規レイヤーに白の土台を作り、境界線をつける。 土台の下に同じサイズの黒の塗りつぶしを作り、ボカシ(ガウス)をかけ回転させ影を作る。 余分な影を削除し、画像をペーストする。 画像を切り抜きたいサイズのシェイプを作り、クリッピングマスクで切り抜き…
prompt( メッセージ );はダイアログボックス内の記述と入力欄の初期値を入力できる(入力しなくてもいい)。 <script> var rate = 100; var doll, yen; doll = prompt('金額をドルで入力して下さい','半角数字で入力して下さい'); yen = doll * rate; alert (yen + '円</script>…
<html lang="ja"> <head> <meta charset="UTF-8"> <title>H12</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1><img src="img/logo.gif" width="290" height="38" alt="サンプルスタイルシートカンパニー"></h1> <div id="nav"> <ul> <li id="top"></li></ul></div></div></div></body></html>
alert('文字');はダイアログボックスで表示。 console.log(x);はブラウザの拡張機能のコンソールで表示。 var 変数名=値;は変数宣言。値を代入します。 document.write(c);はブラウザに表示される。 <script> var a; a = 10; a = 20; console.log(a);/* 後に書いたも</script>…
まずレイヤーを複製。 シェイプツールでサイズを固定。 テキストは中央揃えで打ち、ボタンと中央揃え。 レイヤーをグループ化し、複製を作り移動。 Hover用のグループのシェイプレイヤーだけ選択し色を変更。 全てのシェイプレイヤーにCtrl+クリックで選択範…
<h1>写真をアップロード</h1> <form action="#" method="post" enctype="multipart/form-date"> <p>写真:<input type="file" name="picture"></p> <p><input type="submit" value="送信"></p> </form>
<h1>パスワード入力</h1> <form action="#" method="post"> <p>パスワード:<input type="password" name="password" size="10" maxlength="5" value="パスワード"></p> <p><input type="submit" value="送信"></p> </form>
<h1>チェックボックス</h1> <form action="#" method="post"> <p>スマートフォン: <input type="checkbox" name="mobile" value="1" checked>i Phone <input type="checkbox" name="mobile" value="1">Android <input type="checkbox" name="mobile" value="1">その他</p> <p><input type="submit" value="送信"></p> </form>
<form action="#" method="post"> <h1>ラジオボタン</h1> <p>性別：<input type="radio" name="sex" value="male" checked> 男性<input type="radio" name="sex" value="female">女性</p> <p><input type="submit" value="送信"></p> </form>
<html lang="ja"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="#" method="post"> <h1>お問い合わせフォーム</h1> <p>名前：<input type="text" name="name" size="20" maxlength="10" value="お名前"></p> <p>内容：<textarea name="subject" rows="8" cols="40">お問い合わせ内容</textarea></p> <…</form></body></html>
四角をまず複合パスで作成（この時画像の選択は解除）。 次に画像と複合パスをクリッピングマスクで作成。
スポイトツールで画像から色を抽出。 画像の下に抽出した色をベタ塗り。 その画像にマスクをつけ、グラデーションツール。
ドロップシャドーを使って、白文字を浮き上がらせる。 距離をゼロにすると下から浮き上がって見える。
選択範囲の反転をうまく使い、塗りつぶしの範囲を変えていく。
全てを選択で境界線をぼかし、選択範囲を反転で塗りつぶし。 使ったショートカット Ctrl + A = 全てを選択 Ctrl or Alt+ BackSpace = 選択範囲を塗りつぶし
<html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style3.css"> </head> <body> <div id="container"> <div id="header"> <p>ここにheaderが入る</p> <div id="nav"> <ul> <li id="home"><a href="#"><span>home</span></a></li> <li id="food"><a href="#"><span>…</span></a></li></ul></div></div></div></body></html>
多角形選択ツールを使い選択範囲を決め、その範囲内にペーストする。 使ったショートカット Ctrl+Shift+V = 選択範囲内へのペースト
選択ツールで画像をドラッグしてレイヤーできる。 コピーペーストをするより、メモリを消費しないで済む。
