3-2素材作成photoshop

3-2素材作成photoshop

フォトショップ フォトショップの主な機能 写真の修正、加工、合成 イラストの書き起こし 起動してみる フォトショップのアイコンをダブルクリック(mac) スタート→すべてのプログラム→フォトショップ(windows) 基本画面 メニューバー………………各種機能 パレット……………………表示がない時はメニューバーのウインドウに収納されている(チェックが入っていればパレットは出ている状態) ツール……………選んだツールの詳細が、オプションバーに出る フォトショップでデータを開く データを開く方法はいくつかあります...

3-4WEB素材作成のためのイラレ基礎

イラストレーター WEBサイトは閲覧者がまずチェックする企業や店舗の顔とも言えます。 美しい画像や、デザインでサイトに訪れた閲覧者の関心を集めましょう。 イラストレーター全機能の……40パーセント程度を扱います。 図形……1 長方形を作る ツールボックス → 長方形ツールを選択する → クリック → ドラッグ → 放す 正方形を作る ツールボックス → 長方形ツールを選択する → 画面をクリック → 数値入力 最初に表れる数値は、前回に作った長方形の数値である いろいろな図形を作ってみる 1.多角形……………………ツールボックス...
3-2素材作成photoshop

3-3素材作成 Illustrator

イラストレーター イラストレーターの主な機能 イラストの書き起こし 起動してみる イラストレーターのアイコンをダブルクリック(mac) スタート→すべてのプログラム→イラストレーター(windows) 基本画面 メニューバー………………各種機能 パレット……………………表示がない時はメニューバーのウインドウに収納されている(チェックが入っていればパレットは出ている状態) ツール……………選んだツールの詳細が、オプションバーに出る イラストレーターでデータを開く データを開く方法はいくつかあります...

4-1テンプレート

テンプレートとは WEB サイトを作るにあたって、1ページのみということはありません。 ヘッダー、ナビゲーション、フッターなどの各ページ共通の項目があることがほとんどです。 1ページ仕上げてからコピーするという方法もありますが、それでは修正があったときに1ページずつ 対応しなければなりません。そこでテンプレートという機能を使用します。 レイアウト済みのHTMLファイルをテンプレート化する テンプレート化したいファイルを開く → メニューバー → テンプレートとして保存 → 任意のファイ ル名をつける →...
4-2テーブル

4-2テーブル

テーブルレイアウト 簡単にリストなどが作れる 主に表組みを作るときに使用する テーブルのデザイン要素 テーブルの挿入 新規ファイルを開く → テーブルを挿入したい箇所にカーソルを合わせる → メニューバーの挿入、 テーブル → 行と列を確認してok 専門用語 キャプション…テーブルのタイトル 専門用語 サマリー…テーブルの説明文、グラフ内容をなるべく詳しく記入  行、列の追加 挿入したい箇所後ろのセルにカーソルを置き、右クリック → テーブル → 列の追加もしくは行の追加をクリック → 挿入されました 文字の入力...
4-3クラスルール

4-3クラスルール

cssでclass属性を使用する スタイルシートにより見出しタグには色を付けたりなどデザインできますが、「内容上一部分だけ太字にしたい」「色を変えたい」などの時もスタイルシートを使用します。 理由は今まで通り、変更があった際に一気に変更できる為です。 クラスルールを作成する → 新規cssルール → セレクタタイプ → クラスを選択→ 任意の名前を付けok(ここでは.redとします) → 試しに文字色を赤にしてok → 文字の色を赤色にしたいタグ、もしくは部分を選ぶ → プロパティパネル → スタイル → redを選択 →...

5-1サーバー

いよいよアップロード ローカル上で自分のサイトが完成したら、サーバーにアップして実際にアクセスしてみよう リモート情報を設定 メニューバー → サイト → サイトの管理 → 自分のサイトを選択し、編集 → カテゴリからリモート情報を選択 → アクセスをFTPにする → FTPホスト、ホストディレクトリ、ログイン、パスワードを入力 → テストをクリック → 接続されましたと出たらokをクリック リモートサイトを見てみよう リモートサイトとはサーバー側のことです...

5-2サーバーの契約、ドメイン取得

ドメインの取得し、サーバーをレンタルしましょう。 ドメイン取得方法 ドメイン管理会社は、大きく実績があるところを必ず選んでください。 ドメイン管理会社のサーバーが止まると、サイトが表示されなくなります。 ドメインは、どの国の会社で取得してもほとんど変わりがないので、日本のドメイン会社をお勧めします。 日本でのドメイン管理会社 ・お名前 com レンタルサーバー契約 レンタルサーバー会社と契約しましょう。 レンタルサーバー会社は、無数にありますが、...

6-1自分のサイトを作ろう!

今まで学んだことを生かし、LESSON-1の手順に沿って自分のサイトを制作していきましょう 1.目的の設定 あなたはどんなサイトが作りたいですか? 学校紹介のサイト(コーポレートサイト) 趣味の二胡を販売するサイト(ショッピングサイト、ブランドサイト) 上海のお得なレストランなど情報発信のサイト(ポータルサイト) ※教科書として中国語語学学校のサイトを作ることにしましたが、みなさんはこれにならって自分の作りたいサイトを作成して下さい。 ターゲットユーザー決めよう 上海にいる駐在員、またはその家族、奥様...
7-1webデザイン

7-1webデザイン

webサイトをデザインする前に デザインを始める前にwebサイトデザインの作り方基本をおさらいします。 下記ソフトの何を使用してデザインしても構いません。 ただし、コーディングを他の方に依頼する等の場合はファイル形式を合わせる必要もあり、シェアの多いphotoshopでの作成が望ましい。 Illustrator(本来は印刷用のソフト、web制作もできなくはないが効率は悪い。ただし直感で使用できる使いやすさがあるため、印刷物デザインからのデザイナーの人気は高い。起動、保存が遅いなどのストレスもあり)...
7-2 スライスツール

7-2 スライスツール

パーツごとに保存する デザインが完成したらそれをパーツごとに保存します。 先に学んだとおり、パーツ一つ一つを保存するのもいいのですが、今回はphotoshopのスライスツールを使用し効率よく保存します。 スライスツールを使ってサイト全体図からパーツを保存 → photoshopでデザインを開きます。(.aiデータは書き出し → 72ppi、jpgで保存して開く) → ツールボックスからスライスツールを選択 → スライスしたいパーツ箇所をドラッグして選択 → スライスの上で右クリック → スライスオプションを編集をクリック →...

8-1コーディング

htmlで組み立てる デザインパーツが仕上がったら材料をhtmlに挿入してコーディングしていきます。 文章がまだ仕上がっていない場合は仮文章で配置します。 → dreamweaverを起動 → 新規サイトを定義参考lesson1 → imagesフォルダを作成、もしくはphotoshopからスライスを書き出し → index.htmlを作成し材料を挿入。htmlタグでマークアップしていく <h1><p> タグや <ul> リストなど、コンテンツに直接関わる HTML タグ  HTML...

9-1SEO対策

seo 検索エンジン最適化 (英: Search Engine Optimization, SEO:サーチ・エンジン・オプティマイゼーション) 検索結果でより上位に現れるようにウェブページを書き換えること。 または、その技術のこと。 検索エンジンの検索結果が上位、特に1ページ目に表示されるかどうかということは、顧客を呼び込めるかどうかに関わる、極めて重要な問題です。...

9-2ファビコン

ファビコンの設置 ファビコンとはタイトル横に表示されるアイコンのことです 大手のサイトは大体設定しています ファビコン Favorite icon(フェイバリット・アイコン)という英語の語句を縮約したもの ファビコンの作成 → イラストレーター等で正方形GIFイメージを作成 → ファビコン生成サイト(http://www.htmlkit.com/services/favicon/)にアクセス ※他のサイトを使用しても構いません。「ファビコン 生成」で検索 → Source Image:...

10-1その他htmlサイトでできること

静的なhtmlサイトは完成したと思います。 基礎コース最後の回では質問などをして疑問の残らないようにして次のステップに進んでください。 この回ではその他できる事を簡単に見ていきます。 JavaScript JavaScriptは、プログラムを記述するための言語のひとつで、動きのあるサイト作成に役立ちます。 JavaScript を始めるのに特別なソフトは必要ありません。通常の HTML ファイルと同様、ソースコードに書き込んでいけばいいだけです WEBデザイナーはプログラマーではないので既存のプログラムをカスタマイズして設置します...