虹を描く画像を用意します 「グラデーションツール」を選択して、オプションバーで「円形グラデーション」を選択 グラデーションエディエタを開き、「透明（虹）」を選択して下にあるグラデーションタイプを右側へ全てスライドさせます 新規レイヤーに、画像…

海水魚ギャラリー（海水魚の飼育） 配布元の「LEIGEBER」のサイトより「Animated JavaScript Slideshow」ファイルをダウンロードします 10枚の写真を用意して、Photoshopで「メイン用とサムネール用」にトリミングします JavaScriptの「compressed.js」と「s…

配布元の「LEIGEBER」のサイトより「JavaScript Dropdown Menu with Multi Levels」のファイルをダウンロードします 箇条書きリスト（ｕｌ、ｌｉ）を使ってグローバルナビゲーションを記述します header内にscriptを記述して「script.js」を読み込みます ド…

素材写真 背景のレイヤーを黒にします 長方形選択ツールを選択して、スタイル：固定 幅と高さに任意の数値に設定します(今回は80pxの正方形にしました) レイヤー１の画像に、選択範囲を配置します レイヤーパレットで、レイヤーマスクを追加すると、選択範囲…

LIGHT UP 文字をビルに見立てて、窓にスポットライトをあてている感じで制作しました。 ベースの文字を「Impact Regular 150px」に設定して、アウトラインにする この文字にグラデーションを適用 新規レイヤーに、ビルの窓を作成します 長方形ツールで長方形…

東京２３区の「花」 Illustratorで東京２３区の地図を作成 画像をライブラリに読み込みます ２３区全ての画像をボタンシンボルに変換して、「アップ・オーバー・ダウン・ヒット」にキーフレームを挿入 「アップ（緑）・オーバー（オレンジ）・ダウン（オレン…

テーマ：エコ 作業時間：25分

セサミストリート 6枚の画像を用意して、Photoshopで「400×300」と「150×113」にトリミング 配布元のSexy Light Boxよりファイルをダウンロード JavaScriptの「mootools.js」と「sexylightbox.packed.js」を＜header＞内に読み込ませます＜script src="mooto…

美容室 hair design Natural｜ナチュラル Illustratorにてカンプを作成後、Dreamweaverのコードビューを使って手打ちで制作しました ≪制作ポイント≫ 初めてのお客様でも安心していただけるサロンをイメージして制作しました HOME／CONCEPT／MENU／STAFF／ACC…

美容室 hair design Natural 期間限定キャンペーン！！ 作業時間：30分 カットモデル募集！！ 作業時間：15分

美容室 hair design Natural 美容室のホームページのTOPページ用として作成しました 4枚の写真を用意 Photoshopでトリミング後、「.jpg」で保存します 写真をライブラリに読み込みます 各写真をレイヤーごとに配置 シンボルに変換（ムービークリック） キー…

大きさの異なる正円を作り外側の正円に「ジグザク」を実行後、「アンカーポイントの追加」を実行します頂点部分のアンカーポイントをペンツールにて削除します 再度、「アンカーポイントの追加」を追加して、谷間部分のアンカーをペンツールにて削除します …

競馬情報サイトのバナー 作業時間：1時間 ■しろうさぎの作品「一人前のwebデザイナーになるために｜webnotebook」にアップ中！！

「モザイク」フィルタを使って 「モザイク」フィルターを使って、画像をタイル型のオブジェクトを作成 ■完成 ■素材日本地図 「ラスタライズ」で、ビットマップ形式に変換します 「モザイク」で、画像を複数のタイルを並べた状態にします 「角を丸くする」で…

IKEA｜イケア 「IKEA｜イケア」のサイトをお借りしてＣＳＳレイアウトでリ・コーディングしました。 IKEAサイトのキャプチャーを撮り、Photoshopで画像をスライスしました グローバルナビゲーションの画像置換はJavaScriptの「rollover.js」を利用しました …

英文字筆記体を使って 英文字筆記体（Edwardian Script ITC）を使ってちょっとアンティークでエレガントな「蝶」を描きました。「Ｇ」をリフレクトコピーして組み合わせてグラデーションでカラーをつけました作業時間：15分■しろうさぎの作品「一人前のwebデ…

ワープとブレンドを使って アウトライン化した文字をブレンンドツールを使って飛び出す文字のイメージを作成

シンプルなライン 楕円形選択ツール と 長方形選択ツール にて作成

ギフト プレゼント ■しろうさぎの作品「一人前のwebデザイナーになるために｜webnotebook」にアップ中！！

リボン 長方形ツールで、ひとつの長方形を描き[オブジェクト→エンベロープ→ワープで作成→アーチ]を選択コピー、グラデーション、リフレクト、回転を繰り返してリボンの形にします

モデルルーム｜modelroom 室内イメージをクロスフェードしながらループ再生サムネールのボタンをクリックするとその室内の写真が表示されます 6枚の写真を用意 メイン写真は「600px×400px」、サムネール写真は「100px×47px」にトリミング 各写真に「リビング…

無料メルマガ登録のボタン a:link a:hover 作業時間：20分 ■しろうさぎの作品「一人前のwebデザイナーになるために｜webnotebook」にアップ中！！

クロスのアイコン サイズ：８px×８px Phoptoshopの「DICカラー」と「web色相」のカラーを開いて 一つのアイコンに5つのカラーを使用して作りました。総作成時間：5分

ハンバーガー ⇒⇒⇒作業時間：13分

長方形ツールで作成した一つの図形から作ります。45度回転させて、縮小拡大にて変形後、[オブジェクト-変形-移動]を実行してさらに変形させます 180度、回転コピーを実行後２ヶ所のアンカーを削除しますそのまま、リフレクトツールでコピーを実行後90度、回…

Ｓａｌａｄ ｂａｒ（サラダバー） イメージ写真をクロースフェードさせながらサラダバーの紹介 ■しろうさぎの作品「一人前のwebデザイナーを目指して｜webnotebook」にアップ中！！

ガラスを貼り合せたイメージで画像を分割する 完成写真素材写真画像の上に正方形のセルを整列、それぞれのセルにランダムな不透明度を適用することで、ガラスを張ったようなイメージが完成します。 正方形のセルをを作り、横に１２個整列させたら、縦方向に…

POLA｜企業情報｜文化活動｜ポーラ文化研究所 POLA｜企業情報｜文化活動｜ポーラ文化研究所 サイトをお借りして テーブルレイアウトからSCCレイアウトにリコーディングしました 作業時間：5時間 POLA｜企業情報｜文化活動｜ポーラ文化研究所のサイトをキャプ…

複合パスを使った画像配置 ■完成 ■素材写真 ■しろうさぎの作品「一人前のwebデザイナーを目指して｜web designbook」にアップ中！！

春をイメージしてスプリングカラーにしてみました■使用ツール 選択ツール 楕円形ツール グラデーションツール ドロップシャドウ 作業時間：10分 ■しろうさぎの作品「イラスト｜一人前のwebデザイナーを目指して｜web designbook」にアップ中！！